@mantine-vue/hooks 3.6.0 → 3.7.0

package/cjs/index.cjs

@@ -118,6 +118,10 @@ function useDebouncedCallback(callback, waitOrOptions) {
 }
 //#endregion
 //#region src/use-click-outside/use-click-outside.ts
+function resolveElement(value) {
+	if (!value) return null;
+	return "$el" in value ? value.$el ?? null : value;
+}
 function useClickOutside(callback, events = ["mousedown", "touchstart"], nodes, enabled = true, capture = false) {
 	const element = (0, vue.ref)(null);
 	let activeEvents = [];
@@ -129,7 +133,10 @@ function useClickOutside(callback, events = ["mousedown", "touchstart"], nodes,
 		const resolvedNodes = nodes ? (0, vue.toValue)(nodes) : void 0;
 		if (resolvedNodes) {
 			if (resolvedNodes.every((node) => !!node && !path.includes(node))) callback(event);
-		} else if (element.value && !path.includes(element.value)) callback(event);
+		} else {
+			const targetElement = resolveElement(element.value);
+			if (targetElement && !path.includes(targetElement)) callback(event);
+		}
 	};
 	const cleanup = () => {
 		activeEvents.forEach((event) => document.removeEventListener(event, listener, activeCapture));
@@ -518,12 +525,8 @@ function useForceUpdate() {
 //#region src/use-id/use-id.ts
 var idCounter = 0;
 function useId(staticId) {
-	const id = (0, vue.ref)(staticId || "");
-	(0, vue.onMounted)(() => {
-		if (!id.value) id.value = `mantine-vue-${++idCounter}`;
-	});
-	if (staticId) id.value = staticId;
-	return id;
+	if (staticId) return (0, vue.ref)(staticId);
+	return (0, vue.ref)(`mantine-vue-${(0, vue.getCurrentInstance)() ? (0, vue.useId)() : `fallback-${++idCounter}`}`);
 }
 //#endregion
 //#region src/use-idle/use-idle.ts
@@ -1710,20 +1713,25 @@ function useLogger(componentName, props) {
 function useHover() {
 	const refTarget = (0, vue.ref)(null);
 	const hovered = (0, vue.ref)(false);
-	let cleanup;
-	(0, vue.onMounted)(() => {
-		const node = refTarget.value;
+	(0, vue.watch)(refTarget, (node, _, onCleanup) => {
+		hovered.value = false;
 		if (!node) return;
-		const onEnter = () => hovered.value = true;
-		const onLeave = () => hovered.value = false;
+		const onEnter = () => {
+			hovered.value = true;
+		};
+		const onLeave = () => {
+			hovered.value = false;
+		};
 		node.addEventListener("mouseenter", onEnter);
 		node.addEventListener("mouseleave", onLeave);
-		cleanup = () => {
+		onCleanup(() => {
 			node.removeEventListener("mouseenter", onEnter);
 			node.removeEventListener("mouseleave", onLeave);
-		};
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
 	});
-	(0, vue.onBeforeUnmount)(() => cleanup?.());
 	return {
 		ref: refTarget,
 		hovered
@@ -1849,27 +1857,35 @@ function useDisclosure(initialState = false, options = {}) {
 function useFocusWithin(options = {}) {
 	const refTarget = (0, vue.ref)(null);
 	const focused = (0, vue.ref)(false);
-	let cleanup;
-	(0, vue.onMounted)(() => {
-		const node = refTarget.value;
+	(0, vue.watch)(refTarget, (node, _, onCleanup) => {
+		focused.value = false;
 		if (!node) return;
+		let active = true;
 		const onFocusIn = (event) => {
-			focused.value = true;
-			options.onFocus?.(event);
+			if (!focused.value) {
+				focused.value = true;
+				options.onFocus?.(event);
+			}
+		};
+		const onFocusOut = (event) => {
+			(0, vue.nextTick)(() => {
+				if (!active) return;
+				const isFocused = node.matches(":focus-within");
+				if (!isFocused && focused.value) options.onBlur?.(event);
+				focused.value = isFocused;
+			});
 		};
-		const onFocusOut = (event) => (0, vue.nextTick)(() => {
-			const isFocused = node.matches(":focus-within");
-			if (!isFocused && focused.value) options.onBlur?.(event);
-			focused.value = isFocused;
-		});
 		node.addEventListener("focusin", onFocusIn);
 		node.addEventListener("focusout", onFocusOut);
-		cleanup = () => {
+		onCleanup(() => {
+			active = false;
 			node.removeEventListener("focusin", onFocusIn);
 			node.removeEventListener("focusout", onFocusOut);
-		};
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
 	});
-	(0, vue.onBeforeUnmount)(() => cleanup?.());
 	return {
 		ref: refTarget,
 		focused
@@ -4186,6 +4202,7 @@ function useDrag(handler, options = {}) {
 		resetDrag();
 	};
 	const refCallback = (newNode) => {
+		if (newNode === node) return;
 		cleanupNode?.();
 		cleanupNode = void 0;
 		node = newNode;