@react-aria/focus 3.17.0 → 3.18.0

package/dist/FocusScope.mjs

@@ -18,6 +18,7 @@ import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext,
 
 
 const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $cgawC$react).createContext(null);
+const $9bf71ea28793e738$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
 let $9bf71ea28793e738$var$activeScope = null;
 function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
     let { children: children, contain: contain, restoreFocus: restoreFocus, autoFocus: autoFocus } = props;
@@ -59,11 +60,17 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
         // Find all rendered nodes between the sentinels and add them to the scope.
         let node = (_startRef_current = startRef.current) === null || _startRef_current === void 0 ? void 0 : _startRef_current.nextSibling;
         let nodes = [];
+        let stopPropagation = (e)=>e.stopPropagation();
         while(node && node !== endRef.current){
             nodes.push(node);
+            // Stop custom restore focus event from propagating to parent focus scopes.
+            node.addEventListener($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, stopPropagation);
             node = node.nextSibling;
         }
         scopeRef.current = nodes;
+        return ()=>{
+            for (let node of nodes)node.removeEventListener($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, stopPropagation);
+        };
     }, [
         children
     ]);
@@ -192,21 +199,21 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
     };
 }
 const $9bf71ea28793e738$var$focusableElements = [
-    "input:not([disabled]):not([type=hidden])",
-    "select:not([disabled])",
-    "textarea:not([disabled])",
-    "button:not([disabled])",
-    "a[href]",
-    "area[href]",
-    "summary",
-    "iframe",
-    "object",
-    "embed",
-    "audio[controls]",
-    "video[controls]",
-    "[contenteditable]"
+    'input:not([disabled]):not([type=hidden])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'a[href]',
+    'area[href]',
+    'summary',
+    'iframe',
+    'object',
+    'embed',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]'
 ];
-const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
+const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
 $9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 function $9bf71ea28793e738$export$4c063cf1350e6fed(element) {
@@ -224,8 +231,8 @@ function $9bf71ea28793e738$var$shouldContainFocus(scopeRef) {
     return true;
 }
 function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
-    let focusedNode = (0, $cgawC$useRef)();
-    let raf = (0, $cgawC$useRef)();
+    let focusedNode = (0, $cgawC$useRef)(undefined);
+    let raf = (0, $cgawC$useRef)(undefined);
     (0, $cgawC$useLayoutEffect)(()=>{
         let scope = scopeRef.current;
         if (!contain) {
@@ -239,7 +246,7 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
         const ownerDocument = (0, $cgawC$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) || e.isComposing) return;
+            if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
             let focusedElement = ownerDocument.activeElement;
             let scope = scopeRef.current;
             if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
@@ -285,15 +292,15 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
                 }
             });
         };
-        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));
+        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 ()=>{
-            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));
+            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,
@@ -319,7 +326,7 @@ function $9bf71ea28793e738$var$isElementInScope(element, scope) {
 }
 function $9bf71ea28793e738$var$isElementInChildScope(element, scope = null) {
     // If the element is within a top layer element (e.g. toasts), always allow moving focus there.
-    if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) return true;
+    if (element instanceof Element && element.closest('[data-react-aria-top-layer]')) return true;
     // 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 $9bf71ea28793e738$export$d06fae2ee68b101e.traverse($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope))){
@@ -351,7 +358,7 @@ function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
     // ignore
     }
 }
-function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
+function $9bf71ea28793e738$var$getFirstInScope(scope, tabbable = true) {
     let sentinel = scope[0].previousElementSibling;
     let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
     let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
@@ -368,7 +375,10 @@ function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
         walker.currentNode = sentinel;
         nextNode = walker.nextNode();
     }
-    $9bf71ea28793e738$var$focusElement(nextNode);
+    return nextNode;
+}
+function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
+    $9bf71ea28793e738$var$focusElement($9bf71ea28793e738$var$getFirstInScope(scope, tabbable));
 }
 function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
     const autoFocusRef = (0, $cgawC$react).useRef(autoFocus);
@@ -395,11 +405,11 @@ function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain)
             if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
             else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
         };
-        ownerDocument.addEventListener("focusin", onFocus, false);
-        scope === null || scope === void 0 ? void 0 : 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 ()=>{
-            ownerDocument.removeEventListener("focusin", onFocus, false);
-            scope === null || scope === void 0 ? void 0 : 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,
@@ -418,7 +428,7 @@ 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.
     // eslint-disable-next-line no-restricted-globals
-    const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== "undefined" ? (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement : null);
+    const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$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, $cgawC$useLayoutEffect)(()=>{
@@ -430,11 +440,11 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
             // 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(ownerDocument.activeElement, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
         };
-        ownerDocument.addEventListener("focusin", onFocus, false);
-        scope === null || scope === void 0 ? void 0 : 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 ()=>{
-            ownerDocument.removeEventListener("focusin", onFocus, false);
-            scope === null || scope === void 0 ? void 0 : 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
     }, [
@@ -449,7 +459,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         // using portals for overlays, so that focus goes to the expected element when
         // tabbing out of the overlay.
         let onKeyDown = (e)=>{
-            if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
+            if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
             let focusedElement = ownerDocument.activeElement;
             if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scopeRef.current)) return;
             let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
@@ -483,9 +493,9 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                 else $9bf71ea28793e738$var$focusElement(nodeToRestore, true);
             }
         };
-        if (!contain) ownerDocument.addEventListener("keydown", onKeyDown, true);
+        if (!contain) ownerDocument.addEventListener('keydown', onKeyDown, true);
         return ()=>{
-            if (!contain) ownerDocument.removeEventListener("keydown", onKeyDown, true);
+            if (!contain) ownerDocument.removeEventListener('keydown', onKeyDown, true);
         };
     }, [
         scopeRef,
@@ -516,7 +526,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                         let treeNode = clonedTree.getTreeNode(scopeRef);
                         while(treeNode){
                             if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
-                                $9bf71ea28793e738$var$focusElement(treeNode.nodeToRestore);
+                                $9bf71ea28793e738$var$restoreFocusToElement(treeNode.nodeToRestore);
                                 return;
                             }
                             treeNode = treeNode.parent;
@@ -526,7 +536,8 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                         treeNode = clonedTree.getTreeNode(scopeRef);
                         while(treeNode){
                             if (treeNode.scopeRef && treeNode.scopeRef.current && $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
-                                $9bf71ea28793e738$var$focusFirstInScope(treeNode.scopeRef.current, true);
+                                let node = $9bf71ea28793e738$var$getFirstInScope(treeNode.scopeRef.current, true);
+                                $9bf71ea28793e738$var$restoreFocusToElement(node);
                                 return;
                             }
                             treeNode = treeNode.parent;
@@ -540,6 +551,15 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         restoreFocus
     ]);
 }
+function $9bf71ea28793e738$var$restoreFocusToElement(node) {
+    // Dispatch a custom event that parent elements can intercept to customize focus restoration.
+    // For example, virtualized collection components reuse DOM elements, so the original element
+    // might still exist in the DOM but representing a different item.
+    if (node.dispatchEvent(new CustomEvent($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, {
+        bubbles: true,
+        cancelable: true
+    }))) $9bf71ea28793e738$var$focusElement(node);
+}
 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 = (0, $cgawC$getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
@@ -711,4 +731,4 @@ let $9bf71ea28793e738$export$d06fae2ee68b101e = new $9bf71ea28793e738$var$Tree()
 
 
 export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$d06fae2ee68b101e as focusScopeTree, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$4c063cf1350e6fed as isFocusable, $9bf71ea28793e738$export$1258395f99bf9cbf as isElementInChildOfActiveScope, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager};
-//# sourceMappingURL=FocusScope.mjs.map
+//# sourceMappingURL=FocusScope.module.js.map

package/dist/FocusScope.module.js

@@ -18,6 +18,7 @@ import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext,
 
 
 const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $cgawC$react).createContext(null);
+const $9bf71ea28793e738$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
 let $9bf71ea28793e738$var$activeScope = null;
 function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
     let { children: children, contain: contain, restoreFocus: restoreFocus, autoFocus: autoFocus } = props;
@@ -59,11 +60,17 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
         // Find all rendered nodes between the sentinels and add them to the scope.
         let node = (_startRef_current = startRef.current) === null || _startRef_current === void 0 ? void 0 : _startRef_current.nextSibling;
         let nodes = [];
+        let stopPropagation = (e)=>e.stopPropagation();
         while(node && node !== endRef.current){
             nodes.push(node);
+            // Stop custom restore focus event from propagating to parent focus scopes.
+            node.addEventListener($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, stopPropagation);
             node = node.nextSibling;
         }
         scopeRef.current = nodes;
+        return ()=>{
+            for (let node of nodes)node.removeEventListener($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, stopPropagation);
+        };
     }, [
         children
     ]);
@@ -192,21 +199,21 @@ function $9bf71ea28793e738$var$createFocusManagerForScope(scopeRef) {
     };
 }
 const $9bf71ea28793e738$var$focusableElements = [
-    "input:not([disabled]):not([type=hidden])",
-    "select:not([disabled])",
-    "textarea:not([disabled])",
-    "button:not([disabled])",
-    "a[href]",
-    "area[href]",
-    "summary",
-    "iframe",
-    "object",
-    "embed",
-    "audio[controls]",
-    "video[controls]",
-    "[contenteditable]"
+    'input:not([disabled]):not([type=hidden])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'a[href]',
+    'area[href]',
+    'summary',
+    'iframe',
+    'object',
+    'embed',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]'
 ];
-const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
+const $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
 $9bf71ea28793e738$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 const $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR = $9bf71ea28793e738$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 function $9bf71ea28793e738$export$4c063cf1350e6fed(element) {
@@ -224,8 +231,8 @@ function $9bf71ea28793e738$var$shouldContainFocus(scopeRef) {
     return true;
 }
 function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
-    let focusedNode = (0, $cgawC$useRef)();
-    let raf = (0, $cgawC$useRef)();
+    let focusedNode = (0, $cgawC$useRef)(undefined);
+    let raf = (0, $cgawC$useRef)(undefined);
     (0, $cgawC$useLayoutEffect)(()=>{
         let scope = scopeRef.current;
         if (!contain) {
@@ -239,7 +246,7 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
         const ownerDocument = (0, $cgawC$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) || e.isComposing) return;
+            if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
             let focusedElement = ownerDocument.activeElement;
             let scope = scopeRef.current;
             if (!scope || !$9bf71ea28793e738$var$isElementInScope(focusedElement, scope)) return;
@@ -285,15 +292,15 @@ function $9bf71ea28793e738$var$useFocusContainment(scopeRef, contain) {
                 }
             });
         };
-        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));
+        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 ()=>{
-            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));
+            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,
@@ -319,7 +326,7 @@ function $9bf71ea28793e738$var$isElementInScope(element, scope) {
 }
 function $9bf71ea28793e738$var$isElementInChildScope(element, scope = null) {
     // If the element is within a top layer element (e.g. toasts), always allow moving focus there.
-    if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) return true;
+    if (element instanceof Element && element.closest('[data-react-aria-top-layer]')) return true;
     // 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 $9bf71ea28793e738$export$d06fae2ee68b101e.traverse($9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scope))){
@@ -351,7 +358,7 @@ function $9bf71ea28793e738$var$focusElement(element, scroll = false) {
     // ignore
     }
 }
-function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
+function $9bf71ea28793e738$var$getFirstInScope(scope, tabbable = true) {
     let sentinel = scope[0].previousElementSibling;
     let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
     let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(scopeRoot, {
@@ -368,7 +375,10 @@ function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
         walker.currentNode = sentinel;
         nextNode = walker.nextNode();
     }
-    $9bf71ea28793e738$var$focusElement(nextNode);
+    return nextNode;
+}
+function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
+    $9bf71ea28793e738$var$focusElement($9bf71ea28793e738$var$getFirstInScope(scope, tabbable));
 }
 function $9bf71ea28793e738$var$useAutoFocus(scopeRef, autoFocus) {
     const autoFocusRef = (0, $cgawC$react).useRef(autoFocus);
@@ -395,11 +405,11 @@ function $9bf71ea28793e738$var$useActiveScopeTracker(scopeRef, restore, contain)
             if ($9bf71ea28793e738$var$isElementInScope(target, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
             else if (!$9bf71ea28793e738$var$isElementInAnyScope(target)) $9bf71ea28793e738$var$activeScope = null;
         };
-        ownerDocument.addEventListener("focusin", onFocus, false);
-        scope === null || scope === void 0 ? void 0 : 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 ()=>{
-            ownerDocument.removeEventListener("focusin", onFocus, false);
-            scope === null || scope === void 0 ? void 0 : 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,
@@ -418,7 +428,7 @@ 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.
     // eslint-disable-next-line no-restricted-globals
-    const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== "undefined" ? (0, $cgawC$getOwnerDocument)(scopeRef.current ? scopeRef.current[0] : undefined).activeElement : null);
+    const nodeToRestoreRef = (0, $cgawC$useRef)(typeof document !== 'undefined' ? (0, $cgawC$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, $cgawC$useLayoutEffect)(()=>{
@@ -430,11 +440,11 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
             // 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(ownerDocument.activeElement, scopeRef.current)) $9bf71ea28793e738$var$activeScope = scopeRef;
         };
-        ownerDocument.addEventListener("focusin", onFocus, false);
-        scope === null || scope === void 0 ? void 0 : 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 ()=>{
-            ownerDocument.removeEventListener("focusin", onFocus, false);
-            scope === null || scope === void 0 ? void 0 : 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
     }, [
@@ -449,7 +459,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         // using portals for overlays, so that focus goes to the expected element when
         // tabbing out of the overlay.
         let onKeyDown = (e)=>{
-            if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
+            if (e.key !== 'Tab' || e.altKey || e.ctrlKey || e.metaKey || !$9bf71ea28793e738$var$shouldContainFocus(scopeRef) || e.isComposing) return;
             let focusedElement = ownerDocument.activeElement;
             if (!$9bf71ea28793e738$var$isElementInScope(focusedElement, scopeRef.current)) return;
             let treeNode = $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(scopeRef);
@@ -483,9 +493,9 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                 else $9bf71ea28793e738$var$focusElement(nodeToRestore, true);
             }
         };
-        if (!contain) ownerDocument.addEventListener("keydown", onKeyDown, true);
+        if (!contain) ownerDocument.addEventListener('keydown', onKeyDown, true);
         return ()=>{
-            if (!contain) ownerDocument.removeEventListener("keydown", onKeyDown, true);
+            if (!contain) ownerDocument.removeEventListener('keydown', onKeyDown, true);
         };
     }, [
         scopeRef,
@@ -516,7 +526,7 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                         let treeNode = clonedTree.getTreeNode(scopeRef);
                         while(treeNode){
                             if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
-                                $9bf71ea28793e738$var$focusElement(treeNode.nodeToRestore);
+                                $9bf71ea28793e738$var$restoreFocusToElement(treeNode.nodeToRestore);
                                 return;
                             }
                             treeNode = treeNode.parent;
@@ -526,7 +536,8 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
                         treeNode = clonedTree.getTreeNode(scopeRef);
                         while(treeNode){
                             if (treeNode.scopeRef && treeNode.scopeRef.current && $9bf71ea28793e738$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
-                                $9bf71ea28793e738$var$focusFirstInScope(treeNode.scopeRef.current, true);
+                                let node = $9bf71ea28793e738$var$getFirstInScope(treeNode.scopeRef.current, true);
+                                $9bf71ea28793e738$var$restoreFocusToElement(node);
                                 return;
                             }
                             treeNode = treeNode.parent;
@@ -540,6 +551,15 @@ function $9bf71ea28793e738$var$useRestoreFocus(scopeRef, restoreFocus, contain)
         restoreFocus
     ]);
 }
+function $9bf71ea28793e738$var$restoreFocusToElement(node) {
+    // Dispatch a custom event that parent elements can intercept to customize focus restoration.
+    // For example, virtualized collection components reuse DOM elements, so the original element
+    // might still exist in the DOM but representing a different item.
+    if (node.dispatchEvent(new CustomEvent($9bf71ea28793e738$var$RESTORE_FOCUS_EVENT, {
+        bubbles: true,
+        cancelable: true
+    }))) $9bf71ea28793e738$var$focusElement(node);
+}
 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 = (0, $cgawC$getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {