@react-aria/focus 3.14.3 → 3.16.0

package/src/focusSafely.ts

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import {focusWithoutScrolling, runAfterTransition} from '@react-aria/utils';
+import {focusWithoutScrolling, getOwnerDocument, runAfterTransition} from '@react-aria/utils';
 import {getInteractionModality} from '@react-aria/interactions';
 
 /**
@@ -24,11 +24,12 @@ export function focusSafely(element: FocusableElement) {
   // the page before shifting focus. This avoids issues with VoiceOver on iOS
   // causing the page to scroll when moving focus if the element is transitioning
   // from off the screen.
+  const ownerDocument = getOwnerDocument(element);
   if (getInteractionModality() === 'virtual') {
-    let lastFocusedElement = document.activeElement;
+    let lastFocusedElement = ownerDocument.activeElement;
     runAfterTransition(() => {
       // If focus did not move and the element is still in the document, focus it.
-      if (document.activeElement === lastFocusedElement && document.contains(element)) {
+      if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) {
         focusWithoutScrolling(element);
       }
     });

package/src/isElementVisible.ts

@@ -10,8 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
+import {getOwnerWindow} from '@react-aria/utils';
+
 function isStyleVisible(element: Element) {
-  if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
+  const windowObject = getOwnerWindow(element);
+  if (!(element instanceof windowObject.HTMLElement) && !(element instanceof windowObject.SVGElement)) {
     return false;
   }
 
@@ -24,7 +27,7 @@ function isStyleVisible(element: Element) {
   );
 
   if (isVisible) {
-    const {getComputedStyle} = element.ownerDocument.defaultView;
+    const {getComputedStyle} = element.ownerDocument.defaultView as unknown as Window;
     let {display: computedDisplay, visibility: computedVisibility} = getComputedStyle(element);
 
     isVisible = (
@@ -49,11 +52,11 @@ function isAttributeVisible(element: Element, childElement?: Element) {
 }
 
 /**
- * Adapted from https://github.com/testing-library/jest-dom and 
+ * Adapted from https://github.com/testing-library/jest-dom and
  * https://github.com/vuejs/vue-test-utils-next/.
  * Licensed under the MIT License.
  * @param element - Element to evaluate for display or visibility.
- */  
+ */
 export function isElementVisible(element: Element, childElement?: Element) {
   return (
     element.nodeName !== '#comment' &&

package/src/useFocusable.tsx

@@ -12,8 +12,8 @@
 
 import {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps} from '@react-types/shared';
 import {focusSafely} from './';
-import {mergeProps, useSyncRef} from '@react-aria/utils';
-import React, {MutableRefObject, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
+import {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';
+import React, {ForwardedRef, MutableRefObject, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
 import {useFocus, useKeyboard} from '@react-aria/interactions';
 
 export interface FocusableOptions extends FocusableProps, FocusableDOMProps {
@@ -30,7 +30,7 @@ interface FocusableContextValue extends FocusableProviderProps {
   ref?: MutableRefObject<FocusableElement>
 }
 
-let FocusableContext = React.createContext<FocusableContextValue>(null);
+let FocusableContext = React.createContext<FocusableContextValue | null>(null);
 
 function useFocusableContext(ref: RefObject<FocusableElement>): FocusableContextValue {
   let context = useContext(FocusableContext) || {};
@@ -44,11 +44,12 @@ function useFocusableContext(ref: RefObject<FocusableElement>): FocusableContext
 /**
  * Provides DOM props to the nearest focusable child.
  */
-function FocusableProvider(props: FocusableProviderProps, ref: RefObject<FocusableElement>) {
+function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
   let {children, ...otherProps} = props;
+  let objRef = useObjectRef(ref);
   let context = {
     ...otherProps,
-    ref
+    ref: objRef
   };
 
   return (