@react-aria/focus 3.14.3 → 3.16.0

package/dist/main.js

@@ -1,11 +1,13 @@
-var $aB6Cp$react = require("react");
 var $aB6Cp$reactariautils = require("@react-aria/utils");
+var $aB6Cp$react = require("react");
 var $aB6Cp$reactariainteractions = require("@react-aria/interactions");
 var $aB6Cp$clsx = require("clsx");
 
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
+
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
@@ -59,16 +61,18 @@ function $1c7f9157d722357d$export$80f3e147d781571c(element) {
     // 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 = (0, $aB6Cp$reactariautils.getOwnerDocument)(element);
     if ((0, $aB6Cp$reactariainteractions.getInteractionModality)() === "virtual") {
-        let lastFocusedElement = document.activeElement;
+        let lastFocusedElement = ownerDocument.activeElement;
         (0, $aB6Cp$reactariautils.runAfterTransition)(()=>{
             // If focus did not move and the element is still in the document, focus it.
-            if (document.activeElement === lastFocusedElement && document.contains(element)) (0, $aB6Cp$reactariautils.focusWithoutScrolling)(element);
+            if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) (0, $aB6Cp$reactariautils.focusWithoutScrolling)(element);
         });
     } else (0, $aB6Cp$reactariautils.focusWithoutScrolling)(element);
 }
 
 
+
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -79,8 +83,10 @@ function $1c7f9157d722357d$export$80f3e147d781571c(element) {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ function $d5156037ad898a4d$var$isStyleVisible(element) {
-    if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) return false;
+ */ 
+function $d5156037ad898a4d$var$isStyleVisible(element) {
+    const windowObject = (0, $aB6Cp$reactariautils.getOwnerWindow)(element);
+    if (!(element instanceof windowObject.HTMLElement) && !(element instanceof windowObject.SVGElement)) return false;
     let { display: display, visibility: visibility } = element.style;
     let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
     if (isVisible) {
@@ -99,13 +105,12 @@ function $d5156037ad898a4d$export$e989c0fffaa6b27a(element, childElement) {
 
 
 
-
 const $a7a032acae3ddda9$var$FocusContext = /*#__PURE__*/ (0, ($parcel$interopDefault($aB6Cp$react))).createContext(null);
 let $a7a032acae3ddda9$var$activeScope = null;
 function $a7a032acae3ddda9$export$20e40289641fbbb6(props) {
     let { children: children, contain: contain, restoreFocus: restoreFocus, autoFocus: autoFocus } = props;
-    let startRef = (0, $aB6Cp$react.useRef)();
-    let endRef = (0, $aB6Cp$react.useRef)();
+    let startRef = (0, $aB6Cp$react.useRef)(null);
+    let endRef = (0, $aB6Cp$react.useRef)(null);
     let scopeRef = (0, $aB6Cp$react.useRef)([]);
     let { parentNode: parentNode } = (0, $aB6Cp$react.useContext)($a7a032acae3ddda9$var$FocusContext) || {};
     // Create a tree node here so we can add children to it even before it is added to the tree.
@@ -133,13 +138,14 @@ function $a7a032acae3ddda9$export$20e40289641fbbb6(props) {
     ]);
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
         let node = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef);
-        node.contain = contain;
+        if (node) node.contain = !!contain;
     }, [
         contain
     ]);
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
+        var _startRef_current;
         // Find all rendered nodes between the sentinels and add them to the scope.
-        let node = startRef.current.nextSibling;
+        let node = (_startRef_current = startRef.current) === null || _startRef_current === void 0 ? void 0 : _startRef_current.nextSibling;
         let nodes = [];
         while(node && node !== endRef.current){
             nodes.push(node);
@@ -153,32 +159,34 @@ function $a7a032acae3ddda9$export$20e40289641fbbb6(props) {
     $a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain);
     $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain);
     $a7a032acae3ddda9$var$useAutoFocus(scopeRef, autoFocus);
-    // this layout effect needs to run last so that focusScopeTree cleanup happens at the last moment possible
+    // 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.
     (0, $aB6Cp$react.useEffect)(()=>{
-        if (scopeRef) {
-            let activeElement = document.activeElement;
-            let scope = null;
-            // In strict mode, active scope is incorrectly updated since cleanup will run even though scope hasn't unmounted.
-            // To fix this, we need to update the actual activeScope here
-            if ($a7a032acae3ddda9$var$isElementInScope(activeElement, scopeRef.current)) {
-                // Since useLayoutEffect runs for children first, we need to traverse the focusScope tree and find the bottom most scope that
-                // contains the active element and set that as the activeScope
-                for (let node of $a7a032acae3ddda9$export$d06fae2ee68b101e.traverse())if ($a7a032acae3ddda9$var$isElementInScope(activeElement, node.scopeRef.current)) scope = node;
-                if (scope === $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef)) $a7a032acae3ddda9$var$activeScope = scope.scopeRef;
-            }
-            return ()=>{
-                // Scope may have been re-parented.
-                let parentScope = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef).parent.scopeRef;
-                // Restore the active scope on unmount if this scope or a descendant scope is active.
-                // Parent effect cleanups run before children, so we need to check if the
-                // parent scope actually still exists before restoring the active scope to it.
-                if ((scopeRef === $a7a032acae3ddda9$var$activeScope || $a7a032acae3ddda9$var$isAncestorScope(scopeRef, $a7a032acae3ddda9$var$activeScope)) && (!parentScope || $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(parentScope))) $a7a032acae3ddda9$var$activeScope = parentScope;
-                $a7a032acae3ddda9$export$d06fae2ee68b101e.removeTreeNode(scopeRef);
-            };
+        const activeElement = (0, $aB6Cp$reactariautils.getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
+        let scope = null;
+        if ($a7a032acae3ddda9$var$isElementInScope(activeElement, scopeRef.current)) {
+            // We need to traverse the focusScope tree and find the bottom most scope that
+            // contains the active element and set that as the activeScope.
+            for (let node of $a7a032acae3ddda9$export$d06fae2ee68b101e.traverse())if (node.scopeRef && $a7a032acae3ddda9$var$isElementInScope(activeElement, node.scopeRef.current)) scope = node;
+            if (scope === $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef)) $a7a032acae3ddda9$var$activeScope = scope.scopeRef;
         }
     }, [
         scopeRef
     ]);
+    // This layout effect cleanup is so that the tree node is removed synchronously with react before the RAF
+    // in useRestoreFocus cleanup runs.
+    (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
+        return ()=>{
+            var _focusScopeTree_getTreeNode_parent, _focusScopeTree_getTreeNode;
+            var _focusScopeTree_getTreeNode_parent_scopeRef;
+            // Scope may have been re-parented.
+            let parentScope = (_focusScopeTree_getTreeNode_parent_scopeRef = (_focusScopeTree_getTreeNode = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef)) === null || _focusScopeTree_getTreeNode === void 0 ? void 0 : (_focusScopeTree_getTreeNode_parent = _focusScopeTree_getTreeNode.parent) === null || _focusScopeTree_getTreeNode_parent === void 0 ? void 0 : _focusScopeTree_getTreeNode_parent.scopeRef) !== null && _focusScopeTree_getTreeNode_parent_scopeRef !== void 0 ? _focusScopeTree_getTreeNode_parent_scopeRef : null;
+            if ((scopeRef === $a7a032acae3ddda9$var$activeScope || $a7a032acae3ddda9$var$isAncestorScope(scopeRef, $a7a032acae3ddda9$var$activeScope)) && (!parentScope || $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(parentScope))) $a7a032acae3ddda9$var$activeScope = parentScope;
+            $a7a032acae3ddda9$export$d06fae2ee68b101e.removeTreeNode(scopeRef);
+        };
+    }, [
+        scopeRef
+    ]);
     let focusManager = (0, $aB6Cp$react.useMemo)(()=>$a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef), []);
     let value = (0, $aB6Cp$react.useMemo)(()=>({
             focusManager: focusManager,
@@ -208,9 +216,10 @@ function $a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef) {
         focusNext (opts = {}) {
             let scope = scopeRef.current;
             let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
-            let node = from || document.activeElement;
+            let node = from || (0, $aB6Cp$reactariautils.getOwnerDocument)(scope[0]).activeElement;
             let sentinel = scope[0].previousElementSibling;
-            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+            let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
                 tabbable: tabbable,
                 accept: accept
             }, scope);
@@ -226,9 +235,10 @@ function $a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef) {
         focusPrevious (opts = {}) {
             let scope = scopeRef.current;
             let { from: from, tabbable: tabbable, wrap: wrap, accept: accept } = opts;
-            let node = from || document.activeElement;
+            let node = from || (0, $aB6Cp$reactariautils.getOwnerDocument)(scope[0]).activeElement;
             let sentinel = scope[scope.length - 1].nextElementSibling;
-            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+            let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
                 tabbable: tabbable,
                 accept: accept
             }, scope);
@@ -244,7 +254,8 @@ function $a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef) {
         focusFirst (opts = {}) {
             let scope = scopeRef.current;
             let { tabbable: tabbable, accept: accept } = opts;
-            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+            let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
                 tabbable: tabbable,
                 accept: accept
             }, scope);
@@ -256,7 +267,8 @@ function $a7a032acae3ddda9$var$createFocusManagerForScope(scopeRef) {
         focusLast (opts = {}) {
             let scope = scopeRef.current;
             let { tabbable: tabbable, accept: accept } = opts;
-            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+            let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
                 tabbable: tabbable,
                 accept: accept
             }, scope);
@@ -298,26 +310,29 @@ function $a7a032acae3ddda9$var$shouldContainFocus(scopeRef) {
 }
 function $a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain) {
     let focusedNode = (0, $aB6Cp$react.useRef)();
-    let raf = (0, $aB6Cp$react.useRef)(null);
+    let raf = (0, $aB6Cp$react.useRef)();
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
         let scope = scopeRef.current;
         if (!contain) {
             // if contain was changed, then we should cancel any ongoing waits to pull focus back into containment
             if (raf.current) {
                 cancelAnimationFrame(raf.current);
-                raf.current = null;
+                raf.current = undefined;
             }
             return;
         }
+        const ownerDocument = (0, $aB6Cp$reactariautils.getOwnerDocument)(scope ? scope[0] : undefined);
         // Handle the Tab key to contain focus within the scope
         let onKeyDown = (e)=>{
             if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$a7a032acae3ddda9$var$shouldContainFocus(scopeRef)) return;
-            let focusedElement = document.activeElement;
+            let focusedElement = ownerDocument.activeElement;
             let scope = scopeRef.current;
-            if (!$a7a032acae3ddda9$var$isElementInScope(focusedElement, scope)) return;
-            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+            if (!scope || !$a7a032acae3ddda9$var$isElementInScope(focusedElement, scope)) return;
+            let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
                 tabbable: true
             }, scope);
+            if (!focusedElement) return;
             walker.currentNode = focusedElement;
             let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
             if (!nextElement) {
@@ -337,7 +352,7 @@ function $a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain) {
                 // If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
                 // restore focus to the previously focused node or the first tabbable element in the active scope.
                 if (focusedNode.current) focusedNode.current.focus();
-                else if ($a7a032acae3ddda9$var$activeScope) $a7a032acae3ddda9$var$focusFirstInScope($a7a032acae3ddda9$var$activeScope.current);
+                else if ($a7a032acae3ddda9$var$activeScope && $a7a032acae3ddda9$var$activeScope.current) $a7a032acae3ddda9$var$focusFirstInScope($a7a032acae3ddda9$var$activeScope.current);
             } else if ($a7a032acae3ddda9$var$shouldContainFocus(scopeRef)) focusedNode.current = e.target;
         };
         let onBlur = (e)=>{
@@ -345,24 +360,25 @@ function $a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain) {
             if (raf.current) cancelAnimationFrame(raf.current);
             raf.current = requestAnimationFrame(()=>{
                 // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-                if ($a7a032acae3ddda9$var$shouldContainFocus(scopeRef) && !$a7a032acae3ddda9$var$isElementInChildScope(document.activeElement, scopeRef)) {
+                if (ownerDocument.activeElement && $a7a032acae3ddda9$var$shouldContainFocus(scopeRef) && !$a7a032acae3ddda9$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
                     $a7a032acae3ddda9$var$activeScope = scopeRef;
-                    if (document.body.contains(e.target)) {
+                    if (ownerDocument.body.contains(e.target)) {
+                        var _focusedNode_current;
                         focusedNode.current = e.target;
-                        focusedNode.current.focus();
-                    } else if ($a7a032acae3ddda9$var$activeScope) $a7a032acae3ddda9$var$focusFirstInScope($a7a032acae3ddda9$var$activeScope.current);
+                        (_focusedNode_current = focusedNode.current) === null || _focusedNode_current === void 0 ? void 0 : _focusedNode_current.focus();
+                    } else if ($a7a032acae3ddda9$var$activeScope.current) $a7a032acae3ddda9$var$focusFirstInScope($a7a032acae3ddda9$var$activeScope.current);
                 }
             });
         };
-        document.addEventListener("keydown", onKeyDown, false);
-        document.addEventListener("focusin", onFocus, false);
-        scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
-        scope.forEach((element)=>element.addEventListener("focusout", onBlur, false));
+        ownerDocument.addEventListener("keydown", onKeyDown, false);
+        ownerDocument.addEventListener("focusin", onFocus, false);
+        scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
+        scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusout", onBlur, false));
         return ()=>{
-            document.removeEventListener("keydown", onKeyDown, false);
-            document.removeEventListener("focusin", onFocus, false);
-            scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
-            scope.forEach((element)=>element.removeEventListener("focusout", onBlur, false));
+            ownerDocument.removeEventListener("keydown", onKeyDown, false);
+            ownerDocument.removeEventListener("focusin", onFocus, false);
+            scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
+            scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusout", onBlur, false));
         };
     }, [
         scopeRef,
@@ -382,6 +398,8 @@ function $a7a032acae3ddda9$var$isElementInAnyScope(element) {
     return $a7a032acae3ddda9$var$isElementInChildScope(element);
 }
 function $a7a032acae3ddda9$var$isElementInScope(element, scope) {
+    if (!element) return false;
+    if (!scope) return false;
     return scope.some((node)=>node.contains(element));
 }
 function $a7a032acae3ddda9$var$isElementInChildScope(element, scope = null) {
@@ -390,7 +408,7 @@ function $a7a032acae3ddda9$var$isElementInChildScope(element, scope = null) {
     // node.contains in isElementInScope covers child scopes that are also DOM children,
     // but does not cover child scopes in portals.
     for (let { scopeRef: s } of $a7a032acae3ddda9$export$d06fae2ee68b101e.traverse($a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scope))){
-        if ($a7a032acae3ddda9$var$isElementInScope(element, s.current)) return true;
+        if (s && $a7a032acae3ddda9$var$isElementInScope(element, s.current)) return true;
     }
     return false;
 }
@@ -420,14 +438,16 @@ function $a7a032acae3ddda9$var$focusElement(element, scroll = false) {
 }
 function $a7a032acae3ddda9$var$focusFirstInScope(scope, tabbable = true) {
     let sentinel = scope[0].previousElementSibling;
-    let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+    let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+    let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
         tabbable: tabbable
     }, scope);
     walker.currentNode = sentinel;
     let nextNode = walker.nextNode();
     // If the scope does not contain a tabbable element, use the first focusable element.
     if (tabbable && !nextNode) {
-        walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa($a7a032acae3ddda9$var$getScopeRoot(scope), {
+        scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
+        walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(scopeRoot, {
             tabbable: false
         }, scope);
         walker.currentNode = sentinel;
@@ -440,7 +460,8 @@ function $a7a032acae3ddda9$var$useAutoFocus(scopeRef, autoFocus) {
     (0, $aB6Cp$react.useEffect)(()=>{
         if (autoFocusRef.current) {
             $a7a032acae3ddda9$var$activeScope = scopeRef;
-            if (!$a7a032acae3ddda9$var$isElementInScope(document.activeElement, $a7a032acae3ddda9$var$activeScope.current)) $a7a032acae3ddda9$var$focusFirstInScope(scopeRef.current);
+            const ownerDocument = (0, $aB6Cp$reactariautils.getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
+            if (!$a7a032acae3ddda9$var$isElementInScope(ownerDocument.activeElement, $a7a032acae3ddda9$var$activeScope.current) && scopeRef.current) $a7a032acae3ddda9$var$focusFirstInScope(scopeRef.current);
         }
         autoFocusRef.current = false;
     }, [
@@ -453,16 +474,17 @@ function $a7a032acae3ddda9$var$useActiveScopeTracker(scopeRef, restore, contain)
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
         if (restore || contain) return;
         let scope = scopeRef.current;
+        const ownerDocument = (0, $aB6Cp$reactariautils.getOwnerDocument)(scope ? scope[0] : undefined);
         let onFocus = (e)=>{
             let target = e.target;
             if ($a7a032acae3ddda9$var$isElementInScope(target, scopeRef.current)) $a7a032acae3ddda9$var$activeScope = scopeRef;
             else if (!$a7a032acae3ddda9$var$isElementInAnyScope(target)) $a7a032acae3ddda9$var$activeScope = null;
         };
-        document.addEventListener("focusin", onFocus, false);
-        scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
+        ownerDocument.addEventListener("focusin", onFocus, false);
+        scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
         return ()=>{
-            document.removeEventListener("focusin", onFocus, false);
-            scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
+            ownerDocument.removeEventListener("focusin", onFocus, false);
+            scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
         };
     }, [
         scopeRef,
@@ -480,22 +502,24 @@ function $a7a032acae3ddda9$var$shouldRestoreFocus(scopeRef) {
 }
 function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain) {
     // create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
-    const nodeToRestoreRef = (0, $aB6Cp$react.useRef)(typeof document !== "undefined" ? document.activeElement : null);
+    // eslint-disable-next-line no-restricted-globals
+    const nodeToRestoreRef = (0, $aB6Cp$react.useRef)(typeof document !== "undefined" ? (0, $aB6Cp$reactariautils.getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement : 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
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
         let scope = scopeRef.current;
+        const ownerDocument = (0, $aB6Cp$reactariautils.getOwnerDocument)(scope ? scope[0] : undefined);
         if (!restoreFocus || contain) return;
         let onFocus = ()=>{
             // 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 ((!$a7a032acae3ddda9$var$activeScope || $a7a032acae3ddda9$var$isAncestorScope($a7a032acae3ddda9$var$activeScope, scopeRef)) && $a7a032acae3ddda9$var$isElementInScope(document.activeElement, scopeRef.current)) $a7a032acae3ddda9$var$activeScope = scopeRef;
+            if ((!$a7a032acae3ddda9$var$activeScope || $a7a032acae3ddda9$var$isAncestorScope($a7a032acae3ddda9$var$activeScope, scopeRef)) && $a7a032acae3ddda9$var$isElementInScope(ownerDocument.activeElement, scopeRef.current)) $a7a032acae3ddda9$var$activeScope = scopeRef;
         };
-        document.addEventListener("focusin", onFocus, false);
-        scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
+        ownerDocument.addEventListener("focusin", onFocus, false);
+        scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.addEventListener("focusin", onFocus, false));
         return ()=>{
-            document.removeEventListener("focusin", onFocus, false);
-            scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
+            ownerDocument.removeEventListener("focusin", onFocus, false);
+            scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
         };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -503,6 +527,7 @@ function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         contain
     ]);
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
+        const ownerDocument = (0, $aB6Cp$reactariautils.getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
         if (!restoreFocus) return;
         // Handle the Tab key so that tabbing out of the scope goes to the next element
         // after the node that had focus when the scope mounted. This is important when
@@ -510,19 +535,21 @@ function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         // tabbing out of the overlay.
         let onKeyDown = (e)=>{
             if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$a7a032acae3ddda9$var$shouldContainFocus(scopeRef)) return;
-            let focusedElement = document.activeElement;
+            let focusedElement = ownerDocument.activeElement;
             if (!$a7a032acae3ddda9$var$isElementInScope(focusedElement, scopeRef.current)) return;
-            let nodeToRestore = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore;
+            let treeNode = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef);
+            if (!treeNode) return;
+            let nodeToRestore = treeNode.nodeToRestore;
             // Create a DOM tree walker that matches all tabbable elements
-            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(document.body, {
+            let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(ownerDocument.body, {
                 tabbable: true
             });
             // Find the next tabbable element after the currently focused element
             walker.currentNode = focusedElement;
             let nextElement = e.shiftKey ? walker.previousNode() : walker.nextNode();
-            if (!document.body.contains(nodeToRestore) || nodeToRestore === document.body) {
-                nodeToRestore = null;
-                $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore = null;
+            if (!nodeToRestore || !ownerDocument.body.contains(nodeToRestore) || nodeToRestore === ownerDocument.body) {
+                nodeToRestore = undefined;
+                treeNode.nodeToRestore = undefined;
             }
             // If there is no next element, or it is outside the current scope, move focus to the
             // next element after the node to restore to instead.
@@ -541,9 +568,9 @@ function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                 else $a7a032acae3ddda9$var$focusElement(nodeToRestore, true);
             }
         };
-        if (!contain) document.addEventListener("keydown", onKeyDown, true);
+        if (!contain) ownerDocument.addEventListener("keydown", onKeyDown, true);
         return ()=>{
-            if (!contain) document.removeEventListener("keydown", onKeyDown, true);
+            if (!contain) ownerDocument.removeEventListener("keydown", onKeyDown, true);
         };
     }, [
         scopeRef,
@@ -552,22 +579,28 @@ function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain)
     ]);
     // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
     (0, $aB6Cp$reactariautils.useLayoutEffect)(()=>{
+        const ownerDocument = (0, $aB6Cp$reactariautils.getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
         if (!restoreFocus) return;
-        $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore = nodeToRestoreRef.current;
+        let treeNode = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef);
+        if (!treeNode) return;
+        var _nodeToRestoreRef_current;
+        treeNode.nodeToRestore = (_nodeToRestoreRef_current = nodeToRestoreRef.current) !== null && _nodeToRestoreRef_current !== void 0 ? _nodeToRestoreRef_current : undefined;
         return ()=>{
-            let nodeToRestore = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef).nodeToRestore;
+            let treeNode = $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(scopeRef);
+            if (!treeNode) return;
+            let nodeToRestore = treeNode.nodeToRestore;
             // if we already lost focus to the body and this was the active scope, then we should attempt to restore
             if (restoreFocus && nodeToRestore && // eslint-disable-next-line react-hooks/exhaustive-deps
-            ($a7a032acae3ddda9$var$isElementInScope(document.activeElement, scopeRef.current) || document.activeElement === document.body && $a7a032acae3ddda9$var$shouldRestoreFocus(scopeRef))) {
+            ($a7a032acae3ddda9$var$isElementInScope(ownerDocument.activeElement, scopeRef.current) || ownerDocument.activeElement === ownerDocument.body && $a7a032acae3ddda9$var$shouldRestoreFocus(scopeRef))) {
                 // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
                 let clonedTree = $a7a032acae3ddda9$export$d06fae2ee68b101e.clone();
                 requestAnimationFrame(()=>{
                     // Only restore focus if we've lost focus to the body, the alternative is that focus has been purposefully moved elsewhere
-                    if (document.activeElement === document.body) {
+                    if (ownerDocument.activeElement === ownerDocument.body) {
                         // look up the tree starting with our scope to find a nodeToRestore still in the DOM
                         let treeNode = clonedTree.getTreeNode(scopeRef);
                         while(treeNode){
-                            if (treeNode.nodeToRestore && document.body.contains(treeNode.nodeToRestore)) {
+                            if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
                                 $a7a032acae3ddda9$var$focusElement(treeNode.nodeToRestore);
                                 return;
                             }
@@ -577,7 +610,7 @@ function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                         // ancestor scope that is still in the tree.
                         treeNode = clonedTree.getTreeNode(scopeRef);
                         while(treeNode){
-                            if (treeNode.scopeRef && $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
+                            if (treeNode.scopeRef && treeNode.scopeRef.current && $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
                                 $a7a032acae3ddda9$var$focusFirstInScope(treeNode.scopeRef.current, true);
                                 return;
                             }
@@ -594,7 +627,7 @@ function $a7a032acae3ddda9$var$useRestoreFocus(scopeRef, restoreFocus, contain)
 }
 function $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, opts, scope) {
     let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $a7a032acae3ddda9$var$TABBABLE_ELEMENT_SELECTOR : $a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR;
-    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    let walker = (0, $aB6Cp$reactariautils.getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
         acceptNode (node) {
             var _opts_from;
             // Skip nodes inside the starting node.
@@ -610,9 +643,9 @@ function $a7a032acae3ddda9$export$c5251b9e124bf29(ref, defaultOptions = {}) {
     return {
         focusNext (opts = {}) {
             let root = ref.current;
-            if (!root) return;
+            if (!root) return null;
             let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
-            let node = from || document.activeElement;
+            let node = from || (0, $aB6Cp$reactariautils.getOwnerDocument)(root).activeElement;
             let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
                 tabbable: tabbable,
                 accept: accept
@@ -628,9 +661,9 @@ function $a7a032acae3ddda9$export$c5251b9e124bf29(ref, defaultOptions = {}) {
         },
         focusPrevious (opts = defaultOptions) {
             let root = ref.current;
-            if (!root) return;
+            if (!root) return null;
             let { from: from, tabbable: tabbable = defaultOptions.tabbable, wrap: wrap = defaultOptions.wrap, accept: accept = defaultOptions.accept } = opts;
-            let node = from || document.activeElement;
+            let node = from || (0, $aB6Cp$reactariautils.getOwnerDocument)(root).activeElement;
             let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
                 tabbable: tabbable,
                 accept: accept
@@ -639,19 +672,22 @@ function $a7a032acae3ddda9$export$c5251b9e124bf29(ref, defaultOptions = {}) {
             else {
                 let next = $a7a032acae3ddda9$var$last(walker);
                 if (next) $a7a032acae3ddda9$var$focusElement(next, true);
-                return next;
+                return next !== null && next !== void 0 ? next : null;
             }
             let previousNode = walker.previousNode();
             if (!previousNode && wrap) {
                 walker.currentNode = root;
-                previousNode = $a7a032acae3ddda9$var$last(walker);
+                let lastNode = $a7a032acae3ddda9$var$last(walker);
+                if (!lastNode) // couldn't wrap
+                return null;
+                previousNode = lastNode;
             }
             if (previousNode) $a7a032acae3ddda9$var$focusElement(previousNode, true);
-            return previousNode;
+            return previousNode !== null && previousNode !== void 0 ? previousNode : null;
         },
         focusFirst (opts = defaultOptions) {
             let root = ref.current;
-            if (!root) return;
+            if (!root) return null;
             let { tabbable: tabbable = defaultOptions.tabbable, accept: accept = defaultOptions.accept } = opts;
             let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
                 tabbable: tabbable,
@@ -663,7 +699,7 @@ function $a7a032acae3ddda9$export$c5251b9e124bf29(ref, defaultOptions = {}) {
         },
         focusLast (opts = defaultOptions) {
             let root = ref.current;
-            if (!root) return;
+            if (!root) return null;
             let { tabbable: tabbable = defaultOptions.tabbable, accept: accept = defaultOptions.accept } = opts;
             let walker = $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, {
                 tabbable: tabbable,
@@ -671,12 +707,12 @@ function $a7a032acae3ddda9$export$c5251b9e124bf29(ref, defaultOptions = {}) {
             });
             let next = $a7a032acae3ddda9$var$last(walker);
             if (next) $a7a032acae3ddda9$var$focusElement(next, true);
-            return next;
+            return next !== null && next !== void 0 ? next : null;
         }
     };
 }
 function $a7a032acae3ddda9$var$last(walker) {
-    let next;
+    let next = undefined;
     let last;
     do {
         last = walker.lastChild();
@@ -693,6 +729,7 @@ class $a7a032acae3ddda9$var$Tree {
     }
     addTreeNode(scopeRef, parent, nodeToRestore) {
         let parentNode = this.fastMap.get(parent !== null && parent !== void 0 ? parent : null);
+        if (!parentNode) return;
         let node = new $a7a032acae3ddda9$var$TreeNode({
             scopeRef: scopeRef
         });
@@ -708,13 +745,16 @@ class $a7a032acae3ddda9$var$Tree {
         // never remove the root
         if (scopeRef === null) return;
         let node = this.fastMap.get(scopeRef);
+        if (!node) return;
         let parentNode = node.parent;
         // when we remove a scope, check if any sibling scopes are trying to restore focus to something inside the scope we're removing
         // if we are, then replace the siblings restore with the restore from the scope we're removing
-        for (let current of this.traverse())if (current !== node && node.nodeToRestore && current.nodeToRestore && node.scopeRef.current && $a7a032acae3ddda9$var$isElementInScope(current.nodeToRestore, node.scopeRef.current)) current.nodeToRestore = node.nodeToRestore;
+        for (let current of this.traverse())if (current !== node && node.nodeToRestore && current.nodeToRestore && node.scopeRef && node.scopeRef.current && $a7a032acae3ddda9$var$isElementInScope(current.nodeToRestore, node.scopeRef.current)) current.nodeToRestore = node.nodeToRestore;
         let children = node.children;
-        parentNode.removeChild(node);
-        if (children.size > 0) children.forEach((child)=>parentNode.addChild(child));
+        if (parentNode) {
+            parentNode.removeChild(node);
+            if (children.size > 0) children.forEach((child)=>parentNode && parentNode.addChild(child));
+        }
         this.fastMap.delete(node.scopeRef);
     }
     // Pre Order Depth First
@@ -723,8 +763,10 @@ class $a7a032acae3ddda9$var$Tree {
         if (node.children.size > 0) for (let child of node.children)yield* this.traverse(child);
     }
     clone() {
+        var _node_parent;
         let newTree = new $a7a032acae3ddda9$var$Tree();
-        for (let node of this.traverse())newTree.addTreeNode(node.scopeRef, node.parent.scopeRef, node.nodeToRestore);
+        var _node_parent_scopeRef;
+        for (let node of this.traverse())newTree.addTreeNode(node.scopeRef, (_node_parent_scopeRef = (_node_parent = node.parent) === null || _node_parent === void 0 ? void 0 : _node_parent.scopeRef) !== null && _node_parent_scopeRef !== void 0 ? _node_parent_scopeRef : null, node.nodeToRestore);
         return newTree;
     }
     constructor(){
@@ -846,9 +888,10 @@ function $fb504d83237fd6ac$var$useFocusableContext(ref) {
  * Provides DOM props to the nearest focusable child.
  */ function $fb504d83237fd6ac$var$FocusableProvider(props, ref) {
     let { children: children, ...otherProps } = props;
+    let objRef = (0, $aB6Cp$reactariautils.useObjectRef)(ref);
     let context = {
         ...otherProps,
-        ref: ref
+        ref: objRef
     };
     return /*#__PURE__*/ (0, ($parcel$interopDefault($aB6Cp$react))).createElement($fb504d83237fd6ac$var$FocusableContext.Provider, {
         value: context