@react-aria/focus 3.5.0 → 3.5.3

package/dist/types.d.ts

@@ -29,7 +29,7 @@ interface FocusManagerOptions {
     /** Whether focus should wrap around when it reaches the end of the scope. */
     wrap?: boolean;
 }
-interface FocusManager {
+export interface FocusManager {
     /** Moves focus to the next focusable or tabbable element in the focus scope. */
     focusNext(opts?: FocusManagerOptions): HTMLElement;
     /** Moves focus to the previous focusable or tabbable element in the focus scope. */
@@ -113,7 +113,7 @@ 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 | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export function FocusRing(props: _FocusRingProps1): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 interface FocusableOptions extends FocusableProps, FocusableDOMProps {
     /** Whether focus should be disabled. */
     isDisabled?: boolean;
@@ -138,7 +138,7 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
         suppressHydrationWarning?: boolean;
         accessKey?: string;
         className?: string;
-        contentEditable?: boolean | "inherit" | "false" | "true";
+        contentEditable?: "inherit" | (boolean | "false" | "true");
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "false" | "true";
@@ -150,9 +150,9 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
         spellCheck?: boolean | "false" | "true";
         style?: React.CSSProperties;
         title?: string;
-        translate?: "no" | "yes";
+        translate?: "yes" | "no";
         radioGroup?: string;
-        role?: string;
+        role?: React.AriaRole;
         about?: string;
         datatype?: string;
         inlist?: any;
@@ -173,18 +173,18 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
         results?: number;
         security?: string;
         unselectable?: "on" | "off";
-        inputMode?: "search" | "none" | "text" | "decimal" | "numeric" | "tel" | "url" | "email";
+        inputMode?: "search" | "numeric" | "none" | "url" | "text" | "tel" | "email" | "decimal";
         is?: string;
         'aria-activedescendant'?: string;
         'aria-atomic'?: boolean | "false" | "true";
-        'aria-autocomplete'?: "both" | "none" | "inline" | "list";
+        'aria-autocomplete'?: "inline" | "both" | "none" | "list";
         'aria-busy'?: boolean | "false" | "true";
         'aria-checked'?: boolean | "mixed" | "false" | "true";
         'aria-colcount'?: number;
         'aria-colindex'?: number;
         'aria-colspan'?: number;
         'aria-controls'?: string;
-        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+        'aria-current'?: boolean | "location" | "time" | "page" | "false" | "true" | "step" | "date";
         'aria-describedby'?: string;
         'aria-details'?: string;
         'aria-disabled'?: boolean | "false" | "true";
@@ -193,7 +193,7 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
         'aria-expanded'?: boolean | "false" | "true";
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "false" | "true";
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree";
         'aria-hidden'?: boolean | "false" | "true";
         'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
         'aria-keyshortcuts'?: string;
@@ -218,7 +218,7 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
         'aria-rowspan'?: number;
         'aria-selected'?: boolean | "false" | "true";
         'aria-setsize'?: number;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other";
+        'aria-sort'?: "none" | "other" | "ascending" | "descending";
         'aria-valuemax'?: number;
         'aria-valuemin'?: number;
         'aria-valuenow'?: number;
@@ -227,166 +227,166 @@ export function useFocusable(props: FocusableOptions, domRef: RefObject<HTMLElem
         dangerouslySetInnerHTML?: {
             __html: string;
         };
-        onCopy?: (event: React.ClipboardEvent<HTMLElement>) => void;
-        onCopyCapture?: (event: React.ClipboardEvent<HTMLElement>) => void;
-        onCut?: (event: React.ClipboardEvent<HTMLElement>) => void;
-        onCutCapture?: (event: React.ClipboardEvent<HTMLElement>) => void;
-        onPaste?: (event: React.ClipboardEvent<HTMLElement>) => void;
-        onPasteCapture?: (event: React.ClipboardEvent<HTMLElement>) => void;
-        onCompositionEnd?: (event: React.CompositionEvent<HTMLElement>) => void;
-        onCompositionEndCapture?: (event: React.CompositionEvent<HTMLElement>) => void;
-        onCompositionStart?: (event: React.CompositionEvent<HTMLElement>) => void;
-        onCompositionStartCapture?: (event: React.CompositionEvent<HTMLElement>) => void;
-        onCompositionUpdate?: (event: React.CompositionEvent<HTMLElement>) => void;
-        onCompositionUpdateCapture?: (event: React.CompositionEvent<HTMLElement>) => void;
-        onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
-        onFocusCapture?: (event: React.FocusEvent<HTMLElement>) => void;
-        onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-        onBlurCapture?: (event: React.FocusEvent<HTMLElement>) => void;
-        onChange?: (event: React.FormEvent<HTMLElement>) => void;
-        onChangeCapture?: (event: React.FormEvent<HTMLElement>) => void;
-        onBeforeInput?: (event: React.FormEvent<HTMLElement>) => void;
-        onBeforeInputCapture?: (event: React.FormEvent<HTMLElement>) => void;
-        onInput?: (event: React.FormEvent<HTMLElement>) => void;
-        onInputCapture?: (event: React.FormEvent<HTMLElement>) => void;
-        onReset?: (event: React.FormEvent<HTMLElement>) => void;
-        onResetCapture?: (event: React.FormEvent<HTMLElement>) => void;
-        onSubmit?: (event: React.FormEvent<HTMLElement>) => void;
-        onSubmitCapture?: (event: React.FormEvent<HTMLElement>) => void;
-        onInvalid?: (event: React.FormEvent<HTMLElement>) => void;
-        onInvalidCapture?: (event: React.FormEvent<HTMLElement>) => void;
-        onLoad?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onError?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onErrorCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-        onKeyDownCapture?: (event: React.KeyboardEvent<HTMLElement>) => void;
-        onKeyPress?: (event: React.KeyboardEvent<HTMLElement>) => void;
-        onKeyPressCapture?: (event: React.KeyboardEvent<HTMLElement>) => void;
-        onKeyUp?: (event: React.KeyboardEvent<HTMLElement>) => void;
-        onKeyUpCapture?: (event: React.KeyboardEvent<HTMLElement>) => void;
-        onAbort?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onAbortCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onCanPlay?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onCanPlayCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onCanPlayThrough?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onCanPlayThroughCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onDurationChange?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onDurationChangeCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onEmptied?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onEmptiedCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onEncrypted?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onEncryptedCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onEnded?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onEndedCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadedData?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadedDataCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadedMetadata?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadedMetadataCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadStart?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onLoadStartCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onPause?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onPauseCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onPlay?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onPlayCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onPlaying?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onPlayingCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onProgress?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onProgressCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onRateChange?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onRateChangeCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSeeked?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSeekedCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSeeking?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSeekingCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onStalled?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onStalledCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSuspend?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSuspendCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onTimeUpdate?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onTimeUpdateCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onVolumeChange?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onVolumeChangeCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onWaiting?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onWaitingCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onAuxClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onAuxClickCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onClickCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onContextMenu?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onContextMenuCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onDoubleClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onDoubleClickCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onDrag?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragEnd?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragEndCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragEnter?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragEnterCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragExit?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragExitCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragLeave?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragLeaveCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragOver?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragOverCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragStart?: (event: React.DragEvent<HTMLElement>) => void;
-        onDragStartCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onDrop?: (event: React.DragEvent<HTMLElement>) => void;
-        onDropCapture?: (event: React.DragEvent<HTMLElement>) => void;
-        onMouseDown?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseDownCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseMove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseMoveCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseOut?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseOutCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseOver?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseOverCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseUp?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onMouseUpCapture?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        onSelect?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onSelectCapture?: (event: React.SyntheticEvent<HTMLElement, Event>) => void;
-        onTouchCancel?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchCancelCapture?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchEnd?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchEndCapture?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchMove?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchMoveCapture?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchStart?: (event: React.TouchEvent<HTMLElement>) => void;
-        onTouchStartCapture?: (event: React.TouchEvent<HTMLElement>) => void;
-        onPointerDown?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerDownCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerMove?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerMoveCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerUp?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerUpCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerCancel?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerCancelCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerEnter?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerEnterCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerLeave?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerLeaveCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerOver?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerOverCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerOut?: (event: React.PointerEvent<HTMLElement>) => void;
-        onPointerOutCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onGotPointerCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onGotPointerCaptureCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onLostPointerCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onLostPointerCaptureCapture?: (event: React.PointerEvent<HTMLElement>) => void;
-        onScroll?: (event: React.UIEvent<HTMLElement, UIEvent>) => void;
-        onScrollCapture?: (event: React.UIEvent<HTMLElement, UIEvent>) => void;
-        onWheel?: (event: React.WheelEvent<HTMLElement>) => void;
-        onWheelCapture?: (event: React.WheelEvent<HTMLElement>) => void;
-        onAnimationStart?: (event: React.AnimationEvent<HTMLElement>) => void;
-        onAnimationStartCapture?: (event: React.AnimationEvent<HTMLElement>) => void;
-        onAnimationEnd?: (event: React.AnimationEvent<HTMLElement>) => void;
-        onAnimationEndCapture?: (event: React.AnimationEvent<HTMLElement>) => void;
-        onAnimationIteration?: (event: React.AnimationEvent<HTMLElement>) => void;
-        onAnimationIterationCapture?: (event: React.AnimationEvent<HTMLElement>) => void;
-        onTransitionEnd?: (event: React.TransitionEvent<HTMLElement>) => void;
-        onTransitionEndCapture?: (event: React.TransitionEvent<HTMLElement>) => void;
+        onCopy?: React.ClipboardEventHandler<HTMLElement>;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
+        onCut?: React.ClipboardEventHandler<HTMLElement>;
+        onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
+        onPaste?: React.ClipboardEventHandler<HTMLElement>;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
+        onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
+        onFocus?: React.FocusEventHandler<HTMLElement>;
+        onFocusCapture?: React.FocusEventHandler<HTMLElement>;
+        onBlur?: React.FocusEventHandler<HTMLElement>;
+        onBlurCapture?: React.FocusEventHandler<HTMLElement>;
+        onChange?: React.FormEventHandler<HTMLElement>;
+        onChangeCapture?: React.FormEventHandler<HTMLElement>;
+        onBeforeInput?: React.FormEventHandler<HTMLElement>;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
+        onInput?: React.FormEventHandler<HTMLElement>;
+        onInputCapture?: React.FormEventHandler<HTMLElement>;
+        onReset?: React.FormEventHandler<HTMLElement>;
+        onResetCapture?: React.FormEventHandler<HTMLElement>;
+        onSubmit?: React.FormEventHandler<HTMLElement>;
+        onSubmitCapture?: React.FormEventHandler<HTMLElement>;
+        onInvalid?: React.FormEventHandler<HTMLElement>;
+        onInvalidCapture?: React.FormEventHandler<HTMLElement>;
+        onLoad?: React.ReactEventHandler<HTMLElement>;
+        onLoadCapture?: React.ReactEventHandler<HTMLElement>;
+        onError?: React.ReactEventHandler<HTMLElement>;
+        onErrorCapture?: React.ReactEventHandler<HTMLElement>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
+        onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
+        onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
+        onAbort?: React.ReactEventHandler<HTMLElement>;
+        onAbortCapture?: React.ReactEventHandler<HTMLElement>;
+        onCanPlay?: React.ReactEventHandler<HTMLElement>;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
+        onDurationChange?: React.ReactEventHandler<HTMLElement>;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
+        onEmptied?: React.ReactEventHandler<HTMLElement>;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
+        onEncrypted?: React.ReactEventHandler<HTMLElement>;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
+        onEnded?: React.ReactEventHandler<HTMLElement>;
+        onEndedCapture?: React.ReactEventHandler<HTMLElement>;
+        onLoadedData?: React.ReactEventHandler<HTMLElement>;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
+        onLoadStart?: React.ReactEventHandler<HTMLElement>;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
+        onPause?: React.ReactEventHandler<HTMLElement>;
+        onPauseCapture?: React.ReactEventHandler<HTMLElement>;
+        onPlay?: React.ReactEventHandler<HTMLElement>;
+        onPlayCapture?: React.ReactEventHandler<HTMLElement>;
+        onPlaying?: React.ReactEventHandler<HTMLElement>;
+        onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
+        onProgress?: React.ReactEventHandler<HTMLElement>;
+        onProgressCapture?: React.ReactEventHandler<HTMLElement>;
+        onRateChange?: React.ReactEventHandler<HTMLElement>;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
+        onSeeked?: React.ReactEventHandler<HTMLElement>;
+        onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
+        onSeeking?: React.ReactEventHandler<HTMLElement>;
+        onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
+        onStalled?: React.ReactEventHandler<HTMLElement>;
+        onStalledCapture?: React.ReactEventHandler<HTMLElement>;
+        onSuspend?: React.ReactEventHandler<HTMLElement>;
+        onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
+        onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
+        onVolumeChange?: React.ReactEventHandler<HTMLElement>;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
+        onWaiting?: React.ReactEventHandler<HTMLElement>;
+        onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
+        onAuxClick?: React.MouseEventHandler<HTMLElement>;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
+        onClick?: React.MouseEventHandler<HTMLElement>;
+        onClickCapture?: React.MouseEventHandler<HTMLElement>;
+        onContextMenu?: React.MouseEventHandler<HTMLElement>;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
+        onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
+        onDrag?: React.DragEventHandler<HTMLElement>;
+        onDragCapture?: React.DragEventHandler<HTMLElement>;
+        onDragEnd?: React.DragEventHandler<HTMLElement>;
+        onDragEndCapture?: React.DragEventHandler<HTMLElement>;
+        onDragEnter?: React.DragEventHandler<HTMLElement>;
+        onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
+        onDragExit?: React.DragEventHandler<HTMLElement>;
+        onDragExitCapture?: React.DragEventHandler<HTMLElement>;
+        onDragLeave?: React.DragEventHandler<HTMLElement>;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
+        onDragOver?: React.DragEventHandler<HTMLElement>;
+        onDragOverCapture?: React.DragEventHandler<HTMLElement>;
+        onDragStart?: React.DragEventHandler<HTMLElement>;
+        onDragStartCapture?: React.DragEventHandler<HTMLElement>;
+        onDrop?: React.DragEventHandler<HTMLElement>;
+        onDropCapture?: React.DragEventHandler<HTMLElement>;
+        onMouseDown?: React.MouseEventHandler<HTMLElement>;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
+        onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+        onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+        onMouseMove?: React.MouseEventHandler<HTMLElement>;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
+        onMouseOut?: React.MouseEventHandler<HTMLElement>;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
+        onMouseOver?: React.MouseEventHandler<HTMLElement>;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
+        onMouseUp?: React.MouseEventHandler<HTMLElement>;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
+        onSelect?: React.ReactEventHandler<HTMLElement>;
+        onSelectCapture?: React.ReactEventHandler<HTMLElement>;
+        onTouchCancel?: React.TouchEventHandler<HTMLElement>;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
+        onTouchEnd?: React.TouchEventHandler<HTMLElement>;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
+        onTouchMove?: React.TouchEventHandler<HTMLElement>;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
+        onTouchStart?: React.TouchEventHandler<HTMLElement>;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
+        onPointerDown?: React.PointerEventHandler<HTMLElement>;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerMove?: React.PointerEventHandler<HTMLElement>;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerUp?: React.PointerEventHandler<HTMLElement>;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerCancel?: React.PointerEventHandler<HTMLElement>;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerOver?: React.PointerEventHandler<HTMLElement>;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
+        onPointerOut?: React.PointerEventHandler<HTMLElement>;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+        onScroll?: React.UIEventHandler<HTMLElement>;
+        onScrollCapture?: React.UIEventHandler<HTMLElement>;
+        onWheel?: React.WheelEventHandler<HTMLElement>;
+        onWheelCapture?: React.WheelEventHandler<HTMLElement>;
+        onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
     };
 };
 

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"A;A;AAeA;A;A;GAGG;AACH,4BAA4B,OAAO,EAAE,WAAW,QAiB/C;AEhBD;IACE,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IAEpB;A;A;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;A;A;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;A;A;A;A;A;GAMG;AACH,2BAA2B,KAAK,EAAE,eAAe,eAiDhD;AAED;A;A;A;GAIG;AACH,mCAAmC,YAAY,CAE9C;AAyUD;A;A;GAGG;AACH,uCAAuC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,mBAAmB,EAAE,KAAK,CAAC,EAAE,WAAW,EAAE,cA4B1G;AAED;A;GAEG;AACH,mCAAmC,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,YAAY,CAiE5E;ACxjBD;IACE;A;A;A;A;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;A;A;A;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;A;A;A;A;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;A;A;A;GAIG;AACH,0BAA0B,KAAK,EAAE,gBAAc,2MAY9C;ACrCD,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;AAED,+BAAgC,SAAQ,sBAAsB;IAC5D,GAAG,CAAC,EAAE,iBAAiB,WAAW,CAAC,CAAA;CACpC;AA8BD,OAAA,IAAI,6GAAwD,CAAC;AAG7D;A;GAEG;AACH,6BAA6B,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,WAAW,CAAC;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;A;EAwBnF","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"],"sourcesContent":[null,null,null,null,null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/focus",
-  "version": "3.5.0",
+  "version": "3.5.3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/interactions": "^3.6.0",
-    "@react-aria/utils": "^3.9.0",
-    "@react-types/shared": "^3.9.0",
+    "@react-aria/interactions": "^3.8.2",
+    "@react-aria/utils": "^3.11.3",
+    "@react-types/shared": "^3.11.2",
     "clsx": "^1.1.1"
   },
   "peerDependencies": {
@@ -29,5 +29,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb6c352a42ca230774b923cc0bde692d206e0999"
+  "gitHead": "ed8d8d984c2f7f2c31e8b18795b97858a95e4729"
 }

package/src/FocusScope.tsx

@@ -47,7 +47,7 @@ interface FocusManagerOptions {
   wrap?: boolean
 }
 
-interface FocusManager {
+export interface FocusManager {
   /** Moves focus to the next focusable or tabbable element in the focus scope. */
   focusNext(opts?: FocusManagerOptions): HTMLElement,
   /** Moves focus to the previous focusable or tabbable element in the focus scope. */
@@ -387,15 +387,16 @@ function useAutoFocus(scopeRef: RefObject<HTMLElement[]>, autoFocus: boolean) {
 }
 
 function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, 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);
+
   // useLayoutEffect instead of useEffect so the active element is saved synchronously instead of asynchronously.
   useLayoutEffect(() => {
+    let nodeToRestore = nodeToRestoreRef.current;
     if (!restoreFocus) {
       return;
     }
 
-    let scope = scopeRef.current;
-    let nodeToRestore = document.activeElement as HTMLElement;
-
     // Handle the Tab key so that tabbing out of the scope goes to the next element
     // after the node that had focus when the scope mounted. This is important when
     // using portals for overlays, so that focus goes to the expected element when
@@ -406,7 +407,7 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
       }
 
       let focusedElement = document.activeElement as HTMLElement;
-      if (!isElementInScope(focusedElement, scope)) {
+      if (!isElementInScope(focusedElement, scopeRef.current)) {
         return;
       }
 
@@ -423,13 +424,13 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
 
       // If there is no next element, or it is outside the current scope, move focus to the
       // next element after the node to restore to instead.
-      if ((!nextElement || !isElementInScope(nextElement, scope)) && nodeToRestore) {
+      if ((!nextElement || !isElementInScope(nextElement, scopeRef.current)) && nodeToRestore) {
         walker.currentNode = nodeToRestore;
 
         // 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;
-        } while (isElementInScope(nextElement, scope));
+        } while (isElementInScope(nextElement, scopeRef.current));
 
         e.preventDefault();
         e.stopPropagation();
@@ -457,7 +458,7 @@ function useRestoreFocus(scopeRef: RefObject<HTMLElement[]>, restoreFocus: boole
         document.removeEventListener('keydown', onKeyDown, true);
       }
 
-      if (restoreFocus && nodeToRestore && isElementInScope(document.activeElement, scope)) {
+      if (restoreFocus && nodeToRestore && isElementInScope(document.activeElement, scopeRef.current)) {
         requestAnimationFrame(() => {
           if (document.body.contains(nodeToRestore)) {
             focusElement(nodeToRestore);