@react-aria/focus 3.19.1 → 3.20.0

package/dist/virtualFocus.module.js

@@ -0,0 +1,38 @@
+import {getOwnerDocument as $hpDQO$getOwnerDocument, getActiveElement as $hpDQO$getActiveElement} from "@react-aria/utils";
+
+
+function $55f9b1ae81f22853$export$76e4e37e5339496d(to) {
+    let from = $55f9b1ae81f22853$export$759df0d867455a91((0, $hpDQO$getOwnerDocument)(to));
+    if (from !== to) {
+        if (from) $55f9b1ae81f22853$export$6c5dc7e81d2cc29a(from, to);
+        if (to) $55f9b1ae81f22853$export$2b35b76d2e30e129(to, from);
+    }
+}
+function $55f9b1ae81f22853$export$6c5dc7e81d2cc29a(from, to) {
+    from.dispatchEvent(new FocusEvent('blur', {
+        relatedTarget: to
+    }));
+    from.dispatchEvent(new FocusEvent('focusout', {
+        bubbles: true,
+        relatedTarget: to
+    }));
+}
+function $55f9b1ae81f22853$export$2b35b76d2e30e129(to, from) {
+    to.dispatchEvent(new FocusEvent('focus', {
+        relatedTarget: from
+    }));
+    to.dispatchEvent(new FocusEvent('focusin', {
+        bubbles: true,
+        relatedTarget: from
+    }));
+}
+function $55f9b1ae81f22853$export$759df0d867455a91(document) {
+    let activeElement = (0, $hpDQO$getActiveElement)(document);
+    let activeDescendant = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-activedescendant');
+    if (activeDescendant) return document.getElementById(activeDescendant) || activeElement;
+    return activeElement;
+}
+
+
+export {$55f9b1ae81f22853$export$76e4e37e5339496d as moveVirtualFocus, $55f9b1ae81f22853$export$759df0d867455a91 as getVirtuallyFocusedElement, $55f9b1ae81f22853$export$6c5dc7e81d2cc29a as dispatchVirtualBlur, $55f9b1ae81f22853$export$2b35b76d2e30e129 as dispatchVirtualFocus};
+//# sourceMappingURL=virtualFocus.module.js.map

package/dist/virtualFocus.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;AAEO,SAAS,0CAAiB,EAAkB;IACjD,IAAI,OAAO,0CAA2B,CAAA,GAAA,uBAAe,EAAE;IACvD,IAAI,SAAS,IAAI;QACf,IAAI,MACF,0CAAoB,MAAM;QAE5B,IAAI,IACF,0CAAqB,IAAI;IAE7B;AACF;AAEO,SAAS,0CAAoB,IAAa,EAAE,EAAkB;IACnE,KAAK,aAAa,CAAC,IAAI,WAAW,QAAQ;QAAC,eAAe;IAAE;IAC5D,KAAK,aAAa,CAAC,IAAI,WAAW,YAAY;QAAC,SAAS;QAAM,eAAe;IAAE;AACjF;AAEO,SAAS,0CAAqB,EAAW,EAAE,IAAoB;IACpE,GAAG,aAAa,CAAC,IAAI,WAAW,SAAS;QAAC,eAAe;IAAI;IAC7D,GAAG,aAAa,CAAC,IAAI,WAAW,WAAW;QAAC,SAAS;QAAM,eAAe;IAAI;AAChF;AAEO,SAAS,0CAA2B,QAAkB;IAC3D,IAAI,gBAAgB,CAAA,GAAA,uBAAe,EAAE;IACrC,IAAI,mBAAmB,0BAAA,oCAAA,cAAe,YAAY,CAAC;IACnD,IAAI,kBACF,OAAO,SAAS,cAAc,CAAC,qBAAqB;IAGtD,OAAO;AACT","sources":["packages/@react-aria/focus/src/virtualFocus.ts"],"sourcesContent":["import {getActiveElement, getOwnerDocument} from '@react-aria/utils';\n\nexport function moveVirtualFocus(to: Element | null) {\n  let from = getVirtuallyFocusedElement(getOwnerDocument(to));\n  if (from !== to) {\n    if (from) {\n      dispatchVirtualBlur(from, to);\n    }\n    if (to) {\n      dispatchVirtualFocus(to, from);\n    }\n  }\n}\n\nexport function dispatchVirtualBlur(from: Element, to: Element | null) {\n  from.dispatchEvent(new FocusEvent('blur', {relatedTarget: to}));\n  from.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: to}));\n}\n\nexport function dispatchVirtualFocus(to: Element, from: Element | null) {\n  to.dispatchEvent(new FocusEvent('focus', {relatedTarget: from}));\n  to.dispatchEvent(new FocusEvent('focusin', {bubbles: true, relatedTarget: from}));\n}\n\nexport function getVirtuallyFocusedElement(document: Document) {\n  let activeElement = getActiveElement(document);\n  let activeDescendant = activeElement?.getAttribute('aria-activedescendant');\n  if (activeDescendant) {\n    return document.getElementById(activeDescendant) || activeElement;\n  }\n\n  return activeElement;\n}\n"],"names":[],"version":3,"file":"virtualFocus.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/focus",
-  "version": "3.19.1",
+  "version": "3.20.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,9 +22,9 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/interactions": "^3.23.0",
-    "@react-aria/utils": "^3.27.0",
-    "@react-types/shared": "^3.27.0",
+    "@react-aria/interactions": "^3.24.0",
+    "@react-aria/utils": "^3.28.0",
+    "@react-types/shared": "^3.28.0",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

package/src/FocusScope.tsx

@@ -10,10 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
+import {
+  createShadowTreeWalker,
+  getActiveElement,
+  getEventTarget,
+  getOwnerDocument,
+  isAndroid,
+  isChrome,
+  isFocusable,
+  isTabbable,
+  ShadowTreeWalker,
+  useLayoutEffect
+} from '@react-aria/utils';
 import {FocusableElement, RefObject} from '@react-types/shared';
-import {focusSafely} from './focusSafely';
-import {getInteractionModality} from '@react-aria/interactions';
-import {getOwnerDocument, isAndroid, isChrome, useLayoutEffect} from '@react-aria/utils';
+import {focusSafely, getInteractionModality} from '@react-aria/interactions';
 import {isElementVisible} from './isElementVisible';
 import React, {ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 
@@ -55,7 +65,7 @@ export interface FocusManager {
   focusPrevious(opts?: FocusManagerOptions): FocusableElement | null,
   /** Moves focus to the first focusable or tabbable element in the focus scope. */
   focusFirst(opts?: FocusManagerOptions): FocusableElement | null,
-    /** Moves focus to the last focusable or tabbable element in the focus scope. */
+  /** Moves focus to the last focusable or tabbable element in the focus scope. */
   focusLast(opts?: FocusManagerOptions): FocusableElement | null
 }
 
@@ -144,7 +154,7 @@ export function FocusScope(props: FocusScopeProps) {
   // This needs to be an effect so that activeScope is updated after the FocusScope tree is complete.
   // It cannot be a useLayoutEffect because the parent of this node hasn't been attached in the tree yet.
   useEffect(() => {
-    const activeElement = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined).activeElement;
+    const activeElement = getActiveElement(getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined));
     let scope: TreeNode | null = null;
 
     if (isElementInScope(activeElement, scopeRef.current)) {
@@ -208,7 +218,7 @@ function createFocusManagerForScope(scopeRef: React.RefObject<Element[] | null>)
     focusNext(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current!;
       let {from, tabbable, wrap, accept} = opts;
-      let node = from || getOwnerDocument(scope[0]).activeElement!;
+      let node = from || getActiveElement(getOwnerDocument(scope[0] ?? undefined))!;
       let sentinel = scope[0].previousElementSibling!;
       let scopeRoot = getScopeRoot(scope);
       let walker = getFocusableTreeWalker(scopeRoot, {tabbable, accept}, scope);
@@ -226,11 +236,11 @@ function createFocusManagerForScope(scopeRef: React.RefObject<Element[] | null>)
     focusPrevious(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current!;
       let {from, tabbable, wrap, accept} = opts;
-      let node = from || getOwnerDocument(scope[0]).activeElement!;
+      let node = from || getActiveElement(getOwnerDocument(scope[0] ?? undefined))!;
       let sentinel = scope[scope.length - 1].nextElementSibling!;
       let scopeRoot = getScopeRoot(scope);
       let walker = getFocusableTreeWalker(scopeRoot, {tabbable, accept}, scope);
-      walker.currentNode = isElementInScope(node, scope) ? node : sentinel;
+      walker.currentNode = isElementInScope(node, scope) ? node  : sentinel;
       let previousNode = walker.previousNode() as FocusableElement;
       if (!previousNode && wrap) {
         walker.currentNode = sentinel;
@@ -268,31 +278,6 @@ function createFocusManagerForScope(scopeRef: React.RefObject<Element[] | null>)
   };
 }
 
-const 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]:not([contenteditable^="false"])'
-];
-
-const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
-
-focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
-const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
-
-export function isFocusable(element: HTMLElement) {
-  return element.matches(FOCUSABLE_ELEMENT_SELECTOR);
-}
-
 function getScopeRoot(scope: Element[]) {
   return scope[0].parentElement!;
 }
@@ -333,7 +318,7 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         return;
       }
 
-      let focusedElement = ownerDocument.activeElement;
+      let focusedElement = getActiveElement(ownerDocument);
       let scope = scopeRef.current;
       if (!scope || !isElementInScope(focusedElement, scope)) {
         return;
@@ -357,13 +342,13 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
       }
     };
 
-    let onFocus = (e) => {
+    let onFocus: EventListener = (e) => {
       // If focusing an element in a child scope of the currently active scope, the child becomes active.
       // Moving out of the active scope to an ancestor is not allowed.
-      if ((!activeScope || isAncestorScope(activeScope, scopeRef)) && isElementInScope(e.target, scopeRef.current)) {
+      if ((!activeScope || isAncestorScope(activeScope, scopeRef)) && isElementInScope(getEventTarget(e) as Element, scopeRef.current)) {
         activeScope = scopeRef;
-        focusedNode.current = e.target;
-      } else if (shouldContainFocus(scopeRef) && !isElementInChildScope(e.target, scopeRef)) {
+        focusedNode.current = getEventTarget(e) as FocusableElement;
+      } else if (shouldContainFocus(scopeRef) && !isElementInChildScope(getEventTarget(e) as Element, scopeRef)) {
         // 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) {
@@ -372,11 +357,11 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
           focusFirstInScope(activeScope.current);
         }
       } else if (shouldContainFocus(scopeRef)) {
-        focusedNode.current = e.target;
+        focusedNode.current = getEventTarget(e) as FocusableElement;
       }
     };
 
-    let onBlur = (e) => {
+    let onBlur: EventListener = (e) => {
       // Firefox doesn't shift focus back to the Dialog properly without this
       if (raf.current) {
         cancelAnimationFrame(raf.current);
@@ -389,10 +374,12 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && isAndroid() && isChrome();
 
         // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-        if (!shouldSkipFocusRestore && ownerDocument.activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
+        let activeElement = getActiveElement(ownerDocument);
+        if (!shouldSkipFocusRestore && activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(activeElement, scopeRef)) {
           activeScope = scopeRef;
-          if (ownerDocument.body.contains(e.target)) {
-            focusedNode.current = e.target;
+          let target = getEventTarget(e) as FocusableElement;
+          if (target && target.isConnected) {
+            focusedNode.current = target;
             focusedNode.current?.focus();
           } else if (activeScope.current) {
             focusFirstInScope(activeScope.current);
@@ -515,7 +502,7 @@ function useAutoFocus(scopeRef: RefObject<Element[] | null>, autoFocus?: boolean
     if (autoFocusRef.current) {
       activeScope = scopeRef;
       const ownerDocument = getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined);
-      if (!isElementInScope(ownerDocument.activeElement, activeScope.current) && scopeRef.current) {
+      if (!isElementInScope(getActiveElement(ownerDocument), activeScope.current) && scopeRef.current) {
         focusFirstInScope(scopeRef.current);
       }
     }
@@ -535,7 +522,7 @@ function useActiveScopeTracker(scopeRef: RefObject<Element[] | null>, restore?:
     const ownerDocument = getOwnerDocument(scope ? scope[0] : undefined);
 
     let onFocus = (e) => {
-      let target = e.target as Element;
+      let target = getEventTarget(e) as Element;
       if (isElementInScope(target, scopeRef.current)) {
         activeScope = scopeRef;
       } else if (!isElementInAnyScope(target)) {
@@ -568,7 +555,7 @@ function shouldRestoreFocus(scopeRef: ScopeRef) {
 function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: boolean, contain?: boolean) {
   // create a ref during render instead of useLayoutEffect so the active element is saved before a child with autoFocus=true mounts.
   // eslint-disable-next-line no-restricted-globals
-  const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined).activeElement as FocusableElement : null);
+  const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? getActiveElement(getOwnerDocument(scopeRef.current ? scopeRef.current[0] : undefined)) as FocusableElement : null);
 
   // restoring scopes should all track if they are active regardless of contain, but contain already tracks it plus logic to contain the focus
   // restoring-non-containing scopes should only care if they become active so they can perform the restore
@@ -583,7 +570,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
       // If focusing an element in a child scope of the currently active scope, the child becomes active.
       // Moving out of the active scope to an ancestor is not allowed.
       if ((!activeScope || isAncestorScope(activeScope, scopeRef)) &&
-      isElementInScope(ownerDocument.activeElement, scopeRef.current)
+        isElementInScope(getActiveElement(ownerDocument), scopeRef.current)
       ) {
         activeScope = scopeRef;
       }
@@ -595,7 +582,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
       ownerDocument.removeEventListener('focusin', onFocus, false);
       scope?.forEach(element => element.removeEventListener('focusin', onFocus, false));
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scopeRef, contain]);
 
   useLayoutEffect(() => {
@@ -631,7 +618,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
       walker.currentNode = focusedElement;
       let nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as FocusableElement;
 
-      if (!nodeToRestore || !ownerDocument.body.contains(nodeToRestore) || nodeToRestore === ownerDocument.body) {
+      if (!nodeToRestore || !nodeToRestore.isConnected || nodeToRestore === ownerDocument.body) {
         nodeToRestore = undefined;
         treeNode.nodeToRestore = undefined;
       }
@@ -651,9 +638,9 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
         if (nextElement) {
           focusElement(nextElement, true);
         } else {
-           // If there is no next element and the nodeToRestore isn't within a FocusScope (i.e. we are leaving the top level focus scope)
-           // then move focus to the body.
-           // Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
+          // If there is no next element and the nodeToRestore isn't within a FocusScope (i.e. we are leaving the top level focus scope)
+          // then move focus to the body.
+          // Otherwise restore focus to the nodeToRestore (e.g menu within a popover -> tabbing to close the menu should move focus to menu trigger)
           if (!isElementInAnyScope(nodeToRestore)) {
             focusedElement.blur();
           } else {
@@ -664,12 +651,12 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
     };
 
     if (!contain) {
-      ownerDocument.addEventListener('keydown', onKeyDown, true);
+      ownerDocument.addEventListener('keydown', onKeyDown as EventListener, true);
     }
 
     return () => {
       if (!contain) {
-        ownerDocument.removeEventListener('keydown', onKeyDown, true);
+        ownerDocument.removeEventListener('keydown', onKeyDown as EventListener, true);
       }
     };
   }, [scopeRef, restoreFocus, contain]);
@@ -695,11 +682,12 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
       let nodeToRestore = treeNode.nodeToRestore;
 
       // if we already lost focus to the body and this was the active scope, then we should attempt to restore
+      let activeElement = getActiveElement(ownerDocument);
       if (
         restoreFocus
         && nodeToRestore
         && (
-          ((ownerDocument.activeElement && isElementInChildScope(ownerDocument.activeElement, scopeRef)) || (ownerDocument.activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef)))
+          ((activeElement && isElementInChildScope(activeElement, scopeRef)) || (activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef)))
         )
       ) {
         // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
@@ -748,10 +736,19 @@ function restoreFocusToElement(node: FocusableElement) {
  * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
  * that matches all focusable/tabbable elements.
  */
-export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]) {
-  let selector = opts?.tabbable ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR;
-  let walker = getOwnerDocument(root).createTreeWalker(
-    root,
+export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]): ShadowTreeWalker | TreeWalker {
+  let filter = opts?.tabbable ? isTabbable : isFocusable;
+
+  // Ensure that root is an Element or fall back appropriately
+  let rootElement = root?.nodeType === Node.ELEMENT_NODE ? (root as Element) : null;
+
+  // Determine the document to use
+  let doc = getOwnerDocument(rootElement);
+
+  // Create a TreeWalker, ensuring the root is an Element or Document
+  let walker = createShadowTreeWalker(
+    doc,
+    root || doc,
     NodeFilter.SHOW_ELEMENT,
     {
       acceptNode(node) {
@@ -760,7 +757,7 @@ export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions
           return NodeFilter.FILTER_REJECT;
         }
 
-        if ((node as Element).matches(selector)
+        if (filter(node as Element)
           && isElementVisible(node as Element)
           && (!scope || isElementInScope(node as Element, scope))
           && (!opts?.accept || opts.accept(node as Element))
@@ -791,7 +788,7 @@ export function createFocusManager(ref: RefObject<Element | null>, defaultOption
         return null;
       }
       let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
-      let node = from || getOwnerDocument(root).activeElement;
+      let node = from || getActiveElement(getOwnerDocument(root));
       let walker = getFocusableTreeWalker(root, {tabbable, accept});
       if (root.contains(node)) {
         walker.currentNode = node!;
@@ -812,7 +809,7 @@ export function createFocusManager(ref: RefObject<Element | null>, defaultOption
         return null;
       }
       let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
-      let node = from || getOwnerDocument(root).activeElement;
+      let node = from || getActiveElement(getOwnerDocument(root));
       let walker = getFocusableTreeWalker(root, {tabbable, accept});
       if (root.contains(node)) {
         walker.currentNode = node!;
@@ -867,7 +864,7 @@ export function createFocusManager(ref: RefObject<Element | null>, defaultOption
   };
 }
 
-function last(walker: TreeWalker) {
+function last(walker: ShadowTreeWalker | TreeWalker) {
   let next: FocusableElement | undefined = undefined;
   let last: FocusableElement;
   do {

package/src/index.ts

@@ -10,14 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope, isFocusable} from './FocusScope';
+export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope} from './FocusScope';
 export {FocusRing} from './FocusRing';
-export {FocusableProvider, useFocusable} from './useFocusable';
 export {useFocusRing} from './useFocusRing';
-export {focusSafely} from './focusSafely';
 export {useHasTabbableChild} from './useHasTabbableChild';
+export {moveVirtualFocus, dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement} from './virtualFocus';
+// For backward compatibility.
+export {isFocusable} from '@react-aria/utils';
+export {FocusableProvider, Focusable, useFocusable, focusSafely} from '@react-aria/interactions';
 
 export type {FocusScopeProps, FocusManager, FocusManagerOptions} from './FocusScope';
 export type {FocusRingProps} from './FocusRing';
-export type {FocusableAria, FocusableOptions, FocusableProviderProps} from './useFocusable';
+export type {FocusableAria, FocusableOptions, FocusableProviderProps} from '@react-aria/interactions';
 export type {AriaFocusRingProps, FocusRingAria} from './useFocusRing';

package/src/virtualFocus.ts

@@ -0,0 +1,33 @@
+import {getActiveElement, getOwnerDocument} from '@react-aria/utils';
+
+export function moveVirtualFocus(to: Element | null) {
+  let from = getVirtuallyFocusedElement(getOwnerDocument(to));
+  if (from !== to) {
+    if (from) {
+      dispatchVirtualBlur(from, to);
+    }
+    if (to) {
+      dispatchVirtualFocus(to, from);
+    }
+  }
+}
+
+export function dispatchVirtualBlur(from: Element, to: Element | null) {
+  from.dispatchEvent(new FocusEvent('blur', {relatedTarget: to}));
+  from.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: to}));
+}
+
+export function dispatchVirtualFocus(to: Element, from: Element | null) {
+  to.dispatchEvent(new FocusEvent('focus', {relatedTarget: from}));
+  to.dispatchEvent(new FocusEvent('focusin', {bubbles: true, relatedTarget: from}));
+}
+
+export function getVirtuallyFocusedElement(document: Document) {
+  let activeElement = getActiveElement(document);
+  let activeDescendant = activeElement?.getAttribute('aria-activedescendant');
+  if (activeDescendant) {
+    return document.getElementById(activeDescendant) || activeElement;
+  }
+
+  return activeElement;
+}

package/dist/focusSafely.main.js

@@ -1,39 +0,0 @@
-var $cBYLt$reactariautils = require("@react-aria/utils");
-var $cBYLt$reactariainteractions = require("@react-aria/interactions");
-
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "focusSafely", () => $1c7f9157d722357d$export$80f3e147d781571c);
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * 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 $1c7f9157d722357d$export$80f3e147d781571c(element) {
-    // If the user is interacting with a virtual cursor, e.g. screen reader, then
-    // wait until after any animated transitions that are currently occurring on
-    // 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, $cBYLt$reactariautils.getOwnerDocument)(element);
-    if ((0, $cBYLt$reactariainteractions.getInteractionModality)() === 'virtual') {
-        let lastFocusedElement = ownerDocument.activeElement;
-        (0, $cBYLt$reactariautils.runAfterTransition)(()=>{
-            // If focus did not move and the element is still in the document, focus it.
-            if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) (0, $cBYLt$reactariautils.focusWithoutScrolling)(element);
-        });
-    } else (0, $cBYLt$reactariautils.focusWithoutScrolling)(element);
-}
-
-
-//# sourceMappingURL=focusSafely.main.js.map

package/dist/focusSafely.main.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAUM,SAAS,0CAAY,OAAyB;IACnD,6EAA6E;IAC7E,4EAA4E;IAC5E,2EAA2E;IAC3E,+EAA+E;IAC/E,uBAAuB;IACvB,MAAM,gBAAgB,CAAA,GAAA,sCAAe,EAAE;IACvC,IAAI,CAAA,GAAA,mDAAqB,QAAQ,WAAW;QAC1C,IAAI,qBAAqB,cAAc,aAAa;QACpD,CAAA,GAAA,wCAAiB,EAAE;YACjB,4EAA4E;YAC5E,IAAI,cAAc,aAAa,KAAK,sBAAsB,QAAQ,WAAW,EAC3E,CAAA,GAAA,2CAAoB,EAAE;QAE1B;IACF,OACE,CAAA,GAAA,2CAAoB,EAAE;AAE1B","sources":["packages/@react-aria/focus/src/focusSafely.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the 'License');\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableElement} from '@react-types/shared';\nimport {focusWithoutScrolling, getOwnerDocument, runAfterTransition} from '@react-aria/utils';\nimport {getInteractionModality} from '@react-aria/interactions';\n\n/**\n * A utility function that focuses an element while avoiding undesired side effects such\n * as page scrolling and screen reader issues with CSS transitions.\n */\nexport function focusSafely(element: FocusableElement) {\n  // If the user is interacting with a virtual cursor, e.g. screen reader, then\n  // wait until after any animated transitions that are currently occurring on\n  // the page before shifting focus. This avoids issues with VoiceOver on iOS\n  // causing the page to scroll when moving focus if the element is transitioning\n  // from off the screen.\n  const ownerDocument = getOwnerDocument(element);\n  if (getInteractionModality() === 'virtual') {\n    let lastFocusedElement = ownerDocument.activeElement;\n    runAfterTransition(() => {\n      // If focus did not move and the element is still in the document, focus it.\n      if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) {\n        focusWithoutScrolling(element);\n      }\n    });\n  } else {\n    focusWithoutScrolling(element);\n  }\n}\n"],"names":[],"version":3,"file":"focusSafely.main.js.map"}

package/dist/focusSafely.mjs

@@ -1,34 +0,0 @@
-import {getOwnerDocument as $jlOai$getOwnerDocument, runAfterTransition as $jlOai$runAfterTransition, focusWithoutScrolling as $jlOai$focusWithoutScrolling} from "@react-aria/utils";
-import {getInteractionModality as $jlOai$getInteractionModality} from "@react-aria/interactions";
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * 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 $6a99195332edec8b$export$80f3e147d781571c(element) {
-    // If the user is interacting with a virtual cursor, e.g. screen reader, then
-    // wait until after any animated transitions that are currently occurring on
-    // 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, $jlOai$getOwnerDocument)(element);
-    if ((0, $jlOai$getInteractionModality)() === 'virtual') {
-        let lastFocusedElement = ownerDocument.activeElement;
-        (0, $jlOai$runAfterTransition)(()=>{
-            // If focus did not move and the element is still in the document, focus it.
-            if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) (0, $jlOai$focusWithoutScrolling)(element);
-        });
-    } else (0, $jlOai$focusWithoutScrolling)(element);
-}
-
-
-export {$6a99195332edec8b$export$80f3e147d781571c as focusSafely};
-//# sourceMappingURL=focusSafely.module.js.map

package/dist/focusSafely.module.js

@@ -1,34 +0,0 @@
-import {getOwnerDocument as $jlOai$getOwnerDocument, runAfterTransition as $jlOai$runAfterTransition, focusWithoutScrolling as $jlOai$focusWithoutScrolling} from "@react-aria/utils";
-import {getInteractionModality as $jlOai$getInteractionModality} from "@react-aria/interactions";
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * 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 $6a99195332edec8b$export$80f3e147d781571c(element) {
-    // If the user is interacting with a virtual cursor, e.g. screen reader, then
-    // wait until after any animated transitions that are currently occurring on
-    // 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, $jlOai$getOwnerDocument)(element);
-    if ((0, $jlOai$getInteractionModality)() === 'virtual') {
-        let lastFocusedElement = ownerDocument.activeElement;
-        (0, $jlOai$runAfterTransition)(()=>{
-            // If focus did not move and the element is still in the document, focus it.
-            if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) (0, $jlOai$focusWithoutScrolling)(element);
-        });
-    } else (0, $jlOai$focusWithoutScrolling)(element);
-}
-
-
-export {$6a99195332edec8b$export$80f3e147d781571c as focusSafely};
-//# sourceMappingURL=focusSafely.module.js.map

package/dist/focusSafely.module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAUM,SAAS,0CAAY,OAAyB;IACnD,6EAA6E;IAC7E,4EAA4E;IAC5E,2EAA2E;IAC3E,+EAA+E;IAC/E,uBAAuB;IACvB,MAAM,gBAAgB,CAAA,GAAA,uBAAe,EAAE;IACvC,IAAI,CAAA,GAAA,6BAAqB,QAAQ,WAAW;QAC1C,IAAI,qBAAqB,cAAc,aAAa;QACpD,CAAA,GAAA,yBAAiB,EAAE;YACjB,4EAA4E;YAC5E,IAAI,cAAc,aAAa,KAAK,sBAAsB,QAAQ,WAAW,EAC3E,CAAA,GAAA,4BAAoB,EAAE;QAE1B;IACF,OACE,CAAA,GAAA,4BAAoB,EAAE;AAE1B","sources":["packages/@react-aria/focus/src/focusSafely.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the 'License');\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableElement} from '@react-types/shared';\nimport {focusWithoutScrolling, getOwnerDocument, runAfterTransition} from '@react-aria/utils';\nimport {getInteractionModality} from '@react-aria/interactions';\n\n/**\n * A utility function that focuses an element while avoiding undesired side effects such\n * as page scrolling and screen reader issues with CSS transitions.\n */\nexport function focusSafely(element: FocusableElement) {\n  // If the user is interacting with a virtual cursor, e.g. screen reader, then\n  // wait until after any animated transitions that are currently occurring on\n  // the page before shifting focus. This avoids issues with VoiceOver on iOS\n  // causing the page to scroll when moving focus if the element is transitioning\n  // from off the screen.\n  const ownerDocument = getOwnerDocument(element);\n  if (getInteractionModality() === 'virtual') {\n    let lastFocusedElement = ownerDocument.activeElement;\n    runAfterTransition(() => {\n      // If focus did not move and the element is still in the document, focus it.\n      if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) {\n        focusWithoutScrolling(element);\n      }\n    });\n  } else {\n    focusWithoutScrolling(element);\n  }\n}\n"],"names":[],"version":3,"file":"focusSafely.module.js.map"}

package/dist/useFocusable.main.js

@@ -1,72 +0,0 @@
-var $1c7f9157d722357d$exports = require("./focusSafely.main.js");
-var $ggOO2$reactariautils = require("@react-aria/utils");
-var $ggOO2$react = require("react");
-var $ggOO2$reactariainteractions = require("@react-aria/interactions");
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "FocusableProvider", () => $fb504d83237fd6ac$export$13f3202a3e5ddd5);
-$parcel$export(module.exports, "useFocusable", () => $fb504d83237fd6ac$export$4c014de7c8940b4c);
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * 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.
- */ 
-
-
-
-let $fb504d83237fd6ac$var$FocusableContext = /*#__PURE__*/ (0, ($parcel$interopDefault($ggOO2$react))).createContext(null);
-function $fb504d83237fd6ac$var$useFocusableContext(ref) {
-    let context = (0, $ggOO2$react.useContext)($fb504d83237fd6ac$var$FocusableContext) || {};
-    (0, $ggOO2$reactariautils.useSyncRef)(context, ref);
-    // eslint-disable-next-line
-    let { ref: _, ...otherProps } = context;
-    return otherProps;
-}
-const $fb504d83237fd6ac$export$13f3202a3e5ddd5 = /*#__PURE__*/ (0, ($parcel$interopDefault($ggOO2$react))).forwardRef(function FocusableProvider(props, ref) {
-    let { children: children, ...otherProps } = props;
-    let objRef = (0, $ggOO2$reactariautils.useObjectRef)(ref);
-    let context = {
-        ...otherProps,
-        ref: objRef
-    };
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($ggOO2$react))).createElement($fb504d83237fd6ac$var$FocusableContext.Provider, {
-        value: context
-    }, children);
-});
-function $fb504d83237fd6ac$export$4c014de7c8940b4c(props, domRef) {
-    let { focusProps: focusProps } = (0, $ggOO2$reactariainteractions.useFocus)(props);
-    let { keyboardProps: keyboardProps } = (0, $ggOO2$reactariainteractions.useKeyboard)(props);
-    let interactions = (0, $ggOO2$reactariautils.mergeProps)(focusProps, keyboardProps);
-    let domProps = $fb504d83237fd6ac$var$useFocusableContext(domRef);
-    let interactionProps = props.isDisabled ? {} : domProps;
-    let autoFocusRef = (0, $ggOO2$react.useRef)(props.autoFocus);
-    (0, $ggOO2$react.useEffect)(()=>{
-        if (autoFocusRef.current && domRef.current) (0, $1c7f9157d722357d$exports.focusSafely)(domRef.current);
-        autoFocusRef.current = false;
-    }, [
-        domRef
-    ]);
-    return {
-        focusableProps: (0, $ggOO2$reactariautils.mergeProps)({
-            ...interactions,
-            tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
-        }, interactionProps)
-    };
-}
-
-
-//# sourceMappingURL=useFocusable.main.js.map

package/dist/useFocusable.main.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAsBD,IAAI,uDAAmB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAA+B;AAEzE,SAAS,0CAAoB,GAAuC;IAClE,IAAI,UAAU,CAAA,GAAA,uBAAS,EAAE,2CAAqB,CAAC;IAC/C,CAAA,GAAA,gCAAS,EAAE,SAAS;IAEpB,2BAA2B;IAC3B,IAAI,EAAC,KAAK,CAAC,EAAE,GAAG,YAAW,GAAG;IAC9B,OAAO;AACT;AAKO,MAAM,yDAAoB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,kBAAkB,KAA6B,EAAE,GAAmC;IAC7I,IAAI,YAAC,QAAQ,EAAE,GAAG,YAAW,GAAG;IAChC,IAAI,SAAS,CAAA,GAAA,kCAAW,EAAE;IAC1B,IAAI,UAAU;QACZ,GAAG,UAAU;QACb,KAAK;IACP;IAEA,qBACE,0DAAC,uCAAiB,QAAQ;QAAC,OAAO;OAC/B;AAGP;AAUO,SAAS,0CAA4D,KAA0B,EAAE,MAA0C;IAChJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;IAC5B,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,wCAAU,EAAE;IAClC,IAAI,eAAe,CAAA,GAAA,gCAAS,EAAE,YAAY;IAC1C,IAAI,WAAW,0CAAoB;IACnC,IAAI,mBAAmB,MAAM,UAAU,GAAG,CAAC,IAAI;IAC/C,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAE,MAAM,SAAS;IAEzC,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,aAAa,OAAO,IAAI,OAAO,OAAO,EACxC,CAAA,GAAA,qCAAU,EAAE,OAAO,OAAO;QAE5B,aAAa,OAAO,GAAG;IACzB,GAAG;QAAC;KAAO;IAEX,OAAO;QACL,gBAAgB,CAAA,GAAA,gCAAS,EACvB;YACE,GAAG,YAAY;YACf,UAAU,MAAM,mBAAmB,IAAI,CAAC,MAAM,UAAU,GAAG,KAAK;QAClE,GACA;IAEJ;AACF","sources":["packages/@react-aria/focus/src/useFocusable.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps, RefObject} from '@react-types/shared';\nimport {focusSafely} from './';\nimport {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';\nimport React, {ForwardedRef, MutableRefObject, ReactNode, useContext, useEffect, useRef} from 'react';\nimport {useFocus, useKeyboard} from '@react-aria/interactions';\n\nexport interface FocusableOptions<T = FocusableElement> extends FocusableProps<T>, FocusableDOMProps {\n  /** Whether focus should be disabled. */\n  isDisabled?: boolean\n}\n\nexport interface FocusableProviderProps extends DOMAttributes {\n  /** The child element to provide DOM props to. */\n  children?: ReactNode\n}\n\ninterface FocusableContextValue extends FocusableProviderProps {\n  ref?: MutableRefObject<FocusableElement | null>\n}\n\nlet FocusableContext = React.createContext<FocusableContextValue | null>(null);\n\nfunction useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {\n  let context = useContext(FocusableContext) || {};\n  useSyncRef(context, ref);\n\n  // eslint-disable-next-line\n  let {ref: _, ...otherProps} = context;\n  return otherProps;\n}\n\n/**\n * Provides DOM props to the nearest focusable child.\n */\nexport const FocusableProvider = React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {\n  let {children, ...otherProps} = props;\n  let objRef = useObjectRef(ref);\n  let context = {\n    ...otherProps,\n    ref: objRef\n  };\n\n  return (\n    <FocusableContext.Provider value={context}>\n      {children}\n    </FocusableContext.Provider>\n  );\n});\n\nexport interface FocusableAria {\n  /** Props for the focusable element. */\n  focusableProps: DOMAttributes\n}\n\n/**\n * Used to make an element focusable and capable of auto focus.\n */\nexport function useFocusable<T extends FocusableElement = FocusableElement>(props: FocusableOptions<T>, domRef: RefObject<FocusableElement | null>): FocusableAria {\n  let {focusProps} = useFocus(props);\n  let {keyboardProps} = useKeyboard(props);\n  let interactions = mergeProps(focusProps, keyboardProps);\n  let domProps = useFocusableContext(domRef);\n  let interactionProps = props.isDisabled ? {} : domProps;\n  let autoFocusRef = useRef(props.autoFocus);\n\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      focusSafely(domRef.current);\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  return {\n    focusableProps: mergeProps(\n      {\n        ...interactions,\n        tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined\n      },\n      interactionProps\n    )\n  };\n}\n"],"names":[],"version":3,"file":"useFocusable.main.js.map"}