@react-aria/focus - npm Package Compare versions

Comparing version 3.17.1 to 3.18.0

dist/FocusScope.main.js

@@ -36,2 +36,3 @@ var $1c7f9157d722357d$exports = require("./focusSafely.main.js");
 const $a7a032acae3ddda9$var$FocusContext = /*#__PURE__*/ (0, ($parcel$interopDefault($euGna$react))).createContext(null);
+const $a7a032acae3ddda9$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
 let $a7a032acae3ddda9$var$activeScope = null;
@@ -78,7 +79,13 @@ function $a7a032acae3ddda9$export$20e40289641fbbb6(props) {
         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($a7a032acae3ddda9$var$RESTORE_FOCUS_EVENT, stopPropagation);
             node = node.nextSibling;
         }
         scopeRef.current = nodes;
+        return ()=>{
+            for (let node of nodes)node.removeEventListener($a7a032acae3ddda9$var$RESTORE_FOCUS_EVENT, stopPropagation);
+        };
     }, [
@@ -244,4 +251,4 @@ children
 function $a7a032acae3ddda9$var$useFocusContainment(scopeRef, contain) {
-    let focusedNode = (0, $euGna$react.useRef)();
-    let raf = (0, $euGna$react.useRef)();
+    let focusedNode = (0, $euGna$react.useRef)(undefined);
+    let raf = (0, $euGna$react.useRef)(undefined);
     (0, $euGna$reactariautils.useLayoutEffect)(()=>{
@@ -372,3 +379,3 @@ let scope = scopeRef.current;
 }
-function $a7a032acae3ddda9$var$focusFirstInScope(scope, tabbable = true) {
+function $a7a032acae3ddda9$var$getFirstInScope(scope, tabbable = true) {
     let sentinel = scope[0].previousElementSibling;
@@ -390,4 +397,7 @@ let scopeRoot = $a7a032acae3ddda9$var$getScopeRoot(scope);
     }
-    $a7a032acae3ddda9$var$focusElement(nextNode);
+    return nextNode;
 }
+function $a7a032acae3ddda9$var$focusFirstInScope(scope, tabbable = true) {
+    $a7a032acae3ddda9$var$focusElement($a7a032acae3ddda9$var$getFirstInScope(scope, tabbable));
+}
 function $a7a032acae3ddda9$var$useAutoFocus(scopeRef, autoFocus) {
@@ -539,3 +549,3 @@ const autoFocusRef = (0, ($parcel$interopDefault($euGna$react))).useRef(autoFocus);
                             if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
-                                $a7a032acae3ddda9$var$focusElement(treeNode.nodeToRestore);
+                                $a7a032acae3ddda9$var$restoreFocusToElement(treeNode.nodeToRestore);
                                 return;
@@ -550,3 +560,4 @@ }
                             if (treeNode.scopeRef && treeNode.scopeRef.current && $a7a032acae3ddda9$export$d06fae2ee68b101e.getTreeNode(treeNode.scopeRef)) {
-                                $a7a032acae3ddda9$var$focusFirstInScope(treeNode.scopeRef.current, true);
+                                let node = $a7a032acae3ddda9$var$getFirstInScope(treeNode.scopeRef.current, true);
+                                $a7a032acae3ddda9$var$restoreFocusToElement(node);
                                 return;
@@ -565,2 +576,11 @@ }
 }
+function $a7a032acae3ddda9$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($a7a032acae3ddda9$var$RESTORE_FOCUS_EVENT, {
+        bubbles: true,
+        cancelable: true
+    }))) $a7a032acae3ddda9$var$focusElement(node);
+}
 function $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, opts, scope) {
@@ -567,0 +587,0 @@ let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $a7a032acae3ddda9$var$TABBABLE_ELEMENT_SELECTOR : $a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR;

dist/FocusScope.module.js

@@ -21,2 +21,3 @@ import {focusSafely as $6a99195332edec8b$export$80f3e147d781571c} from "./focusSafely.module.js";
 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;
@@ -63,7 +64,13 @@ function $9bf71ea28793e738$export$20e40289641fbbb6(props) {
         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);
+        };
     }, [
@@ -229,4 +236,4 @@ children
 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)(()=>{
@@ -357,3 +364,3 @@ let scope = scopeRef.current;
 }
-function $9bf71ea28793e738$var$focusFirstInScope(scope, tabbable = true) {
+function $9bf71ea28793e738$var$getFirstInScope(scope, tabbable = true) {
     let sentinel = scope[0].previousElementSibling;
@@ -375,4 +382,7 @@ let scopeRoot = $9bf71ea28793e738$var$getScopeRoot(scope);
     }
-    $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) {
@@ -524,3 +534,3 @@ const autoFocusRef = (0, $cgawC$react).useRef(autoFocus);
                             if (treeNode.nodeToRestore && treeNode.nodeToRestore.isConnected) {
-                                $9bf71ea28793e738$var$focusElement(treeNode.nodeToRestore);
+                                $9bf71ea28793e738$var$restoreFocusToElement(treeNode.nodeToRestore);
                                 return;
@@ -535,3 +545,4 @@ }
                             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;
@@ -550,2 +561,11 @@ }
 }
+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) {
@@ -552,0 +572,0 @@ let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $9bf71ea28793e738$var$TABBABLE_ELEMENT_SELECTOR : $9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR;

dist/types.d.ts

@@ -1,3 +0,3 @@
-import { FocusableElement, DOMAttributes, FocusableDOMProps, FocusableProps } from "@react-types/shared";
-import React, { ReactNode, RefObject, ReactElement } from "react";
+import { FocusableElement, RefObject, DOMAttributes, FocusableDOMProps, FocusableProps } from "@react-types/shared";
+import React, { ReactNode, ReactElement } from "react";
 /**
@@ -69,3 +69,3 @@ * A utility function that focuses an element while avoiding undesired side effects such
  */
-export function createFocusManager(ref: RefObject<Element>, defaultOptions?: FocusManagerOptions): FocusManager;
+export function createFocusManager(ref: RefObject<Element | null>, defaultOptions?: FocusManagerOptions): FocusManager;
 export interface AriaFocusRingProps {
@@ -122,3 +122,3 @@ /**
  */
-export function FocusRing(props: FocusRingProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export function FocusRing(props: FocusRingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface FocusableOptions extends FocusableProps, FocusableDOMProps {
@@ -140,3 +140,3 @@ /** Whether focus should be disabled. */
  */
-export function useFocusable(props: FocusableOptions, domRef: RefObject<FocusableElement>): FocusableAria;
+export function useFocusable(props: FocusableOptions, domRef: RefObject<FocusableElement | null>): FocusableAria;
 interface AriaHasTabbableChildOptions {
@@ -149,4 +149,4 @@ isDisabled?: boolean;
  */
-export function useHasTabbableChild(ref: RefObject<Element>, options?: AriaHasTabbableChildOptions): boolean;
+export function useHasTabbableChild(ref: RefObject<Element | null>, options?: AriaHasTabbableChildOptions): boolean;
 
 //# sourceMappingURL=types.d.ts.map

dist/useHasTabbableChild.main.js

 var $a7a032acae3ddda9$exports = require("./FocusScope.main.js");
+var $6RLDH$reactariautils = require("@react-aria/utils");
 var $6RLDH$react = require("react");
-var $6RLDH$reactariautils = require("@react-aria/utils");
 
@@ -5,0 +5,0 @@

dist/useHasTabbableChild.module.js

 import {getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa} from "./FocusScope.module.js";
+import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
 import {useState as $hGAaG$useState} from "react";
-import {useLayoutEffect as $hGAaG$useLayoutEffect} from "@react-aria/utils";
 
@@ -5,0 +5,0 @@ /*

package.json

 {
   "name": "@react-aria/focus",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "description": "Spectrum UI components in React",
@@ -25,5 +25,5 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/interactions": "^3.21.3",
-    "@react-aria/utils": "^3.24.1",
-    "@react-types/shared": "^3.23.1",
+    "@react-aria/interactions": "^3.22.0",
+    "@react-aria/utils": "^3.25.0",
+    "@react-types/shared": "^3.24.0",
     "@swc/helpers": "^0.5.0",
@@ -33,3 +33,3 @@ "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"
   },
@@ -39,3 +39,3 @@ "publishConfig": {
   },
-  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

src/useHasTabbableChild.ts

@@ -14,4 +14,5 @@ /*
 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';
 
@@ -31,3 +32,3 @@ interface AriaHasTabbableChildOptions {
  */
-export function useHasTabbableChild(ref: RefObject<Element>, options?: AriaHasTabbableChildOptions): boolean {
+export function useHasTabbableChild(ref: RefObject<Element | null>, options?: AriaHasTabbableChildOptions): boolean {
   let isDisabled = options?.isDisabled;
@@ -34,0 +35,0 @@ let [hasTabbableChild, setHasTabbableChild] = useState(false);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

394937

increased by2.11%

Lines of code

4435

increased by1.86%

Dependency changes

• Updated@react-aria/interactions@^3.22.0

• Updated@react-aria/utils@^3.25.0

• Updated@react-types/shared@^3.24.0