@react-aria/focus 3.6.0 → 3.8.0

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';

package/src/useFocusRing.ts

@@ -1,8 +1,9 @@
-import {HTMLAttributes, useCallback, 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,

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);