@react-aria/focus 3.17.0 → 3.18.0

package/dist/useHasTabbableChild.module.js

@@ -1,6 +1,6 @@
 import {getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa} from "./FocusScope.module.js";
-import {useState as $hGAaG$useState} from "react";
 import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
+import {useState as $hGAaG$useState} from "react";
 
 /*
  * Copyright 2022 Adobe. All rights reserved.
@@ -36,8 +36,8 @@ function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
                 childList: true,
                 attributes: true,
                 attributeFilter: [
-                    "tabIndex",
-                    "disabled"
+                    'tabIndex',
+                    'disabled'
                 ]
             });
             return ()=>{

package/dist/useHasTabbableChild.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAmBM,SAAS,0CAAoB,GAAuB,EAAE,OAAqC;IAChG,IAAI,aAAa,oBAAA,8BAAA,QAAS,UAAU;IACpC,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvD,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,CAAA,gBAAA,0BAAA,IAAK,OAAO,KAAI,CAAC,YAAY;YAC/B,IAAI,SAAS;gBACX,IAAI,IAAI,OAAO,EAAE;oBACf,IAAI,SAAS,CAAA,GAAA,yCAAqB,EAAE,IAAI,OAAO,EAAE;wBAAC,UAAU;oBAAI;oBAChE,oBAAoB,CAAC,CAAC,OAAO,QAAQ;gBACvC;YACF;YAEA;YAEA,qFAAqF;YACrF,IAAI,WAAW,IAAI,iBAAiB;YACpC,SAAS,OAAO,CAAC,IAAI,OAAO,EAAE;gBAC5B,SAAS;gBACT,WAAW;gBACX,YAAY;gBACZ,iBAAiB;oBAAC;oBAAY;iBAAW;YAC3C;YAEA,OAAO;gBACL,qFAAqF;gBACrF,wFAAwF;gBACxF,4FAA4F;gBAC5F,yFAAyF;gBACzF,SAAS,UAAU;YACrB;QACF;IACF;IAEA,OAAO,aAAa,QAAQ;AAC9B","sources":["packages/@react-aria/focus/src/useHasTabbableChild.ts"],"sourcesContent":["/*\n * Copyright 2022 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 {getFocusableTreeWalker} from './FocusScope';\nimport {RefObject, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\n\ninterface AriaHasTabbableChildOptions {\n  isDisabled?: boolean\n}\n\n// This was created for a special empty case of a component that can have child or\n// be empty, like Collection/Virtualizer/Table/ListView/etc. When these components\n// are empty they can have a message with a tabbable element, which is like them\n// being not empty, when it comes to focus and tab order.\n\n/**\n * Returns whether an element has a tabbable child, and updates as children change.\n * @private\n */\nexport function useHasTabbableChild(ref: RefObject<Element>, options?: AriaHasTabbableChildOptions): boolean {\n  let isDisabled = options?.isDisabled;\n  let [hasTabbableChild, setHasTabbableChild] = useState(false);\n\n  useLayoutEffect(() => {\n    if (ref?.current && !isDisabled) {\n      let update = () => {\n        if (ref.current) {\n          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n          setHasTabbableChild(!!walker.nextNode());\n        }\n      };\n\n      update();\n\n      // Update when new elements are inserted, or the tabIndex/disabled attribute updates.\n      let observer = new MutationObserver(update);\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n        attributes: true,\n        attributeFilter: ['tabIndex', 'disabled']\n      });\n\n      return () => {\n        // Disconnect mutation observer when a React update occurs on the top-level component\n        // so we update synchronously after re-rendering. Otherwise React will emit act warnings\n        // in tests since mutation observers fire asynchronously. The mutation observer is necessary\n        // so we also update if a child component re-renders and adds/removes something tabbable.\n        observer.disconnect();\n      };\n    }\n  });\n\n  return isDisabled ? false : hasTabbableChild;\n}\n"],"names":[],"version":3,"file":"useHasTabbableChild.module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAoBM,SAAS,0CAAoB,GAA8B,EAAE,OAAqC;IACvG,IAAI,aAAa,oBAAA,8BAAA,QAAS,UAAU;IACpC,IAAI,CAAC,kBAAkB,oBAAoB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEvD,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,CAAA,gBAAA,0BAAA,IAAK,OAAO,KAAI,CAAC,YAAY;YAC/B,IAAI,SAAS;gBACX,IAAI,IAAI,OAAO,EAAE;oBACf,IAAI,SAAS,CAAA,GAAA,yCAAqB,EAAE,IAAI,OAAO,EAAE;wBAAC,UAAU;oBAAI;oBAChE,oBAAoB,CAAC,CAAC,OAAO,QAAQ;gBACvC;YACF;YAEA;YAEA,qFAAqF;YACrF,IAAI,WAAW,IAAI,iBAAiB;YACpC,SAAS,OAAO,CAAC,IAAI,OAAO,EAAE;gBAC5B,SAAS;gBACT,WAAW;gBACX,YAAY;gBACZ,iBAAiB;oBAAC;oBAAY;iBAAW;YAC3C;YAEA,OAAO;gBACL,qFAAqF;gBACrF,wFAAwF;gBACxF,4FAA4F;gBAC5F,yFAAyF;gBACzF,SAAS,UAAU;YACrB;QACF;IACF;IAEA,OAAO,aAAa,QAAQ;AAC9B","sources":["packages/@react-aria/focus/src/useHasTabbableChild.ts"],"sourcesContent":["/*\n * Copyright 2022 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 {getFocusableTreeWalker} from './FocusScope';\nimport {RefObject} from '@react-types/shared';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useState} from 'react';\n\ninterface AriaHasTabbableChildOptions {\n  isDisabled?: boolean\n}\n\n// This was created for a special empty case of a component that can have child or\n// be empty, like Collection/Virtualizer/Table/ListView/etc. When these components\n// are empty they can have a message with a tabbable element, which is like them\n// being not empty, when it comes to focus and tab order.\n\n/**\n * Returns whether an element has a tabbable child, and updates as children change.\n * @private\n */\nexport function useHasTabbableChild(ref: RefObject<Element | null>, options?: AriaHasTabbableChildOptions): boolean {\n  let isDisabled = options?.isDisabled;\n  let [hasTabbableChild, setHasTabbableChild] = useState(false);\n\n  useLayoutEffect(() => {\n    if (ref?.current && !isDisabled) {\n      let update = () => {\n        if (ref.current) {\n          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n          setHasTabbableChild(!!walker.nextNode());\n        }\n      };\n\n      update();\n\n      // Update when new elements are inserted, or the tabIndex/disabled attribute updates.\n      let observer = new MutationObserver(update);\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n        attributes: true,\n        attributeFilter: ['tabIndex', 'disabled']\n      });\n\n      return () => {\n        // Disconnect mutation observer when a React update occurs on the top-level component\n        // so we update synchronously after re-rendering. Otherwise React will emit act warnings\n        // in tests since mutation observers fire asynchronously. The mutation observer is necessary\n        // so we also update if a child component re-renders and adds/removes something tabbable.\n        observer.disconnect();\n      };\n    }\n  });\n\n  return isDisabled ? false : hasTabbableChild;\n}\n"],"names":[],"version":3,"file":"useHasTabbableChild.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/focus",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,17 +22,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/interactions": "^3.21.2",
-    "@react-aria/utils": "^3.24.0",
-    "@react-types/shared": "^3.23.0",
+    "@react-aria/interactions": "^3.22.0",
+    "@react-aria/utils": "^3.25.0",
+    "@react-types/shared": "^3.24.0",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

package/src/FocusRing.tsx

@@ -45,7 +45,7 @@ export function FocusRing(props: FocusRingProps) {
   let {isFocused, isFocusVisible, focusProps} = useFocusRing(props);
   let child = React.Children.only(children);
 
-  return React.cloneElement(child, mergeProps(child.props, {
+  return React.cloneElement(child, mergeProps(child.props as any, {
     ...focusProps,
     className: clsx({
       [focusClass || '']: isFocused,

package/src/FocusScope.tsx

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusableElement} from '@react-types/shared';
+import {FocusableElement, RefObject} from '@react-types/shared';
 import {focusSafely} from './focusSafely';
 import {getOwnerDocument, useLayoutEffect} from '@react-aria/utils';
 import {isElementVisible} from './isElementVisible';
-import React, {ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 
 export interface FocusScopeProps {
   /** The contents of the focus scope. */
@@ -58,13 +58,14 @@ export interface FocusManager {
   focusLast(opts?: FocusManagerOptions): FocusableElement | null
 }
 
-type ScopeRef = RefObject<Element[]> | null;
+type ScopeRef = RefObject<Element[] | null> | null;
 interface IFocusContext {
   focusManager: FocusManager,
   parentNode: TreeNode | null
 }
 
 const FocusContext = React.createContext<IFocusContext | null>(null);
+const RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
 
 let activeScope: ScopeRef = null;
 
@@ -117,12 +118,21 @@ export function FocusScope(props: FocusScopeProps) {
     // Find all rendered nodes between the sentinels and add them to the scope.
     let node = startRef.current?.nextSibling!;
     let nodes: Element[] = [];
+    let stopPropagation = e => e.stopPropagation();
     while (node && node !== endRef.current) {
       nodes.push(node as Element);
+      // Stop custom restore focus event from propagating to parent focus scopes.
+      node.addEventListener(RESTORE_FOCUS_EVENT, stopPropagation);
       node = node.nextSibling as Element;
     }
 
     scopeRef.current = nodes;
+
+    return () => {
+      for (let node of nodes) {
+        node.removeEventListener(RESTORE_FOCUS_EVENT, stopPropagation);
+      }
+    };
   }, [children]);
 
   useActiveScopeTracker(scopeRef, restoreFocus, contain);
@@ -192,7 +202,7 @@ export function useFocusManager(): FocusManager | undefined {
   return useContext(FocusContext)?.focusManager;
 }
 
-function createFocusManagerForScope(scopeRef: React.RefObject<Element[]>): FocusManager {
+function createFocusManagerForScope(scopeRef: React.RefObject<Element[] | null>): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current!;
@@ -299,10 +309,10 @@ function shouldContainFocus(scopeRef: ScopeRef) {
   return true;
 }
 
-function useFocusContainment(scopeRef: RefObject<Element[]>, contain?: boolean) {
-  let focusedNode = useRef<FocusableElement>();
+function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: boolean) {
+  let focusedNode = useRef<FocusableElement>(undefined);
 
-  let raf = useRef<ReturnType<typeof requestAnimationFrame>>();
+  let raf = useRef<ReturnType<typeof requestAnimationFrame>>(undefined);
   useLayoutEffect(() => {
     let scope = scopeRef.current;
     if (!contain) {
@@ -470,7 +480,7 @@ function focusElement(element: FocusableElement | null, scroll = false) {
   }
 }
 
-function focusFirstInScope(scope: Element[], tabbable:boolean = true) {
+function getFirstInScope(scope: Element[], tabbable = true) {
   let sentinel = scope[0].previousElementSibling!;
   let scopeRoot = getScopeRoot(scope);
   let walker = getFocusableTreeWalker(scopeRoot, {tabbable}, scope);
@@ -485,10 +495,14 @@ function focusFirstInScope(scope: Element[], tabbable:boolean = true) {
     nextNode = walker.nextNode();
   }
 
-  focusElement(nextNode as FocusableElement);
+  return nextNode as FocusableElement;
 }
 
-function useAutoFocus(scopeRef: RefObject<Element[]>, autoFocus?: boolean) {
+function focusFirstInScope(scope: Element[], tabbable:boolean = true) {
+  focusElement(getFirstInScope(scope, tabbable));
+}
+
+function useAutoFocus(scopeRef: RefObject<Element[] | null>, autoFocus?: boolean) {
   const autoFocusRef = React.useRef(autoFocus);
   useEffect(() => {
     if (autoFocusRef.current) {
@@ -502,7 +516,7 @@ function useAutoFocus(scopeRef: RefObject<Element[]>, autoFocus?: boolean) {
   }, [scopeRef]);
 }
 
-function useActiveScopeTracker(scopeRef: RefObject<Element[]>, restore?: boolean, contain?: boolean) {
+function useActiveScopeTracker(scopeRef: RefObject<Element[] | null>, restore?: boolean, contain?: boolean) {
   // tracks the active scope, in case restore and contain are both false.
   // if either are true, this is tracked in useRestoreFocus or useFocusContainment.
   useLayoutEffect(() => {
@@ -544,7 +558,7 @@ function shouldRestoreFocus(scopeRef: ScopeRef) {
   return scope?.scopeRef === scopeRef;
 }
 
-function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean, contain?: boolean) {
+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);
@@ -679,8 +693,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
         && nodeToRestore
         && (
           // eslint-disable-next-line react-hooks/exhaustive-deps
-          isElementInScope(ownerDocument.activeElement, scopeRef.current)
-          || (ownerDocument.activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef))
+          (isElementInScope(ownerDocument.activeElement, scopeRef.current) || (ownerDocument.activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef)))
         )
       ) {
         // freeze the focusScopeTree so it persists after the raf, otherwise during unmount nodes are removed from it
@@ -692,7 +705,7 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
             let treeNode = clonedTree.getTreeNode(scopeRef);
             while (treeNode) {
               if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
-                focusElement(treeNode.nodeToRestore);
+                restoreFocusToElement(treeNode.nodeToRestore);
                 return;
               }
               treeNode = treeNode.parent;
@@ -703,7 +716,8 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
             treeNode = clonedTree.getTreeNode(scopeRef);
             while (treeNode) {
               if (treeNode.scopeRef && treeNode.scopeRef.current && focusScopeTree.getTreeNode(treeNode.scopeRef)) {
-                focusFirstInScope(treeNode.scopeRef.current, true);
+                let node = getFirstInScope(treeNode.scopeRef.current, true);
+                restoreFocusToElement(node);
                 return;
               }
               treeNode = treeNode.parent;
@@ -715,6 +729,15 @@ function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus?: boolean,
   }, [scopeRef, restoreFocus]);
 }
 
+function restoreFocusToElement(node: FocusableElement) {
+  // 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(RESTORE_FOCUS_EVENT, {bubbles: true, cancelable: true}))) {
+    focusElement(node);
+  }
+}
+
 /**
  * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
  * that matches all focusable/tabbable elements.
@@ -754,7 +777,7 @@ export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions
 /**
  * Creates a FocusManager object that can be used to move focus within an element.
  */
-export function createFocusManager(ref: RefObject<Element>, defaultOptions: FocusManagerOptions = {}): FocusManager {
+export function createFocusManager(ref: RefObject<Element | null>, defaultOptions: FocusManagerOptions = {}): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
       let root = ref.current;

package/src/useFocusable.tsx

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps} from '@react-types/shared';
+import {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps, RefObject} from '@react-types/shared';
 import {focusSafely} from './';
 import {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';
-import React, {ForwardedRef, MutableRefObject, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
+import React, {ForwardedRef, MutableRefObject, ReactNode, useContext, useEffect, useRef} from 'react';
 import {useFocus, useKeyboard} from '@react-aria/interactions';
 
 export interface FocusableOptions extends FocusableProps, FocusableDOMProps {
@@ -32,7 +32,7 @@ interface FocusableContextValue extends FocusableProviderProps {
 
 let FocusableContext = React.createContext<FocusableContextValue | null>(null);
 
-function useFocusableContext(ref: RefObject<FocusableElement>): FocusableContextValue {
+function useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {
   let context = useContext(FocusableContext) || {};
   useSyncRef(context, ref);
 
@@ -70,7 +70,7 @@ export interface FocusableAria {
 /**
  * Used to make an element focusable and capable of auto focus.
  */
-export function useFocusable(props: FocusableOptions, domRef: RefObject<FocusableElement>): FocusableAria {
+export function useFocusable(props: FocusableOptions, domRef: RefObject<FocusableElement | null>): FocusableAria {
   let {focusProps} = useFocus(props);
   let {keyboardProps} = useKeyboard(props);
   let interactions = mergeProps(focusProps, keyboardProps);

package/src/useHasTabbableChild.ts

@@ -11,8 +11,9 @@
  */
 
 import {getFocusableTreeWalker} from './FocusScope';
-import {RefObject, useState} from 'react';
+import {RefObject} from '@react-types/shared';
 import {useLayoutEffect} from '@react-aria/utils';
+import {useState} from 'react';
 
 interface AriaHasTabbableChildOptions {
   isDisabled?: boolean
@@ -27,7 +28,7 @@ interface AriaHasTabbableChildOptions {
  * Returns whether an element has a tabbable child, and updates as children change.
  * @private
  */
-export function useHasTabbableChild(ref: RefObject<Element>, options?: AriaHasTabbableChildOptions): boolean {
+export function useHasTabbableChild(ref: RefObject<Element | null>, options?: AriaHasTabbableChildOptions): boolean {
   let isDisabled = options?.isDisabled;
   let [hasTabbableChild, setHasTabbableChild] = useState(false);