@react-aria/utils 3.28.1 → 3.28.2

package/src/animation.ts

@@ -14,10 +14,10 @@ import {flushSync} from 'react-dom';
 import {RefObject, useCallback, useState} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 
-export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady: boolean = true) {
+export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady: boolean = true): boolean {
   let [isEntering, setEntering] = useState(true);
   let isAnimationReady = isEntering && isReady;
-  
+
   // There are two cases for entry animations:
   // 1. CSS @keyframes. The `animation` property is set during the isEntering state, and it is removed after the animation finishes.
   // 2. CSS transitions. The initial styles are applied during the isEntering state, and removed immediately, causing the transition to occur.
@@ -38,7 +38,7 @@ export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady: b
   return isAnimationReady;
 }
 
-export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boolean) {
+export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boolean): boolean {
   let [exitState, setExitState] = useState<'closed' | 'open' | 'exiting'>(isOpen ? 'open' : 'closed');
 
   switch (exitState) {
@@ -71,7 +71,7 @@ export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boo
   return isExiting;
 }
 
-function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onEnd: () => void) {
+function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onEnd: () => void): void {
   useLayoutEffect(() => {
     if (isActive && ref.current) {
       if (!('getAnimations' in ref.current)) {
@@ -79,7 +79,7 @@ function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onE
         onEnd();
         return;
       }
-      
+
       let animations = ref.current.getAnimations();
       if (animations.length === 0) {
         onEnd();
@@ -94,7 +94,7 @@ function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onE
           });
         }
       }).catch(() => {});
-      
+
       return () => {
         canceled = true;
       };

package/src/focusWithoutScrolling.ts

@@ -28,7 +28,7 @@ interface ScrollableElement {
   scrollLeft: number
 }
 
-export function focusWithoutScrolling(element: FocusableElement) {
+export function focusWithoutScrolling(element: FocusableElement): void {
   if (supportsPreventScroll()) {
     element.focus({preventScroll: true});
   } else {

package/src/getOffset.ts

@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-export function getOffset(element, reverse, orientation = 'horizontal') {
+import {Orientation} from '@react-types/shared';
+
+export function getOffset(element: HTMLElement, reverse?: boolean, orientation: Orientation = 'horizontal'): number {
   let rect = element.getBoundingClientRect();
   if (reverse) {
     return orientation === 'horizontal' ? rect.right : rect.bottom;

package/src/inertValue.ts

@@ -1,6 +1,6 @@
 import {version} from 'react';
 
-export function inertValue(value?: boolean) {
+export function inertValue(value?: boolean): string | boolean | undefined {
   const pieces = version.split('.');
   const major = parseInt(pieces[0], 10);
   if (major >= 19) {

package/src/isFocusable.ts

@@ -19,10 +19,10 @@ const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + '
 focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
 const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
-export function isFocusable(element: Element) {
+export function isFocusable(element: Element): boolean {
   return element.matches(FOCUSABLE_ELEMENT_SELECTOR);
 }
 
-export function isTabbable(element: Element) {
+export function isTabbable(element: Element): boolean {
   return element.matches(TABBABLE_ELEMENT_SELECTOR);
 }

package/src/isVirtualEvent.ts

@@ -39,7 +39,7 @@ export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
   return event.detail === 0 && !(event as PointerEvent).pointerType;
 }
 
-export function isVirtualPointerEvent(event: PointerEvent) {
+export function isVirtualPointerEvent(event: PointerEvent): boolean {
   // If the pointer size is zero, then we assume it's from a screen reader.
   // Android TalkBack double tap will sometimes return a event with width and height of 1
   // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.

package/src/keyboard.tsx

@@ -18,7 +18,7 @@ interface Event {
   metaKey: boolean
 }
 
-export function isCtrlKeyPressed(e: Event) {
+export function isCtrlKeyPressed(e: Event): boolean {
   if (isMac()) {
     return e.metaKey;
   }

package/src/openLink.tsx

@@ -13,7 +13,7 @@
 import {focusWithoutScrolling, isMac, isWebKit} from './index';
 import {Href, LinkDOMProps, RouterOptions} from '@react-types/shared';
 import {isFirefox, isIPad} from './platform';
-import React, {createContext, ReactNode, useContext, useMemo} from 'react';
+import React, {createContext, DOMAttributes, ReactNode, useContext, useMemo} from 'react';
 
 interface Router {
   isNative: boolean,
@@ -37,7 +37,7 @@ interface RouterProviderProps {
  * A RouterProvider accepts a `navigate` function from a framework or client side router,
  * and provides it to all nested React Aria links to enable client side navigation.
  */
-export function RouterProvider(props: RouterProviderProps) {
+export function RouterProvider(props: RouterProviderProps): ReactNode {
   let {children, navigate, useHref} = props;
 
   let ctx = useMemo(() => ({
@@ -72,7 +72,7 @@ interface Modifiers {
   shiftKey?: boolean
 }
 
-export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: Modifiers) {
+export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: Modifiers): boolean {
   // Use getAttribute here instead of link.target. Firefox will default link.target to "_parent" when inside an iframe.
   let target = link.getAttribute('target');
   return (
@@ -86,7 +86,7 @@ export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: Modifie
   );
 }
 
-export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpening = true) {
+export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpening = true): void {
   let {metaKey, ctrlKey, altKey, shiftKey} = modifiers;
 
   // Firefox does not recognize keyboard events as a user action by default, and the popup blocker
@@ -146,7 +146,7 @@ function openSyntheticLink(target: Element, modifiers: Modifiers) {
   getSyntheticLink(target, link => openLink(link, modifiers));
 }
 
-export function useSyntheticLinkProps(props: LinkDOMProps) {
+export function useSyntheticLinkProps(props: LinkDOMProps): DOMAttributes<HTMLElement> {
   let router = useRouter();
   const href = router.useHref(props.href ?? '');
   return {
@@ -156,11 +156,11 @@ export function useSyntheticLinkProps(props: LinkDOMProps) {
     'data-download': props.download,
     'data-ping': props.ping,
     'data-referrer-policy': props.referrerPolicy
-  };
+  } as DOMAttributes<HTMLElement>;
 }
 
 /** @deprecated - For backward compatibility. */
-export function getSyntheticLinkProps(props: LinkDOMProps) {
+export function getSyntheticLinkProps(props: LinkDOMProps): DOMAttributes<HTMLElement> {
   return {
     'data-href': props.href,
     'data-target': props.target,
@@ -168,10 +168,10 @@ export function getSyntheticLinkProps(props: LinkDOMProps) {
     'data-download': props.download,
     'data-ping': props.ping,
     'data-referrer-policy': props.referrerPolicy
-  };
+  } as DOMAttributes<HTMLElement>;
 }
 
-export function useLinkProps(props?: LinkDOMProps) {
+export function useLinkProps(props?: LinkDOMProps): LinkDOMProps {
   let router = useRouter();
   const href = router.useHref(props?.href ?? '');
   return {

package/src/runAfterTransition.ts

@@ -91,7 +91,7 @@ if (typeof document !== 'undefined') {
   }
 }
 
-export function runAfterTransition(fn: () => void) {
+export function runAfterTransition(fn: () => void): void {
   // Wait one frame to see if an animation starts, e.g. a transition on mount.
   requestAnimationFrame(() => {
     // If no transitions are running, call the function immediately.

package/src/scrollIntoView.ts

@@ -22,7 +22,7 @@ interface ScrollIntoViewportOpts {
  * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
  * but doesn't affect parents above `scrollView`.
  */
-export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
+export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): void {
   let offsetX = relativeOffset(scrollView, element, 'left');
   let offsetY = relativeOffset(scrollView, element, 'top');
   let width = element.offsetWidth;
@@ -97,7 +97,7 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
  * that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on
  * the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.
  */
-export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollIntoViewportOpts) {
+export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollIntoViewportOpts): void {
   if (targetElement && document.contains(targetElement)) {
     let root = document.scrollingElement || document.documentElement;
     let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';

package/src/shadowdom/DOMFunctions.ts

@@ -43,7 +43,7 @@ export function nodeContains(
 /**
  * ShadowDOM safe version of document.activeElement.
  */
-export const getActiveElement = (doc: Document = document) => {
+export const getActiveElement = (doc: Document = document): Element | null => {
   if (!shadowDOM()) {
     return doc.activeElement;
   }
@@ -60,11 +60,11 @@ export const getActiveElement = (doc: Document = document) => {
 /**
  * ShadowDOM safe version of event.target.
  */
-export function getEventTarget(event): Element {
-  if (shadowDOM() && event.target.shadowRoot) {
+export function getEventTarget<T extends Event>(event: T): Element {
+  if (shadowDOM() && (event.target as HTMLElement).shadowRoot) {
     if (event.composedPath) {
-      return event.composedPath()[0];
+      return event.composedPath()[0] as Element;
     }
   }
-  return event.target;
+  return event.target as Element;
 }

package/src/shadowdom/ShadowTreeWalker.ts

@@ -311,7 +311,7 @@ export function createShadowTreeWalker(
     root: Node,
     whatToShow?: number,
     filter?: NodeFilter | null
-) {
+): TreeWalker {
   if (shadowDOM()) {
     return new ShadowTreeWalker(doc, root, whatToShow, filter);
   }

package/src/useEvent.ts

@@ -19,7 +19,7 @@ export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
   event: K | (string & {}),
   handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
-) {
+): void {
   let handleEvent = useEffectEvent(handler);
   let isDisabled = handler == null;
 

package/src/useFormReset.ts

@@ -18,7 +18,7 @@ export function useFormReset<T>(
   ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined,
   initialValue: T,
   onReset: (value: T) => void
-) {
+): void {
   let resetValue = useRef(initialValue);
   let handleReset = useEffectEvent(() => {
     if (onReset) {

package/src/useLoadMore.ts

@@ -12,7 +12,7 @@
 
 import {RefObject, useCallback, useRef} from 'react';
 import {useEvent} from './useEvent';
- 
+
 import {useLayoutEffect} from './useLayoutEffect';
 
 export interface LoadMoreProps {
@@ -32,7 +32,7 @@ export interface LoadMoreProps {
   items?: any
 }
 
-export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | null>) {
+export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | null>): void {
   let {isLoading, onLoadMore, scrollOffset = 1, items} = props;
 
   // Handle scrolling, and call onLoadMore when nearing the bottom.

package/src/useResizeObserver.ts

@@ -12,7 +12,7 @@ type useResizeObserverOptionsType<T> = {
   onResize: () => void
 }
 
-export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
+export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>): void {
   const {ref, box, onResize} = options;
 
   useEffect(() => {

package/src/useSyncRef.ts

@@ -19,7 +19,7 @@ interface ContextValue<T> {
 }
 
 // Syncs ref from context with ref passed to hook
-export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T | null>) {
+export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T | null>): void {
   useLayoutEffect(() => {
     if (context && context.ref && ref) {
       context.ref.current = ref.current;

package/src/useUpdateLayoutEffect.ts

@@ -14,7 +14,7 @@ import {EffectCallback, useRef} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 
 // Like useLayoutEffect, but only called for updates after the initial render.
-export function useUpdateLayoutEffect(effect: EffectCallback, dependencies: any[]) {
+export function useUpdateLayoutEffect(effect: EffectCallback, dependencies: any[]): void {
   const isInitialMount = useRef(true);
   const lastDeps = useRef<any[] | null>(null);