@react-aria/focus - npm Package Compare versions

Comparing version 3.0.0-nightly-326f48154-241216 to 3.0.0-nightly-3e1c5183f-250123

dist/FocusScope.main.js

 var $1c7f9157d722357d$exports = require("./focusSafely.main.js");
 var $d5156037ad898a4d$exports = require("./isElementVisible.main.js");
+var $euGna$reactariainteractions = require("@react-aria/interactions");
 var $euGna$reactariautils = require("@react-aria/utils");
@@ -18,3 +19,2 @@ var $euGna$react = require("react");
 $parcel$export(module.exports, "getFocusableTreeWalker", () => $a7a032acae3ddda9$export$2d6ec8fc375ceafa);
-$parcel$export(module.exports, "isFocusable", () => $a7a032acae3ddda9$export$4c063cf1350e6fed);
 $parcel$export(module.exports, "isElementInChildOfActiveScope", () => $a7a032acae3ddda9$export$1258395f99bf9cbf);
@@ -36,2 +36,3 @@ $parcel$export(module.exports, "createFocusManager", () => $a7a032acae3ddda9$export$c5251b9e124bf29);
 
+
 const $a7a032acae3ddda9$var$FocusContext = /*#__PURE__*/ (0, ($parcel$interopDefault($euGna$react))).createContext(null);
@@ -218,23 +219,2 @@ const $a7a032acae3ddda9$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
 }
-const $a7a032acae3ddda9$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]:not([contenteditable^="false"])'
-];
-const $a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR = $a7a032acae3ddda9$var$focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
-$a7a032acae3ddda9$var$focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
-const $a7a032acae3ddda9$var$TABBABLE_ELEMENT_SELECTOR = $a7a032acae3ddda9$var$focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
-function $a7a032acae3ddda9$export$4c063cf1350e6fed(element) {
-    return element.matches($a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR);
-}
 function $a7a032acae3ddda9$var$getScopeRoot(scope) {
@@ -302,4 +282,9 @@ return scope[0].parentElement;
             raf.current = requestAnimationFrame(()=>{
+                // Patches infinite focus coersion loop for Android Talkback where the user isn't able to move the virtual cursor
+                // if within a containing focus scope. Bug filed against Chrome: https://issuetracker.google.com/issues/384844019.
+                // Note that this means focus can leave focus containing modals due to this, but it is isolated to Chrome Talkback.
+                let modality = (0, $euGna$reactariainteractions.getInteractionModality)();
+                let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && (0, $euGna$reactariautils.isAndroid)() && (0, $euGna$reactariautils.isChrome)();
                 // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-                if (ownerDocument.activeElement && $a7a032acae3ddda9$var$shouldContainFocus(scopeRef) && !$a7a032acae3ddda9$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
+                if (!shouldSkipFocusRestore && ownerDocument.activeElement && $a7a032acae3ddda9$var$shouldContainFocus(scopeRef) && !$a7a032acae3ddda9$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
                     $a7a032acae3ddda9$var$activeScope = scopeRef;
@@ -581,3 +566,3 @@ if (ownerDocument.body.contains(e.target)) {
 function $a7a032acae3ddda9$export$2d6ec8fc375ceafa(root, opts, scope) {
-    let selector = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? $a7a032acae3ddda9$var$TABBABLE_ELEMENT_SELECTOR : $a7a032acae3ddda9$var$FOCUSABLE_ELEMENT_SELECTOR;
+    let filter = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? (0, $euGna$reactariautils.isTabbable) : (0, $euGna$reactariautils.isFocusable);
     let walker = (0, $euGna$reactariautils.getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
@@ -588,3 +573,3 @@ acceptNode (node) {
             if (opts === null || opts === void 0 ? void 0 : (_opts_from = opts.from) === null || _opts_from === void 0 ? void 0 : _opts_from.contains(node)) return NodeFilter.FILTER_REJECT;
-            if (node.matches(selector) && (0, $d5156037ad898a4d$exports.isElementVisible)(node) && (!scope || $a7a032acae3ddda9$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
+            if (filter(node) && (0, $d5156037ad898a4d$exports.isElementVisible)(node) && (!scope || $a7a032acae3ddda9$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
             return NodeFilter.FILTER_SKIP;
@@ -591,0 +576,0 @@ }

dist/FocusScope.module.js

 import {focusSafely as $6a99195332edec8b$export$80f3e147d781571c} from "./focusSafely.module.js";
 import {isElementVisible as $645f2e67b85a24c9$export$e989c0fffaa6b27a} from "./isElementVisible.module.js";
-import {useLayoutEffect as $cgawC$useLayoutEffect, getOwnerDocument as $cgawC$getOwnerDocument} from "@react-aria/utils";
+import {getInteractionModality as $cgawC$getInteractionModality} from "@react-aria/interactions";
+import {useLayoutEffect as $cgawC$useLayoutEffect, getOwnerDocument as $cgawC$getOwnerDocument, isAndroid as $cgawC$isAndroid, isChrome as $cgawC$isChrome, isTabbable as $cgawC$isTabbable, isFocusable as $cgawC$isFocusable} from "@react-aria/utils";
 import $cgawC$react, {useRef as $cgawC$useRef, useContext as $cgawC$useContext, useMemo as $cgawC$useMemo, useEffect as $cgawC$useEffect} from "react";
@@ -20,2 +21,3 @@
 
+
 const $9bf71ea28793e738$var$FocusContext = /*#__PURE__*/ (0, $cgawC$react).createContext(null);
@@ -202,23 +204,2 @@ const $9bf71ea28793e738$var$RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';
 }
-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]:not([contenteditable^="false"])'
-];
-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) {
-    return element.matches($9bf71ea28793e738$var$FOCUSABLE_ELEMENT_SELECTOR);
-}
 function $9bf71ea28793e738$var$getScopeRoot(scope) {
@@ -286,4 +267,9 @@ return scope[0].parentElement;
             raf.current = requestAnimationFrame(()=>{
+                // Patches infinite focus coersion loop for Android Talkback where the user isn't able to move the virtual cursor
+                // if within a containing focus scope. Bug filed against Chrome: https://issuetracker.google.com/issues/384844019.
+                // Note that this means focus can leave focus containing modals due to this, but it is isolated to Chrome Talkback.
+                let modality = (0, $cgawC$getInteractionModality)();
+                let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && (0, $cgawC$isAndroid)() && (0, $cgawC$isChrome)();
                 // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-                if (ownerDocument.activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
+                if (!shouldSkipFocusRestore && ownerDocument.activeElement && $9bf71ea28793e738$var$shouldContainFocus(scopeRef) && !$9bf71ea28793e738$var$isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
                     $9bf71ea28793e738$var$activeScope = scopeRef;
@@ -565,3 +551,3 @@ if (ownerDocument.body.contains(e.target)) {
 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 filter = (opts === null || opts === void 0 ? void 0 : opts.tabbable) ? (0, $cgawC$isTabbable) : (0, $cgawC$isFocusable);
     let walker = (0, $cgawC$getOwnerDocument)(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
@@ -572,3 +558,3 @@ acceptNode (node) {
             if (opts === null || opts === void 0 ? void 0 : (_opts_from = opts.from) === null || _opts_from === void 0 ? void 0 : _opts_from.contains(node)) return NodeFilter.FILTER_REJECT;
-            if (node.matches(selector) && (0, $645f2e67b85a24c9$export$e989c0fffaa6b27a)(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
+            if (filter(node) && (0, $645f2e67b85a24c9$export$e989c0fffaa6b27a)(node) && (!scope || $9bf71ea28793e738$var$isElementInScope(node, scope)) && (!(opts === null || opts === void 0 ? void 0 : opts.accept) || opts.accept(node))) return NodeFilter.FILTER_ACCEPT;
             return NodeFilter.FILTER_SKIP;
@@ -736,3 +722,3 @@ }
 
-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};
+export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$d06fae2ee68b101e as focusScopeTree, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$1258395f99bf9cbf as isElementInChildOfActiveScope, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager};
 //# sourceMappingURL=FocusScope.module.js.map

dist/main.js

@@ -7,2 +7,3 @@ var $a7a032acae3ddda9$exports = require("./FocusScope.main.js");
 var $259c6413a286f2e6$exports = require("./useHasTabbableChild.main.js");
+var $aB6Cp$reactariautils = require("@react-aria/utils");
 
@@ -19,3 +20,2 @@
 $parcel$export(module.exports, "isElementInChildOfActiveScope", () => $a7a032acae3ddda9$exports.isElementInChildOfActiveScope);
-$parcel$export(module.exports, "isFocusable", () => $a7a032acae3ddda9$exports.isFocusable);
 $parcel$export(module.exports, "FocusRing", () => $dfd8c70b928eb1b3$exports.FocusRing);
@@ -27,2 +27,3 @@ $parcel$export(module.exports, "FocusableProvider", () => $fb504d83237fd6ac$exports.FocusableProvider);
 $parcel$export(module.exports, "useHasTabbableChild", () => $259c6413a286f2e6$exports.useHasTabbableChild);
+$parcel$export(module.exports, "isFocusable", () => $aB6Cp$reactariautils.isFocusable);
 /*
@@ -46,2 +47,3 @@ * Copyright 2020 Adobe. All rights reserved.
 
+
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import {createFocusManager as $9bf71ea28793e738$export$c5251b9e124bf29, FocusScope as $9bf71ea28793e738$export$20e40289641fbbb6, getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa, isElementInChildOfActiveScope as $9bf71ea28793e738$export$1258395f99bf9cbf, isFocusable as $9bf71ea28793e738$export$4c063cf1350e6fed, useFocusManager as $9bf71ea28793e738$export$10c5169755ce7bd7} from "./FocusScope.module.js";
+import {createFocusManager as $9bf71ea28793e738$export$c5251b9e124bf29, FocusScope as $9bf71ea28793e738$export$20e40289641fbbb6, getFocusableTreeWalker as $9bf71ea28793e738$export$2d6ec8fc375ceafa, isElementInChildOfActiveScope as $9bf71ea28793e738$export$1258395f99bf9cbf, useFocusManager as $9bf71ea28793e738$export$10c5169755ce7bd7} from "./FocusScope.module.js";
 import {FocusRing as $907718708eab68af$export$1a38b4ad7f578e1d} from "./FocusRing.module.js";
@@ -7,2 +7,3 @@ import {FocusableProvider as $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5, useFocusable as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c} from "./useFocusable.module.js";
 import {useHasTabbableChild as $83013635b024ae3d$export$eac1895992b9f3d6} from "./useHasTabbableChild.module.js";
+import {isFocusable as $d48f97c9d1a8e323$re_export$isFocusable} from "@react-aria/utils";
 
@@ -27,3 +28,4 @@ /*
 
-export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager, $9bf71ea28793e738$export$1258395f99bf9cbf as isElementInChildOfActiveScope, $9bf71ea28793e738$export$4c063cf1350e6fed as isFocusable, $907718708eab68af$export$1a38b4ad7f578e1d as FocusRing, $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 as FocusableProvider, $e6afbd83fe6ebbd2$export$4c014de7c8940b4c as useFocusable, $f7dceffc5ad7768b$export$4e328f61c538687f as useFocusRing, $6a99195332edec8b$export$80f3e147d781571c as focusSafely, $83013635b024ae3d$export$eac1895992b9f3d6 as useHasTabbableChild};
+
+export {$9bf71ea28793e738$export$20e40289641fbbb6 as FocusScope, $9bf71ea28793e738$export$10c5169755ce7bd7 as useFocusManager, $9bf71ea28793e738$export$2d6ec8fc375ceafa as getFocusableTreeWalker, $9bf71ea28793e738$export$c5251b9e124bf29 as createFocusManager, $9bf71ea28793e738$export$1258395f99bf9cbf as isElementInChildOfActiveScope, $907718708eab68af$export$1a38b4ad7f578e1d as FocusRing, $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 as FocusableProvider, $e6afbd83fe6ebbd2$export$4c014de7c8940b4c as useFocusable, $f7dceffc5ad7768b$export$4e328f61c538687f as useFocusRing, $6a99195332edec8b$export$80f3e147d781571c as focusSafely, $83013635b024ae3d$export$eac1895992b9f3d6 as useHasTabbableChild, $d48f97c9d1a8e323$re_export$isFocusable as isFocusable};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -58,3 +58,2 @@ import { FocusableElement, RefObject, DOMAttributes, FocusableDOMProps, FocusableProps } from "@react-types/shared";
 export function useFocusManager(): FocusManager | undefined;
-export function isFocusable(element: HTMLElement): boolean;
 /** @private */
@@ -151,3 +150,4 @@ export function isElementInChildOfActiveScope(element: Element): boolean;
 export function useHasTabbableChild(ref: RefObject<Element | null>, options?: AriaHasTabbableChildOptions): boolean;
+export { isFocusable } from '@react-aria/utils';
 
 //# sourceMappingURL=types.d.ts.map

dist/useFocusable.main.js

@@ -63,6 +63,9 @@ var $1c7f9157d722357d$exports = require("./focusSafely.main.js");
     ]);
+    // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
+    let tabIndex = props.excludeFromTabOrder ? -1 : 0;
+    if (props.isDisabled) tabIndex = undefined;
     return {
         focusableProps: (0, $ggOO2$reactariautils.mergeProps)({
             ...interactions,
-            tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
+            tabIndex: tabIndex
         }, interactionProps)
@@ -69,0 +72,0 @@ };

dist/useFocusable.module.js

@@ -52,6 +52,9 @@ import {focusSafely as $6a99195332edec8b$export$80f3e147d781571c} from "./focusSafely.module.js";
     ]);
+    // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
+    let tabIndex = props.excludeFromTabOrder ? -1 : 0;
+    if (props.isDisabled) tabIndex = undefined;
     return {
         focusableProps: (0, $h8xso$mergeProps)({
             ...interactions,
-            tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
+            tabIndex: tabIndex
         }, interactionProps)
@@ -58,0 +61,0 @@ };

package.json

 {
   "name": "@react-aria/focus",
-  "version": "3.0.0-nightly-326f48154-241216",
+  "version": "3.0.0-nightly-3e1c5183f-250123",
   "description": "Spectrum UI components in React",
@@ -25,5 +25,5 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/interactions": "3.0.0-nightly-326f48154-241216",
-    "@react-aria/utils": "3.0.0-nightly-326f48154-241216",
-    "@react-types/shared": "3.0.0-nightly-326f48154-241216",
+    "@react-aria/interactions": "3.0.0-nightly-3e1c5183f-250123",
+    "@react-aria/utils": "3.0.0-nightly-3e1c5183f-250123",
+    "@react-types/shared": "3.0.0-nightly-3e1c5183f-250123",
     "@swc/helpers": "^0.5.0",
@@ -33,3 +33,4 @@ "clsx": "^2.0.0"
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -36,0 +37,0 @@ "publishConfig": {

src/index.ts

@@ -13,3 +13,3 @@ /*
 
-export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope, isFocusable} from './FocusScope';
+export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager, isElementInChildOfActiveScope} from './FocusScope';
 export {FocusRing} from './FocusRing';
@@ -20,2 +20,4 @@ export {FocusableProvider, useFocusable} from './useFocusable';
 export {useHasTabbableChild} from './useHasTabbableChild';
+// For backward compatibility.
+export {isFocusable} from '@react-aria/utils';
 
@@ -22,0 +24,0 @@ export type {FocusScopeProps, FocusManager, FocusManagerOptions} from './FocusScope';

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

383455

increased by0.05%

Number of low license alerts

11

decreased by-8.33%

Worsened metrics

Dependency count

7

increased by16.67%

Lines of code

4377

decreased by-0.95%

Dependency changes

• + Added@react-aria/interactions@3.0.0-nightly-3e1c5183f-250123(transitive)

• + Added@react-aria/ssr@3.0.0-nightly-3e1c5183f-250123(transitive)

• + Added@react-aria/utils@3.0.0-nightly-3e1c5183f-250123(transitive)

• + Added@react-stately/utils@3.0.0-nightly-3e1c5183f-250123(transitive)

• + Added@react-types/shared@3.0.0-nightly-3e1c5183f-250123(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removed@react-aria/interactions@3.0.0-nightly-326f48154-241216(transitive)

• - Removed@react-aria/ssr@3.0.0-nightly-326f48154-241216(transitive)

• - Removed@react-aria/utils@3.0.0-nightly-326f48154-241216(transitive)

• - Removed@react-stately/utils@3.0.0-nightly-326f48154-241216(transitive)

• - Removed@react-types/shared@3.0.0-nightly-326f48154-241216(transitive)

• Updated@react-aria/interactions@3.0.0-nightly-3e1c5183f-250123

• Updated@react-aria/utils@3.0.0-nightly-3e1c5183f-250123

• Updated@react-types/shared@3.0.0-nightly-3e1c5183f-250123