@mantine-vue/hooks 1.1.3 → 2.0.0

package/cjs/index.cjs

@@ -1258,9 +1258,14 @@ function useResizeObserver(options) {
 	const elementRef = (0, vue.ref)(null);
 	const rect = (0, vue.ref)(defaultState);
 	let observer;
+	let frameId = 0;
 	const disconnect = () => {
 		observer?.disconnect();
 		observer = void 0;
+		if (frameId) {
+			cancelAnimationFrame(frameId);
+			frameId = 0;
+		}
 	};
 	(0, vue.watch)(elementRef, (node) => {
 		disconnect();
@@ -1268,18 +1273,21 @@ function useResizeObserver(options) {
 		observer = new ResizeObserver((entries) => {
 			const entry = entries[0];
 			if (entry) {
-				const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];
-				if (boxSize) rect.value = {
-					width: boxSize.inlineSize,
-					height: boxSize.blockSize,
-					x: entry.contentRect.x,
-					y: entry.contentRect.y,
-					top: entry.contentRect.top,
-					left: entry.contentRect.left,
-					bottom: entry.contentRect.bottom,
-					right: entry.contentRect.right
-				};
-				else rect.value = entry.contentRect;
+				cancelAnimationFrame(frameId);
+				frameId = requestAnimationFrame(() => {
+					const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];
+					if (boxSize) rect.value = {
+						width: boxSize.inlineSize,
+						height: boxSize.blockSize,
+						x: entry.contentRect.x,
+						y: entry.contentRect.y,
+						top: entry.contentRect.top,
+						left: entry.contentRect.left,
+						bottom: entry.contentRect.bottom,
+						right: entry.contentRect.right
+					};
+					else rect.value = entry.contentRect;
+				});
 			}
 		});
 		observer.observe(node, options);
@@ -3659,21 +3667,22 @@ function useMask(options) {
 			prevNode.removeEventListener("keydown", handleKeyDown);
 			prevNode.removeEventListener("paste", handlePaste);
 		}
-		node = newNode;
-		if (newNode) {
-			newNode.addEventListener("input", handleInput);
-			newNode.addEventListener("focus", handleFocus);
-			newNode.addEventListener("blur", handleBlur);
-			newNode.addEventListener("mousedown", handleMouseDown);
-			newNode.addEventListener("mouseup", handleMouseUp);
-			newNode.addEventListener("keydown", handleKeyDown);
-			newNode.addEventListener("paste", handlePaste);
-			setAriaAttributes(newNode);
-			const hasInitialValue = initializeInputValue(newNode);
+		const inputNode = newNode instanceof HTMLInputElement ? newNode : newNode?.querySelector("input");
+		node = inputNode ?? null;
+		if (inputNode) {
+			inputNode.addEventListener("input", handleInput);
+			inputNode.addEventListener("focus", handleFocus);
+			inputNode.addEventListener("blur", handleBlur);
+			inputNode.addEventListener("mousedown", handleMouseDown);
+			inputNode.addEventListener("mouseup", handleMouseUp);
+			inputNode.addEventListener("keydown", handleKeyDown);
+			inputNode.addEventListener("paste", handlePaste);
+			setAriaAttributes(inputNode);
+			const hasInitialValue = initializeInputValue(inputNode);
 			if (options.alwaysShowMask && !hasInitialValue) {
 				const { slots, slotChar } = getResolvedOptions(options, "");
 				const displayValue = buildDisplayValue("", slots, slotChar, true);
-				newNode.value = displayValue;
+				inputNode.value = displayValue;
 				display = displayValue;
 				maskedValue.value = displayValue;
 			}