@mantine-vue/hooks 3.4.0 → 3.6.0

package/cjs/index.cjs

@@ -118,9 +118,10 @@ function useDebouncedCallback(callback, waitOrOptions) {
 }
 //#endregion
 //#region src/use-click-outside/use-click-outside.ts
-function useClickOutside(callback, events = ["mousedown", "touchstart"], nodes, enabled = true) {
+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;
@@ -131,17 +132,22 @@ function useClickOutside(callback, events = ["mousedown", "touchstart"], nodes,
 		} else if (element.value && !path.includes(element.value)) 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 +191,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 +265,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(() => {
@@ -1026,7 +1040,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 +1446,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 +1550,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 +1584,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);
 			}
 		});
@@ -2279,7 +2289,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;
@@ -2521,6 +2537,10 @@ function useRadialMove(onChange, { step = .01, onChangeEnd, onScrubStart, onScru
 //#endregion
 //#region src/use-scroll-spy/use-scroll-spy.ts
 var scrollSpyId = 0;
+function resolveHeadingNode(heading, selector, index) {
+	if (heading.isConnected) return heading;
+	return (heading.id ? document.getElementById(heading.id) : null) ?? document.querySelectorAll(selector)[index] ?? heading;
+}
 function getActiveElement(rects, offset = 0) {
 	if (rects.length === 0) return -1;
 	return rects.reduce((closest, rect, index) => Math.abs(closest.position - offset) < Math.abs(rect.y - offset) ? closest : {
@@ -2543,11 +2563,12 @@ function useScrollSpy(options = {}) {
 		if (typeof document === "undefined") return;
 		const getDepth = options.getDepth ?? ((element) => Number(element.tagName[1]));
 		const getValue = options.getValue ?? ((element) => element.textContent || "");
-		data.value = Array.from(document.querySelectorAll((0, vue.toValue)(options.selector) ?? "h1, h2, h3, h4, h5, h6")).map((heading) => ({
+		const selector = (0, vue.toValue)(options.selector) ?? "h1, h2, h3, h4, h5, h6";
+		data.value = Array.from(document.querySelectorAll(selector)).map((heading, index) => ({
 			depth: getDepth(heading),
 			value: getValue(heading),
 			id: heading.id || `mantine-scroll-spy-${++scrollSpyId}`,
-			getNode: () => heading.id ? document.getElementById(heading.id) ?? heading : heading
+			getNode: () => resolveHeadingNode(heading, selector, index)
 		}));
 		initialized.value = true;
 		updateActive();
@@ -3041,6 +3062,9 @@ function getElementContentSize(element, dimension) {
 function getCssSize(size) {
 	return typeof size === "number" ? `${size}px` : size;
 }
+function isMeasured(size) {
+	return typeof size === "number" && size > 0;
+}
 function createCollapse({ dimension, getElementSize, expanded, transitionDuration, transitionTimingFunction = "ease", onTransitionEnd, onTransitionStart, keepMounted }) {
 	const isExpanded = () => (0, vue.toValue)(expanded);
 	const getTransitionDuration = () => (0, vue.toValue)(transitionDuration);
@@ -3054,17 +3078,24 @@ function createCollapse({ dimension, getElementSize, expanded, transitionDuratio
 	const styles = (0, vue.ref)(isExpanded() ? {} : collapsedStyles);
 	const state = (0, vue.ref)(isExpanded() ? "entered" : "exited");
 	const raf = typeof window === "undefined" ? (callback) => callback(0) : window.requestAnimationFrame;
+	let transitionId = 0;
 	const mergeStyles = (nextStyles) => {
 		styles.value = {
 			...styles.value,
 			...nextStyles
 		};
 	};
-	const measureExpandedSize = (attempt = 0) => {
-		if (!isExpanded()) return;
+	const measureExpandedSize = (currentTransitionId, attempt = 0) => {
+		if (transitionId !== currentTransitionId || !isExpanded() || !elementRef.value) return;
 		const size = getElementSize(elementRef.value);
 		if (size === 0 && elementRef.value?.children.length && attempt < 5) {
-			raf(() => measureExpandedSize(attempt + 1));
+			raf(() => measureExpandedSize(currentTransitionId, attempt + 1));
+			return;
+		}
+		if (!isMeasured(size)) {
+			styles.value = {};
+			state.value = "entered";
+			onTransitionEnd?.();
 			return;
 		}
 		mergeStyles({
@@ -3078,8 +3109,12 @@ function createCollapse({ dimension, getElementSize, expanded, transitionDuratio
 	};
 	(0, vue.watch)(() => isExpanded(), (value, oldValue) => {
 		if (value === oldValue) return;
+		transitionId += 1;
+		const currentTransitionId = transitionId;
+		const isCurrentTransition = () => transitionId === currentTransitionId && elementRef.value !== null;
 		if (getTransitionDuration() !== 0) onTransitionStart?.();
 		if (value) raf(() => {
+			if (!isCurrentTransition()) return;
 			state.value = "entering";
 			mergeStyles({
 				willChange: dimension,
@@ -3088,24 +3123,37 @@ function createCollapse({ dimension, getElementSize, expanded, transitionDuratio
 			});
 			(0, vue.nextTick)(() => {
 				raf(() => {
-					raf(() => measureExpandedSize());
+					if (!isCurrentTransition()) return;
+					raf(() => measureExpandedSize(currentTransitionId));
 				});
 			});
 		});
 		else raf(() => {
+			if (!isCurrentTransition()) return;
 			state.value = "exiting";
 			const size = getElementSize(elementRef.value);
+			if (!isMeasured(size)) {
+				styles.value = collapsedStyles;
+				state.value = "exited";
+				onTransitionEnd?.();
+				return;
+			}
 			mergeStyles({
 				...getTransitionStyles(size),
 				willChange: dimension,
 				[dimension]: getCssSize(size)
 			});
-			raf(() => mergeStyles({
-				[dimension]: 0,
-				overflow: "hidden"
-			}));
+			raf(() => {
+				if (isCurrentTransition()) mergeStyles({
+					[dimension]: 0,
+					overflow: "hidden"
+				});
+			});
 		});
 	}, { flush: "post" });
+	(0, vue.onBeforeUnmount)(() => {
+		transitionId += 1;
+	});
 	const handleTransitionEnd = (event) => {
 		if (event.target !== elementRef.value || event.propertyName !== dimension) return;
 		if (isExpanded()) {
@@ -3269,7 +3317,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++) {
@@ -3281,7 +3329,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;
@@ -3402,9 +3450,11 @@ function useMask(options) {
 	};
 	const initializeInputValue = (inputNode) => {
 		if (!inputNode.value) return false;
-		const { slots: initialSlots, slotChar: initialSlotChar } = getResolvedOptions(options, "");
-		const { slots: resolvedSlots, slotChar } = getResolvedOptions(options, extractRaw(processInput(inputNode.value, initialSlots, initialSlotChar), initialSlots));
-		const reprocessed = processInput(inputNode.value, resolvedSlots, slotChar);
+		const isOwnValue = inputNode.value === display;
+		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);
 		const showSlots = options.alwaysShowMask || isFocused;
 		const showOnFocus = options.showMaskOnFocus !== false;
@@ -3747,6 +3797,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;
@@ -3785,19 +3842,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":