@react-aria/focus 3.5.4 → 3.6.1

package/src/FocusScope.tsx

@@ -44,7 +44,9 @@ interface FocusManagerOptions {
   /** 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 {
@@ -487,7 +489,9 @@ export function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOpt
 
         if ((node as HTMLElement).matches(selector)
           && isElementVisible(node as HTMLElement)
-          && (!scope || isElementInScope(node as HTMLElement, scope))) {
+          && (!scope || isElementInScope(node as HTMLElement, scope))
+          && (!opts?.accept || opts.accept(node as Element))
+        ) {
           return NodeFilter.FILTER_ACCEPT;
         }
 
@@ -506,13 +510,16 @@ 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<HTMLElement>, 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;
       }
@@ -526,11 +533,14 @@ export function createFocusManager(ref: RefObject<HTMLElement>): FocusManager {
       }
       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 {
@@ -550,20 +560,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});
+      if (!root) {
+        return;
+      }
+      let {tabbable = defaultOptions.tabbable, accept = defaultOptions.accept} = opts;
+      let walker = getFocusableTreeWalker(root, {tabbable, accept});
       let nextNode = walker.nextNode() as HTMLElement;
       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);

package/src/useFocusRing.ts

@@ -1,4 +1,4 @@
-import {HTMLAttributes, useState} from 'react';
+import {HTMLAttributes, useCallback, useState} from 'react';
 import {isFocusVisible, useFocus, useFocusVisibleListener, useFocusWithin} from '@react-aria/interactions';
 import {useRef} from 'react';
 
@@ -43,20 +43,20 @@ export function useFocusRing(props: FocusRingProps = {}): FocusRingAria {
   let state = useRef({
     isFocused: false,
     isFocusVisible: autoFocus || isFocusVisible()
-  }).current;
+  });
   let [isFocused, setFocused] = useState(false);
-  let [isFocusVisibleState, setFocusVisible] = useState(() => state.isFocused && state.isFocusVisible);
+  let [isFocusVisibleState, setFocusVisible] = useState(() => state.current.isFocused && state.current.isFocusVisible);
 
-  let updateState = () => setFocusVisible(state.isFocused && state.isFocusVisible);
+  let updateState = useCallback(() => setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
 
-  let onFocusChange = isFocused => {
-    state.isFocused = isFocused;
+  let onFocusChange = useCallback(isFocused => {
+    state.current.isFocused = isFocused;
     setFocused(isFocused);
     updateState();
-  };
+  }, [updateState]);
 
   useFocusVisibleListener((isFocusVisible) => {
-    state.isFocusVisible = isFocusVisible;
+    state.current.isFocusVisible = isFocusVisible;
     updateState();
   }, [], {isTextInput});
 
@@ -72,7 +72,7 @@ export function useFocusRing(props: FocusRingProps = {}): FocusRingAria {
 
   return {
     isFocused,
-    isFocusVisible: state.isFocused && isFocusVisibleState,
+    isFocusVisible: state.current.isFocused && isFocusVisibleState,
     focusProps: within ? focusWithinProps : focusProps
   };
 }

package/src/useFocusable.tsx

@@ -11,6 +11,7 @@
  */
 
 import {FocusableDOMProps, FocusableProps} from '@react-types/shared';
+import {focusSafely} from './';
 import {mergeProps, useSyncRef} from '@react-aria/utils';
 import React, {HTMLAttributes, MutableRefObject, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
 import {useFocus, useKeyboard} from '@react-aria/interactions';
@@ -60,10 +61,15 @@ function FocusableProvider(props: FocusableProviderProps, ref: RefObject<HTMLEle
 let _FocusableProvider = React.forwardRef(FocusableProvider);
 export {_FocusableProvider as FocusableProvider};
 
+interface FocusableAria {
+  /** Props for the focusable element. */
+  focusableProps: HTMLAttributes<HTMLElement>
+}
+
 /**
  * Used to make an element focusable and capable of auto focus.
  */
-export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElement>) {
+export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElement>): FocusableAria {
   let {focusProps} = useFocus(props);
   let {keyboardProps} = useKeyboard(props);
   let interactions = mergeProps(focusProps, keyboardProps);
@@ -73,10 +79,10 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
 
   useEffect(() => {
     if (autoFocusRef.current && domRef.current) {
-      domRef.current.focus();
+      focusSafely(domRef.current);
     }
     autoFocusRef.current = false;
-  }, []);
+  }, [domRef]);
 
   return {
     focusableProps: mergeProps(