@mantine-vue/hooks 3.5.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;
@@ -3301,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++) {
@@ -3313,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;
@@ -3435,8 +3451,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 +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;
@@ -3819,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":