@mantine-vue/hooks 3.4.0 → 3.5.0

package/cjs/index.cjs

@@ -2521,6 +2521,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 +2547,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 +3046,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 +3062,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 +3093,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 +3107,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()) {
@@ -3402,9 +3434,11 @@ 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: resolvedSlots, slotChar } = getResolvedOptions(options, extractRaw(processInput(inputNode.value, initialSlots, initialSlotChar), initialSlots));
-		const reprocessed = processInput(inputNode.value, resolvedSlots, slotChar);
+		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;