@react-aria/focus 3.15.0 → 3.16.1

package/dist/module.js

@@ -1,5 +1,5 @@
+import {useLayoutEffect as $6nfFC$useLayoutEffect, getOwnerDocument as $6nfFC$getOwnerDocument, runAfterTransition as $6nfFC$runAfterTransition, focusWithoutScrolling as $6nfFC$focusWithoutScrolling, getOwnerWindow as $6nfFC$getOwnerWindow, mergeProps as $6nfFC$mergeProps, useSyncRef as $6nfFC$useSyncRef, useObjectRef as $6nfFC$useObjectRef} from "@react-aria/utils";
 import $6nfFC$react, {useRef as $6nfFC$useRef, useContext as $6nfFC$useContext, useMemo as $6nfFC$useMemo, useEffect as $6nfFC$useEffect, useState as $6nfFC$useState, useCallback as $6nfFC$useCallback} from "react";
-import {useLayoutEffect as $6nfFC$useLayoutEffect, runAfterTransition as $6nfFC$runAfterTransition, focusWithoutScrolling as $6nfFC$focusWithoutScrolling, mergeProps as $6nfFC$mergeProps, useSyncRef as $6nfFC$useSyncRef, useObjectRef as $6nfFC$useObjectRef} from "@react-aria/utils";
 import {getInteractionModality as $6nfFC$getInteractionModality, isFocusVisible as $6nfFC$isFocusVisible, useFocusVisibleListener as $6nfFC$useFocusVisibleListener, useFocus as $6nfFC$useFocus, useFocusWithin as $6nfFC$useFocusWithin, useKeyboard as $6nfFC$useKeyboard} from "@react-aria/interactions";
 import $6nfFC$clsx from "clsx";
 
@@ -41,16 +41,18 @@ function $6a99195332edec8b$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, $6nfFC$getOwnerDocument)(element);
     if ((0, $6nfFC$getInteractionModality)() === "virtual") {
-        let lastFocusedElement = document.activeElement;
+        let lastFocusedElement = ownerDocument.activeElement;
         (0, $6nfFC$runAfterTransition)(()=>{
             // If focus did not move and the element is still in the document, focus it.
-            if (document.activeElement === lastFocusedElement && document.contains(element)) (0, $6nfFC$focusWithoutScrolling)(element);
+            if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) (0, $6nfFC$focusWithoutScrolling)(element);
         });
     } else (0, $6nfFC$focusWithoutScrolling)(element);
 }
 
 
+
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -61,8 +63,10 @@ function $6a99195332edec8b$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 $645f2e67b85a24c9$var$isStyleVisible(element) {
-    if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) return false;
+ */ 
+function $645f2e67b85a24c9$var$isStyleVisible(element) {
+    const windowObject = (0, $6nfFC$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) {
@@ -81,7 +85,6 @@ function $645f2e67b85a24c9$export$e989c0fffaa6b27a(element, childElement) {
 
 
 
-
 const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $6nfFC$react).createContext(null);
 let $9bf71ea28793e738$var$activeScope = null;
 function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
@@ -139,7 +142,7 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
     // 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, $6nfFC$useEffect)(()=>{
-        let activeElement = document.activeElement;
+        const activeElement = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
         let scope = null;
         if ($9bf71ea28793e738$var$isElementInScope(activeElement, scopeRef.current)) {
             // We need to traverse the focusScope tree and find the bottom most scope that
@@ -193,7 +196,7 @@ function $9bf71ea28793e738$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, $6nfFC$getOwnerDocument)(scope[0]).activeElement;
             let sentinel = scope[0].previousElementSibling;
             let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
             let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
@@ -212,7 +215,7 @@ function $9bf71ea28793e738$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, $6nfFC$getOwnerDocument)(scope[0]).activeElement;
             let sentinel = scope[scope.length - 1].nextElementSibling;
             let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
             let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
@@ -298,10 +301,11 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
             }
             return;
         }
+        const ownerDocument = (0, $6nfFC$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 || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef)) return;
-            let focusedElement = document.activeElement;
+            let focusedElement = ownerDocument.activeElement;
             let scope = scopeRef.current;
             if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
             let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
@@ -336,9 +340,9 @@ function $9bf71ea28793e738$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 (document.activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(document.activeElement, scopeRef)) {
+                if (ownerDocument.activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
                     $9bf71ea28793e738$var$activeScope = scopeRef;
-                    if (document.body.contains(e.target)) {
+                    if (ownerDocument.body.contains(e.target)) {
                         var _focusedNode_current;
                         focusedNode.current = e.target;
                         (_focusedNode_current = focusedNode.current) === null || _focusedNode_current === void 0 ? void 0 : _focusedNode_current.focus();
@@ -346,13 +350,13 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
                 }
             });
         };
-        document.addEventListener("keydown", onKeyDown, false);
-        document.addEventListener("focusin", onFocus, 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);
+            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));
         };
@@ -436,7 +440,8 @@ function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
     (0, $6nfFC$useEffect)(()=>{
         if (autoFocusRef.current) {
             $9bf71ea28793e738$var$activeScope = scopeRef;
-            if (!$9bf71ea28793e738$var$isElementInScope(document.activeElement, $9bf71ea28793e738$var$activeScope.current) && scopeRef.current) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
+            const ownerDocument = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
+            if (!$9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, $9bf71ea28793e738$var$activeScope.current) && scopeRef.current) $9bf71ea28793e738$var$focusFirstInScope(scopeRef.current);
         }
         autoFocusRef.current = false;
     }, [
@@ -449,15 +454,16 @@ function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain)
     (0, $6nfFC$useLayoutEffect)(()=>{
         if (restore || contain) return;
         let scope = scopeRef.current;
+        const ownerDocument = (0, $6nfFC$getOwnerDocument)(scope ? scope[0] : undefined);
         let onFocus = (e)=>{
             let target = e.target;
             if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
             else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
         };
-        document.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);
+            ownerDocument.removeEventListener("focusin", onFocus, false);
             scope === null || scope === void 0 ? void 0 : scope.forEach((element)=>element.removeEventListener("focusin", onFocus, false));
         };
     }, [
@@ -476,21 +482,23 @@ function $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef) {
 }
 function $9bf71ea28793e738$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, $6nfFC$useRef)(typeof document !== "undefined" ? document.activeElement : null);
+    // eslint-disable-next-line no-restricted-globals
+    const nodeToRestoreRef = (0, $6nfFC$useRef)(typeof document !== "undefined" ? (0, $6nfFC$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, $6nfFC$useLayoutEffect)(()=>{
         let scope = scopeRef.current;
+        const ownerDocument = (0, $6nfFC$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 ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(document.activeElement, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
+            if ((!$9bf71ea28793e738$var$activeScope || $9bf71ea28793e738$var$isAncestorScope($9bf71ea28793e738$var$activeScope, scopeRef)) && $9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
         };
-        document.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);
+            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
@@ -499,6 +507,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         contain
     ]);
     (0, $6nfFC$useLayoutEffect)(()=>{
+        const ownerDocument = (0, $6nfFC$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
@@ -506,19 +515,19 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         // tabbing out of the overlay.
         let onKeyDown = (e)=>{
             if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef)) return;
-            let focusedElement = document.activeElement;
+            let focusedElement = ownerDocument.activeElement;
             if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scopeRef.current)) return;
             let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
             if (!treeNode) return;
             let nodeToRestore = treeNode.nodeToRestore;
             // Create a DOM tree walker that matches all tabbable elements
-            let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(document.body, {
+            let walker = $9bf71ea28793e738$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 (!nodeToRestore || !document.body.contains(nodeToRestore) || nodeToRestore === document.body) {
+            if (!nodeToRestore || !ownerDocument.body.contains(nodeToRestore) || nodeToRestore === ownerDocument.body) {
                 nodeToRestore = undefined;
                 treeNode.nodeToRestore = undefined;
             }
@@ -539,9 +548,9 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                 else $9bf71ea28793e738$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,
@@ -550,6 +559,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
     ]);
     // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
     (0, $6nfFC$useLayoutEffect)(()=>{
+        const ownerDocument = (0, $6nfFC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined);
         if (!restoreFocus) return;
         let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
         if (!treeNode) return;
@@ -561,16 +571,16 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
             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
-            ($9bf71ea28793e738$var$isElementInScope(document.activeElement, scopeRef.current) || document.activeElement === document.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
+            ($9bf71ea28793e738$var$isElementInScope(ownerDocument.activeElement, scopeRef.current) || ownerDocument.activeElement === ownerDocument.body && $9bf71ea28793e738$var$shouldRestoreFocus(scopeRef))) {
                 // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
                 let clonedTree = $9bf71ea28793e738$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) {
                                 $9bf71ea28793e738$var$focusElement(treeNode.nodeToRestore);
                                 return;
                             }
@@ -597,7 +607,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
 }
 function $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, opts, scope) {
     let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR : $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR;
-    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    let walker = (0, $6nfFC$getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
         acceptNode (node) {
             var _opts_from;
             // Skip nodes inside the starting node.
@@ -615,7 +625,7 @@ function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
             let root = ref.current;
             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, $6nfFC$getOwnerDocument)(root).activeElement;
             let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
                 tabbable: tabbable,
                 accept: accept
@@ -633,7 +643,7 @@ function $9bf71ea28793e738$export$c5251b9e124bf29(ref, defaultOptions = {}) {
             let root = ref.current;
             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, $6nfFC$getOwnerDocument)(root).activeElement;
             let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(root, {
                 tabbable: tabbable,
                 accept: accept