From 3740a5c08dccaf70463fcd17531822250d329a72 Mon Sep 17 00:00:00 2001
From: Michael Chart <michael.chart@etchuk.com>
Date: Fri, 18 Nov 2022 10:43:53 +0000
Subject: [PATCH] Add support for `noIsolation` option from react-remove-scroll

When rendering inside a shadow DOM container, this fixes scroll wheel functionality. Without this option, scroll wheel events are captured and don't work.
---
 packages/dialog/src/reach-dialog.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/dialog/src/reach-dialog.tsx b/packages/dialog/src/reach-dialog.tsx
index dbbb2149d..e98c0cf7d 100644
--- a/packages/dialog/src/reach-dialog.tsx
+++ b/packages/dialog/src/reach-dialog.tsx
@@ -116,6 +116,7 @@ const DialogInner = React.forwardRef(function DialogInner(
 		onKeyDown,
 		onMouseDown,
 		unstable_lockFocusAcrossFrames,
+		disableEventCapturing,
 		...props
 	},
 	forwardedRef
@@ -188,6 +189,7 @@ const DialogInner = React.forwardRef(function DialogInner(
 						? !dangerouslyBypassScrollLock
 						: isOpen
 				}
+				noIsolation={disableEventCapturing}
 			>
 				<Comp
 					{...props}
@@ -429,6 +431,16 @@ interface DialogProps {
 	 * @deprecated
 	 */
 	unstable_lockFocusAcrossFrames?: boolean;
+
+	/**
+	 * By default, when the dialog is open, outer events are captured (see
+	 * `noIsolation` option in react-remove-scroll:
+	 * https://github.com/theKashey/react-remove-scroll#usage). Event capturing
+	 * is React friendly and unlikely be a problem. But if you are rendering
+	 * inside a shadow DOM container, you may want to disable event capturing.
+	 *
+	 */
+	disableEventCapturing?: boolean;
 }
 
 Dialog.displayName = "Dialog";