From cad806bcb5ff2daa35debe595745f2f8f12b43d2 Mon Sep 17 00:00:00 2001
From: Alex Lande <alexlande@gmail.com>
Date: Wed, 31 Jan 2024 05:21:27 -0800
Subject: [PATCH] fix: Mouse panning when used in shadow DOM (#448)

---
 src/core/pan/panning.utils.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/core/pan/panning.utils.ts b/src/core/pan/panning.utils.ts
index 2b32f409..c280b687 100644
--- a/src/core/pan/panning.utils.ts
+++ b/src/core/pan/panning.utils.ts
@@ -16,7 +16,17 @@ export const isPanningStartAllowed = (
   const { isInitialized, wrapperComponent } = contextInstance;
 
   const target = event.target as HTMLElement;
-  const isWrapperChild = wrapperComponent?.contains(target);
+  const targetIsShadowDom = "shadowRoot" in target && "composedPath" in event;
+  const isWrapperChild = targetIsShadowDom
+    ? event.composedPath().some((el) => {
+        if (!(el instanceof Element)) {
+          return false;
+        }
+
+        return wrapperComponent?.contains(el);
+      })
+    : wrapperComponent?.contains(target);
+
   const isAllowed = isInitialized && target && isWrapperChild;
 
   if (!isAllowed) return false;