@mantine-vue/core 3.4.0 → 3.5.0

package/esm/index.mjs

@@ -8724,21 +8724,21 @@ var AccordionChevron = /* @__PURE__ */ defineComponent({
 //#region src/components/Accordion/Accordion.context.ts
 var [provideAccordionContext, useAccordionContext] = createSafeContext("Accordion component was not found in the tree");
 var Accordion_module_default = {
-	root: "_root_ltqd9_1",
-	panel: "_panel_ltqd9_5",
-	content: "_content_ltqd9_9",
-	itemTitle: "_itemTitle_ltqd9_14",
-	control: "_control_ltqd9_20",
-	"control--default": "_control--default_ltqd9_42",
-	"control--contained": "_control--contained_ltqd9_43",
-	label: "_label_ltqd9_57",
-	chevron: "_chevron_ltqd9_67",
-	icon: "_icon_ltqd9_86",
-	item: "_item_ltqd9_14",
-	"item--default": "_item--default_ltqd9_110",
-	"item--contained": "_item--contained_ltqd9_114",
-	"item--filled": "_item--filled_ltqd9_147",
-	"item--separated": "_item--separated_ltqd9_155"
+	root: "_root_1ysxv_1",
+	panel: "_panel_1ysxv_5",
+	content: "_content_1ysxv_9",
+	itemTitle: "_itemTitle_1ysxv_14",
+	control: "_control_1ysxv_20",
+	"control--default": "_control--default_1ysxv_42",
+	"control--contained": "_control--contained_1ysxv_43",
+	label: "_label_1ysxv_57",
+	chevron: "_chevron_1ysxv_67",
+	icon: "_icon_1ysxv_86",
+	item: "_item_1ysxv_14",
+	"item--default": "_item--default_1ysxv_110",
+	"item--contained": "_item--contained_1ysxv_114",
+	"item--filled": "_item--filled_1ysxv_149",
+	"item--separated": "_item--separated_1ysxv_157"
 };
 //#endregion
 //#region src/components/Accordion/Accordion.vue?vue&type=script&setup=true&lang.ts
@@ -13914,16 +13914,58 @@ function sanitizeNumberInputString(rawValue, allowDecimal, allowNegative, decima
 	}
 	return normalized;
 }
-function clampAndSanitizeInput(sanitizedValue, max, min) {
-	const stringValue = sanitizedValue.toString();
-	const hasTrailingDecimalSeparator = trailingDecimalSeparatorPattern.test(stringValue);
-	const replaced = stringValue.replace(/^0+(?=\d)/, "");
-	const parsedValue = parseFloat(replaced);
-	if (Number.isNaN(parsedValue)) return replaced;
-	if (parsedValue > Number.MAX_SAFE_INTEGER) return max !== void 0 ? max : replaced;
-	const clamped = clamp$3(parsedValue, min, max);
-	if (hasTrailingDecimalSeparator) return `${clamped.toString().replace(/^0+(?=\d)/, "")}.`;
-	return clamped;
+function withTrailingSeparator(value, hasTrailingDecimalSeparator) {
+	return hasTrailingDecimalSeparator ? `${value}.` : value;
+}
+function sanitizeInputOnBlur(value, options) {
+	const hasTrailingDecimalSeparator = trailingDecimalSeparatorPattern.test(value);
+	const trimmed = options.trim ? value.replace(/^0+(?=\d)/, "") : value;
+	const parsedValue = parseFloat(trimmed);
+	if (Number.isNaN(parsedValue)) return trimmed;
+	if (!options.clamp) return options.trim ? withTrailingSeparator(parsedValue, hasTrailingDecimalSeparator) : value;
+	const clamped = parsedValue > Number.MAX_SAFE_INTEGER && options.max !== void 0 ? options.max : clamp$3(parsedValue, options.min, options.max);
+	if (!options.trim && clamped === parsedValue) return value;
+	return withTrailingSeparator(clamped, hasTrailingDecimalSeparator);
+}
+function countTrailingDigits(value, from) {
+	let count = 0;
+	while (from + count < value.length && /\d/.test(value[from + count])) count += 1;
+	return count;
+}
+function normalizePastedValue(value, options) {
+	const candidates = new Set([...options.allowedDecimalSeparators, options.decimalSeparator].filter((separator) => separator.length === 1));
+	const chars = value.split("");
+	const occurrences = chars.reduce((result, char, index) => {
+		if (candidates.has(char)) result.push(index);
+		return result;
+	}, []);
+	if (occurrences.length === 0) return value;
+	const lastIndex = occurrences[occurrences.length - 1];
+	const lastChar = chars[lastIndex];
+	const lastCharCount = occurrences.filter((index) => chars[index] === lastChar).length;
+	const lastGroupSize = options.thousandsGroupStyle === "wan" ? 4 : 3;
+	let decimalIndex = -1;
+	if (lastCharCount === 1) if (lastChar === options.decimalSeparator) decimalIndex = lastIndex;
+	else if (lastChar === options.thousandSeparator) decimalIndex = countTrailingDigits(value, lastIndex + 1) === lastGroupSize ? -1 : lastIndex;
+	else decimalIndex = lastIndex;
+	return chars.map((char, index) => {
+		if (index === decimalIndex) return options.decimalSeparator;
+		if (candidates.has(char) && char !== options.thousandSeparator) return "";
+		return char;
+	}).join("");
+}
+function isSignificant(char, decimalSeparator) {
+	return /\d/.test(char) || char === decimalSeparator;
+}
+function getCaretPositionAfterPaste(rawValue, rawCaret, formattedValue, decimalSeparator) {
+	let remaining = 0;
+	for (let index = 0; index < rawCaret && index < rawValue.length; index += 1) if (isSignificant(rawValue[index], decimalSeparator)) remaining += 1;
+	if (remaining === 0) return Math.min(rawCaret, formattedValue.length);
+	for (let index = 0; index < formattedValue.length; index += 1) if (isSignificant(formattedValue[index], decimalSeparator)) {
+		remaining -= 1;
+		if (remaining === 0) return index + 1;
+	}
+	return formattedValue.length;
 }
 function isInRange(value, min, max) {
 	if (value === void 0) return true;
@@ -14376,12 +14418,41 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 			if (props.selectAllOnFocus) window.setTimeout(() => inputRef.value?.select(), 0);
 			else scheduleCaretClamp(event.currentTarget);
 		}
+		function onPaste(event) {
+			const pastedText = event.clipboardData?.getData("text") ?? "";
+			const decimalSeparator = props.decimalSeparator || ".";
+			const modifiedText = normalizePastedValue(pastedText, {
+				decimalSeparator,
+				thousandSeparator: props.thousandSeparator === true ? "," : props.thousandSeparator === false ? void 0 : props.thousandSeparator,
+				allowedDecimalSeparators: props.allowedDecimalSeparators,
+				thousandsGroupStyle: props.thousandsGroupStyle
+			});
+			if (modifiedText !== pastedText && inputRef.value) {
+				event.preventDefault();
+				const input = inputRef.value;
+				const start = input.selectionStart ?? 0;
+				const end = input.selectionEnd ?? 0;
+				const newValue = input.value.slice(0, start) + modifiedText + input.value.slice(end);
+				input.value = newValue;
+				input.dispatchEvent(new Event("input", { bubbles: true }));
+				const rawCaret = start + modifiedText.length;
+				setTimeout(() => {
+					const caret = getCaretPositionAfterPaste(newValue, rawCaret, input.value, decimalSeparator);
+					input.setSelectionRange(caret, caret);
+				}, 0);
+			}
+		}
 		function onBlur() {
 			let sanitizedValue = value.value;
 			const min = typeof props.min === "number" ? props.min : void 0;
 			const max = typeof props.max === "number" ? props.max : void 0;
 			if (props.clampBehavior === "blur" && typeof sanitizedValue === "number") sanitizedValue = clamp$3(sanitizedValue, min, max);
-			if (props.trimLeadingZeroesOnBlur && typeof sanitizedValue === "string" && getDecimalPlaces(sanitizedValue) < 15) sanitizedValue = clampAndSanitizeInput(sanitizedValue, max, min);
+			if (!isBigIntMode.value && typeof sanitizedValue === "string") sanitizedValue = sanitizeInputOnBlur(sanitizedValue, {
+				min,
+				max,
+				trim: props.trimLeadingZeroesOnBlur && getDecimalPlaces(sanitizedValue) < 15,
+				clamp: props.clampBehavior === "blur"
+			});
 			if (sanitizedValue !== value.value) commitValue(sanitizedValue, "blur");
 		}
 		return (_ctx, _cache) => {
@@ -14415,6 +14486,7 @@ var NumberInput = factory(/* @__PURE__ */ defineComponent({
 				onKeyup,
 				onClick,
 				onFocus,
+				onPaste,
 				onBlur
 			}), createSlots({ _: 2 }, [
 				unref(slots).label ? {
@@ -16531,8 +16603,16 @@ var SegmentedControl = Object.assign(/* @__PURE__ */ defineComponent({
 			parent.value = node?.$el ?? node ?? null;
 		};
 		const setItemRef = (key, node) => {
-			itemRefs[key] = node?.$el ?? node ?? null;
+			const element = node?.$el ?? node ?? null;
+			if (element === null) delete itemRefs[key];
+			else itemRefs[key] = element;
 		};
+		watch(normalizedData, (items) => {
+			const values = new Set(items.map((item) => String(item.value)));
+			Object.keys(itemRefs).forEach((key) => {
+				if (!values.has(key)) delete itemRefs[key];
+			});
+		});
 		const ItemLabel = (item) => h("span", getStyles("innerLabel"), resolveNode(item.label));
 		const handleClick = (event) => {
 			if (props.readOnly) event.preventDefault();
@@ -18273,6 +18353,7 @@ var Autosize_default = /* @__PURE__ */ defineComponent({
 			}
 		}
 		const cleanupFns = [];
+		let resizeFrame = 0;
 		onMounted(() => {
 			resizeTextarea();
 			const onResize = () => resizeTextarea();
@@ -18284,11 +18365,15 @@ var Autosize_default = /* @__PURE__ */ defineComponent({
 				const observer = new ResizeObserver(() => {
 					if (textareaRef.value && textareaRef.value.offsetWidth !== widthRef.value) {
 						widthRef.value = textareaRef.value.offsetWidth;
-						resizeTextarea();
+						cancelAnimationFrame(resizeFrame);
+						resizeFrame = requestAnimationFrame(resizeTextarea);
 					}
 				});
 				observer.observe(node);
-				cleanupFns.push(() => observer.disconnect());
+				cleanupFns.push(() => {
+					cancelAnimationFrame(resizeFrame);
+					observer.disconnect();
+				});
 			}
 			const onFontsLoaded = () => resizeTextarea();
 			document.fonts.addEventListener("loadingdone", onFontsLoaded);
@@ -18305,6 +18390,7 @@ var Autosize_default = /* @__PURE__ */ defineComponent({
 			cleanupFns.push(() => document.body.removeEventListener("reset", onReset));
 		});
 		onUnmounted(() => {
+			cancelAnimationFrame(resizeFrame);
 			cleanupFns.forEach((fn) => fn());
 			cleanupFns.length = 0;
 		});
@@ -22818,20 +22904,30 @@ function getEl$1(value) {
 function useDimensions(element) {
 	const dimensions = ref(null);
 	let observer = null;
+	let frame = 0;
 	onMounted(() => {
 		const el = getEl$1(element.value);
 		if (!el || typeof ResizeObserver === "undefined") return;
 		observer = new ResizeObserver(([entry]) => {
-			if (entry) dimensions.value = {
-				width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.target.clientWidth,
-				height: entry.borderBoxSize?.[0]?.blockSize ?? entry.target.clientHeight,
-				contentWidth: entry.contentRect.width,
-				contentHeight: entry.contentRect.height
-			};
+			if (entry) {
+				const nextDimensions = {
+					width: entry.borderBoxSize?.[0]?.inlineSize ?? entry.target.clientWidth,
+					height: entry.borderBoxSize?.[0]?.blockSize ?? entry.target.clientHeight,
+					contentWidth: entry.contentRect.width,
+					contentHeight: entry.contentRect.height
+				};
+				cancelAnimationFrame(frame);
+				frame = requestAnimationFrame(() => {
+					dimensions.value = nextDimensions;
+				});
+			}
 		});
 		observer.observe(el);
 	});
-	onBeforeUnmount(() => observer?.disconnect());
+	onBeforeUnmount(() => {
+		cancelAnimationFrame(frame);
+		observer?.disconnect();
+	});
 	return dimensions;
 }
 var OverflowList_module_default = { root: "_root_uggjd_1" };
@@ -28260,7 +28356,10 @@ function useModal(input) {
 	const bodyMounted = ref(false);
 	useWindowEvent("keydown", (event) => {
 		const stopped = event.target?.getAttribute?.("data-mantine-stop-propagation") === "true";
-		if (event.key === "Escape" && !event.isComposing && input.opened() && input.closeOnEscape() && !stopped) input.onClose();
+		if (event.key === "Escape" && !event.isComposing && input.opened() && input.closeOnEscape() && !input.handledEscapeEvents?.has(event) && !stopped) {
+			input.handledEscapeEvents?.add(event);
+			input.onClose();
+		}
 	}, { capture: true });
 	useFocusReturn({
 		opened: input.opened,
@@ -28279,6 +28378,7 @@ var ModalBase = factory(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ModalBase",
 	props: {
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: { default: void 0 },
@@ -28340,7 +28440,8 @@ var ModalBase = factory(/* @__PURE__ */ defineComponent({
 			onClose: () => emit("close"),
 			trapFocus: () => props.trapFocus,
 			closeOnEscape: () => props.closeOnEscape,
-			returnFocus: () => props.returnFocus
+			returnFocus: () => props.returnFocus,
+			handledEscapeEvents: props.__handledEscapeEvents
 		});
 		useLockScroll(computed(() => props.opened && props.lockScroll));
 		provideModalBaseContext({
@@ -28771,6 +28872,7 @@ var ModalRoot_default = /* @__PURE__ */ defineComponent({
 		classNames: {},
 		styles: {},
 		vars: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -28934,6 +29036,7 @@ var Modal_default = /* @__PURE__ */ defineComponent({
 		classNames: {},
 		styles: {},
 		vars: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -29156,6 +29259,7 @@ var DrawerRoot_default = /* @__PURE__ */ defineComponent({
 		offset: { default: 0 },
 		size: { default: "md" },
 		scrollAreaComponent: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -29319,6 +29423,7 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 		offset: {},
 		size: {},
 		scrollAreaComponent: {},
+		__handledEscapeEvents: {},
 		rootRef: {},
 		opened: { type: Boolean },
 		id: {},
@@ -29390,7 +29495,8 @@ var Drawer_default = /* @__PURE__ */ defineComponent({
 			const isCurrent = stackCtx.currentId === props.stackId;
 			return {
 				closeOnEscape: isCurrent,
-				trapFocus: isCurrent
+				trapFocus: isCurrent,
+				__handledEscapeEvents: stackCtx.handledEscapeEvents
 			};
 		});
 		/** One overlay for the whole stack: only the topmost drawer renders it. */
@@ -29495,7 +29601,8 @@ var DrawerStack_default = /* @__PURE__ */ defineComponent({
 			},
 			get maxZIndex() {
 				return maxZIndex.value;
-			}
+			},
+			handledEscapeEvents: /* @__PURE__ */ new WeakSet()
 		}));
 		return (_ctx, _cache) => {
 			return renderSlot(_ctx.$slots, "default");
@@ -32241,6 +32348,8 @@ var MenuSub_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "MenuSub",
 	props: {
+		withinPortal: {},
+		portalProps: {},
 		opened: {
 			type: Boolean,
 			default: void 0
@@ -32274,7 +32383,7 @@ var MenuSub_default = /* @__PURE__ */ defineComponent({
 			transitionProps: props.transitionProps,
 			middlewares: props.middlewares,
 			closeOnItemClick: false,
-			withinPortal: attrs.withinPortal ?? false
+			withinPortal: false
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Menu_default, normalizeProps(guardReactiveProps(menuBindings.value)), {
@@ -33260,7 +33369,6 @@ function useCombobox(options = {}) {
 	const items = () => Array.from(list()?.querySelectorAll("[data-combobox-option]") ?? []);
 	const clearSelected = () => items().forEach((item) => {
 		item.removeAttribute("data-combobox-selected");
-		item.removeAttribute("aria-selected");
 	});
 	const selectOption = (index) => {
 		const optionsList = items();
@@ -33275,7 +33383,6 @@ function useCombobox(options = {}) {
 		selectedIndex.value = next;
 		clearSelected();
 		optionsList[next].setAttribute("data-combobox-selected", "true");
-		optionsList[next].setAttribute("aria-selected", "true");
 		optionsList[next].scrollIntoView?.({
 			block: "nearest",
 			behavior: options.scrollBehavior ?? "instant"
@@ -34727,7 +34834,6 @@ var ComboboxPopover_default = /* @__PURE__ */ defineComponent({
 			onDropdownClose: () => {
 				emit("dropdown-close");
 				combobox.resetSelectedOption();
-				if (props.searchable) combobox.focusTarget();
 			}
 		});
 		function handleSearchChange(val) {
@@ -34763,6 +34869,7 @@ var ComboboxPopover_default = /* @__PURE__ */ defineComponent({
 			styles: props.styles,
 			unstyled: props.unstyled,
 			onOptionSubmit: handleOptionSubmit,
+			returnFocus: true,
 			...props.comboboxProps,
 			...attrs
 		}));