@mantine-vue/core 2.3.0 → 2.3.1

package/cjs/index.cjs

@@ -4038,7 +4038,7 @@ var Badge = withBoxProps((0, vue.defineComponent)({
 		const renderSection = (section, position) => hasNode(section) ? (0, vue.h)("span", {
 			...getStyles("section"),
 			"data-position": position
-		}, () => section) : null;
+		}, section) : null;
 		return () => {
 			const children = slots.default?.() ?? [];
 			const leftSection = resolveNode(props.leftSection, slots.leftSection);
@@ -26244,14 +26244,17 @@ var Drawer = Object.assign(DrawerBaseComponent, {
 });
 //#endregion
 //#region src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts
+function px$1(value) {
+	return value === void 0 ? void 0 : `${value}px`;
+}
 function horizontalSide(placement, arrowY, offset, position) {
-	if (placement === "center" || position === "center") return { top: arrowY };
-	return placement === "end" ? { bottom: offset } : { top: offset };
+	if (placement === "center" || position === "center") return { top: px$1(arrowY) };
+	return placement === "end" ? { bottom: px$1(offset) } : { top: px$1(offset) };
 }
 function verticalSide(placement, arrowX, offset, position, dir) {
-	if (placement === "center" || position === "center") return { left: arrowX };
-	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: offset };
-	return { [dir === "ltr" ? "left" : "right"]: offset };
+	if (placement === "center" || position === "center") return { left: px$1(arrowX) };
+	if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: px$1(offset) };
+	return { [dir === "ltr" ? "left" : "right"]: px$1(offset) };
 }
 var radiusBySide = {
 	bottom: "borderTopLeftRadius",
@@ -26272,15 +26275,15 @@ function mergeStyles(position, size, dir) {
 		const startShape = placement === "start" !== (dir === "rtl");
 		return {
 			...base,
-			[side === "bottom" ? "top" : "bottom"]: -size,
-			[physical]: 0,
+			[side === "bottom" ? "top" : "bottom"]: px$1(-size),
+			[physical]: px$1(0),
 			clipPath: side === "bottom" ? startShape ? "polygon(0% 0%, 0% 100%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)" : startShape ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 100% 0%, 100% 100%)"
 		};
 	}
 	return {
 		...base,
-		[side === "left" ? "right" : "left"]: -size,
-		[placement === "start" ? "top" : "bottom"]: 0,
+		[side === "left" ? "right" : "left"]: px$1(-size),
+		[placement === "start" ? "top" : "bottom"]: px$1(0),
 		clipPath: side === "left" ? placement === "start" ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 0% 100%, 100% 100%)" : placement === "start" ? "polygon(0% 0%, 100% 0%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
 	};
 }
@@ -26297,7 +26300,7 @@ function getArrowPositionStyles(input) {
 		position: "absolute",
 		[radiusBySide[side]]: `${input.arrowRadius}px`
 	};
-	const edge = -input.arrowSize / 2;
+	const edge = px$1(-input.arrowSize / 2);
 	if (side === "left") return {
 		...base,
 		...horizontalSide(placement, input.arrowY, input.arrowOffset, input.arrowPosition),
@@ -26373,6 +26376,7 @@ var FloatingArrow = (0, vue.defineComponent)({
 	setup(props, { attrs }) {
 		const { dir } = useDirection();
 		return () => props.visible ? (0, vue.h)("div", {
+			role: "presentation",
 			...attrs,
 			style: [attrs.style, getArrowPositionStyles({
 				...props,
@@ -26819,7 +26823,11 @@ var PopoverBase = (0, vue.defineComponent)({
 					...shiftOptions
 				};
 			}));
-			result.push((0, _floating_ui_vue.arrow)({ element: arrowElement }));
+			if (props.middlewares?.inline) result.push((0, _floating_ui_vue.inline)(typeof props.middlewares.inline === "object" ? props.middlewares.inline : void 0));
+			result.push((0, _floating_ui_vue.arrow)({
+				element: arrowElement,
+				padding: props.arrowOffset
+			}));
 			if (props.middlewares?.size || props.width === "target") result.push((0, _floating_ui_vue.size)({
 				...typeof props.middlewares?.size === "object" ? props.middlewares.size : {},
 				apply: ({ rects, availableWidth, availableHeight, elements, ...rest }) => {