@mantine-vue/hooks 3.5.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,9 +117,14 @@ function useDebouncedCallback(callback, waitOrOptions) {
 }
 //#endregion
 //#region src/use-click-outside/use-click-outside.ts
-function useClickOutside(callback, events = ["mousedown", "touchstart"], nodes, enabled = true) {
+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 = [];
+	let activeCapture = false;
 	const listener = (event) => {
 		const target = event.target;
 		if (!target || !document.body.contains(target) && target.tagName !== "HTML") return;
@@ -127,20 +132,28 @@ 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));
+		activeEvents.forEach((event) => document.removeEventListener(event, listener, activeCapture));
 		activeEvents = [];
 	};
 	const bind = () => {
 		cleanup();
 		if (!toValue(enabled)) return;
 		activeEvents = toValue(events) || ["mousedown", "touchstart"];
-		activeEvents.forEach((event) => document.addEventListener(event, listener));
+		activeCapture = toValue(capture);
+		activeEvents.forEach((event) => document.addEventListener(event, listener, activeCapture));
 	};
 	onMounted(bind);
-	watch([() => toValue(events)?.join(","), () => toValue(enabled)], bind);
+	watch([
+		() => toValue(events)?.join(","),
+		() => toValue(enabled),
+		() => toValue(capture)
+	], bind);
 	onBeforeUnmount(cleanup);
 	return element;
 }
@@ -184,7 +197,11 @@ function useClipboard({ timeout = 2e3 } = {}) {
 //#region src/use-media-query/use-media-query.ts
 function getInitialMediaQueryValue(query, initialValue) {
 	if (typeof initialValue === "boolean") return initialValue;
-	if (typeof window !== "undefined" && typeof window.matchMedia === "function") return window.matchMedia(query).matches;
+	if (typeof window !== "undefined" && typeof window.matchMedia === "function") try {
+		return window.matchMedia(query).matches;
+	} catch {
+		return false;
+	}
 	return false;
 }
 function useMediaQuery(query, initialValue = false, options = { getInitialValueInEffect: true }) {
@@ -254,6 +271,10 @@ function useDebouncedState(initialValue, wait, options = {}) {
 		if (options.leading && !leadingCalled) {
 			value.value = next;
 			leadingCalled = true;
+			clear();
+			timeout = setTimeout(() => {
+				leadingCalled = false;
+			}, wait);
 		} else {
 			clear();
 			timeout = setTimeout(() => {
@@ -503,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
@@ -1025,7 +1042,7 @@ function usePagination({ total, siblings = 1, boundaries = 1, page, initialPage,
 			const leftSiblingIndex = Math.max(active.value - siblings, start.value + boundaries - 1);
 			const rightSiblingIndex = Math.min(active.value + siblings, end.value - boundaries);
 			const shouldShowLeftDots = leftSiblingIndex > start.value + boundaries + 1;
-			const shouldShowRightDots = rightSiblingIndex < end.value - boundaries;
+			const shouldShowRightDots = rightSiblingIndex < end.value - (boundaries + 1);
 			if (!shouldShowLeftDots && shouldShowRightDots) {
 				const leftItemCount = siblings * 2 + boundaries + 2;
 				return [
@@ -1431,8 +1448,8 @@ function useIntersection(options) {
 			entry.value = null;
 			return;
 		}
-		observer = new IntersectionObserver(([_entry]) => {
-			entry.value = _entry;
+		observer = new IntersectionObserver((entries) => {
+			entry.value = entries[entries.length - 1];
 		}, options);
 		observer.observe(node);
 	}, { immediate: true });
@@ -1535,12 +1552,10 @@ function getHotkeyMatcher(hotkey, usePhysicalKeys) {
 }
 function getHotkeyHandler(hotkeys) {
 	return (event) => {
-		hotkeys.forEach(([hotkey, handler, options = {
-			preventDefault: true,
-			usePhysicalKeys: false
-		}]) => {
-			if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event)) {
-				if (options.preventDefault) event.preventDefault();
+		hotkeys.forEach(([hotkey, handler, options]) => {
+			const { preventDefault = true, usePhysicalKeys = false } = options || {};
+			if (getHotkeyMatcher(hotkey, usePhysicalKeys)(event)) {
+				if (preventDefault) event.preventDefault();
 				handler(event);
 			}
 		});
@@ -1571,16 +1586,14 @@ function useHotkeys(hotkeys, tagsToIgnore = [
 	"select"
 ], triggerOnContentEditable = false) {
 	const handleKeydown = (event) => {
-		toValue(hotkeys).forEach(([hotkey, handler, options = {
-			preventDefault: true,
-			usePhysicalKeys: false
-		}]) => {
-			if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) && shouldFireEvent(event, toValue(tagsToIgnore) ?? [
+		toValue(hotkeys).forEach(([hotkey, handler, options]) => {
+			const { preventDefault = true, usePhysicalKeys = false } = options || {};
+			if (getHotkeyMatcher(hotkey, usePhysicalKeys)(event) && shouldFireEvent(event, toValue(tagsToIgnore) ?? [
 				"input",
 				"textarea",
 				"select"
 			], toValue(triggerOnContentEditable))) {
-				if (options.preventDefault) event.preventDefault();
+				if (preventDefault) event.preventDefault();
 				handler(event);
 			}
 		});
@@ -1699,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
@@ -1838,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
@@ -2278,7 +2304,13 @@ function useThrottledCallbackWithClearTimeout(callback, wait) {
 	let latestOutArgs = null;
 	let active = true;
 	let timeoutId = -1;
-	const clear = () => window.clearTimeout(timeoutId);
+	const clear = () => {
+		window.clearTimeout(timeoutId);
+		timeoutId = -1;
+		active = true;
+		latestInArgs = null;
+		latestOutArgs = null;
+	};
 	const callThrottledCallback = (...args) => {
 		callback(...args);
 		latestInArgs = args;
@@ -3300,7 +3332,7 @@ function findPrevTokenIndex(slots, from) {
 	for (let i = from; i >= 0; i--) if (slots[i].type === "token") return i;
 	return -1;
 }
-function processInput(inputValue, slots, _slotCharOption) {
+function processInput(inputValue, slots, _slotCharOption, transform) {
 	let result = "";
 	let inputIndex = 0;
 	for (let slotIndex = 0; slotIndex < slots.length && inputIndex <= inputValue.length; slotIndex++) {
@@ -3312,7 +3344,7 @@ function processInput(inputValue, slots, _slotCharOption) {
 		}
 		if (inputIndex >= inputValue.length) break;
 		while (inputIndex < inputValue.length) {
-			const ch = inputValue[inputIndex];
+			const ch = transform ? transform(inputValue[inputIndex]) : inputValue[inputIndex];
 			inputIndex++;
 			if (slot.pattern.test(ch)) {
 				result += ch;
@@ -3434,8 +3466,8 @@ function useMask(options) {
 	const initializeInputValue = (inputNode) => {
 		if (!inputNode.value) return false;
 		const isOwnValue = inputNode.value === display;
-		const parse = (slots, slotChar) => isOwnValue ? applyMaskToRaw(rawInternal, slots, slotChar, options.transform) : processInput(inputNode.value, slots, slotChar);
-		const { slots: initialSlots, slotChar: initialSlotChar } = getResolvedOptions(options, "");
+		const { slots: initialSlots, slotChar: initialSlotChar, transform } = getResolvedOptions(options, "");
+		const parse = (slots, slotChar) => isOwnValue ? applyMaskToRaw(rawInternal, slots, slotChar, options.transform) : processInput(inputNode.value, slots, slotChar, transform);
 		const { slots: resolvedSlots, slotChar } = getResolvedOptions(options, extractRaw(parse(initialSlots, initialSlotChar), initialSlots));
 		const reprocessed = parse(resolvedSlots, slotChar);
 		const newRaw = extractRaw(reprocessed, resolvedSlots);
@@ -3780,6 +3812,13 @@ function findLastEnabled(total, isItemDisabled) {
 	for (let i = total - 1; i >= 0; i -= 1) if (!isItemDisabled(i)) return i;
 	return 0;
 }
+function findEnabledInRow(row, startCol, step, columns, total, isItemDisabled) {
+	for (let col = startCol; col >= 0 && col < columns; col += step) {
+		const candidate = row * columns + col;
+		if (candidate < total && !isItemDisabled(candidate)) return candidate;
+	}
+	return null;
+}
 var defaultIsItemDisabled = () => false;
 function useRovingIndex(input) {
 	const { total, orientation = "horizontal", loop = true, dir = "ltr", activateOnFocus = false, columns, focusedIndex, initialIndex, onFocusChange, isItemDisabled = defaultIsItemDisabled } = input;
@@ -3818,19 +3857,13 @@ function useRovingIndex(input) {
 		const isRtl = dir === "rtl";
 		switch (event.key) {
 			case "ArrowRight": {
-				const targetCol = isRtl ? col - 1 : col + 1;
-				if (targetCol >= 0 && targetCol < cols && row * cols + targetCol < total_) {
-					const candidate = row * cols + targetCol;
-					if (!isItemDisabled(candidate)) nextIndex = candidate;
-				}
+				const step = isRtl ? -1 : 1;
+				nextIndex = findEnabledInRow(row, col + step, step, cols, total_, isItemDisabled);
 				break;
 			}
 			case "ArrowLeft": {
-				const targetCol = isRtl ? col + 1 : col - 1;
-				if (targetCol >= 0 && targetCol < cols && row * cols + targetCol < total_) {
-					const candidate = row * cols + targetCol;
-					if (!isItemDisabled(candidate)) nextIndex = candidate;
-				}
+				const step = isRtl ? 1 : -1;
+				nextIndex = findEnabledInRow(row, col + step, step, cols, total_, isItemDisabled);
 				break;
 			}
 			case "ArrowDown":
@@ -4168,6 +4201,7 @@ function useDrag(handler, options = {}) {
 		resetDrag();
 	};
 	const refCallback = (newNode) => {
+		if (newNode === node) return;
 		cleanupNode?.();
 		cleanupNode = void 0;
 		node = newNode;