TS strict aria hooks batch (#5069)

* TS strict aria hooks batch

Author: snowystinger

packages/@react-aria/focus/docs/FocusScope.mdx

@@ -52,7 +52,7 @@ to move focus to the next and previous elements.
 To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
 from a component within the FocusScope. A focus manager supports the following methods:
 
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useFocusManager.return.id]} />
+<ClassAPI links={docs.links} class={docs.links[docs.exports.FocusManager.id]} />
 
 ## Example
 

packages/@react-aria/focus/src/FocusScope.tsx

@@ -24,7 +24,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 +49,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' &&

packages/@react-aria/focus/src/isElementVisible.ts

@@ -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 (

packages/@react-aria/focus/src/useFocusable.tsx

@@ -43,7 +43,7 @@ function MaybePortal({children, isPortaled}: {children: ReactNode, isPortaled: b
 
   return ReactDOM.createPortal(
     <>{children}</>,
-    document.getElementById(dialogsRoot)
+    document.getElementById(dialogsRoot)!
   );
 }
 
@@ -135,7 +135,7 @@ function FocusableFirstInScopeExample() {
       </>
     );
   }
-  const contents = [];
+  const contents: React.JSX.Element[] = [];
   for (let i = 0; i < 3; i++) {
     contents.push(DialogContent(i));
   }

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -21,7 +21,7 @@ export interface I18nProviderProps {
   locale?: string
 }
 
-const I18nContext = React.createContext<Locale>(null);
+const I18nContext = React.createContext<Locale | null>(null);
 
 /**
  * Provides the locale for the application to all child components.

packages/@react-aria/i18n/src/context.tsx

@@ -24,7 +24,7 @@ export function useCollator(options?: Intl.CollatorOptions): Intl.Collator {
 
   let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
   if (cache.has(cacheKey)) {
-    return cache.get(cacheKey);
+    return cache.get(cacheKey)!;
   }
 
   let formatter = new Intl.Collator(locale, options);

packages/@react-aria/i18n/src/useCollator.ts

@@ -26,7 +26,7 @@ export interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
  */
 export function useDateFormatter(options?: DateFormatterOptions): DateFormatter {
   // Reuse last options object if it is shallowly equal, which allows the useMemo result to also be reused.
-  options = useDeepMemo(options, isEqual);
+  options = useDeepMemo(options ?? {}, isEqual);
   let {locale} = useLocale();
   return useMemo(() => new DateFormatter(locale, options), [locale, options]);
 }

packages/@react-aria/i18n/src/useDateFormatter.ts

@@ -24,6 +24,9 @@ export function isRTL(locale: string) {
   if (Intl.Locale) {
     // @ts-ignore
     let script = new Intl.Locale(locale).maximize().script;
+    if (!script) {
+      return false;
+    }
     return RTL_SCRIPTS.has(script);
   }
 

packages/@react-aria/i18n/src/utils.ts

@@ -23,7 +23,7 @@ interface IDOMPropsResponderContext extends DOMAttributes {
   ref?: MutableRefObject<Element>
 }
 
-export const DOMPropsResponderContext = React.createContext<IDOMPropsResponderContext>(null);
+export const DOMPropsResponderContext = React.createContext<IDOMPropsResponderContext | null>(null);
 
 export function useDOMPropsResponderContext(props: DOMPropsResponderProps): DOMPropsResponderProps {
   // Consume context from <DOMPropsResponder> and merge with props.