@react-aria/focus 3.5.5 → 3.7.0

package/dist/types.d.ts

@@ -1,11 +1,11 @@
-import React, { ReactNode, RefObject, HTMLAttributes, ReactElement } from "react";
-import { FocusableDOMProps, FocusableProps } from "@react-types/shared";
+import { FocusableElement, DOMAttributes, FocusableDOMProps, FocusableProps } from "@react-types/shared";
+import React, { ReactNode, RefObject, ReactElement } from "react";
 /**
  * A utility function that focuses an element while avoiding undesired side effects such
  * as page scrolling and screen reader issues with CSS transitions.
  */
-export function focusSafely(element: HTMLElement): void;
-interface FocusScopeProps {
+export function focusSafely(element: FocusableElement): void;
+export interface FocusScopeProps {
     /** The contents of the focus scope. */
     children: ReactNode;
     /**
@@ -21,23 +21,25 @@ interface FocusScopeProps {
     /** Whether to auto focus the first focusable element in the focus scope on mount. */
     autoFocus?: boolean;
 }
-interface FocusManagerOptions {
+export interface FocusManagerOptions {
     /** The element to start searching from. The currently focused element by default. */
-    from?: HTMLElement;
+    from?: Element;
     /** Whether to only include tabbable elements, or all focusable elements. */
     tabbable?: boolean;
     /** Whether focus should wrap around when it reaches the end of the scope. */
     wrap?: boolean;
+    /** A callback that determines whether the given element is focused. */
+    accept?: (node: Element) => boolean;
 }
 export interface FocusManager {
     /** Moves focus to the next focusable or tabbable element in the focus scope. */
-    focusNext(opts?: FocusManagerOptions): HTMLElement;
+    focusNext(opts?: FocusManagerOptions): FocusableElement;
     /** Moves focus to the previous focusable or tabbable element in the focus scope. */
-    focusPrevious(opts?: FocusManagerOptions): HTMLElement;
+    focusPrevious(opts?: FocusManagerOptions): FocusableElement;
     /** Moves focus to the first focusable or tabbable element in the focus scope. */
-    focusFirst(opts?: FocusManagerOptions): HTMLElement;
+    focusFirst(opts?: FocusManagerOptions): FocusableElement;
     /** Moves focus to the last focusable or tabbable element in the focus scope. */
-    focusLast(opts?: FocusManagerOptions): HTMLElement;
+    focusLast(opts?: FocusManagerOptions): FocusableElement;
 }
 /**
  * A FocusScope manages focus for its descendants. It supports containing focus inside
@@ -57,12 +59,12 @@ export function useFocusManager(): FocusManager;
  * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
  * that matches all focusable/tabbable elements.
  */
-export function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOptions, scope?: HTMLElement[]): TreeWalker;
+export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]): TreeWalker;
 /**
  * Creates a FocusManager object that can be used to move focus within an element.
  */
-export function createFocusManager(ref: RefObject<HTMLElement>): FocusManager;
-interface FocusRingProps {
+export function createFocusManager(ref: RefObject<Element>, defaultOptions?: FocusManagerOptions): FocusManager;
+export interface AriaFocusRingProps {
     /**
      * Whether to show the focus ring when something
      * inside the container element has focus (true), or
@@ -75,21 +77,21 @@ interface FocusRingProps {
     /** Whether the element will be auto focused. */
     autoFocus?: boolean;
 }
-interface FocusRingAria {
+export interface FocusRingAria {
     /** Whether the element is currently focused. */
     isFocused: boolean;
     /** Whether keyboard focus should be visible. */
     isFocusVisible: boolean;
     /** Props to apply to the container element with the focus ring. */
-    focusProps: HTMLAttributes<HTMLElement>;
+    focusProps: DOMAttributes;
 }
 /**
  * Determines whether a focus ring should be shown to indicate keyboard focus.
  * Focus rings are visible only when the user is interacting with a keyboard,
  * not with a mouse, touch, or other input methods.
  */
-export function useFocusRing(props?: FocusRingProps): FocusRingAria;
-interface _FocusRingProps1 {
+export function useFocusRing(props?: AriaFocusRingProps): FocusRingAria;
+export interface FocusRingProps {
     /** Child element to apply CSS classes to. */
     children: ReactElement;
     /** CSS class to apply when the element is focused. */
@@ -113,23 +115,23 @@ interface _FocusRingProps1 {
  * Focus rings are visible only when the user is interacting with a keyboard,
  * not with a mouse, touch, or other input methods.
  */
-export function FocusRing(props: _FocusRingProps1): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-interface FocusableOptions extends FocusableProps, FocusableDOMProps {
+export function FocusRing(props: FocusRingProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export interface FocusableOptions extends FocusableProps, FocusableDOMProps {
     /** Whether focus should be disabled. */
     isDisabled?: boolean;
 }
-interface FocusableProviderProps extends HTMLAttributes<HTMLElement> {
+export interface FocusableProviderProps extends DOMAttributes {
     /** The child element to provide DOM props to. */
     children?: ReactNode;
 }
-export let FocusableProvider: React.ForwardRefExoticComponent<FocusableProviderProps & React.RefAttributes<HTMLElement>>;
-interface FocusableAria {
+export let FocusableProvider: React.ForwardRefExoticComponent<FocusableProviderProps & React.RefAttributes<FocusableElement>>;
+export interface FocusableAria {
     /** Props for the focusable element. */
-    focusableProps: HTMLAttributes<HTMLElement>;
+    focusableProps: DOMAttributes;
 }
 /**
  * Used to make an element focusable and capable of auto focus.
  */
-export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElement>): FocusableAria;
+export function useFocusable(props: FocusableOptions, domRef: RefObject<FocusableElement>): FocusableAria;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;AAeA;;;GAGG;AACH,4BAA4B,OAAO,EAAE,WAAW,QAiB/C;AEhBD;IACE,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,qFAAqF;IACrF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED;IACE,gFAAgF;IAChF,SAAS,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,WAAW,CAAC;IACnD,oFAAoF;IACpF,aAAa,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,WAAW,CAAC;IACvD,iFAAiF;IACjF,UAAU,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,WAAW,CAAC;IAClD,gFAAgF;IAClF,SAAS,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,WAAW,CAAA;CACnD;AAkBD;;;;;;GAMG;AACH,2BAA2B,KAAK,EAAE,eAAe,eAiDhD;AAED;;;;GAIG;AACH,mCAAmC,YAAY,CAE9C;AA0UD;;;GAGG;AACH,uCAAuC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,WAAW,EAAE,cA4B1G;AAED;;GAEG;AACH,mCAAmC,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,YAAY,CAiE5E;ACzjBD;IACE;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,gDAAgD;IAChD,SAAS,EAAE,OAAO,CAAC;IAEnB,gDAAgD;IAChD,cAAc,EAAE,OAAO,CAAC;IAExB,mEAAmE;IACnE,UAAU,EAAE,eAAe,WAAW,CAAC,CAAA;CACxC;AAED;;;;GAIG;AACH,6BAA6B,KAAK,GAAE,cAAmB,GAAG,aAAa,CAyCtE;AC5DD;IACE,6CAA6C;IAC7C,QAAQ,EAAE,YAAY,CAAC;IACvB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;GAIG;AACH,0BAA0B,KAAK,EAAE,gBAAc,sEAY9C;ACpCD,0BAA2B,SAAQ,cAAc,EAAE,iBAAiB;IAClE,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,gCAAiC,SAAQ,eAAe,WAAW,CAAC;IAClE,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAkCD,OAAA,IAAI,6GAAwD,CAAC;AAG7D;IACE,uCAAuC;IACvC,cAAc,EAAE,eAAe,WAAW,CAAC,CAAA;CAC5C;AAED;;GAEG;AACH,6BAA6B,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,WAAW,CAAC,GAAG,aAAa,CAwBnG","sources":["packages/@react-aria/focus/src/packages/@react-aria/focus/src/focusSafely.ts","packages/@react-aria/focus/src/packages/@react-aria/focus/src/isElementVisible.ts","packages/@react-aria/focus/src/packages/@react-aria/focus/src/FocusScope.tsx","packages/@react-aria/focus/src/packages/@react-aria/focus/src/useFocusRing.ts","packages/@react-aria/focus/src/packages/@react-aria/focus/src/FocusRing.tsx","packages/@react-aria/focus/src/packages/@react-aria/focus/src/useFocusable.tsx","packages/@react-aria/focus/src/packages/@react-aria/focus/src/index.ts","packages/@react-aria/focus/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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\nexport * from './FocusScope';\nexport * from './FocusRing';\nexport * from './useFocusable';\nexport * from './useFocusRing';\nexport * from './focusSafely';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;AAgBA;;;GAGG;AACH,4BAA4B,OAAO,EAAE,gBAAgB,QAiBpD;AEhBD;IACE,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAA;CACpC;AAED;IACE,gFAAgF;IAChF,SAAS,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,CAAC;IACxD,oFAAoF;IACpF,aAAa,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,CAAC;IAC5D,iFAAiF;IACjF,UAAU,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,CAAC;IACvD,gFAAgF;IAClF,SAAS,CAAC,IAAI,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,CAAA;CACxD;AAkBD;;;;;;GAMG;AACH,2BAA2B,KAAK,EAAE,eAAe,eAiDhD;AAED;;;;GAIG;AACH,mCAAmC,YAAY,CAE9C;AAoVD;;;GAGG;AACH,uCAAuC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,cA8BlG;AAED;;GAEG;AACH,mCAAmC,GAAG,EAAE,UAAU,OAAO,CAAC,EAAE,cAAc,GAAE,mBAAwB,GAAG,YAAY,CA6ElH;ACnlBD;IACE;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,gDAAgD;IAChD,SAAS,EAAE,OAAO,CAAC;IAEnB,gDAAgD;IAChD,cAAc,EAAE,OAAO,CAAC;IAExB,mEAAmE;IACnE,UAAU,EAAE,aAAa,CAAA;CAC1B;AAED;;;;GAIG;AACH,6BAA6B,KAAK,GAAE,kBAAuB,GAAG,aAAa,CAyC1E;AC7DD;IACE,6CAA6C;IAC7C,QAAQ,EAAE,YAAY,CAAC;IACvB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;GAIG;AACH,0BAA0B,KAAK,EAAE,cAAc,sEAY9C;ACpCD,iCAAkC,SAAQ,cAAc,EAAE,iBAAiB;IACzE,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,uCAAwC,SAAQ,aAAa;IAC3D,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAkCD,OAAA,IAAI,kHAAwD,CAAC;AAG7D;IACE,uCAAuC;IACvC,cAAc,EAAE,aAAa,CAAA;CAC9B;AAED;;GAEG;AACH,6BAA6B,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,gBAAgB,CAAC,GAAG,aAAa,CAwBxG","sources":["packages/@react-aria/focus/src/packages/@react-aria/focus/src/focusSafely.ts","packages/@react-aria/focus/src/packages/@react-aria/focus/src/isElementVisible.ts","packages/@react-aria/focus/src/packages/@react-aria/focus/src/FocusScope.tsx","packages/@react-aria/focus/src/packages/@react-aria/focus/src/useFocusRing.ts","packages/@react-aria/focus/src/packages/@react-aria/focus/src/FocusRing.tsx","packages/@react-aria/focus/src/packages/@react-aria/focus/src/useFocusable.tsx","packages/@react-aria/focus/src/packages/@react-aria/focus/src/index.ts","packages/@react-aria/focus/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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\nexport {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager} from './FocusScope';\nexport {FocusRing} from './FocusRing';\nexport {FocusableProvider, useFocusable} from './useFocusable';\nexport {useFocusRing} from './useFocusRing';\nexport {focusSafely} from './focusSafely';\n\nexport type {FocusScopeProps, FocusManager, FocusManagerOptions} from './FocusScope';\nexport type {FocusRingProps} from './FocusRing';\nexport type {FocusableAria, FocusableOptions, FocusableProviderProps} from './useFocusable';\nexport type {AriaFocusRingProps, FocusRingAria} from './useFocusRing';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/focus",
-  "version": "3.5.5",
+  "version": "3.7.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,16 +18,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/interactions": "^3.8.4",
-    "@react-aria/utils": "^3.12.0",
-    "@react-types/shared": "^3.12.0",
+    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/utils": "^3.13.2",
+    "@react-types/shared": "^3.14.0",
     "clsx": "^1.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/FocusRing.tsx

@@ -15,7 +15,7 @@ import {mergeProps} from '@react-aria/utils';
 import React, {ReactElement} from 'react';
 import {useFocusRing} from './useFocusRing';
 
-interface FocusRingProps {
+export interface FocusRingProps {
   /** Child element to apply CSS classes to. */
   children: ReactElement,
   /** CSS class to apply when the element is focused. */

package/src/FocusScope.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {FocusableElement} from '@react-types/shared';
 import {focusSafely} from './focusSafely';
 import {isElementVisible} from './isElementVisible';
 import React, {ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
@@ -18,7 +19,7 @@ import {useLayoutEffect} from '@react-aria/utils';
 // import {FocusScope, useFocusScope} from 'react-events/focus-scope';
 // export {FocusScope};
 
-interface FocusScopeProps {
+export interface FocusScopeProps {
   /** The contents of the focus scope. */
   children: ReactNode,
 
@@ -38,27 +39,29 @@ interface FocusScopeProps {
   autoFocus?: boolean
 }
 
-interface FocusManagerOptions {
+export interface FocusManagerOptions {
   /** The element to start searching from. The currently focused element by default. */
-  from?: HTMLElement,
+  from?: Element,
   /** Whether to only include tabbable elements, or all focusable elements. */
   tabbable?: boolean,
   /** Whether focus should wrap around when it reaches the end of the scope. */
-  wrap?: boolean
+  wrap?: boolean,
+  /** A callback that determines whether the given element is focused. */
+  accept?: (node: Element) => boolean
 }
 
 export interface FocusManager {
   /** Moves focus to the next focusable or tabbable element in the focus scope. */
-  focusNext(opts?: FocusManagerOptions): HTMLElement,
+  focusNext(opts?: FocusManagerOptions): FocusableElement,
   /** Moves focus to the previous focusable or tabbable element in the focus scope. */
-  focusPrevious(opts?: FocusManagerOptions): HTMLElement,
+  focusPrevious(opts?: FocusManagerOptions): FocusableElement,
   /** Moves focus to the first focusable or tabbable element in the focus scope. */
-  focusFirst(opts?: FocusManagerOptions): HTMLElement,
+  focusFirst(opts?: FocusManagerOptions): FocusableElement,
     /** Moves focus to the last focusable or tabbable element in the focus scope. */
-  focusLast(opts?: FocusManagerOptions): HTMLElement
+  focusLast(opts?: FocusManagerOptions): FocusableElement
 }
 
-type ScopeRef = RefObject<HTMLElement[]>;
+type ScopeRef = RefObject<Element[]>;
 interface IFocusContext {
   scopeRef: ScopeRef,
   focusManager: FocusManager
@@ -85,7 +88,7 @@ export function FocusScope(props: FocusScopeProps) {
   let {children, contain, restoreFocus, autoFocus} = props;
   let startRef = useRef<HTMLSpanElement>();
   let endRef = useRef<HTMLSpanElement>();
-  let scopeRef = useRef<HTMLElement[]>([]);
+  let scopeRef = useRef<Element[]>([]);
   let ctx = useContext(FocusContext);
   let parentScope = ctx?.scopeRef;
 
@@ -141,19 +144,19 @@ export function useFocusManager(): FocusManager {
   return useContext(FocusContext)?.focusManager;
 }
 
-function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): FocusManager {
+function createFocusManagerForScope(scopeRef: React.RefObject<Element[]>): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current;
-      let {from, tabbable, wrap} = opts;
+      let {from, tabbable, wrap, accept} = opts;
       let node = from || document.activeElement;
       let sentinel = scope[0].previousElementSibling;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = isElementInScope(node, scope) ? node : sentinel;
-      let nextNode = walker.nextNode() as HTMLElement;
+      let nextNode = walker.nextNode() as FocusableElement;
       if (!nextNode && wrap) {
         walker.currentNode = sentinel;
-        nextNode = walker.nextNode() as HTMLElement;
+        nextNode = walker.nextNode() as FocusableElement;
       }
       if (nextNode) {
         focusElement(nextNode, true);
@@ -162,15 +165,15 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
     },
     focusPrevious(opts: FocusManagerOptions = {}) {
       let scope = scopeRef.current;
-      let {from, tabbable, wrap} = opts;
+      let {from, tabbable, wrap, accept} = opts;
       let node = from || document.activeElement;
       let sentinel = scope[scope.length - 1].nextElementSibling;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = isElementInScope(node, scope) ? node : sentinel;
-      let previousNode = walker.previousNode() as HTMLElement;
+      let previousNode = walker.previousNode() as FocusableElement;
       if (!previousNode && wrap) {
         walker.currentNode = sentinel;
-        previousNode = walker.previousNode() as HTMLElement;
+        previousNode = walker.previousNode() as FocusableElement;
       }
       if (previousNode) {
         focusElement(previousNode, true);
@@ -179,10 +182,10 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
     },
     focusFirst(opts = {}) {
       let scope = scopeRef.current;
-      let {tabbable} = opts;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let {tabbable, accept} = opts;
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = scope[0].previousElementSibling;
-      let nextNode = walker.nextNode() as HTMLElement;
+      let nextNode = walker.nextNode() as FocusableElement;
       if (nextNode) {
         focusElement(nextNode, true);
       }
@@ -190,10 +193,10 @@ function createFocusManagerForScope(scopeRef: React.RefObject<HTMLElement[]>): F
     },
     focusLast(opts = {}) {
       let scope = scopeRef.current;
-      let {tabbable} = opts;
-      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable}, scope);
+      let {tabbable, accept} = opts;
+      let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable, accept}, scope);
       walker.currentNode = scope[scope.length - 1].nextElementSibling;
-      let previousNode = walker.previousNode() as HTMLElement;
+      let previousNode = walker.previousNode() as FocusableElement;
       if (previousNode) {
         focusElement(previousNode, true);
       }
@@ -223,17 +226,22 @@ const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + '
 focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
-function getScopeRoot(scope: HTMLElement[]) {
+function getScopeRoot(scope: Element[]) {
   return scope[0].parentElement;
 }
 
-function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolean) {
-  let focusedNode = useRef<HTMLElement>();
+function useFocusContainment(scopeRef: RefObject<Element[]>, contain: boolean) {
+  let focusedNode = useRef<FocusableElement>();
 
   let raf = useRef(null);
   useLayoutEffect(() => {
     let scope = scopeRef.current;
     if (!contain) {
+      // if contain was changed, then we should cancel any ongoing waits to pull focus back into containment
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+        raf.current = null;
+      }
       return;
     }
 
@@ -243,7 +251,7 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
         return;
       }
 
-      let focusedElement = document.activeElement as HTMLElement;
+      let focusedElement = document.activeElement;
       let scope = scopeRef.current;
       if (!isElementInScope(focusedElement, scope)) {
         return;
@@ -251,10 +259,10 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
 
       let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable: true}, scope);
       walker.currentNode = focusedElement;
-      let nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as HTMLElement;
+      let nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as FocusableElement;
       if (!nextElement) {
         walker.currentNode = e.shiftKey ? scope[scope.length - 1].nextElementSibling : scope[0].previousElementSibling;
-        nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode())  as HTMLElement;
+        nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode())  as FocusableElement;
       }
 
       e.preventDefault();
@@ -308,7 +316,11 @@ function useFocusContainment(scopeRef: RefObject<HTMLElement[]>, contain: boolea
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
-    return () => cancelAnimationFrame(raf.current);
+    return () => {
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+      }
+    };
   }, [raf]);
 }
 
@@ -321,7 +333,7 @@ function isElementInAnyScope(element: Element) {
   return false;
 }
 
-function isElementInScope(element: Element, scope: HTMLElement[]) {
+function isElementInScope(element: Element, scope: Element[]) {
   return scope.some(node => node.contains(element));
 }
 
@@ -350,7 +362,7 @@ function isAncestorScope(ancestor: ScopeRef, scope: ScopeRef) {
   return isAncestorScope(ancestor, parent);
 }
 
-function focusElement(element: HTMLElement | null, scroll = false) {
+function focusElement(element: FocusableElement | null, scroll = false) {
   if (element != null && !scroll) {
     try {
       focusSafely(element);
@@ -366,14 +378,14 @@ function focusElement(element: HTMLElement | null, scroll = false) {
   }
 }
 
-function focusFirstInScope(scope: HTMLElement[]) {
+function focusFirstInScope(scope: Element[]) {
   let sentinel = scope[0].previousElementSibling;
   let walker = getFocusableTreeWalker(getScopeRoot(scope), {tabbable: true}, scope);
   walker.currentNode = sentinel;
-  focusElement(walker.nextNode() as HTMLElement);
+  focusElement(walker.nextNode() as FocusableElement);
 }
 
-function useAutoFocus(scopeRef: RefObject<HTMLElement[]>, autoFocus: boolean) {
+function useAutoFocus(scopeRef: RefObject<Element[]>, autoFocus: boolean) {
   const autoFocusRef = React.useRef(autoFocus);
   useEffect(() => {
     if (autoFocusRef.current) {
@@ -386,9 +398,9 @@ function useAutoFocus(scopeRef: RefObject<HTMLElement[]>, autoFocus: boolean) {
   }, []);
 }
 
-function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boolean, contain: boolean) {
+function useRestoreFocus(scopeRef: RefObject<Element[]>, 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.
-  const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? document.activeElement as HTMLElement : null);
+  const nodeToRestoreRef = useRef(typeof document !== 'undefined' ? document.activeElement as FocusableElement : null);
 
   // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
   useLayoutEffect(() => {
@@ -406,7 +418,7 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
         return;
       }
 
-      let focusedElement = document.activeElement as HTMLElement;
+      let focusedElement = document.activeElement as FocusableElement;
       if (!isElementInScope(focusedElement, scopeRef.current)) {
         return;
       }
@@ -416,7 +428,7 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
 
       // Find the next tabbable element after the currently focused element
       walker.currentNode = focusedElement;
-      let nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as HTMLElement;
+      let nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as FocusableElement;
 
       if (!document.body.contains(nodeToRestore) || nodeToRestore === document.body) {
         nodeToRestore = null;
@@ -429,7 +441,7 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
 
         // Skip over elements within the scope, in case the scope immediately follows the node to restore.
         do {
-          nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as HTMLElement;
+          nextElement = (e.shiftKey ? walker.previousNode() : walker.nextNode()) as FocusableElement;
         } while (isElementInScope(nextElement, scopeRef.current));
 
         e.preventDefault();
@@ -460,7 +472,8 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
 
       if (restoreFocus && nodeToRestore && isElementInScope(document.activeElement, scopeRef.current)) {
         requestAnimationFrame(() => {
-          if (document.body.contains(nodeToRestore)) {
+          // Only restore focus if we've lost focus to the body, the alternative is that focus has been purposefully moved elsewhere
+          if (document.body.contains(nodeToRestore) && document.activeElement === document.body) {
             focusElement(nodeToRestore);
           }
         });
@@ -473,7 +486,7 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
  * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
  * that matches all focusable/tabbable elements.
  */
-export function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOptions, scope?: HTMLElement[]) {
+export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]) {
   let selector = opts?.tabbable ? TABBABLE_ELEMENT_SELECTOR : FOCUSABLE_ELEMENT_SELECTOR;
   let walker = document.createTreeWalker(
     root,
@@ -485,9 +498,11 @@ export function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOpt
           return NodeFilter.FILTER_REJECT;
         }
 
-        if ((node as HTMLElement).matches(selector)
-          && isElementVisible(node as HTMLElement)
-          && (!scope || isElementInScope(node as HTMLElement, scope))) {
+        if ((node as Element).matches(selector)
+          && isElementVisible(node as Element)
+          && (!scope || isElementInScope(node as Element, scope))
+          && (!opts?.accept || opts.accept(node as Element))
+        ) {
           return NodeFilter.FILTER_ACCEPT;
         }
 
@@ -506,31 +521,37 @@ export function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOpt
 /**
  * Creates a FocusManager object that can be used to move focus within an element.
  */
-export function createFocusManager(ref: RefObject<HTMLElement>): FocusManager {
+export function createFocusManager(ref: RefObject<Element>, defaultOptions: FocusManagerOptions = {}): FocusManager {
   return {
     focusNext(opts: FocusManagerOptions = {}) {
       let root = ref.current;
-      let {from, tabbable, wrap} = opts;
+      if (!root) {
+        return;
+      }
+      let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
       let node = from || document.activeElement;
-      let walker = getFocusableTreeWalker(root, {tabbable});
+      let walker = getFocusableTreeWalker(root, {tabbable, accept});
       if (root.contains(node)) {
         walker.currentNode = node;
       }
-      let nextNode = walker.nextNode() as HTMLElement;
+      let nextNode = walker.nextNode() as FocusableElement;
       if (!nextNode && wrap) {
         walker.currentNode = root;
-        nextNode = walker.nextNode() as HTMLElement;
+        nextNode = walker.nextNode() as FocusableElement;
       }
       if (nextNode) {
         focusElement(nextNode, true);
       }
       return nextNode;
     },
-    focusPrevious(opts: FocusManagerOptions = {}) {
+    focusPrevious(opts: FocusManagerOptions = defaultOptions) {
       let root = ref.current;
-      let {from, tabbable, wrap} = opts;
+      if (!root) {
+        return;
+      }
+      let {from, tabbable = defaultOptions.tabbable, wrap = defaultOptions.wrap, accept = defaultOptions.accept} = opts;
       let node = from || document.activeElement;
-      let walker = getFocusableTreeWalker(root, {tabbable});
+      let walker = getFocusableTreeWalker(root, {tabbable, accept});
       if (root.contains(node)) {
         walker.currentNode = node;
       } else {
@@ -540,7 +561,7 @@ export function createFocusManager(ref: RefObject<HTMLElement>): FocusManager {
         }
         return next;
       }
-      let previousNode = walker.previousNode() as HTMLElement;
+      let previousNode = walker.previousNode() as FocusableElement;
       if (!previousNode && wrap) {
         walker.currentNode = root;
         previousNode = last(walker);
@@ -550,20 +571,26 @@ export function createFocusManager(ref: RefObject<HTMLElement>): FocusManager {
       }
       return previousNode;
     },
-    focusFirst(opts = {}) {
+    focusFirst(opts = defaultOptions) {
       let root = ref.current;
-      let {tabbable} = opts;
-      let walker = getFocusableTreeWalker(root, {tabbable});
-      let nextNode = walker.nextNode() as HTMLElement;
+      if (!root) {
+        return;
+      }
+      let {tabbable = defaultOptions.tabbable, accept = defaultOptions.accept} = opts;
+      let walker = getFocusableTreeWalker(root, {tabbable, accept});
+      let nextNode = walker.nextNode() as FocusableElement;
       if (nextNode) {
         focusElement(nextNode, true);
       }
       return nextNode;
     },
-    focusLast(opts = {}) {
+    focusLast(opts = defaultOptions) {
       let root = ref.current;
-      let {tabbable} = opts;
-      let walker = getFocusableTreeWalker(root, {tabbable});
+      if (!root) {
+        return;
+      }
+      let {tabbable = defaultOptions.tabbable, accept = defaultOptions.accept} = opts;
+      let walker = getFocusableTreeWalker(root, {tabbable, accept});
       let next = last(walker);
       if (next) {
         focusElement(next, true);
@@ -574,10 +601,10 @@ export function createFocusManager(ref: RefObject<HTMLElement>): FocusManager {
 }
 
 function last(walker: TreeWalker) {
-  let next: HTMLElement;
-  let last: HTMLElement;
+  let next: FocusableElement;
+  let last: FocusableElement;
   do {
-    last = walker.lastChild() as HTMLElement;
+    last = walker.lastChild() as FocusableElement;
     if (last) {
       next = last;
     }

package/src/focusSafely.ts

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {FocusableElement} from '@react-types/shared';
 import {focusWithoutScrolling, runAfterTransition} from '@react-aria/utils';
 import {getInteractionModality} from '@react-aria/interactions';
 
@@ -17,7 +18,7 @@ import {getInteractionModality} from '@react-aria/interactions';
  * A utility function that focuses an element while avoiding undesired side effects such
  * as page scrolling and screen reader issues with CSS transitions.
  */
-export function focusSafely(element: HTMLElement) {
+export function focusSafely(element: FocusableElement) {
   // 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

package/src/index.ts

@@ -10,8 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './FocusScope';
-export * from './FocusRing';
-export * from './useFocusable';
-export * from './useFocusRing';
-export * from './focusSafely';
+export {FocusScope, useFocusManager, getFocusableTreeWalker, createFocusManager} from './FocusScope';
+export {FocusRing} from './FocusRing';
+export {FocusableProvider, useFocusable} from './useFocusable';
+export {useFocusRing} from './useFocusRing';
+export {focusSafely} from './focusSafely';
+
+export type {FocusScopeProps, FocusManager, FocusManagerOptions} from './FocusScope';
+export type {FocusRingProps} from './FocusRing';
+export type {FocusableAria, FocusableOptions, FocusableProviderProps} from './useFocusable';
+export type {AriaFocusRingProps, FocusRingAria} from './useFocusRing';