feat(react-menu): use get-deep-active-element to cross the shadow DOM boundary

Author: cpsoinos

packages/react/menu/package.json

@@ -34,6 +34,7 @@
     "build": "radix-build"
   },
   "dependencies": {
+    "@radix-ui/deep-active-element": "workspace:*",
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-collection": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",

packages/react/menu/src/menu.tsx

@@ -21,6 +21,7 @@ import { hideOthers } from 'aria-hidden';
 import { RemoveScroll } from 'react-remove-scroll';
 
 import type { Scope } from '@radix-ui/react-context';
+import { getDeepActiveElement } from '@radix-ui/deep-active-element'
 
 type Direction = 'ltr' | 'rtl';
 
@@ -397,7 +398,7 @@ const MenuContentImpl = React.forwardRef<MenuContentImplElement, MenuContentImpl
     const handleTypeaheadSearch = (key: string) => {
       const search = searchRef.current + key;
       const items = getItems().filter((item) => !item.disabled);
-      const currentItem = document.activeElement;
+      const currentItem = getDeepActiveElement();
       const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
       const values = items.map((item) => item.textValue);
       const nextMatch = getNextMatch(values, search, currentMatch);
@@ -1238,12 +1239,12 @@ function getCheckedState(checked: CheckedState) {
 }
 
 function focusFirst(candidates: HTMLElement[]) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  const PREVIOUSLY_FOCUSED_ELEMENT = getDeepActiveElement();
   for (const candidate of candidates) {
     // if focus is already where we want to go, we don't want to keep going through the candidates
     if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
     candidate.focus();
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+    if (getDeepActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT) return;
   }
 }