From cb3f131e6388364f86cb9f984f0274ef0158e340 Mon Sep 17 00:00:00 2001
From: Clark Tomlinson <fallen013@gmail.com>
Date: Wed, 20 Nov 2024 13:34:00 -0500
Subject: [PATCH] Add clip paths to floating arrow

Add clip paths to floating arrow to prevent larger arrow sizes from being visible when hovering a child component (like in menus)
---
 .../Floating/FloatingArrow/get-arrow-position-styles.ts       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/@mantine/core/src/components/Floating/FloatingArrow/get-arrow-position-styles.ts b/packages/@mantine/core/src/components/Floating/FloatingArrow/get-arrow-position-styles.ts
index 096f0a47a5f..593887798c0 100644
--- a/packages/@mantine/core/src/components/Floating/FloatingArrow/get-arrow-position-styles.ts
+++ b/packages/@mantine/core/src/components/Floating/FloatingArrow/get-arrow-position-styles.ts
@@ -96,6 +96,7 @@ export function getArrowPositionStyles({
       right: arrowPlacement,
       borderLeftColor: 'transparent',
       borderBottomColor: 'transparent',
+      clipPath: 'polygon(100% 0, 0 0, 100% 100%)',
     };
   }
 
@@ -106,6 +107,7 @@ export function getArrowPositionStyles({
       left: arrowPlacement,
       borderRightColor: 'transparent',
       borderTopColor: 'transparent',
+      clipPath: 'polygon(0 100%, 0 0, 100% 100%)',
     };
   }
 
@@ -116,6 +118,7 @@ export function getArrowPositionStyles({
       bottom: arrowPlacement,
       borderTopColor: 'transparent',
       borderLeftColor: 'transparent',
+      clipPath: 'polygon(0 100%, 100% 100%, 100% 0)',
     };
   }
 
@@ -126,6 +129,7 @@ export function getArrowPositionStyles({
       top: arrowPlacement,
       borderBottomColor: 'transparent',
       borderRightColor: 'transparent',
+      clipPath: 'polygon(0 100%, 0 0, 100% 0)',
     };
   }