@react-aria/utils 3.23.0 → 3.23.1

package/src/getScrollParent.ts

@@ -11,15 +11,16 @@
  */
 
 export function getScrollParent(node: Element, checkForOverflow?: boolean): Element {
-  if (isScrollable(node, checkForOverflow)) {
-    node = node.parentElement;
+  let scrollableNode: Element | null = node;
+  if (isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
   }
 
-  while (node && !isScrollable(node, checkForOverflow)) {
-    node = node.parentElement;
+  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
   }
 
-  return node || document.scrollingElement || document.documentElement;
+  return scrollableNode || document.scrollingElement || document.documentElement;
 }
 
 export function isScrollable(node: Element, checkForOverflow?: boolean): boolean {

package/src/mergeRefs.ts

@@ -20,7 +20,7 @@ export function mergeRefs<T>(...refs: ForwardedRef<T>[]): ForwardedRef<T> {
     return refs[0];
   }
 
-  return (value: T) => {
+  return (value: T | null) => {
     for (let ref of refs) {
       if (typeof ref === 'function') {
         ref(value);

package/src/openLink.tsx

@@ -116,21 +116,21 @@ function getSyntheticLink(target: Element, open: (link: HTMLAnchorElement) => vo
     open(target);
   } else if (target.hasAttribute('data-href')) {
     let link = document.createElement('a');
-    link.href = target.getAttribute('data-href');
+    link.href = target.getAttribute('data-href')!;
     if (target.hasAttribute('data-target')) {
-      link.target = target.getAttribute('data-target');
+      link.target = target.getAttribute('data-target')!;
     }
     if (target.hasAttribute('data-rel')) {
-      link.rel = target.getAttribute('data-rel');
+      link.rel = target.getAttribute('data-rel')!;
     }
     if (target.hasAttribute('data-download')) {
-      link.download = target.getAttribute('data-download');
+      link.download = target.getAttribute('data-download')!;
     }
     if (target.hasAttribute('data-ping')) {
-      link.ping = target.getAttribute('data-ping');
+      link.ping = target.getAttribute('data-ping')!;
     }
     if (target.hasAttribute('data-referrer-policy')) {
-      link.referrerPolicy = target.getAttribute('data-referrer-policy');
+      link.referrerPolicy = target.getAttribute('data-referrer-policy')!;
     }
     target.appendChild(link);
     open(link);

package/src/runAfterTransition.ts

@@ -26,7 +26,14 @@ function setupGlobalEvents() {
     return;
   }
 
-  let onTransitionStart = (e: TransitionEvent) => {
+  function isTransitionEvent(event: Event): event is TransitionEvent {
+    return 'propertyName' in event;
+  }
+
+  let onTransitionStart = (e: Event) => {
+    if (!isTransitionEvent(e) || !e.target) {
+      return;
+    }
     // Add the transitioning property to the list for this element.
     let transitions = transitionsByElement.get(e.target);
     if (!transitions) {
@@ -36,13 +43,18 @@ function setupGlobalEvents() {
       // The transitioncancel event must be registered on the element itself, rather than as a global
       // event. This enables us to handle when the node is deleted from the document while it is transitioning.
       // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-      e.target.addEventListener('transitioncancel', onTransitionEnd);
+      e.target.addEventListener('transitioncancel', onTransitionEnd, {
+        once: true
+      });
     }
 
     transitions.add(e.propertyName);
   };
 
-  let onTransitionEnd = (e: TransitionEvent) => {
+  let onTransitionEnd = (e: Event) => {
+    if (!isTransitionEvent(e) || !e.target) {
+      return;
+    }
     // Remove property from list of transitioning properties.
     let properties = transitionsByElement.get(e.target);
     if (!properties) {

package/src/useDeepMemo.ts

@@ -17,7 +17,7 @@ import {useRef} from 'react';
 export function useDeepMemo<T>(value: T, isEqual: (a: T, b: T) => boolean): T {
   // Using a ref during render is ok here because it's only an optimization – both values are equivalent.
   // If a render is thrown away, it'll still work the same no matter if the next render is the same or not.
-  let lastValue = useRef(null);
+  let lastValue = useRef<T | null>(null);
   if (value && lastValue.current && isEqual(value, lastValue.current)) {
     value = lastValue.current;
   }

package/src/useDescription.ts

@@ -18,7 +18,7 @@ let descriptionId = 0;
 const descriptionNodes = new Map<string, {refCount: number, element: Element}>();
 
 export function useDescription(description?: string): AriaLabelingProps {
-  let [id, setId] = useState(undefined);
+  let [id, setId] = useState<string | undefined>();
 
   useLayoutEffect(() => {
     if (!description) {
@@ -43,7 +43,7 @@ export function useDescription(description?: string): AriaLabelingProps {
 
     desc.refCount++;
     return () => {
-      if (--desc.refCount === 0) {
+      if (desc && --desc.refCount === 0) {
         desc.element.remove();
         descriptionNodes.delete(description);
       }

package/src/useEffectEvent.ts

@@ -13,14 +13,14 @@
 import {useCallback, useRef} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 
-export function useEffectEvent<T extends Function>(fn: T): T {
-  const ref = useRef<T | null>(null);
+export function useEffectEvent<T extends Function>(fn?: T): T {
+  const ref = useRef<T | null | undefined>(null);
   useLayoutEffect(() => {
     ref.current = fn;
   }, [fn]);
   // @ts-ignore
   return useCallback<T>((...args) => {
     const f = ref.current!;
-    return f(...args);
+    return f?.(...args);
   }, []);
 }

package/src/useEvent.ts

@@ -23,14 +23,14 @@ export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
   let isDisabled = handler == null;
 
   useEffect(() => {
-    if (isDisabled) {
+    if (isDisabled || !ref.current) {
       return;
     }
 
     let element = ref.current;
-    element.addEventListener(event, handleEvent, options);
+    element.addEventListener(event, handleEvent as EventListener, options);
     return () => {
-      element.removeEventListener(event, handleEvent, options);
+      element.removeEventListener(event, handleEvent as EventListener, options);
     };
   }, [ref, event, options, isDisabled, handleEvent]);
 }

package/src/useObjectRef.ts

@@ -15,14 +15,14 @@ import {MutableRefObject, useMemo, useRef} from 'react';
 /**
  * Offers an object ref for a given callback ref or an object ref. Especially
  * helfpul when passing forwarded refs (created using `React.forwardRef`) to
- * React Aria Hooks.
+ * React Aria hooks.
  *
  * @param forwardedRef The original ref intended to be used.
  * @returns An object ref that updates the given ref.
  * @see https://reactjs.org/docs/forwarding-refs.html
  */
-export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) | MutableRefObject<T | null> | null): MutableRefObject<T> {
-  const objRef = useRef<T>();
+export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) | MutableRefObject<T | null> | null): MutableRefObject<T | null> {
+  const objRef: MutableRefObject<T | null> = useRef<T>(null);
   return useMemo(() => ({
     get current() {
       return objRef.current;

package/src/useSyncRef.ts

@@ -14,7 +14,7 @@ import {MutableRefObject, RefObject} from 'react';
 import {useLayoutEffect} from './';
 
 interface ContextValue<T> {
-  ref?: MutableRefObject<T>
+  ref?: MutableRefObject<T | null>
 }
 
 // Syncs ref from context with ref passed to hook
@@ -23,7 +23,9 @@ export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<
     if (context && context.ref && ref) {
       context.ref.current = ref.current;
       return () => {
-        context.ref.current = null;
+        if (context.ref) {
+          context.ref.current = null;
+        }
       };
     }
   });

package/src/useValueEffect.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Dispatch, useRef, useState} from 'react';
+import {Dispatch, MutableRefObject, useRef, useState} from 'react';
 import {useEffectEvent, useLayoutEffect} from './';
 
 type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
@@ -21,11 +21,14 @@ type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 // written linearly.
 export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {
   let [value, setValue] = useState(defaultValue);
-  let effect = useRef(null);
+  let effect: MutableRefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);
 
   // Store the function in a ref so we can always access the current version
   // which has the proper `value` in scope.
   let nextRef = useEffectEvent(() => {
+    if (!effect.current) {
+      return;
+    }
     // Run the generator to the next yield.
     let newValue = effect.current.next();
 

package/src/useViewportSize.ts

@@ -57,7 +57,7 @@ export function useViewportSize(): ViewportSize {
 
 function getViewportSize(): ViewportSize {
   return {
-    width: visualViewport?.width || window.innerWidth,
-    height: visualViewport?.height || window.innerHeight
+    width: (visualViewport && visualViewport?.width) || window.innerWidth,
+    height: (visualViewport && visualViewport?.height) || window.innerHeight
   };
 }