From 4ec76ebd087de6f385c292c896c052450ffc5f2a Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Thu, 22 Feb 2024 18:15:00 +0530
Subject: [PATCH 01/14] Fix focus tracking for dynamic iframe content

---
 .../@react-aria/interactions/src/useFocus.ts  |  6 +-
 .../stories/useFocusRing.stories.tsx          | 57 ++++++++++++++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/interactions/src/useFocus.ts b/packages/@react-aria/interactions/src/useFocus.ts
index 828e565599d..bf877c9988d 100644
--- a/packages/@react-aria/interactions/src/useFocus.ts
+++ b/packages/@react-aria/interactions/src/useFocus.ts
@@ -17,6 +17,7 @@
 
 import {DOMAttributes, FocusableElement, FocusEvents} from '@react-types/shared';
 import {FocusEvent, useCallback} from 'react';
+import {getOwnerDocument} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
 
 export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
@@ -61,7 +62,10 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
   const onFocus: FocusProps<Target>['onFocus'] = useCallback((e: FocusEvent<Target>) => {
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
-    if (e.target === e.currentTarget && document.activeElement === e.target) {
+
+    const ownerDocument = getOwnerDocument(e.target);
+
+    if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
       if (onFocusProp) {
         onFocusProp(e);
       }
diff --git a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
index 58420fcfdc9..28340021c94 100644
--- a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
+++ b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
@@ -10,10 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
+import {addWindowFocusTracking} from '../src';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import {Key} from '@react-types/shared';
-import React, {useState} from 'react';
+import {mergeProps} from '@react-aria/utils';
+import React, {useEffect, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
 import {SearchField} from '@react-spectrum/searchfield';
+import {useButton} from '@react-aria/button';
+import {useFocusRing} from '@react-aria/focus';
 
 interface IColumn {
   name: string,
@@ -59,6 +64,11 @@ export const SearchTableview = {
   }
 };
 
+export const IFrame = {
+  render: () => <IFrameExample />,
+  name: 'focus state in dynamic iframe'
+};
+
 function SearchExample() {
   const [items, setItems] = useState(manyRows);
 
@@ -89,3 +99,48 @@ function SearchExample() {
     </div>
   );
 }
+
+function Button() {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const {buttonProps} = useButton({}, buttonRef);
+  const {focusProps, isFocusVisible, isFocused} = useFocusRing();
+
+  return (
+    <button ref={buttonRef} {...mergeProps(buttonProps, focusProps)}>
+      Focus Visible: {isFocusVisible ? 'true' : 'false'} <br />
+      Focused: {isFocused ? 'true' : 'false'}
+    </button>
+  );
+}
+
+const IframeWrapper = ({children}) => {
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    if (iframeRef.current) {
+      const main = document.createElement('main');
+      const iframeDocument = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
+      iframeDocument.body.innerHTML = '';
+      iframeDocument.body.appendChild(main);
+      ReactDOM.render(children, main);
+
+      return addWindowFocusTracking(iframeDocument.body);
+    }
+  }, [children]);
+
+  return <iframe title="test" ref={iframeRef} />;
+};
+
+function IFrameExample() {
+  return (
+    <>
+      <Button />
+      <IframeWrapper>
+        <Button />
+        <Button />
+        <Button />
+      </IframeWrapper>
+    </>
+  );
+}

From 6540d7e60824bc85bd95665feae37256004e497f Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Thu, 22 Feb 2024 19:14:26 +0530
Subject: [PATCH 02/14] fix lint error

---
 .tool-versions                                                  | 1 +
 .../@react-aria/interactions/stories/useFocusRing.stories.tsx   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 00000000000..ae96860d9cb
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 16.20.2
diff --git a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
index 28340021c94..3a4c5b6f82b 100644
--- a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
+++ b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
@@ -115,7 +115,7 @@ function Button() {
 }
 
 const IframeWrapper = ({children}) => {
-  const iframeRef = useRef(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   useEffect(() => {
     if (iframeRef.current) {

From a192d5e2b42d01b9b0018e04db5c14bea60ba52c Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Sat, 24 Feb 2024 23:56:46 +0530
Subject: [PATCH 03/14] fix lint error

---
 .../@react-aria/interactions/stories/useFocusRing.stories.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
index 3a4c5b6f82b..20a8f600179 100644
--- a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
+++ b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
@@ -120,7 +120,7 @@ const IframeWrapper = ({children}) => {
   useEffect(() => {
     if (iframeRef.current) {
       const main = document.createElement('main');
-      const iframeDocument = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
+      const iframeDocument = iframeRef.current.contentDocument || iframeRef.current.contentWindow?.document;
       iframeDocument.body.innerHTML = '';
       iframeDocument.body.appendChild(main);
       ReactDOM.render(children, main);

From f7a815b44f33eab73c6d1964415ede0f8b77cc3d Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Sun, 25 Feb 2024 00:23:26 +0530
Subject: [PATCH 04/14] fix lint error

---
 .../@react-aria/interactions/stories/useFocusRing.stories.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
index 20a8f600179..d423817215a 100644
--- a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
+++ b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
@@ -120,7 +120,8 @@ const IframeWrapper = ({children}) => {
   useEffect(() => {
     if (iframeRef.current) {
       const main = document.createElement('main');
-      const iframeDocument = iframeRef.current.contentDocument || iframeRef.current.contentWindow?.document;
+      const iframeDocument = iframeRef.current.contentDocument;
+
       iframeDocument.body.innerHTML = '';
       iframeDocument.body.appendChild(main);
       ReactDOM.render(children, main);

From 3db7ecba7e67329ff69d611759550c4e9a710d7b Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Sun, 25 Feb 2024 02:35:24 +0530
Subject: [PATCH 05/14] fix lint error

---
 .../interactions/stories/useFocusRing.stories.tsx      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
index d423817215a..7598fb38ac8 100644
--- a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
+++ b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
@@ -122,11 +122,13 @@ const IframeWrapper = ({children}) => {
       const main = document.createElement('main');
       const iframeDocument = iframeRef.current.contentDocument;
 
-      iframeDocument.body.innerHTML = '';
-      iframeDocument.body.appendChild(main);
-      ReactDOM.render(children, main);
+      if (iframeDocument) {
+        iframeDocument.body.innerHTML = '';
+        iframeDocument.body.appendChild(main);
+        ReactDOM.render(children, main);
 
-      return addWindowFocusTracking(iframeDocument.body);
+        return addWindowFocusTracking(iframeDocument.body);
+      }
     }
   }, [children]);
 

From f2e2965bdd666b53132ef6ff3a8112b56c8fddd6 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Sun, 25 Feb 2024 23:06:50 +0530
Subject: [PATCH 06/14] Delete .tool-versions

---
 .tool-versions | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
deleted file mode 100644
index ae96860d9cb..00000000000
--- a/.tool-versions
+++ /dev/null
@@ -1 +0,0 @@
-nodejs 16.20.2

From 3714033c0a42fe17ccd7a57402abea4e7c2f165f Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:53:49 +0530
Subject: [PATCH 07/14] add unit tests

---
 .../interactions/test/useFocusVisible.test.js | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/@react-aria/interactions/test/useFocusVisible.test.js b/packages/@react-aria/interactions/test/useFocusVisible.test.js
index ba00b906187..8033c1c47ae 100644
--- a/packages/@react-aria/interactions/test/useFocusVisible.test.js
+++ b/packages/@react-aria/interactions/test/useFocusVisible.test.js
@@ -12,14 +12,25 @@
 import {act, fireEvent, render, renderHook, screen, waitFor} from '@react-spectrum/test-utils';
 import {addWindowFocusTracking, useFocusVisible, useFocusVisibleListener} from '../';
 import {hasSetupGlobalListeners} from '../src/useFocusVisible';
+import {mergeProps} from '@react-aria/utils';
 import React from 'react';
 import {render as ReactDOMRender} from 'react-dom';
+import {useButton} from '@react-aria/button';
+import {useFocusRing} from '@react-aria/focus';
 
 function Example(props) {
   const {isFocusVisible} = useFocusVisible();
   return <div {...props}>example{isFocusVisible && '-focusVisible'}</div>;
 }
 
+function ButtonExample(props) {
+  const ref = React.useRef(null);
+  const {buttonProps} = useButton({}, ref);
+  const {focusProps, isFocusVisible} = useFocusRing();
+
+  return <button {...mergeProps(props, buttonProps, focusProps)} ref={ref}>example{isFocusVisible && '-focusVisible'}</button>;
+}
+
 function toggleBrowserTabs() {
   // this describes Chrome behaviour only, for other browsers visibilitychange fires after all focus events.
   // leave tab
@@ -284,6 +295,25 @@ describe('useFocusVisible', function () {
       toggleBrowserWindow();
       expect(el.textContent).toBe('example');
     });
+
+    it('correctly shifts focus to the iframe when the iframe is focused', async function () {
+      ReactDOMRender(<ButtonExample id="iframe-example" />, iframeRoot);
+
+      // Fire focus in iframe
+      await waitFor(() => {
+        expect(document.querySelector('iframe').contentWindow.document.body.querySelector('button[id="iframe-example"]')).toBeTruthy();
+      });
+      addWindowFocusTracking(iframeRoot);
+
+      // Iframe event listeners
+      const el = document.querySelector('iframe').contentWindow.document.body.querySelector('button[id="iframe-example"]');
+
+      // toggleBrowserWindow();
+      fireEvent.focus(iframe.contentWindow.document.body);
+      fireEvent.keyDown(el, {key: 'Tab'});
+
+      expect(el.textContent).toBe('example-focusVisible');
+    });
   });
 });
 

From 70b00ef7b57709ef3c15051f75bdcc93dc55d29e Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:57:01 +0530
Subject: [PATCH 08/14] fixes

---
 packages/@react-aria/interactions/test/useFocusVisible.test.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/@react-aria/interactions/test/useFocusVisible.test.js b/packages/@react-aria/interactions/test/useFocusVisible.test.js
index 8033c1c47ae..c745080fbd3 100644
--- a/packages/@react-aria/interactions/test/useFocusVisible.test.js
+++ b/packages/@react-aria/interactions/test/useFocusVisible.test.js
@@ -305,10 +305,8 @@ describe('useFocusVisible', function () {
       });
       addWindowFocusTracking(iframeRoot);
 
-      // Iframe event listeners
       const el = document.querySelector('iframe').contentWindow.document.body.querySelector('button[id="iframe-example"]');
 
-      // toggleBrowserWindow();
       fireEvent.focus(iframe.contentWindow.document.body);
       fireEvent.keyDown(el, {key: 'Tab'});
 

From 80a6accde90f3bb7cbdce3c687bd2afda1b11723 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 27 Feb 2024 14:12:29 +1100
Subject: [PATCH 09/14] fix test

---
 .../interactions/test/useFocusVisible.test.js    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/interactions/test/useFocusVisible.test.js b/packages/@react-aria/interactions/test/useFocusVisible.test.js
index c745080fbd3..0d5b9c58ea1 100644
--- a/packages/@react-aria/interactions/test/useFocusVisible.test.js
+++ b/packages/@react-aria/interactions/test/useFocusVisible.test.js
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {act, fireEvent, render, renderHook, screen, waitFor} from '@react-spectrum/test-utils';
+import {act, fireEvent, pointerMap, render, renderHook, screen, waitFor} from '@react-spectrum/test-utils';
 import {addWindowFocusTracking, useFocusVisible, useFocusVisibleListener} from '../';
 import {hasSetupGlobalListeners} from '../src/useFocusVisible';
 import {mergeProps} from '@react-aria/utils';
@@ -17,6 +17,7 @@ import React from 'react';
 import {render as ReactDOMRender} from 'react-dom';
 import {useButton} from '@react-aria/button';
 import {useFocusRing} from '@react-aria/focus';
+import userEvent from '@testing-library/user-event';
 
 function Example(props) {
   const {isFocusVisible} = useFocusVisible();
@@ -60,6 +61,11 @@ function toggleBrowserWindow() {
 }
 
 describe('useFocusVisible', function () {
+  let user;
+
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
   beforeEach(() => {
     fireEvent.focus(document.body);
   });
@@ -298,17 +304,19 @@ describe('useFocusVisible', function () {
 
     it('correctly shifts focus to the iframe when the iframe is focused', async function () {
       ReactDOMRender(<ButtonExample id="iframe-example" />, iframeRoot);
+      addWindowFocusTracking(iframeRoot);
 
       // Fire focus in iframe
       await waitFor(() => {
         expect(document.querySelector('iframe').contentWindow.document.body.querySelector('button[id="iframe-example"]')).toBeTruthy();
       });
-      addWindowFocusTracking(iframeRoot);
 
       const el = document.querySelector('iframe').contentWindow.document.body.querySelector('button[id="iframe-example"]');
 
-      fireEvent.focus(iframe.contentWindow.document.body);
-      fireEvent.keyDown(el, {key: 'Tab'});
+      fireEvent.mouseDown(el);
+      fireEvent.mouseUp(el);
+      fireEvent.keyDown(el, {key: 'Esc'});
+      fireEvent.keyUp(el, {key: 'Esc'});
 
       expect(el.textContent).toBe('example-focusVisible');
     });

From 43532cdd322331830a3b1861230329b4e7fe5a67 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 27 Feb 2024 14:15:40 +1100
Subject: [PATCH 10/14] fix lint

---
 .../@react-aria/interactions/test/useFocusVisible.test.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/@react-aria/interactions/test/useFocusVisible.test.js b/packages/@react-aria/interactions/test/useFocusVisible.test.js
index 0d5b9c58ea1..828e20a036d 100644
--- a/packages/@react-aria/interactions/test/useFocusVisible.test.js
+++ b/packages/@react-aria/interactions/test/useFocusVisible.test.js
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {act, fireEvent, pointerMap, render, renderHook, screen, waitFor} from '@react-spectrum/test-utils';
+import {act, fireEvent, render, renderHook, screen, waitFor} from '@react-spectrum/test-utils';
 import {addWindowFocusTracking, useFocusVisible, useFocusVisibleListener} from '../';
 import {hasSetupGlobalListeners} from '../src/useFocusVisible';
 import {mergeProps} from '@react-aria/utils';
@@ -17,7 +17,6 @@ import React from 'react';
 import {render as ReactDOMRender} from 'react-dom';
 import {useButton} from '@react-aria/button';
 import {useFocusRing} from '@react-aria/focus';
-import userEvent from '@testing-library/user-event';
 
 function Example(props) {
   const {isFocusVisible} = useFocusVisible();
@@ -61,11 +60,6 @@ function toggleBrowserWindow() {
 }
 
 describe('useFocusVisible', function () {
-  let user;
-
-  beforeAll(() => {
-    user = userEvent.setup({delay: null, pointerMap});
-  });
   beforeEach(() => {
     fireEvent.focus(document.body);
   });

From 0803aea9863c7b0c9500620600883c001c9ad8b1 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Sat, 2 Mar 2024 02:21:10 +0530
Subject: [PATCH 11/14] Add ShadowRoot example in useFocusRing stories

A new 'ShadowRoot' example is added in the useFocusRing.stories.tsx under the @react-aria/interactions package. The getOwnerDocument function in domHelpers.ts is also updated to return either a Document or a ShadowRoot, depending on the context. This helps illustrate focus management within Shadow DOM contexts.
---
 .../stories/useFocusRing.stories.tsx          | 50 +++++++++++++++++++
 packages/@react-aria/utils/src/domHelpers.ts  |  4 +-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
index 7598fb38ac8..d3885651e89 100644
--- a/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
+++ b/packages/@react-aria/interactions/stories/useFocusRing.stories.tsx
@@ -69,6 +69,11 @@ export const IFrame = {
   name: 'focus state in dynamic iframe'
 };
 
+export const ShadowRoot = {
+  render: () => <ShadowRootExample />,
+  name: 'focus state in shadow root'
+};
+
 function SearchExample() {
   const [items, setItems] = useState(manyRows);
 
@@ -147,3 +152,48 @@ function IFrameExample() {
     </>
   );
 }
+
+function ShadowDomWrapper({children}) {
+  const container = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const _container = container.current;
+
+    if (!_container) {return;}
+
+    const div = document.createElement('div');
+    _container.appendChild(div);
+
+    const shadowRoot = div.attachShadow({mode: 'open'});
+    const main = document.createElement('main');
+    shadowRoot.appendChild(main);
+    ReactDOM.render(children, main);
+
+    const teardown = addWindowFocusTracking(shadowRoot);
+
+    return () => {
+      teardown();
+      if (_container) {
+        _container.innerHTML = '';
+      }
+    };
+  }, [children]);
+
+  return <div ref={container} />;
+}
+
+function ShadowRootExample() {
+  return (
+    <>
+      <Button />
+      <div style={{backgroundColor: 'aliceblue', padding: 10}}>
+        Inside Shadow DOM
+        <ShadowDomWrapper>
+          <Button />
+          <Button />
+          <Button />
+        </ShadowDomWrapper>
+      </div>
+    </>
+  );
+}
diff --git a/packages/@react-aria/utils/src/domHelpers.ts b/packages/@react-aria/utils/src/domHelpers.ts
index b8be4d07ee2..b4ff2f9b91b 100644
--- a/packages/@react-aria/utils/src/domHelpers.ts
+++ b/packages/@react-aria/utils/src/domHelpers.ts
@@ -1,5 +1,5 @@
-export const getOwnerDocument = (el: Element | null | undefined): Document => {
-  return el?.ownerDocument ?? document;
+export const getOwnerDocument = (el: Element | null | undefined): Document | ShadowRoot => {
+  return el?.getRootNode() ?? document;
 };
 
 export const getOwnerWindow = (

From 46c39decd4b2855084889a54bbca5f58f05f629d Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Mon, 4 Mar 2024 05:17:15 +0530
Subject: [PATCH 12/14] Replace getOwnerDocument with getRootNode in
 FocusScope.tsx

The commit replaces the use of getOwnerDocument with getRootNode function in the FocusScope.tsx file. This change modifies how the active element is retrieved and how event listeners are added and removed, leading to better management of the focus scope. Additionally, getRootNode function has been expanded to handle Shadow DOM.
---
 packages/@react-aria/focus/src/FocusScope.tsx | 70 +++++++++----------
 packages/@react-aria/utils/src/domHelpers.ts  | 16 ++++-
 packages/@react-aria/utils/src/index.ts       |  2 +-
 3 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/packages/@react-aria/focus/src/FocusScope.tsx
index 7029a0cfbf0..cd2ddbd5413 100644
--- a/packages/@react-aria/focus/src/FocusScope.tsx
+++ b/packages/@react-aria/focus/src/FocusScope.tsx
@@ -12,7 +12,7 @@
 
 import {FocusableElement} from '@react-types/shared';
 import {focusSafely} from './focusSafely';
-import {getOwnerDocument, useLayoutEffect} from '@react-aria/utils';
+import {getRootNode, useLayoutEffect} from '@react-aria/utils';
 import {isElementVisible} from './isElementVisible';
 import React, {ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
 
@@ -133,7 +133,7 @@ export function FocusScope(props: FocusScopeProps) {
   // This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
   // It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
   useEffect(() => {
-    const activeElement = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
+    const activeElement = getRootNode(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
     let scope: TreeNode | null = null;
 
     if (isElementInScope(activeElement, scopeRef.current)) {
@@ -197,7 +197,7 @@ function createFocusManagerForScope(scopeRef: React.RefObject<Element[]>): Focus
     focusNext(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current!;
       let {from, tabbable, wrap, accept} = opts;
-      let node = from || getOwnerDocument(scope[0]).activeElement!;
+      let node = from || getRootNode(scope[0]).activeElement!;
       let sentinel = scope[0].previousElementSibling!;
       let scopeRoot = getScopeRoot(scope);
       let walker = getFocusableTreeWalker(scopeRoot, {tabbable, accept}, scope);
@@ -215,7 +215,7 @@ function createFocusManagerForScope(scopeRef: React.RefObject<Element[]>): Focus
     focusPrevious(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current!;
       let {from, tabbable, wrap, accept} = opts;
-      let node = from || getOwnerDocument(scope[0]).activeElement!;
+      let node = from || getRootNode(scope[0]).activeElement!;
       let sentinel = scope[scope.length - 1].nextElementSibling!;
       let scopeRoot = getScopeRoot(scope);
       let walker = getFocusableTreeWalker(scopeRoot, {tabbable, accept}, scope);
@@ -310,7 +310,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean)
       return;
     }
 
-    const ownerDocument = getOwnerDocument(scope ? scope[0] : undefined);
+    const rootNode = getRootNode(scope ? scope[0] : undefined);
 
     // Handle the Tab key to contain focus within the scope
     let onKeyDown = (e) => {
@@ -318,7 +318,7 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean)
         return;
       }
 
-      let focusedElement = ownerDocument.activeElement;
+      let focusedElement = rootNode.activeElement;
       let scope = scopeRef.current;
       if (!scope || !isElementInScope(focusedElement, scope)) {
         return;
@@ -368,9 +368,9 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean)
       }
       raf.current = requestAnimationFrame(() => {
         // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-        if (ownerDocument.activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
+        if (rootNode.activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(rootNode.activeElement, scopeRef)) {
           activeScope = scopeRef;
-          if (ownerDocument.body.contains(e.target)) {
+          if (rootNode.body.contains(e.target)) {
             focusedNode.current = e.target;
             focusedNode.current?.focus();
           } else if (activeScope.current) {
@@ -380,13 +380,13 @@ function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean)
       });
     };
 
-    ownerDocument.addEventListener('keydown', onKeyDown, false);
-    ownerDocument.addEventListener('focusin', onFocus, false);
+    rootNode.addEventListener('keydown', onKeyDown, false);
+    rootNode.addEventListener('focusin', onFocus, false);
     scope?.forEach(element => element.addEventListener('focusin', onFocus, false));
     scope?.forEach(element => element.addEventListener('focusout', onBlur, false));
     return () => {
-      ownerDocument.removeEventListener('keydown', onKeyDown, false);
-      ownerDocument.removeEventListener('focusin', onFocus, false);
+      rootNode.removeEventListener('keydown', onKeyDown, false);
+      rootNode.removeEventListener('focusin', onFocus, false);
       scope?.forEach(element => element.removeEventListener('focusin', onFocus, false));
       scope?.forEach(element => element.removeEventListener('focusout', onBlur, false));
     };
@@ -489,8 +489,8 @@ function useAutoFocus(scopeRef: RefObject<Element[]>, autoFocus?: boolean) {
   useEffect(() => {
     if (autoFocusRef.current) {
       activeScope = scopeRef;
-      const ownerDocument = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined);
-      if (!isElementInScope(ownerDocument.activeElement, activeScope.current) && scopeRef.current) {
+      const rootNode = getRootNode(scopeRef.current ? scopeRef.current[0] : undefined);
+      if (!isElementInScope(rootNode.activeElement, activeScope.current) && scopeRef.current) {
         focusFirstInScope(scopeRef.current);
       }
     }
@@ -507,7 +507,7 @@ function useActiveScopeTracker(scopeRef: RefObject<Element[]>, restore?: boolean
     }
 
     let scope = scopeRef.current;
-    const ownerDocument = getOwnerDocument(scope ? scope[0] : undefined);
+    const rootNode = getRootNode(scope ? scope[0] : undefined);
 
     let onFocus = (e) => {
       let target = e.target as Element;
@@ -518,10 +518,10 @@ function useActiveScopeTracker(scopeRef: RefObject<Element[]>, restore?: boolean
       }
     };
 
-    ownerDocument.addEventListener('focusin', onFocus, false);
+    rootNode.addEventListener('focusin', onFocus, false);
     scope?.forEach(element => element.addEventListener('focusin', onFocus, false));
     return () => {
-      ownerDocument.removeEventListener('focusin', onFocus, false);
+      rootNode.removeEventListener('focusin', onFocus, false);
       scope?.forEach(element => element.removeEventListener('focusin', onFocus, false));
     };
   }, [scopeRef, restore, contain]);
@@ -543,13 +543,13 @@ function shouldRestoreFocus(scopeRef: ScopeRef) {
 function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean, contain?: boolean) {
   // create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
   // eslint-disable-next-line no-restricted-globals
-  const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined).activeElement as FocusableElement : null);
+  const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? getRootNode(scopeRef.current ? scopeRef.current[0] : undefined).activeElement as FocusableElement : null);
 
   // restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
   // restoring-non-containing scopes should only care if they become active so they can perform the restore
   useLayoutEffect(() => {
     let scope = scopeRef.current;
-    const ownerDocument = getOwnerDocument(scope ? scope[0] : undefined);
+    const rootNode = getRootNode(scope ? scope[0] : undefined);
     if (!restoreFocus || contain) {
       return;
     }
@@ -558,23 +558,23 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
       // If focusing an element in a child scope of the currently active scope, the child becomes active.
       // Moving out of the active scope to an ancestor is not allowed.
       if ((!activeScope || isAncestorScope(activeScope, scopeRef)) &&
-      isElementInScope(ownerDocument.activeElement, scopeRef.current)
+      isElementInScope(rootNode.activeElement, scopeRef.current)
       ) {
         activeScope = scopeRef;
       }
     };
 
-    ownerDocument.addEventListener('focusin', onFocus, false);
+    rootNode.addEventListener('focusin', onFocus, false);
     scope?.forEach(element => element.addEventListener('focusin', onFocus, false));
     return () => {
-      ownerDocument.removeEventListener('focusin', onFocus, false);
+      rootNode.removeEventListener('focusin', onFocus, false);
       scope?.forEach(element => element.removeEventListener('focusin', onFocus, false));
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scopeRef, contain]);
 
   useLayoutEffect(() => {
-    const ownerDocument = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined);
+    const rootNode = getRootNode(scopeRef.current ? scopeRef.current[0] : undefined);
 
     if (!restoreFocus) {
       return;
@@ -589,7 +589,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
         return;
       }
 
-      let focusedElement = ownerDocument.activeElement as FocusableElement;
+      let focusedElement = rootNode.activeElement as FocusableElement;
       if (!isElementInScope(focusedElement, scopeRef.current)) {
         return;
       }
@@ -600,13 +600,13 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
       let nodeToRestore = treeNode.nodeToRestore;
 
       // Create a DOM tree walker that matches all tabbable elements
-      let walker = getFocusableTreeWalker(ownerDocument.body, {tabbable: true});
+      let walker = getFocusableTreeWalker(rootNode.body, {tabbable: true});
 
       // Find the next tabbable element after the currently focused element
       walker.currentNode = focusedElement;
       let nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as FocusableElement;
 
-      if (!nodeToRestore || !ownerDocument.body.contains(nodeToRestore) || nodeToRestore === ownerDocument.body) {
+      if (!nodeToRestore || !rootNode.body.contains(nodeToRestore) || nodeToRestore === rootNode.body) {
         nodeToRestore = undefined;
         treeNode.nodeToRestore = undefined;
       }
@@ -639,19 +639,19 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
     };
 
     if (!contain) {
-      ownerDocument.addEventListener('keydown', onKeyDown, true);
+      rootNode.addEventListener('keydown', onKeyDown, true);
     }
 
     return () => {
       if (!contain) {
-        ownerDocument.removeEventListener('keydown', onKeyDown, true);
+        rootNode.removeEventListener('keydown', onKeyDown, true);
       }
     };
   }, [scopeRef, restoreFocus, contain]);
 
   // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
   useLayoutEffect(() => {
-    const ownerDocument = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined);
+    const rootNode = getRootNode(scopeRef.current ? scopeRef.current[0] : undefined);
 
     if (!restoreFocus) {
       return;
@@ -675,15 +675,15 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
         && nodeToRestore
         && (
           // eslint-disable-next-line react-hooks/exhaustive-deps
-          isElementInScope(ownerDocument.activeElement, scopeRef.current)
-          || (ownerDocument.activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef))
+          isElementInScope(rootNode.activeElement, scopeRef.current)
+          || (rootNode.activeElement === rootNode.body && shouldRestoreFocus(scopeRef))
         )
       ) {
         // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
         let clonedTree = focusScopeTree.clone();
         requestAnimationFrame(() => {
           // Only restore focus if we've lost focus to the body, the alternative is that focus has been purposefully moved elsewhere
-          if (ownerDocument.activeElement === ownerDocument.body) {
+          if (rootNode.activeElement === rootNode.body) {
             // look up the tree starting with our scope to find a nodeToRestore still in the DOM
             let treeNode = clonedTree.getTreeNode(scopeRef);
             while (treeNode) {
@@ -717,7 +717,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
  */
 export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]) {
   let selector = opts?.tabbable ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR;
-  let walker = getOwnerDocument(root).createTreeWalker(
+  let walker = getRootNode(root).createTreeWalker(
     root,
     NodeFilter.SHOW_ELEMENT,
     {
@@ -758,7 +758,7 @@ export function createFocusManager(ref: RefObject<Element>, defaultOptions: Focu
         return null;
       }
       let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
-      let node = from || getOwnerDocument(root).activeElement;
+      let node = from || getRootNode(root).activeElement;
       let walker = getFocusableTreeWalker(root, {tabbable, accept});
       if (root.contains(node)) {
         walker.currentNode = node!;
@@ -779,7 +779,7 @@ export function createFocusManager(ref: RefObject<Element>, defaultOptions: Focu
         return null;
       }
       let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
-      let node = from || getOwnerDocument(root).activeElement;
+      let node = from || getRootNode(root).activeElement;
       let walker = getFocusableTreeWalker(root, {tabbable, accept});
       if (root.contains(node)) {
         walker.currentNode = node!;
diff --git a/packages/@react-aria/utils/src/domHelpers.ts b/packages/@react-aria/utils/src/domHelpers.ts
index b4ff2f9b91b..bb9ce1d6e67 100644
--- a/packages/@react-aria/utils/src/domHelpers.ts
+++ b/packages/@react-aria/utils/src/domHelpers.ts
@@ -1,5 +1,5 @@
-export const getOwnerDocument = (el: Element | null | undefined): Document | ShadowRoot => {
-  return el?.getRootNode() ?? document;
+export const getOwnerDocument = (el: Element | null | undefined): Document => {
+  return el?.ownerDocument ?? document;
 };
 
 export const getOwnerWindow = (
@@ -12,3 +12,15 @@ export const getOwnerWindow = (
   const doc = getOwnerDocument(el as Element | null | undefined);
   return doc.defaultView || window;
 };
+
+export const getRootNode = (el: Element | null | undefined): Document | (ShadowRoot & {
+  body: ShadowRoot
+}) => {
+  const rootNode = el?.getRootNode() ?? document;
+
+  if (rootNode instanceof ShadowRoot) {
+    rootNode.body = rootNode;
+  }
+
+  return rootNode;
+};
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index 0f9f03377df..ca7b7205547 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -11,7 +11,7 @@
  */
 export {useId, mergeIds, useSlotId} from './useId';
 export {chain} from './chain';
-export {getOwnerDocument, getOwnerWindow} from './domHelpers';
+export {getOwnerDocument, getOwnerWindow, getRootNode} from './domHelpers';
 export {mergeProps} from './mergeProps';
 export {mergeRefs} from './mergeRefs';
 export {filterDOMProps} from './filterDOMProps';

From c367f0571744443ec4767b414ac46d5ad017818a Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <ritz078@users.noreply.github.com>
Date: Mon, 4 Mar 2024 05:26:37 +0530
Subject: [PATCH 13/14] Update 'isElementInScope' function parameters

The function 'isElementInScope' in FocusScope.tsx has been updated to accept 'ShadowRoot' as an additional possible type for the 'element' parameter. This allows compatibility with more potential focusing scenarios.
---
 packages/@react-aria/focus/src/FocusScope.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/packages/@react-aria/focus/src/FocusScope.tsx
index cd2ddbd5413..2b4fcb3b43f 100644
--- a/packages/@react-aria/focus/src/FocusScope.tsx
+++ b/packages/@react-aria/focus/src/FocusScope.tsx
@@ -407,7 +407,7 @@ function isElementInAnyScope(element: Element) {
   return isElementInChildScope(element);
 }
 
-function isElementInScope(element?: Element | null, scope?: Element[] | null) {
+function isElementInScope(element?: Element | null | ShadowRoot, scope?: Element[] | null) {
   if (!element) {
     return false;
   }

From 0e12fa6d23f70c356d8e880970ea68358c78aa1a Mon Sep 17 00:00:00 2001
From: Mahmoud Elsayad <elsayadi5700@gmail.com>
Date: Mon, 11 Mar 2024 04:48:41 +0200
Subject: [PATCH 14/14] - Add a new dom helper `getDeepActiveElement` to pierce
 shadow root and get correct active element. - Make `getFocusableTreeWalker`
 compatible with shadow root. - Update `getOwnerWindow`. - Fix `useFocus` -
 `useFocusVisible` - `useInteractionOutside` - `usePress`. - Utilize
 `getDeepActiveElement`. - Update usage of `e.target` in `useOverlay` to use
 `composedPath`.

---
 packages/@react-aria/focus/src/FocusScope.tsx        |  4 +++-
 packages/@react-aria/focus/src/focusSafely.ts        |  4 ++--
 packages/@react-aria/grid/src/useGridCell.ts         | 11 ++++++-----
 packages/@react-aria/interactions/src/useFocus.ts    |  4 ++--
 .../@react-aria/interactions/src/useFocusVisible.ts  |  8 ++++----
 .../interactions/src/useInteractOutside.ts           |  5 +++--
 packages/@react-aria/interactions/src/usePress.ts    | 12 ++++++------
 packages/@react-aria/overlays/src/useOverlay.ts      |  6 ++++--
 packages/@react-aria/utils/src/domHelpers.ts         | 12 ++++++++++--
 packages/@react-aria/utils/src/index.ts              |  2 +-
 10 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/packages/@react-aria/focus/src/FocusScope.tsx
index 2b4fcb3b43f..75d86227956 100644
--- a/packages/@react-aria/focus/src/FocusScope.tsx
+++ b/packages/@react-aria/focus/src/FocusScope.tsx
@@ -717,7 +717,9 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
  */
 export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]) {
   let selector = opts?.tabbable ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR;
-  let walker = getRootNode(root).createTreeWalker(
+  const document = getRootNode(root);
+  const docWalker = document instanceof ShadowRoot ? document.ownerDocument : document;
+  let walker = docWalker.createTreeWalker(
     root,
     NodeFilter.SHOW_ELEMENT,
     {
diff --git a/packages/@react-aria/focus/src/focusSafely.ts b/packages/@react-aria/focus/src/focusSafely.ts
index e0bc52e9465..6a4dc1bfe3d 100644
--- a/packages/@react-aria/focus/src/focusSafely.ts
+++ b/packages/@react-aria/focus/src/focusSafely.ts
@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import {focusWithoutScrolling, getOwnerDocument, runAfterTransition} from '@react-aria/utils';
+import {focusWithoutScrolling, getRootNode, runAfterTransition} from '@react-aria/utils';
 import {getInteractionModality} from '@react-aria/interactions';
 
 /**
@@ -24,7 +24,7 @@ export function focusSafely(element: FocusableElement) {
   // the page before shifting focus. This avoids issues with VoiceOver on iOS
   // causing the page to scroll when moving focus if the element is transitioning
   // from off the screen.
-  const ownerDocument = getOwnerDocument(element);
+  const ownerDocument = getRootNode(element);
   if (getInteractionModality() === 'virtual') {
     let lastFocusedElement = ownerDocument.activeElement;
     runAfterTransition(() => {
diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts
index 5efe934992e..e44626ad4e9 100644
--- a/packages/@react-aria/grid/src/useGridCell.ts
+++ b/packages/@react-aria/grid/src/useGridCell.ts
@@ -12,7 +12,7 @@
 
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
+import {getDeepActiveElement, getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
@@ -70,9 +70,10 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   // it is focused, otherwise the cell itself is focused.
   let focus = () => {
     let treeWalker = getFocusableTreeWalker(ref.current);
+    const documentActiveElement = getDeepActiveElement();
     if (focusMode === 'child') {
       // If focus is already on a focusable child within the cell, early return so we don't shift focus
-      if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
+      if (ref.current.contains(documentActiveElement) && ref.current !== documentActiveElement) {
         return;
       }
 
@@ -87,7 +88,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
 
     if (
       (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
-      !ref.current.contains(document.activeElement)
+      !ref.current.contains(documentActiveElement)
     ) {
       focusSafely(ref.current);
     }
@@ -110,7 +111,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     }
 
     let walker = getFocusableTreeWalker(ref.current);
-    walker.currentNode = document.activeElement;
+    walker.currentNode = getDeepActiveElement();
 
     switch (e.key) {
       case 'ArrowLeft': {
@@ -232,7 +233,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     // If the cell itself is focused, wait a frame so that focus finishes propagatating
     // up to the tree, and move focus to a focusable child if possible.
     requestAnimationFrame(() => {
-      if (focusMode === 'child' && document.activeElement === ref.current) {
+      if (focusMode === 'child' && getDeepActiveElement() === ref.current) {
         focus();
       }
     });
diff --git a/packages/@react-aria/interactions/src/useFocus.ts b/packages/@react-aria/interactions/src/useFocus.ts
index bf877c9988d..5aee99c3211 100644
--- a/packages/@react-aria/interactions/src/useFocus.ts
+++ b/packages/@react-aria/interactions/src/useFocus.ts
@@ -17,7 +17,7 @@
 
 import {DOMAttributes, FocusableElement, FocusEvents} from '@react-types/shared';
 import {FocusEvent, useCallback} from 'react';
-import {getOwnerDocument} from '@react-aria/utils';
+import {getRootNode} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
 
 export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
@@ -63,7 +63,7 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
 
-    const ownerDocument = getOwnerDocument(e.target);
+    const ownerDocument = getRootNode(e.target);
 
     if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
       if (onFocusProp) {
diff --git a/packages/@react-aria/interactions/src/useFocusVisible.ts b/packages/@react-aria/interactions/src/useFocusVisible.ts
index d0637c913dd..f7d54477121 100644
--- a/packages/@react-aria/interactions/src/useFocusVisible.ts
+++ b/packages/@react-aria/interactions/src/useFocusVisible.ts
@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';
+import {getOwnerWindow, getRootNode, isMac, isVirtualClick} from '@react-aria/utils';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 
@@ -123,7 +123,7 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
   }
 
   const windowObject = getOwnerWindow(element);
-  const documentObject = getOwnerDocument(element);
+  const documentObject = getRootNode(element);
 
   // Programmatic focus() calls shouldn't affect the current input modality.
   // However, we need to detect other cases when a focus event occurs without
@@ -164,7 +164,7 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
 
 const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
   const windowObject = getOwnerWindow(element);
-  const documentObject = getOwnerDocument(element);
+  const documentObject = getRootNode(element);
   if (loadListener) {
     documentObject.removeEventListener('DOMContentLoaded', loadListener);
   }
@@ -210,7 +210,7 @@ const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
  * @returns A function to remove the event listeners and cleanup the state.
  */
 export function addWindowFocusTracking(element?: HTMLElement | null): () => void {
-  const documentObject = getOwnerDocument(element);
+  const documentObject = getRootNode(element);
   let loadListener;
   if (documentObject.readyState !== 'loading') {
     setupGlobalFocusEvents(element);
diff --git a/packages/@react-aria/interactions/src/useInteractOutside.ts b/packages/@react-aria/interactions/src/useInteractOutside.ts
index 99625c3bb69..0b7609c67c8 100644
--- a/packages/@react-aria/interactions/src/useInteractOutside.ts
+++ b/packages/@react-aria/interactions/src/useInteractOutside.ts
@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, useEffectEvent} from '@react-aria/utils';
+import {getRootNode, useEffectEvent} from '@react-aria/utils';
 import {RefObject, useEffect, useRef} from 'react';
 
 export interface InteractOutsideProps {
@@ -59,7 +59,8 @@ export function useInteractOutside(props: InteractOutsideProps) {
     }
 
     const element = ref.current;
-    const documentObject = getOwnerDocument(element);
+    const rootNode = getRootNode(element);
+    const documentObject = rootNode instanceof ShadowRoot ? rootNode.ownerDocument : rootNode;
 
     // Use pointer events if available. Otherwise, fall back to mouse and touch events.
     if (typeof PointerEvent !== 'undefined') {
diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts
index 583a71bfb2f..e81991e7307 100644
--- a/packages/@react-aria/interactions/src/usePress.ts
+++ b/packages/@react-aria/interactions/src/usePress.ts
@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {chain, focusWithoutScrolling, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
+import {chain, focusWithoutScrolling, getOwnerWindow, getRootNode, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents} from '@react-types/shared';
 import {PressResponderContext} from './context';
@@ -279,7 +279,7 @@ export function usePress(props: PressHookProps): PressResult {
               }
             };
 
-            addGlobalListener(getOwnerDocument(e.currentTarget), 'keyup', chain(pressUp, onKeyUp), true);
+            addGlobalListener(getRootNode(e.currentTarget), 'keyup', chain(pressUp, onKeyUp), true);
           }
 
           if (shouldStopPropagation) {
@@ -409,9 +409,9 @@ export function usePress(props: PressHookProps): PressResult {
 
           shouldStopPropagation = triggerPressStart(e, state.pointerType);
 
-          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointermove', onPointerMove, false);
-          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointerup', onPointerUp, false);
-          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointercancel', onPointerCancel, false);
+          addGlobalListener(getRootNode(e.currentTarget), 'pointermove', onPointerMove, false);
+          addGlobalListener(getRootNode(e.currentTarget), 'pointerup', onPointerUp, false);
+          addGlobalListener(getRootNode(e.currentTarget), 'pointercancel', onPointerCancel, false);
         }
 
         if (shouldStopPropagation) {
@@ -533,7 +533,7 @@ export function usePress(props: PressHookProps): PressResult {
           e.stopPropagation();
         }
 
-        addGlobalListener(getOwnerDocument(e.currentTarget), 'mouseup', onMouseUp, false);
+        addGlobalListener(getRootNode(e.currentTarget), 'mouseup', onMouseUp, false);
       };
 
       pressProps.onMouseEnter = (e) => {
diff --git a/packages/@react-aria/overlays/src/useOverlay.ts b/packages/@react-aria/overlays/src/useOverlay.ts
index 2e4dc24cac4..26ca9067904 100644
--- a/packages/@react-aria/overlays/src/useOverlay.ts
+++ b/packages/@react-aria/overlays/src/useOverlay.ts
@@ -92,7 +92,8 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): Ov
   };
 
   let onInteractOutsideStart = (e: PointerEvent) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
+    const actualTarget = e.composedPath()[0] as Element;
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(actualTarget)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
         e.preventDefault();
@@ -101,7 +102,8 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): Ov
   };
 
   let onInteractOutside = (e: PointerEvent) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
+    const actualTarget = e.composedPath()[0] as Element;
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(actualTarget)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
         e.preventDefault();
diff --git a/packages/@react-aria/utils/src/domHelpers.ts b/packages/@react-aria/utils/src/domHelpers.ts
index bb9ce1d6e67..3229d988bfd 100644
--- a/packages/@react-aria/utils/src/domHelpers.ts
+++ b/packages/@react-aria/utils/src/domHelpers.ts
@@ -9,8 +9,8 @@ export const getOwnerWindow = (
     return el;
   }
 
-  const doc = getOwnerDocument(el as Element | null | undefined);
-  return doc.defaultView || window;
+  const doc = getRootNode(el as Element | null | undefined);
+  return doc instanceof ShadowRoot ?  doc.ownerDocument.defaultView || window :  doc.defaultView || window;
 };
 
 export const getRootNode = (el: Element | null | undefined): Document | (ShadowRoot & {
@@ -24,3 +24,11 @@ export const getRootNode = (el: Element | null | undefined): Document | (ShadowR
 
   return rootNode;
 };
+
+export const getDeepActiveElement = () => {
+  let activeElement = document.activeElement;
+  while (activeElement.shadowRoot && activeElement.shadowRoot.activeElement) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+};
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index ca7b7205547..906ccd12fbb 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -11,7 +11,7 @@
  */
 export {useId, mergeIds, useSlotId} from './useId';
 export {chain} from './chain';
-export {getOwnerDocument, getOwnerWindow, getRootNode} from './domHelpers';
+export {getOwnerDocument, getOwnerWindow, getRootNode, getDeepActiveElement} from './domHelpers';
 export {mergeProps} from './mergeProps';
 export {mergeRefs} from './mergeRefs';
 export {filterDOMProps} from './filterDOMProps';