@mantine-vue/hooks 3.5.0 → 3.7.0

package/cjs/index.cjs

@@ -118,9 +118,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 = (0, vue.ref)(null);
 	let activeEvents = [];
+	let activeCapture = false;
 	const listener = (event) => {
 		const target = event.target;
 		if (!target || !document.body.contains(target) && target.tagName !== "HTML") return;
@@ -128,20 +133,28 @@ 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));
+		activeEvents.forEach((event) => document.removeEventListener(event, listener, activeCapture));
 		activeEvents = [];
 	};
 	const bind = () => {
 		cleanup();
 		if (!(0, vue.toValue)(enabled)) return;
 		activeEvents = (0, vue.toValue)(events) || ["mousedown", "touchstart"];
-		activeEvents.forEach((event) => document.addEventListener(event, listener));
+		activeCapture = (0, vue.toValue)(capture);
+		activeEvents.forEach((event) => document.addEventListener(event, listener, activeCapture));
 	};
 	(0, vue.onMounted)(bind);
-	(0, vue.watch)([() => (0, vue.toValue)(events)?.join(","), () => (0, vue.toValue)(enabled)], bind);
+	(0, vue.watch)([
+		() => (0, vue.toValue)(events)?.join(","),
+		() => (0, vue.toValue)(enabled),
+		() => (0, vue.toValue)(capture)
+	], bind);
 	(0, vue.onBeforeUnmount)(cleanup);
 	return element;
 }
@@ -185,7 +198,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 }) {
@@ -255,6 +272,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(() => {
@@ -504,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
@@ -1026,7 +1043,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 [
@@ -1432,8 +1449,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 });
@@ -1536,12 +1553,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);
 			}
 		});
@@ -1572,16 +1587,14 @@ function useHotkeys(hotkeys, tagsToIgnore = [
 	"select"
 ], triggerOnContentEditable = false) {
 	const handleKeydown = (event) => {
-		(0, vue.toValue)(hotkeys).forEach(([hotkey, handler, options = {
-			preventDefault: true,
-			usePhysicalKeys: false
-		}]) => {
-			if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) && shouldFireEvent(event, (0, vue.toValue)(tagsToIgnore) ?? [
+		(0, vue.toValue)(hotkeys).forEach(([hotkey, handler, options]) => {
+			const { preventDefault = true, usePhysicalKeys = false } = options || {};
+			if (getHotkeyMatcher(hotkey, usePhysicalKeys)(event) && shouldFireEvent(event, (0, vue.toValue)(tagsToIgnore) ?? [
 				"input",
 				"textarea",
 				"select"
 			], (0, vue.toValue)(triggerOnContentEditable))) {
-				if (options.preventDefault) event.preventDefault();
+				if (preventDefault) event.preventDefault();
 				handler(event);
 			}
 		});
@@ -1700,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
@@ -1839,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
@@ -2279,7 +2305,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;
@@ -3301,7 +3333,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++) {
@@ -3313,7 +3345,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;
@@ -3435,8 +3467,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);
@@ -3781,6 +3813,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;
@@ -3819,19 +3858,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":
@@ -4169,6 +4202,7 @@ function useDrag(handler, options = {}) {
 		resetDrag();
 	};
 	const refCallback = (newNode) => {
+		if (newNode === node) return;
 		cleanupNode?.();
 		cleanupNode = void 0;
 		node = newNode;