@react-aria/focus 3.5.5 → 3.7.0

package/src/useFocusRing.ts

@@ -1,8 +1,9 @@
-import {HTMLAttributes, useState} from 'react';
+import {DOMAttributes} from '@react-types/shared';
 import {isFocusVisible, useFocus, useFocusVisibleListener, useFocusWithin} from '@react-aria/interactions';
+import {useCallback, useState} from 'react';
 import {useRef} from 'react';
 
-interface FocusRingProps {
+export interface AriaFocusRingProps {
   /**
    * Whether to show the focus ring when something
    * inside the container element has focus (true), or
@@ -18,7 +19,7 @@ interface FocusRingProps {
   autoFocus?: boolean
 }
 
-interface FocusRingAria {
+export interface FocusRingAria {
   /** Whether the element is currently focused. */
   isFocused: boolean,
 
@@ -26,7 +27,7 @@ interface FocusRingAria {
   isFocusVisible: boolean,
 
   /** Props to apply to the container element with the focus ring. */
-  focusProps: HTMLAttributes<HTMLElement>
+  focusProps: DOMAttributes
 }
 
 /**
@@ -34,7 +35,7 @@ interface FocusRingAria {
  * 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 {
+export function useFocusRing(props: AriaFocusRingProps = {}): FocusRingAria {
   let {
     autoFocus = false,
     isTextInput,
@@ -43,20 +44,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 +73,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

@@ -10,29 +10,29 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusableDOMProps, FocusableProps} from '@react-types/shared';
+import {DOMAttributes, FocusableDOMProps, FocusableElement, 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 React, {MutableRefObject, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
 import {useFocus, useKeyboard} from '@react-aria/interactions';
 
-interface FocusableOptions extends FocusableProps, FocusableDOMProps {
+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
 }
 
 interface FocusableContextValue extends FocusableProviderProps {
-  ref?: MutableRefObject<HTMLElement>
+  ref?: MutableRefObject<FocusableElement>
 }
 
 let FocusableContext = React.createContext<FocusableContextValue>(null);
 
-function useFocusableContext(ref: RefObject<HTMLElement>): FocusableContextValue {
+function useFocusableContext(ref: RefObject<FocusableElement>): FocusableContextValue {
   let context = useContext(FocusableContext) || {};
   useSyncRef(context, ref);
 
@@ -44,7 +44,7 @@ function useFocusableContext(ref: RefObject<HTMLElement>): FocusableContextValue
 /**
  * Provides DOM props to the nearest focusable child.
  */
-function FocusableProvider(props: FocusableProviderProps, ref: RefObject<HTMLElement>) {
+function FocusableProvider(props: FocusableProviderProps, ref: RefObject<FocusableElement>) {
   let {children, ...otherProps} = props;
   let context = {
     ...otherProps,
@@ -61,15 +61,15 @@ function FocusableProvider(props: FocusableProviderProps, ref: RefObject<HTMLEle
 let _FocusableProvider = React.forwardRef(FocusableProvider);
 export {_FocusableProvider as FocusableProvider};
 
-interface FocusableAria {
+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 {
   let {focusProps} = useFocus(props);
   let {keyboardProps} = useKeyboard(props);
   let interactions = mergeProps(focusProps, keyboardProps);