@mantine-vue/hooks 3.6.0 → 3.7.0

package/esm/index.mjs

@@ -1,4 +1,4 @@
-import { computed, getCurrentInstance, isRef, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, readonly, ref, shallowRef, toValue, triggerRef, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, isRef, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, readonly, ref, shallowRef, toValue, triggerRef, useId as useId$1, watch, watchEffect } from "vue";
 //#region src/utils/clamp/clamp.ts
 function clamp(value, min, max) {
 	if (min === void 0 && max === void 0) return value;
@@ -117,6 +117,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 = ref(null);
 	let activeEvents = [];
@@ -128,7 +132,10 @@ function useClickOutside(callback, events = ["mousedown", "touchstart"], nodes,
 		const resolvedNodes = nodes ? 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));
@@ -517,12 +524,8 @@ function useForceUpdate() {
 //#region src/use-id/use-id.ts
 var idCounter = 0;
 function useId(staticId) {
-	const id = ref(staticId || "");
-	onMounted(() => {
-		if (!id.value) id.value = `mantine-vue-${++idCounter}`;
-	});
-	if (staticId) id.value = staticId;
-	return id;
+	if (staticId) return ref(staticId);
+	return ref(`mantine-vue-${getCurrentInstance() ? useId$1() : `fallback-${++idCounter}`}`);
 }
 //#endregion
 //#region src/use-idle/use-idle.ts
@@ -1709,20 +1712,25 @@ function useLogger(componentName, props) {
 function useHover() {
 	const refTarget = ref(null);
 	const hovered = ref(false);
-	let cleanup;
-	onMounted(() => {
-		const node = refTarget.value;
+	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"
 	});
-	onBeforeUnmount(() => cleanup?.());
 	return {
 		ref: refTarget,
 		hovered
@@ -1848,27 +1856,35 @@ function useDisclosure(initialState = false, options = {}) {
 function useFocusWithin(options = {}) {
 	const refTarget = ref(null);
 	const focused = ref(false);
-	let cleanup;
-	onMounted(() => {
-		const node = refTarget.value;
+	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) => {
+			nextTick(() => {
+				if (!active) return;
+				const isFocused = node.matches(":focus-within");
+				if (!isFocused && focused.value) options.onBlur?.(event);
+				focused.value = isFocused;
+			});
 		};
-		const onFocusOut = (event) => 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"
 	});
-	onBeforeUnmount(() => cleanup?.());
 	return {
 		ref: refTarget,
 		focused
@@ -4185,6 +4201,7 @@ function useDrag(handler, options = {}) {
 		resetDrag();
 	};
 	const refCallback = (newNode) => {
+		if (newNode === node) return;
 		cleanupNode?.();
 		cleanupNode = void 0;
 		node = newNode;