diff --git a/examples/rsp-next-ts-17/components/ReorderableListView.tsx b/examples/rsp-next-ts-17/components/ReorderableListView.tsx
index 721f875e1c6..5c7d9b58d93 100644
--- a/examples/rsp-next-ts-17/components/ReorderableListView.tsx
+++ b/examples/rsp-next-ts-17/components/ReorderableListView.tsx
@@ -22,7 +22,7 @@ export default function ReorderableListView() {
         // Setup the drag types and associated info for each dragged item.
         return {
           "custom-app-type-reorder": JSON.stringify(item),
-          "text/plain": item.name,
+          "text/plain": item?.name ?? '',
         };
       });
     },
diff --git a/examples/rsp-next-ts/components/ReorderableListView.tsx b/examples/rsp-next-ts/components/ReorderableListView.tsx
index 721f875e1c6..5c7d9b58d93 100644
--- a/examples/rsp-next-ts/components/ReorderableListView.tsx
+++ b/examples/rsp-next-ts/components/ReorderableListView.tsx
@@ -22,7 +22,7 @@ export default function ReorderableListView() {
         // Setup the drag types and associated info for each dragged item.
         return {
           "custom-app-type-reorder": JSON.stringify(item),
-          "text/plain": item.name,
+          "text/plain": item?.name ?? '',
         };
       });
     },
diff --git a/package.json b/package.json
index 2ad731030af..2038982ef6c 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "packageManager": "yarn@4.2.2",
   "scripts": {
-    "check-types": "tsc && tsc-strict",
+    "check-types": "tsc",
     "install-16": "node scripts/react-16-install-prep.mjs && yarn add react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs",
     "install-17": "node scripts/react-17-install-prep.mjs && yarn add react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs",
     "install-19": "node scripts/react-19-install-prep.mjs && yarn add react@next react-dom@next",
@@ -208,7 +208,6 @@
     "tempy": "^0.5.0",
     "typescript": "^5.5.0",
     "typescript-eslint": "^8.9.0",
-    "typescript-strict-plugin": "^2.0.0",
     "verdaccio": "^5.13.0",
     "walk-object": "^4.0.0",
     "wsrun": "^5.0.0",
diff --git a/packages/@internationalized/message/src/MessageDictionary.ts b/packages/@internationalized/message/src/MessageDictionary.ts
index 7986222e5fc..9296f39b57d 100644
--- a/packages/@internationalized/message/src/MessageDictionary.ts
+++ b/packages/@internationalized/message/src/MessageDictionary.ts
@@ -76,9 +76,7 @@ function getStringsForLocale(locale: string, strings: LocalizedStrings, defaultL
 }
 
 function getLanguage(locale: string) {
-  // @ts-ignore
   if (Intl.Locale) {
-    // @ts-ignore
     return new Intl.Locale(locale).language;
   }
 
diff --git a/packages/@internationalized/number/src/NumberFormatter.ts b/packages/@internationalized/number/src/NumberFormatter.ts
index 9807a5a1af6..570a6ecabe7 100644
--- a/packages/@internationalized/number/src/NumberFormatter.ts
+++ b/packages/@internationalized/number/src/NumberFormatter.ts
@@ -14,14 +14,12 @@ let formatterCache = new Map<string, Intl.NumberFormat>();
 
 let supportsSignDisplay = false;
 try {
-  // @ts-ignore
   supportsSignDisplay = (new Intl.NumberFormat('de-DE', {signDisplay: 'exceptZero'})).resolvedOptions().signDisplay === 'exceptZero';
   // eslint-disable-next-line no-empty
 } catch {}
 
 let supportsUnit = false;
 try {
-  // @ts-ignore
   supportsUnit = (new Intl.NumberFormat('de-DE', {style: 'unit', unit: 'degree'})).resolvedOptions().style === 'unit';
   // eslint-disable-next-line no-empty
 } catch {}
@@ -87,15 +85,12 @@ export class NumberFormatter implements Intl.NumberFormat {
   /** Formats a number to an array of parts such as separators, digits, punctuation, and more. */
   formatToParts(value: number): Intl.NumberFormatPart[] {
     // TODO: implement signDisplay for formatToParts
-    // @ts-ignore
     return this.numberFormatter.formatToParts(value);
   }
 
   /** Formats a number range as a string. */
   formatRange(start: number, end: number): string {
-    // @ts-ignore
     if (typeof this.numberFormatter.formatRange === 'function') {
-      // @ts-ignore
       return this.numberFormatter.formatRange(start, end);
     }
 
@@ -109,9 +104,7 @@ export class NumberFormatter implements Intl.NumberFormat {
 
   /** Formats a number range as an array of parts. */
   formatRangeToParts(start: number, end: number): NumberRangeFormatPart[] {
-    // @ts-ignore
     if (typeof this.numberFormatter.formatRangeToParts === 'function') {
-      // @ts-ignore
       return this.numberFormatter.formatRangeToParts(start, end);
     }
 
diff --git a/packages/@internationalized/number/src/NumberParser.ts b/packages/@internationalized/number/src/NumberParser.ts
index fbf9f934076..6425a63fc4e 100644
--- a/packages/@internationalized/number/src/NumberParser.ts
+++ b/packages/@internationalized/number/src/NumberParser.ts
@@ -273,7 +273,6 @@ function getSymbols(locale: string, formatter: Intl.NumberFormat, intlOptions: I
 
   // Safari does not support the signDisplay option, but our number parser polyfills it.
   // If no plus sign was returned, but the original options contained signDisplay, default to the '+' character.
-  // @ts-ignore
   if (!plusSign && (originalOptions?.signDisplay === 'exceptZero' || originalOptions?.signDisplay === 'always')) {
     plusSign = '+';
   }
@@ -305,9 +304,7 @@ function getSymbols(locale: string, formatter: Intl.NumberFormat, intlOptions: I
 }
 
 function replaceAll(str: string, find: string, replace: string) {
-  // @ts-ignore
   if (str.replaceAll) {
-    // @ts-ignore
     return str.replaceAll(find, replace);
   }
 
diff --git a/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js b/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js
index b10632ae0c1..1ff0745bb64 100644
--- a/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js
+++ b/packages/@react-aria/autocomplete/test/useSearchAutocomplete.test.js
@@ -11,7 +11,6 @@
  */
 
 import {Item} from '@react-stately/collections';
-import {ListLayout} from '@react-stately/layout';
 import React from 'react';
 import {renderHook} from '@react-spectrum/test-utils-internal';
 import {useComboBoxState} from '@react-stately/combobox';
@@ -30,11 +29,6 @@ describe('useSearchAutocomplete', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useComboBoxState(defaultProps));
-  let mockLayout = new ListLayout({
-    rowHeight: 40
-  });
-  mockLayout.collection = result.current.collection;
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -45,8 +39,7 @@ describe('useSearchAutocomplete', function () {
       label: 'test label',
       popoverRef: React.createRef(),
       inputRef: React.createRef(),
-      listBoxRef: React.createRef(),
-      layout: mockLayout
+      listBoxRef: React.createRef()
     };
 
     let {result} = renderHook(() => useSearchAutocomplete(props, useComboBoxState(defaultProps)));
@@ -73,8 +66,7 @@ describe('useSearchAutocomplete', function () {
       inputRef: {
         current: document.createElement('input')
       },
-      listBoxRef: React.createRef(),
-      layout: mockLayout
+      listBoxRef: React.createRef()
     };
 
     let {result: state} = renderHook((props) => useComboBoxState(props), {initialProps: props});
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index 8505a8c1790..080ca09238e 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -283,7 +283,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
   let lastSection = useRef(sectionKey);
   let lastItem = useRef(itemKey);
   useEffect(() => {
-    if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {
+    if (isAppleDevice() && focusedItem != null && itemKey != null && itemKey !== lastItem.current) {
       let isSelected = state.selectionManager.isSelected(itemKey);
       let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
       let sectionTitle = section?.['aria-label'] || (typeof section?.rendered === 'string' ? section.rendered : '') || '';
diff --git a/packages/@react-aria/combobox/test/useComboBox.test.js b/packages/@react-aria/combobox/test/useComboBox.test.js
index c40dc72b2c8..9b83283f355 100644
--- a/packages/@react-aria/combobox/test/useComboBox.test.js
+++ b/packages/@react-aria/combobox/test/useComboBox.test.js
@@ -12,7 +12,6 @@
 
 import {actHook as act, renderHook} from '@react-spectrum/test-utils-internal';
 import {Item} from '@react-stately/collections';
-import {ListLayout} from '@react-stately/layout';
 import React from 'react';
 import {useComboBox} from '../';
 import {useComboBoxState} from '@react-stately/combobox';
@@ -32,11 +31,6 @@ describe('useComboBox', function () {
   });
 
   let defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>};
-  let {result} = renderHook(() => useComboBoxState(defaultProps));
-  let mockLayout = new ListLayout({
-    rowHeight: 40
-  });
-  mockLayout.collection = result.current.collection;
 
   let props = {
     label: 'test label',
@@ -51,8 +45,7 @@ describe('useComboBox', function () {
     },
     listBoxRef: {
       current: document.createElement('div')
-    },
-    layout: mockLayout
+    }
   };
 
   afterEach(() => {
diff --git a/packages/@react-aria/datepicker/src/useDateRangePicker.ts b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
index a3988ee19d0..8970160b3ad 100644
--- a/packages/@react-aria/datepicker/src/useDateRangePicker.ts
+++ b/packages/@react-aria/datepicker/src/useDateRangePicker.ts
@@ -14,6 +14,7 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker';
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
+import {DateRange, RangeCalendarProps} from '@react-types/calendar';
 import {DateRangePickerState} from '@react-stately/datepicker';
 import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
@@ -21,7 +22,6 @@ import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/uti
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {RangeCalendarProps} from '@react-types/calendar';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
@@ -168,7 +168,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     startFieldProps: {
       ...startFieldProps,
       ...commonFieldProps,
-      value: state.value?.start,
+      value: state.value?.start ?? null,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
       name: props.startName,
@@ -186,7 +186,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
-      value: state.value?.end,
+      value: state.value?.end ?? null,
       onChange: end => state.setDateTime('end', end),
       name: props.endName,
       [privateValidationStateProp]: {
@@ -204,7 +204,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     errorMessageProps,
     calendarProps: {
       autoFocus: true,
-      value: state.dateRange,
+      value: state.dateRange?.start && state.dateRange.end ? state.dateRange as DateRange : null,
       onChange: state.setDateRange,
       minValue: props.minValue,
       maxValue: props.maxValue,
diff --git a/packages/@react-aria/dnd/src/DragPreview.tsx b/packages/@react-aria/dnd/src/DragPreview.tsx
index 3576f3ccccf..1228b85d313 100644
--- a/packages/@react-aria/dnd/src/DragPreview.tsx
+++ b/packages/@react-aria/dnd/src/DragPreview.tsx
@@ -15,7 +15,7 @@ import {flushSync} from 'react-dom';
 import React, {ForwardedRef, JSX, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 export interface DragPreviewProps {
-  children: (items: DragItem[]) => JSX.Element
+  children: (items: DragItem[]) => JSX.Element | null
 }
 
 function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index b892794eecf..420d924c7c5 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -56,7 +56,7 @@ export interface DroppableCollectionResult {
 
 interface DroppingState {
   collection: Collection<Node<unknown>>,
-  focusedKey: Key,
+  focusedKey: Key | null,
   selectedKeys: Set<Key>,
   target: DropTarget,
   draggingKeys: Set<Key | null | undefined>,
@@ -273,6 +273,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           }
         }
       } else if (
+        prevFocusedKey != null &&
         state.selectionManager.focusedKey === prevFocusedKey &&
         isInternal &&
         target.type === 'item' &&
@@ -293,7 +294,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
         state.selectionManager.setFocusedKey(target.key);
         setInteractionModality('keyboard');
-      } else if (!state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
+      } else if (state.selectionManager.focusedKey != null && !state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
         setInteractionModality('keyboard');
       }
 
@@ -533,7 +534,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
         // If the focused key is a cell, get the parent item instead.
         // For now, we assume that individual cells cannot be dropped on.
-        let item = localState.state.collection.getItem(key);
+        let item = key != null ? localState.state.collection.getItem(key) : null;
         if (item?.type === 'cell') {
           key = item.parentKey;
         }
diff --git a/packages/@react-aria/dnd/stories/DraggableCollection.tsx b/packages/@react-aria/dnd/stories/DraggableCollection.tsx
index 82c142196d7..55d77d0bc4f 100644
--- a/packages/@react-aria/dnd/stories/DraggableCollection.tsx
+++ b/packages/@react-aria/dnd/stories/DraggableCollection.tsx
@@ -61,7 +61,7 @@ export function DraggableCollectionExample(props) {
 
 function DraggableCollection(props) {
   let ref = React.useRef<HTMLDivElement>(null);
-  let state = useListState(props);
+  let state = useListState<ItemValue>(props);
   let gridState = useGridState({
     selectionMode: 'multiple',
     collection: React.useMemo(() => new GridCollection<ItemValue>({
diff --git a/packages/@react-aria/dnd/stories/dnd.stories.tsx b/packages/@react-aria/dnd/stories/dnd.stories.tsx
index 28e4be2aa6d..bb0b5efa785 100644
--- a/packages/@react-aria/dnd/stories/dnd.stories.tsx
+++ b/packages/@react-aria/dnd/stories/dnd.stories.tsx
@@ -387,7 +387,7 @@ function DraggableCollectionExample(props) {
 function DraggableCollection(props) {
   let {isDisabled} = props;
   let ref = React.useRef<HTMLDivElement>(null);
-  let state = useListState(props);
+  let state = useListState<ItemValue>(props);
   let gridState = useGridState({
     ...props,
     selectionMode: 'multiple',
diff --git a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts
index 00e01924a0c..67da4a63b76 100644
--- a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts
+++ b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts
@@ -33,7 +33,7 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
   protected disabledKeys: Set<Key>;
   protected disabledBehavior: DisabledBehavior;
   protected direction: Direction;
-  protected collator: Intl.Collator;
+  protected collator: Intl.Collator | undefined;
   protected layoutDelegate: LayoutDelegate;
   protected focusMode;
 
@@ -43,7 +43,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     this.disabledBehavior = options.disabledBehavior || 'all';
     this.direction = options.direction;
     this.collator = options.collator;
-    this.layoutDelegate = options.layoutDelegate || (options.layout ? new DeprecatedLayoutDelegate(options.layout) : new DOMLayoutDelegate(options.ref));
+    if (!options.layout && !options.ref) {
+      throw new Error('Either a layout or a ref must be specified.');
+    }
+    this.layoutDelegate = options.layoutDelegate || (options.layout ? new DeprecatedLayoutDelegate(options.layout) : new DOMLayoutDelegate(options.ref!));
     this.focusMode = options.focusMode || 'row';
   }
 
@@ -66,12 +69,16 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     while (key != null) {
       let item = this.collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       if (!this.isDisabled(item) && (!pred || pred(item))) {
         return key;
       }
 
       key = this.collection.getKeyBefore(key);
     }
+    return null;
   }
 
   protected findNextKey(fromKey?: Key, pred?: (item: Node<T>) => boolean) {
@@ -81,23 +88,34 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     while (key != null) {
       let item = this.collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       if (!this.isDisabled(item) && (!pred || pred(item))) {
         return key;
       }
 
       key = this.collection.getKeyAfter(key);
+      if (key == null) {
+        return null;
+      }
     }
+    return null;
   }
 
-  getKeyBelow(key: Key) {
+  getKeyBelow(fromKey: Key) {
+    let key: Key | null = fromKey;
     let startItem = this.collection.getItem(key);
     if (!startItem) {
-      return;
+      return null;
     }
 
     // If focus was on a cell, start searching from the parent row
     if (this.isCell(startItem)) {
-      key = startItem.parentKey;
+      key = startItem.parentKey ?? null;
+    }
+    if (key == null) {
+      return null;
     }
 
     // Find the next item
@@ -106,7 +124,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
       // If focus was on a cell, focus the cell with the same index in the next row.
       if (this.isCell(startItem)) {
         let item = this.collection.getItem(key);
-        return getNthItem(getChildNodes(item, this.collection), startItem.index).key;
+        if (!item) {
+          return null;
+        }
+        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key ?? null;
       }
 
       // Otherwise, focus the next row
@@ -114,17 +135,22 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
         return key;
       }
     }
+    return null;
   }
 
-  getKeyAbove(key: Key) {
+  getKeyAbove(fromKey: Key) {
+    let key: Key | null = fromKey;
     let startItem = this.collection.getItem(key);
     if (!startItem) {
-      return;
+      return null;
     }
 
     // If focus is on a cell, start searching from the parent row
     if (this.isCell(startItem)) {
-      key = startItem.parentKey;
+      key = startItem.parentKey ?? null;
+    }
+    if (key == null) {
+      return null;
     }
 
     // Find the previous item
@@ -133,7 +159,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
       // If focus was on a cell, focus the cell with the same index in the previous row.
       if (this.isCell(startItem)) {
         let item = this.collection.getItem(key);
-        return getNthItem(getChildNodes(item, this.collection), startItem.index).key;
+        if (!item) {
+          return null;
+        }
+        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key || null;
       }
 
       // Otherwise, focus the previous row
@@ -141,141 +170,165 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
         return key;
       }
     }
+    return null;
   }
 
   getKeyRightOf(key: Key) {
     let item = this.collection.getItem(key);
     if (!item) {
-      return;
+      return null;
     }
 
     // If focus is on a row, focus the first child cell.
     if (this.isRow(item)) {
       let children = getChildNodes(item, this.collection);
-      return this.direction === 'rtl'
-        ? getLastItem(children).key
-        : getFirstItem(children).key;
+      return (this.direction === 'rtl'
+        ? getLastItem(children)?.key
+        : getFirstItem(children)?.key) ?? null;
     }
 
     // If focus is on a cell, focus the next cell if any,
     // otherwise focus the parent row.
-    if (this.isCell(item)) {
+    if (this.isCell(item) && item.parentKey != null) {
       let parent = this.collection.getItem(item.parentKey);
+      if (!parent) {
+        return null;
+      }
       let children = getChildNodes(parent, this.collection);
-      let next = this.direction === 'rtl'
+      let next = (this.direction === 'rtl'
         ? getNthItem(children, item.index - 1)
-        : getNthItem(children, item.index + 1);
+        : getNthItem(children, item.index + 1)) ?? null;
 
       if (next) {
-        return next.key;
+        return next.key ?? null;
       }
 
       // focus row only if focusMode is set to row
       if (this.focusMode === 'row') {
-        return item.parentKey;
+        return item.parentKey ?? null;
       }
 
-      return this.direction === 'rtl' ? this.getFirstKey(key) : this.getLastKey(key);
+      return (this.direction === 'rtl' ? this.getFirstKey(key) : this.getLastKey(key)) ?? null;
     }
+    return null;
   }
 
   getKeyLeftOf(key: Key) {
     let item = this.collection.getItem(key);
     if (!item) {
-      return;
+      return null;
     }
 
     // If focus is on a row, focus the last child cell.
     if (this.isRow(item)) {
       let children = getChildNodes(item, this.collection);
-      return this.direction === 'rtl'
-        ? getFirstItem(children).key
-        : getLastItem(children).key;
+      return (this.direction === 'rtl'
+        ? getFirstItem(children)?.key
+        : getLastItem(children)?.key) ?? null;
     }
 
     // If focus is on a cell, focus the previous cell if any,
     // otherwise focus the parent row.
-    if (this.isCell(item)) {
+    if (this.isCell(item) && item.parentKey != null) {
       let parent = this.collection.getItem(item.parentKey);
+      if (!parent) {
+        return null;
+      }
       let children = getChildNodes(parent, this.collection);
-      let prev = this.direction === 'rtl'
+      let prev = (this.direction === 'rtl'
         ? getNthItem(children, item.index + 1)
-        : getNthItem(children, item.index - 1);
+        : getNthItem(children, item.index - 1)) ?? null;
 
       if (prev) {
-        return prev.key;
+        return prev.key ?? null;
       }
 
       // focus row only if focusMode is set to row
       if (this.focusMode === 'row') {
-        return item.parentKey;
+        return item.parentKey ?? null;
       }
 
-      return this.direction === 'rtl' ? this.getLastKey(key) : this.getFirstKey(key);
+      return (this.direction === 'rtl' ? this.getLastKey(key) : this.getFirstKey(key)) ?? null;
     }
+    return null;
   }
 
-  getFirstKey(key?: Key, global?: boolean) {
-    let item: Node<T>;
+  getFirstKey(fromKey?: Key, global?: boolean) {
+    let key: Key | null = fromKey ?? null;
+    let item: Node<T> | undefined | null;
     if (key != null) {
       item = this.collection.getItem(key);
       if (!item) {
-        return;
+        return null;
       }
 
       // If global flag is not set, and a cell is currently focused,
       // move focus to the first cell in the parent row.
-      if (this.isCell(item) && !global) {
+      if (this.isCell(item) && !global && item.parentKey != null) {
         let parent = this.collection.getItem(item.parentKey);
-        return getFirstItem(getChildNodes(parent, this.collection)).key;
+        if (!parent) {
+          return null;
+        }
+        return getFirstItem(getChildNodes(parent, this.collection))?.key ?? null;
       }
     }
 
     // Find the first row
-    key = this.findNextKey(null, item => item.type === 'item');
+    key = this.findNextKey(undefined, item => item.type === 'item');
 
     // If global flag is set (or if focus mode is cell), focus the first cell in the first row.
-    if ((key != null && item && this.isCell(item) && global) || this.focusMode === 'cell') {
+    if (key != null && ((item && this.isCell(item) && global) || this.focusMode === 'cell')) {
       let item = this.collection.getItem(key);
-      key = getFirstItem(getChildNodes(item, this.collection)).key;
+      if (!item) {
+        return null;
+      }
+      key = getFirstItem(getChildNodes(item, this.collection))?.key ?? null;
     }
 
     // Otherwise, focus the row itself.
     return key;
   }
 
-  getLastKey(key?: Key, global?: boolean) {
-    let item: Node<T>;
+  getLastKey(fromKey?: Key, global?: boolean) {
+    let key: Key | null = fromKey ?? null;
+    let item: Node<T> | undefined | null;
     if (key != null) {
       item = this.collection.getItem(key);
       if (!item) {
-        return;
+        return null;
       }
 
       // If global flag is not set, and a cell is currently focused,
       // move focus to the last cell in the parent row.
-      if (this.isCell(item) && !global) {
+      if (this.isCell(item) && !global && item.parentKey != null) {
         let parent = this.collection.getItem(item.parentKey);
+        if (!parent) {
+          return null;
+        }
         let children = getChildNodes(parent, this.collection);
-        return getLastItem(children).key;
+        return getLastItem(children)?.key ?? null;
       }
     }
 
     // Find the last row
-    key = this.findPreviousKey(null, item => item.type === 'item');
+    key = this.findPreviousKey(undefined, item => item.type === 'item');
 
     // If global flag is set (or if focus mode is cell), focus the last cell in the last row.
-    if ((key != null && item && this.isCell(item) && global) || this.focusMode === 'cell') {
+    if (key != null && ((item && this.isCell(item) && global) || this.focusMode === 'cell')) {
       let item = this.collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       let children = getChildNodes(item, this.collection);
-      key = getLastItem(children).key;
+      key = getLastItem(children)?.key ?? null;
     }
 
     // Otherwise, focus the row itself.
     return key;
   }
 
-  getKeyPageAbove(key: Key) {
+  getKeyPageAbove(fromKey: Key) {
+    let key: Key | null = fromKey;
     let itemRect = this.layoutDelegate.getItemRect(key);
     if (!itemRect) {
       return null;
@@ -283,15 +336,19 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
 
-    while (itemRect && itemRect.y > pageY) {
-      key = this.getKeyAbove(key);
+    while (itemRect && itemRect.y > pageY && key != null) {
+      key = this.getKeyAbove(key) ?? null;
+      if (key == null) {
+        break;
+      }
       itemRect = this.layoutDelegate.getItemRect(key);
     }
 
     return key;
   }
 
-  getKeyPageBelow(key: Key) {
+  getKeyPageBelow(fromKey: Key) {
+    let key: Key | null = fromKey;
     let itemRect = this.layoutDelegate.getItemRect(key);
 
     if (!itemRect) {
@@ -316,29 +373,39 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
   }
 
   getKeyForSearch(search: string, fromKey?: Key) {
+    let key: Key | null = fromKey ?? null;
     if (!this.collator) {
       return null;
     }
 
     let collection = this.collection;
-    let key = fromKey ?? this.getFirstKey();
+    key = fromKey ?? this.getFirstKey();
+    if (key == null) {
+      return null;
+    }
 
     // If the starting key is a cell, search from its parent row.
     let startItem = collection.getItem(key);
+    if (!startItem) {
+      return null;
+    }
     if (startItem.type === 'cell') {
-      key = startItem.parentKey;
+      key = startItem.parentKey ?? null;
     }
 
     let hasWrapped = false;
     while (key != null) {
       let item = collection.getItem(key);
+      if (!item) {
+        return null;
+      }
 
       // check row text value for match
       if (item.textValue) {
         let substring = item.textValue.slice(0, search.length);
         if (this.collator.compare(substring, search) === 0) {
           if (this.isRow(item) && this.focusMode === 'cell') {
-            return getFirstItem(getChildNodes(item, this.collection)).key;
+            return getFirstItem(getChildNodes(item, this.collection))?.key ?? null;
           }
 
           return item.key;
diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index cc82eedce40..8cb479fb0a3 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -149,7 +149,7 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     },
     state.isKeyboardNavigationDisabled ? navDisabledHandlers : collectionProps,
     // If collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
-    state.collection.size === 0 && {tabIndex: hasTabbableChild ? -1 : 0},
+    (state.collection.size === 0 && {tabIndex: hasTabbableChild ? -1 : 0}) || undefined,
     descriptionProps
   );
 
diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts
index 87c709b1d2b..a04d4f3fca1 100644
--- a/packages/@react-aria/grid/src/useGridCell.ts
+++ b/packages/@react-aria/grid/src/useGridCell.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
@@ -60,36 +60,38 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   } = props;
 
   let {direction} = useLocale();
-  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state);
+  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state)!;
 
   // We need to track the key of the item at the time it was last focused so that we force
   // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
-  let keyWhenFocused = useRef(null);
+  let keyWhenFocused = useRef<Key | null>(null);
 
   // Handles focusing the cell. If there is a focusable child,
   // it is focused, otherwise the cell itself is focused.
   let focus = () => {
-    let treeWalker = getFocusableTreeWalker(ref.current);
-    if (focusMode === 'child') {
-      // If focus is already on a focusable child within the cell, early return so we don't shift focus
-      if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
-        return;
-      }
+    if (ref.current) {
+      let treeWalker = getFocusableTreeWalker(ref.current);
+      if (focusMode === 'child') {
+        // If focus is already on a focusable child within the cell, early return so we don't shift focus
+        if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
+          return;
+        }
 
-      let focusable = state.selectionManager.childFocusStrategy === 'last'
-        ? last(treeWalker)
-        : treeWalker.firstChild() as FocusableElement;
-      if (focusable) {
-        focusSafely(focusable);
-        return;
+        let focusable = state.selectionManager.childFocusStrategy === 'last'
+          ? last(treeWalker)
+          : treeWalker.firstChild() as FocusableElement;
+        if (focusable) {
+          focusSafely(focusable);
+          return;
+        }
       }
-    }
 
-    if (
-      (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
-      !ref.current.contains(document.activeElement)
-    ) {
-      focusSafely(ref.current);
+      if (
+        (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
+        !ref.current.contains(document.activeElement)
+      ) {
+        focusSafely(ref.current);
+      }
     }
   };
 
@@ -105,7 +107,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   });
 
   let onKeyDownCapture = (e: ReactKeyboardEvent) => {
-    if (!e.currentTarget.contains(e.target as Element) || state.isKeyboardNavigationDisabled) {
+    if (!e.currentTarget.contains(e.target as Element) || state.isKeyboardNavigationDisabled || !ref.current || !document.activeElement) {
       return;
     }
 
@@ -115,7 +117,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     switch (e.key) {
       case 'ArrowLeft': {
         // Find the next focusable element within the cell.
-        let focusable = direction === 'rtl'
+        let focusable: FocusableElement | null = direction === 'rtl'
           ? walker.nextNode() as FocusableElement
           : walker.previousNode() as FocusableElement;
 
@@ -135,12 +137,12 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           // of this one, only one column, and the grid doesn't focus rows, then the next key will be the
           // same as this one. In that case we need to handle focusing either the cell or the first/last
           // child, depending on the focus mode.
-          let prev = keyboardDelegate.getKeyLeftOf(node.key);
+          let prev = keyboardDelegate.getKeyLeftOf?.(node.key);
           if (prev !== node.key) {
             // We prevent the capturing event from reaching children of the cell, e.g. pickers.
             // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
             // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
-            ref.current.parentElement.dispatchEvent(
+            ref.current.parentElement?.dispatchEvent(
               new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
             );
             break;
@@ -163,7 +165,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
         break;
       }
       case 'ArrowRight': {
-        let focusable = direction === 'rtl'
+        let focusable: FocusableElement | null = direction === 'rtl'
           ? walker.previousNode() as FocusableElement
           : walker.nextNode() as FocusableElement;
 
@@ -177,12 +179,12 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           focusSafely(focusable);
           scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
         } else {
-          let next = keyboardDelegate.getKeyRightOf(node.key);
+          let next = keyboardDelegate.getKeyRightOf?.(node.key);
           if (next !== node.key) {
             // We prevent the capturing event from reaching children of the cell, e.g. pickers.
             // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
             // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
-            ref.current.parentElement.dispatchEvent(
+            ref.current.parentElement?.dispatchEvent(
               new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
             );
             break;
@@ -212,7 +214,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
         if (!e.altKey && ref.current.contains(e.target as Element)) {
           e.stopPropagation();
           e.preventDefault();
-          ref.current.parentElement.dispatchEvent(
+          ref.current.parentElement?.dispatchEvent(
             new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
           );
         }
@@ -266,7 +268,9 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
       let tabindex = el.getAttribute('tabindex');
       el.removeAttribute('tabindex');
       requestAnimationFrame(() => {
-        el.setAttribute('tabindex', tabindex);
+        if (tabindex != null) {
+          el.setAttribute('tabindex', tabindex);
+        }
       });
     };
   }
@@ -278,10 +282,10 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
 }
 
 function last(walker: TreeWalker) {
-  let next: FocusableElement;
-  let last: FocusableElement;
+  let next: FocusableElement | null = null;
+  let last: FocusableElement | null = null;
   do {
-    last = walker.lastChild() as FocusableElement;
+    last = walker.lastChild() as FocusableElement | null;
     if (last) {
       next = last;
     }
diff --git a/packages/@react-aria/grid/src/useGridRow.ts b/packages/@react-aria/grid/src/useGridRow.ts
index eaa150c4071..30793497c38 100644
--- a/packages/@react-aria/grid/src/useGridRow.ts
+++ b/packages/@react-aria/grid/src/useGridRow.ts
@@ -52,8 +52,8 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
     onAction
   } = props;
 
-  let {actions} = gridMap.get(state);
-  let onRowAction = actions.onRowAction ? () => actions.onRowAction(node.key) : onAction;
+  let {actions} = gridMap.get(state)!;
+  let onRowAction = actions.onRowAction ? () => actions.onRowAction?.(node.key) : onAction;
   let {itemProps, ...states} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,
diff --git a/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts b/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts
index fbb1491f6ff..100b93cefc5 100644
--- a/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts
+++ b/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts
@@ -58,7 +58,7 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
 
     // If adding or removing a single row from the selection, announce the name of that item.
     let isReplace = state.selectionManager.selectionBehavior === 'replace';
-    let messages = [];
+    let messages: string[] = [];
 
     if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
       if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
diff --git a/packages/@react-aria/grid/src/useHighlightSelectionDescription.ts b/packages/@react-aria/grid/src/useHighlightSelectionDescription.ts
index 08d79fbc748..1d13c402ea9 100644
--- a/packages/@react-aria/grid/src/useHighlightSelectionDescription.ts
+++ b/packages/@react-aria/grid/src/useHighlightSelectionDescription.ts
@@ -39,7 +39,7 @@ export function useHighlightSelectionDescription(props: HighlightSelectionDescri
     let selectionMode = props.selectionManager.selectionMode;
     let selectionBehavior = props.selectionManager.selectionBehavior;
 
-    let message = undefined;
+    let message: string | undefined;
     if (shouldLongPress) {
       message = stringFormatter.format('longPressToSelect');
     }
diff --git a/packages/@react-aria/grid/src/utils.ts b/packages/@react-aria/grid/src/utils.ts
index 169d3c168c2..65ffeee0939 100644
--- a/packages/@react-aria/grid/src/utils.ts
+++ b/packages/@react-aria/grid/src/utils.ts
@@ -17,8 +17,8 @@ import type {Key, KeyboardDelegate} from '@react-types/shared';
 interface GridMapShared {
   keyboardDelegate: KeyboardDelegate,
   actions: {
-    onRowAction: (key: Key) => void,
-    onCellAction: (key: Key) => void
+    onRowAction?: (key: Key) => void,
+    onCellAction?: (key: Key) => void
   }
 }
 
diff --git a/packages/@react-aria/grid/stories/example.tsx b/packages/@react-aria/grid/stories/example.tsx
index e1e84ed3e9a..46c2aa44e47 100644
--- a/packages/@react-aria/grid/stories/example.tsx
+++ b/packages/@react-aria/grid/stories/example.tsx
@@ -1,3 +1,15 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {GridCollection, useGridState} from '@react-stately/grid';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -24,7 +36,7 @@ export function Grid(props) {
     }), [state.collection])
   });
 
-  let ref = React.useRef(undefined);
+  let ref = React.useRef(null);
   let {gridProps} = useGrid({
     'aria-label': 'Grid',
     focusMode: gridFocusMode
@@ -44,8 +56,8 @@ export function Grid(props) {
 }
 
 function Row({state, item, focusMode}) {
-  let rowRef = React.useRef(undefined);
-  let cellRef = React.useRef(undefined);
+  let rowRef = React.useRef(null);
+  let cellRef = React.useRef(null);
   let cellNode = [...item.childNodes][0];
   let {rowProps} = useGridRow({node: item}, state, rowRef);
   let {gridCellProps} = useGridCell({
@@ -64,8 +76,8 @@ function Row({state, item, focusMode}) {
   });
 
   return (
-    <div {...mergeProps(rowProps, rowFocusProps)} ref={rowRef} style={{outline: isRowFocused ? '2px solid red' : null}}>
-      <div {...mergeProps(gridCellProps, cellFocusProps)} ref={cellRef} style={{outline: isCellFocused ? '2px solid green' : null}}>
+    <div {...mergeProps(rowProps, rowFocusProps)} ref={rowRef} style={{outline: isRowFocused ? '2px solid red' : undefined}}>
+      <div {...mergeProps(gridCellProps, cellFocusProps)} ref={cellRef} style={{outline: isCellFocused ? '2px solid green' : undefined}}>
         {cellNode.rendered}
       </div>
     </div>
diff --git a/packages/@react-aria/gridlist/src/useGridListItem.ts b/packages/@react-aria/gridlist/src/useGridListItem.ts
index 898cebb3f60..a6e5a910838 100644
--- a/packages/@react-aria/gridlist/src/useGridListItem.ts
+++ b/packages/@react-aria/gridlist/src/useGridListItem.ts
@@ -11,7 +11,7 @@
  */
 
 import {chain, getScrollParent, mergeProps, scrollIntoViewport, useSlotId, useSyntheticLinkProps} from '@react-aria/utils';
-import {DOMAttributes, FocusableElement, RefObject, Node as RSNode} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, Key, RefObject, Node as RSNode} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {getLastItem} from '@react-stately/collections';
 import {getRowId, listMap} from './utils';
@@ -67,18 +67,19 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
 
   // let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/gridlist');
   let {direction} = useLocale();
-  let {onAction, linkBehavior, keyboardNavigationBehavior} = listMap.get(state);
+  let {onAction, linkBehavior, keyboardNavigationBehavior} = listMap.get(state)!;
   let descriptionId = useSlotId();
 
   // We need to track the key of the item at the time it was last focused so that we force
   // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
-  let keyWhenFocused = useRef(null);
+  let keyWhenFocused = useRef<Key | null>(null);
   let focus = () => {
     // Don't shift focus to the row if the active element is a element within the row already
     // (e.g. clicking on a row button)
     if (
-      (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
-      !ref.current?.contains(document.activeElement)
+      ref.current !== null &&
+      ((keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
+      !ref.current?.contains(document.activeElement))
     ) {
       focusSafely(ref.current);
     }
@@ -90,19 +91,29 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
   if (node != null && 'expandedKeys' in state) {
     // TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
     // true...
-    hasChildRows = [...state.collection.getChildren(node.key)].length > 1;
+    let children = state.collection.getChildren?.(node.key);
+    hasChildRows = [...(children ?? [])].length > 1;
     if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) {
       onAction = () => state.toggleKey(node.key);
     }
 
     let isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
+    let setSize = 1;
+    if (node.level > 0 && node?.parentKey != null) {
+      let parent = state.collection.getItem(node.parentKey);
+      if (parent) {
+        // siblings must exist because our original node exists, same with lastItem
+        let siblings = state.collection.getChildren?.(parent.key)!;
+        setSize = getLastItem(siblings)!.index + 1;
+      }
+    } else {
+      setSize = ([...state.collection].filter(row => row.level === 0).at(-1)?.index ?? 0) + 1;
+    }
     treeGridRowProps = {
       'aria-expanded': isExpanded,
       'aria-level': node.level + 1,
       'aria-posinset': node?.index + 1,
-      'aria-setsize': node.level > 0 ?
-        (getLastItem(state.collection.getChildren(node?.parentKey))).index + 1 :
-        [...state.collection].filter(row => row.level === 0).at(-1).index + 1
+      'aria-setsize': setSize
     };
   }
 
@@ -118,7 +129,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
   });
 
   let onKeyDown = (e: ReactKeyboardEvent) => {
-    if (!e.currentTarget.contains(e.target as Element)) {
+    if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {
       return;
     }
 
@@ -206,7 +217,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
         if (!e.altKey && ref.current.contains(e.target as Element)) {
           e.stopPropagation();
           e.preventDefault();
-          ref.current.parentElement.dispatchEvent(
+          ref.current.parentElement?.dispatchEvent(
             new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
           );
         }
@@ -287,10 +298,10 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
 }
 
 function last(walker: TreeWalker) {
-  let next: FocusableElement;
-  let last: FocusableElement;
+  let next: FocusableElement | null = null;
+  let last: FocusableElement | null = null;
   do {
-    last = walker.lastChild() as FocusableElement;
+    last = walker.lastChild() as FocusableElement | null;
     if (last) {
       next = last;
     }
diff --git a/packages/@react-aria/gridlist/src/utils.ts b/packages/@react-aria/gridlist/src/utils.ts
index d7ec213c9fd..50c1089bfa0 100644
--- a/packages/@react-aria/gridlist/src/utils.ts
+++ b/packages/@react-aria/gridlist/src/utils.ts
@@ -15,7 +15,7 @@ import type {ListState} from '@react-stately/list';
 
 interface ListMapShared {
   id: string,
-  onAction: (key: Key) => void,
+  onAction?: (key: Key) => void,
   linkBehavior?: 'action' | 'selection' | 'override',
   keyboardNavigationBehavior: 'arrow' | 'tab'
 }
@@ -25,7 +25,7 @@ interface ListMapShared {
 export const listMap = new WeakMap<ListState<unknown>, ListMapShared>();
 
 export function getRowId<T>(state: ListState<T>, key: Key) {
-  let {id} = listMap.get(state);
+  let {id} = listMap.get(state) ?? {};
   if (!id) {
     throw new Error('Unknown list');
   }
diff --git a/packages/@react-aria/i18n/src/useDefaultLocale.ts b/packages/@react-aria/i18n/src/useDefaultLocale.ts
index 30989a1072a..456f68764c7 100644
--- a/packages/@react-aria/i18n/src/useDefaultLocale.ts
+++ b/packages/@react-aria/i18n/src/useDefaultLocale.ts
@@ -35,7 +35,6 @@ export function getDefaultLocale(): Locale {
     || 'en-US';
 
   try {
-    // @ts-ignore
     Intl.DateTimeFormat.supportedLocalesOf([locale]);
   } catch {
     locale = 'en-US';
diff --git a/packages/@react-aria/i18n/src/utils.ts b/packages/@react-aria/i18n/src/utils.ts
index 1254f280daa..9531f6e1aa2 100644
--- a/packages/@react-aria/i18n/src/utils.ts
+++ b/packages/@react-aria/i18n/src/utils.ts
@@ -19,7 +19,6 @@ const RTL_LANGS = new Set(['ae', 'ar', 'arc', 'bcc', 'bqi', 'ckb', 'dv', 'fa', '
  */
 export function isRTL(localeString: string) {
   // If the Intl.Locale API is available, use it to get the locale's text direction.
-  // @ts-ignore
   if (Intl.Locale) {
     let locale = new Intl.Locale(localeString).maximize();
 
diff --git a/packages/@react-aria/menu/src/useMenu.ts b/packages/@react-aria/menu/src/useMenu.ts
index b13c2a22f07..37c644b9ba2 100644
--- a/packages/@react-aria/menu/src/useMenu.ts
+++ b/packages/@react-aria/menu/src/useMenu.ts
@@ -80,7 +80,7 @@ export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref:
       onKeyDown: (e) => {
         // don't clear the menu selected keys if the user is presses escape since escape closes the menu
         if (e.key !== 'Escape') {
-          listProps.onKeyDown(e);
+          listProps.onKeyDown?.(e);
         }
       }
     })
diff --git a/packages/@react-aria/menu/src/useMenuItem.ts b/packages/@react-aria/menu/src/useMenuItem.ts
index ac5dd657280..328985b0ac6 100644
--- a/packages/@react-aria/menu/src/useMenuItem.ts
+++ b/packages/@react-aria/menu/src/useMenuItem.ts
@@ -59,7 +59,7 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
   'aria-label'?: string,
 
   /** The unique key for the menu item. */
-  key?: Key,
+  key: Key,
 
   /**
    * Handler that is called when the menu should close after selecting an item.
@@ -128,7 +128,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
   let isDisabled = props.isDisabled ?? selectionManager.isDisabled(key);
   let isSelected = props.isSelected ?? selectionManager.isSelected(key);
-  let data = menuData.get(state);
+  let data = menuData.get(state)!;
   let item = state.collection.getItem(key);
   let onClose = props.onClose || data.onClose;
   let router = useRouter();
@@ -149,7 +149,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
       onAction(key);
     }
 
-    if (e.target instanceof HTMLAnchorElement) {
+    if (e.target instanceof HTMLAnchorElement && item) {
       router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);
     }
   };
@@ -279,9 +279,9 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   });
 
   let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});
-  let domProps = filterDOMProps(item.props);
+  let domProps = filterDOMProps(item?.props);
   delete domProps.id;
-  let linkProps = useLinkProps(item.props);
+  let linkProps = useLinkProps(item?.props);
 
   return {
     menuItemProps: {
diff --git a/packages/@react-aria/menu/src/useMenuTrigger.ts b/packages/@react-aria/menu/src/useMenuTrigger.ts
index 338b4b06fcd..3e22777bb1d 100644
--- a/packages/@react-aria/menu/src/useMenuTrigger.ts
+++ b/packages/@react-aria/menu/src/useMenuTrigger.ts
@@ -47,7 +47,7 @@ export interface MenuTriggerAria<T> {
  */
 export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {
   let {
-    type = 'menu' as AriaMenuTriggerProps['type'],
+    type = 'menu',
     isDisabled,
     trigger = 'press'
   } = props;
@@ -128,6 +128,7 @@ export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTrigge
   delete triggerProps.onPress;
 
   return {
+    // @ts-ignore - TODO we pass out both DOMAttributes AND AriaButtonProps, but useButton will discard the longPress event handlers, it's only through PressResponder magic that this works for RSP and RAC. it does not work in aria examples
     menuTriggerProps: {
       ...triggerProps,
       ...(trigger === 'press' ? pressProps : longPressProps),
diff --git a/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts b/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts
index 751105d7f2e..bc30a1241e9 100644
--- a/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts
+++ b/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts
@@ -63,7 +63,7 @@ export function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions) {
     let submenu = submenuRef.current;
     let menu = menuRef.current;
 
-    if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {
+    if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
       reset();
       return;
     }
diff --git a/packages/@react-aria/menu/src/useSubmenuTrigger.ts b/packages/@react-aria/menu/src/useSubmenuTrigger.ts
index 63afdb542b1..567a00516f3 100644
--- a/packages/@react-aria/menu/src/useSubmenuTrigger.ts
+++ b/packages/@react-aria/menu/src/useSubmenuTrigger.ts
@@ -41,7 +41,7 @@ export interface AriaSubmenuTriggerProps {
   delay?: number
 }
 
-interface SubmenuTriggerProps extends AriaMenuItemProps {
+interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
   /** Whether the submenu trigger is in an expanded state. */
   isOpen: boolean
 }
@@ -101,14 +101,14 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
         if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {
           e.stopPropagation();
           onSubmenuClose();
-          ref.current.focus();
+          ref.current?.focus();
         }
         break;
       case 'ArrowRight':
         if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {
           e.stopPropagation();
           onSubmenuClose();
-          ref.current.focus();
+          ref.current?.focus();
         }
         break;
       case 'Escape':
@@ -124,7 +124,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
     submenuLevel: state.submenuLevel,
     ...(type === 'menu' && {
       onClose: state.closeAll,
-      autoFocus: state.focusStrategy,
+      autoFocus: state.focusStrategy ?? undefined,
       onKeyDown: submenuKeyDown
     })
   };
@@ -205,7 +205,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
   };
 
   let onBlur = (e) => {
-    if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {
+    if (state.isOpen && parentMenuRef.current?.contains(e.relatedTarget)) {
       onSubmenuClose();
     }
   };
diff --git a/packages/@react-aria/menu/stories/useMenu.stories.tsx b/packages/@react-aria/menu/stories/useMenu.stories.tsx
index ca71628b49c..334c0bb323e 100644
--- a/packages/@react-aria/menu/stories/useMenu.stories.tsx
+++ b/packages/@react-aria/menu/stories/useMenu.stories.tsx
@@ -54,7 +54,7 @@ function MenuButton(props) {
   let state = useMenuTriggerState(props);
 
   // Get props for the menu trigger and menu elements
-  let ref = React.useRef(undefined);
+  let ref = React.useRef(null);
   let {menuTriggerProps, menuProps} = useMenuTrigger({}, state, ref);
 
   // Get props for the button based on the trigger props from useMenuTrigger
@@ -84,12 +84,12 @@ function MenuPopup(props) {
   let state = useTreeState({...props, selectionMode: 'none'});
 
   // Get props for the menu element
-  let ref = React.useRef(undefined);
+  let ref = React.useRef(null);
   let {menuProps} = useMenu(props, state, ref);
 
   // Handle events that should cause the menu to close,
   // e.g. blur, clicking outside, or pressing the escape key.
-  let overlayRef = React.useRef(undefined);
+  let overlayRef = React.useRef(null);
   // before useOverlay so this action will get called
   useInteractOutside({ref: overlayRef, onInteractOutside: action('onInteractOutside')});
   let {overlayProps} = useOverlay(
@@ -139,7 +139,7 @@ function MenuPopup(props) {
 
 function MenuItem({item, state, onAction, onClose}) {
   // Get props for the menu item element
-  let ref = React.useRef(undefined);
+  let ref = React.useRef(null);
   let {menuItemProps} = useMenuItem(
     {
       key: item.key,
diff --git a/packages/@react-aria/overlays/src/Overlay.tsx b/packages/@react-aria/overlays/src/Overlay.tsx
index 80e2d0fb6ce..49b0965289a 100644
--- a/packages/@react-aria/overlays/src/Overlay.tsx
+++ b/packages/@react-aria/overlays/src/Overlay.tsx
@@ -39,7 +39,7 @@ export interface OverlayProps {
   isExiting?: boolean
 }
 
-export const OverlayContext = React.createContext(null);
+export const OverlayContext = React.createContext<{contain: boolean, setContain: React.Dispatch<React.SetStateAction<boolean>>} | null>(null);
 
 /**
  * A container which renders an overlay such as a popover or modal in a portal,
diff --git a/packages/@react-aria/overlays/src/PortalProvider.tsx b/packages/@react-aria/overlays/src/PortalProvider.tsx
index c21030f59b4..447cd7a163b 100644
--- a/packages/@react-aria/overlays/src/PortalProvider.tsx
+++ b/packages/@react-aria/overlays/src/PortalProvider.tsx
@@ -23,7 +23,7 @@ export function UNSTABLE_PortalProvider(props: PortalProviderProps & {children:
   let {getContainer} = props;
   let {getContainer: ctxGetContainer} = useUNSTABLE_PortalContext();
   return (
-    <PortalContext.Provider value={{getContainer: getContainer === null ? null : getContainer ?? ctxGetContainer}}>
+    <PortalContext.Provider value={{getContainer: getContainer === null ? undefined : getContainer ?? ctxGetContainer}}>
       {props.children}
     </PortalContext.Provider>
   );
diff --git a/packages/@react-aria/overlays/src/ariaHideOutside.ts b/packages/@react-aria/overlays/src/ariaHideOutside.ts
index 791aa9b6e8b..31be6884dda 100644
--- a/packages/@react-aria/overlays/src/ariaHideOutside.ts
+++ b/packages/@react-aria/overlays/src/ariaHideOutside.ts
@@ -13,7 +13,11 @@
 // Keeps a ref count of all hidden elements. Added to when hiding an element, and
 // subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
 let refCountMap = new WeakMap<Element, number>();
-let observerStack = [];
+interface ObserverWrapper {
+  observe: () => void,
+  disconnect: () => void
+}
+let observerStack: Array<ObserverWrapper> = [];
 
 /**
  * Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
@@ -40,7 +44,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
       if (
         visibleNodes.has(node) ||
-        (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
+        (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
       ) {
         return NodeFilter.FILTER_REJECT;
       }
@@ -133,7 +137,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
   observer.observe(root, {childList: true, subtree: true});
 
-  let observerWrapper = {
+  let observerWrapper: ObserverWrapper = {
     observe() {
       observer.observe(root, {childList: true, subtree: true});
     },
@@ -149,6 +153,9 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
     for (let node of hiddenNodes) {
       let count = refCountMap.get(node);
+      if (count == null) {
+        continue;
+      }
       if (count === 1) {
         node.removeAttribute('aria-hidden');
         refCountMap.delete(node);
diff --git a/packages/@react-aria/overlays/src/calculatePosition.ts b/packages/@react-aria/overlays/src/calculatePosition.ts
index e2c4a361dff..2e929bdbfb7 100644
--- a/packages/@react-aria/overlays/src/calculatePosition.ts
+++ b/packages/@react-aria/overlays/src/calculatePosition.ts
@@ -64,10 +64,10 @@ interface PositionOpts {
 type HeightGrowthDirection = 'top' | 'bottom';
 
 export interface PositionResult {
-  position?: Position,
+  position: Position,
   arrowOffsetLeft?: number,
   arrowOffsetTop?: number,
-  maxHeight?: number,
+  maxHeight: number,
   placement: PlacementAxis
 }
 
@@ -102,13 +102,12 @@ const TOTAL_SIZE = {
 
 const PARSED_PLACEMENT_CACHE = {};
 
-// @ts-ignore
-let visualViewport = typeof document !== 'undefined' && window.visualViewport;
+let visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
 
 function getContainerDimensions(containerNode: Element): Dimensions {
   let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
   let scroll: Position = {};
-  let isPinchZoomedIn = visualViewport?.scale > 1;
+  let isPinchZoomedIn = (visualViewport?.scale ?? 1) > 1;
 
   if (containerNode.tagName === 'BODY') {
     let documentElement = document.documentElement;
@@ -141,8 +140,8 @@ function getContainerDimensions(containerNode: Element): Dimensions {
     // before pinch zoom happens
     scroll.top = 0;
     scroll.left = 0;
-    top = visualViewport.pageTop;
-    left = visualViewport.pageLeft;
+    top = visualViewport?.pageTop ?? 0;
+    left = visualViewport?.pageLeft ?? 0;
   }
 
   return {width, height, totalWidth, totalHeight, scroll, top, left};
@@ -174,7 +173,7 @@ function getDelta(
   padding: number,
   containerOffsetWithBoundary: Offset
 ) {
-  let containerScroll = containerDimensions.scroll[axis];
+  let containerScroll = containerDimensions.scroll[axis] ?? 0;
   // The height/width of the boundary. Matches the axis along which we are adjusting the overlay position
   let boundarySize = boundaryDimensions[AXIS_SIZE[axis]];
   // Calculate the edges of the boundary (accomodating for the boundary padding) and the edges of the overlay.
@@ -240,26 +239,26 @@ function computePosition(
   let position: Position = {};
 
   // button position
-  position[crossAxis] = childOffset[crossAxis];
+  position[crossAxis] = childOffset[crossAxis] ?? 0;
   if (crossPlacement === 'center') {
     //  + (button size / 2) - (overlay size / 2)
     // at this point the overlay center should match the button center
-    position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
+    position[crossAxis]! += ((childOffset[crossSize] ?? 0) - (overlaySize[crossSize] ?? 0)) / 2;
   } else if (crossPlacement !== crossAxis) {
     //  + (button size) - (overlay size)
     // at this point the overlay bottom should match the button bottom
-    position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]);
+    position[crossAxis]! += (childOffset[crossSize] ?? 0) - (overlaySize[crossSize] ?? 0);
   }/* else {
     the overlay top should match the button top
   } */
 
-  position[crossAxis] += crossOffset;
+  position[crossAxis]! += crossOffset;
 
   // overlay top overlapping arrow with button bottom
   const minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset;
   // overlay bottom overlapping arrow with button top
   const maxPosition = childOffset[crossAxis] + childOffset[crossSize] - arrowSize - arrowBoundaryOffset;
-  position[crossAxis] = clamp(position[crossAxis], minPosition, maxPosition);
+  position[crossAxis] = clamp(position[crossAxis]!, minPosition, maxPosition);
 
   // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
   if (placement === axis) {
@@ -288,19 +287,19 @@ function getMaxHeight(
   const containerHeight = (isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[TOTAL_SIZE.height]);
   // For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method
   // used in computePosition.
-  let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight);
+  let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - (position.bottom ?? 0) - overlayHeight);
   let maxHeight = heightGrowthDirection !== 'top' ?
     // We want the distance between the top of the overlay to the bottom of the boundary
     Math.max(0,
-      (boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the bottom of the boundary
+      (boundaryDimensions.height + boundaryDimensions.top + (boundaryDimensions.scroll.top ?? 0)) // this is the bottom of the boundary
       - overlayTop // this is the top of the overlay
-      - (margins.top + margins.bottom + padding) // save additional space for margin and padding
+      - ((margins.top ?? 0) + (margins.bottom ?? 0) + padding) // save additional space for margin and padding
     )
     // We want the distance between the bottom of the overlay to the top of the boundary
     : Math.max(0,
       (overlayTop + overlayHeight) // this is the bottom of the overlay
-      - (boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the top of the boundary
-      - (margins.top + margins.bottom + padding) // save additional space for margin and padding
+      - (boundaryDimensions.top + (boundaryDimensions.scroll.top ?? 0)) // this is the top of the boundary
+      - ((margins.top ?? 0) + (margins.bottom ?? 0) + padding) // save additional space for margin and padding
     );
   return Math.min(boundaryDimensions.height - (padding * 2), maxHeight);
 }
@@ -315,10 +314,10 @@ function getAvailableSpace(
 ) {
   let {placement, axis, size} = placementInfo;
   if (placement === axis) {
-    return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[FLIPPED_DIRECTION[axis]] - padding);
+    return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - (boundaryDimensions.scroll[axis] ?? 0) + containerOffsetWithBoundary[axis] - (margins[axis] ?? 0) - margins[FLIPPED_DIRECTION[axis]] - padding);
   }
 
-  return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[FLIPPED_DIRECTION[axis]] - padding);
+  return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - (margins[axis] ?? 0) - margins[FLIPPED_DIRECTION[axis]] - padding);
 }
 
 export function calculatePositionInternal(
@@ -389,8 +388,8 @@ export function calculatePositionInternal(
     }
   }
 
-  let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
-  position[crossAxis] += delta;
+  let delta = getDelta(crossAxis, position[crossAxis]!, overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
+  position[crossAxis]! += delta;
 
   let maxHeight = getMaxHeight(
     position,
@@ -410,8 +409,8 @@ export function calculatePositionInternal(
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
 
   position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
-  delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
-  position[crossAxis] += delta;
+  delta = getDelta(crossAxis, position[crossAxis]!, overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
+  position[crossAxis]! += delta;
 
   let arrowPosition: Position = {};
 
@@ -420,12 +419,12 @@ export function calculatePositionInternal(
   // childOffset[crossAxis] + .5 * childOffset[crossSize] = absolute position with respect to the trigger's coordinate system that would place the arrow in the center of the trigger
   // position[crossAxis] - margins[AXIS[crossAxis]] = value use to transform the position to a value with respect to the overlay's coordinate system. A child element's (aka arrow) position absolute's "0"
   // is positioned after the margin of its parent (aka overlay) so we need to subtract it to get the proper coordinate transform
-  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis] - margins[AXIS[crossAxis]];
+  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis]! - margins[AXIS[crossAxis]];
 
   // Min/Max position limits for the arrow with respect to the overlay
   const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
   // overlaySize[crossSize] - margins = true size of the overlay
-  const overlayMargin = AXIS[crossAxis] === 'left' ? margins.left + margins.right : margins.top + margins.bottom;
+  const overlayMargin = AXIS[crossAxis] === 'left' ? (margins.left ?? 0) + (margins.right ?? 0) : (margins.top ?? 0) + (margins.bottom ?? 0);
   const arrowMaxPosition = overlaySize[crossSize] - overlayMargin - (arrowSize / 2) - arrowBoundaryOffset;
 
   // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
@@ -479,8 +478,8 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
 
   let overlaySize: Offset = getOffset(overlayNode);
   let margins = getMargins(overlayNode);
-  overlaySize.width += margins.left + margins.right;
-  overlaySize.height += margins.top + margins.bottom;
+  overlaySize.width += (margins.left ?? 0) + (margins.right ?? 0);
+  overlaySize.height += (margins.top ?? 0) + (margins.bottom ?? 0);
 
   let scrollSize = getScroll(scrollNode);
   let boundaryDimensions = getContainerDimensions(boundaryElement);
@@ -590,9 +589,7 @@ function isContainingBlock(node: Element): boolean {
     /transform|perspective/.test(style.willChange) ||
     style.filter !== 'none' ||
     style.contain === 'paint' ||
-    // @ts-ignore
     ('backdropFilter' in style && style.backdropFilter !== 'none') ||
-    // @ts-ignore
     ('WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none')
   );
 }
diff --git a/packages/@react-aria/overlays/src/useCloseOnScroll.ts b/packages/@react-aria/overlays/src/useCloseOnScroll.ts
index d6784f35544..09588b09a5b 100644
--- a/packages/@react-aria/overlays/src/useCloseOnScroll.ts
+++ b/packages/@react-aria/overlays/src/useCloseOnScroll.ts
@@ -35,7 +35,7 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions) {
       return;
     }
 
-    let onScroll = (e: MouseEvent) => {
+    let onScroll = (e: Event) => {
       // Ignore if scrolling an scrollable region outside the trigger's tree.
       let target = e.target;
       // window is not a Node and doesn't have contain, but window contains everything
diff --git a/packages/@react-aria/overlays/src/useModal.tsx b/packages/@react-aria/overlays/src/useModal.tsx
index 748364d5e81..a51c5ce2a5a 100644
--- a/packages/@react-aria/overlays/src/useModal.tsx
+++ b/packages/@react-aria/overlays/src/useModal.tsx
@@ -79,7 +79,7 @@ export function useModalProvider(): ModalProviderAria {
   let context = useContext(Context);
   return {
     modalProviderProps: {
-      'aria-hidden': context && context.modalCount > 0 ? true : null
+      'aria-hidden': context && context.modalCount > 0 ? true : undefined
     }
   };
 }
@@ -123,7 +123,7 @@ export interface OverlayContainerProps extends ModalProviderProps {
  * nested modal is opened. Only the top-most modal or overlay should
  * be accessible at once.
  */
-export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal {
+export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal | null {
   let isSSR = useIsSSR();
   let {portalContainer = isSSR ? null : document.body, ...rest} = props;
 
diff --git a/packages/@react-aria/overlays/src/useModalOverlay.ts b/packages/@react-aria/overlays/src/useModalOverlay.ts
index de0412ffad2..4f95655a60b 100644
--- a/packages/@react-aria/overlays/src/useModalOverlay.ts
+++ b/packages/@react-aria/overlays/src/useModalOverlay.ts
@@ -57,7 +57,7 @@ export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTrig
   useOverlayFocusContain();
 
   useEffect(() => {
-    if (state.isOpen) {
+    if (state.isOpen && ref.current) {
       return ariaHideOutside([ref.current]);
     }
   }, [state.isOpen, ref]);
diff --git a/packages/@react-aria/overlays/src/useOverlay.ts b/packages/@react-aria/overlays/src/useOverlay.ts
index c5b7dc2432c..2ebeeabad4a 100644
--- a/packages/@react-aria/overlays/src/useOverlay.ts
+++ b/packages/@react-aria/overlays/src/useOverlay.ts
@@ -120,7 +120,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
   };
 
   // Handle clicking outside the overlay to close it
-  useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : null, onInteractOutsideStart});
+  useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, onInteractOutsideStart});
 
   let {focusWithinProps} = useFocusWithin({
     isDisabled: !shouldCloseOnBlur,
@@ -139,7 +139,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
       }
 
       if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {
-        onClose();
+        onClose?.();
       }
     }
   });
diff --git a/packages/@react-aria/overlays/src/useOverlayPosition.ts b/packages/@react-aria/overlays/src/useOverlayPosition.ts
index 39b06a8198b..bb1ad72f5e6 100644
--- a/packages/@react-aria/overlays/src/useOverlayPosition.ts
+++ b/packages/@react-aria/overlays/src/useOverlayPosition.ts
@@ -67,7 +67,7 @@ export interface PositionAria {
   /** Props for the overlay tip arrow if any. */
   arrowProps: DOMAttributes,
   /** Placement of the overlay with respect to the overlay trigger. */
-  placement: PlacementAxis,
+  placement: PlacementAxis | null,
   /** Updates the position of the overlay. */
   updatePosition(): void
 }
@@ -77,8 +77,7 @@ interface ScrollAnchor {
   offset: number
 }
 
-// @ts-ignore
-let visualViewport = typeof document !== 'undefined' && window.visualViewport;
+let visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
 
 /**
  * Handles positioning overlays like popovers and menus relative to a trigger
@@ -103,13 +102,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     maxHeight,
     arrowBoundaryOffset = 0
   } = props;
-  let [position, setPosition] = useState<PositionResult>({
-    position: {},
-    arrowOffsetLeft: undefined,
-    arrowOffsetTop: undefined,
-    maxHeight: undefined,
-    placement: undefined
-  });
+  let [position, setPosition] = useState<PositionResult | null>(null);
 
   let deps = [
     shouldUpdatePosition,
@@ -154,17 +147,17 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     // changes, the focused element appears to stay in the same position.
     let anchor: ScrollAnchor | null = null;
     if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
-      let anchorRect = document.activeElement.getBoundingClientRect();
+      let anchorRect = document.activeElement?.getBoundingClientRect();
       let scrollRect = scrollRef.current.getBoundingClientRect();
       // Anchor from the top if the offset is in the top half of the scrollable element,
       // otherwise anchor from the bottom.
       anchor = {
         type: 'top',
-        offset: anchorRect.top - scrollRect.top
+        offset: (anchorRect?.top ?? 0) - scrollRect.top
       };
       if (anchor.offset > scrollRect.height / 2) {
         anchor.type = 'bottom';
-        anchor.offset = anchorRect.bottom - scrollRect.bottom;
+        anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;
       }
     }
 
@@ -192,6 +185,10 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       arrowBoundaryOffset
     });
 
+    if (!position.position) {
+      return;
+    }
+
     // Modify overlay styles directly so positioning happens immediately without the need of a second render
     // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
     overlay.style.top = '';
@@ -199,11 +196,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     overlay.style.left = '';
     overlay.style.right = '';
 
-    Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px');
-    overlay.style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
+    Object.keys(position.position).forEach(key => overlay.style[key] = (position.position!)[key] + 'px');
+    overlay.style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : '';
 
     // Restore scroll position relative to anchor element.
-    if (anchor) {
+    if (anchor && document.activeElement && scrollRef.current) {
       let anchorRect = document.activeElement.getBoundingClientRect();
       let scrollRect = scrollRef.current.getBoundingClientRect();
       let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
@@ -268,7 +265,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
 
   let close = useCallback(() => {
     if (!isResizing.current) {
-      onClose();
+      onClose?.();
     }
   }, [onClose, isResizing]);
 
@@ -285,17 +282,17 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       style: {
         position: 'absolute',
         zIndex: 100000, // should match the z-index in ModalTrigger
-        ...position.position,
-        maxHeight: position.maxHeight ?? '100vh'
+        ...position?.position,
+        maxHeight: position?.maxHeight ?? '100vh'
       }
     },
-    placement: position.placement,
+    placement: position?.placement ?? null,
     arrowProps: {
       'aria-hidden': 'true',
       role: 'presentation',
       style: {
-        left: position.arrowOffsetLeft,
-        top: position.arrowOffsetTop
+        left: position?.arrowOffsetLeft,
+        top: position?.arrowOffsetTop
       }
     },
     updatePosition
diff --git a/packages/@react-aria/overlays/src/useOverlayTrigger.ts b/packages/@react-aria/overlays/src/useOverlayTrigger.ts
index a5064e7b753..0608b368470 100644
--- a/packages/@react-aria/overlays/src/useOverlayTrigger.ts
+++ b/packages/@react-aria/overlays/src/useOverlayTrigger.ts
@@ -50,7 +50,7 @@ export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTrig
   // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
   // However, we only add it for menus for now because screen readers often
   // announce it as a menu even for other values.
-  let ariaHasPopup = undefined;
+  let ariaHasPopup: undefined | boolean | 'listbox' = undefined;
   if (type === 'menu') {
     ariaHasPopup = true;
   } else if (type === 'listbox') {
@@ -62,7 +62,7 @@ export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTrig
     triggerProps: {
       'aria-haspopup': ariaHasPopup,
       'aria-expanded': isOpen,
-      'aria-controls': isOpen ? overlayId : null,
+      'aria-controls': isOpen ? overlayId : undefined,
       onPress: state.toggle
     },
     overlayProps: {
diff --git a/packages/@react-aria/overlays/src/usePopover.ts b/packages/@react-aria/overlays/src/usePopover.ts
index dc309a155c6..3577dff3be6 100644
--- a/packages/@react-aria/overlays/src/usePopover.ts
+++ b/packages/@react-aria/overlays/src/usePopover.ts
@@ -63,7 +63,7 @@ export interface PopoverAria {
   /** Props to apply to the underlay element, if any. */
   underlayProps: DOMAttributes,
   /** Placement of the popover with respect to the trigger. */
-  placement: PlacementAxis
+  placement: PlacementAxis | null
 }
 
 /**
@@ -98,7 +98,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     targetRef: triggerRef,
     overlayRef: popoverRef,
     isOpen: state.isOpen,
-    onClose: isNonModal ? state.close : null
+    onClose: isNonModal ? state.close : undefined
   });
 
   usePreventScroll({
diff --git a/packages/@react-aria/overlays/src/usePreventScroll.ts b/packages/@react-aria/overlays/src/usePreventScroll.ts
index ad4f4cdd74e..08948f180c7 100644
--- a/packages/@react-aria/overlays/src/usePreventScroll.ts
+++ b/packages/@react-aria/overlays/src/usePreventScroll.ts
@@ -17,7 +17,6 @@ interface PreventScrollOptions {
   isDisabled?: boolean
 }
 
-// @ts-ignore
 const visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 // HTML input types that do not cause the software keyboard to appear.
@@ -195,7 +194,7 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let restoreStyles = null;
+  let restoreStyles: null | (() => void) = null;
   let setupStyles = () => {
     if (restoreStyles) {
       return;
@@ -254,31 +253,35 @@ function setStyle(element: HTMLElement, style: string, value: string) {
 
 // Adds an event listener to an element, and returns a function to remove it.
 function addEvent<K extends keyof GlobalEventHandlersEventMap>(
-  target: EventTarget,
+  target: Document | Window,
   event: K,
-  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ) {
+  // internal function, so it's ok to ignore the difficult to fix type error
+  // @ts-ignore
   target.addEventListener(event, handler, options);
   return () => {
+    // @ts-ignore
     target.removeEventListener(event, handler, options);
   };
 }
 
 function scrollIntoView(target: Element) {
   let root = document.scrollingElement || document.documentElement;
-  while (target && target !== root) {
+  let nextTarget: Element | null = target;
+  while (nextTarget && nextTarget !== root) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
-    let scrollable = getScrollParent(target);
-    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+    let scrollable = getScrollParent(nextTarget);
+    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
       let scrollableTop = scrollable.getBoundingClientRect().top;
-      let targetTop = target.getBoundingClientRect().top;
-      if (targetTop > scrollableTop + target.clientHeight) {
+      let targetTop = nextTarget.getBoundingClientRect().top;
+      if (targetTop > scrollableTop + nextTarget.clientHeight) {
         scrollable.scrollTop += targetTop - scrollableTop;
       }
     }
 
-    target = scrollable.parentElement;
+    nextTarget = scrollable.parentElement;
   }
 }
 
diff --git a/packages/@react-aria/overlays/test/calculatePosition.test.ts b/packages/@react-aria/overlays/test/calculatePosition.test.ts
index 747495b1314..572a26f768e 100644
--- a/packages/@react-aria/overlays/test/calculatePosition.test.ts
+++ b/packages/@react-aria/overlays/test/calculatePosition.test.ts
@@ -166,7 +166,7 @@ describe('calculatePosition', function () {
     });
   }
 
-  function checkPosition(placement, targetDimension, expected, offset = 0, crossOffset = 0, flip = false, providerOffset = undefined, arrowSize = undefined, arrowBoundaryOffset = undefined) {
+  function checkPosition(placement, targetDimension, expected, offset = 0, crossOffset = 0, flip?: boolean, providerOffset?: number, arrowSize?: number, arrowBoundaryOffset?: number) {
     checkPositionCommon(
       'Should calculate the correct position',
       expected,
diff --git a/packages/@react-aria/overlays/test/useOverlayPosition.test.tsx b/packages/@react-aria/overlays/test/useOverlayPosition.test.tsx
index 378136e510f..4eb382b65d3 100644
--- a/packages/@react-aria/overlays/test/useOverlayPosition.test.tsx
+++ b/packages/@react-aria/overlays/test/useOverlayPosition.test.tsx
@@ -15,9 +15,9 @@ import React, {useRef} from 'react';
 import {useOverlayPosition} from '../';
 
 function Example({triggerTop = 250, ...props}) {
-  let targetRef = useRef(undefined);
-  let containerRef = useRef(undefined);
-  let overlayRef = useRef(undefined);
+  let targetRef = useRef(null);
+  let containerRef = useRef(null);
+  let overlayRef = useRef(null);
   let {overlayProps, placement, arrowProps} = useOverlayPosition({targetRef, overlayRef, arrowSize: 8, ...props});
   let style = {width: 300, height: 200, ...overlayProps.style};
   return (
@@ -33,9 +33,11 @@ function Example({triggerTop = 250, ...props}) {
   );
 }
 
-// @ts-ignore
+let original = window.HTMLElement.prototype.getBoundingClientRect;
 HTMLElement.prototype.getBoundingClientRect = function () {
+  let rect = original.apply(this);
   return {
+    ...rect,
     left: parseInt(this.style.left, 10) || 0,
     top: parseInt(this.style.top, 10) || 0,
     right: parseInt(this.style.right, 10) || 0,
@@ -213,14 +215,14 @@ describe('useOverlayPosition', function () {
 });
 
 describe('useOverlayPosition with positioned container', () => {
-  let stubs = [];
+  let stubs: jest.SpyInstance<any, any>[] = [];
   let realGetBoundingClientRect = window.HTMLElement.prototype.getBoundingClientRect;
   let realGetComputedStyle = window.getComputedStyle;
   beforeEach(() => {
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', {configurable: true, value: 768});
     Object.defineProperty(HTMLElement.prototype, 'clientWidth', {configurable: true, value: 500});
     stubs.push(
-      jest.spyOn(window.HTMLElement.prototype, 'offsetParent', 'get').mockImplementation(function () {
+      jest.spyOn(window.HTMLElement.prototype, 'offsetParent', 'get').mockImplementation(function (this: HTMLElement) {
         // Make sure container is is the offsetParent of overlay
         if (this.attributes.getNamedItem('data-testid')?.value === 'overlay') {
           return document.querySelector('[data-testid="container"]');
@@ -228,10 +230,12 @@ describe('useOverlayPosition with positioned container', () => {
           return null;
         }
       }),
-      jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
         if (this.attributes.getNamedItem('data-testid')?.value === 'container') {
           // Say, overlay is positioned somewhere
+          let real = realGetBoundingClientRect.apply(this);
           return {
+            ...real,
             top: 150,
             left: 0,
             width: 400,
diff --git a/packages/@react-aria/pagination/README.md b/packages/@react-aria/pagination/README.md
deleted file mode 100644
index 984706c3e4f..00000000000
--- a/packages/@react-aria/pagination/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @react-aria/pagination
-
-This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-aria/pagination/index.ts b/packages/@react-aria/pagination/index.ts
deleted file mode 100644
index 1210ae1e402..00000000000
--- a/packages/@react-aria/pagination/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-export * from './src';
diff --git a/packages/@react-aria/pagination/intl/ar-AE.json b/packages/@react-aria/pagination/intl/ar-AE.json
deleted file mode 100644
index 5428af43e2a..00000000000
--- a/packages/@react-aria/pagination/intl/ar-AE.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "التالي",
-  "previous": "السابق"
-}
diff --git a/packages/@react-aria/pagination/intl/bg-BG.json b/packages/@react-aria/pagination/intl/bg-BG.json
deleted file mode 100644
index e186d507827..00000000000
--- a/packages/@react-aria/pagination/intl/bg-BG.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Напред",
-  "previous": "Назад"
-}
diff --git a/packages/@react-aria/pagination/intl/cs-CZ.json b/packages/@react-aria/pagination/intl/cs-CZ.json
deleted file mode 100644
index bc4542177c9..00000000000
--- a/packages/@react-aria/pagination/intl/cs-CZ.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Další",
-  "previous": "Předchozí"
-}
diff --git a/packages/@react-aria/pagination/intl/da-DK.json b/packages/@react-aria/pagination/intl/da-DK.json
deleted file mode 100644
index fb2577085a4..00000000000
--- a/packages/@react-aria/pagination/intl/da-DK.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Næste",
-  "previous": "Forrige"
-}
diff --git a/packages/@react-aria/pagination/intl/de-DE.json b/packages/@react-aria/pagination/intl/de-DE.json
deleted file mode 100644
index 1bb4843763a..00000000000
--- a/packages/@react-aria/pagination/intl/de-DE.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Weiter",
-  "previous": "Zurück"
-}
diff --git a/packages/@react-aria/pagination/intl/el-GR.json b/packages/@react-aria/pagination/intl/el-GR.json
deleted file mode 100644
index d79270fd27f..00000000000
--- a/packages/@react-aria/pagination/intl/el-GR.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Επόμενο",
-  "previous": "Προηγούμενο"
-}
diff --git a/packages/@react-aria/pagination/intl/en-US.json b/packages/@react-aria/pagination/intl/en-US.json
deleted file mode 100644
index c1a997391a9..00000000000
--- a/packages/@react-aria/pagination/intl/en-US.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "previous": "Previous",
-  "next": "Next"
-}
diff --git a/packages/@react-aria/pagination/intl/es-ES.json b/packages/@react-aria/pagination/intl/es-ES.json
deleted file mode 100644
index 759154d5c10..00000000000
--- a/packages/@react-aria/pagination/intl/es-ES.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Siguiente",
-  "previous": "Anterior"
-}
diff --git a/packages/@react-aria/pagination/intl/et-EE.json b/packages/@react-aria/pagination/intl/et-EE.json
deleted file mode 100644
index a641a4b2782..00000000000
--- a/packages/@react-aria/pagination/intl/et-EE.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Järgmine",
-  "previous": "Eelmine"
-}
diff --git a/packages/@react-aria/pagination/intl/fi-FI.json b/packages/@react-aria/pagination/intl/fi-FI.json
deleted file mode 100644
index 57830cba817..00000000000
--- a/packages/@react-aria/pagination/intl/fi-FI.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Seuraava",
-  "previous": "Edellinen"
-}
diff --git a/packages/@react-aria/pagination/intl/fr-FR.json b/packages/@react-aria/pagination/intl/fr-FR.json
deleted file mode 100644
index 188c470dd7a..00000000000
--- a/packages/@react-aria/pagination/intl/fr-FR.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Suivant",
-  "previous": "Précédent"
-}
diff --git a/packages/@react-aria/pagination/intl/he-IL.json b/packages/@react-aria/pagination/intl/he-IL.json
deleted file mode 100644
index 1ad862b8e8e..00000000000
--- a/packages/@react-aria/pagination/intl/he-IL.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "הבא",
-  "previous": "הקודם"
-}
diff --git a/packages/@react-aria/pagination/intl/hr-HR.json b/packages/@react-aria/pagination/intl/hr-HR.json
deleted file mode 100644
index 3538a44bd27..00000000000
--- a/packages/@react-aria/pagination/intl/hr-HR.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Sljedeći",
-  "previous": "Prethodni"
-}
diff --git a/packages/@react-aria/pagination/intl/hu-HU.json b/packages/@react-aria/pagination/intl/hu-HU.json
deleted file mode 100644
index b0f5c8fac21..00000000000
--- a/packages/@react-aria/pagination/intl/hu-HU.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Következő",
-  "previous": "Előző"
-}
diff --git a/packages/@react-aria/pagination/intl/index.js b/packages/@react-aria/pagination/intl/index.js
deleted file mode 100644
index ab42abafdb9..00000000000
--- a/packages/@react-aria/pagination/intl/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import csCZ from './cs-CZ.json';
-import daDK from './da-DK.json';
-import deDE from './de-DE.json';
-import enUS from './en-US.json';
-import esES from './es-ES.json';
-import fiFI from './fi-FI.json';
-import frFR from './fr-FR.json';
-import itIT from './it-IT.json';
-import jaJP from './ja-JP.json';
-import koKR from './ko-KR.json';
-import nbNO from './nb-NO.json';
-import nlNL from './nl-NL.json';
-import plPL from './pl-PL.json';
-import ptBR from './pt-BR.json';
-import ruRU from './ru-RU.json';
-import svSE from './sv-SE.json';
-import trTR from './tr-TR.json';
-import zhCN from './zh-CN.json';
-import zhTW from './zh-TW.json';
-
-export default {
-  'cs-CZ': csCZ,
-  'da-DK': daDK,
-  'de-DE': deDE,
-  'en-US': enUS,
-  'es-ES': esES,
-  'fi-FI': fiFI,
-  'fr-FR': frFR,
-  'it-IT': itIT,
-  'ja-JP': jaJP,
-  'ko-KR': koKR,
-  'nb-NO': nbNO,
-  'nl-NL': nlNL,
-  'pl-PL': plPL,
-  'pt-BR': ptBR,
-  'ru-RU': ruRU,
-  'sv-SE': svSE,
-  'tr-TR': trTR,
-  'zh-CN': zhCN,
-  'zh-TW': zhTW
-};
diff --git a/packages/@react-aria/pagination/intl/it-IT.json b/packages/@react-aria/pagination/intl/it-IT.json
deleted file mode 100644
index 9996be7a4c4..00000000000
--- a/packages/@react-aria/pagination/intl/it-IT.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Successivo",
-  "previous": "Precedente"
-}
diff --git a/packages/@react-aria/pagination/intl/ja-JP.json b/packages/@react-aria/pagination/intl/ja-JP.json
deleted file mode 100644
index 706ce258205..00000000000
--- a/packages/@react-aria/pagination/intl/ja-JP.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "次へ",
-  "previous": "前へ"
-}
diff --git a/packages/@react-aria/pagination/intl/ko-KR.json b/packages/@react-aria/pagination/intl/ko-KR.json
deleted file mode 100644
index 7f338669cb9..00000000000
--- a/packages/@react-aria/pagination/intl/ko-KR.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "다음",
-  "previous": "이전"
-}
diff --git a/packages/@react-aria/pagination/intl/lt-LT.json b/packages/@react-aria/pagination/intl/lt-LT.json
deleted file mode 100644
index 3033ce5d642..00000000000
--- a/packages/@react-aria/pagination/intl/lt-LT.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Paskesnis",
-  "previous": "Ankstesnis"
-}
diff --git a/packages/@react-aria/pagination/intl/lv-LV.json b/packages/@react-aria/pagination/intl/lv-LV.json
deleted file mode 100644
index 5af5f1dbde7..00000000000
--- a/packages/@react-aria/pagination/intl/lv-LV.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Tālāk",
-  "previous": "Atpakaļ"
-}
diff --git a/packages/@react-aria/pagination/intl/nb-NO.json b/packages/@react-aria/pagination/intl/nb-NO.json
deleted file mode 100644
index b9602906dde..00000000000
--- a/packages/@react-aria/pagination/intl/nb-NO.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Neste",
-  "previous": "Forrige"
-}
diff --git a/packages/@react-aria/pagination/intl/nl-NL.json b/packages/@react-aria/pagination/intl/nl-NL.json
deleted file mode 100644
index 8757cdd3a29..00000000000
--- a/packages/@react-aria/pagination/intl/nl-NL.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Volgende",
-  "previous": "Vorige"
-}
diff --git a/packages/@react-aria/pagination/intl/pl-PL.json b/packages/@react-aria/pagination/intl/pl-PL.json
deleted file mode 100644
index 0b2c6fde95e..00000000000
--- a/packages/@react-aria/pagination/intl/pl-PL.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Dalej",
-  "previous": "Wstecz"
-}
diff --git a/packages/@react-aria/pagination/intl/pt-BR.json b/packages/@react-aria/pagination/intl/pt-BR.json
deleted file mode 100644
index 12ac6e9c1eb..00000000000
--- a/packages/@react-aria/pagination/intl/pt-BR.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Próximo",
-  "previous": "Anterior"
-}
diff --git a/packages/@react-aria/pagination/intl/pt-PT.json b/packages/@react-aria/pagination/intl/pt-PT.json
deleted file mode 100644
index 12ac6e9c1eb..00000000000
--- a/packages/@react-aria/pagination/intl/pt-PT.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Próximo",
-  "previous": "Anterior"
-}
diff --git a/packages/@react-aria/pagination/intl/ro-RO.json b/packages/@react-aria/pagination/intl/ro-RO.json
deleted file mode 100644
index cbdfa7ca388..00000000000
--- a/packages/@react-aria/pagination/intl/ro-RO.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Următorul",
-  "previous": "Înainte"
-}
diff --git a/packages/@react-aria/pagination/intl/ru-RU.json b/packages/@react-aria/pagination/intl/ru-RU.json
deleted file mode 100644
index 962a05876a2..00000000000
--- a/packages/@react-aria/pagination/intl/ru-RU.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Далее",
-  "previous": "Назад"
-}
diff --git a/packages/@react-aria/pagination/intl/sk-SK.json b/packages/@react-aria/pagination/intl/sk-SK.json
deleted file mode 100644
index 7474f6b6e3f..00000000000
--- a/packages/@react-aria/pagination/intl/sk-SK.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Nasledujúce",
-  "previous": "Predchádzajúce"
-}
diff --git a/packages/@react-aria/pagination/intl/sl-SI.json b/packages/@react-aria/pagination/intl/sl-SI.json
deleted file mode 100644
index 25a9d721d21..00000000000
--- a/packages/@react-aria/pagination/intl/sl-SI.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Naprej",
-  "previous": "Nazaj"
-}
diff --git a/packages/@react-aria/pagination/intl/sr-SP.json b/packages/@react-aria/pagination/intl/sr-SP.json
deleted file mode 100644
index f25f4c47ff0..00000000000
--- a/packages/@react-aria/pagination/intl/sr-SP.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Sledeći",
-  "previous": "Prethodni"
-}
diff --git a/packages/@react-aria/pagination/intl/sv-SE.json b/packages/@react-aria/pagination/intl/sv-SE.json
deleted file mode 100644
index b42a0f0f944..00000000000
--- a/packages/@react-aria/pagination/intl/sv-SE.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Nästa",
-  "previous": "Föregående"
-}
diff --git a/packages/@react-aria/pagination/intl/tr-TR.json b/packages/@react-aria/pagination/intl/tr-TR.json
deleted file mode 100644
index c1083c7fa39..00000000000
--- a/packages/@react-aria/pagination/intl/tr-TR.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Sonraki",
-  "previous": "Önceki"
-}
diff --git a/packages/@react-aria/pagination/intl/uk-UA.json b/packages/@react-aria/pagination/intl/uk-UA.json
deleted file mode 100644
index 7eb5924cc62..00000000000
--- a/packages/@react-aria/pagination/intl/uk-UA.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "Наступний",
-  "previous": "Попередній"
-}
diff --git a/packages/@react-aria/pagination/intl/zh-CN.json b/packages/@react-aria/pagination/intl/zh-CN.json
deleted file mode 100644
index 94591beea7f..00000000000
--- a/packages/@react-aria/pagination/intl/zh-CN.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "下一页",
-  "previous": "上一页"
-}
diff --git a/packages/@react-aria/pagination/intl/zh-TW.json b/packages/@react-aria/pagination/intl/zh-TW.json
deleted file mode 100644
index 1780783d953..00000000000
--- a/packages/@react-aria/pagination/intl/zh-TW.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "next": "下一頁",
-  "previous": "上一頁"
-}
diff --git a/packages/@react-aria/pagination/package.json b/packages/@react-aria/pagination/package.json
deleted file mode 100644
index 0b650a3d63f..00000000000
--- a/packages/@react-aria/pagination/package.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "name": "@react-aria/pagination",
-  "version": "3.0.0-alpha.1",
-  "description": "Spectrum UI components in React",
-  "license": "Apache-2.0",
-  "private": true,
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "exports": {
-    "types": "./dist/types.d.ts",
-    "import": "./dist/import.mjs",
-    "require": "./dist/main.js"
-  },
-  "types": "dist/types.d.ts",
-  "source": "src/index.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/react-spectrum"
-  },
-  "dependencies": {
-    "@react-aria/i18n": "^3.1.0",
-    "@react-stately/pagination": "3.0.0-alpha.1",
-    "@swc/helpers": "^0.5.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/@react-aria/pagination/src/index.ts b/packages/@react-aria/pagination/src/index.ts
deleted file mode 100644
index 987f15c4a27..00000000000
--- a/packages/@react-aria/pagination/src/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-export {usePagination} from './usePagination';
diff --git a/packages/@react-aria/pagination/src/usePagination.ts b/packages/@react-aria/pagination/src/usePagination.ts
deleted file mode 100644
index 471f31343fd..00000000000
--- a/packages/@react-aria/pagination/src/usePagination.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import intlMessages from '../intl';
-import {PaginationState} from '@react-stately/pagination';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-
-interface PaginationAriaProps {
-  value?: any,
-  onPrevious?: (value: number, ...args: any) => void,
-  onNext?: (value: number, ...args: any) => void
-}
-
-export function usePagination(props: PaginationAriaProps, state: PaginationState) {
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/pagination');
-
-  let onPrevious = () => {
-    state.onDecrement();
-    if (props.onPrevious) {
-      props.onPrevious(state.ref.current);
-    }
-  };
-
-  let onNext = () => {
-    state.onIncrement();
-    if (props.onNext) {
-      props.onNext(state.ref.current);
-    }
-  };
-
-  let onKeyDown = (e) => {
-    switch (e.key) {
-      case 'ArrowUp':
-      case 'Up':
-        state.onIncrement();
-        break;
-      case 'ArrowDown':
-      case 'Down':
-        state.onDecrement();
-        break;
-      case 'Enter':
-      case ' ':
-        break;
-      default:
-    }
-  };
-
-  return {
-    prevButtonProps: {
-      ...props,
-      'aria-label': stringFormatter.format('previous'),
-      onPress: onPrevious
-    },
-    nextButtonProps: {
-      ...props,
-      'aria-label': stringFormatter.format('next'),
-      onPress: onNext
-    },
-    textProps: {
-      ...props,
-      onKeyDown: onKeyDown
-    }
-  };
-}
diff --git a/packages/@react-aria/pagination/test/usePagination.test.js b/packages/@react-aria/pagination/test/usePagination.test.js
deleted file mode 100644
index bb50c6c7c61..00000000000
--- a/packages/@react-aria/pagination/test/usePagination.test.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import React from 'react';
-import {renderHook} from '@react-spectrum/test-utils-internal';
-import {usePagination} from '../';
-
-describe('usePagination tests', function () {
-
-  let setValue = jest.fn();
-  let state = {};
-  let props = {};
-  let preventDefault = jest.fn();
-  let onPrevious = jest.fn();
-  let onNext = jest.fn();
-  let onIncrement = jest.fn();
-  let onDecrement = jest.fn();
-  let maxValue = 20;
-  let event = (key) => ({
-    key,
-    preventDefault
-  });
-
-  let renderPaginationHook = (props) => {
-    props.onPrevious = onPrevious;
-    props.onNext = onNext;
-    let {result} = renderHook(() => usePagination(props, state));
-    return result.current;
-  };
-
-  beforeEach(() => {
-    state.value = 1;
-    state.ref = {current: 1};
-    state.onChange = setValue;
-    state.onIncrement = onIncrement;
-    state.onDecrement = onDecrement;
-    props.onPrevious = onPrevious;
-    props.onNext = onNext;
-  });
-
-  afterEach(() => {
-    preventDefault.mockClear();
-    setValue.mockClear();
-    onPrevious.mockClear();
-    onNext.mockClear();
-    onIncrement.mockClear();
-    onDecrement.mockClear();
-    state.value = 1;
-    state.ref = {};
-  });
-
-  it('handles defaults', () => {
-    let paginationProps = renderPaginationHook({defaultValue: 1});
-    expect(typeof paginationProps.prevButtonProps.onPress).toBe('function');
-    expect(typeof paginationProps.nextButtonProps.onPress).toBe('function');
-    expect(typeof paginationProps.textProps.onKeyDown).toBe('function');
-  });
-
-  it('handles aria props', function () {
-    let paginationProps = renderPaginationHook({defaultValue: 1});
-    expect(paginationProps.prevButtonProps['aria-label']).toEqual('Previous');
-    expect(paginationProps.nextButtonProps['aria-label']).toBe('Next');
-  });
-
-  it('handles valid onkeydown', function () {
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.textProps.onKeyDown(event('Up'));
-    expect(state.onIncrement).toHaveBeenCalled();
-  });
-
-  it('handles invalid onkeydown : value <= 1', function () {
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.textProps.onKeyDown(event('Down'));
-    expect(state.onDecrement).toHaveBeenCalled();
-  });
-
-  it('handles invalid onkeydown : value is a character', function () {
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.textProps.onKeyDown(event('a'));
-    expect(state.onChange).not.toHaveBeenCalled();
-  });
-
-  it('handles valid previous', function () {
-    state.value = 2;
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.prevButtonProps.onPress(event('click'));
-    expect(state.onDecrement).toHaveBeenCalled();
-    expect(props.onPrevious).toHaveBeenCalledWith(state.ref.current);
-  });
-
-  it('handles invalid previous', function () {
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.prevButtonProps.onPress(event('click'));
-    expect(state.onDecrement).toHaveBeenCalled();
-    expect(props.onPrevious).toHaveBeenCalledWith(state.ref.current);
-  });
-
-  it('handles valid next', function () {
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.nextButtonProps.onPress(event('click'));
-    expect(state.onIncrement).toHaveBeenCalled();
-    expect(props.onNext).toHaveBeenCalledWith(state.ref.current);
-  });
-
-  it('handles invalid next', function () {
-    state.value = maxValue;
-    let paginationProps = renderPaginationHook({defaultValue: 1, maxValue: maxValue});
-    paginationProps.nextButtonProps.onPress(event('click'));
-    expect(state.onIncrement).toHaveBeenCalled();
-    expect(props.onNext).toHaveBeenCalledWith(state.ref.current);
-  });
-});
diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index f2641c58e4d..f0715e01b6a 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -72,7 +72,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
   useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);
   useFormValidation({
     validationBehavior,
-    focus: () => triggerRef.current.focus()
+    focus: () => triggerRef.current?.focus()
   }, state, props.selectRef);
 
   // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
@@ -126,7 +126,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
             <option />
             {[...state.collection.getKeys()].map(key => {
               let item = state.collection.getItem(key);
-              if (item.type === 'item') {
+              if (item && item.type === 'item') {
                 return (
                   <option
                     key={item.key}
diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts
index dc2dc3fd4fa..09455adad59 100644
--- a/packages/@react-aria/select/src/useSelect.ts
+++ b/packages/@react-aria/select/src/useSelect.ts
@@ -14,7 +14,7 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaListBoxOptions} from '@react-aria/listbox';
 import {AriaSelectProps} from '@react-types/select';
 import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {DOMAttributes, FocusableElement, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';
 import {FocusEvent, useMemo} from 'react';
 import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';
 import {SelectState} from '@react-stately/select';
@@ -66,7 +66,7 @@ export const selectData = new WeakMap<SelectState<any>, SelectData>();
  * @param props - Props for the select.
  * @param state - State for the select, as returned by `useListState`.
  */
-export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<FocusableElement | null>): SelectAria<T> {
+export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>, ref: RefObject<HTMLElement | null>): SelectAria<T> {
   let {
     keyboardDelegate,
     isDisabled,
@@ -78,7 +78,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
   // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
   // When virtualized, the layout object will be passed in as a prop and override this.
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
-  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, null, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);
+  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, ref, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator]);
 
   let {menuTriggerProps, menuProps} = useMenuTrigger<T>(
     {
@@ -95,7 +95,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
         // prevent scrolling containers
         e.preventDefault();
 
-        let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();
+        let key = state.selectedKey != null ? delegate.getKeyAbove?.(state.selectedKey) : delegate.getFirstKey?.();
         if (key) {
           state.setSelectedKey(key);
         }
@@ -105,7 +105,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
         // prevent scrolling containers
         e.preventDefault();
 
-        let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();
+        let key = state.selectedKey != null ? delegate.getKeyBelow?.(state.selectedKey) : delegate.getFirstKey?.();
         if (key) {
           state.setSelectedKey(key);
         }
@@ -150,7 +150,7 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
       ...labelProps,
       onClick: () => {
         if (!props.isDisabled) {
-          ref.current.focus();
+          ref.current?.focus();
 
           // Show the focus ring so the user knows where focus went
           setInteractionModality('keyboard');
diff --git a/packages/@react-aria/select/stories/example.tsx b/packages/@react-aria/select/stories/example.tsx
index c1714302169..0c26246c6d9 100644
--- a/packages/@react-aria/select/stories/example.tsx
+++ b/packages/@react-aria/select/stories/example.tsx
@@ -23,7 +23,7 @@ export function Select(props) {
   let state = useSelectState(props);
 
   // Get props for child elements from useSelect
-  let ref = React.useRef(undefined);
+  let ref = React.useRef(null);
   let {
     labelProps,
     triggerProps,
@@ -136,7 +136,7 @@ function ListBox(props) {
 }
 
 function Option({item, state}) {
-  let ref = React.useRef(undefined);
+  let ref = React.useRef(null);
   let {optionProps, isSelected, isFocused, isDisabled} = useOption({key: item.key}, state, ref);
 
   let backgroundColor;
diff --git a/packages/@react-aria/select/test/HiddenSelect.test.tsx b/packages/@react-aria/select/test/HiddenSelect.test.tsx
index 585a6643de2..eac596cace7 100644
--- a/packages/@react-aria/select/test/HiddenSelect.test.tsx
+++ b/packages/@react-aria/select/test/HiddenSelect.test.tsx
@@ -7,7 +7,7 @@ import {SelectProps, useSelectState} from '@react-stately/select';
 import userEvent from '@testing-library/user-event';
 
 const HiddenSelectExample = (props: Partial<SelectProps<{ key: number, value: string }>> & { hiddenProps?: Partial<HiddenSelectProps<any>> }) => {
-  const triggerRef = useRef(undefined);
+  const triggerRef = useRef(null);
   const state = useSelectState({
     children: (item) => (
       <Item>{item.value}</Item>
diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts
index 4f7d778fc22..3431e66fc8d 100644
--- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts
+++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts
@@ -13,14 +13,17 @@
 import {Key, LayoutDelegate, Rect, RefObject, Size} from '@react-types/shared';
 
 export class DOMLayoutDelegate implements LayoutDelegate {
-  private ref: RefObject<HTMLElement>;
+  private ref: RefObject<HTMLElement | null>;
 
-  constructor(ref: RefObject<HTMLElement>) {
+  constructor(ref: RefObject<HTMLElement | null>) {
     this.ref = ref;
   }
 
   getItemRect(key: Key): Rect | null {
     let container = this.ref.current;
+    if (!container) {
+      return null;
+    }
     let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
     if (!item) {
       return null;
@@ -40,18 +43,18 @@ export class DOMLayoutDelegate implements LayoutDelegate {
   getContentSize(): Size {
     let container = this.ref.current;
     return {
-      width: container.scrollWidth,
-      height: container.scrollHeight
+      width: container?.scrollWidth ?? 0,
+      height: container?.scrollHeight ?? 0
     };
   }
 
   getVisibleRect(): Rect {
     let container = this.ref.current;
     return {
-      x: container.scrollLeft,
-      y: container.scrollTop,
-      width: container.offsetWidth,
-      height: container.offsetHeight
+      x: container?.scrollLeft ?? 0,
+      y: container?.scrollTop ?? 0,
+      width: container?.offsetWidth ?? 0,
+      height: container?.offsetHeight ?? 0
     };
   }
 }
diff --git a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
index 7a8a5f6ed34..8037ee83dcd 100644
--- a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
+++ b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
@@ -74,47 +74,54 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return this.disabledBehavior === 'all' && (item.props?.isDisabled || this.disabledKeys.has(item.key));
   }
 
-  private findNextNonDisabled(key: Key, getNext: (key: Key) => Key | null): Key | null {
-    while (key != null) {
-      let item = this.collection.getItem(key);
+  private findNextNonDisabled(key: Key | null, getNext: (key: Key) => Key | null): Key | null {
+    let nextKey = key;
+    while (nextKey != null) {
+      let item = this.collection.getItem(nextKey);
       if (item?.type === 'item' && !this.isDisabled(item)) {
-        return key;
+        return nextKey;
       }
 
-      key = getNext(key);
+      nextKey = getNext(nextKey);
     }
 
     return null;
   }
 
   getNextKey(key: Key) {
-    key = this.collection.getKeyAfter(key);
-    return this.findNextNonDisabled(key, key => this.collection.getKeyAfter(key));
+    let nextKey: Key | null = key;
+    nextKey = this.collection.getKeyAfter(nextKey);
+    return this.findNextNonDisabled(nextKey, key => this.collection.getKeyAfter(key));
   }
 
   getPreviousKey(key: Key) {
-    key = this.collection.getKeyBefore(key);
-    return this.findNextNonDisabled(key, key => this.collection.getKeyBefore(key));
+    let nextKey: Key | null = key;
+    nextKey = this.collection.getKeyBefore(nextKey);
+    return this.findNextNonDisabled(nextKey, key => this.collection.getKeyBefore(key));
   }
 
   private findKey(
     key: Key,
-    nextKey: (key: Key) => Key,
+    nextKey: (key: Key) => Key | null,
     shouldSkip: (prevRect: Rect, itemRect: Rect) => boolean
   ) {
-    let itemRect = this.layoutDelegate.getItemRect(key);
-    if (!itemRect) {
+    let tempKey: Key | null = key;
+    let itemRect = this.layoutDelegate.getItemRect(tempKey);
+    if (!itemRect || tempKey == null) {
       return null;
     }
 
     // Find the item above or below in the same column.
     let prevRect = itemRect;
     do {
-      key = nextKey(key);
-      itemRect = this.layoutDelegate.getItemRect(key);
-    } while (itemRect && shouldSkip(prevRect, itemRect));
+      tempKey = nextKey(tempKey);
+      if (tempKey == null) {
+        break;
+      }
+      itemRect = this.layoutDelegate.getItemRect(tempKey);
+    } while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
 
-    return key;
+    return tempKey;
   }
 
   private isSameRow(prevRect: Rect, itemRect: Rect) {
@@ -145,7 +152,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return right ? this.getPreviousKey(key) : this.getNextKey(key);
   }
 
-  getKeyRightOf(key: Key) {
+  getKeyRightOf?(key: Key) {
     // This is a temporary solution for CardView until we refactor useSelectableCollection.
     // https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042
     let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf';
@@ -167,7 +174,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return null;
   }
 
-  getKeyLeftOf(key: Key) {
+  getKeyLeftOf?(key: Key) {
     let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf';
     if (this.layoutDelegate[layoutDelegateMethod]) {
       key = this.layoutDelegate[layoutDelegateMethod](key);
@@ -204,27 +211,28 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       return null;
     }
 
-    if (!isScrollable(menu)) {
+    if (menu && !isScrollable(menu)) {
       return this.getFirstKey();
     }
 
+    let nextKey: Key | null = key;
     if (this.orientation === 'horizontal') {
       let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
 
-      while (itemRect && itemRect.x > pageX) {
-        key = this.getKeyAbove(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.x > pageX && nextKey != null) {
+        nextKey = this.getKeyAbove(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
     } else {
       let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
 
-      while (itemRect && itemRect.y > pageY) {
-        key = this.getKeyAbove(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.y > pageY && nextKey != null) {
+        nextKey = this.getKeyAbove(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
     }
 
-    return key ?? this.getFirstKey();
+    return nextKey ?? this.getFirstKey();
   }
 
   getKeyPageBelow(key: Key) {
@@ -234,27 +242,28 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       return null;
     }
 
-    if (!isScrollable(menu)) {
+    if (menu && !isScrollable(menu)) {
       return this.getLastKey();
     }
 
+    let nextKey: Key | null = key;
     if (this.orientation === 'horizontal') {
       let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
 
-      while (itemRect && itemRect.x < pageX) {
-        key = this.getKeyBelow(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.x < pageX && nextKey != null) {
+        nextKey = this.getKeyBelow(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
     } else {
       let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
 
-      while (itemRect && itemRect.y < pageY) {
-        key = this.getKeyBelow(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.y < pageY && nextKey != null) {
+        nextKey = this.getKeyBelow(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
     }
 
-    return key ?? this.getLastKey();
+    return nextKey ?? this.getLastKey();
   }
 
   getKeyForSearch(search: string, fromKey?: Key) {
@@ -266,6 +275,9 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     let key = fromKey || this.getFirstKey();
     while (key != null) {
       let item = collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       let substring = item.textValue.slice(0, search.length);
       if (item.textValue && this.collator.compare(substring, search) === 0) {
         return key;
diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index c136d127ed7..19505623890 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -128,7 +128,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
     // Keyboard events bubble through portals. Don't handle keyboard events
     // for elements outside the collection (e.g. menus).
-    if (!ref.current.contains(e.target as Element)) {
+    if (!ref.current?.contains(e.target as Element)) {
       return;
     }
 
@@ -140,9 +140,11 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
             manager.setFocusedKey(key, childFocus);
           });
 
-          let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
+          let item = scrollRef.current?.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
           let itemProps = manager.getItemProps(key);
-          router.open(item, e, itemProps.href, itemProps.routerOptions);
+          if (item) {
+            router.open(item, e, itemProps.href, itemProps.routerOptions);
+          }
 
           return;
         }
@@ -194,7 +196,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'ArrowLeft': {
         if (delegate.getKeyLeftOf) {
-          let nextKey = delegate.getKeyLeftOf?.(manager.focusedKey);
+          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyLeftOf?.(manager.focusedKey) : null;
           if (nextKey == null && shouldFocusWrap) {
             nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
           }
@@ -207,7 +209,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'ArrowRight': {
         if (delegate.getKeyRightOf) {
-          let nextKey = delegate.getKeyRightOf?.(manager.focusedKey);
+          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyRightOf?.(manager.focusedKey) : null;
           if (nextKey == null && shouldFocusWrap) {
             nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
           }
@@ -221,12 +223,14 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       case 'Home':
         if (delegate.getFirstKey) {
           e.preventDefault();
-          let firstKey = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e));
+          let firstKey: Key | null = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(firstKey);
-          if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
-            manager.extendSelection(firstKey);
-          } else if (selectOnFocus) {
-            manager.replaceSelection(firstKey);
+          if (firstKey != null) {
+            if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+              manager.extendSelection(firstKey);
+            } else if (selectOnFocus) {
+              manager.replaceSelection(firstKey);
+            }
           }
         }
         break;
@@ -235,15 +239,17 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
           e.preventDefault();
           let lastKey = delegate.getLastKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(lastKey);
-          if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
-            manager.extendSelection(lastKey);
-          } else if (selectOnFocus) {
-            manager.replaceSelection(lastKey);
+          if (lastKey != null) {
+            if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+              manager.extendSelection(lastKey);
+            } else if (selectOnFocus) {
+              manager.replaceSelection(lastKey);
+            }
           }
         }
         break;
       case 'PageDown':
-        if (delegate.getKeyPageBelow) {
+        if (delegate.getKeyPageBelow && manager.focusedKey != null) {
           let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
           if (nextKey != null) {
             e.preventDefault();
@@ -252,7 +258,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
         }
         break;
       case 'PageUp':
-        if (delegate.getKeyPageAbove) {
+        if (delegate.getKeyPageAbove && manager.focusedKey != null) {
           let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
           if (nextKey != null) {
             e.preventDefault();
@@ -285,7 +291,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
             ref.current.focus();
           } else {
             let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-            let next: FocusableElement;
+            let next: FocusableElement | undefined = undefined;
             let last: FocusableElement;
             do {
               last = walker.lastChild() as FocusableElement;
@@ -307,10 +313,10 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // Store the scroll position so we can restore it later.
   /// TODO: should this happen all the time??
   let scrollPos = useRef({top: 0, left: 0});
-  useEvent(scrollRef, 'scroll', isVirtualized ? null : () => {
+  useEvent(scrollRef, 'scroll', isVirtualized ? undefined : () => {
     scrollPos.current = {
-      top: scrollRef.current.scrollTop,
-      left: scrollRef.current.scrollLeft
+      top: scrollRef.current?.scrollTop ?? 0,
+      left: scrollRef.current?.scrollLeft ?? 0
     };
   });
 
@@ -332,7 +338,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     manager.setFocused(true);
 
     if (manager.focusedKey == null) {
-      let navigateToFirstKey = (key: Key | undefined) => {
+      let navigateToFirstKey = (key: Key | undefined | null) => {
         if (key != null) {
           manager.setFocusedKey(key);
           if (selectOnFocus) {
@@ -345,17 +351,17 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       // and either focus the first or last item accordingly.
       let relatedTarget = e.relatedTarget as Element;
       if (relatedTarget && (e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)) {
-        navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey());
+        navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey?.());
       } else {
-        navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey());
+        navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
       }
-    } else if (!isVirtualized) {
+    } else if (!isVirtualized && scrollRef.current) {
       // Restore the scroll position to what it was before.
       scrollRef.current.scrollTop = scrollPos.current.top;
       scrollRef.current.scrollLeft = scrollPos.current.left;
     }
 
-    if (manager.focusedKey != null) {
+    if (manager.focusedKey != null && scrollRef.current) {
       // Refocus and scroll the focused item into view if it exists within the scrollable region.
       let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
       if (element) {
@@ -382,13 +388,13 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   const autoFocusRef = useRef(autoFocus);
   useEffect(() => {
     if (autoFocusRef.current) {
-      let focusedKey = null;
+      let focusedKey: Key | null = null;
 
       // Check focus strategy to determine which item to focus
       if (autoFocus === 'first') {
-        focusedKey = delegate.getFirstKey();
+        focusedKey = delegate.getFirstKey?.() ?? null;
       } if (autoFocus === 'last') {
-        focusedKey = delegate.getLastKey();
+        focusedKey = delegate.getLastKey?.() ?? null;
       }
 
       // If there are any selected keys, make the first one the new focus target
@@ -406,7 +412,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       manager.setFocusedKey(focusedKey);
 
       // If no default focus key is selected, focus the collection itself.
-      if (focusedKey == null && !shouldUseVirtualFocus) {
+      if (focusedKey == null && !shouldUseVirtualFocus && ref.current) {
         focusSafely(ref.current);
       }
     }
@@ -416,7 +422,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // Scroll the focused element into view when the focusedKey changes.
   let lastFocusedKey = useRef(manager.focusedKey);
   useEffect(() => {
-    if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef?.current) {
+    if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) {
       let modality = getInteractionModality();
       let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
       if (!element) {
@@ -436,7 +442,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     }
 
     // If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
-    if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) {
+    if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) {
       focusSafely(ref.current);
     }
 
@@ -476,7 +482,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // This will be marshalled to either the first or last item depending on where focus came from.
   // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
   // to move real DOM focus to the element anyway.
-  let tabIndex: number;
+  let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
     tabIndex = manager.focusedKey == null ? 0 : -1;
   }
diff --git a/packages/@react-aria/selection/src/useSelectableItem.ts b/packages/@react-aria/selection/src/useSelectableItem.ts
index a9e73b9ea34..3a3d80c731a 100644
--- a/packages/@react-aria/selection/src/useSelectableItem.ts
+++ b/packages/@react-aria/selection/src/useSelectableItem.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, Key, LongPressEvent, PressEvent, RefObject} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
 import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
 import {mergeProps, openLink, useRouter} from '@react-aria/utils';
@@ -130,7 +130,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       }
 
       if (manager.isLink(key)) {
-        if (linkBehavior === 'selection') {
+        if (linkBehavior === 'selection' && ref.current) {
           let itemProps = manager.getItemProps(key);
           router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
           // Always set selected keys back to what they were so that select and combobox close.
@@ -164,7 +164,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
       if (focus) {
         focus();
-      } else if (document.activeElement !== ref.current) {
+      } else if (document.activeElement !== ref.current && ref.current) {
         focusSafely(ref.current);
       }
     }
@@ -207,7 +207,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   );
   let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';
   let hasAction = hasPrimaryAction || hasSecondaryAction;
-  let modality = useRef(null);
+  let modality = useRef<PointerType | null>(null);
 
   let longPressEnabled = hasAction && allowsSelection;
   let longPressEnabledOnPressStart = useRef(false);
@@ -218,7 +218,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       onAction();
     }
 
-    if (hasLinkAction) {
+    if (hasLinkAction && ref.current) {
       let itemProps = manager.getItemProps(key);
       router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
     }
@@ -256,13 +256,13 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
         }
       };
     } else {
-      itemPressProps.onPressUp = hasPrimaryAction ? null : (e) => {
+      itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => {
         if (e.pointerType !== 'keyboard' && allowsSelection) {
           onSelect(e);
         }
       };
 
-      itemPressProps.onPress = hasPrimaryAction ? performAction : null;
+      itemPressProps.onPress = hasPrimaryAction ? performAction : undefined;
     }
   } else {
     itemPressProps.onPressStart = (e) => {
diff --git a/packages/@react-aria/selection/src/useTypeSelect.ts b/packages/@react-aria/selection/src/useTypeSelect.ts
index c1814c470d0..01cea26fc57 100644
--- a/packages/@react-aria/selection/src/useTypeSelect.ts
+++ b/packages/@react-aria/selection/src/useTypeSelect.ts
@@ -46,9 +46,9 @@ export interface TypeSelectAria {
  */
 export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
   let {keyboardDelegate, selectionManager, onTypeSelect} = options;
-  let state = useRef({
+  let state = useRef<{search: string, timeout: ReturnType<typeof setTimeout> | undefined}>({
     search: '',
-    timeout: null
+    timeout: undefined
   }).current;
 
   let onKeyDown = (e: KeyboardEvent) => {
@@ -70,19 +70,21 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
 
     state.search += character;
 
-    // Use the delegate to find a key to focus.
-    // Prioritize items after the currently focused item, falling back to searching the whole list.
-    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+    if (keyboardDelegate.getKeyForSearch != null) {
+      // Use the delegate to find a key to focus.
+      // Prioritize items after the currently focused item, falling back to searching the whole list.
+      let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
 
-    // If no key found, search from the top.
-    if (key == null) {
-      key = keyboardDelegate.getKeyForSearch(state.search);
-    }
+      // If no key found, search from the top.
+      if (key == null) {
+        key = keyboardDelegate.getKeyForSearch(state.search);
+      }
 
-    if (key != null) {
-      selectionManager.setFocusedKey(key);
-      if (onTypeSelect) {
-        onTypeSelect(key);
+      if (key != null) {
+        selectionManager.setFocusedKey(key);
+        if (onTypeSelect) {
+          onTypeSelect(key);
+        }
       }
     }
 
@@ -96,7 +98,7 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
     typeSelectProps: {
       // Using a capturing listener to catch the keydown event before
       // other hooks in order to handle the Spacebar event.
-      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
     }
   };
 }
diff --git a/packages/@react-aria/slider/src/useSlider.ts b/packages/@react-aria/slider/src/useSlider.ts
index 8ee8edec5d6..e9c45c18411 100644
--- a/packages/@react-aria/slider/src/useSlider.ts
+++ b/packages/@react-aria/slider/src/useSlider.ts
@@ -55,7 +55,7 @@ export function useSlider<T extends number | number[]>(
 
   // Attach id of the label to the state so it can be accessed by useSliderThumb.
   sliderData.set(state, {
-    id: labelProps.id ?? fieldProps.id,
+    id: (labelProps.id ?? fieldProps.id)!,
     'aria-describedby': props['aria-describedby'],
     'aria-details': props['aria-details']
   });
@@ -71,16 +71,19 @@ export function useSlider<T extends number | number[]>(
   const realTimeTrackDraggingIndex = useRef<number | null>(null);
 
   const reverseX = direction === 'rtl';
-  const currentPosition = useRef<number>(null);
+  const currentPosition = useRef<number | null>(null);
   const {moveProps} = useMove({
     onMoveStart() {
       currentPosition.current = null;
     },
     onMove({deltaX, deltaY}) {
+      if (!trackRef.current) {
+        return;
+      }
       let {height, width} = trackRef.current.getBoundingClientRect();
       let size = isVertical ? height : width;
 
-      if (currentPosition.current == null) {
+      if (currentPosition.current == null && realTimeTrackDraggingIndex.current != null) {
         currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;
       }
 
@@ -89,10 +92,10 @@ export function useSlider<T extends number | number[]>(
         delta = -delta;
       }
 
-      currentPosition.current += delta;
+      currentPosition.current! += delta;
 
       if (realTimeTrackDraggingIndex.current != null && trackRef.current) {
-        const percent = clamp(currentPosition.current / size, 0, 1);
+        const percent = clamp(currentPosition.current! / size, 0, 1);
         state.setThumbPercent(realTimeTrackDraggingIndex.current, percent);
       }
     },
@@ -105,7 +108,7 @@ export function useSlider<T extends number | number[]>(
   });
 
   let currentPointer = useRef<number | null | undefined>(undefined);
-  let onDownTrack = (e: React.UIEvent, id: number, clientX: number, clientY: number) => {
+  let onDownTrack = (e: React.UIEvent, id: number | undefined, clientX: number, clientY: number) => {
     // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
     if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {
       let {height, width, top, left} = trackRef.current.getBoundingClientRect();
@@ -147,7 +150,7 @@ export function useSlider<T extends number | number[]>(
         state.setFocusedThumb(closestThumb);
         currentPointer.current = id;
 
-        state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
+        state.setThumbDragging(realTimeTrackDraggingIndex.current!, true);
         state.setThumbValue(closestThumb, value);
 
         addGlobalListener(window, 'mouseup', onUpTrack, false);
diff --git a/packages/@react-aria/slider/src/useSliderThumb.ts b/packages/@react-aria/slider/src/useSliderThumb.ts
index 0ac51baa7b1..6f698ada2be 100644
--- a/packages/@react-aria/slider/src/useSliderThumb.ts
+++ b/packages/@react-aria/slider/src/useSliderThumb.ts
@@ -61,7 +61,7 @@ export function useSliderThumb(
   let {direction} = useLocale();
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
-  let data = sliderData.get(state);
+  let data = sliderData.get(state)!;
   const {labelProps, fieldProps} = useLabel({
     ...opts,
     id: getSliderThumbId(state, index),
@@ -139,6 +139,9 @@ export function useSliderThumb(
         step,
         pageSize
       } = state;
+      if (!trackRef.current) {
+        return;
+      }
       let {width, height} = trackRef.current.getBoundingClientRect();
       let size = isVertical ? height : width;
 
diff --git a/packages/@react-aria/slider/stories/StorySlider.tsx b/packages/@react-aria/slider/stories/StorySlider.tsx
index ffdf7a78a22..b9a0c171d4e 100644
--- a/packages/@react-aria/slider/stories/StorySlider.tsx
+++ b/packages/@react-aria/slider/stories/StorySlider.tsx
@@ -30,12 +30,12 @@ export function StorySlider(props: StorySliderProps) {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const origin = props.origin ?? props.minValue ?? 0;
 
-  const multiProps: AriaSliderProps = {
+  const multiProps: AriaSliderProps<number[]> = {
     ...props,
     value: props.value == null ? undefined :  [props.value],
     defaultValue: props.defaultValue == null ? undefined : [props.defaultValue],
-    onChange: props.onChange == null ? undefined : (vals: number[]) => props.onChange(vals[0]),
-    onChangeEnd: props.onChangeEnd == null ? undefined : (vals: number[]) => props.onChangeEnd(vals[0])
+    onChange: props.onChange == null ? undefined : (vals: number[]) => props.onChange?.(vals[0]),
+    onChangeEnd: props.onChangeEnd == null ? undefined : (vals: number[]) => props.onChangeEnd?.(vals[0])
   };
   const formatter = useNumberFormatter(props.formatOptions);
   const state = useSliderState({...multiProps, numberFormatter: formatter});
diff --git a/packages/@react-aria/ssr/src/SSRProvider.tsx b/packages/@react-aria/ssr/src/SSRProvider.tsx
index fa2247e9d43..12deb8ee468 100644
--- a/packages/@react-aria/ssr/src/SSRProvider.tsx
+++ b/packages/@react-aria/ssr/src/SSRProvider.tsx
@@ -157,7 +157,6 @@ function useLegacySSRSafeId(defaultId?: string): string {
 }
 
 function useModernSSRSafeId(defaultId?: string): string {
-  // @ts-ignore
   let id = React.useId();
   let [didSSR] = useState(useIsSSR());
   let prefix = didSSR || process.env.NODE_ENV === 'test' ? 'react-aria' : `react-aria${defaultContext.prefix}`;
diff --git a/packages/@react-aria/table/src/TableKeyboardDelegate.ts b/packages/@react-aria/table/src/TableKeyboardDelegate.ts
index bb0a9e27789..535df9505c4 100644
--- a/packages/@react-aria/table/src/TableKeyboardDelegate.ts
+++ b/packages/@react-aria/table/src/TableKeyboardDelegate.ts
@@ -24,7 +24,7 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
   getKeyBelow(key: Key) {
     let startItem = this.collection.getItem(key);
     if (!startItem) {
-      return;
+      return null;
     }
 
     // If focus was on a column, then focus the first child column if any,
@@ -37,11 +37,14 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
 
       let firstKey = this.getFirstKey();
       if (firstKey == null) {
-        return;
+        return null;
       }
 
       let firstItem = this.collection.getItem(firstKey);
-      return getNthItem(getChildNodes(firstItem, this.collection), startItem.index).key;
+      if (!firstItem) {
+        return null;
+      }
+      return getNthItem(getChildNodes(firstItem, this.collection), startItem.index)?.key ?? null;
     }
 
     return super.getKeyBelow(key);
@@ -50,22 +53,23 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
   getKeyAbove(key: Key) {
     let startItem = this.collection.getItem(key);
     if (!startItem) {
-      return;
+      return null;
     }
 
     // If focus was on a column, focus the parent column if any
     if (startItem.type === 'column') {
-      let parent = this.collection.getItem(startItem.parentKey);
+      let parent = startItem.parentKey != null ? this.collection.getItem(startItem.parentKey) : null;
       if (parent && parent.type === 'column') {
         return parent.key;
       }
 
-      return;
+      return null;
     }
 
     // only return above row key if not header row
     let superKey = super.getKeyAbove(key);
-    if (superKey != null && this.collection.getItem(superKey).type !== 'headerrow') {
+    let superItem = superKey != null ? this.collection.getItem(superKey) : null;
+    if (superItem && superItem.type !== 'headerrow') {
       return superKey;
     }
 
@@ -93,6 +97,8 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
         return item.key;
       }
     }
+
+    return null;
   }
 
   private findPreviousColumnKey(column: Node<T>) {
@@ -111,12 +117,14 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
         return item.key;
       }
     }
+
+    return null;
   }
 
   getKeyRightOf(key: Key) {
     let item = this.collection.getItem(key);
     if (!item) {
-      return;
+      return null;
     }
 
     // If focus was on a column, then focus the next column
@@ -132,7 +140,7 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
   getKeyLeftOf(key: Key) {
     let item = this.collection.getItem(key);
     if (!item) {
-      return;
+      return null;
     }
 
     // If focus was on a column, then focus the previous column
@@ -158,13 +166,16 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
 
     // If the starting key is a cell, search from its parent row.
     let startItem = collection.getItem(key);
-    if (startItem.type === 'cell') {
-      key = startItem.parentKey;
+    if (startItem?.type === 'cell') {
+      key = startItem.parentKey ?? null;
     }
 
     let hasWrapped = false;
     while (key != null) {
       let item = collection.getItem(key);
+      if (!item) {
+        return null;
+      }
 
       // Check each of the row header cells in this row for a match
       for (let cell of getChildNodes(item, this.collection)) {
@@ -174,7 +185,7 @@ export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, TableColle
           if (this.collator.compare(substring, search) === 0) {
             // If we started on a cell, end on the matching cell. Otherwise, end on the row.
             let fromItem = fromKey != null ? collection.getItem(fromKey) : startItem;
-            return fromItem.type === 'cell'
+            return fromItem?.type === 'cell'
               ? cell.key
               : item.key;
           }
diff --git a/packages/@react-aria/table/src/useTable.ts b/packages/@react-aria/table/src/useTable.ts
index a83c1e51230..3ed31be82a7 100644
--- a/packages/@react-aria/table/src/useTable.ts
+++ b/packages/@react-aria/table/src/useTable.ts
@@ -96,7 +96,7 @@ export function useTable<T>(props: AriaTableProps, state: TableState<T> | TreeGr
   let {column, direction: sortDirection} = state.sortDescriptor || {};
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');
   let sortDescription = useMemo(() => {
-    let columnName = state.collection.columns.find(c => c.key === column)?.textValue;
+    let columnName = state.collection.columns.find(c => c.key === column)?.textValue ?? '';
     return sortDirection && column ? stringFormatter.format(`${sortDirection}Sort`, {columnName}) : undefined;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortDirection, column, state.collection.columns]);
@@ -105,7 +105,9 @@ export function useTable<T>(props: AriaTableProps, state: TableState<T> | TreeGr
 
   // Only announce after initial render, tabbing to the table will tell you the initial sort info already
   useUpdateEffect(() => {
-    announce(sortDescription, 'assertive', 500);
+    if (sortDescription) {
+      announce(sortDescription, 'assertive', 500);
+    }
   }, [sortDescription]);
 
   return {
diff --git a/packages/@react-aria/table/src/useTableCell.ts b/packages/@react-aria/table/src/useTableCell.ts
index 1711033345b..1016cc13297 100644
--- a/packages/@react-aria/table/src/useTableCell.ts
+++ b/packages/@react-aria/table/src/useTableCell.ts
@@ -46,10 +46,10 @@ export interface TableCellAria {
  */
 export function useTableCell<T>(props: AriaTableCellProps, state: TableState<T>, ref: RefObject<FocusableElement | null>): TableCellAria {
   let {gridCellProps, isPressed} = useGridCell(props, state, ref);
-  let columnKey = props.node.column.key;
-  if (state.collection.rowHeaderColumnKeys.has(columnKey)) {
+  let columnKey = props.node.column?.key;
+  if (columnKey != null && state.collection.rowHeaderColumnKeys.has(columnKey)) {
     gridCellProps.role = 'rowheader';
-    gridCellProps.id = getCellId(state, props.node.parentKey, columnKey);
+    gridCellProps.id = getCellId(state, props.node.parentKey!, columnKey);
   }
 
   return {
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
index 0b1c060034c..92a147b4ca5 100644
--- a/packages/@react-aria/table/src/useTableColumnHeader.ts
+++ b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -60,7 +60,7 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, st
   // Needed to pick up the focusable context, enabling things like Tooltips for example
   let {focusableProps} = useFocusable({}, ref);
 
-  let ariaSort: DOMAttributes['aria-sort'] = null;
+  let ariaSort: DOMAttributes['aria-sort'] | undefined = undefined;
   let isSortedColumn = state.sortDescriptor?.column === node.key;
   let sortDirection = state.sortDescriptor?.direction;
   // aria-sort not supported in Android Talkback
@@ -95,11 +95,11 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, st
         focusableProps,
         descriptionProps,
         // If the table is empty, make all column headers untabbable
-        shouldDisableFocus && {tabIndex: -1}
+        shouldDisableFocus ? {tabIndex: -1} : null
       ),
       role: 'columnheader',
       id: getColumnHeaderId(state, node.key),
-      'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,
+      'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : undefined,
       'aria-sort': ariaSort
     }
   };
diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts
index 95d39869659..aa8993c8984 100644
--- a/packages/@react-aria/table/src/useTableColumnResize.ts
+++ b/packages/@react-aria/table/src/useTableColumnResize.ts
@@ -66,7 +66,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   let id = useId();
   let isResizing = state.resizingColumn === item.key;
   let isResizingRef = useRef(isResizing);
-  let lastSize = useRef(null);
+  let lastSize = useRef<Map<Key, ColumnSize> | null>(null);
   let wasFocusedOnResizeStart = useRef(false);
   let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
 
@@ -158,7 +158,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
 
   let onKeyDown = useCallback((e) => {
     if (editModeEnabled) {
-      moveProps.onKeyDown(e);
+      moveProps.onKeyDown?.(e);
     }
   }, [editModeEnabled, moveProps]);
 
@@ -169,7 +169,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
     max = Number.MAX_SAFE_INTEGER;
   }
   let value = Math.floor(state.getColumnWidth(item.key));
-  let modality: string = useInteractionModality();
+  let modality: string | null = useInteractionModality();
   if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
     modality = 'touch';
   }
@@ -194,7 +194,7 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   }, [ref]);
 
   let resizingColumn = state.resizingColumn;
-  let prevResizingColumn = useRef(null);
+  let prevResizingColumn = useRef<Key | null>(null);
   useEffect(() => {
     if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
       wasFocusedOnResizeStart.current = document.activeElement === ref.current;
diff --git a/packages/@react-aria/table/src/useTableRow.ts b/packages/@react-aria/table/src/useTableRow.ts
index f7d3c097ab1..41556dd6e10 100644
--- a/packages/@react-aria/table/src/useTableRow.ts
+++ b/packages/@react-aria/table/src/useTableRow.ts
@@ -66,10 +66,10 @@ export function useTableRow<T>(props: GridRowProps<T>, state: TableState<T> | Tr
         },
         'aria-expanded': hasChildRows ? state.expandedKeys === 'all' || state.expandedKeys.has(node.key) : undefined,
         'aria-level': treeNode.level,
-        'aria-posinset': treeNode.indexOfType + 1,
+        'aria-posinset': (treeNode.indexOfType ?? 0) + 1,
         'aria-setsize': treeNode.level > 1 ?
-          (getLastItem(state.keyMap.get(treeNode?.parentKey).childNodes) as GridNode<T>).indexOfType + 1 :
-          (getLastItem(state.keyMap.get(state.collection.body.key).childNodes) as GridNode<T>).indexOfType + 1
+          ((getLastItem(state.keyMap.get(treeNode.parentKey!)?.childNodes ?? []) as GridNode<T>)?.indexOfType ?? 0) + 1 :
+          ((getLastItem(state.collection.body.childNodes) as GridNode<T>)?.indexOfType ?? 0) + 1
       };
     }
   }
diff --git a/packages/@react-aria/table/stories/example-backwards-compat.tsx b/packages/@react-aria/table/stories/example-backwards-compat.tsx
index 540b1d0acf4..2ec833d5873 100644
--- a/packages/@react-aria/table/stories/example-backwards-compat.tsx
+++ b/packages/@react-aria/table/stories/example-backwards-compat.tsx
@@ -40,7 +40,7 @@ export function Table(props) {
   if (shouldShowCheckboxes !== showSelectionCheckboxes) {
     setShowSelectionCheckboxes(shouldShowCheckboxes);
   }
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableElement | null>(null);
   let bodyRef = useRef(undefined);
   let {collection} = state;
   let {gridProps} = useTable({...props, scrollRef: bodyRef}, state, ref);
@@ -50,7 +50,7 @@ export function Table(props) {
       <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
         {collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...state.collection.getChildren(headerRow.key)].map(column =>
+            {[...state.collection.getChildren!(headerRow.key)].map(column =>
               column.props.isSelectionCell
                 ? <TableSelectAllCell key={column.key} column={column} state={state} />
                 : <TableColumnHeader key={column.key} column={column} state={state} />
@@ -61,7 +61,7 @@ export function Table(props) {
       <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
         {[...collection].map(row => (
           <TableRow key={row.key} item={row} state={state} onAction={onAction}>
-            {[...state.collection.getChildren(row.key)].map(cell =>
+            {[...state.collection.getChildren!(row.key)].map(cell =>
               cell.props.isSelectionCell
                 ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
                 : <TableCell key={cell.key} cell={cell} state={state} />
@@ -84,7 +84,7 @@ export const TableRowGroup = React.forwardRef((props: any, ref) => {
 });
 
 export function TableHeaderRow({item, state, children}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
 
   return (
@@ -95,7 +95,7 @@ export function TableHeaderRow({item, state, children}) {
 }
 
 export function TableColumnHeader({column, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableHeaderCellElement | null>(null);
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
@@ -122,7 +122,7 @@ export function TableColumnHeader({column, state}) {
 }
 
 export function TableRow({item, children, state, onAction}: {item: any, children: ReactNode, state: any, onAction?: (key: string) => void}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {rowProps} = useTableRow({node: item, onAction: onAction ? () => onAction(item.key) : undefined}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
@@ -136,7 +136,7 @@ export function TableRow({item, children, state, onAction}: {item: any, children
           : item.index % 2
             ? 'lightgray'
             : 'none',
-        color: isSelected ? 'white' : null,
+        color: isSelected ? 'white' : undefined,
         outline: isFocusVisible ? '2px solid orange' : 'none'
       }}
       {...mergeProps(rowProps, focusProps)}
@@ -147,7 +147,7 @@ export function TableRow({item, children, state, onAction}: {item: any, children
 }
 
 export function TableCell({cell, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
 
@@ -166,7 +166,7 @@ export function TableCell({cell, state}) {
 }
 
 export function TableCheckboxCell({cell, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {checkboxProps} = useTableSelectionCheckbox({key: cell.parentKey}, state);
 
@@ -183,7 +183,7 @@ export function TableCheckboxCell({cell, state}) {
 }
 
 export function TableSelectAllCell({column, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
 
diff --git a/packages/@react-aria/table/stories/example-docs.tsx b/packages/@react-aria/table/stories/example-docs.tsx
index 06b3eda89ce..fbb9df86c1c 100644
--- a/packages/@react-aria/table/stories/example-docs.tsx
+++ b/packages/@react-aria/table/stories/example-docs.tsx
@@ -27,7 +27,7 @@ export function Table(props) {
   } = props;
 
   let state = useTableState(props);
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableElement | null>(null);
   let {collection} = state;
   let {gridProps} = useTable(
     {
@@ -103,7 +103,7 @@ function ResizableTableRowGroup({type: Element, children, className}) {
 }
 
 function ResizableTableHeaderRow({item, state, children}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
 
   return (
@@ -117,7 +117,7 @@ function ResizableTableHeaderRow({item, state, children}) {
 }
 
 function ResizableTableColumnHeader({column, state, layoutState, onResizeStart, onResize, onResizeEnd}) {
-  let ref = useRef(null);
+  let ref = useRef<HTMLTableHeaderCellElement | null>(null);
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
   let allowsResizing = column.props.allowsResizing;
 
@@ -151,7 +151,7 @@ function Button(props) {
 
 function Resizer(props) {
   let {column, layoutState, onResizeStart, onResize, onResizeEnd} = props;
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLInputElement | null>(null);
   let {resizerProps, inputProps, isResizing} = useTableColumnResize({
     column,
     'aria-label': 'Resizer',
@@ -174,7 +174,7 @@ function Resizer(props) {
 }
 
 function ResizableTableRow({item, children, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {rowProps, isPressed} = useTableRow({
     node: item
@@ -194,7 +194,7 @@ function ResizableTableRow({item, children, state}) {
             : item.index % 2
               ? 'var(--spectrum-alias-highlight-hover)'
               : 'none',
-        color: isSelected ? 'white' : null,
+        color: isSelected ? 'white' : undefined,
         outline: 'none',
         boxShadow: isFocusVisible ? 'inset 0 0 0 2px orange' : 'none'
       }}
@@ -206,7 +206,7 @@ function ResizableTableRow({item, children, state}) {
 }
 
 function ResizableTableCell({cell, state, layoutState}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let column = cell.column;
diff --git a/packages/@react-aria/table/stories/example-resizing.tsx b/packages/@react-aria/table/stories/example-resizing.tsx
index 1eb334ad9e8..062648259e3 100644
--- a/packages/@react-aria/table/stories/example-resizing.tsx
+++ b/packages/@react-aria/table/stories/example-resizing.tsx
@@ -55,8 +55,8 @@ export function Table(props) {
   if (shouldShowCheckboxes !== showSelectionCheckboxes) {
     setShowSelectionCheckboxes(shouldShowCheckboxes);
   }
-  let ref = useRef(null);
-  let bodyRef = useRef(null);
+  let ref = useRef<HTMLTableElement | null>(null);
+  let bodyRef = useRef<HTMLElement | null>(null);
   let {collection} = state;
   let {gridProps} = useTable(
     {
@@ -75,14 +75,14 @@ export function Table(props) {
       setTableWidth(bodyRef.current.clientWidth);
     }
   }, []);
-  useResizeObserver({ref, onResize: () => setTableWidth(bodyRef.current.clientWidth)});
+  useResizeObserver({ref, onResize: () => setTableWidth(bodyRef.current!.clientWidth)});
 
   return (
     <table {...gridProps} ref={ref} className={classNames(ariaStyles, 'aria-table')}>
       <TableRowGroup type="thead" className={classNames(ariaStyles, 'aria-table-rowGroup', 'aria-table-rowGroupHeader')}>
         {collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state} className={classNames(ariaStyles, 'aria-table-row', 'aria-table-headerRow')}>
-            {[...state.collection.getChildren(headerRow.key)].map(column =>
+            {[...state.collection.getChildren!(headerRow.key)].map(column =>
               column.props.isSelectionCell
                 ? <TableSelectAllCell key={column.key} column={column} state={state} layout={layout} />
                 : <TableColumnHeader key={column.key} column={column} state={state} layout={layout} onResizeStart={props.onResizeStart} onResize={props.onResize} onResizeEnd={props.onResizeEnd} />
@@ -93,7 +93,7 @@ export function Table(props) {
       <TableRowGroup type="tbody" ref={bodyRef} className={classNames(ariaStyles, 'aria-table-rowGroup')}>
         {[...collection].map(row => (
           <TableRow key={row.key} item={row} state={state} className={classNames(ariaStyles, 'aria-table-row')}>
-            {[...state.collection.getChildren(row.key)].map(cell =>
+            {[...state.collection.getChildren!(row.key)].map(cell =>
               cell.props.isSelectionCell
                 ? <TableCheckboxCell key={cell.key} cell={cell} state={state} layout={layout} />
                 : <TableCell key={cell.key} cell={cell} state={state} layout={layout} />
@@ -116,7 +116,7 @@ export const TableRowGroup = React.forwardRef((props: any, ref) => {
 });
 
 export function TableHeaderRow({item, state, children, className}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
 
   return (
@@ -163,7 +163,7 @@ function Resizer({column, layout, onResizeStart, onResize, onResizeEnd}) {
   );
 }
 export function TableColumnHeader({column, state, layout, onResizeStart, onResize, onResizeEnd}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableHeaderCellElement | null>(null);
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
@@ -204,7 +204,7 @@ export function TableColumnHeader({column, state, layout, onResizeStart, onResiz
 }
 
 export function TableRow({item, children, state, className}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {rowProps} = useTableRow({node: item}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
@@ -212,7 +212,7 @@ export function TableRow({item, children, state, className}) {
   return (
     <tr
       style={{
-        color: isSelected ? 'white' : null,
+        color: isSelected ? 'white' : undefined,
         outline: isFocusVisible ? '2px solid orange' : 'none'
       }}
       className={className}
@@ -224,7 +224,7 @@ export function TableRow({item, children, state, className}) {
 }
 
 export function TableCell({cell, state, layout}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let column = cell.column;
@@ -257,7 +257,7 @@ export function TableCell({cell, state, layout}) {
 }
 
 export function TableCheckboxCell({cell, state, layout}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {checkboxProps} = useTableSelectionCheckbox({key: cell.parentKey}, state);
 
@@ -278,7 +278,7 @@ export function TableCheckboxCell({cell, state, layout}) {
 }
 
 export function TableSelectAllCell({column, state, layout}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
 
diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx
index c68120ca7a2..0b1fe607b14 100644
--- a/packages/@react-aria/table/stories/example.tsx
+++ b/packages/@react-aria/table/stories/example.tsx
@@ -31,8 +31,8 @@ export function Table(props) {
   if (shouldShowCheckboxes !== showSelectionCheckboxes) {
     setShowSelectionCheckboxes(shouldShowCheckboxes);
   }
-  let ref = useRef(undefined);
-  let bodyRef = useRef(undefined);
+  let ref = useRef<HTMLTableElement | null>(null);
+  let bodyRef = useRef<HTMLElement | null>(null);
   let {collection} = state;
   let {gridProps} = useTable(
     {
@@ -49,7 +49,7 @@ export function Table(props) {
       <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
         {collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...state.collection.getChildren(headerRow.key)].map(column =>
+            {[...state.collection.getChildren!(headerRow.key)].map(column =>
               column.props.isSelectionCell
                 ? <TableSelectAllCell key={column.key} column={column} state={state} />
                 : <TableColumnHeader key={column.key} column={column} state={state} />
@@ -60,7 +60,7 @@ export function Table(props) {
       <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
         {[...collection].map(row => (
           <TableRow key={row.key} item={row} state={state}>
-            {[...state.collection.getChildren(row.key)].map(cell =>
+            {[...state.collection.getChildren!(row.key)].map(cell =>
               cell.props.isSelectionCell
                 ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
                 : <TableCell key={cell.key} cell={cell} state={state} />
@@ -83,7 +83,7 @@ export const TableRowGroup = React.forwardRef((props: any, ref) => {
 });
 
 export function TableHeaderRow({item, state, children}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
 
   return (
@@ -94,7 +94,7 @@ export function TableHeaderRow({item, state, children}) {
 }
 
 export function TableColumnHeader({column, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
@@ -121,7 +121,7 @@ export function TableColumnHeader({column, state}) {
 }
 
 export function TableRow({item, children, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableRowElement | null>(null);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {rowProps} = useTableRow({node: item}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
@@ -135,7 +135,7 @@ export function TableRow({item, children, state}) {
           : item.index % 2
             ? 'lightgray'
             : 'none',
-        color: isSelected ? 'white' : null,
+        color: isSelected ? 'white' : undefined,
         outline: isFocusVisible ? '2px solid orange' : 'none'
       }}
       {...mergeProps(rowProps, focusProps)}
@@ -146,7 +146,7 @@ export function TableRow({item, children, state}) {
 }
 
 export function TableCell({cell, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
 
@@ -165,7 +165,7 @@ export function TableCell({cell, state}) {
 }
 
 export function TableCheckboxCell({cell, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {checkboxProps} = useTableSelectionCheckbox({key: cell.parentKey}, state);
 
@@ -182,7 +182,7 @@ export function TableCheckboxCell({cell, state}) {
 }
 
 export function TableSelectAllCell({column, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLTableCellElement | null>(null);
   let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
   let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
 
diff --git a/packages/@react-aria/table/stories/useTable.stories.tsx b/packages/@react-aria/table/stories/useTable.stories.tsx
index e27fcad5fc4..4033fd967fd 100644
--- a/packages/@react-aria/table/stories/useTable.stories.tsx
+++ b/packages/@react-aria/table/stories/useTable.stories.tsx
@@ -183,9 +183,9 @@ export const TableWithResizingFRs = {
   )
 };
 
-function ControlledTableResizing(props: {columns: Array<{name: string, uid: string, width?: ColumnSize | null}>, rows, onResize}) {
+function ControlledTableResizing(props: {columns: Array<{name: string, uid: string, width?: ColumnSize | null}>, rows: typeof defaultRows[0][], onResize}) {
   let {columns, rows = defaultRows, onResize, ...otherProps} = props;
-  let [widths, _setWidths] = useState<Map<Key, ColumnSize>>(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width])));
+  let [widths, _setWidths] = useState<Map<Key, ColumnSize | null>>(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width ?? null])));
 
   let setWidths = useCallback((vals: Map<Key, ColumnSize>) => {
     let controlledKeys = new Set(columns.filter(col => col.width).map((col) => col.uid as Key));
@@ -300,8 +300,8 @@ export const DocExampleControlled = {
 };
 
 function ControlledDocsTable(props: {columns: Array<{name: string, uid: string, width?: ColumnSize | null}>, rows, onResize}) {
-  let {columns, ...otherProps} = props;
-  let [widths, _setWidths] = useState(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width])));
+  let {columns, onResize, ...otherProps} = props;
+  let [widths, _setWidths] = useState(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width ?? null])));
   let setWidths = useCallback((newWidths: Map<Key, ColumnSize>) => {
     let controlledKeys = new Set(columns.filter(col => col.width).map((col) => col.uid as Key));
     let newVals = new Map(Array.from(newWidths).filter(([key]) => controlledKeys.has(key)));
@@ -315,7 +315,7 @@ function ControlledDocsTable(props: {columns: Array<{name: string, uid: string,
     <DocsTable
       aria-label="Table with selection"
       selectionMode="multiple"
-      onResize={setWidths}
+      onResize={onResize ?? setWidths}
       {...otherProps}>
       <TableHeader columns={cols}>
         {column => (
diff --git a/packages/@react-aria/table/test/ariaTableResizing.test.tsx b/packages/@react-aria/table/test/ariaTableResizing.test.tsx
index be6a2623325..a3a8d8d2f28 100644
--- a/packages/@react-aria/table/test/ariaTableResizing.test.tsx
+++ b/packages/@react-aria/table/test/ariaTableResizing.test.tsx
@@ -59,7 +59,7 @@ describe('Aria Table', () => {
   resizingTests(render, (tree, ...args) => tree.rerender(...args), Table, TableWithSomeResizingFRsControlled, resizeCol, resizeTable);
 });
 
-function Table(props: {columns: {id: Key, name: string}[], rows}) {
+function Table(props: {columns: {id: Key, name: string}[], rows: Record<string, string>[]}) {
   let {columns, rows, ...args} = props;
   return (
     <ResizingTable {...args}>
diff --git a/packages/@react-aria/table/test/tableResizingTests.tsx b/packages/@react-aria/table/test/tableResizingTests.tsx
index d6a7bc15fff..cac58583cb7 100644
--- a/packages/@react-aria/table/test/tableResizingTests.tsx
+++ b/packages/@react-aria/table/test/tableResizingTests.tsx
@@ -31,7 +31,7 @@ let rows = [
 
 function getColumnWidths(tree) {
   let rows = tree.getAllByRole('row') as HTMLElement[];
-  return Array.from(rows[0].childNodes).map((cell: HTMLElement) => Number(cell.style.width.replace('px', '')));
+  return Array.from(rows[0].children).map(cell => Number((cell as HTMLElement).style.width.replace('px', '')));
 }
 
 export let resizingTests = (render, rerender, Table, ControlledTable, resizeCol, resizeTable) => {
diff --git a/packages/@react-aria/table/test/useTable.test.tsx b/packages/@react-aria/table/test/useTable.test.tsx
index 79609c86926..31294738420 100644
--- a/packages/@react-aria/table/test/useTable.test.tsx
+++ b/packages/@react-aria/table/test/useTable.test.tsx
@@ -48,8 +48,8 @@ function Table(props) {
     ...props,
     showSelectionCheckboxes: props.selectionMode === 'multiple'
   });
-  let ref = useRef(undefined);
-  let bodyRef = useRef(undefined);
+  let ref = useRef<HTMLTableElement | null>(null);
+  let bodyRef = useRef<HTMLElement | null>(null);
   let {collection} = state;
   let {gridProps} = useTable(
     {
@@ -66,7 +66,7 @@ function Table(props) {
       <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
         {collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...state.collection.getChildren(headerRow.key)].map(column =>
+            {[...state.collection.getChildren!(headerRow.key)].map(column =>
               column.props.isSelectionCell
                 ? <TableSelectAllCell key={column.key} column={column} state={state} />
                 : <TableColumnHeader key={column.key} column={column} state={state} />
@@ -77,7 +77,7 @@ function Table(props) {
       <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
         {[...collection].map(row => (
           <TableRow key={row.key} item={row} state={state}>
-            {[...state.collection.getChildren(row.key)].map(cell =>
+            {[...state.collection.getChildren!(row.key)].map(cell =>
               cell.props.isSelectionCell
                 ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
                 : <TableCell key={cell.key} cell={cell} state={state} />
diff --git a/packages/@react-aria/table/test/useTableBackwardCompat.test.tsx b/packages/@react-aria/table/test/useTableBackwardCompat.test.tsx
index ca1d9bc0ff2..6a1e39878b3 100644
--- a/packages/@react-aria/table/test/useTableBackwardCompat.test.tsx
+++ b/packages/@react-aria/table/test/useTableBackwardCompat.test.tsx
@@ -49,8 +49,8 @@ function Table(props) {
     ...otherProps,
     showSelectionCheckboxes: otherProps.selectionMode === 'multiple'
   });
-  let ref = useRef(undefined);
-  let bodyRef = useRef(undefined);
+  let ref = useRef(null);
+  let bodyRef = useRef(null);
   let {collection} = state;
   let {gridProps} = useTable({...otherProps, scrollRef: bodyRef}, state, ref);
 
@@ -59,7 +59,7 @@ function Table(props) {
       <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
         {collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...state.collection.getChildren(headerRow.key)].map(column =>
+            {[...state.collection.getChildren!(headerRow.key)].map(column =>
               column.props.isSelectionCell
                 ? <TableSelectAllCell key={column.key} column={column} state={state} />
                 : <TableColumnHeader key={column.key} column={column} state={state} />
@@ -70,7 +70,7 @@ function Table(props) {
       <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
         {[...collection].map(row => (
           <TableRow key={row.key} item={row} state={state} onAction={onAction}>
-            {[...state.collection.getChildren(row.key)].map(cell =>
+            {[...state.collection.getChildren!(row.key)].map(cell =>
               cell.props.isSelectionCell
                 ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
                 : <TableCell key={cell.key} cell={cell} state={state} />
diff --git a/packages/@react-aria/tabs/stories/example.tsx b/packages/@react-aria/tabs/stories/example.tsx
index 39d004c3855..e7886d1b53c 100644
--- a/packages/@react-aria/tabs/stories/example.tsx
+++ b/packages/@react-aria/tabs/stories/example.tsx
@@ -10,11 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaTabListProps, useTab, useTabList, useTabPanel} from '@react-aria/tabs';
 import React from 'react';
-import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
 import {useTabListState} from '@react-stately/tabs';
 
-export function Tabs({shouldSelectOnPressUp, ...props}) {
+interface TabProps extends AriaTabListProps<any> {
+  shouldSelectOnPressUp?: boolean
+}
+
+export function Tabs({shouldSelectOnPressUp, ...props}: TabProps) {
   let state = useTabListState(props);
   let ref = React.useRef(null);
   let {tabListProps} = useTabList(props, state, ref);
diff --git a/packages/@react-aria/tag/src/useTag.ts b/packages/@react-aria/tag/src/useTag.ts
index 15dfea27d6e..a2916763e8f 100644
--- a/packages/@react-aria/tag/src/useTag.ts
+++ b/packages/@react-aria/tag/src/useTag.ts
@@ -80,7 +80,6 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
   let descProps = useDescription(description);
 
   let isFocused = item.key === state.selectionManager.focusedKey;
-  // @ts-ignore - data attributes are ok but TS doesn't know about them.
   let domProps = filterDOMProps(item.props);
   let linkProps = useSyntheticLinkProps(item.props);
   return {
diff --git a/packages/@react-aria/test-utils/src/menu.ts b/packages/@react-aria/test-utils/src/menu.ts
index 435e5ba84cb..73a1afd895c 100644
--- a/packages/@react-aria/test-utils/src/menu.ts
+++ b/packages/@react-aria/test-utils/src/menu.ts
@@ -134,8 +134,7 @@ export class MenuTester {
     let menu = this.menu;
     if (menu) {
       if (!option && optionText) {
-        // @ts-ignore
-        option = (within(menu!).getByText(optionText).closest('[role=menuitem], [role=menuitemradio], [role=menuitemcheckbox]'))!;
+        option = (within(menu!).getByText(optionText).closest('[role=menuitem], [role=menuitemradio], [role=menuitemcheckbox]'))! as HTMLElement;
       }
       if (!option) {
         throw new Error('No option found in the menu.');
diff --git a/packages/@react-aria/test-utils/src/testSetup.ts b/packages/@react-aria/test-utils/src/testSetup.ts
index bb356e96f1e..43b63f97fc6 100644
--- a/packages/@react-aria/test-utils/src/testSetup.ts
+++ b/packages/@react-aria/test-utils/src/testSetup.ts
@@ -14,9 +14,8 @@
  * Enables reading pageX/pageY from fireEvent.mouse*(..., {pageX: ..., pageY: ...}).
  */
 export function installMouseEvent() {
+  let oldMouseEvent = MouseEvent;
   beforeAll(() => {
-    let oldMouseEvent = MouseEvent;
-    // @ts-ignore
     global.MouseEvent = class FakeMouseEvent extends MouseEvent {
       _init: {pageX: number, pageY: number};
       constructor(name, init) {
@@ -30,12 +29,9 @@ export function installMouseEvent() {
         return this._init.pageY;
       }
     };
-    // @ts-ignore
-    global.MouseEvent.oldMouseEvent = oldMouseEvent;
   });
   afterAll(() => {
-    // @ts-ignore
-    global.MouseEvent = global.MouseEvent.oldMouseEvent;
+    global.MouseEvent = oldMouseEvent;
   });
 }
 
diff --git a/packages/@react-aria/textfield/src/useFormattedTextField.ts b/packages/@react-aria/textfield/src/useFormattedTextField.ts
index 484500d59aa..878deb9c841 100644
--- a/packages/@react-aria/textfield/src/useFormattedTextField.ts
+++ b/packages/@react-aria/textfield/src/useFormattedTextField.ts
@@ -25,7 +25,6 @@ interface FormattedTextFieldState {
 function supportsNativeBeforeInputEvent() {
   return typeof window !== 'undefined' &&
     window.InputEvent &&
-    // @ts-ignore
     typeof InputEvent.prototype.getTargetRanges === 'function';
 }
 
@@ -38,10 +37,13 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
   // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
   let onBeforeInputFallback = useEffectEvent((e: InputEvent) => {
     let input = inputRef.current;
+    if (!input) {
+      return;
+    }
 
     // Compute the next value of the input if the event is allowed to proceed.
     // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
-    let nextValue: string;
+    let nextValue: string | null = null;
     switch (e.inputType) {
       case 'historyUndo':
       case 'historyRedo':
@@ -54,7 +56,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
       case 'deleteContent':
       case 'deleteByCut':
       case 'deleteByDrag':
-        nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+        nextValue = input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
         break;
       case 'deleteContentForward':
         // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
@@ -62,24 +64,24 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
         // or code points may be deleted. However, in our currently supported locales, there are no such cases.
         // If we support additional locales in the future, this may need to change.
         nextValue = input.selectionEnd === input.selectionStart
-          ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1)
-          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+          ? input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd! + 1)
+          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
         break;
       case 'deleteContentBackward':
         nextValue = input.selectionEnd === input.selectionStart
-          ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart)
-          : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+          ? input.value.slice(0, input.selectionStart! - 1) + input.value.slice(input.selectionStart!)
+          : input.value.slice(0, input.selectionStart!) + input.value.slice(input.selectionEnd!);
         break;
       case 'deleteSoftLineBackward':
       case 'deleteHardLineBackward':
-        nextValue = input.value.slice(input.selectionStart);
+        nextValue = input.value.slice(input.selectionStart!);
         break;
       default:
         if (e.data != null) {
           nextValue =
-            input.value.slice(0, input.selectionStart) +
+            input.value.slice(0, input.selectionStart!) +
             e.data +
-            input.value.slice(input.selectionEnd);
+            input.value.slice(input.selectionEnd!);
         }
         break;
     }
@@ -93,7 +95,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
   });
 
   useEffect(() => {
-    if (!supportsNativeBeforeInputEvent()) {
+    if (!supportsNativeBeforeInputEvent() || !inputRef.current) {
       return;
     }
 
@@ -119,7 +121,7 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
 
   let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps, ...validation} = useTextField(props, inputRef);
 
-  let compositionStartState = useRef(null);
+  let compositionStartState = useRef<{value: string, selectionStart: number | null, selectionEnd: number | null} | null>(null);
   return {
     inputProps: mergeProps(
       textFieldProps,
@@ -138,14 +140,14 @@ export function useFormattedTextField(props: AriaTextFieldProps, state: Formatte
           // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
           // are implemented, there is no other way to prevent composed input.
           // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
-          let {value, selectionStart, selectionEnd} = inputRef.current;
+          let {value, selectionStart, selectionEnd} = inputRef.current!;
           compositionStartState.current = {value, selectionStart, selectionEnd};
         },
         onCompositionEnd() {
-          if (!state.validate(inputRef.current.value)) {
+          if (inputRef.current && !state.validate(inputRef.current.value)) {
             // Restore the input value in the DOM immediately so we can synchronously update the selection position.
             // But also update the value in React state as well so it is correct for future updates.
-            let {value, selectionStart, selectionEnd} = compositionStartState.current;
+            let {value, selectionStart, selectionEnd} = compositionStartState.current!;
             inputRef.current.value = value;
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
             state.setInputValue(value);
diff --git a/packages/@react-aria/textfield/stories/useTextField.stories.tsx b/packages/@react-aria/textfield/stories/useTextField.stories.tsx
index fe74074a61d..3ece5f8c2d3 100644
--- a/packages/@react-aria/textfield/stories/useTextField.stories.tsx
+++ b/packages/@react-aria/textfield/stories/useTextField.stories.tsx
@@ -9,7 +9,7 @@ interface TextFieldProps {
 
 const TextInputField = (props: TextFieldProps) => {
   const {label} = props;
-  const ref = useRef<HTMLInputElement>(undefined);
+  const ref = useRef<HTMLInputElement>(null);
   const {labelProps, inputProps} = useTextField(props, ref);
 
   return (
@@ -22,7 +22,7 @@ const TextInputField = (props: TextFieldProps) => {
 
 const TextAreaField = (props: TextFieldProps) => {
   const {label} = props;
-  const ref = useRef<HTMLTextAreaElement>(undefined);
+  const ref = useRef<HTMLTextAreaElement>(null);
   const {labelProps, inputProps} = useTextField({...props, inputElementType: 'textarea'}, ref);
 
   return (
diff --git a/packages/@react-aria/toast/src/useToast.ts b/packages/@react-aria/toast/src/useToast.ts
index d691f638036..d8b0a9bd68a 100644
--- a/packages/@react-aria/toast/src/useToast.ts
+++ b/packages/@react-aria/toast/src/useToast.ts
@@ -51,7 +51,7 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
   } = props.toast;
 
   useEffect(() => {
-    if (!timer) {
+    if (timer == null || timeout == null) {
       return;
     }
 
diff --git a/packages/@react-aria/toast/src/useToastRegion.ts b/packages/@react-aria/toast/src/useToastRegion.ts
index 6a4faed72cb..ba7cb8e5b44 100644
--- a/packages/@react-aria/toast/src/useToastRegion.ts
+++ b/packages/@react-aria/toast/src/useToastRegion.ts
@@ -1,4 +1,4 @@
-import {AriaLabelingProps, DOMAttributes, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {focusWithoutScrolling, mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';
 // @ts-ignore
@@ -41,17 +41,17 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
   // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
   // We might be making an assumption with how this works if someone implements the priority queue differently, or
   // if they only show one toast at a time.
-  let toasts = useRef([]);
+  let toasts = useRef<FocusableElement[]>([]);
   let prevVisibleToasts = useRef(state.visibleToasts);
-  let focusedToast = useRef(null);
+  let focusedToast = useRef<number | null>(null);
   useLayoutEffect(() => {
     // If no toast has focus, then don't do anything.
-    if (focusedToast.current === -1 || state.visibleToasts.length === 0) {
+    if (focusedToast.current === -1 || state.visibleToasts.length === 0 || !ref.current) {
       toasts.current = [];
       prevVisibleToasts.current = state.visibleToasts;
       return;
     }
-    toasts.current = [...ref.current.querySelectorAll('[role="alertdialog"]')];
+    toasts.current = [...ref.current.querySelectorAll('[role="alertdialog"]')] as FocusableElement[];
     // If the visible toasts haven't changed, we don't need to do anything.
     if (prevVisibleToasts.current.length === state.visibleToasts.length
       && state.visibleToasts.every((t, i) => t.key === prevVisibleToasts.current[i].key)) {
@@ -103,11 +103,11 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
     prevVisibleToasts.current = state.visibleToasts;
   }, [state.visibleToasts, ref]);
 
-  let lastFocused = useRef(null);
+  let lastFocused = useRef<FocusableElement | null>(null);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithin: (e) => {
       state.pauseAll();
-      lastFocused.current = e.relatedTarget;
+      lastFocused.current = e.relatedTarget as FocusableElement;
     },
     onBlurWithin: () => {
       state.resumeAll();
diff --git a/packages/@react-aria/toast/stories/Example.tsx b/packages/@react-aria/toast/stories/Example.tsx
index c27bd643d74..bf337271c83 100644
--- a/packages/@react-aria/toast/stories/Example.tsx
+++ b/packages/@react-aria/toast/stories/Example.tsx
@@ -15,7 +15,7 @@ import {ToastState, useToastState} from '@react-stately/toast';
 import {useButton} from 'react-aria';
 import {useToast, useToastRegion} from '../src';
 
-const ToastContext = createContext<ToastState<string>>(null);
+const ToastContext = createContext<ToastState<string> | null>(null);
 
 export function ToastContainer({children, ...otherProps}) {
   let state = useToastState<string>(otherProps);
@@ -28,8 +28,8 @@ export function ToastContainer({children, ...otherProps}) {
 }
 
 function ToastRegion() {
-  let state = useContext(ToastContext);
-  let ref = useRef(undefined);
+  let state = useContext(ToastContext)!;
+  let ref = useRef(null);
   let {regionProps} = useToastRegion({}, state, ref);
   return (
     <div {...regionProps} ref={ref} style={{position: 'fixed', bottom: 0, right: 0}}>
@@ -41,10 +41,10 @@ function ToastRegion() {
 }
 
 function Toast(props) {
-  let state = useContext(ToastContext);
+  let state = useContext(ToastContext)!;
   let ref = useRef(null);
   let {toastProps, contentProps, titleProps, closeButtonProps} = useToast(props, state, ref);
-  let buttonRef = useRef(undefined);
+  let buttonRef = useRef(null);
   let {buttonProps} = useButton(closeButtonProps, buttonRef);
 
   return (
diff --git a/packages/@react-aria/utils/src/openLink.tsx b/packages/@react-aria/utils/src/openLink.tsx
index e0b099508cc..a35b1adc258 100644
--- a/packages/@react-aria/utils/src/openLink.tsx
+++ b/packages/@react-aria/utils/src/openLink.tsx
@@ -171,7 +171,7 @@ export function getSyntheticLinkProps(props: LinkDOMProps) {
   };
 }
 
-export function useLinkProps(props: LinkDOMProps) {
+export function useLinkProps(props?: LinkDOMProps) {
   let router = useRouter();
   const href = router.useHref(props?.href ?? '');
   return {
diff --git a/packages/@react-aria/utils/src/scrollIntoView.ts b/packages/@react-aria/utils/src/scrollIntoView.ts
index 43e1c61b60d..cafcdf08a02 100644
--- a/packages/@react-aria/utils/src/scrollIntoView.ts
+++ b/packages/@react-aria/utils/src/scrollIntoView.ts
@@ -14,7 +14,7 @@ import {getScrollParents} from './getScrollParents';
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
-  containingElement?: Element
+  containingElement?: Element | null
 }
 
 /**
diff --git a/packages/@react-aria/utils/src/useViewportSize.ts b/packages/@react-aria/utils/src/useViewportSize.ts
index 050b8d892a3..71d7625b15d 100644
--- a/packages/@react-aria/utils/src/useViewportSize.ts
+++ b/packages/@react-aria/utils/src/useViewportSize.ts
@@ -18,7 +18,6 @@ interface ViewportSize {
   height: number
 }
 
-// @ts-ignore
 let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 export function useViewportSize(): ViewportSize {
diff --git a/packages/@react-aria/virtualizer/src/ScrollView.tsx b/packages/@react-aria/virtualizer/src/ScrollView.tsx
index 75c32b88679..6111ed8a769 100644
--- a/packages/@react-aria/virtualizer/src/ScrollView.tsx
+++ b/packages/@react-aria/virtualizer/src/ScrollView.tsx
@@ -44,7 +44,7 @@ function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | n
 
   return (
     <div role="presentation" {...scrollViewProps} ref={ref}>
-      <div role="presentation" {...contentProps}>
+      <div {...contentProps}>
         {props.children}
       </div>
     </div>
@@ -69,7 +69,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     scrollTop: 0,
     scrollLeft: 0,
     scrollEndTime: 0,
-    scrollTimeout: null,
+    scrollTimeout: null as ReturnType<typeof setTimeout> | null,
     width: 0,
     height: 0,
     isScrolling: false
@@ -114,7 +114,10 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       if (state.scrollEndTime <= now + 50) {
         state.scrollEndTime = now + 300;
 
-        clearTimeout(state.scrollTimeout);
+        if (state.scrollTimeout != null) {
+          clearTimeout(state.scrollTimeout);
+        }
+
         state.scrollTimeout = setTimeout(() => {
           state.isScrolling = false;
           setScrolling(false);
@@ -135,7 +138,10 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
    
   useEffect(() => {
     return () => {
-      clearTimeout(state.scrollTimeout);
+      if (state.scrollTimeout != null) {
+        clearTimeout(state.scrollTimeout);
+      }
+
       if (state.isScrolling) {
         window.dispatchEvent(new Event('tk.connect-observer'));
       }
@@ -146,7 +152,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   let isUpdatingSize = useRef(false);
   let updateSize = useEffectEvent((flush: typeof flushSync) => {
     let dom = ref.current;
-    if (!dom && !isUpdatingSize.current) {
+    if (!dom || isUpdatingSize.current) {
       return;
     }
 
diff --git a/packages/@react-aria/virtualizer/src/Virtualizer.tsx b/packages/@react-aria/virtualizer/src/Virtualizer.tsx
index 84a8c0b9728..6502b80130b 100644
--- a/packages/@react-aria/virtualizer/src/Virtualizer.tsx
+++ b/packages/@react-aria/virtualizer/src/Virtualizer.tsx
@@ -12,8 +12,8 @@
 
 import {Collection, Key, RefObject} from '@react-types/shared';
 import {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
-import {mergeProps, useLoadMore} from '@react-aria/utils';
-import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';
+import {mergeProps, useLoadMore, useObjectRef} from '@react-aria/utils';
+import React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback} from 'react';
 import {ScrollView} from './ScrollView';
 import {VirtualizerItem} from './VirtualizerItem';
 
@@ -22,7 +22,7 @@ type RenderWrapper<T extends object, V> = (
   reusableView: ReusableView<T, V>,
   children: ReusableView<T, V>[],
   renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]
-) => ReactElement;
+) => ReactElement | null;
 
 interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
   children: (type: string, content: T) => V,
@@ -36,32 +36,31 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
   layoutOptions?: O
 }
 
-function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {
+function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
   let {
     children: renderView,
     renderWrapper,
     layout,
     collection,
     scrollDirection,
-     
     isLoading,
-     
     onLoadMore,
     persistedKeys,
     layoutOptions,
     ...otherProps
   } = props;
 
-  let fallbackRef = useRef<HTMLDivElement>(undefined);
-  ref = ref || fallbackRef;
+  let ref = useObjectRef(forwardedRef);
 
   let state = useVirtualizerState({
     layout,
     collection,
     renderView,
     onVisibleRectChange(rect) {
-      ref.current.scrollLeft = rect.x;
-      ref.current.scrollTop = rect.y;
+      if (ref.current) {
+        ref.current.scrollLeft = rect.x;
+        ref.current.scrollTop = rect.y;
+      }
     },
     persistedKeys,
     layoutOptions
@@ -108,7 +107,7 @@ function defaultRenderWrapper<T extends object, V extends ReactNode>(
   return (
     <VirtualizerItem
       key={reusableView.key}
-      layoutInfo={reusableView.layoutInfo}
+      layoutInfo={reusableView.layoutInfo!}
       virtualizer={reusableView.virtualizer}
       parent={parent?.layoutInfo}>
       {reusableView.rendered}
diff --git a/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx b/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx
index bf458eb25d7..e2080ef0721 100644
--- a/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx
+++ b/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx
@@ -17,6 +17,7 @@ import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
 
 interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
+  layoutInfo: LayoutInfo,
   parent?: LayoutInfo | null,
   style?: CSSProperties,
   className?: string,
@@ -26,7 +27,7 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
 export function VirtualizerItem(props: VirtualizerItemProps) {
   let {style, className, layoutInfo, virtualizer, parent, children} = props;
   let {direction} = useLocale();
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   useVirtualizerItem({
     layoutInfo,
     virtualizer,
@@ -57,7 +58,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     }
   }
 
-  let rectStyles = {
+  let rectStyles: Record<string, number | undefined> = {
     // TODO: For layoutInfos that are sticky that have parents with overflow visible, their "top" will be relative to the to the nearest scrolling container
     // which WON'T be the parent since the parent has overflow visible. This means we shouldn't offset the height by the parent's position
     // Not 100% about this change here since it is quite ambigious what the scrolling container maybe and how its top is positioned with respect to the
@@ -82,7 +83,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
     opacity: layoutInfo.opacity,
     zIndex: layoutInfo.zIndex,
-    transform: layoutInfo.transform,
+    transform: layoutInfo.transform ?? undefined,
     contain: 'size layout style',
     ...rectStyles
   };
diff --git a/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts b/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts
index 366d70c0565..e4214ccd3c1 100644
--- a/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts
+++ b/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts
@@ -20,20 +20,21 @@ interface IVirtualizer {
 }
 
 export interface VirtualizerItemOptions {
-  layoutInfo: LayoutInfo,
+  layoutInfo: LayoutInfo | null,
   virtualizer: IVirtualizer,
   ref: RefObject<HTMLElement | null>
 }
 
 export function useVirtualizerItem(options: VirtualizerItemOptions) {
   let {layoutInfo, virtualizer, ref} = options;
+  let key = layoutInfo?.key;
 
   let updateSize = useCallback(() => {
-    if (layoutInfo) {
+    if (key != null && ref.current) {
       let size = getSize(ref.current);
-      virtualizer.updateItemSize(layoutInfo.key, size);
+      virtualizer.updateItemSize(key, size);
     }
-  }, [virtualizer, layoutInfo?.key, ref]);
+  }, [virtualizer, key, ref]);
 
   useLayoutEffect(() => {
     if (layoutInfo?.estimatedSize) {
diff --git a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
index 1b2ef92a76b..b198657a1f5 100644
--- a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
@@ -239,8 +239,8 @@ function Example(props) {
 }
 
 function CalendarWithTime(props) {
-  let [value, setValue] = useState(new CalendarDateTime(2019, 6, 5, 8));
-  let onChange = (v: CalendarDateTime) => {
+  let [value, setValue] = useState<CalendarDateTime | null>(new CalendarDateTime(2019, 6, 5, 8));
+  let onChange = (v: CalendarDateTime | null) => {
     setValue(v);
     props?.onChange?.(v);
   };
@@ -254,8 +254,8 @@ function CalendarWithTime(props) {
 }
 
 function CalendarWithZonedTime(props) {
-  let [value, setValue] = useState(parseZonedDateTime('2021-03-14T00:45-08:00[America/Los_Angeles]'));
-  let onChange = (v: ZonedDateTime) => {
+  let [value, setValue] = useState<ZonedDateTime | null>(parseZonedDateTime('2021-03-14T00:45-08:00[America/Los_Angeles]'));
+  let onChange = (v: ZonedDateTime | null) => {
     setValue(v);
     props?.onChange?.(v);
   };
diff --git a/packages/@react-spectrum/card/chromatic-fc/Card.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/Card.stories.tsx
index b75d95d3990..4ea85d9b0ab 100644
--- a/packages/@react-spectrum/card/chromatic-fc/Card.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/Card.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
index 3df454dfb33..394c4ad639e 100644
--- a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
index ec30d17df53..4f3f26f2a02 100644
--- a/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/chromatic/Card.stories.tsx b/packages/@react-spectrum/card/chromatic/Card.stories.tsx
index 4c685a78a90..04ebd6e6031 100644
--- a/packages/@react-spectrum/card/chromatic/Card.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/Card.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
index ce775205a4d..804d825b1d3 100644
--- a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/chromatic/HorizontalCard.stories.tsx b/packages/@react-spectrum/card/chromatic/HorizontalCard.stories.tsx
index 3cdac574a9f..838c89bb754 100644
--- a/packages/@react-spectrum/card/chromatic/HorizontalCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/HorizontalCard.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx b/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
index 125c0112c74..abc9390c752 100644
--- a/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/BaseLayout.tsx b/packages/@react-spectrum/card/src/BaseLayout.tsx
index f62c7fc9a4c..d2ce33452f6 100644
--- a/packages/@react-spectrum/card/src/BaseLayout.tsx
+++ b/packages/@react-spectrum/card/src/BaseLayout.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/Card.tsx b/packages/@react-spectrum/card/src/Card.tsx
index 80bd0044495..bfe6b3db1ed 100644
--- a/packages/@react-spectrum/card/src/Card.tsx
+++ b/packages/@react-spectrum/card/src/Card.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/CardBase.tsx b/packages/@react-spectrum/card/src/CardBase.tsx
index 6ad62861b0d..67d421debbb 100644
--- a/packages/@react-spectrum/card/src/CardBase.tsx
+++ b/packages/@react-spectrum/card/src/CardBase.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/CardView.tsx b/packages/@react-spectrum/card/src/CardView.tsx
index 97341ade178..eef7e6d65f8 100644
--- a/packages/@react-spectrum/card/src/CardView.tsx
+++ b/packages/@react-spectrum/card/src/CardView.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/CardViewContext.tsx b/packages/@react-spectrum/card/src/CardViewContext.tsx
index af7ccfd785d..c359cc67562 100644
--- a/packages/@react-spectrum/card/src/CardViewContext.tsx
+++ b/packages/@react-spectrum/card/src/CardViewContext.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/GalleryLayout.tsx b/packages/@react-spectrum/card/src/GalleryLayout.tsx
index d9241c467c5..a99eb481456 100644
--- a/packages/@react-spectrum/card/src/GalleryLayout.tsx
+++ b/packages/@react-spectrum/card/src/GalleryLayout.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/GridLayout.tsx b/packages/@react-spectrum/card/src/GridLayout.tsx
index 682c5520236..36fa85a4457 100644
--- a/packages/@react-spectrum/card/src/GridLayout.tsx
+++ b/packages/@react-spectrum/card/src/GridLayout.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/src/WaterfallLayout.tsx b/packages/@react-spectrum/card/src/WaterfallLayout.tsx
index ec40eb303b7..a0955ae0f91 100644
--- a/packages/@react-spectrum/card/src/WaterfallLayout.tsx
+++ b/packages/@react-spectrum/card/src/WaterfallLayout.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/Card.stories.tsx b/packages/@react-spectrum/card/stories/Card.stories.tsx
index 0bf9e285eb7..1292fe60f6d 100644
--- a/packages/@react-spectrum/card/stories/Card.stories.tsx
+++ b/packages/@react-spectrum/card/stories/Card.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
index 49476190c03..bb59b03f79b 100644
--- a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
index 02017ad8827..12b78121a15 100644
--- a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx b/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx
index 1aa83bb1d07..34e7f7949d9 100644
--- a/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx
+++ b/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/QuietCard.stories.tsx b/packages/@react-spectrum/card/stories/QuietCard.stories.tsx
index 70a43e8a710..e1f14600600 100644
--- a/packages/@react-spectrum/card/stories/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/stories/QuietCard.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
index 8f06eb526a0..0cc0554cc1c 100644
--- a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright 2021 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
diff --git a/packages/@react-spectrum/card/stories/utils.ts b/packages/@react-spectrum/card/stories/utils.ts
index 9d131bb5d40..f6183c330d1 100644
--- a/packages/@react-spectrum/card/stories/utils.ts
+++ b/packages/@react-spectrum/card/stories/utils.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 
 let images = [
   {width: 1001, height: 381, src: 'https://i.imgur.com/Z7AzH2c.jpg'},
diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/packages/@react-spectrum/color/src/ColorThumb.tsx
index e8e6fff00a3..dfc1cc1c6ad 100644
--- a/packages/@react-spectrum/color/src/ColorThumb.tsx
+++ b/packages/@react-spectrum/color/src/ColorThumb.tsx
@@ -12,13 +12,13 @@
 
 import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
+import {Context} from '@react-spectrum/provider';
 import {DOMProps, RefObject} from '@react-types/shared';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {CSSProperties, ReactElement, useRef, useState} from 'react';
+import React, {CSSProperties, ReactElement, useContext, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
 import {useId, useLayoutEffect} from '@react-aria/utils';
-import {useProvider} from '@react-spectrum/provider';
 
 interface ColorThumbProps extends DOMProps {
   value: Color,
@@ -36,7 +36,7 @@ function ColorThumb(props: ColorThumbProps) {
 
   let valueCSS = value.toString('css');
   let loupeRef = useRef<HTMLElement | null>(null);
-  let provider = useProvider();
+  let provider = useContext(Context);
 
   return (
     <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>
diff --git a/packages/@react-spectrum/color/src/ColorWheel.tsx b/packages/@react-spectrum/color/src/ColorWheel.tsx
index 0d7b30ee02b..4b9ccd4c9a7 100644
--- a/packages/@react-spectrum/color/src/ColorWheel.tsx
+++ b/packages/@react-spectrum/color/src/ColorWheel.tsx
@@ -88,7 +88,6 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
       style={{
         ...styleProps.style,
         // Workaround around https://github.com/adobe/spectrum-css/issues/1032
-        // @ts-ignore
         'width': size,
         'height': size
       }}>
diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx
index 178c7de2133..740f56e392e 100644
--- a/packages/@react-spectrum/combobox/src/ComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx
@@ -33,6 +33,7 @@ import {Popover} from '@react-spectrum/overlays';
 import {PressResponder, useHover} from '@react-aria/interactions';
 import {ProgressCircle} from '@react-spectrum/progress';
 import React, {
+  ForwardedRef,
   InputHTMLAttributes,
   ReactElement,
   RefObject,
@@ -69,7 +70,7 @@ function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: Focusa
   }
 }
 
-const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
+const ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
   let {
     menuTrigger = 'input',
     shouldFlip = true,
@@ -89,14 +90,14 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');
   let isAsync = loadingState != null;
-  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
+  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);
   let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);
-  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(undefined);
+  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);
   let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);
-  let listBoxRef = useRef(undefined);
-  let inputRef = useRef<HTMLInputElement>(undefined);
+  let listBoxRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement>(null);
   // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.
-  let inputGroupRef = useRef<HTMLDivElement>(undefined);
+  let inputGroupRef = useRef<HTMLDivElement>(null);
   let domRef = useFocusableRef(ref, inputRef);
 
   let {contains} = useFilter({sensitivity: 'base'});
@@ -124,7 +125,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
   );
 
   // Measure the width of the inputfield and the button to inform the width of the menu (below).
-  let [menuWidth, setMenuWidth] = useState(null);
+  let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);
   let {scale} = useProvider();
 
   let onResize = useCallback(() => {
@@ -142,11 +143,12 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
 
   useLayoutEffect(onResize, [scale, onResize]);
 
-  let width = isQuiet ? null : menuWidth;
+  let width = isQuiet ? undefined : menuWidth;
   let style = {
     width: customMenuWidth ? dimensionValue(customMenuWidth) : width,
     minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
   };
+  let cbInputProps = {...props, children: null};
 
   return (
     <>
@@ -160,14 +162,14 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
         labelProps={labelProps}
         ref={domRef}>
         <ComboBoxInput
-          {...props}
+          {...cbInputProps}
           isOpen={state.isOpen}
           loadingState={loadingState}
           inputProps={inputProps}
           inputRef={inputRef}
           triggerProps={buttonProps}
           triggerRef={buttonRef}
-          validationState={props.validationState || (isInvalid ? 'invalid' : null)}
+          validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}
           ref={inputGroupRef} />
       </Field>
       {name && formValue === 'key' && <input type="hidden" name={name} value={state.selectedKey ?? ''} />}
@@ -186,7 +188,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
           {...listBoxProps}
           ref={listBoxRef}
           disallowEmptySelection
-          autoFocus={state.focusStrategy}
+          autoFocus={state.focusStrategy ?? undefined}
           shouldSelectOnPressUp
           focusOnPointerEnter
           layout={layout}
@@ -215,7 +217,7 @@ interface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {
   isOpen?: boolean
 }
 
-const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: RefObject<HTMLElement | null>) {
+const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: ForwardedRef<HTMLElement | null>) {
   let {
     isQuiet,
     isDisabled,
@@ -233,7 +235,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
   } = props;
   let {hoverProps, isHovered} = useHover({});
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');
-  let timeout = useRef(null);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let [showLoading, setShowLoading] = useState(false);
 
   let loadingCircle = (
@@ -272,7 +274,9 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
     } else if (!isLoading) {
       // If loading is no longer happening, clear any timers and hide the loading circle
       setShowLoading(false);
-      clearTimeout(timeout.current);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
       timeout.current = null;
     }
 
@@ -281,7 +285,9 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
 
   useEffect(() => {
     return () => {
-      clearTimeout(timeout.current);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
       timeout.current = null;
     };
   }, []);
@@ -337,7 +343,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
           // loading circle should only be displayed if menu is open, if menuTrigger is "manual", or first time load (to stop circle from showing up when user selects an option)
           // TODO: add special case for completionMode: complete as well
           isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}
-          loadingIndicator={loadingState != null && loadingCircle}
+          loadingIndicator={loadingState != null ? loadingCircle : undefined}
           disableFocusRing />
         <PressResponder preventFocusOnPress isPressed={isOpen}>
           <FieldButton
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index 19979912c8c..b9bb7aa7665 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -21,15 +21,15 @@ import {ComboBoxState, useComboBoxState} from '@react-stately/combobox';
 import comboboxStyles from './combobox.css';
 import {DismissButton, useOverlayTrigger} from '@react-aria/overlays';
 import {Field} from '@react-spectrum/label';
-import {FocusableRef, FocusableRefValue, RefObject, ValidationState} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, ValidationState} from '@react-types/shared';
 import {FocusRing, focusSafely, FocusScope} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
-import {mergeProps, useFormReset, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useId, useObjectRef} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, useCallback, useEffect, useRef, useState} from 'react';
+import React, {ForwardedRef, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, useCallback, useEffect, useRef, useState} from 'react';
 import searchStyles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {setInteractionModality, useHover} from '@react-aria/interactions';
 import {SpectrumComboBoxProps} from '@react-types/combobox';
@@ -45,7 +45,7 @@ import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useFormValidation} from '@react-aria/form';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
+export const MobileComboBox = React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
@@ -73,17 +73,17 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
     shouldCloseOnBlur: false
   });
 
-  let buttonRef = useRef<HTMLElement>(undefined);
+  let buttonRef = useRef<HTMLDivElement>(null);
   let domRef = useFocusableRef(ref, buttonRef);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
   let inputRef = useRef<HTMLInputElement>(null);
   useFormValidation({
     ...props,
-    focus: () => buttonRef.current.focus()
+    focus: () => buttonRef.current?.focus()
   }, state, inputRef);
   let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
-  let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+  let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
   let errorMessage = props.errorMessage ?? validationErrors.join(' ');
 
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
@@ -96,7 +96,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
   // Focus the button and show focus ring when clicking on the label
   labelProps.onClick = () => {
     if (!props.isDisabled) {
-      buttonRef.current.focus();
+      buttonRef.current?.focus();
       setInteractionModality('keyboard');
     }
   };
@@ -104,7 +104,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
   let inputProps: InputHTMLAttributes<HTMLInputElement> = {
     type: 'hidden',
     name,
-    value: formValue === 'text' ? state.inputValue : state.selectedKey
+    value: formValue === 'text' ? state.inputValue : String(state.selectedKey)
   };
 
   if (validationBehavior === 'native') {
@@ -117,7 +117,7 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
     inputProps.onChange = () => {};
   }
 
-  useFormReset(inputRef, inputProps.value, formValue === 'text' ? state.setInputValue : state.setSelectedKey);
+  useFormReset(inputRef, String(inputProps.value ?? ''), formValue === 'text' ? state.setInputValue : state.setSelectedKey);
 
   return (
     <>
@@ -166,7 +166,7 @@ interface ComboBoxButtonProps extends AriaButtonProps {
   className?: string
 }
 
-const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: RefObject<HTMLElement | null>) {
+export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     isQuiet,
     isDisabled,
@@ -194,6 +194,7 @@ const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxB
     )
   });
 
+  let objRef = useObjectRef(ref);
   let {hoverProps, isHovered} = useHover({});
   let {buttonProps, isPressed} = useButton({
     ...props,
@@ -204,7 +205,7 @@ const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxB
       validationState === 'invalid' ? invalidId : null
     ].filter(Boolean).join(' '),
     elementType: 'div'
-  }, ref);
+  }, objRef);
 
   return (
     (<FocusRing
@@ -213,7 +214,7 @@ const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxB
       <div
         {...mergeProps(hoverProps, buttonProps)}
         aria-haspopup="dialog"
-        ref={ref as RefObject<HTMLDivElement | null>}
+        ref={objRef}
         style={{...style, outline: 'none'}}
         className={
           classNames(
@@ -307,8 +308,8 @@ const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxB
   );
 });
 
-interface ComboBoxTrayProps extends SpectrumComboBoxProps<unknown> {
-  state: ComboBoxState<unknown>,
+interface ComboBoxTrayProps extends SpectrumComboBoxProps<any> {
+  state: ComboBoxState<any>,
   overlayProps: HTMLAttributes<HTMLElement>,
   loadingIndicator?: ReactElement,
   onClose: () => void
@@ -327,12 +328,12 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
     onClose
   } = props;
 
-  let timeout = useRef(null);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let [showLoading, setShowLoading] = useState(false);
-  let inputRef = useRef<HTMLInputElement>(undefined);
-  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(undefined);
-  let popoverRef = useRef<HTMLDivElement>(undefined);
-  let listBoxRef = useRef<HTMLDivElement>(undefined);
+  let inputRef = useRef<HTMLInputElement>(null);
+  let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   let layout = useListBoxLayout();
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');
@@ -353,7 +354,9 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
   );
 
   React.useEffect(() => {
-    focusSafely(inputRef.current);
+    if (inputRef.current) {
+      focusSafely(inputRef.current);
+    }
   }, []);
 
   React.useEffect(() => {
@@ -388,7 +391,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       excludeFromTabOrder
       onPress={() => {
         state.setInputValue('');
-        inputRef.current.focus();
+        inputRef.current?.focus();
       }}
       UNSAFE_className={
         classNames(
@@ -431,7 +434,7 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
       return;
     }
 
-    popoverRef.current.focus();
+    popoverRef.current?.focus();
   }, [inputRef, popoverRef, isTouchDown]);
 
   let inputValue = inputProps.value;
@@ -454,7 +457,9 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
     } else if (loadingState !== 'filtering') {
       // If loading is no longer happening, clear any timers and hide the loading circle
       setShowLoading(false);
-      clearTimeout(timeout.current);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
       timeout.current = null;
     }
 
@@ -464,9 +469,9 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
   let onKeyDown = (e) => {
     // Close virtual keyboard if user hits Enter w/o any focused options
     if (e.key === 'Enter' && state.selectionManager.focusedKey == null) {
-      popoverRef.current.focus();
+      popoverRef.current?.focus();
     } else {
-      inputProps.onKeyDown(e);
+      inputProps.onKeyDown?.(e);
     }
   };
 
@@ -489,11 +494,11 @@ function ComboBoxTray(props: ComboBoxTrayProps) {
           inputRef={inputRef}
           isDisabled={isDisabled}
           isLoading={showLoading && loadingState === 'filtering'}
-          loadingIndicator={loadingState != null && loadingCircle}
+          loadingIndicator={loadingState != null ? loadingCircle : undefined}
           validationState={validationState}
           labelAlign="start"
           labelPosition="top"
-          wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly && clearButton}
+          wrapperChildren={(state.inputValue !== '' || loadingState === 'filtering' || validationState != null) && !props.isReadOnly ? clearButton : undefined}
           UNSAFE_className={
             classNames(
               searchStyles,
diff --git a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx
index 69437d2e7f4..7d46f8504c5 100644
--- a/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/combobox/stories/ComboBox.stories.tsx
@@ -54,7 +54,7 @@ let withSection = [
 
 let lotsOfSections: any[] = [];
 for (let i = 0; i < 50; i++) {
-  let children = [];
+  let children: {name: string}[] = [];
   for (let j = 0; j < 50; j++) {
     children.push({name: `Section ${i}, Item ${j}`});
   }
@@ -605,12 +605,12 @@ function AsyncLoadingExampleControlledKey(props) {
   let onSelectionChange = (key) => {
     let itemText = list.getItem(key)?.name;
     list.setSelectedKeys(new Set([key]));
-    list.setFilterText(itemText);
+    list.setFilterText(itemText ?? '');
   };
 
   let onInputChange = (value) => {
     if (value === '') {
-      list.setSelectedKeys(new Set([null]));
+      list.setSelectedKeys(new Set<Key>());
     }
     list.setFilterText(value);
   };
@@ -673,12 +673,12 @@ function AsyncLoadingExampleControlledKeyWithReset(props) {
   let onSelectionChange = (key) => {
     let itemText = list.getItem(key)?.name;
     list.setSelectedKeys(new Set([key]));
-    list.setFilterText(itemText);
+    list.setFilterText(itemText ?? '');
   };
 
   let onInputChange = (value) => {
     if (value === '') {
-      list.setSelectedKeys(new Set([null]));
+      list.setSelectedKeys(new Set<Key>());
     }
     list.setFilterText(value);
   };
diff --git a/packages/@react-spectrum/datepicker/src/DateField.tsx b/packages/@react-spectrum/datepicker/src/DateField.tsx
index 06b3c35117b..de30373ce53 100644
--- a/packages/@react-spectrum/datepicker/src/DateField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateField.tsx
@@ -45,8 +45,8 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
     createCalendar
   });
 
-  let fieldRef = useRef(null);
-  let inputRef = useRef(null);
+  let fieldRef = useRef<HTMLElement | null>(null);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useDateField({
     ...props,
     inputRef
@@ -56,7 +56,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
-    descriptionProps.id = null;
+    descriptionProps.id = undefined;
   }
 
   let validationState = state.validationState || (isInvalid ? 'invalid' : null);
@@ -72,7 +72,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={validationState}
+      validationState={validationState ?? undefined}
       isInvalid={isInvalid}
       validationErrors={validationErrors}
       validationDetails={validationDetails}
diff --git a/packages/@react-spectrum/datepicker/src/DatePicker.tsx b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
index b298e62203b..a81334f1424 100644
--- a/packages/@react-spectrum/datepicker/src/DatePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePicker.tsx
@@ -50,7 +50,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     pageBehavior
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
-  let targetRef = useRef<HTMLDivElement>(undefined);
+  let targetRef = useRef<HTMLDivElement | null>(null);
   let state = useDatePickerState({
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
@@ -99,10 +99,10 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
-    descriptionProps.id = null;
+    descriptionProps.id = undefined;
   }
 
-  let placeholder: DateValue = placeholderValue;
+  let placeholder: DateValue | null | undefined = placeholderValue;
   let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
   let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
   let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
index b87dfad5d42..210bfd21324 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
@@ -33,7 +33,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     isRequired,
     inputClassName
   } = props;
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {locale} = useLocale();
   let state = useDateFieldState({
     ...props,
@@ -41,7 +41,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     createCalendar
   });
 
-  let inputRef = useRef(undefined);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);
 
   return (
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
index 36147357f9e..82f43c90e0f 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
@@ -50,7 +50,7 @@ function LiteralSegment({segment}: LiteralSegmentProps) {
 }
 
 function EditableSegment({segment, state}: DatePickerSegmentProps) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {segmentProps} = useDateSegment(segment, state, ref);
 
   return (
diff --git a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
index 11143195d19..9b8dc42ba2f 100644
--- a/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
+++ b/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx
@@ -50,7 +50,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     pageBehavior
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
-  let targetRef = useRef<HTMLDivElement>(undefined);
+  let targetRef = useRef<HTMLDivElement | null>(null);
   let state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
@@ -99,10 +99,10 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
-    descriptionProps.id = null;
+    descriptionProps.id = undefined;
   }
 
-  let placeholder: DateValue = placeholderValue;
+  let placeholder: DateValue | null | undefined = placeholderValue;
   let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
   let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
   let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
diff --git a/packages/@react-spectrum/datepicker/src/Input.tsx b/packages/@react-spectrum/datepicker/src/Input.tsx
index 3d97c5870dc..fc44e36da54 100644
--- a/packages/@react-spectrum/datepicker/src/Input.tsx
+++ b/packages/@react-spectrum/datepicker/src/Input.tsx
@@ -15,12 +15,12 @@ import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, useValueEffect} from '@react-spectrum/utils';
 import datepickerStyles from './styles.css';
 import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import React, {useCallback, useRef} from 'react';
+import React, {ReactElement, useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 
 function Input(props, ref) {
-  let inputRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {
     isDisabled,
     isQuiet,
@@ -38,7 +38,7 @@ function Input(props, ref) {
   // not cause a layout shift.
   let [reservePadding, setReservePadding] = useValueEffect(false);
   let onResize = useCallback(() => setReservePadding(function *(reservePadding) {
-    if (inputRef.current) {
+    if (inputRef.current && inputRef.current.parentElement) {
       if (reservePadding) {
         // Try to collapse padding if the content is clipped.
         if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {
@@ -114,7 +114,7 @@ function Input(props, ref) {
     'spectrum-Textfield-validationIcon'
   );
 
-  let validationIcon = null;
+  let validationIcon: ReactElement | null = null;
   if (validationState === 'invalid' && !isDisabled) {
     validationIcon = <Alert data-testid="invalid-icon" UNSAFE_className={iconClass} />;
   } else if (validationState === 'valid' && !isDisabled) {
diff --git a/packages/@react-spectrum/datepicker/src/TimeField.tsx b/packages/@react-spectrum/datepicker/src/TimeField.tsx
index 5d2471ea857..428f4363451 100644
--- a/packages/@react-spectrum/datepicker/src/TimeField.tsx
+++ b/packages/@react-spectrum/datepicker/src/TimeField.tsx
@@ -43,8 +43,8 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
     locale
   });
 
-  let fieldRef = useRef(null);
-  let inputRef = useRef(null);
+  let fieldRef = useRef<HTMLDivElement | null>(null);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({
     ...props,
     inputRef
@@ -62,7 +62,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={validationState}
+      validationState={validationState ?? undefined}
       isInvalid={isInvalid}
       validationErrors={validationErrors}
       validationDetails={validationDetails}
diff --git a/packages/@react-spectrum/datepicker/src/utils.ts b/packages/@react-spectrum/datepicker/src/utils.ts
index 715213ac0b7..9e9fad08211 100644
--- a/packages/@react-spectrum/datepicker/src/utils.ts
+++ b/packages/@react-spectrum/datepicker/src/utils.ts
@@ -42,7 +42,7 @@ export function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'desc
 }
 
 export function useVisibleMonths(maxVisibleMonths: number) {
-  let {scale} = useProvider();
+  let {scale} = useProvider()!;
   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));
   useLayoutEffect(() => {
     let onResize = () => setVisibleMonths(getVisibleMonths(scale));
@@ -68,7 +68,7 @@ function getVisibleMonths(scale) {
 }
 
 export function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {
-  let domRef = useRef(undefined);
+  let domRef = useRef<HTMLElement | null>(null);
   useImperativeHandle(ref, () => ({
     ...createDOMRef(domRef),
     focus() {
diff --git a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
index a822f1104d0..59a91141b06 100644
--- a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
@@ -314,12 +314,12 @@ function Example(props) {
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
-  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
+  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(v => v != null) : [calendars[0]], [pref]);
   let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p.key === c.key)), [preferredCalendars]);
 
   let updateLocale = locale => {
     setLocale(locale);
-    let pref = preferences.find(p => p.locale === locale);
+    let pref = preferences.find(p => p.locale === locale)!;
     setCalendar(pref.ordering.split(' ')[0]);
   };
 
diff --git a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
index c26c70ac3ef..58740157c8c 100644
--- a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
@@ -332,12 +332,12 @@ function Example(props) {
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
-  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
+  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(v => v != null) : [calendars[0]], [pref]);
   let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p.key === c.key)), [preferredCalendars]);
 
   let updateLocale = locale => {
     setLocale(locale);
-    let pref = preferences.find(p => p.locale === locale);
+    let pref = preferences.find(p => p.locale === locale)!;
     setCalendar(pref.ordering.split(' ')[0]);
   };
 
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
index 37d1c0d8d81..db97cd19936 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
@@ -14,6 +14,7 @@ import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import {CalendarDate, getLocalTimeZone, isWeekend, parseDate, today, toZoned} from '@internationalized/date';
 import {chain} from '@react-aria/utils';
+import {DateRange} from '@react-types/datepicker';
 import {DateRangePicker} from '../';
 import {DateValue} from '@react-types/calendar';
 import {Flex} from '@react-spectrum/layout';
@@ -129,7 +130,7 @@ MinDate201011MaxDate202011.story = {
 
 export const IsDateUnavailable = () => {
   const disabledRanges = [[today(getLocalTimeZone()), today(getLocalTimeZone()).add({weeks: 1})], [today(getLocalTimeZone()).add({weeks: 2}), today(getLocalTimeZone()).add({weeks: 3})]];
-  let [value, setValue] = React.useState(null);
+  let [value, setValue] = React.useState<DateRange | null>(null);
   let isInvalid = value && disabledRanges.some(interval => value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0);
   let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
   return render({
@@ -238,12 +239,12 @@ function Example(props) {
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
-  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
+  let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(v => v != null) : [calendars[0]], [pref]);
   let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p.key === c.key)), [preferredCalendars]);
 
   let updateLocale = locale => {
     setLocale(locale);
-    let pref = preferences.find(p => p.locale === locale);
+    let pref = preferences.find(p => p.locale === locale)!;
     setCalendar(pref.ordering.split(' ')[0]);
   };
 
@@ -270,7 +271,7 @@ function Example(props) {
 }
 
 function ControlledExample(props) {
-  let [value, setValue] = React.useState(null);
+  let [value, setValue] = React.useState<DateRange | null>(null);
 
   return (
     <Flex direction="column" alignItems="center" gap="size-150">
diff --git a/packages/@react-spectrum/dnd/src/useDragAndDrop.ts b/packages/@react-spectrum/dnd/src/useDragAndDrop.ts
index 6ce00d057c5..73f62ef32bb 100644
--- a/packages/@react-spectrum/dnd/src/useDragAndDrop.ts
+++ b/packages/@react-spectrum/dnd/src/useDragAndDrop.ts
@@ -90,8 +90,8 @@ export function useDragAndDrop(options: DragAndDropOptions): DragAndDropHooks {
 
     let hooks = {} as DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element};
     if (isDraggable) {
-      hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOptions) {
-        return useDraggableCollectionState({...props, ...options});
+      hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOpts) {
+        return useDraggableCollectionState({...props, ...options, getItems: options.getItems!});
       };
       hooks.useDraggableCollection = useDraggableCollection;
       hooks.useDraggableItem = useDraggableItem;
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 46d902b2ede..131f5592b4f 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -484,7 +484,7 @@ function FormWithControls(props: any = {}) {
   let [favoritePet, setFavoritePet] = useState('cats');
   let [favoriteColor, setFavoriteColor] = useState('green' as Key);
   let [howIFeel, setHowIFeel] = useState('I feel good, o I feel so good!');
-  let [birthday, setBirthday] = useState(new CalendarDate(1732, 2, 22));
+  let [birthday, setBirthday] = useState<CalendarDate | null>(new CalendarDate(1732, 2, 22));
   let [money, setMoney] = useState(50);
   let [superSpeed, setSuperSpeed] = useState(true);
 
diff --git a/packages/@react-spectrum/icon/src/Icon.tsx b/packages/@react-spectrum/icon/src/Icon.tsx
index 88474217bfc..6eefcbb42fd 100644
--- a/packages/@react-spectrum/icon/src/Icon.tsx
+++ b/packages/@react-spectrum/icon/src/Icon.tsx
@@ -12,10 +12,10 @@
 
 import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-types/shared';
 import {baseStyleProps, classNames, StyleHandlers, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {Context} from '@react-spectrum/provider';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useContext} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
-import {useProvider} from '@react-spectrum/provider';
 
 export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
   /**
@@ -70,7 +70,7 @@ export function Icon(props: IconProps) {
   } = props;
   let {styleProps} = useStyleProps(otherProps, iconStyleProps);
 
-  let provider = useProvider();
+  let provider = useContext(Context);
   let scale = 'M';
   if (provider !== null) {
     scale = provider.scale === 'large' ? 'L' : 'M';
diff --git a/packages/@react-spectrum/icon/src/UIIcon.tsx b/packages/@react-spectrum/icon/src/UIIcon.tsx
index e6d0b59487d..667c1eead0d 100644
--- a/packages/@react-spectrum/icon/src/UIIcon.tsx
+++ b/packages/@react-spectrum/icon/src/UIIcon.tsx
@@ -12,10 +12,10 @@
 
 import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
 import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {Context} from '@react-spectrum/provider';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useContext} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
-import {useProvider} from '@react-spectrum/provider';
 
 export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
   children: ReactElement<any>,
@@ -38,7 +38,7 @@ export function UIIcon(props: UIIconProps) {
   } = props;
 
   let {styleProps} = useStyleProps(otherProps);
-  let provider = useProvider();
+  let provider = useContext(Context);
   let scale = 'M';
   if (provider !== null) {
     scale = provider.scale === 'large' ? 'L' : 'M';
diff --git a/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx b/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
index 2b4386f94b2..6fe16d710e5 100644
--- a/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
+++ b/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {BackgroundColorValue, Responsive} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
 import {View} from '@react-spectrum/view';
@@ -28,10 +29,10 @@ let baseColors = [
   'green',
   'blue'
 ];
-let colors = [];
+let colors: Array<Responsive<BackgroundColorValue> | undefined> = [];
 for (let color of baseColors) {
   for (let i = 4; i <= 7; i++) {
-    colors.push(`${color}-${i}00`);
+    colors.push(`${color}-${i}00` as Responsive<BackgroundColorValue>);
   }
 }
 
@@ -71,7 +72,7 @@ export const WrappingWithGap = () => (
   <View maxWidth="80%" borderWidth="thin" borderColor="dark">
     <Flex direction="row" gap="size-100" wrap>
       {colors.map((color) => (
-        <View key={color} backgroundColor={color} width="size-800" height="size-800" />
+        <View key={String(color)} backgroundColor={color} width="size-800" height="size-800" />
       ))}
     </Flex>
   </View>
diff --git a/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx b/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
index d39fbf7b49b..ce1aee081fe 100644
--- a/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
+++ b/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {BackgroundColorValue, Responsive} from '@react-types/shared';
 import {Grid, repeat} from '@react-spectrum/layout';
 import React from 'react';
 import {View} from '@react-spectrum/view';
@@ -28,10 +29,10 @@ let baseColors = [
   'green',
   'blue'
 ];
-let colors = [];
+let colors: Array<Responsive<BackgroundColorValue> | undefined> = [];
 for (let color of baseColors) {
   for (let i = 4; i <= 7; i++) {
-    colors.push(`${color}-${i}00`);
+    colors.push(`${color}-${i}00` as Responsive<BackgroundColorValue>);
   }
 }
 
@@ -78,7 +79,7 @@ export const ImplicitGrid = () => (
     width="80%"
     gap="size-100">
     {colors.map((color) => (
-      <View key={color} backgroundColor={color} />
+      <View key={String(color)} backgroundColor={color} />
     ))}
   </Grid>
 );
diff --git a/packages/@react-spectrum/layout/src/Grid.tsx b/packages/@react-spectrum/layout/src/Grid.tsx
index b6cdd13b6ce..497c64473b2 100644
--- a/packages/@react-spectrum/layout/src/Grid.tsx
+++ b/packages/@react-spectrum/layout/src/Grid.tsx
@@ -46,7 +46,9 @@ function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps, gridStyleProps);
-  styleProps.style.display = 'grid'; // inline-grid?
+  if (styleProps.style) {
+    styleProps.style.display = 'grid'; // inline-grid?
+  }
   let domRef = useDOMRef(ref);
 
   return (
diff --git a/packages/@react-spectrum/layout/stories/Flex.stories.tsx b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
index 7825b503deb..5c2316cabf5 100644
--- a/packages/@react-spectrum/layout/stories/Flex.stories.tsx
+++ b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {BackgroundColorValue, Responsive as TResponsive} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
 import {View} from '@react-spectrum/view';
@@ -28,10 +29,10 @@ let baseColors = [
   'green',
   'blue'
 ];
-let colors = [];
+let colors: Array<TResponsive<BackgroundColorValue> | undefined> = [];
 for (let color of baseColors) {
   for (let i = 4; i <= 7; i++) {
-    colors.push(`${color}-${i}00`);
+    colors.push(`${color}-${i}00` as TResponsive<BackgroundColorValue>);
   }
 }
 
@@ -67,7 +68,7 @@ export const WrappingWithGap = () => (
   <View maxWidth="80%" borderWidth="thin" borderColor="dark">
     <Flex direction="row" gap="size-100" wrap>
       {colors.map((color) => (
-        <View key={color} backgroundColor={color} width="size-800" height="size-800" />
+        <View key={String(color)} backgroundColor={color} width="size-800" height="size-800" />
       ))}
     </Flex>
   </View>
diff --git a/packages/@react-spectrum/layout/stories/Grid.stories.tsx b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
index fc6d3a8e2f8..4488255682a 100644
--- a/packages/@react-spectrum/layout/stories/Grid.stories.tsx
+++ b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {BackgroundColorValue, Responsive as TResponsive} from '@react-types/shared';
 import {Grid, repeat} from '@react-spectrum/layout';
 import React from 'react';
 import {View} from '@react-spectrum/view';
@@ -28,10 +29,10 @@ let baseColors = [
   'green',
   'blue'
 ];
-let colors = [];
+let colors: Array<TResponsive<BackgroundColorValue> | undefined> = [];
 for (let color of baseColors) {
   for (let i = 4; i <= 7; i++) {
-    colors.push(`${color}-${i}00`);
+    colors.push(`${color}-${i}00` as TResponsive<BackgroundColorValue>);
   }
 }
 
@@ -74,7 +75,7 @@ export const ImplicitGrid = () => (
     width="80%"
     gap="size-100">
     {colors.map((color) => (
-      <View key={color} backgroundColor={color} />
+      <View key={String(color)} backgroundColor={color} />
     ))}
   </Grid>
 );
@@ -95,7 +96,7 @@ export const Responsive = () => (
     width="80%"
     gap={{base: 'size-100', M: 'size-250', L: 'size-350'}}>
     {colors.map((color) => (
-      <View key={color} backgroundColor={color} />
+      <View key={String(color)} backgroundColor={color} />
     ))}
   </Grid>
 );
diff --git a/packages/@react-spectrum/list/src/InsertionIndicator.tsx b/packages/@react-spectrum/list/src/InsertionIndicator.tsx
index 4bb068e8cda..f5dde8de1c7 100644
--- a/packages/@react-spectrum/list/src/InsertionIndicator.tsx
+++ b/packages/@react-spectrum/list/src/InsertionIndicator.tsx
@@ -11,14 +11,14 @@ interface InsertionIndicatorProps {
 }
 
 export default function InsertionIndicator(props: InsertionIndicatorProps) {
-  let {dropState, dragAndDropHooks} = useContext(ListViewContext);
+  let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;
   const {target, isPresentationOnly} = props;
 
-  let ref = useRef(undefined);
-  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator(props, dropState, ref);
+  let ref = useRef<HTMLDivElement | null>(null);
+  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);
   let {visuallyHiddenProps} = useVisuallyHidden();
 
-  let isDropTarget = dropState.isDropTarget(target);
+  let isDropTarget = dropState!.isDropTarget(target);
 
   if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
     return null;
diff --git a/packages/@react-spectrum/list/src/ListView.tsx b/packages/@react-spectrum/list/src/ListView.tsx
index e9aa0040cb1..d56f2a0997f 100644
--- a/packages/@react-spectrum/list/src/ListView.tsx
+++ b/packages/@react-spectrum/list/src/ListView.tsx
@@ -64,18 +64,18 @@ export interface SpectrumListViewProps<T> extends Omit<AriaGridListProps<T>, 'ke
 
 interface ListViewContextValue<T> {
   state: ListState<T>,
-  dragState: DraggableCollectionState,
-  dropState: DroppableCollectionState,
-  dragAndDropHooks: DragAndDropHooks['dragAndDropHooks'],
-  onAction:(key: Key) => void,
+  dragState: DraggableCollectionState | null,
+  dropState: DroppableCollectionState | null,
+  dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks'],
+  onAction?: (key: Key) => void,
   isListDraggable: boolean,
   isListDroppable: boolean,
   layout: ListViewLayout<T>,
-  loadingState: LoadingState,
+  loadingState?: LoadingState,
   renderEmptyState?: () => JSX.Element
 }
 
-export const ListViewContext = React.createContext<ListViewContextValue<unknown>>(null);
+export const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);
 
 const ROW_HEIGHTS = {
   compact: {
@@ -96,7 +96,7 @@ function useListLayout<T>(state: ListState<T>, density: SpectrumListViewProps<T>
   let {scale} = useProvider();
   let layout = useMemo(() =>
     new ListViewLayout<T>({
-      estimatedRowHeight: ROW_HEIGHTS[density][scale]
+      estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
     , [scale, density, overflowMode]);
@@ -138,15 +138,15 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
 
   let {styleProps} = useStyleProps(props);
-  let dragState: DraggableCollectionState;
+  let dragState: DraggableCollectionState | null = null;
   let preview = useRef(null);
-  if (isListDraggable) {
-    dragState = dragAndDropHooks.useDraggableCollectionState({
+  if (isListDraggable && dragAndDropHooks) {
+    dragState = dragAndDropHooks.useDraggableCollectionState!({
       collection,
       selectionManager,
       preview
     });
-    dragAndDropHooks.useDraggableCollection({}, dragState, domRef);
+    dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);
   }
   let layout = useListLayout(
     state,
@@ -155,18 +155,18 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
   );
 
   let DragPreview = dragAndDropHooks?.DragPreview;
-  let dropState: DroppableCollectionState;
-  let droppableCollection: DroppableCollectionResult;
-  let isRootDropTarget: boolean;
-  if (isListDroppable) {
-    dropState = dragAndDropHooks.useDroppableCollectionState({
+  let dropState: DroppableCollectionState | null = null;
+  let droppableCollection: DroppableCollectionResult | null = null;
+  let isRootDropTarget = false;
+  if (isListDroppable && dragAndDropHooks) {
+    dropState = dragAndDropHooks.useDroppableCollectionState!({
       collection,
       selectionManager
     });
-    droppableCollection = dragAndDropHooks.useDroppableCollection({
+    droppableCollection = dragAndDropHooks.useDroppableCollection!({
       keyboardDelegate: new ListKeyboardDelegate({
         collection,
-        disabledKeys: dragState?.draggingKeys.size ? null : selectionManager.disabledKeys,
+        disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,
         ref: domRef,
         layoutDelegate: layout
       }),
@@ -216,7 +216,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
       <FocusScope>
         <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
           <Virtualizer
-            {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}
+            {...mergeProps(isListDroppable ? droppableCollection?.collectionProps : null, gridProps)}
             {...filterDOMProps(otherProps)}
             {...gridProps}
             {...styleProps}
@@ -247,7 +247,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
             layout={layout}
             layoutOptions={useMemo(() => ({isLoading}), [isLoading])}
             collection={collection}>
-            {useCallback((type, item) => {
+            {useCallback((type, item: Node<T>) => {
               if (type === 'item') {
                 return <Item item={item} />;
               } else if (type === 'loader') {
@@ -259,15 +259,21 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
           </Virtualizer>
         </FocusRing>
       </FocusScope>
-      {DragPreview && isListDraggable &&
+      {DragPreview && isListDraggable && dragAndDropHooks && dragState &&
         <DragPreview ref={preview}>
           {() => {
+            if (dragState.draggedKey == null) {
+              return null;
+            }
             if (dragAndDropHooks.renderPreview) {
               return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
             }
             let item = state.collection.getItem(dragState.draggedKey);
+            if (!item) {
+              return null;
+            }
             let itemCount = dragState.draggingKeys.size;
-            let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
+            let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;
             return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density}  />;
           }}
         </DragPreview>
@@ -277,7 +283,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
 }
 
 function Item({item}: {item: Node<unknown>}) {
-  let {isListDroppable, state, onAction} = useContext(ListViewContext);
+  let {isListDroppable, state, onAction} = useContext(ListViewContext)!;
   return (
     <>
       {isListDroppable && state.collection.getKeyBefore(item.key) == null &&
@@ -300,7 +306,7 @@ function Item({item}: {item: Node<unknown>}) {
 }
 
 function LoadingView() {
-  let {state} = useContext(ListViewContext);
+  let {state} = useContext(ListViewContext)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');
   return (
     <CenteredWrapper>
@@ -312,7 +318,7 @@ function LoadingView() {
 }
 
 function EmptyState() {
-  let {renderEmptyState} = useContext(ListViewContext);
+  let {renderEmptyState} = useContext(ListViewContext)!;
   let emptyState = renderEmptyState ? renderEmptyState() : null;
   if (emptyState == null) {
     return null;
@@ -326,7 +332,7 @@ function EmptyState() {
 }
 
 function CenteredWrapper({children}) {
-  let {state} = useContext(ListViewContext);
+  let {state} = useContext(ListViewContext)!;
   return (
     <div
       role="row"
diff --git a/packages/@react-spectrum/list/src/ListViewItem.tsx b/packages/@react-spectrum/list/src/ListViewItem.tsx
index ed4e8461cde..8d73c298554 100644
--- a/packages/@react-spectrum/list/src/ListViewItem.tsx
+++ b/packages/@react-spectrum/list/src/ListViewItem.tsx
@@ -14,7 +14,7 @@ import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames, ClearSlots, SlotProvider, useHasChild} from '@react-spectrum/utils';
 import {CSSTransition} from 'react-transition-group';
-import type {DraggableItemResult, DropIndicatorAria, DroppableItemResult} from '@react-aria/dnd';
+import type {DraggableItemResult, DropIndicatorAria} from '@react-aria/dnd';
 import {DropTarget, Node} from '@react-types/shared';
 import {FocusRing, useFocusRing} from '@react-aria/focus';
 import {Grid} from '@react-spectrum/layout';
@@ -51,10 +51,10 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     layout,
     dragAndDropHooks,
     loadingState
-  } = useContext(ListViewContext);
+  } = useContext(ListViewContext)!;
   let {direction} = useLocale();
-  let rowRef = useRef<HTMLDivElement>(undefined);
-  let checkboxWrapperRef = useRef<HTMLDivElement>(undefined);
+  let rowRef = useRef<HTMLDivElement | null>(null);
+  let checkboxWrapperRef = useRef<HTMLDivElement | null>(null);
   let {
     isFocusVisible: isFocusVisibleWithin,
     focusProps: focusWithinProps
@@ -74,32 +74,30 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     isVirtualized: true,
     shouldSelectOnPressUp: isListDraggable
   }, state, rowRef);
-  let isDroppable = isListDroppable && !isDisabled;
   let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});
 
   let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);
   let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);
 
-  let draggableItem: DraggableItemResult;
-  if (isListDraggable) {
+  let draggableItem: DraggableItemResult | null = null;
+  if (isListDraggable && dragAndDropHooks && dragState) {
      
-    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
+    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
     if (isDisabled) {
       draggableItem = null;
     }
   }
-  let droppableItem: DroppableItemResult;
-  let isDropTarget: boolean;
-  let dropIndicator: DropIndicatorAria;
-  let dropIndicatorRef = useRef(undefined);
-  if (isListDroppable) {
+  let isDropTarget = false;
+  let dropIndicator: DropIndicatorAria | null = null;
+  let dropIndicatorRef = useRef<HTMLDivElement | null>(null);
+  if (isListDroppable && dragAndDropHooks && dropState) {
     let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;
     isDropTarget = dropState.isDropTarget(target);
      
-    dropIndicator = dragAndDropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
+    dropIndicator = dragAndDropHooks.useDropIndicator!({target}, dropState, dropIndicatorRef);
   }
 
-  let dragButtonRef = React.useRef(undefined);
+  let dragButtonRef = React.useRef<HTMLDivElement | null>(null);
   let {buttonProps} = useButton({
     ...draggableItem?.dragButtonProps,
     elementType: 'div'
@@ -138,18 +136,19 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
   let {visuallyHiddenProps} = useVisuallyHidden();
 
-  let dropProps = isDroppable ? droppableItem?.dropProps : {'aria-hidden': droppableItem?.dropProps['aria-hidden']};
   const mergedProps = mergeProps(
     rowProps,
     draggableItem?.dragProps,
-    dropProps,
     hoverProps,
     focusWithinProps,
-    focusProps,
-    // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
-    // allowing for single swipe navigation between row drop indicator
-    dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}
+    focusProps
   );
+  
+  // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
+  // allowing for single swipe navigation between row drop indicator
+  if (dragAndDropHooks?.isVirtualDragging?.()) {
+    mergedProps.tabIndex = undefined;
+  }
 
   let isFirstRow = item.prevKey == null;
   let isLastRow = item.nextKey == null;
@@ -158,15 +157,15 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   // with bottom border
   let isFlushWithContainerBottom = false;
   if (isLastRow && loadingState !== 'loadingMore') {
-    if (layout.getContentSize()?.height >= layout.virtualizer?.visibleRect.height) {
+    if (layout.getContentSize()?.height >= (layout.virtualizer?.visibleRect.height ?? 0)) {
       isFlushWithContainerBottom = true;
     }
   }
   // previous item isn't selected
   // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview
-  let roundTops = (!state.selectionManager.isSelected(item.prevKey)
+  let roundTops = (!(item.prevKey != null && state.selectionManager.isSelected(item.prevKey))
     && (state.selectionManager.focusedKey !== item.prevKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));
-  let roundBottoms = (!state.selectionManager.isSelected(item.nextKey)
+  let roundBottoms = (!(item.nextKey != null && state.selectionManager.isSelected(item.nextKey))
     && (state.selectionManager.focusedKey !== item.nextKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));
 
   let content = typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered;
@@ -204,9 +203,9 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
               'is-hovered': isHovered,
               'is-selected': isSelected,
               'is-disabled': isDisabled,
-              'is-prev-selected': state.selectionManager.isSelected(item.prevKey),
-              'is-next-selected': state.selectionManager.isSelected(item.nextKey),
-              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),
+              'is-prev-selected': item.prevKey != null && state.selectionManager.isSelected(item.prevKey),
+              'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),
+              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || (item.nextKey != null && state.selectionManager.isSelected(item.nextKey))),
               'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,
               'react-spectrum-ListViewItem--firstRow': isFirstRow,
               'react-spectrum-ListViewItem--lastRow': isLastRow,
diff --git a/packages/@react-spectrum/list/src/ListViewLayout.ts b/packages/@react-spectrum/list/src/ListViewLayout.ts
index 8f8d251eefb..5fd2e72b6a6 100644
--- a/packages/@react-spectrum/list/src/ListViewLayout.ts
+++ b/packages/@react-spectrum/list/src/ListViewLayout.ts
@@ -30,7 +30,7 @@ export class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {
     let y = this.contentSize.height;
 
     if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : this.estimatedRowHeight);
+      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, nodes.length === 0 ? this.virtualizer!.visibleRect.height : this.estimatedRowHeight ?? 48);
       let loader = new LayoutInfo('loader', 'loader', rect);
       let node = {
         layoutInfo: loader,
@@ -42,7 +42,7 @@ export class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {
     }
 
     if (nodes.length === 0) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.virtualizer!.visibleRect.height);
       let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
       let node = {
         layoutInfo: placeholder,
diff --git a/packages/@react-spectrum/list/src/RootDropIndicator.tsx b/packages/@react-spectrum/list/src/RootDropIndicator.tsx
index e2a64cd60b7..b4b09e03c07 100644
--- a/packages/@react-spectrum/list/src/RootDropIndicator.tsx
+++ b/packages/@react-spectrum/list/src/RootDropIndicator.tsx
@@ -3,12 +3,12 @@ import React, {useContext, useRef} from 'react';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export default function RootDropIndicator() {
-  let {dropState, dragAndDropHooks} = useContext(ListViewContext);
-  let ref = useRef(undefined);
-  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator({
+  let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;
+  let ref = useRef<HTMLDivElement | null>(null);
+  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({
     target: {type: 'root'}
-  }, dropState, ref);
-  let isDropTarget = dropState.isDropTarget({type: 'root'});
+  }, dropState!, ref);
+  let isDropTarget = dropState!.isDropTarget({type: 'root'});
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
index 51fc5eea01d..6af4bf2fa6e 100644
--- a/packages/@react-spectrum/list/stories/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -396,11 +396,11 @@ function ActionBarExample(props?) {
 
 let i = 0;
 function EmptyTest() {
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState<{key: number, name: string}[]>([]);
   const [divProps, setDivProps] = useState({});
 
   useEffect(() => {
-    let newItems = [];
+    let newItems: typeof items = [];
     for (i = 0; i < 20; i++) {
       newItems.push({key: i, name: `Item ${i}`});
     }
@@ -418,7 +418,7 @@ function EmptyTest() {
     <div>
       <Flex direction="row">
         <div {...divProps}>
-          <ListView aria-label="render empty state ListView" items={items} width="250px" height={hasDivProps ? null : '500px'} renderEmptyState={renderEmpty}>
+          <ListView aria-label="render empty state ListView" items={items} width="250px" height={hasDivProps ? undefined : '500px'} renderEmptyState={renderEmpty}>
             {
               item => (
                 <Item key={item.key}>
@@ -508,7 +508,7 @@ function Demo(props) {
   );
 }
 
-const manyItems = [];
+const manyItems: {key: number, name: string}[] = [];
 for (let i = 0; i < 500; i++) {manyItems.push({key: i, name: `item ${i}`});}
 
 function DisplayNoneComponent(args) {
@@ -517,7 +517,7 @@ function DisplayNoneComponent(args) {
   return (
     <>
       <Button variant="primary" onPress={() => setIsDisplay(prev => !prev)}>Toggle ListView display</Button>
-      <div style={!isDisplay ? {display: 'none'} : null}>
+      <div style={!isDisplay ? {display: 'none'} : undefined}>
         <ListView aria-label="Many items" items={manyItems} width="300px" height="200px" {...args}>
           {(item: any) => (
             <Item key={item.key} textValue={item.name}>
diff --git a/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx b/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx
index 3734e0698af..0b9bcf38f42 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx
@@ -101,7 +101,7 @@ export const DragWithinScroll: ListViewStory = {
   name: 'Drag within list scrolling (Reorder)'
 };
 
-let manyItems = [];
+let manyItems: {id: string, type: string, textValue: string}[] = [];
 for (let i = 0; i < 100; i++) {
   manyItems.push({id: 'item' + i, type: 'item', textValue: 'Item ' + i});
 }
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx b/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
index a23a3c81df4..653af3d77a6 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
@@ -120,10 +120,10 @@ export function ReorderExample(props) {
     async onDrop(e) {
       onDrop(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has(dragType)) {
               key = JSON.parse(await item.getText(dragType));
               keys.push(key);
@@ -180,7 +180,7 @@ export function DragIntoItemExample(props) {
 
   let list = useListData({
     initialItems: [
-      {id: '0', type: 'folder', textValue: 'Folder 1', childNodes: []},
+      {id: '0', type: 'folder', textValue: 'Folder 1', childNodes: [] as any[]},
       {id: '1', type: 'item', textValue: 'One'},
       {id: '2', type: 'item', textValue: 'Two'},
       {id: '3', type: 'item', textValue: 'Three'},
@@ -197,9 +197,9 @@ export function DragIntoItemExample(props) {
   let dragType = React.useMemo(() => `keys-${Math.random().toString(36).slice(2)}`, []);
 
   let onMove = (keys: Key[], target: ItemDropTarget) => {
-    let folderItem = list.getItem(target.key);
+    let folderItem = list.getItem(target.key)!;
     let draggedItems = keys.map((key) => list.getItem(key));
-    list.update(target.key, {...folderItem, childNodes: [...folderItem.childNodes, ...draggedItems]});
+    list.update(target.key, {...folderItem, childNodes: [...(folderItem.childNodes || []), ...draggedItems]});
     list.remove(...keys);
   };
 
@@ -222,10 +222,10 @@ export function DragIntoItemExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type !== 'root' && e.target.dropPosition === 'on') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has(dragType)) {
               key = JSON.parse(await item.getText(dragType));
               keys.push(key);
@@ -243,7 +243,7 @@ export function DragIntoItemExample(props) {
       }
     },
     getDropOperation(target) {
-      if (target.type === 'root' || target.dropPosition !== 'on' || !list.getItem(target.key).childNodes || disabledKeys.includes(target.key)) {
+      if (target.type === 'root' || target.dropPosition !== 'on' || !list.getItem(target.key)!.childNodes || disabledKeys.includes(target.key)) {
         return 'cancel';
       }
 
@@ -333,10 +333,10 @@ export function DragBetweenListsExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has(dragType)) {
               key = JSON.parse(await item.getText(dragType));
               keys.push(key);
@@ -445,10 +445,10 @@ export function DragBetweenListsRootOnlyExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type === 'root') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has('list2')) {
               key = JSON.parse(await item.getText('list2'));
               keys.push(key);
@@ -491,10 +491,10 @@ export function DragBetweenListsRootOnlyExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type === 'root') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has('list1')) {
               key = JSON.parse(await item.getText('list1'));
               keys.push(key);
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx b/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx
index 6da108bb537..3be13f1b0cc 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx
@@ -74,7 +74,7 @@ export const DragWithin: ListViewStory = {
   name: 'Drag within list (Reorder}'
 };
 
-let manyItems = [];
+let manyItems: {identifier: string, type: string, name: string}[] = [];
 for (let i = 0; i < 100; i++) {
   manyItems.push({identifier: 'item' + i, type: 'item', name: 'Item ' + i});
 }
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx b/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
index 0ecf61a4c33..50f93f58fd9 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
@@ -9,8 +9,8 @@ import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
 
 let itemProcessor = async (items, acceptedDragTypes) => {
-  let processedItems = [];
-  let text;
+  let processedItems: any[] = [];
+  let text = '';
   for (let item of items) {
     for (let type of acceptedDragTypes) {
       if (item.kind === 'text' && item.types.has(type)) {
@@ -32,14 +32,14 @@ let itemProcessor = async (items, acceptedDragTypes) => {
 let folderList1 = [
   {identifier: '1', type: 'file', name: 'Adobe Photoshop'},
   {identifier: '2', type: 'file', name: 'Adobe XD'},
-  {identifier: '3', type: 'folder', name: 'Documents',  childNodes: []},
+  {identifier: '3', type: 'folder', name: 'Documents',  childNodes: [] as any[]},
   {identifier: '4', type: 'file', name: 'Adobe InDesign'},
   {identifier: '5', type: 'folder', name: 'Utilities',  childNodes: []},
   {identifier: '6', type: 'file', name: 'Adobe AfterEffects'}
 ];
 
 let folderList2 = [
-  {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: []},
+  {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: [] as any[]},
   {identifier: '8', type: 'file', name: 'Adobe Fresco'},
   {identifier: '9', type: 'folder', name: 'Apps',  childNodes: []},
   {identifier: '10', type: 'file', name: 'Adobe Illustrator'},
@@ -58,7 +58,7 @@ export function DragExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list.getItem(key);
+      let item = list.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -102,7 +102,7 @@ export function ReorderExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list.getItem(key);
+      let item = list.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -116,10 +116,10 @@ export function ReorderExampleUtilHandlers(props) {
       } = e;
       action('onReorder')(e);
 
-      let itemsToCopy = [];
+      let itemsToCopy: typeof folderList1 = [];
       if (dropOperation === 'copy') {
         for (let key of keys) {
-          let item = {...list.getItem(key)};
+          let item: typeof folderList1[0] = {...list.getItem(key)!};
           item.identifier = Math.random().toString(36).slice(2);
           itemsToCopy.push(item);
         }
@@ -177,7 +177,7 @@ export function ItemDropExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list.getItem(key);
+      let item = list.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -195,7 +195,7 @@ export function ItemDropExampleUtilHandlers(props) {
         let processedItems = await itemProcessor(items, acceptedDragTypes);
         let targetItem = list.getItem(target.key);
         if (targetItem?.childNodes != null) {
-          list.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
+          list.update(target.key, {...targetItem, childNodes: [...(targetItem.childNodes || []), ...processedItems]});
           if (isInternal && dropOperation === 'move') {
             let keysToRemove = processedItems.map(item => item.identifier);
             list.remove(...keysToRemove);
@@ -245,7 +245,7 @@ export function RootDropExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks: list1Hooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -336,7 +336,7 @@ export function InsertExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks: list1Hooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -517,7 +517,7 @@ export function DragBetweenListsComplex(props) {
   // List 1 should allow on item drops and external drops, but disallow reordering/internal drops
   let {dragAndDropHooks: dragAndDropHooksList1} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -552,8 +552,8 @@ export function DragBetweenListsComplex(props) {
       } = e;
       action('onItemDropList1')(e);
       let processedItems = await itemProcessor(items, acceptedDragTypes);
-      let targetItem = list1.getItem(target.key);
-      list1.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
+      let targetItem = list1.getItem(target.key)!;
+      list1.update(target.key, {...targetItem, childNodes: [...(targetItem.childNodes || []), ...processedItems]});
 
       if (isInternal && dropOperation === 'move') {
         // TODO test this, perhaps it would be easier to also pass the draggedKeys to onItemDrop instead?
@@ -575,14 +575,14 @@ export function DragBetweenListsComplex(props) {
       }
     },
     getAllowedDropOperations: () => ['move', 'copy'],
-    shouldAcceptItemDrop: (target) => !!list1.getItem(target.key).childNodes,
+    shouldAcceptItemDrop: (target) => !!list1.getItem(target.key)!.childNodes,
     ...firstListDnDOptions
   });
 
   // List 2 should allow reordering, on folder drops, and on root drops
   let {dragAndDropHooks: dragAndDropHooksList2} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list2.getItem(key);
+      let item = list2.getItem(key)!;
       let dragItem = {};
       let itemString = JSON.stringify(item);
       dragItem[`${item.type}`] = itemString;
@@ -614,10 +614,10 @@ export function DragBetweenListsComplex(props) {
       } = e;
       action('onReorderList2')(e);
 
-      let itemsToCopy = [];
+      let itemsToCopy: typeof folderList2 = [];
       if (dropOperation === 'copy') {
         for (let key of keys) {
-          let item = {...list2.getItem(key)};
+          let item: typeof folderList2[0] = {...list2.getItem(key)!};
           item.identifier = Math.random().toString(36).slice(2);
           itemsToCopy.push(item);
         }
@@ -651,8 +651,8 @@ export function DragBetweenListsComplex(props) {
       } = e;
       action('onItemDropList2')(e);
       let processedItems = await itemProcessor(items, acceptedDragTypes);
-      let targetItem = list2.getItem(target.key);
-      list2.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
+      let targetItem = list2.getItem(target.key)!;
+      list2.update(target.key, {...targetItem, childNodes: [...(targetItem.childNodes || []), ...processedItems]});
 
       if (isInternal && dropOperation === 'move') {
         let keysToRemove = processedItems.map(item => item.identifier);
@@ -668,12 +668,12 @@ export function DragBetweenListsComplex(props) {
       } = e;
       action('onDragEndList2')(e);
       if (dropOperation === 'move' && !isInternal) {
-        let keysToRemove = [...keys].filter(key => list2.getItem(key).type !== 'unique_type');
+        let keysToRemove = [...keys].filter(key => list2.getItem(key)!.type !== 'unique_type');
         list2.remove(...keysToRemove);
       }
     },
     getAllowedDropOperations: () => ['move', 'copy'],
-    shouldAcceptItemDrop: (target) => !!list2.getItem(target.key).childNodes,
+    shouldAcceptItemDrop: (target) => !!list2.getItem(target.key)!.childNodes,
     ...secondListDnDOptions
   });
 
@@ -738,7 +738,7 @@ export function DragBetweenListsOverride(props) {
 
   let list2 = useListData({
     initialItems: [
-      {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: []},
+      {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: [] as any[]},
       {identifier: '8', type: 'file', name: 'Adobe Fresco'},
       {identifier: '9', type: 'folder', name: 'Apps',  childNodes: []},
       {identifier: '10', type: 'file', name: 'Adobe Illustrator'},
@@ -750,7 +750,7 @@ export function DragBetweenListsOverride(props) {
 
   let {dragAndDropHooks: dragAndDropHooksList1} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       let dragType = `list-1-adobe-${item.type}`;
       return {
         [`${dragType}`]: JSON.stringify(item),
@@ -778,8 +778,8 @@ export function DragBetweenListsOverride(props) {
       let {
         items
       } = e;
-      let itemsToAdd = [];
-      let text;
+      let itemsToAdd: typeof folderList2 = [];
+      let text = '';
       for (let item of items) {
         if (item.kind === 'text') {
           if (item.types.size === 1 && item.types.has('text/plain')) {
@@ -800,7 +800,7 @@ export function DragBetweenListsOverride(props) {
     onReorder: () => action('onReorder'),
     onRootDrop: () => action('onRootDrop'),
     onItemDrop: () => action('onItemDrop'),
-    shouldAcceptItemDrop: (target) => !!list2.getItem(target.key).childNodes,
+    shouldAcceptItemDrop: (target) => !!list2.getItem(target.key)!.childNodes,
     acceptedDragTypes: 'all'
   });
 
diff --git a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx
index a48a42d3b2f..93dbbc45898 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxBase.tsx
+++ b/packages/@react-spectrum/listbox/src/ListBoxBase.tsx
@@ -21,9 +21,9 @@ import {ListBoxLayout} from './ListBoxLayout';
 import {ListBoxOption} from './ListBoxOption';
 import {ListBoxSection} from './ListBoxSection';
 import {ListState} from '@react-stately/list';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useObjectRef} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';
+import React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';
 import {ReusableView} from '@react-stately/virtualizer';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -63,27 +63,28 @@ export function useListBoxLayout<T>(): ListBoxLayout<T> {
 }
 
 /** @private */
-function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElement | null>) {
-  let {layout, state, shouldFocusOnHover, shouldUseVirtualFocus, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;
+function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {
+  let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;
+  let objectRef = useObjectRef(ref);
   let {listBoxProps} = useListBox({
     ...props,
     layoutDelegate: layout,
     isVirtualized: true
-  }, state, ref);
+  }, state, objectRef);
   let {styleProps} = useStyleProps(props);
 
   // This overrides collection view's renderWrapper to support hierarchy of items in sections.
   // The header is extracted from the children so it can receive ARIA labeling properties.
-  type View = ReusableView<Node<T>, ReactElement>;
-  let renderWrapper = useCallback((parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
+  type View = ReusableView<Node<T>, ReactNode>;
+  let renderWrapper = useCallback((parent: View | null, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
     if (reusableView.viewType === 'section') {
       return (
         <ListBoxSection
           key={reusableView.key}
-          item={reusableView.content}
-          layoutInfo={reusableView.layoutInfo}
+          item={reusableView.content!}
+          layoutInfo={reusableView.layoutInfo!}
           virtualizer={reusableView.virtualizer}
-          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo}>
+          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>
           {renderChildren(children.filter(c => c.viewType === 'item'))}
         </ListBoxSection>
       );
@@ -92,7 +93,7 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
     return (
       <VirtualizerItem
         key={reusableView.key}
-        layoutInfo={reusableView.layoutInfo}
+        layoutInfo={reusableView.layoutInfo!}
         virtualizer={reusableView.virtualizer}
         parent={parent?.layoutInfo}>
         {reusableView.rendered}
@@ -109,7 +110,7 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
         <Virtualizer
           {...styleProps}
           {...mergeProps(listBoxProps, domProps)}
-          ref={ref}
+          ref={objectRef}
           persistedKeys={persistedKeys}
           autoFocus={!!props.autoFocus || undefined}
           scrollDirection="vertical"
@@ -129,13 +130,15 @@ function ListBoxBase<T>(props: ListBoxBaseProps<T>, ref: RefObject<HTMLDivElemen
           isLoading={isLoading}
           onLoadMore={props.onLoadMore}
           onScroll={onScroll}>
-          {useCallback((type, item: Node<T>) => {
+          {useCallback((type, item: Node<T>): ReactNode => {
             if (type === 'item') {
               return <ListBoxOption item={item} />;
             } else if (type === 'loader') {
               return <LoadingState />;
             } else if (type === 'placeholder') {
               return <EmptyState />;
+            } else {
+              return null;
             }
           }, [])}
         </Virtualizer>
@@ -150,7 +153,7 @@ const _ListBoxBase = React.forwardRef(ListBoxBase) as <T>(props: ListBoxBaseProp
 export {_ListBoxBase as ListBoxBase};
 
 function LoadingState() {
-  let {state} = useContext(ListBoxContext);
+  let {state} = useContext(ListBoxContext)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');
   return (
     // aria-selected isn't needed here since this option is not selectable.
@@ -166,7 +169,7 @@ function LoadingState() {
 }
 
 function EmptyState() {
-  let {renderEmptyState} = useContext(ListBoxContext);
+  let {renderEmptyState} = useContext(ListBoxContext)!;
   let emptyState = renderEmptyState ? renderEmptyState() : null;
   if (emptyState == null) {
     return null;
diff --git a/packages/@react-spectrum/listbox/src/ListBoxContext.ts b/packages/@react-spectrum/listbox/src/ListBoxContext.ts
index a1424f80a9d..346d222f2fe 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxContext.ts
+++ b/packages/@react-spectrum/listbox/src/ListBoxContext.ts
@@ -20,4 +20,4 @@ interface ListBoxContextValue {
   shouldUseVirtualFocus: boolean
 }
 
-export const ListBoxContext = React.createContext<ListBoxContextValue>(null);
+export const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);
diff --git a/packages/@react-spectrum/listbox/src/ListBoxLayout.ts b/packages/@react-spectrum/listbox/src/ListBoxLayout.ts
index 8f9652c4ea4..f0f2c09b872 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxLayout.ts
+++ b/packages/@react-spectrum/listbox/src/ListBoxLayout.ts
@@ -32,7 +32,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
     let y = this.contentSize.height;
 
     if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, 40);
+      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);
       let loader = new LayoutInfo('loader', 'loader', rect);
       let node = {
         layoutInfo: loader,
@@ -44,7 +44,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
     }
 
     if (nodes.length === 0) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height);
+      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.placeholderHeight ?? this.virtualizer!.visibleRect.height);
       let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
       let node = {
         layoutInfo: placeholder,
@@ -67,6 +67,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
       parentKey: node.key,
       value: null,
       level: node.level,
+      index: node.index,
       hasChildNodes: false,
       childNodes: [],
       rendered: node.rendered,
@@ -81,7 +82,7 @@ export class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {
     y += header.layoutInfo.rect.height;
 
     let section = super.buildSection(node, x, y);
-    section.children.unshift(header);
+    section.children!.unshift(header);
     return section;
   }
 }
diff --git a/packages/@react-spectrum/listbox/src/ListBoxOption.tsx b/packages/@react-spectrum/listbox/src/ListBoxOption.tsx
index a8404ddfa5c..1635b985f1d 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxOption.tsx
+++ b/packages/@react-spectrum/listbox/src/ListBoxOption.tsx
@@ -36,7 +36,7 @@ export function ListBoxOption<T>(props: OptionProps<T>) {
     key
   } = item;
   let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext);
+  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext)!;
 
   let ref = useRef<any>(undefined);
   let {optionProps, labelProps, descriptionProps, isSelected, isDisabled, isFocused} = useOption(
diff --git a/packages/@react-spectrum/listbox/src/ListBoxSection.tsx b/packages/@react-spectrum/listbox/src/ListBoxSection.tsx
index 49bdd39020e..2daaf0c319f 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxSection.tsx
+++ b/packages/@react-spectrum/listbox/src/ListBoxSection.tsx
@@ -20,8 +20,9 @@ import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {useListBoxSection} from '@react-aria/listbox';
 import {useLocale} from '@react-aria/i18n';
 
-interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref'> {
-  headerLayoutInfo: LayoutInfo,
+interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref' | 'layoutInfo'> {
+  layoutInfo: LayoutInfo,
+  headerLayoutInfo: LayoutInfo | null,
   item: Node<T>,
   children?: ReactNode
 }
@@ -34,7 +35,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
     'aria-label': item['aria-label']
   });
 
-  let headerRef = useRef(undefined);
+  let headerRef = useRef<HTMLDivElement | null>(null);
   useVirtualizerItem({
     layoutInfo: headerLayoutInfo,
     virtualizer,
@@ -42,7 +43,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
   });
 
   let {direction} = useLocale();
-  let {state} = useContext(ListBoxContext);
+  let {state} = useContext(ListBoxContext)!;
 
   return (
     <Fragment>
diff --git a/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx b/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
index cdce02bda7f..cc8e70ad895 100644
--- a/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
+++ b/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
@@ -91,9 +91,9 @@ let itemsWithFalsyId = [
   ]}
 ];
 
-let lotsOfSections: any[] = [];
+let lotsOfSections: {name: string, children: {name: string}[]}[] = [];
 for (let i = 0; i < 50; i++) {
-  let children = [];
+  let children: {name: string}[] = [];
   for (let j = 0; j < 50; j++) {
     children.push({name: `Section ${i}, Item ${j}`});
   }
@@ -736,7 +736,7 @@ export const WithSemanticElementsGenerativeMultipleSelection = {
 
 export const IsLoading = {
   render: () => (
-    <ListBox flexGrow={1} aria-labelledby="label" items={[]} isLoading>
+    <ListBox flexGrow={1} aria-labelledby="label" items={[] as any[]} isLoading>
       {(item) => <Item>{item.name}</Item>}
     </ListBox>
   ),
@@ -939,18 +939,19 @@ export function FocusExample(args = {}) {
   let tree = useTreeData({
     initialItems: withSection,
     getKey: (item) => item.name,
-    getChildren: (item:{name:string, children?:{name:string, children?:{name:string}[]}[]}) => item.children
+    getChildren: (item: {name:string, children?:{name:string, children?:{name:string}[]}[]}) => item.children ?? []
   });
 
-  let [dialog, setDialog] = useState(null);
+  let [dialog, setDialog] = useState<{action: Key} | null>(null);
   let ref = useRef(null);
 
   return (
     <FocusScope>
       <Flex direction={'column'}>
         <ActionGroup marginBottom={8} onAction={action => setDialog({action})}>
-          {(tree.selectedKeys.size > 0) &&
-            <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
+          {(tree.selectedKeys.size > 0)
+            ? <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
+            : null
           }
         </ActionGroup>
         <div style={{display: 'flex', flexDirection: 'column'}}>
@@ -970,11 +971,11 @@ export function FocusExample(args = {}) {
                 }}
                 selectionMode="multiple"
                 {...args}>
-                {item => item.children.length && (
+                {item => item?.children?.length ? (
                   <Section key={item.value.name} items={item.children} title={item.value.name}>
                     {item => <Item key={item.value.name}>{item.value.name}</Item>}
                   </Section>
-                )}
+                ) : null}
               </ListBox>
             }
           </div>
@@ -1107,7 +1108,7 @@ export function WithTreeData() {
         }
       }}>
       {node => (
-        <Section title={node.value.name} items={node.children}>
+        <Section title={node.value.name} items={node.children ?? []}>
           {node => <Item>{node.value.name}</Item>}
         </Section>
       )}
diff --git a/packages/@react-spectrum/listbox/test/ListBox.test.js b/packages/@react-spectrum/listbox/test/ListBox.test.js
index 8b6c974b455..2a7c07ca6bb 100644
--- a/packages/@react-spectrum/listbox/test/ListBox.test.js
+++ b/packages/@react-spectrum/listbox/test/ListBox.test.js
@@ -936,7 +936,6 @@ describe('ListBox', function () {
       let maxHeight = 300;
       jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => maxHeight);
       offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
-        // @ts-ignore
         if (this.getAttribute('role') === 'listbox') {
           // First load should match the clientHeight since the number of items doesn't exceed the listbox height
           return 300;
@@ -959,7 +958,6 @@ describe('ListBox', function () {
       }).mockImplementationOnce(() => {
         onLoadMore();
         offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
-          // @ts-ignore
           if (this.getAttribute('role') === 'listbox') {
             // Second load we need to update the height of the scrollable body otherwise we will keep calling loading more
             return 600;
diff --git a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
index f9075438c4c..3803ad0380e 100644
--- a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
@@ -108,7 +108,7 @@ let dynamicRenderItem = (item, Icon) => (
 );
 
 let dynamicRenderFuncSections = (item: ItemNode) => {
-  let Icon = iconMap[item.icon];
+  let Icon = iconMap[item.icon!];
   if (item.children) {
     if (item.isSection) {
       let key = item.name ?? item.textValue;
diff --git a/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx b/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx
index b4db668dedb..3d740ebdedf 100644
--- a/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx
+++ b/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx
@@ -11,10 +11,10 @@
  */
 
 import {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
+import {DOMRefValue, ItemProps, Key} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
-import {ItemProps, Key} from '@react-types/shared';
 import {Popover} from '@react-spectrum/overlays';
 import React, {JSX, ReactElement, useEffect, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
@@ -41,9 +41,9 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let {isUnavailable = false, targetKey} = props;
 
   let triggerRef = useRef<HTMLLIElement>(null);
-  let popoverRef = useRef(null);
-  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext();
-  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState, ...state});
+  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);
+  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});
   let submenuRef = unwrapDOMRef(popoverRef);
   let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
@@ -85,7 +85,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
   let [, content] = props.children as [ReactElement, ReactElement];
 
   let onBlurWithin = (e) => {
-    if (e.relatedTarget && popoverRef.current && (!popoverRef?.current?.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
+    if (e.relatedTarget && popoverRef.current && (!popoverRef.current.UNSAFE_getDOMNode()?.contains(e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
       if (submenuTriggerState.isOpen) {
         submenuTriggerState.close();
       }
@@ -143,7 +143,7 @@ function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElem
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
         onDismissButtonPress={onDismissButtonPress}
         onBlurWithin={onBlurWithin}
-        container={popoverContainer}
+        container={popoverContainer!}
         state={submenuTriggerState}
         ref={popoverRef}
         triggerRef={triggerRef}
@@ -189,5 +189,5 @@ ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props:
   };
 };
 
-let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
+let _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
 export {_Item as ContextualHelpTrigger};
diff --git a/packages/@react-spectrum/menu/src/Menu.tsx b/packages/@react-spectrum/menu/src/Menu.tsx
index 092cc03c247..8864f9a09c5 100644
--- a/packages/@react-spectrum/menu/src/Menu.tsx
+++ b/packages/@react-spectrum/menu/src/Menu.tsx
@@ -41,15 +41,15 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
     ...mergeProps(contextProps, props)
   };
   let domRef = useDOMRef(ref);
-  let [popoverContainer, setPopoverContainer] = useState(null);
-  let trayContainerRef = useRef(null);
+  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);
+  let trayContainerRef = useRef<HTMLDivElement | null>(null);
   let state = useTreeState(completeProps);
   let submenuRef = useRef<HTMLDivElement>(null);
   let {menuProps} = useMenu(completeProps, state, domRef);
   let {styleProps} = useStyleProps(completeProps);
   useSyncRef(contextProps, domRef);
   let [leftOffset, setLeftOffset] = useState({left: 0});
-  let prevPopoverContainer = useRef(null);
+  let prevPopoverContainer = useRef<HTMLElement | null>(null);
   useEffect(() => {
     if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
       prevPopoverContainer.current = popoverContainer;
@@ -59,12 +59,17 @@ function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDiv
   }, [leftOffset, popoverContainer]);
 
   let menuLevel = contextProps.submenuLevel ?? -1;
-  let hasOpenSubmenu = state.collection.getItem(rootMenuTriggerState?.expandedKeysStack[menuLevel + 1]) != null;
+  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];
+  let hasOpenSubmenu = false;
+  if (nextMenuLevelKey != null) {
+    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
+    hasOpenSubmenu = nextMenuLevel != null;
+  }
   useInteractOutside({
     ref: domRef,
     onInteractOutside: (e) => {
-      if (!popoverContainer?.contains(e.target) && !trayContainerRef.current?.contains(e.target)) {
-        rootMenuTriggerState.close();
+      if (!popoverContainer?.contains(e.target as Node) && !trayContainerRef.current?.contains(e.target as Node)) {
+        rootMenuTriggerState?.close();
       }
     },
     isDisabled: isSubmenu || !hasOpenSubmenu
@@ -141,7 +146,7 @@ export function TrayHeaderWrapper(props) {
     }
   }, [hasOpenSubmenu, isMobile]);
 
-  let timeoutRef = useRef(null);
+  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   let handleBackButtonPress = () => {
     setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
     timeoutRef.current = setTimeout(() => {
@@ -159,7 +164,7 @@ export function TrayHeaderWrapper(props) {
 
   // When opening submenu in tray, focus the first item in the submenu after animation completes
   // This fixes an issue with iOS VO where the closed submenu was getting focus
-  let focusTimeoutRef = useRef(null);
+  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {
       focusTimeoutRef.current = setTimeout(() => {
diff --git a/packages/@react-spectrum/menu/src/MenuItem.tsx b/packages/@react-spectrum/menu/src/MenuItem.tsx
index 872b015e80e..f867dc54600 100644
--- a/packages/@react-spectrum/menu/src/MenuItem.tsx
+++ b/packages/@react-spectrum/menu/src/MenuItem.tsx
@@ -60,7 +60,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
   let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
 
   if (isSubmenuTrigger) {
-    isUnavailable = submenuTriggerContext.isUnavailable;
+    isUnavailable = submenuTriggerContext!.isUnavailable;
   }
 
   let isDisabled = state.disabledKeys.has(key);
diff --git a/packages/@react-spectrum/menu/src/MenuSection.tsx b/packages/@react-spectrum/menu/src/MenuSection.tsx
index 73418c73b02..cee9902bb80 100644
--- a/packages/@react-spectrum/menu/src/MenuSection.tsx
+++ b/packages/@react-spectrum/menu/src/MenuSection.tsx
@@ -40,7 +40,8 @@ export function MenuSection<T>(props: MenuSectionProps<T>) {
   let firstSectionKey = state.collection.getFirstKey();
   let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;
   let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
-  let sectionIsLast = lastSectionKey === item.key && state.collection.getItem(state.collection.getLastKey()).parentKey === lastSectionKey;
+  let lastKey = state.collection.getLastKey();
+  let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey)!.parentKey === lastSectionKey;
 
   return (
     <Fragment>
diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx
index 4d5b3c2104c..a80e90fcae3 100644
--- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx
+++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx
@@ -23,10 +23,10 @@ import {useMenuTrigger} from '@react-aria/menu';
 import {useMenuTriggerState} from '@react-stately/menu';
 
 function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
-  let triggerRef = useRef<HTMLElement>(undefined);
+  let triggerRef = useRef<HTMLElement>(null);
   let domRef = useDOMRef(ref);
   let menuTriggerRef = domRef || triggerRef;
-  let menuRef = useRef<HTMLDivElement>(undefined);
+  let menuRef = useRef<HTMLDivElement>(null);
   let {
     children,
     align = 'start',
diff --git a/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx b/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx
index 94f5bdaf35b..902870bc922 100644
--- a/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx
+++ b/packages/@react-spectrum/menu/src/SubmenuTrigger.tsx
@@ -33,15 +33,15 @@ interface SubmenuTriggerProps {
 export interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}
 
 function SubmenuTrigger(props: SubmenuTriggerProps) {
-  let triggerRef = useRef<HTMLDivElement>(undefined);
+  let triggerRef = useRef<HTMLDivElement>(null);
   let {
     children,
     targetKey
   } = props;
 
   let [menuTrigger, menu] = React.Children.toArray(children);
-  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext();
-  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState);
+  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;
+  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);
   let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
     parentMenuRef,
     submenuRef: menuRef
@@ -59,12 +59,12 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
     switch (e.key) {
       case 'ArrowLeft':
         if (direction === 'ltr') {
-          triggerRef.current.focus();
+          triggerRef.current?.focus();
         }
         break;
       case 'ArrowRight':
         if (direction === 'rtl') {
-          triggerRef.current.focus();
+          triggerRef.current?.focus();
         }
         break;
     }
@@ -90,7 +90,7 @@ function SubmenuTrigger(props: SubmenuTriggerProps) {
         {...popoverProps}
         onDismissButtonPress={onDismissButtonPress}
         UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
-        container={popoverContainer}
+        container={popoverContainer!}
         containerPadding={0}
         enableBothDismissButtons
         UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}
@@ -150,5 +150,5 @@ SubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps
   };
 };
 
-let _SubmenuTrigger = SubmenuTrigger as (props: SpectrumSubmenuTriggerProps) => JSX.Element;
+let _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;
 export {_SubmenuTrigger as SubmenuTrigger};
diff --git a/packages/@react-spectrum/menu/src/context.ts b/packages/@react-spectrum/menu/src/context.ts
index e6b092f7b32..94d1de8e256 100644
--- a/packages/@react-spectrum/menu/src/context.ts
+++ b/packages/@react-spectrum/menu/src/context.ts
@@ -11,7 +11,7 @@
  */
 
 import {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents, RefObject} from '@react-types/shared';
-import React, {HTMLAttributes, MutableRefObject, useContext} from 'react';
+import React, {HTMLAttributes, useContext} from 'react';
 import {RootMenuTriggerState} from '@react-stately/menu';
 import {TreeState} from '@react-stately/tree';
 
@@ -20,7 +20,7 @@ export interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'aut
   closeOnSelect?: boolean,
   shouldFocusWrap?: boolean,
   autoFocus?: boolean | FocusStrategy,
-  ref?: MutableRefObject<HTMLDivElement>,
+  ref?: RefObject<HTMLDivElement | null>,
   state?: RootMenuTriggerState,
   onBackButtonPress?: () => void,
   submenuLevel?: number
@@ -34,7 +34,7 @@ export function useMenuContext(): MenuContextValue {
 
 export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents, 'onPressStart' | 'onPress'>, Pick<HoverEvents, 'onHoverChange'>, Pick<KeyboardEvents, 'onKeyDown'> {
   isUnavailable?: boolean,
-  triggerRef?: MutableRefObject<HTMLElement>,
+  triggerRef?: RefObject<HTMLElement | null>,
   'aria-expanded'?: boolean | 'true' | 'false',
   'aria-controls'?: string,
   'aria-haspopup'?: 'dialog' | 'menu',
@@ -43,21 +43,21 @@ export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents,
 
 export const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
 
-export function useSubmenuTriggerContext(): SubmenuTriggerContextValue {
+export function useSubmenuTriggerContext() {
   return useContext(SubmenuTriggerContext);
 }
 
 export interface MenuStateContextValue<T> {
-  state?: TreeState<T>,
-  popoverContainer?: HTMLElement,
-  trayContainerRef?: RefObject<HTMLElement | null>,
-  menu?: RefObject<HTMLDivElement | null>,
-  submenu?: RefObject<HTMLDivElement | null>,
+  state: TreeState<T>,
+  popoverContainer: HTMLElement | null,
+  trayContainerRef: RefObject<HTMLElement | null>,
+  menu: RefObject<HTMLDivElement | null>,
+  submenu: RefObject<HTMLDivElement | null>,
   rootMenuTriggerState?: RootMenuTriggerState
 }
 
-export const MenuStateContext = React.createContext<MenuStateContextValue<any>>(undefined);
+export const MenuStateContext = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
 
-export function useMenuStateContext<T>(): MenuStateContextValue<T> {
+export function useMenuStateContext() {
   return useContext(MenuStateContext);
 }
diff --git a/packages/@react-spectrum/menu/stories/Submenu.stories.tsx b/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
index 5b0fc90527f..8e5c496360b 100644
--- a/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
@@ -235,7 +235,7 @@ let dynamicRenderItem = (item, Icon) => (
 );
 
 let dynamicRenderFuncSections = (item: ItemNode) => {
-  let Icon = iconMap[item.icon];
+  let Icon = iconMap[item.icon!];
   if (item.children) {
     if (item.isSection) {
       let key = item.name ?? item.textValue;
diff --git a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
index 8a119bef6b8..050adc174f3 100644
--- a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
+++ b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
@@ -802,7 +802,7 @@ describe('Submenu', function () {
       expect(trayDialog).toBeTruthy();
       let backButton = within(trayDialog).getByRole('button');
       expect(backButton).toHaveAttribute('aria-label', `Return to ${submenuTrigger1.textContent}`);
-      let menuHeader = within(trayDialog).getAllByText(submenuTrigger1.textContent)[0];
+      let menuHeader = within(trayDialog).getAllByText(submenuTrigger1.textContent!)[0];
       expect(menuHeader).toBeVisible();
       expect(menuHeader.tagName).toBe('H1');
       let submenuTrigger2 = submenu1Items[2];
@@ -825,7 +825,7 @@ describe('Submenu', function () {
       trayDialog = within(tray).getByRole('dialog');
       backButton = within(trayDialog).getByRole('button');
       expect(backButton).toHaveAttribute('aria-label', `Return to ${submenuTrigger2.textContent}`);
-      menuHeader = within(tray).getAllByText(submenuTrigger2.textContent)[0];
+      menuHeader = within(tray).getAllByText(submenuTrigger2.textContent!)[0];
       expect(menuHeader).toBeVisible();
       expect(menuHeader.tagName).toBe('H1');
     });
diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index 02b8c7f25b1..fe3a3abde21 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -18,9 +18,9 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 import {Underlay} from './Underlay';
-import {useViewportSize} from '@react-aria/utils';
+import {useObjectRef, useViewportSize} from '@react-aria/utils';
 
 interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
   children: ReactNode,
@@ -30,7 +30,8 @@ interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProp
 
 interface ModalWrapperProps extends ModalProps {
   isOpen?: boolean,
-  wrapperRef: MutableRefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement | null>,
+  children: ReactNode
 }
 
 function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
@@ -52,11 +53,12 @@ let typeMap = {
   fullscreenTakeover: 'fullscreenTakeover'
 };
 
-let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement | null>) {
+let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {
   let {type, children, state, isOpen, wrapperRef} = props;
-  let typeVariant = typeMap[type];
+  let typeVariant = type != null ? typeMap[type] : undefined;
   let {styleProps} = useStyleProps(props);
-  let {modalProps, underlayProps} = useModalOverlay(props, state, ref);
+  let objRef = useObjectRef(ref);
+  let {modalProps, underlayProps} = useModalOverlay(props, state, objRef);
 
   let wrapperClassName = classNames(
     modalStyles,
@@ -96,7 +98,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
         <div
           {...styleProps}
           {...modalProps}
-          ref={ref}
+          ref={objRef}
           className={modalClassName}
           data-testid="modal">
           {children}
diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx
index 79456c1aff2..59d16f4ac5b 100644
--- a/packages/@react-spectrum/overlays/src/Popover.tsx
+++ b/packages/@react-spectrum/overlays/src/Popover.tsx
@@ -14,11 +14,11 @@ import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-a
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
 import {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {Overlay} from './Overlay';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, MutableRefObject, ReactNode, useRef, useState} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
 import {Underlay} from './Underlay';
 
@@ -41,7 +41,7 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
 
 interface PopoverWrapperProps extends PopoverProps, FocusWithinProps {
   isOpen?: boolean,
-  wrapperRef: MutableRefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement | null>
 }
 
 interface ArrowProps {
@@ -85,7 +85,7 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   );
 }
 
-const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement | null>) => {
+const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {
   let {
     children,
     isOpen,
@@ -97,9 +97,10 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     onDismissButtonPress = () => state.close()
   } = props;
   let {styleProps} = useStyleProps(props);
+  let objRef = useObjectRef(ref);
 
   let {size, borderWidth, arrowRef} = useArrowSize();
-  const borderRadius = usePopoverBorderRadius(ref);
+  const borderRadius = usePopoverBorderRadius(objRef);
   let borderDiagonal = borderWidth * Math.SQRT2;
   let primary = size + borderDiagonal;
   let secondary = primary * 2;
@@ -110,8 +111,8 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     placement
   } = usePopover({
     ...props,
-    popoverRef: ref,
-    maxHeight: null,
+    popoverRef: objRef,
+    maxHeight: undefined,
     arrowSize: hideArrow ? 0 : secondary,
     arrowBoundaryOffset: borderRadius
   }, state);
@@ -128,7 +129,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
           ...styleProps.style,
           ...popoverProps.style
         }}
-        ref={ref}
+        ref={objRef}
         className={
           classNames(
             styles,
@@ -154,7 +155,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
         {hideArrow ? null : (
           <Arrow
             arrowProps={arrowProps}
-            isLandscape={arrowPlacement[placement] === 'bottom'}
+            isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}
             arrowRef={arrowRef}
             primary={primary}
             secondary={secondary}
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 635e43dfed9..ed58af05b04 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -17,10 +17,10 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
 import {Underlay} from './Underlay';
-import {useViewportSize} from '@react-aria/utils';
+import {useObjectRef, useViewportSize} from '@react-aria/utils';
 
 interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
   children: ReactNode,
@@ -30,7 +30,7 @@ interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps
 
 interface TrayWrapperProps extends TrayProps {
   isOpen?: boolean,
-  wrapperRef: MutableRefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement | null>
 }
 
 function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
@@ -47,7 +47,7 @@ function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   );
 }
 
-let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement | null>) {
+let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {
   let {
     children,
     isOpen,
@@ -56,11 +56,12 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
+  let objRef = useObjectRef(ref);
 
   let {modalProps, underlayProps} = useModalOverlay({
     ...props,
     isDismissable: true
-  }, state, ref);
+  }, state, objRef);
 
   // We need to measure the window's height in JS rather than using percentages in CSS
   // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
@@ -103,7 +104,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
           {...styleProps}
           {...modalProps}
           className={className}
-          ref={ref}
+          ref={objRef}
           data-testid="tray">
           <DismissButton onDismiss={state.close} />
           {children}
diff --git a/packages/@react-spectrum/pagination/README.md b/packages/@react-spectrum/pagination/README.md
deleted file mode 100644
index 6b70e85e059..00000000000
--- a/packages/@react-spectrum/pagination/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @react-spectrum/pagination
-
-This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-spectrum/pagination/index.ts b/packages/@react-spectrum/pagination/index.ts
deleted file mode 100644
index 1210ae1e402..00000000000
--- a/packages/@react-spectrum/pagination/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-export * from './src';
diff --git a/packages/@react-spectrum/pagination/intl/ar-AE.json b/packages/@react-spectrum/pagination/intl/ar-AE.json
deleted file mode 100644
index cfcc0eadff4..00000000000
--- a/packages/@react-spectrum/pagination/intl/ar-AE.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "من {n, plural, one{# صفحة} other{# من الصفحات}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/bg-BG.json b/packages/@react-spectrum/pagination/intl/bg-BG.json
deleted file mode 100644
index 92827108299..00000000000
--- a/packages/@react-spectrum/pagination/intl/bg-BG.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "на {n, plural, one{# страница} other{# страници}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/cs-CZ.json b/packages/@react-spectrum/pagination/intl/cs-CZ.json
deleted file mode 100644
index 23ba4acf599..00000000000
--- a/packages/@react-spectrum/pagination/intl/cs-CZ.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "z {n, plural, one{# stránky} other{# stránek}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/da-DK.json b/packages/@react-spectrum/pagination/intl/da-DK.json
deleted file mode 100644
index b18b0f46e3f..00000000000
--- a/packages/@react-spectrum/pagination/intl/da-DK.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "af {n, plural, one{# side} other{# sider}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/de-DE.json b/packages/@react-spectrum/pagination/intl/de-DE.json
deleted file mode 100644
index 35b350f4fda..00000000000
--- a/packages/@react-spectrum/pagination/intl/de-DE.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "von {n, plural, one{# Seite} other{# Seiten}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/el-GR.json b/packages/@react-spectrum/pagination/intl/el-GR.json
deleted file mode 100644
index a8eb1eaa124..00000000000
--- a/packages/@react-spectrum/pagination/intl/el-GR.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "από {n, plural, one{# σελίδα} other{# σελίδες}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/en-US.json b/packages/@react-spectrum/pagination/intl/en-US.json
deleted file mode 100644
index 01412cf3d11..00000000000
--- a/packages/@react-spectrum/pagination/intl/en-US.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "of {n, plural, one{# page} other{# pages}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/es-ES.json b/packages/@react-spectrum/pagination/intl/es-ES.json
deleted file mode 100644
index e92f6b4e96d..00000000000
--- a/packages/@react-spectrum/pagination/intl/es-ES.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "de {n, plural, one{# página} other{# páginas}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/et-EE.json b/packages/@react-spectrum/pagination/intl/et-EE.json
deleted file mode 100644
index 14ba6ba4321..00000000000
--- a/packages/@react-spectrum/pagination/intl/et-EE.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "/ {n, plural, one{# lk} other{# lk}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/fi-FI.json b/packages/@react-spectrum/pagination/intl/fi-FI.json
deleted file mode 100644
index 9b43ed3aeea..00000000000
--- a/packages/@react-spectrum/pagination/intl/fi-FI.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "/ {n, plural, one{# sivu} other{# sivua}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/fr-FR.json b/packages/@react-spectrum/pagination/intl/fr-FR.json
deleted file mode 100644
index dc3d2259d58..00000000000
--- a/packages/@react-spectrum/pagination/intl/fr-FR.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "sur {n, plural, one{# page} other{# pages}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/he-IL.json b/packages/@react-spectrum/pagination/intl/he-IL.json
deleted file mode 100644
index df85f8c2fff..00000000000
--- a/packages/@react-spectrum/pagination/intl/he-IL.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "מתוך {n, plural, one{# דף} other{# דפים}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/hr-HR.json b/packages/@react-spectrum/pagination/intl/hr-HR.json
deleted file mode 100644
index 1d04a6e9497..00000000000
--- a/packages/@react-spectrum/pagination/intl/hr-HR.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "od {n, plural, one{# stranice} other{# stranica}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/hu-HU.json b/packages/@react-spectrum/pagination/intl/hu-HU.json
deleted file mode 100644
index 0bf0c4d6987..00000000000
--- a/packages/@react-spectrum/pagination/intl/hu-HU.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "/ {n, plural, one{# oldal} other{# oldalak}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/it-IT.json b/packages/@react-spectrum/pagination/intl/it-IT.json
deleted file mode 100644
index 6181af5caca..00000000000
--- a/packages/@react-spectrum/pagination/intl/it-IT.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "di {n, plural, one{# pagina} other{# pagine}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/ja-JP.json b/packages/@react-spectrum/pagination/intl/ja-JP.json
deleted file mode 100644
index 80b494d444b..00000000000
--- a/packages/@react-spectrum/pagination/intl/ja-JP.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "／ {n, plural, one{# ページ} other{# ページ}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/ko-KR.json b/packages/@react-spectrum/pagination/intl/ko-KR.json
deleted file mode 100644
index 2b27dca6596..00000000000
--- a/packages/@react-spectrum/pagination/intl/ko-KR.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "/ {n, plural, one{# 페이지} other{# 페이지}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/lt-LT.json b/packages/@react-spectrum/pagination/intl/lt-LT.json
deleted file mode 100644
index e5f73140e09..00000000000
--- a/packages/@react-spectrum/pagination/intl/lt-LT.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "iš {n, plural, one{# psl.} other{# psl.}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/lv-LV.json b/packages/@react-spectrum/pagination/intl/lv-LV.json
deleted file mode 100644
index 854762cf431..00000000000
--- a/packages/@react-spectrum/pagination/intl/lv-LV.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "no {n, plural, one{# lpp.} other{# lpp.}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/nb-NO.json b/packages/@react-spectrum/pagination/intl/nb-NO.json
deleted file mode 100644
index 54b5f1fc4e5..00000000000
--- a/packages/@react-spectrum/pagination/intl/nb-NO.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "av {n, plural, one{# side} other{# sider}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/nl-NL.json b/packages/@react-spectrum/pagination/intl/nl-NL.json
deleted file mode 100644
index f1287ddeb39..00000000000
--- a/packages/@react-spectrum/pagination/intl/nl-NL.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "van {n, plural, one{# pagina} other{# pagina's}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/pl-PL.json b/packages/@react-spectrum/pagination/intl/pl-PL.json
deleted file mode 100644
index de6fb4af28a..00000000000
--- a/packages/@react-spectrum/pagination/intl/pl-PL.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "z {n, plural, one{# strony} other{# stron}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/pt-BR.json b/packages/@react-spectrum/pagination/intl/pt-BR.json
deleted file mode 100644
index e92f6b4e96d..00000000000
--- a/packages/@react-spectrum/pagination/intl/pt-BR.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "de {n, plural, one{# página} other{# páginas}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/pt-PT.json b/packages/@react-spectrum/pagination/intl/pt-PT.json
deleted file mode 100644
index e92f6b4e96d..00000000000
--- a/packages/@react-spectrum/pagination/intl/pt-PT.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "de {n, plural, one{# página} other{# páginas}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/ro-RO.json b/packages/@react-spectrum/pagination/intl/ro-RO.json
deleted file mode 100644
index fdade6f520b..00000000000
--- a/packages/@react-spectrum/pagination/intl/ro-RO.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "din {n, plural, one{# pagină} other{# pagini}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/ru-RU.json b/packages/@react-spectrum/pagination/intl/ru-RU.json
deleted file mode 100644
index 15e1a854993..00000000000
--- a/packages/@react-spectrum/pagination/intl/ru-RU.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "из {n, plural, one{# стр.} other{# стр.}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/sk-SK.json b/packages/@react-spectrum/pagination/intl/sk-SK.json
deleted file mode 100644
index 16828028139..00000000000
--- a/packages/@react-spectrum/pagination/intl/sk-SK.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "z {n, plural, one{# strany} other{# strán}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/sl-SI.json b/packages/@react-spectrum/pagination/intl/sl-SI.json
deleted file mode 100644
index 08cfce5c032..00000000000
--- a/packages/@react-spectrum/pagination/intl/sl-SI.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "od {n, plural, one{# stran} other{# strani}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/sr-SP.json b/packages/@react-spectrum/pagination/intl/sr-SP.json
deleted file mode 100644
index bde5332fc7f..00000000000
--- a/packages/@react-spectrum/pagination/intl/sr-SP.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "od {n, plural, one{# strana} other{# strana}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/sv-SE.json b/packages/@react-spectrum/pagination/intl/sv-SE.json
deleted file mode 100644
index 7fa0fa4faf4..00000000000
--- a/packages/@react-spectrum/pagination/intl/sv-SE.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "av {n, plural, one{# sida} other{# sidor}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/tr-TR.json b/packages/@react-spectrum/pagination/intl/tr-TR.json
deleted file mode 100644
index 9557e5d3ccc..00000000000
--- a/packages/@react-spectrum/pagination/intl/tr-TR.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "/ {n, plural, one{# sayfa} other{# sayfa}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/uk-UA.json b/packages/@react-spectrum/pagination/intl/uk-UA.json
deleted file mode 100644
index a5713af7eb3..00000000000
--- a/packages/@react-spectrum/pagination/intl/uk-UA.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "із {n, plural, one{# сторінки} other{# стор.}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/zh-CN.json b/packages/@react-spectrum/pagination/intl/zh-CN.json
deleted file mode 100644
index ed92dcce046..00000000000
--- a/packages/@react-spectrum/pagination/intl/zh-CN.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "共 {n, plural, one{# 页} other{# 页}}"
-}
diff --git a/packages/@react-spectrum/pagination/intl/zh-TW.json b/packages/@react-spectrum/pagination/intl/zh-TW.json
deleted file mode 100644
index c39b8687345..00000000000
--- a/packages/@react-spectrum/pagination/intl/zh-TW.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "page_count": "共 {n, plural, one{# 頁} other{# 頁}}"
-}
diff --git a/packages/@react-spectrum/pagination/package.json b/packages/@react-spectrum/pagination/package.json
deleted file mode 100644
index 03b528ce7a8..00000000000
--- a/packages/@react-spectrum/pagination/package.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "name": "@react-spectrum/pagination",
-  "version": "3.0.0-alpha.1",
-  "description": "Spectrum UI components in React",
-  "license": "Apache-2.0",
-  "private": true,
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "exports": {
-    "types": "./dist/types.d.ts",
-    "import": "./dist/import.mjs",
-    "require": "./dist/main.js"
-  },
-  "types": "dist/types.d.ts",
-  "source": "src/index.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "targets": {
-    "main": {
-      "includeNodeModules": [
-        "@adobe/spectrum-css-temp"
-      ]
-    },
-    "module": {
-      "includeNodeModules": [
-        "@adobe/spectrum-css-temp"
-      ]
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/react-spectrum"
-  },
-  "dependencies": {
-    "@react-aria/i18n": "^3.1.0",
-    "@react-aria/pagination": "3.0.0-alpha.1",
-    "@react-spectrum/button": "^3.1.0",
-    "@react-spectrum/textfield": "^3.1.0",
-    "@react-spectrum/utils": "^3.1.0",
-    "@react-stately/pagination": "3.0.0-alpha.1",
-    "@react-types/pagination": "3.0.0-alpha.1",
-    "@spectrum-icons/ui": "^3.1.0",
-    "@swc/helpers": "^0.5.0"
-  },
-  "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
-  },
-  "peerDependencies": {
-    "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/@react-spectrum/pagination/src/Pagination.tsx b/packages/@react-spectrum/pagination/src/Pagination.tsx
deleted file mode 100644
index 45faaf43a60..00000000000
--- a/packages/@react-spectrum/pagination/src/Pagination.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ActionButton} from '@react-spectrum/button';
-import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
-import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
-import {classNames} from '@react-spectrum/utils';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {PaginationBase} from '@react-types/pagination';
-import React from 'react';
-import styles from '@adobe/spectrum-css-temp/components/pagination/vars.css';
-import {TextField} from '@react-spectrum/textfield';
-import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {usePagination} from '@react-aria/pagination';
-import {usePaginationState} from '@react-stately/pagination';
-import {useProviderProps} from '@react-spectrum/provider';
-
-export function PaginationInput(props: PaginationBase) {
-  props = Object.assign({}, {defaultValue: 1}, props);
-  props = useProviderProps(props);
-  let state = usePaginationState(props);
-  let {prevButtonProps, nextButtonProps, textProps} = usePagination(props, state);
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/pagination');
-  let {direction} = useLocale();
-  const {maxValue} = props;
-
-  return (
-    <nav
-      className={classNames(styles, 'spectrum-Pagination', 'spectrum-Pagination--explicit')}>
-      <ActionButton
-        {...prevButtonProps}
-        isQuiet>
-        {direction === 'rtl' ? <ChevronRightMedium /> : <ChevronLeftMedium />}
-      </ActionButton>
-      <TextField
-        {...textProps}
-        // This is a filler for now to fix accessibility tests, will revisit when we pick Pagination back up
-        aria-label="pagination input"
-        value={state.value}
-        onChange={state.onChange}
-        UNSAFE_className={classNames(styles, 'spectrum-Pagination-input')} />
-      <span
-        className={classNames(typographyStyles, 'spectrum-Body--secondary', classNames(styles, 'spectrum-Pagination-counter'))}>
-        {stringFormatter.format('page_count', {n: maxValue})}
-      </span>
-      <ActionButton
-        {...nextButtonProps}
-        isQuiet>
-        {direction === 'rtl' ? <ChevronLeftMedium /> : <ChevronRightMedium />}
-      </ActionButton>
-    </nav>
-  );
-}
diff --git a/packages/@react-spectrum/pagination/src/index.ts b/packages/@react-spectrum/pagination/src/index.ts
deleted file mode 100644
index e45a076c969..00000000000
--- a/packages/@react-spectrum/pagination/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/// <reference types="css-module-types" />
-
-export {PaginationInput} from './Pagination';
diff --git a/packages/@react-spectrum/pagination/stories/pagination.stories.js b/packages/@react-spectrum/pagination/stories/pagination.stories.js
deleted file mode 100644
index 86415fc1e56..00000000000
--- a/packages/@react-spectrum/pagination/stories/pagination.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {action} from '@storybook/addon-actions';
-import {PaginationInput} from '../';
-import React from 'react';
-
-export default {
-  title: 'PaginationInput'
-};
-
-export const Default = () => render({maxValue: '10', onChange: action('onChange')});
-export const Controlled = () =>
-  render({maxValue: '50', value: '2', onChange: action('onChange')});
-
-Controlled.story = {
-  name: 'controlled'
-};
-
-function render(props = {}) {
-  return <PaginationInput {...props} onPrevious={action('onPrevious')} onNext={action('onNext')} />;
-}
diff --git a/packages/@react-spectrum/picker/src/Picker.tsx b/packages/@react-spectrum/picker/src/Picker.tsx
index 1efdd979e3d..06bbd50cc14 100644
--- a/packages/@react-spectrum/picker/src/Picker.tsx
+++ b/packages/@react-spectrum/picker/src/Picker.tsx
@@ -64,10 +64,10 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   let state = useSelectState(props);
   let domRef = useDOMRef(ref);
 
-  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
-  let triggerRef = useRef<FocusableRefValue<HTMLElement>>(undefined);
+  let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);
+  let triggerRef = useRef<FocusableRefValue<HTMLElement>>(null);
   let unwrappedTriggerRef = useUnwrapDOMRef(triggerRef);
-  let listboxRef = useRef(undefined);
+  let listboxRef = useRef(null);
 
   let isLoadingInitial = props.isLoading && state.collection.size === 0;
   let isLoadingMore = props.isLoading && state.collection.size > 0;
@@ -105,7 +105,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   );
 
   // Measure the width of the button to inform the width of the menu (below).
-  let [buttonWidth, setButtonWidth] = useState(null);
+  let [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);
   let {scale} = useProvider();
 
   let onResize = useCallback(() => {
@@ -133,7 +133,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
     // If quiet, use the default width, otherwise match the width of the button. This can be overridden by the menuWidth prop.
     // Always have a minimum width of the button width. When quiet, there is an extra offset to add.
     // Not using style props for this because they don't support `calc`.
-    let width = isQuiet ? null : buttonWidth;
+    let width = isQuiet ? undefined : buttonWidth;
     let style = {
       width: menuWidth ? dimensionValue(menuWidth) : width,
       minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index b75b320d1c3..79c62b7b6b3 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -287,7 +287,7 @@ export const LabelledBy: LabelledByStory = {
   render: (args) => (
     <>
       <div id="test">Test label</div>
-      <Picker {...args} aria-labelledby={args['aria-labelledby'] ? 'test' : null} items={flatOptions}>
+      <Picker {...args} aria-labelledby={args['aria-labelledby'] ? 'test' : undefined} items={flatOptions}>
         {(item: any) => <Item>{item.name}</Item>}
       </Picker>
     </>
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
index d629c764105..a5f20b61434 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
@@ -114,7 +114,7 @@ const ResponsiveStyleTemplate = () => (
 
 const CustomResponsivStylePropsTemplate = () => {
   let Breakpoint = () => {
-    let {matchedBreakpoints} = useBreakpoint();
+    let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {base: 'size-1600', XS: 'size-2000', S: 'size-2400', M: 'size-3000', L: 'size-3400', XL: 'size-4600', XXL: 'size-6000'};
     return (
@@ -141,7 +141,7 @@ const CustomResponsivStylePropsTemplate = () => {
 
 const BreakpointOmittedTemplate = () => {
   let Breakpoint = () => {
-    let {matchedBreakpoints} = useBreakpoint();
+    let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {base: 'size-1600', S: 'size-2400', L: 'size-3400'};
     return (
diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/packages/@react-spectrum/provider/src/Provider.tsx
index d54665a955e..f86a7f64c07 100644
--- a/packages/@react-spectrum/provider/src/Provider.tsx
+++ b/packages/@react-spectrum/provider/src/Provider.tsx
@@ -23,7 +23,7 @@ import {DOMRef} from '@react-types/shared';
 import {filterDOMProps, RouterProvider} from '@react-aria/utils';
 import {I18nProvider, useLocale} from '@react-aria/i18n';
 import {ModalProvider, useModalProvider} from '@react-aria/overlays';
-import {ProviderContext, ProviderProps} from '@react-types/provider';
+import {ProviderProps} from '@react-types/provider';
 import React, {useContext, useEffect, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/page/vars.css';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/index.css';
@@ -34,7 +34,7 @@ import {version} from '../package.json';
 const DEFAULT_BREAKPOINTS = {S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536};
 
 function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
-  let prevContext = useProvider();
+  let prevContext = useContext(Context);
   let prevColorScheme = prevContext && prevContext.colorScheme;
   let prevBreakpoints = prevContext && prevContext.breakpoints;
   let {
@@ -45,17 +45,17 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
     throw new Error('theme not found, the parent provider must have a theme provided');
   }
   // Hooks must always be called.
-  let autoColorScheme = useColorScheme(theme, defaultColorScheme);
+  let autoColorScheme = useColorScheme(theme, defaultColorScheme || 'light');
   let autoScale = useScale(theme);
   let {locale: prevLocale} = useLocale();
   // if the new theme doesn't support the prevColorScheme, we must resort to the auto
-  let usePrevColorScheme = !!theme[prevColorScheme];
+  let usePrevColorScheme = prevColorScheme ? !!theme[prevColorScheme] : false;
 
   // importance of color scheme props > parent > auto:(OS > default > omitted)
   let {
     colorScheme = usePrevColorScheme ? prevColorScheme : autoColorScheme,
     scale = prevContext ? prevContext.scale : autoScale,
-    locale = prevContext ? prevLocale : null,
+    locale = prevContext ? prevLocale : undefined,
     breakpoints = prevContext ? prevBreakpoints : DEFAULT_BREAKPOINTS,
     children,
     isQuiet,
@@ -83,7 +83,7 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
     validationState
   };
 
-  let matchedBreakpoints = useMatchedBreakpoints(breakpoints);
+  let matchedBreakpoints = useMatchedBreakpoints(breakpoints!);
   let filteredProps = {};
   Object.entries(currentProps).forEach(([key, value]) => value !== undefined && (filteredProps[key] = value));
 
@@ -94,7 +94,7 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   let contents = children;
   let domProps = filterDOMProps(otherProps);
   let {styleProps} = useStyleProps(otherProps, undefined, {matchedBreakpoints});
-  if (!prevContext || props.locale || theme !== prevContext.theme || colorScheme !== prevContext.colorScheme || scale !== prevContext.scale || Object.keys(domProps).length > 0 || otherProps.UNSAFE_className || Object.keys(styleProps.style).length > 0) {
+  if (!prevContext || props.locale || theme !== prevContext.theme || colorScheme !== prevContext.colorScheme || scale !== prevContext.scale || Object.keys(domProps).length > 0 || otherProps.UNSAFE_className || (styleProps.style && Object.keys(styleProps.style).length > 0)) {
     contents = (
       <ProviderWrapper {...props} UNSAFE_style={{isolation: !prevContext ? 'isolate' : undefined, ...styleProps.style}} ref={ref}>
         {contents}
@@ -138,15 +138,15 @@ const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: Provide
   let {styleProps} = useStyleProps(otherProps);
   let domRef = useDOMRef(ref);
 
-  let themeKey = Object.keys(theme[colorScheme])[0];
-  let scaleKey = Object.keys(theme[scale])[0];
+  let themeKey = Object.keys(theme[colorScheme]!)[0];
+  let scaleKey = Object.keys(theme[scale]!)[0];
 
   let className = clsx(
     styleProps.className,
     styles['spectrum'],
     typographyStyles['spectrum'],
-    Object.values(theme[colorScheme]),
-    Object.values(theme[scale]),
+    Object.values(theme[colorScheme]!),
+    Object.values(theme[scale]!),
     theme.global ? Object.values(theme.global) : null,
     {
       'react-spectrum-provider': shouldKeepSpectrumClassNames,
@@ -166,7 +166,7 @@ const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: Provide
   let hasWarned = useRef(false);
   useEffect(() => {
     if (direction && domRef.current) {
-      let closestDir = domRef.current.parentElement.closest('[dir]');
+      let closestDir = domRef.current?.parentElement?.closest('[dir]');
       let dir = closestDir && closestDir.getAttribute('dir');
       if (dir && dir !== direction && !hasWarned.current) {
         console.warn(`Language directions cannot be nested. ${direction} inside ${dir}.`);
@@ -195,12 +195,16 @@ const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: Provide
  * Returns the various settings and styles applied by the nearest parent Provider.
  * Properties explicitly set by the nearest parent Provider override those provided by preceeding Providers.
  */
-export function useProvider(): ProviderContext {
-  return useContext(Context);
+export function useProvider() {
+  let context = useContext(Context);
+  if (!context) {
+    throw new Error('No root provider found.');
+  }
+  return context;
 }
 
 export function useProviderProps<T>(props: T) : T {
-  let context = useProvider();
+  let context = useContext(Context);
   if (!context) {
     return props;
   }
diff --git a/packages/@react-spectrum/provider/src/index.ts b/packages/@react-spectrum/provider/src/index.ts
index 31a2ed296bc..a0cd3581c0d 100644
--- a/packages/@react-spectrum/provider/src/index.ts
+++ b/packages/@react-spectrum/provider/src/index.ts
@@ -13,5 +13,6 @@
 /// <reference types="css-module-types" />
 
 export {Provider, useProvider, useProviderProps} from './Provider';
+export {Context} from './context';
 export type {ProviderContext} from '@react-types/provider';
 export type {ProviderProps} from '@react-types/provider';
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index 535949dce79..931b9e0b014 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -144,7 +144,7 @@ ResponsiveStyleProps.story = {
 
 export const CustomResponsiveStyleProps = () => {
   let Breakpoint = () => {
-    let {matchedBreakpoints} = useBreakpoint();
+    let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {
       base: 'size-1600',
@@ -177,7 +177,7 @@ CustomResponsiveStyleProps.story = {
 
 export const BreakpointOmitted = () => {
   let Breakpoint = () => {
-    let {matchedBreakpoints} = useBreakpoint();
+    let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {base: 'size-1600', S: 'size-2400', L: 'size-3400'};
     return (
diff --git a/packages/@react-spectrum/provider/test/Provider.test.tsx b/packages/@react-spectrum/provider/test/Provider.test.tsx
index 5c7fbca3d87..ca5fee8ef3f 100644
--- a/packages/@react-spectrum/provider/test/Provider.test.tsx
+++ b/packages/@react-spectrum/provider/test/Provider.test.tsx
@@ -14,12 +14,13 @@ import {act, fireEvent, pointerMap, render} from '@react-spectrum/test-utils-int
 import {ActionButton, Button} from '@react-spectrum/button';
 import {Checkbox} from '@react-spectrum/checkbox';
 import MatchMediaMock from 'jest-matchmedia-mock';
+
 import {Provider} from '../';
-// eslint-disable-next-line rulesdir/useLayoutEffectRule
-import React, {useLayoutEffect, useRef} from 'react';
+import React, {useRef} from 'react';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
 import {useBreakpoint} from '@react-spectrum/utils';
+import {useLayoutEffect} from '@react-aria/utils';
 import userEvent from '@testing-library/user-event';
 
 let theme = {
@@ -254,9 +255,9 @@ describe('Provider', () => {
 
     it('only renders once for multiple resizes in the same range', function () {
       function Component(props) {
-        let {matchedBreakpoints} = useBreakpoint();
+        let {matchedBreakpoints} = useBreakpoint()!;
         let {onBreakpointChange, ...otherProps} = props;
-        let prevBreakpoint = useRef(null);
+        let prevBreakpoint = useRef<string>(null);
         let breakpoint = matchedBreakpoints[0];
         useLayoutEffect(() => {
           if (!Object.is(prevBreakpoint.current, breakpoint)) {
diff --git a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
index 5bd900e1753..d914ce16b1f 100644
--- a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
@@ -160,7 +160,6 @@ export const ContextualHelpStories = {
     containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
     orientation: 'horizontal',
     contextualHelp: (
-      // @ts-ignore
       <ContextualHelp>
         <Heading>What is a segment?</Heading>
         <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
diff --git a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
index 373634aab3c..e8a2728c24e 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
@@ -31,7 +31,6 @@ let states = [
   {isDisabled: true},
   {label: [null, 'custom label']},
   {contextualHelp: (
-    // @ts-ignore
     <ContextualHelp>
       <Heading>What is a segment?</Heading>
       <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
diff --git a/packages/@react-spectrum/s2/chromatic/utils.tsx b/packages/@react-spectrum/s2/chromatic/utils.tsx
index 645a8ecebc3..e0ffca20578 100644
--- a/packages/@react-spectrum/s2/chromatic/utils.tsx
+++ b/packages/@react-spectrum/s2/chromatic/utils.tsx
@@ -79,11 +79,9 @@ export function shortName(key, value) {
 export function generateComboChunks(opts: {states: Array<object>, exclude?: (merged: any) => boolean, numChunks: number}) {
   let {states, exclude, numChunks} = opts;
   let combos = generatePowerset(states, exclude);
-  let chunks = [];
+  let chunks: any[] = [];
   let chunkSize =  Math.ceil(combos.length / numChunks);
   for (let i = 0; i < numChunks; i++) {
-    // Not exactly sure why it is complaining about type never
-    // @ts-ignore
     chunks.push(combos.slice(i * chunkSize, (i + 1) * chunkSize));
   }
 
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index 4e9437db079..d322f325075 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -65,7 +65,6 @@ function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableR
         disabledKeys={props.disabledKeys}
         onAction={props.onAction}
         size={props.menuSize}>
-        {/* @ts-ignore TODO: fix type, right now this component is the same as Menu */}
         {props.children}
       </Menu>
     </MenuTrigger>
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index d7c9b11d43c..d128d73eb06 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -74,7 +74,7 @@ class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOpt
       minSpace = new Size(18, 18),
       maxColumns = Infinity
     } = invalidationContext.layoutOptions || {};
-    let visibleWidth = this.virtualizer.visibleRect.width;
+    let visibleWidth = this.virtualizer!.visibleRect.width;
 
     // The max item width is always the entire viewport.
     // If the max item height is infinity, scale in proportion to the max width.
@@ -102,8 +102,8 @@ class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOpt
     // Compute the horizontal spacing and content height
     let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
 
-    let rows = Math.ceil(this.virtualizer.collection.size / numColumns);
-    let iterator = this.virtualizer.collection[Symbol.iterator]();
+    let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);
+    let iterator = this.virtualizer!.collection[Symbol.iterator]();
     let y = rows > 0 ? minSpace.height : 0;
     let newLayoutInfos = new Map();
     let skeleton: Node<T> | null = null;
@@ -151,13 +151,13 @@ class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOpt
       y += maxHeight + minSpace.height;
 
       // Keep adding skeleton rows until we fill the viewport
-      if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {
+      if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {
         rows++;
       }
     }
 
     this.layoutInfos = newLayoutInfos;
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
+    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
   }
 
   getLayoutInfo(key: Key): LayoutInfo {
@@ -171,7 +171,7 @@ class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOpt
   getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
     let layoutInfos: LayoutInfo[] = [];
     for (let layoutInfo of this.layoutInfos.values()) {
-      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {
+      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
         layoutInfos.push(layoutInfo);
       }
     }
@@ -218,7 +218,7 @@ class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOption
       minSpace = new Size(18, 18),
       maxColumns = Infinity
     } = invalidationContext.layoutOptions || {};
-    let visibleWidth = this.virtualizer.visibleRect.width;
+    let visibleWidth = this.virtualizer!.visibleRect.width;
 
     // The max item width is always the entire viewport.
     // If the max item height is infinity, scale in proportion to the max width.
@@ -277,13 +277,13 @@ class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOption
     };
 
     let skeletonCount = 0;
-    for (let node of this.virtualizer.collection) {
+    for (let node of this.virtualizer!.collection) {
       if (node.type === 'skeleton') {
         // Add skeleton cards until every column has at least one, and we fill the viewport.
         let startingHeights = [...columnHeights];
         while (
           !columnHeights.every((h, i) => h !== startingHeights[i]) ||
-          Math.min(...columnHeights) < this.virtualizer.visibleRect.height
+          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height
         ) {
           let key = `${node.key}-${skeletonCount++}`;
           let content = this.layoutInfos.get(key)?.content || {...node};
@@ -297,7 +297,7 @@ class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOption
 
     // Reset all columns to the maximum for the next section
     let maxHeight = Math.max(...columnHeights);
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);
+    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);
     this.layoutInfos = newLayoutInfos;
     this.numColumns = numColumns;
   }
@@ -313,7 +313,7 @@ class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOption
   getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
     let layoutInfos: LayoutInfo[] = [];
     for (let layoutInfo of this.layoutInfos.values()) {
-      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {
+      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
         layoutInfos.push(layoutInfo);
       }
     }
@@ -344,7 +344,7 @@ class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOption
       return null;
     }
 
-    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
+    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
     let layoutInfos = this.getVisibleLayoutInfos(rect);
     let bestKey: Key | null = null;
     let bestDistance = Infinity;
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 91f64e0b3ec..a8fa569bfe9 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -199,7 +199,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
     // TableLayout's buildCollection always sets the body width to the max width between the header width, but
     // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty
     if (children?.length === 0) {
-      layoutInfo.rect.width = this.virtualizer.visibleRect.width - 80;
+      layoutInfo.rect.width = this.virtualizer!.visibleRect.width - 80;
     }
 
     return [
@@ -212,7 +212,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
     let layoutNode = super.buildLoader(node, x, y);
     let {layoutInfo} = layoutNode;
     layoutInfo.allowOverflow = true;
-    layoutInfo.rect.width = this.virtualizer.visibleRect.width;
+    layoutInfo.rect.width = this.virtualizer!.visibleRect.width;
     layoutInfo.isSticky = true;
     return layoutNode;
   }
@@ -224,7 +224,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
     layoutInfo.allowOverflow = true;
     // If loading or empty, we'll want the body to be sticky and centered
     if (children?.length === 0) {
-      layoutInfo.rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
+      layoutInfo.rect = new Rect(40, 40, this.virtualizer!.visibleRect.width - 80, this.virtualizer!.visibleRect.height - 80);
       layoutInfo.isSticky = true;
     }
 
diff --git a/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts b/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts
index 1a87722b44b..69c0daaac14 100644
--- a/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts
+++ b/packages/@react-spectrum/s2/src/useSpectrumContextProps.ts
@@ -19,7 +19,6 @@ import {RefObject} from '@react-types/shared';
 
 export function useSpectrumContextProps<T, U extends SlotProps, E>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {
   let ctx = useSlottedContext(context, props.slot) || {};
-  // @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
   let {ref: contextRef, ...contextProps} = ctx as any;
   let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));
   let mergedProps = mergeProps(contextProps, props) as unknown as T;
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index eec5f20d5b0..347120e82b3 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -311,7 +311,6 @@ let gridTrack = (value: GridTrack) => {
 };
 
 let gridTrackSize = (value: GridTrackSize) => {
-  // @ts-ignore
   return value in baseSpacing ? baseSpacing[value] : value;
 };
 
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index cc311db6d8a..d7cde4447f8 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -32,7 +32,6 @@ export function createMappedProperty<T extends CSSValue>(fn: (value: string, pro
       return {default: [fn(v[0], property), v[1]]};
     }
 
-    // @ts-ignore
     let val = Array.isArray(values) ? value : values[String(value)];
     return mapConditionalValue(val, value => {
       return [fn(value, property), valueMap.get(value)!];
@@ -78,7 +77,6 @@ export function createColorProperty<C extends string>(colors: PropertyValueMap<C
     }
 
     let [color, opacity] = value.split('/');
-    // @ts-ignore
     let c = colors[color];
     return mapConditionalValue(c, value => {
       let css = opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
diff --git a/packages/@react-spectrum/slider/src/Slider.tsx b/packages/@react-spectrum/slider/src/Slider.tsx
index 7c16db71ebb..6edcd71bd39 100644
--- a/packages/@react-spectrum/slider/src/Slider.tsx
+++ b/packages/@react-spectrum/slider/src/Slider.tsx
@@ -13,7 +13,7 @@
 import {clamp} from '@react-aria/utils';
 import {classNames} from '@react-spectrum/utils';
 import {FocusableRef} from '@react-types/shared';
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';
 import {SliderThumb} from './SliderThumb';
 import {SpectrumSliderProps} from '@react-types/slider';
@@ -80,7 +80,7 @@ function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
             }} />
         );
 
-        let filledTrack = null;
+        let filledTrack: ReactNode = null;
         if (isFilled && fillOffset != null) {
           let width = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
           let isRightOfOffset = width > 0;
diff --git a/packages/@react-spectrum/slider/src/SliderBase.tsx b/packages/@react-spectrum/slider/src/SliderBase.tsx
index 824a66fbcbd..f5264a3c2e7 100644
--- a/packages/@react-spectrum/slider/src/SliderBase.tsx
+++ b/packages/@react-spectrum/slider/src/SliderBase.tsx
@@ -57,12 +57,10 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
       if (!('signDisplay' in formatOptions)) {
         formatOptions = {
           ...formatOptions,
-          // @ts-ignore
           signDisplay: 'exceptZero'
         };
       }
     } else {
-      // @ts-ignore
       formatOptions = {signDisplay: 'exceptZero'};
     }
   }
@@ -74,7 +72,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
     minValue,
     maxValue
   });
-  let trackRef = useRef(undefined);
+  let trackRef = useRef<HTMLDivElement | null>(null);
   let {
     groupProps,
     trackProps,
@@ -82,11 +80,11 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
     outputProps
   } = useSlider(props, state, trackRef);
 
-  let inputRef = useRef(undefined);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let domRef = useFocusableRef(ref, inputRef);
 
   let displayValue = '';
-  let maxLabelLength = undefined;
+  let maxLabelLength: number | null = null;
 
   if (typeof getValueLabel === 'function') {
     displayValue = getValueLabel(state.values);
@@ -142,7 +140,7 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
     <output
       {...outputProps}
       className={classNames(styles, 'spectrum-Slider-value')}
-      style={maxLabelLength && {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`}}>
+      style={maxLabelLength != null ? {width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`} : undefined}>
       {displayValue}
     </output>
   );
diff --git a/packages/@react-spectrum/slider/src/SliderThumb.tsx b/packages/@react-spectrum/slider/src/SliderThumb.tsx
index 8c2a8b0df17..52d5aa746f7 100644
--- a/packages/@react-spectrum/slider/src/SliderThumb.tsx
+++ b/packages/@react-spectrum/slider/src/SliderThumb.tsx
@@ -33,7 +33,7 @@ export function SliderThumb(props: SliderThumbProps) {
     inputRef,
     state
   } = props;
-  let backupRef = useRef<HTMLInputElement>(undefined);
+  let backupRef = useRef<HTMLInputElement | null>(null);
   inputRef = inputRef || backupRef;
 
   let {thumbProps, inputProps, isDragging, isFocused} = useSliderThumb({
diff --git a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
index 6d7b9576a1f..a54e782f35f 100644
--- a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
@@ -77,7 +77,7 @@ FormatOptionsPercent.story = {
   name: 'formatOptions percent'
 };
 
-export const FormatOptionsCentimeter = (args) => // @ts-ignore TODO why is "unit" even missing? How well is it supported?
+export const FormatOptionsCentimeter = (args) =>
   render({...args, maxValue: 1000, formatOptions: {style: 'unit', unit: 'centimeter'}});
 
 FormatOptionsCentimeter.story = {
diff --git a/packages/@react-spectrum/slider/stories/Slider.stories.tsx b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
index cde0944b306..2cef002818e 100644
--- a/packages/@react-spectrum/slider/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
@@ -95,7 +95,7 @@ FormatOptionsPercent.story = {
   name: 'formatOptions percent'
 };
 
-export const FormatOptionsCentimeter = (args) => // @ts-ignore TODO why is "unit" even missing? How well is it supported?
+export const FormatOptionsCentimeter = (args) =>
   render({...args, maxValue: 1000, formatOptions: {style: 'unit', unit: 'centimeter'}});
 
 FormatOptionsCentimeter.story = {
diff --git a/packages/@react-spectrum/slider/test/RangeSlider.test.tsx b/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
index 0df0c401dde..95c7096ba0a 100644
--- a/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
+++ b/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
@@ -39,7 +39,7 @@ describe('RangeSlider', function () {
     let {getAllByRole, getByRole} = render(<RangeSlider label="The Label" />);
 
     let group = getByRole('group');
-    let labelId = group.getAttribute('aria-labelledby');
+    let labelId = group.getAttribute('aria-labelledby')!;
     let [leftSlider, rightSlider] = getAllByRole('slider');
     expect(leftSlider.getAttribute('aria-label')).toBe('Minimum');
     expect(rightSlider.getAttribute('aria-label')).toBe('Maximum');
@@ -131,7 +131,7 @@ describe('RangeSlider', function () {
   });
 
   it('can be controlled', function () {
-    let setValues = [];
+    let setValues: any[] = [];
 
     function Test() {
       let [value, _setValue] = useState({start: 20, end: 40});
@@ -327,12 +327,15 @@ describe('RangeSlider', function () {
 
   describe('mouse interactions', () => {
     beforeAll(() => {
-      // @ts-ignore
-      jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({top: 0, left: 0, width: 100, height: 100}));
+      let originalGetBoundingClientRect = window.HTMLElement.prototype.getBoundingClientRect;
+      jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+        let rect = originalGetBoundingClientRect.call(this);
+        return {...rect, top: 0, left: 0, width: 100, height: 100};
+      });
     });
 
+    let oldMouseEvent = MouseEvent;
     beforeAll(() => {
-      let oldMouseEvent = MouseEvent;
       // @ts-ignore
       global.MouseEvent = class FakeMouseEvent extends MouseEvent {
         _init: {pageX: number, pageY: number};
@@ -347,12 +350,9 @@ describe('RangeSlider', function () {
           return this._init.pageY;
         }
       };
-      // @ts-ignore
-      global.MouseEvent.oldMouseEvent = oldMouseEvent;
     });
     afterAll(() => {
-      // @ts-ignore
-      global.MouseEvent = global.MouseEvent.oldMouseEvent;
+      global.MouseEvent = oldMouseEvent;
     });
 
     it('can click and drag handle', () => {
@@ -365,7 +365,7 @@ describe('RangeSlider', function () {
       );
 
       let [sliderLeft, sliderRight] = getAllByRole('slider');
-      let [thumbLeft, thumbRight] = [sliderLeft.parentElement.parentElement, sliderRight.parentElement.parentElement];
+      let [thumbLeft, thumbRight] = [sliderLeft.parentElement!.parentElement!, sliderRight.parentElement!.parentElement!];
 
       fireEvent.mouseDown(thumbLeft, {clientX: 20, pageX: 20});
       expect(onChangeSpy).not.toHaveBeenCalled();
@@ -411,7 +411,7 @@ describe('RangeSlider', function () {
       );
 
       let [sliderLeft, sliderRight] = getAllByRole('slider');
-      let [thumbLeft, thumbRight] = [sliderLeft.parentElement.parentElement, sliderRight.parentElement.parentElement];
+      let [thumbLeft, thumbRight] = [sliderLeft.parentElement!.parentElement!, sliderRight.parentElement!.parentElement!];
 
       fireEvent.mouseDown(thumbLeft, {clientX: 20, pageX: 20});
       expect(onChangeSpy).not.toHaveBeenCalled();
@@ -450,10 +450,9 @@ describe('RangeSlider', function () {
       );
 
       let [sliderLeft, sliderRight] = getAllByRole('slider');
-      let [thumbLeft, thumbRight] = [sliderLeft.parentElement.parentElement, sliderRight.parentElement.parentElement];
+      let [thumbLeft, thumbRight] = [sliderLeft.parentElement!.parentElement!, sliderRight.parentElement!.parentElement!];
 
-      // @ts-ignore
-      let [leftTrack, middleTrack, rightTrack] = [...thumbLeft.parentElement.children].filter(c => c !== thumbLeft && c !== thumbRight);
+      let [leftTrack, middleTrack, rightTrack] = [...thumbLeft.parentElement!.children].filter(c => c !== thumbLeft && c !== thumbRight);
 
       // left track
       fireEvent.mouseDown(leftTrack, {clientX: 20, pageX: 20});
@@ -502,10 +501,9 @@ describe('RangeSlider', function () {
       );
 
       let [sliderLeft, sliderRight] = getAllByRole('slider');
-      let [thumbLeft, thumbRight] = [sliderLeft.parentElement.parentElement, sliderRight.parentElement.parentElement];
+      let [thumbLeft, thumbRight] = [sliderLeft.parentElement!.parentElement!, sliderRight.parentElement!.parentElement!];
 
-      // @ts-ignore
-      let [leftTrack, middleTrack, rightTrack] = [...thumbLeft.parentElement.children].filter(c => c !== thumbLeft && c !== thumbRight);
+      let [leftTrack, middleTrack, rightTrack] = [...thumbLeft.parentElement!.children].filter(c => c !== thumbLeft && c !== thumbRight);
 
       // left track
       fireEvent.mouseDown(leftTrack, {clientX: 20, pageX: 20});
diff --git a/packages/@react-spectrum/slider/test/Slider.test.tsx b/packages/@react-spectrum/slider/test/Slider.test.tsx
index a64f6d50b35..c5bcba26e04 100644
--- a/packages/@react-spectrum/slider/test/Slider.test.tsx
+++ b/packages/@react-spectrum/slider/test/Slider.test.tsx
@@ -41,7 +41,7 @@ describe('Slider', function () {
     let {getByRole} = render(<Slider label="The Label" />);
 
     let group = getByRole('group');
-    let labelId = group.getAttribute('aria-labelledby');
+    let labelId = group.getAttribute('aria-labelledby')!;
     let slider = getByRole('slider');
     expect(slider.getAttribute('aria-labelledby')).toBe(labelId);
     expect(slider).toHaveAttribute('aria-valuetext', '0');
@@ -145,7 +145,7 @@ describe('Slider', function () {
   });
 
   it('can be controlled', function () {
-    let setValues = [];
+    let setValues: any[] = [];
 
     function Test() {
       let [value, _setValue] = useState(50);
@@ -393,8 +393,11 @@ describe('Slider', function () {
 
   describe('mouse interactions', () => {
     beforeAll(() => {
-      // @ts-ignore
-      jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({top: 0, left: 0, width: 100, height: 100}));
+      let originalGetBoundingClientRect = window.HTMLElement.prototype.getBoundingClientRect;
+      jest.spyOn(window.HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+        let rect = originalGetBoundingClientRect.call(this);
+        return {...rect, top: 0, left: 0, width: 100, height: 100};
+      });
     });
 
     installMouseEvent();
@@ -409,7 +412,7 @@ describe('Slider', function () {
       );
 
       let slider = getByRole('slider');
-      let thumb = slider.parentElement;
+      let thumb = slider.parentElement!;
       fireEvent.mouseDown(thumb, {clientX: 50, pageX: 50});
       expect(onChangeSpy).not.toHaveBeenCalled();
       expect(document.activeElement).toBe(slider);
@@ -438,7 +441,7 @@ describe('Slider', function () {
       );
 
       let slider = getByRole('slider');
-      let thumb = slider.parentElement;
+      let thumb = slider.parentElement!;
       fireEvent.mouseDown(thumb, {clientX: 50, pageX: 50});
       expect(onChangeSpy).not.toHaveBeenCalled();
       expect(document.activeElement).not.toBe(slider);
@@ -458,9 +461,8 @@ describe('Slider', function () {
       );
 
       let slider = getByRole('slider');
-      let thumb = slider.parentElement.parentElement;
-      // @ts-ignore
-      let [leftTrack, rightTrack] = [...thumb.parentElement.children].filter(c => c !== thumb);
+      let thumb = slider.parentElement!.parentElement!;
+      let [leftTrack, rightTrack] = [...thumb.parentElement!.children].filter(c => c !== thumb);
 
       // left track
       fireEvent.mouseDown(leftTrack, {clientX: 20, pageX: 20});
@@ -491,9 +493,8 @@ describe('Slider', function () {
       );
 
       let slider = getByRole('slider');
-      let thumb = slider.parentElement.parentElement;
-      // @ts-ignore
-      let [leftTrack, rightTrack] = [...thumb.parentElement.children].filter(c => c !== thumb);
+      let thumb = slider.parentElement!.parentElement!;
+      let [leftTrack, rightTrack] = [...thumb.parentElement!.children].filter(c => c !== thumb);
 
       // left track
       fireEvent.mouseDown(leftTrack, {clientX: 20, pageX: 20});
@@ -540,9 +541,8 @@ describe('Slider', function () {
       );
 
       let slider = getByRole('slider');
-      let thumb = slider.parentElement.parentElement;
-      // @ts-ignore
-      let [, rightTrack] = [...thumb.parentElement.children].filter(c => c !== thumb);
+      let thumb = slider.parentElement!.parentElement!;
+      let [, rightTrack] = [...thumb.parentElement!.children].filter(c => c !== thumb);
 
       fireEvent.touchStart(thumb, {changedTouches: [{identifier: 1, clientX: 50, pageX: 50}]});
       expect(onChangeSpy).toHaveBeenCalledTimes(0);
diff --git a/packages/@react-spectrum/style-macro-s1/src/spectrum-theme.ts b/packages/@react-spectrum/style-macro-s1/src/spectrum-theme.ts
index ff5dccdee28..dee532d6564 100644
--- a/packages/@react-spectrum/style-macro-s1/src/spectrum-theme.ts
+++ b/packages/@react-spectrum/style-macro-s1/src/spectrum-theme.ts
@@ -404,7 +404,6 @@ let gridTrack = (value: GridTrack) => {
 };
 
 let gridTrackSize = (value: GridTrackSize) => {
-  // @ts-ignore
   return value in baseSpacing ? baseSpacing[value] : value;
 };
 
diff --git a/packages/@react-spectrum/style-macro-s1/src/style-macro.ts b/packages/@react-spectrum/style-macro-s1/src/style-macro.ts
index d72252cf335..85d6c7d8fbe 100644
--- a/packages/@react-spectrum/style-macro-s1/src/style-macro.ts
+++ b/packages/@react-spectrum/style-macro-s1/src/style-macro.ts
@@ -30,7 +30,6 @@ export function createMappedProperty<T extends CSSValue>(fn: (value: string, pro
       return {default: [fn(v[0], property), v[1]]};
     }
 
-    // @ts-ignore
     let val = Array.isArray(values) ? value : values[String(value)];
     return mapConditionalValue(val, value => {
       return [fn(value, property), valueMap.get(value)!];
@@ -48,7 +47,6 @@ export function createColorProperty<C extends string>(colors: PropertyValueMap<C
     }
 
     let [color, opacity] = value.split('/');
-    // @ts-ignore
     let c = colors[color];
     return mapConditionalValue(c, value => {
       let css = opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
diff --git a/packages/@react-spectrum/table/src/InsertionIndicator.tsx b/packages/@react-spectrum/table/src/InsertionIndicator.tsx
index e68a8d9ba98..39e40d5e271 100644
--- a/packages/@react-spectrum/table/src/InsertionIndicator.tsx
+++ b/packages/@react-spectrum/table/src/InsertionIndicator.tsx
@@ -26,11 +26,11 @@ export function InsertionIndicator(props: InsertionIndicatorProps) {
   let {dropState, dragAndDropHooks} = useTableContext();
   const {target, rowProps} = props;
 
-  let ref = useRef(undefined);
-  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator(props, dropState, ref);
+  let ref = useRef<HTMLDivElement | null>(null);
+  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);
   let {visuallyHiddenProps} = useVisuallyHidden();
 
-  let isDropTarget = dropState.isDropTarget(target);
+  let isDropTarget = dropState!.isDropTarget(target);
 
   if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
     return null;
@@ -40,8 +40,8 @@ export function InsertionIndicator(props: InsertionIndicatorProps) {
     <div
       style={{
         position: 'absolute',
-        top: rowProps.style.top as number + (target.dropPosition === 'after' ? rowProps.style.height as number : 0),
-        width: rowProps.style.width
+        top: typeof rowProps.style?.top === 'number' && typeof rowProps.style?.height === 'number' ? rowProps.style.top + (target.dropPosition === 'after' ? rowProps.style.height : 0) : 0,
+        width: rowProps.style?.width
       }}
       role="row"
       aria-hidden={dropIndicatorProps['aria-hidden']}>
diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx
index 3bc619cf97b..6b7c2dbd737 100644
--- a/packages/@react-spectrum/table/src/Resizer.tsx
+++ b/packages/@react-spectrum/table/src/Resizer.tsx
@@ -7,9 +7,9 @@ import {FocusRing} from '@react-aria/focus';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {isWebKit, mergeProps} from '@react-aria/utils';
+import {isWebKit, mergeProps, useObjectRef} from '@react-aria/utils';
 import {Key, RefObject} from '@react-types/shared';
-import React, {createContext, useContext, useEffect, useState} from 'react';
+import React, {createContext, ForwardedRef, useContext, useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
 import {TableColumnResizeState} from '@react-stately/table';
@@ -35,9 +35,9 @@ interface ResizerProps<T> {
   column: GridNode<T>,
   showResizer: boolean,
   triggerRef: RefObject<HTMLDivElement | null>,
-  onResizeStart: (widths: Map<Key, ColumnSize>) => void,
-  onResize: (widths: Map<Key, ColumnSize>) => void,
-  onResizeEnd: (widths: Map<Key, ColumnSize>) => void
+  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,
+  onResize?: (widths: Map<Key, ColumnSize>) => void,
+  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
 }
 
 const CURSORS = {
@@ -48,8 +48,9 @@ const CURSORS = {
 
 export const ResizeStateContext = createContext<TableColumnResizeState<unknown> | null>(null);
 
-function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement | null>) {
+function Resizer<T>(props: ResizerProps<T>, ref: ForwardedRef<HTMLInputElement | null>) {
   let {column, showResizer} = props;
+  let objectRef = useObjectRef(ref);
   let {isEmpty, onFocusedResizer} = useTableContext();
   let layout = useContext(ResizeStateContext)!;
   // Virtualizer re-renders, but these components are all cached
@@ -83,7 +84,7 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement | nu
     mergeProps(props, {
       'aria-label': stringFormatter.format('columnResizer'),
       isDisabled: isEmpty
-    }), layout, ref);
+    }), layout, objectRef);
 
   let isEResizable = layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key);
   let isWResizable = layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key);
@@ -113,7 +114,7 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement | nu
           style={style}
           className={classNames(styles, 'spectrum-Table-columnResizer')}>
           <input
-            ref={ref}
+            ref={objectRef}
             {...mergeProps(inputProps, {onFocus: onFocusedResizer})} />
         </div>
       </FocusRing>
diff --git a/packages/@react-spectrum/table/src/RootDropIndicator.tsx b/packages/@react-spectrum/table/src/RootDropIndicator.tsx
index 71eef9c056e..6c626999f0c 100644
--- a/packages/@react-spectrum/table/src/RootDropIndicator.tsx
+++ b/packages/@react-spectrum/table/src/RootDropIndicator.tsx
@@ -16,11 +16,11 @@ import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export function RootDropIndicator() {
   let {dropState, dragAndDropHooks, state} = useTableContext();
-  let ref = useRef(undefined);
-  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator({
+  let ref = useRef<HTMLDivElement | null>(null);
+  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({
     target: {type: 'root'}
-  }, dropState, ref);
-  let isDropTarget = dropState.isDropTarget({type: 'root'});
+  }, dropState!, ref);
+  let isDropTarget = dropState!.isDropTarget({type: 'root'});
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
diff --git a/packages/@react-spectrum/table/src/TableViewBase.tsx b/packages/@react-spectrum/table/src/TableViewBase.tsx
index 93babd7e1af..e788248cc5a 100644
--- a/packages/@react-spectrum/table/src/TableViewBase.tsx
+++ b/packages/@react-spectrum/table/src/TableViewBase.tsx
@@ -26,9 +26,9 @@ import {ColumnSize, SpectrumColumnProps, TableCollection} from '@react-types/tab
 import {DOMRef, DropTarget, FocusableElement, FocusableRef, Key, RefObject} from '@react-types/shared';
 import type {DragAndDropHooks} from '@react-spectrum/dnd';
 import type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd';
-import type {DraggableItemResult, DropIndicatorAria, DroppableCollectionResult, DroppableItemResult} from '@react-aria/dnd';
+import type {DraggableItemResult, DropIndicatorAria, DroppableCollectionResult} from '@react-aria/dnd';
 import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus';
-import {getInteractionModality, isFocusVisible, useHover, usePress} from '@react-aria/interactions';
+import {getInteractionModality, HoverProps, isFocusVisible, useHover, usePress} from '@react-aria/interactions';
 import {GridNode} from '@react-types/grid';
 import {InsertionIndicator} from './InsertionIndicator';
 // @ts-ignore
@@ -108,9 +108,9 @@ const LEVEL_OFFSET_WIDTH = {
 
 export interface TableContextValue<T> {
   state: TableState<T> | TreeGridState<T>,
-  dragState: DraggableCollectionState,
-  dropState: DroppableCollectionState,
-  dragAndDropHooks: DragAndDropHooks['dragAndDropHooks'],
+  dragState: DraggableCollectionState | null,
+  dropState: DroppableCollectionState | null,
+  dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks'],
   isTableDraggable: boolean,
   isTableDroppable: boolean,
   layout: TableViewLayout<T>,
@@ -119,20 +119,20 @@ export interface TableContextValue<T> {
   setIsInResizeMode: (val: boolean) => void,
   isEmpty: boolean,
   onFocusedResizer: () => void,
-  onResizeStart: (widths: Map<Key, ColumnSize>) => void,
-  onResize: (widths: Map<Key, ColumnSize>) => void,
-  onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
+  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,
+  onResize?: (widths: Map<Key, ColumnSize>) => void,
+  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void,
   headerMenuOpen: boolean,
   setHeaderMenuOpen: (val: boolean) => void,
   renderEmptyState?: () => ReactElement
 }
 
-export const TableContext = React.createContext<TableContextValue<unknown>>(null);
+export const TableContext = React.createContext<TableContextValue<unknown> | null>(null);
 export function useTableContext() {
-  return useContext(TableContext);
+  return useContext(TableContext)!;
 }
 
-export const VirtualizerContext = React.createContext(null);
+export const VirtualizerContext = React.createContext<{width: number, key: Key | null} | null>(null);
 export function useVirtualizerContext() {
   return useContext(VirtualizerContext);
 }
@@ -181,51 +181,51 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
   let [, setIsResizing] = useState(false);
 
   let domRef = useDOMRef(ref);
-  let headerRef = useRef<HTMLDivElement>(undefined);
-  let bodyRef = useRef<HTMLDivElement>(undefined);
+  let headerRef = useRef<HTMLDivElement | null>(null);
+  let bodyRef = useRef<HTMLDivElement | null>(null);
 
   let density = props.density || 'regular';
-  let layout = useMemo(() => new TableViewLayout({
+  let layout = useMemo(() => new TableViewLayout<T>({
     // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
     rowHeight: props.overflowMode === 'wrap'
-      ? null
+      ? undefined
       : ROW_HEIGHTS[density][scale],
     estimatedRowHeight: props.overflowMode === 'wrap'
       ? ROW_HEIGHTS[density][scale]
-      : null,
+      : undefined,
     headingHeight: props.overflowMode === 'wrap'
-      ? null
+      ? undefined
       : DEFAULT_HEADER_HEIGHT[scale],
     estimatedHeadingHeight: props.overflowMode === 'wrap'
       ? DEFAULT_HEADER_HEIGHT[scale]
-      : null
+      : undefined
   }),
     // don't recompute when state.collection changes, only used for initial value
-     
+
     [props.overflowMode, scale, density]
   );
 
-  let dragState: DraggableCollectionState;
+  let dragState: DraggableCollectionState | null = null;
   let preview = useRef(null);
-  if (isTableDraggable) {
-    dragState = dragAndDropHooks.useDraggableCollectionState({
+  if (isTableDraggable && dragAndDropHooks) {
+    dragState = dragAndDropHooks.useDraggableCollectionState!({
       collection: state.collection,
       selectionManager: state.selectionManager,
       preview
     });
-    dragAndDropHooks.useDraggableCollection({}, dragState, domRef);
+    dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);
   }
 
   let DragPreview = dragAndDropHooks?.DragPreview;
-  let dropState: DroppableCollectionState;
-  let droppableCollection: DroppableCollectionResult;
-  let isRootDropTarget: boolean;
-  if (isTableDroppable) {
-    dropState = dragAndDropHooks.useDroppableCollectionState({
+  let dropState: DroppableCollectionState | null = null;
+  let droppableCollection: DroppableCollectionResult | null = null;
+  let isRootDropTarget = false;
+  if (isTableDroppable && dragAndDropHooks) {
+    dropState = dragAndDropHooks.useDroppableCollectionState!({
       collection: state.collection,
       selectionManager: state.selectionManager
     });
-    droppableCollection = dragAndDropHooks.useDroppableCollection({
+    droppableCollection = dragAndDropHooks.useDroppableCollection!({
       keyboardDelegate: new ListKeyboardDelegate({
         collection: state.collection,
         disabledKeys: state.selectionManager.disabledKeys,
@@ -249,13 +249,13 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
   let [headerRowHovered, setHeaderRowHovered] = useState(false);
 
   // This overrides collection view's renderWrapper to support DOM hierarchy.
-  let renderWrapper = useCallback((parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
+  let renderWrapper = useCallback((parent: View | null, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]): ReactElement => {
     if (reusableView.viewType === 'rowgroup') {
       return (
         <TableRowGroup
           key={reusableView.key}
-          layoutInfo={reusableView.layoutInfo}
-          parent={parent?.layoutInfo}
+          layoutInfo={reusableView.layoutInfo!}
+          parent={parent?.layoutInfo ?? null}
           // Override the default role="rowgroup" with role="presentation",
           // in favor or adding role="rowgroup" to the ScrollView with
           // ref={bodyRef} in the TableVirtualizer below.
@@ -269,8 +269,8 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
       return (
         <TableHeader
           key={reusableView.key}
-          layoutInfo={reusableView.layoutInfo}
-          parent={parent?.layoutInfo}>
+          layoutInfo={reusableView.layoutInfo!}
+          parent={parent?.layoutInfo ?? null}>
           {renderChildren(children)}
         </TableHeader>
       );
@@ -280,9 +280,9 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
       return (
         <TableRow
           key={reusableView.key}
-          item={reusableView.content}
-          layoutInfo={reusableView.layoutInfo}
-          parent={parent?.layoutInfo}>
+          item={reusableView.content!}
+          layoutInfo={reusableView.layoutInfo!}
+          parent={parent?.layoutInfo ?? null}>
           {renderChildren(children)}
         </TableRow>
       );
@@ -293,9 +293,9 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
         <TableHeaderRow
           onHoverChange={setHeaderRowHovered}
           key={reusableView.key}
-          layoutInfo={reusableView.layoutInfo}
-          parent={parent?.layoutInfo}
-          item={reusableView.content}>
+          layoutInfo={reusableView.layoutInfo!}
+          parent={parent?.layoutInfo ?? null}
+          item={reusableView.content!}>
           {renderChildren(children)}
         </TableHeaderRow>
       );
@@ -304,9 +304,9 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
     return (
       <TableCellWrapper
         key={reusableView.key}
-        layoutInfo={reusableView.layoutInfo}
+        layoutInfo={reusableView.layoutInfo!}
         virtualizer={reusableView.virtualizer}
-        parent={parent}>
+        parent={parent!}>
         {reusableView.rendered}
       </TableCellWrapper>
     );
@@ -337,7 +337,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
           <div
             role="gridcell"
             aria-colindex={item.index + 1}
-            aria-colspan={item.colspan > 1 ? item.colspan : null} />
+            aria-colspan={item.colspan != null && item.colspan > 1 ? item.colspan : undefined} />
         );
       case 'column':
         if (item.props.isSelectionCell) {
@@ -371,6 +371,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
         return <EmptyState />;
       }
     }
+    return null;
   }, []);
 
   let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);
@@ -390,7 +391,9 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
   let isEmpty = state.collection.size === 0;
 
   let onFocusedResizer = () => {
-    bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+    if (bodyRef.current && headerRef.current) {
+      bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+    }
   };
 
   let onResizeStart = useCallback((widths) => {
@@ -419,12 +422,15 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
   }, [focusedKey, dropTargetKey]);
 
   let mergedProps = mergeProps(
-    isTableDroppable && droppableCollection?.collectionProps,
+    isTableDroppable ? droppableCollection?.collectionProps : null,
     gridProps,
-    focusProps,
-    dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}
+    focusProps
   );
 
+  if (dragAndDropHooks?.isVirtualDragging?.()) {
+    mergedProps.tabIndex = undefined;
+  }
+
   return (
     <TableContext.Provider
       value={{
@@ -480,18 +486,21 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
         headerRef={headerRef}
         bodyRef={bodyRef}
         isFocusVisible={isFocusVisible}
-        isVirtualDragging={dragAndDropHooks?.isVirtualDragging()}
+        isVirtualDragging={dragAndDropHooks?.isVirtualDragging?.() || false}
         isRootDropTarget={isRootDropTarget} />
-      {DragPreview && isTableDraggable &&
+      {DragPreview && isTableDraggable && dragAndDropHooks && dragState &&
         <DragPreview ref={preview}>
           {() => {
+            if (dragState.draggedKey == null) {
+              return null;
+            }
             if (dragAndDropHooks.renderPreview) {
               return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
             }
             let itemCount = dragState.draggingKeys.size;
-            let maxWidth = bodyRef.current.getBoundingClientRect().width;
+            let maxWidth = bodyRef.current!.getBoundingClientRect().width;
             let height = ROW_HEIGHTS[density][scale];
-            let itemText = state.collection.getTextValue(dragState.draggedKey);
+            let itemText = state.collection.getTextValue!(dragState.draggedKey);
             return <SpectrumDragPreview itemText={itemText} itemCount={itemCount} height={height} maxWidth={maxWidth} />;
           }}
         </DragPreview>
@@ -505,16 +514,16 @@ interface TableVirtualizerProps<T> extends HTMLAttributes<HTMLElement> {
   layout: TableViewLayout<T>,
   collection: TableCollection<T>,
   persistedKeys: Set<Key> | null,
-  renderView: (type: string, content: GridNode<T>) => ReactElement,
-  renderWrapper?: (
+  renderView: (type: string, content: GridNode<T>) => ReactElement | null,
+  renderWrapper: (
     parent: View | null,
     reusableView: View,
     children: View[],
     renderChildren: (views: View[]) => ReactElement[]
-  ) => ReactElement,
-  domRef: RefObject<HTMLDivElement>,
-  bodyRef: RefObject<HTMLDivElement>,
-  headerRef: RefObject<HTMLDivElement>,
+  ) => ReactElement | null,
+  domRef: RefObject<HTMLDivElement | null>,
+  bodyRef: RefObject<HTMLDivElement | null>,
+  headerRef: RefObject<HTMLDivElement | null>,
   onVisibleRectChange: (rect: Rect) => void,
   isFocusVisible: boolean,
   isVirtualDragging: boolean,
@@ -565,8 +574,10 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
     collection,
     renderView,
     onVisibleRectChange(rect) {
-      bodyRef.current.scrollTop = rect.y;
-      setScrollLeft(bodyRef.current, direction, rect.x);
+      if (bodyRef.current) {
+        bodyRef.current.scrollTop = rect.y;
+        setScrollLeft(bodyRef.current, direction, rect.x);
+      }
     },
     persistedKeys,
     layoutOptions: useMemo(() => ({
@@ -589,7 +600,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
   // only that it changes in a resize, and when that happens, we want to sync the body to the
   // header scroll position
   useEffect(() => {
-    if (getInteractionModality() === 'keyboard' && headerRef.current.contains(document.activeElement)) {
+    if (getInteractionModality() === 'keyboard' && headerRef.current?.contains(document.activeElement) && bodyRef.current) {
       scrollIntoView(headerRef.current, document.activeElement as HTMLElement);
       scrollIntoViewport(document.activeElement, {containingElement: domRef.current});
       bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
@@ -600,10 +611,12 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
 
   // Sync the scroll position from the table body to the header container.
   let onScroll = useCallback(() => {
-    headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+    if (headerRef.current && bodyRef.current) {
+      headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
+    }
   }, [bodyRef, headerRef]);
 
-  let resizerPosition = columnResizeState.resizingColumn != null ? layout.getLayoutInfo(columnResizeState.resizingColumn).rect.maxX - 2 : 0;
+  let resizerPosition = columnResizeState.resizingColumn != null ? layout.getLayoutInfo(columnResizeState.resizingColumn)!.rect.maxX - 2 : 0;
 
   let resizerAtEdge = resizerPosition > Math.max(state.virtualizer.contentSize.width, state.virtualizer.visibleRect.width) - 3;
   // this should be fine, every movement of the resizer causes a rerender
@@ -617,10 +630,10 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
     width: resizingColumnWidth,
     key: columnResizeState.resizingColumn
   }), [resizingColumnWidth, columnResizeState.resizingColumn]);
-  let mergedProps = mergeProps(
-    otherProps,
-    isVirtualDragging && {tabIndex: null}
-  );
+
+  if (isVirtualDragging) {
+    otherProps.tabIndex = undefined;
+  }
 
   let firstColumn = collection.columns[0];
   let scrollPadding = 0;
@@ -634,7 +647,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
     <VirtualizerContext.Provider value={resizingColumn}>
       <FocusScope>
         <div
-          {...mergedProps}
+          {...otherProps}
           ref={domRef}>
           <div
             role="presentation"
@@ -674,7 +687,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
             //  Using tabIndex={-1} prevents the ScrollView from being tabbable, and using role="rowgroup"
             //  here and role="presentation" on the table body content fixes the table structure.
             role="rowgroup"
-            tabIndex={isVirtualDragging ? null : -1}
+            tabIndex={isVirtualDragging ? undefined : -1}
             style={{
               flex: 1,
               scrollPaddingInlineStart: scrollPadding
@@ -697,7 +710,7 @@ function TableVirtualizer<T>(props: TableVirtualizerProps<T>) {
   );
 }
 
-function renderChildren<T extends object>(parent: View | null, views: View[], renderWrapper: TableVirtualizerProps<T>['renderWrapper']) {
+function renderChildren<T extends object>(parent: View | null, views: View[], renderWrapper: NonNullable<TableVirtualizerProps<T>['renderWrapper']>) {
   return views.map(view => {
     return renderWrapper(
       parent,
@@ -717,7 +730,7 @@ function useStyle(layoutInfo: LayoutInfo, parent: LayoutInfo | null) {
   return style;
 }
 
-function TableHeader({children, layoutInfo, parent, ...otherProps}) {
+function TableHeader({children, layoutInfo, parent, ...otherProps}: {children: ReactNode, layoutInfo: LayoutInfo, parent: LayoutInfo | null}) {
   let {rowGroupProps} = useTableRowGroup();
   let style = useStyle(layoutInfo, parent);
 
@@ -845,7 +858,7 @@ function ResizableTableColumnHeader(props) {
     headerMenuOpen,
     setHeaderMenuOpen
   } = useTableContext();
-  let columnResizeState = useContext(ResizeStateContext);
+  let columnResizeState = useContext(ResizeStateContext)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/table');
   let {pressProps, isPressed} = usePress({isDisabled: isEmpty});
   let {columnHeaderProps} = useTableColumnHeader({
@@ -878,20 +891,21 @@ function ResizableTableColumnHeader(props) {
   };
   let allowsSorting = column.props?.allowsSorting;
   let items = useMemo(() => {
-    let options = [
-      allowsSorting ? {
+    let options: {label: string, id: string}[] = [];
+    if (allowsSorting) {
+      options.push({
         label: stringFormatter.format('sortAscending'),
         id: 'sort-asc'
-      } : undefined,
-      allowsSorting ? {
+      });
+      options.push({
         label: stringFormatter.format('sortDescending'),
         id: 'sort-desc'
-      } : undefined,
-      {
-        label: stringFormatter.format('resizeColumn'),
-        id: 'resize'
-      }
-    ];
+      });
+    }
+    options.push({
+      label: stringFormatter.format('resizeColumn'),
+      id: 'resize'
+    });
     return options;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allowsSorting]);
@@ -992,7 +1006,7 @@ function ResizableTableColumnHeader(props) {
 }
 
 function TableSelectAllCell({column}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {state} = useTableContext();
   let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
   let {columnHeaderProps} = useTableColumnHeader({
@@ -1039,7 +1053,7 @@ function TableSelectAllCell({column}) {
 }
 
 function TableDragHeaderCell({column}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {state} = useTableContext();
   let {columnHeaderProps} = useTableColumnHeader({
     node: column,
@@ -1069,9 +1083,9 @@ function TableDragHeaderCell({column}) {
   );
 }
 
-function TableRowGroup({children, layoutInfo, parent, ...otherProps}) {
+function TableRowGroup({children, layoutInfo, parent, ...otherProps}: {children: ReactNode, layoutInfo: LayoutInfo, parent: LayoutInfo | null, role: string}) {
   let {rowGroupProps} = useTableRowGroup();
-  let {isTableDroppable} = useContext(TableContext);
+  let {isTableDroppable} = useContext(TableContext)!;
   let style = useStyle(layoutInfo, parent);
 
   return (
@@ -1108,18 +1122,18 @@ function DragButton() {
 
 interface TableRowContextValue {
   dragButtonProps: React.HTMLAttributes<HTMLDivElement>,
-  dragButtonRef: React.MutableRefObject<undefined>,
+  dragButtonRef: React.RefObject<HTMLDivElement | null>,
   isFocusVisibleWithin: boolean
 }
 
 
-const TableRowContext = React.createContext<TableRowContextValue>(null);
+const TableRowContext = React.createContext<TableRowContextValue | null>(null);
 export function useTableRowContext() {
-  return useContext(TableRowContext);
+  return useContext(TableRowContext)!;
 }
 
-function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
-  let ref = useRef(undefined);
+function TableRow({item, children, layoutInfo, parent, ...otherProps}: {item: GridNode<unknown>, children: ReactNode, layoutInfo: LayoutInfo, parent: LayoutInfo | null}) {
+  let ref = useRef<HTMLDivElement | null>(null);
   let {state, layout, dragAndDropHooks, isTableDraggable, isTableDroppable, dragState, dropState} = useTableContext();
   let isSelected = state.selectionManager.isSelected(item.key);
   let {rowProps, hasAction, allowsSelection} = useTableRow({
@@ -1130,7 +1144,6 @@ function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
 
   let isDisabled = state.selectionManager.isDisabled(item.key);
   let isInteractive = !isDisabled && (hasAction || allowsSelection || isTableDraggable);
-  let isDroppable = isTableDroppable && !isDisabled;
   let {pressProps, isPressed} = usePress({isDisabled: !isInteractive});
 
   // The row should show the focus background style when any cell inside it is focused.
@@ -1147,31 +1160,29 @@ function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
   // border corners of the last row when selected.
   let isFlushWithContainerBottom = false;
   if (isLastRow) {
-    if (layout.getContentSize()?.height >= layout.virtualizer?.visibleRect.height) {
+    if (layout.getContentSize()?.height >= (layout.virtualizer?.visibleRect.height ?? 0)) {
       isFlushWithContainerBottom = true;
     }
   }
 
-  let draggableItem: DraggableItemResult;
-  if (isTableDraggable) {
-     
-    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
+  let draggableItem: DraggableItemResult | null = null;
+  if (isTableDraggable && dragAndDropHooks && dragState) {
+    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
     if (isDisabled) {
       draggableItem = null;
     }
   }
-  let droppableItem: DroppableItemResult;
-  let isDropTarget: boolean;
-  let dropIndicator: DropIndicatorAria;
-  let dropIndicatorRef = useRef(undefined);
-  if (isTableDroppable) {
+  let isDropTarget = false;
+  let dropIndicator: DropIndicatorAria | null = null;
+  let dropIndicatorRef = useRef<HTMLDivElement | null>(null);
+  if (isTableDroppable && dragAndDropHooks && dropState) {
     let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;
     isDropTarget = dropState.isDropTarget(target);
-     
-    dropIndicator = dragAndDropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
+
+    dropIndicator = dragAndDropHooks.useDropIndicator!({target}, dropState, dropIndicatorRef);
   }
 
-  let dragButtonRef = React.useRef(undefined);
+  let dragButtonRef = React.useRef<HTMLDivElement | null>(null);
   let {buttonProps: dragButtonProps} = useButton({
     ...draggableItem?.dragButtonProps,
     elementType: 'div'
@@ -1190,10 +1201,9 @@ function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
     draggableItem?.dragProps,
     // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
     // allowing for single swipe navigation between row drop indicator
-    dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}
+    dragAndDropHooks?.isVirtualDragging?.() ? {tabIndex: null} : null
   ) as HTMLAttributes<HTMLElement> & DOMAttributes<FocusableElement>;
 
-  let dropProps = isDroppable ? droppableItem?.dropProps : {'aria-hidden': droppableItem?.dropProps['aria-hidden']};
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   return (
@@ -1212,7 +1222,7 @@ function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
         </div>
       }
       <div
-        {...mergeProps(props, dropProps)}
+        {...props}
         ref={ref}
         className={
           classNames(
@@ -1222,7 +1232,7 @@ function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
               'is-active': isPressed,
               'is-selected': isSelected,
               'spectrum-Table-row--highlightSelection': state.selectionManager.selectionBehavior === 'replace',
-              'is-next-selected': state.selectionManager.isSelected(item.nextKey),
+              'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),
               'is-focused': isFocusVisibleWithin,
               'focus-ring': isFocusVisible,
               'is-hovered': isHovered,
@@ -1250,9 +1260,9 @@ function TableRow({item, children, layoutInfo, parent, ...otherProps}) {
   );
 }
 
-function TableHeaderRow({item, children, layoutInfo, parent, ...props}) {
+function TableHeaderRow({item, children, layoutInfo, parent, ...props}: {item: GridNode<unknown>, children: ReactNode, layoutInfo: LayoutInfo, parent: LayoutInfo | null} & HoverProps) {
   let {state, headerMenuOpen} = useTableContext();
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {rowProps} = useTableHeaderRow({node: item, isVirtualized: true}, state, ref);
   let {hoverProps} = useHover({...props, isDisabled: headerMenuOpen});
   let style = useStyle(layoutInfo, parent);
@@ -1265,7 +1275,7 @@ function TableHeaderRow({item, children, layoutInfo, parent, ...props}) {
 }
 
 function TableDragCell({cell}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {state, isTableDraggable} = useTableContext();
   let isDisabled = state.selectionManager.isDisabled(cell.parentKey);
   let {gridCellProps} = useTableCell({
@@ -1300,7 +1310,7 @@ function TableDragCell({cell}) {
 }
 
 function TableCheckboxCell({cell}) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {state} = useTableContext();
   // The TableCheckbox should always render its disabled status if the row is disabled, regardless of disabledBehavior,
   // but the cell itself should not render its disabled styles if disabledBehavior="selection" because the row might have actions on it.
@@ -1348,7 +1358,7 @@ function TableCell({cell}) {
   let {scale} = useProvider();
   let {state} = useTableContext();
   let isExpandableTable = 'expandedKeys' in state;
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let columnProps = cell.column.props as SpectrumColumnProps<unknown>;
   let isDisabled = state.selectionManager.isDisabled(cell.parentKey);
   let {gridCellProps} = useTableCell({
@@ -1412,11 +1422,11 @@ function TableCell({cell}) {
   );
 }
 
-function TableCellWrapper({layoutInfo, virtualizer, parent, children}) {
-  let {isTableDroppable, dropState} = useContext(TableContext);
-  let isDropTarget: boolean;
-  let isRootDroptarget: boolean;
-  if (isTableDroppable) {
+function TableCellWrapper({layoutInfo, virtualizer, parent, children}: {layoutInfo: LayoutInfo, virtualizer: any, parent: ReusableView<any, any>, children: ReactNode}) {
+  let {isTableDroppable, dropState} = useContext(TableContext)!;
+  let isDropTarget = false;
+  let isRootDroptarget = false;
+  if (isTableDroppable && dropState) {
     if (parent.content) {
       isDropTarget = dropState.isDropTarget({type: 'item', dropPosition: 'on', key: parent.content.key});
     }
@@ -1450,7 +1460,7 @@ function ExpandableRowChevron({cell}) {
    // TODO: move some/all of the chevron button setup into a separate hook?
   let {direction} = useLocale();
   let {state} = useTableContext();
-  let expandButtonRef = useRef(undefined);
+  let expandButtonRef = useRef<HTMLSpanElement | null>(null);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/table');
   let isExpanded;
 
@@ -1493,7 +1503,7 @@ function ExpandableRowChevron({cell}) {
 }
 
 function LoadingState() {
-  let {state} = useContext(TableContext);
+  let {state} = useContext(TableContext)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/table');
   return (
     <CenteredWrapper>
@@ -1505,7 +1515,7 @@ function LoadingState() {
 }
 
 function EmptyState() {
-  let {renderEmptyState} = useContext(TableContext);
+  let {renderEmptyState} = useContext(TableContext)!;
   let emptyState = renderEmptyState ? renderEmptyState() : null;
   if (emptyState == null) {
     return null;
@@ -1523,7 +1533,7 @@ function CenteredWrapper({children}) {
   let rowProps;
 
   if ('expandedKeys' in state) {
-    let topLevelRowCount = [...state.keyMap.get(state.collection.body.key).childNodes].length;
+    let topLevelRowCount = [...state.collection.body.childNodes].length;
     rowProps = {
       'aria-level': 1,
       'aria-posinset': topLevelRowCount + 1,
diff --git a/packages/@react-spectrum/table/src/TableViewLayout.ts b/packages/@react-spectrum/table/src/TableViewLayout.ts
index 400ce240c27..a52f9359e71 100644
--- a/packages/@react-spectrum/table/src/TableViewLayout.ts
+++ b/packages/@react-spectrum/table/src/TableViewLayout.ts
@@ -13,12 +13,14 @@ import {DropTarget} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
 import {LayoutInfo, Rect} from '@react-stately/virtualizer';
 import {LayoutNode, TableLayout} from '@react-stately/layout';
+import {TableCollection} from '@react-stately/table';
 
 export class TableViewLayout<T> extends TableLayout<T> {
   private isLoading: boolean = false;
 
   protected buildCollection(): LayoutNode[] {
-    let loadingState = this.collection.body.props.loadingState;
+    let collection = this.virtualizer!.collection as TableCollection<T>;
+    let loadingState = collection.body.props.loadingState;
     this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     return super.buildCollection();
   }
@@ -32,11 +34,15 @@ export class TableViewLayout<T> extends TableLayout<T> {
   protected buildBody(): LayoutNode {
     let node = super.buildBody(0);
     let {children, layoutInfo} = node;
+    if (!children) {
+      throw new Error('Missing children in LayoutInfo');
+    }
+
     let width = node.layoutInfo.rect.width;
 
     if (this.isLoading) {
       // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-      let rect = new Rect(40, children.length === 0 ? 40 : layoutInfo.rect.maxY, (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
+      let rect = new Rect(40, children.length === 0 ? 40 : layoutInfo.rect.maxY, (width || this.virtualizer!.visibleRect.width) - 80, children.length === 0 ? this.virtualizer!.visibleRect.height - 80 : 60);
       let loader = new LayoutInfo('loader', 'loader', rect);
       loader.parentKey = layoutInfo.key;
       loader.isSticky = children.length === 0;
@@ -49,7 +55,7 @@ export class TableViewLayout<T> extends TableLayout<T> {
       layoutInfo.rect.height = loader.rect.maxY;
       width = Math.max(width, rect.width);
     } else if (children.length === 0) {
-      let rect = new Rect(40, 40, this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
+      let rect = new Rect(40, 40, this.virtualizer!.visibleRect.width - 80, this.virtualizer!.visibleRect.height - 80);
       let empty = new LayoutInfo('empty', 'empty', rect);
       empty.parentKey = layoutInfo.key;
       empty.isSticky = true;
@@ -87,9 +93,9 @@ export class TableViewLayout<T> extends TableLayout<T> {
     return node.props?.isDragButtonCell || node.props?.isSelectionCell;
   }
 
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
     // Offset for height of header row
-    y -= this.virtualizer.layout.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height;
+    y -= this.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height ?? 0;
     return super.getDropTargetFromPoint(x, y, isValidDropTarget);
   }
 }
diff --git a/packages/@react-spectrum/table/stories/CRUDExample.tsx b/packages/@react-spectrum/table/stories/CRUDExample.tsx
index 3853d860806..8fa0b32e694 100644
--- a/packages/@react-spectrum/table/stories/CRUDExample.tsx
+++ b/packages/@react-spectrum/table/stories/CRUDExample.tsx
@@ -24,6 +24,7 @@ import {Form} from '@react-spectrum/form';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
+import {Key} from '@react-types/shared';
 import More from '@spectrum-icons/workflow/More';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
 import React, {useState} from 'react';
@@ -38,7 +39,7 @@ export function CRUDExample(props) {
     ]
   });
 
-  let [dialog, setDialog] = useState(null);
+  let [dialog, setDialog] = useState<{action: Key, item?: any} | null>(null);
   let createItem = (item) => {
     list.prepend({...item, id: Date.now()});
   };
@@ -49,8 +50,9 @@ export function CRUDExample(props) {
     <Flex direction="column">
       <ActionGroup marginBottom={8} onAction={action => setDialog({action})}>
         <Item key="add" aria-label="Add item"><Add /></Item>
-        {selectedCount > 0 &&
-          <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
+        {selectedCount > 0 
+          ? <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
+          : null
         }
       </ActionGroup>
       <TableView
diff --git a/packages/@react-spectrum/table/stories/ControllingResize.tsx b/packages/@react-spectrum/table/stories/ControllingResize.tsx
index e939de4933d..0eb194beff6 100644
--- a/packages/@react-spectrum/table/stories/ControllingResize.tsx
+++ b/packages/@react-spectrum/table/stories/ControllingResize.tsx
@@ -54,7 +54,7 @@ let defaultRows: PokemonData[] = [
 
 export function ControllingResize(props: {columns?: PokemonColumn[], rows?: PokemonData[], onResize?: (sizes: Map<Key, ColumnSize>) => void, [name: string]: any}) {
   let {columns = defaultColumns, rows = defaultRows, onResize, ...otherProps} = props;
-  let [widths, _setWidths] = useState<Map<Key, ColumnSize>>(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width])));
+  let [widths, _setWidths] = useState<Map<Key, ColumnSize | null>>(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width ?? null])));
 
   let setWidths = useCallback((vals: Map<Key, ColumnSize>) => {
     let controlledKeys = new Set(columns.filter(col => col.width).map((col) => col.uid as Key));
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 8e7353b7ffb..7f87af4acc1 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -2070,13 +2070,13 @@ const allItems = [
 
 function LoadingTable() {
   const [items, setItems] = useState(allItems);
-  const [loadingState, setLoadingState] = useState(undefined);
+  const [loadingState, setLoadingState] = useState<LoadingState>('idle');
   const onSortChange = () => {
     setItems([]);
     setLoadingState('loading');
     setTimeout(() => {
       setItems(items.length > 1 ? [...items.slice(0, 1)] : []);
-      setLoadingState(undefined);
+      setLoadingState('idle');
     }, 1000);
   };
 
diff --git a/packages/@react-spectrum/table/stories/TableDnD.stories.tsx b/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
index 4ff47820ac7..19d6b27c74b 100644
--- a/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
@@ -91,7 +91,7 @@ export const DragWithinTable: TableStory = {
   name: 'Drag within table (Reorder)'
 };
 
-let manyItems = [];
+let manyItems: typeof items = [];
 for (let i = 0; i < 100; i++) {
   manyItems.push({...items[i % 10], id: `${i}`});
 }
diff --git a/packages/@react-spectrum/table/stories/TableDnDExamples.tsx b/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
index 5cf41de71b9..668ad84463a 100644
--- a/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
@@ -47,7 +47,7 @@ let getAllowedDropOperationsAction = action('getAllowedDropOperationsAction');
 export function DragExample(props?) {
   let {tableViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
-    let item = items.find(item => item.id === key);
+    let item = items.find(item => item.id === key)!;
     return {
       'text/plain': `${item.first_name} ${item.last_name}`
     };
@@ -81,7 +81,7 @@ export function DragExample(props?) {
 export function DragWithoutRowHeaderExample(props?)  {
   let {tableViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
-    let item = items.find(item => item.id === key);
+    let item = items.find(item => item.id === key)!;
     return {
       'text/plain': `${item.first_name} ${item.last_name}`
     };
@@ -149,10 +149,10 @@ export function ReorderExample(props) {
     async onDrop(e) {
       onDrop(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has(dragType)) {
               key = JSON.parse(await item.getText(dragType));
               keys.push(key);
@@ -212,15 +212,15 @@ export function DragOntoRowExample(props) {
 
   let list = useListData({
     initialItems: [
-      {id: '0', type: 'folder', name: 'Folder 1', childNodes: []},
+      {id: '0', type: 'folder', name: 'Folder 1', childNodes: [] as any[]},
       {id: '1', type: 'item', name: 'One'},
       {id: '2', type: 'item', name: 'Two'},
       {id: '3', type: 'item', name: 'Three'},
       {id: '4', type: 'item', name: 'Four'},
       {id: '5', type: 'item', name: 'Five'},
       {id: '6', type: 'item', name: 'Six'},
-      {id: '7', type: 'folder', name: 'Folder (disabled)', childNodes: []},
-      {id: '8', type: 'folder', name: 'Folder 2', childNodes: []}
+      {id: '7', type: 'folder', name: 'Folder (disabled)', childNodes: [] as any[]},
+      {id: '8', type: 'folder', name: 'Folder 2', childNodes: [] as any[]}
     ]
   });
   let disabledKeys: Key[] = ['2', '7'];
@@ -229,9 +229,9 @@ export function DragOntoRowExample(props) {
   let dragType = React.useMemo(() => `keys-${Math.random().toString(36).slice(2)}`, []);
 
   let onMove = (keys: Key[], target: ItemDropTarget) => {
-    let folderItem = list.getItem(target.key);
+    let folderItem = list.getItem(target.key)!;
     let draggedItems = keys.map((key) => list.getItem(key));
-    list.update(target.key, {...folderItem, childNodes: [...folderItem.childNodes, ...draggedItems]});
+    list.update(target.key, {...folderItem, childNodes: [...(folderItem.childNodes || []), ...draggedItems]});
     list.remove(...keys);
   };
 
@@ -254,10 +254,10 @@ export function DragOntoRowExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type !== 'root' && e.target.dropPosition === 'on') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has(dragType)) {
               key = JSON.parse(await item.getText(dragType));
               keys.push(key);
@@ -295,7 +295,7 @@ export function DragOntoRowExample(props) {
             <Cell>{item.type}</Cell>
             <Cell>{item.name}</Cell>
             <Cell>
-              {item.type === 'folder' ? `${item.childNodes.length} dropped items` : '-'}
+              {item.type === 'folder' ? `${item.childNodes?.length} dropped items` : '-'}
             </Cell>
           </Row>
         )}
@@ -386,10 +386,10 @@ export function DragBetweenTablesExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has(dragType)) {
               key = JSON.parse(await item.getText(dragType));
               keys.push(key);
@@ -494,10 +494,10 @@ export function DragBetweenTablesRootOnlyExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type === 'root') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has('list2')) {
               key = JSON.parse(await item.getText('list2'));
               keys.push(key);
@@ -540,10 +540,10 @@ export function DragBetweenTablesRootOnlyExample(props) {
     onDrop: async e => {
       onDropAction(e);
       if (e.target.type === 'root') {
-        let keys = [];
+        let keys: Key[] = [];
         for (let item of e.items) {
           if (item.kind === 'text') {
-            let key;
+            let key: Key;
             if (item.types.has('list1')) {
               key = JSON.parse(await item.getText('list1'));
               keys.push(key);
diff --git a/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx b/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
index 2dfc13d0b85..62957cc62aa 100644
--- a/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
@@ -10,8 +10,8 @@ import {useListData} from '@react-stately/data';
 let onSelectionChange = action('onSelectionChange');
 
 let itemProcessor = async (items, acceptedDragTypes) => {
-  let processedItems = [];
-  let text;
+  let processedItems: any[] = [];
+  let text = '';
   for (let item of items) {
     for (let type of acceptedDragTypes) {
       if (item.kind === 'text' && item.types.has(type)) {
@@ -33,16 +33,16 @@ let itemProcessor = async (items, acceptedDragTypes) => {
 let folderList1 = [
   {identifier: '1', type: 'file', name: 'Adobe Photoshop'},
   {identifier: '2', type: 'file', name: 'Adobe XD'},
-  {identifier: '3', type: 'folder', name: 'Documents',  childNodes: []},
+  {identifier: '3', type: 'folder', name: 'Documents',  childNodes: [] as any[]},
   {identifier: '4', type: 'file', name: 'Adobe InDesign'},
-  {identifier: '5', type: 'folder', name: 'Utilities',  childNodes: []},
+  {identifier: '5', type: 'folder', name: 'Utilities',  childNodes: [] as any[]},
   {identifier: '6', type: 'file', name: 'Adobe AfterEffects'}
 ];
 
 let folderList2 = [
-  {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: []},
+  {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: [] as any[]},
   {identifier: '8', type: 'file', name: 'Adobe Fresco'},
-  {identifier: '9', type: 'folder', name: 'Apps',  childNodes: []},
+  {identifier: '9', type: 'folder', name: 'Apps',  childNodes: [] as any[]},
   {identifier: '10', type: 'file', name: 'Adobe Illustrator'},
   {identifier: '11', type: 'file', name: 'Adobe Lightroom'},
   {identifier: '12', type: 'file', name: 'Adobe Dreamweaver'},
@@ -65,7 +65,7 @@ export function DragExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list.getItem(key);
+      let item = list.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -102,7 +102,7 @@ export function ReorderExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list.getItem(key);
+      let item = list.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -116,10 +116,10 @@ export function ReorderExampleUtilHandlers(props) {
       } = e;
       action('onReorder')(e);
 
-      let itemsToCopy = [];
+      let itemsToCopy: typeof folderList1 = [];
       if (dropOperation === 'copy') {
         for (let key of keys) {
-          let item = {...list.getItem(key)};
+          let item: typeof folderList1[0] = {...list.getItem(key)!};
           item.identifier = Math.random().toString(36).slice(2);
           itemsToCopy.push(item);
         }
@@ -170,7 +170,7 @@ export function ItemDropExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list.getItem(key);
+      let item = list.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -230,7 +230,7 @@ export function RootDropExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks: table1Hooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -311,7 +311,7 @@ export function InsertExampleUtilHandlers(props) {
   let acceptedDragTypes = ['file', 'folder', 'text/plain'];
   let {dragAndDropHooks: table1Hooks} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -472,7 +472,7 @@ export function DragBetweenTablesComplex(props) {
   // table 1 should allow on item drops and external drops, but disallow reordering/internal drops
   let {dragAndDropHooks: dragAndDropHooksTable1} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       return {
         [`${item.type}`]: JSON.stringify(item),
         'text/plain': JSON.stringify(item)
@@ -507,8 +507,8 @@ export function DragBetweenTablesComplex(props) {
       } = e;
       action('onItemDropTable1')(e);
       let processedItems = await itemProcessor(items, acceptedDragTypes);
-      let targetItem = list1.getItem(target.key);
-      list1.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
+      let targetItem = list1.getItem(target.key)!;
+      list1.update(target.key, {...targetItem, childNodes: [...(targetItem.childNodes || []), ...processedItems]});
 
       if (isInternal && dropOperation === 'move') {
         // TODO test this, perhaps it would be easier to also pass the draggedKeys to onItemDrop instead?
@@ -537,7 +537,7 @@ export function DragBetweenTablesComplex(props) {
   // table 2 should allow reordering, on folder drops, and on root drops
   let {dragAndDropHooks: dragAndDropHooksTable2} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list2.getItem(key);
+      let item = list2.getItem(key)!;
       let dragItem = {};
       let itemString = JSON.stringify(item);
       dragItem[`${item.type}`] = itemString;
@@ -569,10 +569,10 @@ export function DragBetweenTablesComplex(props) {
       } = e;
       action('onReorderTable2')(e);
 
-      let itemsToCopy = [];
+      let itemsToCopy: typeof folderList1 = [];
       if (dropOperation === 'copy') {
         for (let key of keys) {
-          let item = {...list2.getItem(key)};
+          let item: typeof folderList1[0] = {...list2.getItem(key)!};
           item.identifier = Math.random().toString(36).slice(2);
           itemsToCopy.push(item);
         }
@@ -606,8 +606,8 @@ export function DragBetweenTablesComplex(props) {
       } = e;
       action('onItemDropTable2')(e);
       let processedItems = await itemProcessor(items, acceptedDragTypes);
-      let targetItem = list2.getItem(target.key);
-      list2.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
+      let targetItem = list2.getItem(target.key)!;
+      list2.update(target.key, {...targetItem, childNodes: [...(targetItem.childNodes || []), ...processedItems]});
 
       if (isInternal && dropOperation === 'move') {
         let keysToRemove = processedItems.map(item => item.identifier);
@@ -623,7 +623,7 @@ export function DragBetweenTablesComplex(props) {
       } = e;
       action('onDragEndTable2')(e);
       if (dropOperation === 'move' && !isInternal) {
-        let keysToRemove = [...keys].filter(key => list2.getItem(key).type !== 'unique_type');
+        let keysToRemove = [...keys].filter(key => list2.getItem(key)!.type !== 'unique_type');
         list2.remove(...keysToRemove);
       }
     },
@@ -681,9 +681,9 @@ export function DragBetweenTablesOverride(props) {
 
   let list2 = useListData({
     initialItems: [
-      {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: []},
+      {identifier: '7', type: 'folder', name: 'Pictures',  childNodes: [] as any},
       {identifier: '8', type: 'file', name: 'Adobe Fresco'},
-      {identifier: '9', type: 'folder', name: 'Apps',  childNodes: []},
+      {identifier: '9', type: 'folder', name: 'Apps',  childNodes: [] as any},
       {identifier: '10', type: 'file', name: 'Adobe Illustrator'},
       {identifier: '11', type: 'file', name: 'Adobe Lightroom'},
       {identifier: '12', type: 'file', name: 'Adobe Dreamweaver'}
@@ -693,7 +693,7 @@ export function DragBetweenTablesOverride(props) {
 
   let {dragAndDropHooks: dragAndDropHooksTable1} = useDragAndDrop({
     getItems: (keys) => [...keys].map(key => {
-      let item = list1.getItem(key);
+      let item = list1.getItem(key)!;
       let dragType = `table-1-adobe-${item.type}`;
       return {
         [`${dragType}`]: JSON.stringify(item),
@@ -721,7 +721,7 @@ export function DragBetweenTablesOverride(props) {
       let {
         items
       } = e;
-      let itemsToAdd = [];
+      let itemsToAdd: typeof folderList1 = [];
       let text;
       for (let item of items) {
         if (item.kind === 'text') {
diff --git a/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx b/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
index 3fe4a6b8c28..ce4d3a3554d 100644
--- a/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
@@ -162,7 +162,7 @@ export const UserSetRowHeader: TableStory = {
   }
 };
 
-let manyRows = [];
+let manyRows: Record<typeof columns[number]['key'], string>[] = [];
 function generateRow(lvlIndex, lvlLimit, rowIndex) {
   let row = {key: `Row ${rowIndex} Lvl ${lvlIndex}`};
   for (let col of columns) {
diff --git a/packages/@react-spectrum/table/test/TableSizing.test.tsx b/packages/@react-spectrum/table/test/TableSizing.test.tsx
index 375a10f0624..22440fb3020 100644
--- a/packages/@react-spectrum/table/test/TableSizing.test.tsx
+++ b/packages/@react-spectrum/table/test/TableSizing.test.tsx
@@ -55,7 +55,7 @@ let items = [
 ];
 
 
-let manyItems = [];
+let manyItems: {id: number, foo: string, bar: string, baz: string}[] = [];
 for (let i = 1; i <= 100; i++) {
   manyItems.push({id: i, foo: 'Foo ' + i, bar: 'Bar ' + i, baz: 'Baz ' + i});
 }
@@ -227,9 +227,9 @@ describe('TableViewSizing', function () {
 
       it('should support variable row heights with overflowMode="wrap"', function () {
         let scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get')
-          .mockImplementation(function () {
+          .mockImplementation(function (this: HTMLElement) {
             let row = this.closest('[role=row]');
-            return row && row.textContent.includes('Foo 1') ? 64 : 48;
+            return row && row.textContent?.includes('Foo 1') ? 64 : 48;
           });
 
         let tree = renderTable({overflowMode: 'wrap'});
@@ -257,7 +257,7 @@ describe('TableViewSizing', function () {
 
       it('should support variable column header heights with overflowMode="wrap"', function () {
         let scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get')
-          .mockImplementation(function () {
+          .mockImplementation(function (this: HTMLElement) {
             return this.textContent === 'Tier Two Header B' ? 48 : 34;
           });
 
@@ -1178,8 +1178,8 @@ describe('TableViewSizing', function () {
         );
 
         await user.tab();
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp'});
 
         let header = tree.getAllByRole('columnheader')[0];
         let resizableHeader = within(header).getByRole('button');
@@ -1194,11 +1194,11 @@ describe('TableViewSizing', function () {
           expect((row.childNodes[2] as HTMLElement).style.width).toBe('200px');
         }
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
         act(() => {jest.runAllTimers();});
         act(() => {jest.runAllTimers();});
 
@@ -1206,10 +1206,10 @@ describe('TableViewSizing', function () {
 
         expect(document.activeElement).toBe(resizer);
 
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowRight'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowRight'});
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowRight'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowRight'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowRight'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowRight'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowRight'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowRight'});
 
         expect(resizer).toHaveAttribute('value', '620');
         for (let row of rows) {
@@ -1218,10 +1218,10 @@ describe('TableViewSizing', function () {
           expect((row.childNodes[2] as HTMLElement).style.width).toBe('190px');
         }
 
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowLeft'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowLeft'});
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowLeft'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowLeft'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowLeft'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowLeft'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowLeft'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowLeft'});
 
         expect(resizer).toHaveAttribute('value', '600');
         for (let row of rows) {
@@ -1230,8 +1230,8 @@ describe('TableViewSizing', function () {
           expect((row.childNodes[2] as HTMLElement).style.width).toBe('200px');
         }
 
-        fireEvent.keyDown(document.activeElement, {key: 'Escape'});
-        fireEvent.keyUp(document.activeElement, {key: 'Escape'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Escape'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Escape'});
         expect(onResizeEnd).toHaveBeenCalledTimes(1);
         expect(onResizeEnd).toHaveBeenCalledWith(new Map<string, ColumnSize>([['foo', 600], ['bar', '1fr'], ['baz', '1fr']]));
 
@@ -1260,8 +1260,8 @@ describe('TableViewSizing', function () {
         );
 
         await user.tab();
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp'});
 
         let header = tree.getAllByRole('columnheader')[0];
         let resizableHeader = within(header).getByRole('button');
@@ -1269,11 +1269,11 @@ describe('TableViewSizing', function () {
         expect(tree.queryByRole('slider')).toBeNull();
 
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
         act(() => {jest.runAllTimers();});
         act(() => {jest.runAllTimers();});
 
@@ -1281,8 +1281,8 @@ describe('TableViewSizing', function () {
 
         expect(document.activeElement).toBe(resizer);
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
         expect(onResizeEnd).toHaveBeenCalledTimes(1);
         expect(onResizeEnd).toHaveBeenCalledWith(new Map<string, ColumnSize>([['foo', 600], ['bar', '1fr'], ['baz', '1fr']]));
         expect(document.activeElement).toBe(resizableHeader);
@@ -1310,19 +1310,19 @@ describe('TableViewSizing', function () {
         );
 
         await user.tab();
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp'});
 
         let header = tree.getAllByRole('columnheader')[0];
         let resizableHeader = within(header).getByRole('button');
         expect(document.activeElement).toBe(resizableHeader);
         expect(tree.queryByRole('slider')).toBeNull();
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
         act(() => {jest.runAllTimers();});
         act(() => {jest.runAllTimers();});
 
@@ -1360,8 +1360,8 @@ describe('TableViewSizing', function () {
         );
 
         await user.tab();
-        fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
-        fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+        fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp'});
+        fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp'});
 
         let header = tree.getAllByRole('columnheader')[0];
         let resizableHeader = within(header).getByRole('button');
@@ -1369,11 +1369,11 @@ describe('TableViewSizing', function () {
         expect(tree.queryByRole('slider')).toBeNull();
 
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
 
-        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
-        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        fireEvent.keyDown(document.activeElement!, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement!, {key: 'Enter'});
         act(() => {jest.runAllTimers();});
         act(() => {jest.runAllTimers();});
 
@@ -1408,7 +1408,7 @@ describe('TableViewSizing', function () {
 
       let headers = tree.getAllByRole('columnheader');
       for (let colheader of headers) {
-        if (parseInt(colheader.getAttribute('aria-colspan'), 10) > 1) {
+        if (parseInt(colheader.getAttribute('aria-colspan')!, 10) > 1) {
           expect(within(colheader).queryByRole('button')).toBeFalsy();
         }
       }
diff --git a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
index 3c175047a92..d5fc7af728d 100644
--- a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
+++ b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
@@ -56,8 +56,8 @@ let getCell = (tree, text) => {
 
 let focusCell = (tree, text) => act(() => getCell(tree, text).focus());
 let moveFocus = (key, opts = {}) => {
-  fireEvent.keyDown(document.activeElement, {key, ...opts});
-  fireEvent.keyUp(document.activeElement, {key, ...opts});
+  fireEvent.keyDown(document.activeElement!, {key, ...opts});
+  fireEvent.keyUp(document.activeElement!, {key, ...opts});
 };
 
 let render = (children, scale = 'medium' as Scale, locale = 'en-US') => {
@@ -808,7 +808,7 @@ describe('TableView with expandable rows', function () {
 
     describe('scrolling', function () {
       it('should scroll to a cell when it is focused', function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} disabledKeys={null} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} disabledKeys={undefined} />);
         let body = (treegrid.getByRole('treegrid').childNodes[1] as HTMLElement);
 
         focusCell(treegrid, 'Row 9, Lvl 1, Foo');
@@ -816,7 +816,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should scroll to a nested row cell when it is focused off screen', function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} />);
         let body = (treegrid.getByRole('treegrid').childNodes[1] as HTMLElement);
         let cell = getCell(treegrid, 'Row 1, Lvl 3, Foo');
         act(() => cell.focus());
@@ -890,7 +890,7 @@ describe('TableView with expandable rows', function () {
     describe('row selection', function () {
       describe('with pointer', function () {
         it('should select a row when clicking on the chevron cell', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
           let chevronCell = getCell(treegrid, 'Row 1, Lvl 1, Foo');
@@ -911,7 +911,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should select a nested row on click', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
           let cell = getCell(treegrid, 'Row 1, Lvl 3, Foo');
@@ -927,7 +927,7 @@ describe('TableView with expandable rows', function () {
 
       describe('with keyboard', function () {
         it('should select a nested row by pressing the Enter key on a row', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -941,7 +941,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should select a nested row by pressing the Space key on a row', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -955,7 +955,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should select a row by pressing the Enter key on a chevron cell', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
           let cell = getCell(treegrid, 'Row 1, Lvl 1, Foo');
@@ -970,7 +970,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should select a row by pressing the Space key on a chevron cell', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
           let cell = getCell(treegrid, 'Row 1, Lvl 1, Foo');
@@ -986,7 +986,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should select nested rows if select all checkbox is pressed', async function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
         let checkbox = treegrid.getByLabelText('Select All');
         let rowgroups = treegrid.getAllByRole('rowgroup');
         let rows = within(rowgroups[1]).getAllByRole('row');
@@ -996,7 +996,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should not allow selection of disabled nested rows', async function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={['Row 1 Lvl 2']} onAction={null} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={['Row 1 Lvl 2']} onAction={undefined} />);
         let rowgroups = treegrid.getAllByRole('rowgroup');
         let rows = within(rowgroups[1]).getAllByRole('row');
         let cell = getCell(treegrid, 'Row 1, Lvl 2, Foo');
@@ -1016,7 +1016,7 @@ describe('TableView with expandable rows', function () {
     describe('range selection', function () {
       describe('with pointer', function () {
         it('should support selecting a range from a top level row to a nested row', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1033,7 +1033,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should support selecting a range from a nested row to a top level row', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1050,7 +1050,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should support selecting a range from a top level row to a descendent child row', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1067,7 +1067,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should support selecting a range from a nested child row to its top level row ancestor', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1084,7 +1084,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should not include disabled rows', async function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={['Row 1 Lvl 2']} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={['Row 1 Lvl 2']} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1104,7 +1104,7 @@ describe('TableView with expandable rows', function () {
 
       describe('with keyboard', function () {
         it('should extend a selection with Shift + ArrowDown through nested keys', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1112,24 +1112,24 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 1, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowDown', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 1 Lvl 1', 'Row 1 Lvl 2'
           ]);
 
           onSelectionChange.mockReset();
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowDown', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 1 Lvl 1', 'Row 1 Lvl 2', 'Row 1 Lvl 3'
           ]);
 
           onSelectionChange.mockReset();
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowDown', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 1 Lvl 1', 'Row 1 Lvl 2', 'Row 1 Lvl 3', 'Row 2 Lvl 1'
@@ -1140,7 +1140,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should extend a selection with Shift + ArrowUp through nested keys', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1148,24 +1148,24 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 2, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowUp', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowUp', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 2 Lvl 1', 'Row 1 Lvl 3'
           ]);
 
           onSelectionChange.mockReset();
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowUp', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowUp', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 2 Lvl 1', 'Row 1 Lvl 3', 'Row 1 Lvl 2'
           ]);
 
           onSelectionChange.mockReset();
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowUp', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowUp', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowUp', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowUp', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 2 Lvl 1', 'Row 1 Lvl 3', 'Row 1 Lvl 2', 'Row 1 Lvl 1'
@@ -1176,7 +1176,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should extend a selection with Ctrl + Shift + Home', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1184,8 +1184,8 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 3, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'Home', shiftKey: true, ctrlKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'Home', shiftKey: true, ctrlKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'Home', shiftKey: true, ctrlKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'Home', shiftKey: true, ctrlKey: true});
           act(() => jest.runAllTimers());
 
           checkSelection(onSelectionChange, [
@@ -1197,7 +1197,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should extend a selection with Ctrl + Shift + End', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1205,15 +1205,15 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 3, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'End', shiftKey: true, ctrlKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'End', shiftKey: true, ctrlKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'End', shiftKey: true, ctrlKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'End', shiftKey: true, ctrlKey: true});
           act(() => jest.runAllTimers());
 
           checkRowSelection(rows.slice(6), true);
         });
 
         it('should extend a selection with Shift + PageDown', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1221,8 +1221,8 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 3, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'PageDown', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'PageDown', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'PageDown', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'PageDown', shiftKey: true});
           act(() => jest.runAllTimers());
 
           checkSelection(onSelectionChange, [
@@ -1235,7 +1235,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should extend a selection with Shift + PageUp', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1243,8 +1243,8 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 3, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'PageUp', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'PageUp', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'PageUp', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'PageUp', shiftKey: true});
           act(() => jest.runAllTimers());
 
           checkSelection(onSelectionChange, [
@@ -1253,7 +1253,7 @@ describe('TableView with expandable rows', function () {
         });
 
         it('should not include disabled rows', function () {
-          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={['Row 1 Lvl 2']} onAction={null} />);
+          let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={['Row 1 Lvl 2']} onAction={undefined} />);
           let rowgroups = treegrid.getAllByRole('rowgroup');
           let rows = within(rowgroups[1]).getAllByRole('row');
 
@@ -1261,11 +1261,11 @@ describe('TableView with expandable rows', function () {
           pressWithKeyboard(getCell(treegrid, 'Row 1, Lvl 1, Foo'));
           onSelectionChange.mockReset();
 
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowDown', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
           act(() => jest.runAllTimers());
-          fireEvent.keyDown(document.activeElement, {key: 'ArrowDown', shiftKey: true});
-          fireEvent.keyUp(document.activeElement, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyDown(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
+          fireEvent.keyUp(document.activeElement!, {key: 'ArrowDown', shiftKey: true});
           act(() => jest.runAllTimers());
           checkSelection(onSelectionChange, [
             'Row 1 Lvl 1', 'Row 1 Lvl 3'
@@ -1286,7 +1286,7 @@ describe('TableView with expandable rows', function () {
         ${'mouse'}
         ${'touch'}
       `('should trigger onAction when clicking nested rows with $Name', async ({Name}) => {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={onAction} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={onAction} />);
         let rowgroups = treegrid.getAllByRole('rowgroup');
         let rows = within(rowgroups[1]).getAllByRole('row');
         let cell = getCell(treegrid, 'Row 1, Lvl 3, Foo');
@@ -1315,7 +1315,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should trigger onAction when pressing Enter', function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={null} onAction={onAction} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="checkbox" disabledKeys={undefined} onAction={onAction} />);
         let rowgroups = treegrid.getAllByRole('rowgroup');
         let rows = within(rowgroups[1]).getAllByRole('row');
         let cell = getCell(treegrid, 'Row 1, Lvl 3, Foo');
@@ -1342,7 +1342,7 @@ describe('TableView with expandable rows', function () {
       installPointerEvent();
 
       it('should toggle selection with mouse', function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={null} onAction={null} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={undefined} onAction={undefined} />);
         expect(treegrid.queryByLabelText('Select All')).toBeNull();
 
         let rowgroups = treegrid.getAllByRole('rowgroup');
@@ -1371,7 +1371,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should toggle selection with touch', function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={null} onAction={null} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={undefined} onAction={undefined} />);
         expect(treegrid.queryByLabelText('Select All')).toBeNull();
 
         let rowgroups = treegrid.getAllByRole('rowgroup');
@@ -1399,7 +1399,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should support long press to enter selection mode on touch', async function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={null} onAction={onAction} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={undefined} onAction={onAction} />);
         await user.click(document.body);
         let rowgroups = treegrid.getAllByRole('rowgroup');
         let rows = within(rowgroups[1]).getAllByRole('row');
@@ -1439,7 +1439,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should support double click to perform onAction with mouse', async function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={null} onAction={onAction} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={undefined} onAction={onAction} />);
         expect(treegrid.queryByLabelText('Select All')).toBeNull();
 
         let rowgroups = treegrid.getAllByRole('rowgroup');
@@ -1455,7 +1455,6 @@ describe('TableView with expandable rows', function () {
         checkSelection(onSelectionChange, ['Row 1 Lvl 3']);
         expect(onAction).not.toHaveBeenCalled();
         onSelectionChange.mockReset();
-        // @ts-ignore
         await user.dblClick(cell);
         act(() => jest.runAllTimers());
         expect(announce).toHaveBeenCalledTimes(1);
@@ -1465,7 +1464,7 @@ describe('TableView with expandable rows', function () {
       });
 
       it('should support single tap to perform onAction with touch', function () {
-        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={null} onAction={onAction} />);
+        let treegrid = render(<ManyRowsExpandableTable onSelectionChange={onSelectionChange} selectionMode="multiple" selectionStyle="highlight" disabledKeys={undefined} onAction={onAction} />);
         expect(treegrid.queryByLabelText('Select All')).toBeNull();
         let cell = getCell(treegrid, 'Row 1, Lvl 3, Foo');
 
diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx
index ad34d300a1e..da6ac127018 100644
--- a/packages/@react-spectrum/tag/src/TagGroup.tsx
+++ b/packages/@react-spectrum/tag/src/TagGroup.tsx
@@ -62,7 +62,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
     renderEmptyState = () => stringFormatter.format('noTags')
   } = props;
   let domRef = useDOMRef(ref);
-  let containerRef = useRef(null);
+  let containerRef = useRef<HTMLDivElement>(null);
   let tagsRef = useRef<HTMLDivElement | null>(null);
   let {direction} = useLocale();
   let {scale} = useProvider();
@@ -85,7 +85,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
   delete props.onAction;
   let {gridProps, labelProps, descriptionProps, errorMessageProps} = useTagGroup({...props, keyboardDelegate}, state, tagsRef);
   let actionsId = useId();
-  let actionsRef = useRef(null);
+  let actionsRef = useRef<HTMLDivElement>(null);
 
   let updateVisibleTagCount = useCallback(() => {
     if (maxRows && maxRows > 0) {
@@ -124,7 +124,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
 
         // Remove tags until there is space for the collapse button and action button (if present) on the last row.
         let buttons = [...currActionsRef.children];
-        if (maxRows && buttons.length > 0 && rowCount >= maxRows) {
+        if (maxRows && buttons.length > 0 && rowCount >= maxRows && currContainerRef.parentElement) {
           let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);
           buttonsWidth += TAG_STYLES[scale].margin * 2 * buttons.length;
           let end = direction === 'ltr' ? 'right' : 'left';
@@ -134,7 +134,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
           let availableWidth = containerEnd - lastTagEnd;
 
           while (availableWidth < buttonsWidth && index > 0) {
-            availableWidth += tagWidths.pop();
+            availableWidth += tagWidths.pop()!;
             index--;
           }
         }
diff --git a/packages/@react-spectrum/toast/src/ToastContainer.tsx b/packages/@react-spectrum/toast/src/ToastContainer.tsx
index 788e9d19081..e5af9d47814 100644
--- a/packages/@react-spectrum/toast/src/ToastContainer.tsx
+++ b/packages/@react-spectrum/toast/src/ToastContainer.tsx
@@ -77,14 +77,14 @@ function useActiveToastContainer() {
  * A ToastContainer renders the queued toasts in an application. It should be placed
  * at the root of the app.
  */
-export function ToastContainer(props: SpectrumToastContainerProps): ReactElement {
+export function ToastContainer(props: SpectrumToastContainerProps): ReactElement | null {
   // Track all toast provider instances in a set.
   // Only the first one will actually render.
   // We use a ref to do this, since it will have a stable identity
   // over the lifetime of the component.
-  let ref = useRef(undefined);
+  let ref = useRef(null);
+
 
-   
   useEffect(() => {
     toastProviders.add(ref);
     triggerSubscriptions();
@@ -144,7 +144,7 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
 
     let shouldContinue = window.dispatchEvent(event);
     if (!shouldContinue) {
-      return;
+      return () => {};
     }
   }
 
@@ -160,7 +160,7 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
   // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible
   // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.
   // It is debatable whether non-actionable toasts would also fail.
-  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;
+  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : undefined;
   let queue = getGlobalToastQueue();
   let key = queue.add(value, {timeout, onClose: options.onClose});
   return () => queue.close(key);
diff --git a/packages/@react-spectrum/toast/src/Toaster.tsx b/packages/@react-spectrum/toast/src/Toaster.tsx
index e5ea827337b..8be59a78644 100644
--- a/packages/@react-spectrum/toast/src/Toaster.tsx
+++ b/packages/@react-spectrum/toast/src/Toaster.tsx
@@ -34,7 +34,7 @@ export function Toaster(props: ToastContainerProps): ReactElement {
     state
   } = props;
 
-  let ref = useRef(undefined);
+  let ref = useRef(null);
   let {regionProps} = useToastRegion(props, state, ref);
   let {focusProps, isFocusVisible} = useFocusRing();
   let {getContainer} = useUNSTABLE_PortalContext();
diff --git a/packages/@react-spectrum/toast/stories/Toast.stories.tsx b/packages/@react-spectrum/toast/stories/Toast.stories.tsx
index 64516082447..625eb6b9522 100644
--- a/packages/@react-spectrum/toast/stories/Toast.stories.tsx
+++ b/packages/@react-spectrum/toast/stories/Toast.stories.tsx
@@ -212,7 +212,7 @@ function RenderProvider(options: SpectrumToastOptions) {
 }
 
 function ToastToggle(options: SpectrumToastOptions) {
-  let [close, setClose] = useState(null);
+  let [close, setClose] = useState<(() => void) | null>(null);
 
   return (
     <Button
@@ -259,21 +259,23 @@ function IframeExample() {
   useEffect(() => () => controller.dispose(), [controller]);
   let onLoad = (e: SyntheticEvent) => {
     let iframe = e.target as HTMLIFrameElement;
-    let window = iframe.contentWindow;
+    let window = iframe.contentWindow!;
     let document = window.document;
 
     // Catch toasts inside the iframe and redirect them outside.
-    window.addEventListener('react-spectrum-toast', (e: CustomEvent) => {
+    window.addEventListener('react-spectrum-toast', (e) => {
       e.preventDefault();
-      ToastQueue[e.detail.variant](e.detail.children, e.detail.options);
+      if (e instanceof CustomEvent) {
+        ToastQueue[e.detail.variant](e.detail.children, e.detail.options);
+      }
     });
 
-    let prevFocusedElement = null;
-    window.addEventListener('react-aria-landmark-navigation', (e: CustomEvent) => {
+    let prevFocusedElement: HTMLElement | null = null;
+    window.addEventListener('react-aria-landmark-navigation', (e) => {
       e.preventDefault();
       let el = document.activeElement;
       if (el !== document.body) {
-        prevFocusedElement = el;
+        prevFocusedElement = el as HTMLElement;
       }
 
       // Prevent focus scope from stealing focus back when we move focus to the iframe.
@@ -281,7 +283,7 @@ function IframeExample() {
 
       window.parent.postMessage({
         type: 'landmark-navigation',
-        direction: e.detail.direction
+        direction: e instanceof CustomEvent ? e.detail.direction : undefined
       });
 
       setTimeout(() => {
@@ -308,7 +310,7 @@ function IframeExample() {
 
   useEffect(() => {
     let onMessage = (e: MessageEvent) => {
-      let iframe = ref.current;
+      let iframe = ref.current!;
       if (e.data.type === 'landmark-navigation') {
         // Move focus to the iframe so that when focus is restored there, and we can redirect it back inside (below).
         iframe.focus();
@@ -322,12 +324,12 @@ function IframeExample() {
     return () => window.removeEventListener('message', onMessage);
   }, [controller]);
 
-  let ref = useRef(null);
+  let ref = useRef<HTMLIFrameElement | null>(null);
   let {landmarkProps} = useLandmark({
     role: 'main',
     focus(direction) {
       // when iframe landmark receives focus via landmark navigation, go to first/last landmark inside iframe.
-      ref.current.contentWindow.postMessage({
+      ref.current!.contentWindow!.postMessage({
         type: 'landmark-navigation',
         direction
       });
@@ -348,7 +350,7 @@ function IframeExample() {
 }
 
 function MainLandmark(props) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLElement | null>(null);
   let {landmarkProps} = useLandmark({...props, role: 'main'}, ref);
   return <main aria-label="Danni's unicorn corral" ref={ref} {...props} {...landmarkProps} style={{padding: 40, background: 'white'}}>{props.children}</main>;
 }
@@ -361,11 +363,11 @@ export const withFullscreen = {
 };
 
 function FullscreenApp(props) {
-  let ref = useRef(null);
+  let ref = useRef<HTMLDivElement | null>(null);
   let [isFullscreen, setFullscreen] = useState(false);
   let fullscreenPress = () => {
     if (!isFullscreen) {
-      ref.current.requestFullscreen();
+      ref.current!.requestFullscreen();
     }
   };
   useEffect(() => {
diff --git a/packages/@react-spectrum/tooltip/src/Tooltip.tsx b/packages/@react-spectrum/tooltip/src/Tooltip.tsx
index 4ee99054e93..4b1f201b55a 100644
--- a/packages/@react-spectrum/tooltip/src/Tooltip.tsx
+++ b/packages/@react-spectrum/tooltip/src/Tooltip.tsx
@@ -30,16 +30,20 @@ let iconMap = {
 
 function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
   let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);
-  let defaultRef = useRef(undefined);
+  let defaultRef = useRef(null);
   overlayRef = overlayRef || defaultRef;
+  let backupPlacement = props.placement;
   props = mergeProps(props, tooltipProviderProps);
   let {
     variant = 'neutral',
-    placement = 'top',
+    placement,
     isOpen,
     showIcon,
     ...otherProps
   } = props;
+  if (placement == null) {
+    placement = backupPlacement ?? 'top';
+  }
   let {styleProps} = useStyleProps(otherProps);
   let {tooltipProps} = useTooltip(props, state);
 
diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
index 2a294e2cbdf..0478fff35f5 100644
--- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
+++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
@@ -35,8 +35,8 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
   let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];
   let state = useTooltipTriggerState(props);
 
-  let tooltipTriggerRef = useRef<HTMLElement>(undefined);
-  let overlayRef = useRef<HTMLDivElement>(undefined);
+  let tooltipTriggerRef = useRef<HTMLElement>(null);
+  let overlayRef = useRef<HTMLDivElement>(null);
 
   let {triggerProps, tooltipProps} = useTooltipTrigger({
     isDisabled,
@@ -52,7 +52,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
       }
     }
   }, [state.isOpen, overlayRef]);
-  let arrowRef = useRef(null);
+  let arrowRef = useRef<HTMLElement>(null);
   let [arrowWidth, setArrowWidth] = useState(0);
   useLayoutEffect(() => {
     if (arrowRef.current && state.isOpen) {
diff --git a/packages/@react-spectrum/tooltip/src/context.ts b/packages/@react-spectrum/tooltip/src/context.ts
index 6ea911470ce..1dcecea82f3 100644
--- a/packages/@react-spectrum/tooltip/src/context.ts
+++ b/packages/@react-spectrum/tooltip/src/context.ts
@@ -18,9 +18,9 @@ import {TooltipTriggerState} from '@react-stately/tooltip';
 interface TooltipContextProps extends StyleProps {
   state?: TooltipTriggerState,
   ref?: RefObject<HTMLDivElement | null>,
-  placement?: PlacementAxis,
+  placement: PlacementAxis | null,
   arrowProps?: HTMLAttributes<HTMLElement>,
   arrowRef?: RefObject<HTMLElement | null>
 }
 
-export const TooltipContext = React.createContext<TooltipContextProps>({});
+export const TooltipContext = React.createContext<TooltipContextProps>({placement: null});
diff --git a/packages/@react-spectrum/tree/src/TreeView.tsx b/packages/@react-spectrum/tree/src/TreeView.tsx
index 1bdcad50e08..069a8b66d06 100644
--- a/packages/@react-spectrum/tree/src/TreeView.tsx
+++ b/packages/@react-spectrum/tree/src/TreeView.tsx
@@ -332,7 +332,7 @@ const expandButton = style<ExpandableRowChevronProps>({
 });
 
 function ExpandableRowChevron(props: ExpandableRowChevronProps) {
-  let expandButtonRef = useRef<HTMLSpanElement>(null);
+  let expandButtonRef = useRef(null);
   let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);
   let {isExpanded, isDisabled} = fullProps;
   let {direction} = useLocale();
diff --git a/packages/@react-spectrum/utils/src/BreakpointProvider.tsx b/packages/@react-spectrum/utils/src/BreakpointProvider.tsx
index ed9080dec25..1d22c7b7e26 100644
--- a/packages/@react-spectrum/utils/src/BreakpointProvider.tsx
+++ b/packages/@react-spectrum/utils/src/BreakpointProvider.tsx
@@ -12,7 +12,7 @@ interface BreakpointContext {
   matchedBreakpoints: string[]
 }
 
-const Context = React.createContext<BreakpointContext>(null);
+const Context = React.createContext<BreakpointContext | null>(null);
 Context.displayName = 'BreakpointContext';
 
 interface BreakpointProviderProps {
@@ -34,12 +34,12 @@ export function BreakpointProvider(props: BreakpointProviderProps) {
 }
 
 export function useMatchedBreakpoints(breakpoints: Breakpoints): string[] {
-  let entries = Object.entries(breakpoints).sort(([, valueA], [, valueB]) => valueB - valueA);
+  let entries = Object.entries(breakpoints).sort(([, valueA], [, valueB]) => valueB! - valueA!);
   let breakpointQueries = entries.map(([, value]) => `(min-width: ${value}px)`);
 
   let supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
   let getBreakpointHandler = () => {
-    let matched = [];
+    let matched: string[] = [];
     for (let i in breakpointQueries) {
       let query = breakpointQueries[i];
       if (window.matchMedia(query).matches) {
@@ -87,6 +87,6 @@ export function useMatchedBreakpoints(breakpoints: Breakpoints): string[] {
   return isSSR ? ['base'] : breakpoint;
 }
 
-export function useBreakpoint(): BreakpointContext {
+export function useBreakpoint() {
   return useContext(Context);
 }
diff --git a/packages/@react-spectrum/utils/src/Slots.tsx b/packages/@react-spectrum/utils/src/Slots.tsx
index 80fa4c9988f..ed068801c0b 100644
--- a/packages/@react-spectrum/utils/src/Slots.tsx
+++ b/packages/@react-spectrum/utils/src/Slots.tsx
@@ -17,10 +17,11 @@ interface SlotProps {
   slot?: string
 }
 
-let SlotContext = React.createContext(null);
+let SlotContext = React.createContext<{} | null>(null);
 
 export function useSlotProps<T>(props: T & {id?: string}, defaultSlot?: string): T {
   let slot = (props as SlotProps).slot || defaultSlot;
+  // @ts-ignore TODO why is slot an object and not just string or undefined?
   let {[slot]: slotProps = {}} = useContext(SlotContext) || {};
 
   return mergeProps(props, mergeProps(slotProps, {id: props.id}));
diff --git a/packages/@react-spectrum/utils/src/classNames.ts b/packages/@react-spectrum/utils/src/classNames.ts
index 1385d1f5948..f5f31093cd2 100644
--- a/packages/@react-spectrum/utils/src/classNames.ts
+++ b/packages/@react-spectrum/utils/src/classNames.ts
@@ -24,7 +24,7 @@ export function keepSpectrumClassNames() {
 }
 
 export function classNames(cssModule: {[key: string]: string}, ...values: Array<string | Object | undefined>): string {
-  let classes = [];
+  let classes: Array<{} | undefined> = [];
   for (let value of values) {
     if (typeof value === 'object' && value) {
       let mapped = {};
diff --git a/packages/@react-spectrum/utils/src/styleProps.ts b/packages/@react-spectrum/utils/src/styleProps.ts
index 62ad1c1bab4..62f7d2cff3d 100644
--- a/packages/@react-spectrum/utils/src/styleProps.ts
+++ b/packages/@react-spectrum/utils/src/styleProps.ts
@@ -17,7 +17,7 @@ import {useLocale} from '@react-aria/i18n';
 
 type Breakpoint = 'base' | 'S' | 'M' | 'L' | string;
 type StyleName = string | string[] | ((dir: Direction) => string);
-type StyleHandler = (value: any, colorVersion?: number) => string;
+type StyleHandler = (value: any, colorVersion?: number) => string | undefined;
 export interface StyleHandlers {
   [key: string]: [StyleName, StyleHandler]
 }
@@ -144,8 +144,10 @@ export function dimensionValue(value: DimensionValue) {
 }
 
 export function responsiveDimensionValue(value: Responsive<DimensionValue>, matchedBreakpoints: Breakpoint[]) {
-  value = getResponsiveProp(value, matchedBreakpoints);
-  return dimensionValue(value);
+  let responsiveValue = getResponsiveProp(value, matchedBreakpoints);
+  if (responsiveValue != null) {
+    return dimensionValue(responsiveValue);
+  }
 }
 
 type ColorType = 'default' | 'background' | 'border' | 'icon' | 'status';
@@ -299,7 +301,7 @@ export function passthroughStyle(value) {
   return value;
 }
 
-export function getResponsiveProp<T>(prop: Responsive<T>, matchedBreakpoints: Breakpoint[]): T {
+export function getResponsiveProp<T>(prop: Responsive<T>, matchedBreakpoints: Breakpoint[]): T | undefined {
   if (prop && typeof prop === 'object' && !Array.isArray(prop)) {
     for (let i = 0; i < matchedBreakpoints.length; i++) {
       let breakpoint = matchedBreakpoints[i];
diff --git a/packages/@react-stately/calendar/src/useRangeCalendarState.ts b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
index cd07c9611d8..c3a19a03e3a 100644
--- a/packages/@react-stately/calendar/src/useRangeCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
@@ -13,7 +13,7 @@
 import {alignCenter, constrainValue, isInvalid, previousAvailableDate} from './utils';
 import {Calendar, CalendarDate, DateDuration, GregorianCalendar, isEqualDay, maxDate, minDate, toCalendar, toCalendarDate} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from './types';
-import {DateValue, RangeCalendarProps} from '@react-types/calendar';
+import {DateValue, MappedDateValue, RangeCalendarProps} from '@react-types/calendar';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useCalendarState} from './useCalendarState';
 import {useControlledState} from '@react-stately/utils';
@@ -42,7 +42,7 @@ export interface RangeCalendarStateOptions<T extends DateValue = DateValue> exte
  */
 export function useRangeCalendarState<T extends DateValue = DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState {
   let {value: valueProp, defaultValue, onChange, createCalendar, locale, visibleDuration = {months: 1}, minValue, maxValue, ...calendarProps} = props;
-  let [value, setValue] = useControlledState<RangeValue<T> | null, RangeValue<T>>(
+  let [value, setValue] = useControlledState<RangeValue<T> | null, RangeValue<MappedDateValue<T>>>(
     valueProp!,
     defaultValue || null!,
     onChange
diff --git a/packages/@react-stately/collections/src/CollectionBuilder.ts b/packages/@react-stately/collections/src/CollectionBuilder.ts
index 09f804818b4..12bdde75ccc 100644
--- a/packages/@react-stately/collections/src/CollectionBuilder.ts
+++ b/packages/@react-stately/collections/src/CollectionBuilder.ts
@@ -15,19 +15,23 @@ import {PartialNode} from './types';
 import React, {ReactElement} from 'react';
 
 interface CollectionBuilderState {
-  renderer?: (value: any) => ReactElement
+  renderer?: (value: any) => ReactElement | null
+}
+
+interface CollectReactElement<T> extends ReactElement {
+  getCollectionNode(props: any, context: any): Generator<PartialNode<T>, void, Node<T>[]>
 }
 
 export class CollectionBuilder<T extends object> {
   private context?: unknown;
   private cache: WeakMap<T, Node<T>> = new WeakMap();
 
-  build(props: CollectionBase<T>, context?: unknown) {
+  build(props: Partial<CollectionBase<T>>, context?: unknown) {
     this.context = context;
     return iterable(() => this.iterateCollection(props));
   }
 
-  private *iterateCollection(props: CollectionBase<T>): Generator<Node<T>> {
+  private *iterateCollection(props: Partial<CollectionBase<T>>): Generator<Node<T>> {
     let {children, items} = props;
 
     if (React.isValidElement<{children: CollectionElement<T>}>(children) && children.type === React.Fragment) {
@@ -40,15 +44,20 @@ export class CollectionBuilder<T extends object> {
         throw new Error('props.children was a function but props.items is missing');
       }
 
-      for (let item of props.items) {
+      let index = 0;
+      for (let item of items) {
         yield* this.getFullNode({
-          value: item
+          value: item,
+          index
         }, {renderer: children});
+        index++;
       }
     } else {
       let items: CollectionElement<T>[] = [];
       React.Children.forEach(children, child => {
-        items.push(child);
+        if (child) {
+          items.push(child);
+        }
       });
 
       let index = 0;
@@ -66,7 +75,7 @@ export class CollectionBuilder<T extends object> {
     }
   }
 
-  private getKey(item: CollectionElement<T>, partialNode: PartialNode<T>, state: CollectionBuilderState, parentKey?: Key): Key {
+  private getKey(item: NonNullable<CollectionElement<T>>, partialNode: PartialNode<T>, state: CollectionBuilderState, parentKey?: Key | null): Key {
     if (item.key != null) {
       return item.key;
     }
@@ -94,7 +103,7 @@ export class CollectionBuilder<T extends object> {
     };
   }
 
-  private *getFullNode(partialNode: PartialNode<T>, state: CollectionBuilderState, parentKey?: Key, parentNode?: Node<T>): Generator<Node<T>> {
+  private *getFullNode(partialNode: PartialNode<T> & {index: number}, state: CollectionBuilderState, parentKey?: Key | null, parentNode?: Node<T>): Generator<Node<T>> {
     if (React.isValidElement<{children: CollectionElement<T>}>(partialNode.element) && partialNode.element.type === React.Fragment) {
       let children: CollectionElement<T>[] = [];
 
@@ -102,7 +111,7 @@ export class CollectionBuilder<T extends object> {
         children.push(child);
       });
 
-      let index = partialNode.index;
+      let index = partialNode.index ?? 0;
 
       for (const child of children) {
         yield* this.getFullNode({
@@ -132,23 +141,23 @@ export class CollectionBuilder<T extends object> {
     // If there's an element with a getCollectionNode function on its type, then it's a supported component.
     // Call this function to get a partial node, and recursively build a full node from there.
     if (React.isValidElement(element)) {
-      let type = element.type as any;
+      let type = element.type as unknown as CollectReactElement<T>;
       if (typeof type !== 'function' && typeof type.getCollectionNode !== 'function') {
-        let name = typeof element.type === 'function' ? element.type.name : element.type;
+        let name = element.type;
         throw new Error(`Unknown element <${name}> in collection.`);
       }
 
       let childNodes = type.getCollectionNode(element.props, this.context) as Generator<PartialNode<T>, void, Node<T>[]>;
-      let index = partialNode.index;
+      let index = partialNode.index ?? 0;
       let result = childNodes.next();
       while (!result.done && result.value) {
         let childNode = result.value;
 
         partialNode.index = index;
 
-        let nodeKey = childNode.key;
-        if (!nodeKey) {
-          nodeKey = childNode.element ? null : this.getKey(element as CollectionElement<T>, partialNode, state, parentKey);
+        let nodeKey = childNode.key ?? null;
+        if (nodeKey == null) {
+          nodeKey = childNode.element ? null : this.getKey(element as NonNullable<CollectionElement<T>>, partialNode, state, parentKey);
         }
 
         let nodes = this.getFullNode({
@@ -161,7 +170,7 @@ export class CollectionBuilder<T extends object> {
         let children = [...nodes];
         for (let node of children) {
           // Cache the node based on its value
-          node.value = childNode.value || partialNode.value;
+          node.value = childNode.value ?? partialNode.value ?? null;
           if (node.value) {
             this.cache.set(node.value, node);
           }
@@ -169,7 +178,7 @@ export class CollectionBuilder<T extends object> {
           // The partial node may have specified a type for the child in order to specify a constraint.
           // Verify that the full node that was built recursively matches this type.
           if (partialNode.type && node.type !== partialNode.type) {
-            throw new Error(`Unsupported type <${capitalize(node.type)}> in <${capitalize(parentNode.type)}>. Only <${capitalize(partialNode.type)}> is supported.`);
+            throw new Error(`Unsupported type <${capitalize(node.type)}> in <${capitalize(parentNode?.type ?? 'unknown parent type')}>. Only <${capitalize(partialNode.type)}> is supported.`);
           }
 
           index++;
@@ -183,7 +192,7 @@ export class CollectionBuilder<T extends object> {
     }
 
     // Ignore invalid elements
-    if (partialNode.key == null) {
+    if (partialNode.key == null || partialNode.type == null) {
       return;
     }
 
@@ -194,17 +203,17 @@ export class CollectionBuilder<T extends object> {
       props: partialNode.props,
       key: partialNode.key,
       parentKey: parentNode ? parentNode.key : null,
-      value: partialNode.value,
+      value: partialNode.value ?? null,
       level: parentNode ? parentNode.level + 1 : 0,
       index: partialNode.index,
       rendered: partialNode.rendered,
-      textValue: partialNode.textValue,
+      textValue: partialNode.textValue ?? '',
       'aria-label': partialNode['aria-label'],
       wrapper: partialNode.wrapper,
       shouldInvalidate: partialNode.shouldInvalidate,
-      hasChildNodes: partialNode.hasChildNodes,
+      hasChildNodes: partialNode.hasChildNodes || false,
       childNodes: iterable(function *() {
-        if (!partialNode.hasChildNodes) {
+        if (!partialNode.hasChildNodes || !partialNode.childNodes) {
           return;
         }
 
@@ -219,8 +228,7 @@ export class CollectionBuilder<T extends object> {
             child.key = `${node.key}${child.key}`;
           }
 
-          child.index = index;
-          let nodes = builder.getFullNode(child, builder.getChildState(state, child), node.key, node);
+          let nodes = builder.getFullNode({...child, index}, builder.getChildState(state, child), node.key, node);
           for (let node of nodes) {
             index++;
             yield node;
@@ -235,8 +243,8 @@ export class CollectionBuilder<T extends object> {
 
 // Wraps an iterator function as an iterable object, and caches the results.
 function iterable<T>(iterator: () => IterableIterator<Node<T>>): Iterable<Node<T>> {
-  let cache = [];
-  let iterable = null;
+  let cache: Array<Node<T>> = [];
+  let iterable: null | IterableIterator<Node<T>> = null;
   return {
     *[Symbol.iterator]() {
       for (let item of cache) {
@@ -256,7 +264,7 @@ function iterable<T>(iterator: () => IterableIterator<Node<T>>): Iterable<Node<T
 }
 
 type Wrapper = (element: ReactElement) => ReactElement;
-function compose(outer: Wrapper | void, inner: Wrapper | void): Wrapper {
+function compose(outer: Wrapper | void, inner: Wrapper | void): Wrapper | undefined {
   if (outer && inner) {
     return (element) => outer(inner(element));
   }
diff --git a/packages/@react-stately/collections/src/Item.ts b/packages/@react-stately/collections/src/Item.ts
index 4ea49f91c71..de29898f5ff 100644
--- a/packages/@react-stately/collections/src/Item.ts
+++ b/packages/@react-stately/collections/src/Item.ts
@@ -14,7 +14,7 @@ import {ItemElement, ItemProps} from '@react-types/shared';
 import {PartialNode} from './types';
 import React, {JSX, ReactElement} from 'react';
 
-function Item<T>(props: ItemProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Item<T>(props: ItemProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
diff --git a/packages/@react-stately/collections/src/Section.ts b/packages/@react-stately/collections/src/Section.ts
index 97fceb5d4b9..d015ac6236d 100644
--- a/packages/@react-stately/collections/src/Section.ts
+++ b/packages/@react-stately/collections/src/Section.ts
@@ -14,7 +14,7 @@ import {PartialNode} from './types';
 import React, {JSX, ReactElement} from 'react';
 import {SectionProps} from '@react-types/shared';
 
-function Section<T>(props: SectionProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Section<T>(props: SectionProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
diff --git a/packages/@react-stately/collections/src/getChildNodes.ts b/packages/@react-stately/collections/src/getChildNodes.ts
index 8692c2030b0..961cf42154a 100644
--- a/packages/@react-stately/collections/src/getChildNodes.ts
+++ b/packages/@react-stately/collections/src/getChildNodes.ts
@@ -42,7 +42,7 @@ export function getNthItem<T>(iterable: Iterable<T>, index: number): T | undefin
 }
 
 export function getLastItem<T>(iterable: Iterable<T>): T | undefined {
-  let lastItem = undefined;
+  let lastItem: T | undefined = undefined;
   for (let value of iterable) {
     lastItem = value;
   }
@@ -81,11 +81,14 @@ export function compareNodeOrder<T>(collection: Collection<Node<T>>, a: Node<T>,
 }
 
 function getAncestors<T>(collection: Collection<Node<T>>, node: Node<T>): Node<T>[] {
-  let parents = [];
+  let parents: Node<T>[] = [];
 
-  while (node?.parentKey != null) {
-    node = collection.getItem(node.parentKey);
-    parents.unshift(node);
+  let currNode: Node<T> | null = node;
+  while (currNode?.parentKey != null) {
+    currNode = collection.getItem(currNode.parentKey);
+    if (currNode) {
+      parents.unshift(currNode);
+    }
   }
 
   return parents;
diff --git a/packages/@react-stately/collections/src/getItemCount.ts b/packages/@react-stately/collections/src/getItemCount.ts
index 952054fe64a..e1f892be544 100644
--- a/packages/@react-stately/collections/src/getItemCount.ts
+++ b/packages/@react-stately/collections/src/getItemCount.ts
@@ -21,18 +21,19 @@ export function getItemCount<T>(collection: Collection<Node<T>>): number {
     return count;
   }
 
-  count = 0;
+  // TS isn't smart enough to know we've ensured count is a number, so use a new variable
+  let counter = 0;
   let countItems = (items: Iterable<Node<T>>) => {
     for (let item of items) {
       if (item.type === 'section') {
         countItems(getChildNodes(item, collection));
       } else {
-        count++;
+        counter++;
       }
     }
   };
 
   countItems(collection);
-  cache.set(collection, count);
-  return count;
+  cache.set(collection, counter);
+  return counter;
 }
diff --git a/packages/@react-stately/collections/src/types.ts b/packages/@react-stately/collections/src/types.ts
index 73436def7c8..d84f5320307 100644
--- a/packages/@react-stately/collections/src/types.ts
+++ b/packages/@react-stately/collections/src/types.ts
@@ -15,17 +15,17 @@ import {ReactElement, ReactNode} from 'react';
 
 export interface PartialNode<T> {
   type?: string,
-  key?: Key,
+  key?: Key | null,
   value?: T,
-  element?: ReactElement,
+  element?: ReactElement | null,
   wrapper?: (element: ReactElement) => ReactElement,
   rendered?: ReactNode,
   textValue?: string,
   'aria-label'?: string,
   index?: number,
-  renderer?: (item: T) => ReactElement,
+  renderer?: (item: T) => ReactElement | null,
   hasChildNodes?: boolean,
   childNodes?: () => IterableIterator<PartialNode<T>>,
   props?: any,
-  shouldInvalidate?: (context: unknown) => boolean
+  shouldInvalidate?: (context: any) => boolean
 }
diff --git a/packages/@react-stately/collections/src/useCollection.ts b/packages/@react-stately/collections/src/useCollection.ts
index e5091e1eb12..c7c559f72df 100644
--- a/packages/@react-stately/collections/src/useCollection.ts
+++ b/packages/@react-stately/collections/src/useCollection.ts
@@ -15,7 +15,7 @@ import {CollectionBuilder} from './CollectionBuilder';
 import {ReactElement, useMemo} from 'react';
 
 interface CollectionOptions<T, C extends Collection<Node<T>>> extends Omit<CollectionStateBase<T, C>, 'children'> {
-  children?: ReactElement<any> | ReactElement<any>[] | ((item: T) => ReactElement<any>)
+  children?: ReactElement<any> | null | (ReactElement<any> | null)[] | ((item: T) => ReactElement<any> | null)
 }
 
 type CollectionFactory<T, C extends Collection<Node<T>>> = (node: Iterable<Node<T>>) => C;
diff --git a/packages/@react-stately/data/src/useAsyncList.ts b/packages/@react-stately/data/src/useAsyncList.ts
index a36dc64b552..89ec81d698b 100644
--- a/packages/@react-stately/data/src/useAsyncList.ts
+++ b/packages/@react-stately/data/src/useAsyncList.ts
@@ -29,10 +29,10 @@ export interface AsyncListOptions<T, C> {
    * An optional function that performs sorting. If not provided,
    * then `sortDescriptor` is passed to the `load` function.
    */
-  sort?: AsyncListLoadFunction<T, C>
+  sort?: AsyncListLoadFunction<T, C, AsyncListLoadOptions<T, C> & {sortDescriptor: SortDescriptor}>
 }
 
-type AsyncListLoadFunction<T, C> = (state: AsyncListLoadOptions<T, C>) => AsyncListStateUpdate<T, C> | Promise<AsyncListStateUpdate<T, C>>;
+type AsyncListLoadFunction<T, C, S extends AsyncListLoadOptions<T, C> = AsyncListLoadOptions<T, C>> = (state: S) => AsyncListStateUpdate<T, C> | Promise<AsyncListStateUpdate<T, C>>;
 
 interface AsyncListLoadOptions<T, C> {
   /** The items currently in the list. */
@@ -40,7 +40,7 @@ interface AsyncListLoadOptions<T, C> {
   /** The keys of the currently selected items in the list. */
   selectedKeys: Selection,
   /** The current sort descriptor for the list. */
-  sortDescriptor: SortDescriptor,
+  sortDescriptor?: SortDescriptor,
   /** An abort signal used to notify the load function that the request has been aborted. */
   signal: AbortSignal,
   /** The pagination cursor returned from the last page load. */
@@ -133,7 +133,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
         case 'update':
           return {
             ...data,
-            ...action.updater(data)
+            ...action.updater?.(data)
           };
         case 'success':
         case 'error':
@@ -158,10 +158,10 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
             ...data,
             filterText: action.filterText ?? data.filterText,
             state: 'idle',
-            items: [...action.items],
+            items: [...(action.items) ?? []],
             selectedKeys: selectedKeys === 'all' ? 'all' : new Set(selectedKeys),
             sortDescriptor: action.sortDescriptor ?? data.sortDescriptor,
-            abortController: null,
+            abortController: undefined,
             cursor: action.cursor
           };
         case 'error':
@@ -173,7 +173,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
             ...data,
             state: 'error',
             error: action.error,
-            abortController: null
+            abortController: undefined
           };
         case 'loading':
         case 'loadingMore':
@@ -181,7 +181,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
         case 'filtering':
           // We're already loading, and another load was triggered at the same time.
           // We need to abort the previous load and start a new one.
-          data.abortController.abort();
+          data.abortController?.abort();
           return {
             ...data,
             filterText: action.filterText ?? data.filterText,
@@ -195,7 +195,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
           // Update data but don't abort previous load.
           return {
             ...data,
-            ...action.updater(data)
+            ...action.updater?.(data)
           };
         default:
           throw new Error(`Invalid action "${action.type}" in state "${data.state}"`);
@@ -210,10 +210,10 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
           return {
             ...data,
             state: 'idle',
-            items: [...data.items, ...action.items],
+            items: [...data.items, ...(action.items ?? [])],
             selectedKeys,
             sortDescriptor: action.sortDescriptor ?? data.sortDescriptor,
-            abortController: null,
+            abortController: undefined,
             cursor: action.cursor
           };
         case 'error':
@@ -231,7 +231,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
         case 'filtering':
           // We're already loading more, and another load was triggered at the same time.
           // We need to abort the previous load more and start a new one.
-          data.abortController.abort();
+          data.abortController?.abort();
           return {
             ...data,
             filterText: action.filterText ?? data.filterText,
@@ -244,7 +244,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
           // If already loading more and another loading more is triggered, abort the new load more since
           // it is a duplicate request since the cursor hasn't been updated.
           // Do not overwrite the data.abortController
-          action.abortController.abort();
+          action.abortController?.abort();
 
           return data;
         case 'update':
@@ -252,7 +252,7 @@ function reducer<T, C>(data: AsyncListState<T, C>, action: Action<T, C>): AsyncL
           // Update data but don't abort previous load.
           return {
             ...data,
-            ...action.updater(data)
+            ...action.updater?.(data)
           };
         default:
           throw new Error(`Invalid action "${action.type}" in state "${data.state}"`);
@@ -278,7 +278,7 @@ export function useAsyncList<T, C = string>(options: AsyncListOptions<T, C>): As
 
   let [data, dispatch] = useReducer<AsyncListState<T, C>, [Action<T, C>]>(reducer, {
     state: 'idle',
-    error: null,
+    error: undefined,
     items: [],
     selectedKeys: initialSelectedKeys === 'all' ? 'all' : new Set(initialSelectedKeys),
     sortDescriptor: initialSortDescriptor,
@@ -296,7 +296,7 @@ export function useAsyncList<T, C = string>(options: AsyncListOptions<T, C>): As
         selectedKeys: data.selectedKeys,
         sortDescriptor: action.sortDescriptor ?? data.sortDescriptor,
         signal: abortController.signal,
-        cursor: action.type === 'loadingMore' ? data.cursor : null,
+        cursor: action.type === 'loadingMore' ? data.cursor : undefined,
         filterText: previousFilterText
       });
 
@@ -309,7 +309,7 @@ export function useAsyncList<T, C = string>(options: AsyncListOptions<T, C>): As
         dispatchFetch({type: 'filtering', filterText}, load);
       }
     } catch (e) {
-      dispatch({type: 'error', error: e, abortController});
+      dispatch({type: 'error', error: e as Error, abortController});
     }
   };
 
@@ -345,7 +345,7 @@ export function useAsyncList<T, C = string>(options: AsyncListOptions<T, C>): As
       dispatchFetch({type: 'loadingMore'}, load);
     },
     sort(sortDescriptor: SortDescriptor) {
-      dispatchFetch({type: 'sorting', sortDescriptor}, sort || load);
+      dispatchFetch({type: 'sorting', sortDescriptor}, (sort || load) as AsyncListLoadFunction<T, C>);
     },
     ...createListActions({...options, getKey, cursor: data.cursor}, fn => {
       dispatch({type: 'update', updater: fn});
diff --git a/packages/@react-stately/data/src/useListData.ts b/packages/@react-stately/data/src/useListData.ts
index a8329b1e593..1e8b6a840e5 100644
--- a/packages/@react-stately/data/src/useListData.ts
+++ b/packages/@react-stately/data/src/useListData.ts
@@ -46,7 +46,7 @@ export interface ListData<T> {
    * Gets an item from the list by key.
    * @param key - The key of the item to retrieve.
    */
-  getItem(key: Key): T,
+  getItem(key: Key): T | undefined,
 
   /**
    * Inserts items into the list at the given index.
@@ -186,7 +186,7 @@ export function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch:
     },
     insertBefore(key: Key, ...values: T[]) {
       dispatch(state => {
-        let index = state.items.findIndex(item => getKey(item) === key);
+        let index = state.items.findIndex(item => getKey?.(item) === key);
         if (index === -1) {
           if (state.items.length === 0) {
             index = 0;
@@ -200,7 +200,7 @@ export function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch:
     },
     insertAfter(key: Key, ...values: T[]) {
       dispatch(state => {
-        let index = state.items.findIndex(item => getKey(item) === key);
+        let index = state.items.findIndex(item => getKey?.(item) === key);
         if (index === -1) {
           if (state.items.length === 0) {
             index = 0;
@@ -221,7 +221,7 @@ export function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch:
     remove(...keys: Key[]) {
       dispatch(state => {
         let keySet = new Set(keys);
-        let items = state.items.filter(item => !keySet.has(getKey(item)));
+        let items = state.items.filter(item => !keySet.has(getKey!(item)));
 
         let selection: Selection = 'all';
         if (state.selectedKeys !== 'all') {
@@ -252,7 +252,7 @@ export function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch:
         }
 
         let selectedKeys = state.selectedKeys;
-        let items = state.items.filter(item => !selectedKeys.has(getKey(item)));
+        let items = state.items.filter(item => !selectedKeys.has(getKey!(item)));
         return {
           ...state,
           items,
@@ -262,7 +262,7 @@ export function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch:
     },
     move(key: Key, toIndex: number) {
       dispatch(state => {
-        let index = state.items.findIndex(item => getKey(item) === key);
+        let index = state.items.findIndex(item => getKey!(item) === key);
         if (index === -1) {
           return state;
         }
@@ -278,32 +278,32 @@ export function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch:
     },
     moveBefore(key: Key, keys: Iterable<Key>) {
       dispatch(state => {
-        let toIndex = state.items.findIndex(item => getKey(item) === key);
+        let toIndex = state.items.findIndex(item => getKey!(item) === key);
         if (toIndex === -1) {
           return state;
         }
 
         // Find indices of keys to move. Sort them so that the order in the list is retained.
         let keyArray = Array.isArray(keys) ? keys : [...keys];
-        let indices = keyArray.map(key => state.items.findIndex(item => getKey(item) === key)).sort((a, b) => a - b);
+        let indices = keyArray.map(key => state.items.findIndex(item => getKey!(item) === key)).sort((a, b) => a - b);
         return move(state, indices, toIndex);
       });
     },
     moveAfter(key: Key, keys: Iterable<Key>) {
       dispatch(state => {
-        let toIndex = state.items.findIndex(item => getKey(item) === key);
+        let toIndex = state.items.findIndex(item => getKey!(item) === key);
         if (toIndex === -1) {
           return state;
         }
 
         let keyArray = Array.isArray(keys) ? keys : [...keys];
-        let indices = keyArray.map(key => state.items.findIndex(item => getKey(item) === key)).sort((a, b) => a - b);
+        let indices = keyArray.map(key => state.items.findIndex(item => getKey!(item) === key)).sort((a, b) => a - b);
         return move(state, indices, toIndex + 1);
       });
     },
     update(key: Key, newValue: T) {
       dispatch(state => {
-        let index = state.items.findIndex(item => getKey(item) === key);
+        let index = state.items.findIndex(item => getKey!(item) === key);
         if (index === -1) {
           return state;
         }
diff --git a/packages/@react-stately/data/src/useTreeData.ts b/packages/@react-stately/data/src/useTreeData.ts
index 7f01bc3d5d4..580279b8e4c 100644
--- a/packages/@react-stately/data/src/useTreeData.ts
+++ b/packages/@react-stately/data/src/useTreeData.ts
@@ -28,11 +28,11 @@ interface TreeNode<T extends object> {
   /** A unique key for the tree node. */
   key: Key,
   /** The key of the parent node. */
-  parentKey: Key,
+  parentKey?: Key | null,
   /** The value object for the tree node. */
   value: T,
   /** Children of the tree node. */
-  children: TreeNode<T>[]
+  children: TreeNode<T>[] | null
 }
 
 export interface TreeData<T extends object> {
@@ -49,7 +49,7 @@ export interface TreeData<T extends object> {
    * Gets a node from the tree by key.
    * @param key - The key of the item to retrieve.
    */
-  getItem(key: Key): TreeNode<T>,
+  getItem(key: Key): TreeNode<T> | undefined,
 
   /**
    * Inserts an item into a parent node as a child.
@@ -154,7 +154,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     };
   }
 
-  function updateTree(items: TreeNode<T>[], key: Key, update: (node: TreeNode<T>) => TreeNode<T>, originalMap: Map<Key, TreeNode<T>>) {
+  function updateTree(items: TreeNode<T>[], key: Key, update: (node: TreeNode<T>) => TreeNode<T> | null, originalMap: Map<Key, TreeNode<T>>) {
     let node = originalMap.get(key);
     if (!node) {
       return {items, nodeMap: originalMap};
@@ -170,8 +170,8 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     }
 
     // Walk up the tree and update each parent to refer to the new children.
-    while (node.parentKey) {
-      let nextParent = map.get(node.parentKey);
+    while (node && node.parentKey) {
+      let nextParent = map.get(node.parentKey)!;
       let copy: TreeNode<T> = {
         key: nextParent.key,
         parentKey: nextParent.parentKey,
@@ -180,17 +180,18 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
       };
 
       let children = nextParent.children;
-      if (newNode == null) {
+      if (newNode == null && children) {
         children = children.filter(c => c !== node);
       }
 
-      copy.children = children.map(child => {
+      copy.children = children?.map(child => {
         if (child === node) {
-          return newNode;
+          // newNode cannot be null here due to the above filter.
+          return newNode!;
         }
 
         return child;
-      });
+      }) ?? null;
 
       map.set(copy.key, copy);
 
@@ -205,7 +206,8 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     return {
       items: items.map(item => {
         if (item === node) {
-          return newNode;
+          // newNode cannot be null here due to the above filter.
+          return newNode!;
         }
 
         return item;
@@ -216,15 +218,19 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
 
   function addNode(node: TreeNode<T>, map: Map<Key, TreeNode<T>>) {
     map.set(node.key, node);
-    for (let child of node.children) {
-      addNode(child, map);
+    if (node.children) {
+      for (let child of node.children) {
+        addNode(child, map);
+      }
     }
   }
 
   function deleteNode(node: TreeNode<T>, map: Map<Key, TreeNode<T>>) {
     map.delete(node.key);
-    for (let child of node.children) {
-      deleteNode(child, map);
+    if (node.children) {
+      for (let child of node.children) {
+        deleteNode(child, map);
+      }
     }
   }
 
@@ -257,9 +263,9 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
           parentKey: parentNode.parentKey,
           value: parentNode.value,
           children: [
-            ...parentNode.children.slice(0, index),
+            ...parentNode.children!.slice(0, index),
             ...newNodes,
-            ...parentNode.children.slice(index)
+            ...parentNode.children!.slice(index)
           ]
         }), newMap);
       });
@@ -270,10 +276,10 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
         return;
       }
 
-      let parentNode = nodeMap.get(node.parentKey);
+      let parentNode = nodeMap.get(node.parentKey!);
       let nodes = parentNode ? parentNode.children : items;
-      let index = nodes.indexOf(node);
-      this.insert(parentNode?.key, index, ...values);
+      let index = nodes!.indexOf(node);
+      this.insert(parentNode?.key ?? null, index, ...values);
     },
     insertAfter(key: Key, ...values: T[]): void {
       let node = nodeMap.get(key);
@@ -281,10 +287,10 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
         return;
       }
 
-      let parentNode = nodeMap.get(node.parentKey);
+      let parentNode = nodeMap.get(node.parentKey!);
       let nodes = parentNode ? parentNode.children : items;
-      let index = nodes.indexOf(node);
-      this.insert(parentNode?.key, index + 1, ...values);
+      let index = nodes!.indexOf(node);
+      this.insert(parentNode?.key ?? null, index + 1, ...values);
     },
     prepend(parentKey: Key | null, ...values: T[]) {
       this.insert(parentKey, 0, ...values);
@@ -298,7 +304,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
           return;
         }
 
-        this.insert(parentKey, parentNode.children.length, ...values);
+        this.insert(parentKey, parentNode.children!.length, ...values);
       }
     },
     remove(...keys: Key[]) {
@@ -360,9 +366,9 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
           parentKey: parentNode.parentKey,
           value: parentNode.value,
           children: [
-            ...parentNode.children.slice(0, index),
+            ...parentNode.children!.slice(0, index),
             movedNode,
-            ...parentNode.children.slice(index)
+            ...parentNode.children!.slice(index)
           ]
         }), newMap);
       });
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index dee106f2c50..da1eed6d66c 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -12,7 +12,7 @@
 
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
 import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
-import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {DatePickerProps, DateValue, Granularity, MappedDateValue} from '@react-types/datepicker';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
@@ -41,13 +41,13 @@ export interface DateSegment {
 
 export interface DateFieldState extends FormValidationState {
   /** The current field value. */
-  value: DateValue,
+  value: DateValue | null,
   /** The current value, converted to a native JavaScript `Date` object.  */
   dateValue: Date,
   /** The calendar system currently in use. */
   calendar: Calendar,
   /** Sets the field's value. */
-  setValue(value: DateValue): void,
+  setValue(value: DateValue | null): void,
   /** A list of segments for the current value. */
   segments: DateSegment[],
   /** A date formatter configured for the current locale and format. */
@@ -56,7 +56,7 @@ export interface DateFieldState extends FormValidationState {
    * The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props.
    * @deprecated Use `isInvalid` instead.
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** The granularity for the field, based on the `granularity` prop and current value. */
@@ -150,15 +150,15 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     locale,
     createCalendar,
     hideTimeZone,
-    isDisabled,
-    isReadOnly,
-    isRequired,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
     minValue,
     maxValue,
     isDateUnavailable
   } = props;
 
-  let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
+  let v: DateValue | null = props.value || props.defaultValue || props.placeholderValue || null;
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let timeZone = defaultTimeZone || 'UTC';
 
@@ -170,13 +170,13 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   let defaultFormatter = useMemo(() => new DateFormatter(locale), [locale]);
   let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar), [createCalendar, defaultFormatter]);
 
-  let [value, setDate] = useControlledState<DateValue>(
+  let [value, setDate] = useControlledState<DateValue | null, MappedDateValue<T> | null>(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     props.onChange
   );
 
-  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
+  let calendarValue = useMemo(() => convertValue(value, calendar) ?? null, [value, calendar]);
 
   // We keep track of the placeholder date separately in state so that onChange is not called
   // until all segments are set. If the value === null (not undefined), then assume the component
@@ -214,7 +214,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     () => props.value || props.defaultValue ? {...allSegments} : {}
   );
 
-  let clearedSegment = useRef<string>(undefined);
+  let clearedSegment = useRef<string | null>(null);
 
   // Reset placeholder when calendar changes
   let lastCalendarIdentifier = useRef(calendar.identifier);
@@ -330,12 +330,12 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
 
   let validation = useFormValidationState({
     ...props,
-    value,
+    value: value as MappedDateValue<T> | null,
     builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     ...validation,
@@ -519,6 +519,8 @@ function addSegment(value: DateValue, part: string, amount: number, options: Int
         });
     }
   }
+
+  throw new Error('Unknown segment: ' + part);
 }
 
 function setSegment(value: DateValue, part: string, segmentValue: number | string, options: Intl.ResolvedDateTimeFormatOptions) {
@@ -559,4 +561,6 @@ function setSegment(value: DateValue, part: string, segmentValue: number | strin
         return value.set({[part]: segmentValue});
     }
   }
+
+  throw new Error('Unknown segment: ' + part);
 }
diff --git a/packages/@react-stately/datepicker/src/useDatePickerState.ts b/packages/@react-stately/datepicker/src/useDatePickerState.ts
index ad80980784c..2b2f1980968 100644
--- a/packages/@react-stately/datepicker/src/useDatePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDatePickerState.ts
@@ -11,7 +11,7 @@
  */
 
 import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
-import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
@@ -36,14 +36,14 @@ export interface DatePickerState extends OverlayTriggerState, FormValidationStat
    * The date portion of the value. This may be set prior to `value` if the user has
    * selected a date but has not yet selected a time.
    */
-  dateValue: DateValue,
+  dateValue: DateValue | null,
   /** Sets the date portion of the value. */
   setDateValue(value: DateValue): void,
   /**
    * The time portion of the value. This may be set prior to `value` if the user has
    * selected a time but has not yet selected a date.
    */
-  timeValue: TimeValue,
+  timeValue: TimeValue | null,
   /** Sets the time portion of the value. */
   setTimeValue(value: TimeValue): void,
   /** The granularity for the field, based on the `granularity` prop and current value. */
@@ -58,7 +58,7 @@ export interface DatePickerState extends OverlayTriggerState, FormValidationStat
    * The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props.
    * @deprecated Use `isInvalid` instead.
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** Formats the selected value using the given options. */
@@ -73,16 +73,16 @@ export interface DatePickerState extends OverlayTriggerState, FormValidationStat
  */
 export function useDatePickerState<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerState {
   let overlayState = useOverlayTriggerState(props);
-  let [value, setValue] = useControlledState<DateValue>(props.value, props.defaultValue || null, props.onChange);
+  let [value, setValue] = useControlledState<DateValue | null, MappedDateValue<T> | null>(props.value, props.defaultValue || null, props.onChange);
 
-  let v = (value || props.placeholderValue);
+  let v = (value || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
-  let [selectedDate, setSelectedDate] = useState<DateValue>(null);
-  let [selectedTime, setSelectedTime] = useState<TimeValue>(null);
+  let [selectedDate, setSelectedDate] = useState<DateValue | null>(null);
+  let [selectedTime, setSelectedTime] = useState<TimeValue | null>(null);
 
   if (value) {
     selectedDate = value;
@@ -117,12 +117,12 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
 
   let validation = useFormValidationState({
     ...props,
-    value,
+    value: value as MappedDateValue<T> | null,
     builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   let commitValue = (date: DateValue, time: TimeValue) => {
     setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index 292d6f4f960..68e2e3e5b3a 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -12,7 +12,7 @@
 
 
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
-import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
@@ -31,29 +31,29 @@ export interface DateRangePickerStateOptions<T extends DateValue = DateValue> ex
 type TimeRange = RangeValue<TimeValue>;
 export interface DateRangePickerState extends OverlayTriggerState, FormValidationState {
   /** The currently selected date range. */
-  value: DateRange | null,
+  value: RangeValue<DateValue | null>,
   /** Sets the selected date range. */
   setValue(value: DateRange | null): void,
   /**
    * The date portion of the selected range. This may be set prior to `value` if the user has
    * selected a date range but has not yet selected a time range.
    */
-  dateRange: DateRange | null,
+  dateRange: RangeValue<DateValue | null> | null,
   /** Sets the date portion of the selected range. */
-  setDateRange(value: DateRange | null): void,
+  setDateRange(value: DateRange): void,
   /**
    * The time portion of the selected range. This may be set prior to `value` if the user has
    * selected a time range but has not yet selected a date range.
    */
-  timeRange: TimeRange | null,
+  timeRange: RangeValue<TimeValue | null> | null,
   /** Sets the time portion of the selected range. */
   setTimeRange(value: TimeRange): void,
   /** Sets the date portion of either the start or end of the selected range. */
-  setDate(part: 'start' | 'end', value: DateValue): void,
+  setDate(part: 'start' | 'end', value: DateValue | null): void,
   /** Sets the time portion of either the start or end of the selected range. */
-  setTime(part: 'start' | 'end', value: TimeValue): void,
+  setTime(part: 'start' | 'end', value: TimeValue | null): void,
   /** Sets the date and time of either the start or end of the selected range. */
-  setDateTime(part: 'start' | 'end', value: DateValue): void,
+  setDateTime(part: 'start' | 'end', value: DateValue | null): void,
   /** The granularity for the field, based on the `granularity` prop and current value. */
   granularity: Granularity,
   /** Whether the date range picker supports selecting times, according to the `granularity` prop and current value. */
@@ -66,11 +66,11 @@ export interface DateRangePickerState extends OverlayTriggerState, FormValidatio
    * The current validation state of the date range picker, based on the `validationState`, `minValue`, and `maxValue` props.
    * @deprecated Use `isInvalid` instead.
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** Formats the selected range using the given options. */
-  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string},
+  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string} | null,
   /** Gets a formatter based on state's props. */
   getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter
 }
@@ -82,8 +82,8 @@ export interface DateRangePickerState extends OverlayTriggerState, FormValidatio
  */
 export function useDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerState {
   let overlayState = useOverlayTriggerState(props);
-  let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
-  let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
+  let [controlledValue, setControlledValue] = useControlledState<DateRange | null, RangeValue<MappedDateValue<T>> | null>(props.value, props.defaultValue || null, props.onChange);
+  let [placeholderValue, setPlaceholderValue] = useState<RangeValue<DateValue | null>>(() => controlledValue || {start: null, end: null});
 
   // Reset the placeholder if the value prop is set to null.
   if (controlledValue == null && placeholderValue.start && placeholderValue.end) {
@@ -93,24 +93,24 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
 
   let value = controlledValue || placeholderValue;
 
-  let setValue = (value: DateRange) => {
+  let setValue = (value: RangeValue<DateValue | null> | null) => {
     setPlaceholderValue(value || {start: null, end: null});
-    if (value?.start && value.end) {
+    if (isCompleteRange(value)) {
       setControlledValue(value);
     } else {
       setControlledValue(null);
     }
   };
 
-  let v = (value?.start || value?.end || props.placeholderValue);
+  let v = (value?.start || value?.end || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
-  let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
-  let [timeRange, setSelectedTimeRange] = useState<TimeRange>(null);
+  let [dateRange, setSelectedDateRange] = useState<RangeValue<DateValue | null> | null>(null);
+  let [timeRange, setSelectedTimeRange] = useState<RangeValue<TimeValue | null> | null>(null);
 
-  if (value && value.start && value.end) {
+  if (value && isCompleteRange(value)) {
     dateRange = value;
     if ('hour' in value.start) {
       timeRange = value as TimeRange;
@@ -128,10 +128,10 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
-  let setDateRange = (range: DateRange) => {
+  let setDateRange = (range: RangeValue<DateValue | null>) => {
     let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (shouldClose || (range.start && range.end && timeRange?.start && timeRange?.end)) {
+      if (isCompleteRange(range) && timeRange?.start && timeRange?.end) {
         commitValue(range, {
           start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
@@ -139,7 +139,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       } else {
         setSelectedDateRange(range);
       }
-    } else if (range.start && range.end) {
+    } else if (isCompleteRange(range)) {
       setValue(range);
       validation.commitValidation();
     } else {
@@ -151,8 +151,8 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
-  let setTimeRange = (range: TimeRange) => {
-    if (dateRange?.start && dateRange?.end && range.start && range.end) {
+  let setTimeRange = (range: RangeValue<TimeValue | null>) => {
+    if (isCompleteRange(dateRange) && isCompleteRange(range)) {
       commitValue(dateRange, range);
     } else {
       setSelectedTimeRange(range);
@@ -180,13 +180,13 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
 
   let validation = useFormValidationState({
     ...props,
-    value: controlledValue,
-    name: useMemo(() => [props.startName, props.endName], [props.startName, props.endName]),
+    value: controlledValue as RangeValue<MappedDateValue<T>> | null,
+    name: useMemo(() => [props.startName, props.endName].filter(n => n != null), [props.startName, props.endName]),
     builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     ...validation,
@@ -197,13 +197,25 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     granularity,
     hasTime,
     setDate(part, date) {
-      setDateRange({...dateRange, [part]: date});
+      if (part === 'start') {
+        setDateRange({start: date, end: dateRange?.end ?? null});
+      } else {
+        setDateRange({start: dateRange?.start ?? null, end: date});
+      }
     },
     setTime(part, time) {
-      setTimeRange({...timeRange, [part]: time});
+      if (part === 'start') {
+        setTimeRange({start: time, end: timeRange?.end ?? null});
+      } else {
+        setTimeRange({start: timeRange?.start ?? null, end: time});
+      }
     },
     setDateTime(part, dateTime) {
-      setValue({...value, [part]: dateTime});
+      if (part === 'start') {
+        setValue({start: dateTime, end: value?.end ?? null});
+      } else {
+        setValue({start: value?.start ?? null, end: dateTime});
+      }
     },
     setDateRange,
     setTimeRange,
@@ -212,7 +224,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
       // If only the time range was set and not the date range, don't commit. The state will be preserved until
       // the user opens the popover again.
-      if (!isOpen && !(value?.start && value?.end) && dateRange?.start && dateRange?.end && hasTime) {
+      if (!isOpen && !(value?.start && value?.end) && isCompleteRange(dateRange) && hasTime) {
         commitValue(dateRange, {
           start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
@@ -306,3 +318,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 }
+
+function isCompleteRange<T>(value: RangeValue<T | null> | null): value is RangeValue<T> {
+  return value?.start != null && value.end != null;
+}
diff --git a/packages/@react-stately/datepicker/src/useTimeFieldState.ts b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
index 410f765b8b6..4ff01e8b84a 100644
--- a/packages/@react-stately/datepicker/src/useTimeFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
@@ -11,7 +11,7 @@
  */
 
 import {DateFieldState, useDateFieldState} from '.';
-import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
+import {DateValue, MappedTimeValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
 import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date';
 import {useCallback, useMemo} from 'react';
 import {useControlledState} from '@react-stately/utils';
@@ -40,9 +40,9 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     validate
   } = props;
 
-  let [value, setValue] = useControlledState<TimeValue>(
+  let [value, setValue] = useControlledState<TimeValue | null, MappedTimeValue<T> | null>(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     props.onChange
   );
 
@@ -52,7 +52,7 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
   let placeholderDate = useMemo(() => {
     let valueTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
 
-    return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? toZoned(convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : convertValue(placeholderValue);
+    return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? toZoned(convertValue(placeholderValue)!, valueTimeZone || defaultValueTimeZone!) : convertValue(placeholderValue);
   }, [placeholderValue, v, defaultValueTimeZone]);
   let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]);
   let maxDate = useMemo(() => convertValue(maxValue, day), [maxValue, day]);
@@ -72,7 +72,7 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     onChange,
     granularity: granularity || 'minute',
     maxGranularity: 'hour',
-    placeholderValue: placeholderDate,
+    placeholderValue: placeholderDate ?? undefined,
     // Calendar should not matter for time fields.
     createCalendar: () => new GregorianCalendar(),
     validate: useCallback(() => validate?.(value as any), [validate, value])
@@ -84,7 +84,7 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
   };
 }
 
-function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {
+function convertValue(value: TimeValue | null | undefined, date: DateValue = today(getLocalTimeZone())) {
   if (!value) {
     return null;
   }
diff --git a/packages/@react-stately/datepicker/src/utils.ts b/packages/@react-stately/datepicker/src/utils.ts
index b9873fd7b62..152c1a47b09 100644
--- a/packages/@react-stately/datepicker/src/utils.ts
+++ b/packages/@react-stately/datepicker/src/utils.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
+import {Calendar, DateFormatter, getLocalTimeZone, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
 // @ts-ignore
 import i18nMessages from '../intl/*.json';
@@ -29,17 +29,17 @@ function getLocale() {
 }
 
 export function getValidationResult(
-  value: DateValue,
-  minValue: DateValue,
-  maxValue: DateValue,
-  isDateUnavailable: (v: DateValue) => boolean,
+  value: DateValue | null,
+  minValue: DateValue | null | undefined,
+  maxValue: DateValue | null | undefined,
+  isDateUnavailable: ((v: DateValue) => boolean) | undefined,
   options: FormatterOptions
 ): ValidationResult {
   let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;
   let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;
   let isUnavailable = (value != null && isDateUnavailable?.(value)) || false;
   let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
-  let errors = [];
+  let errors: string[] = [];
 
   if (isInvalid) {
     let locale = getLocale();
@@ -48,11 +48,11 @@ export function getValidationResult(
     let dateFormatter = new DateFormatter(locale, getFormatOptions({}, options));
     let timeZone = dateFormatter.resolvedOptions().timeZone;
 
-    if (rangeUnderflow) {
+    if (rangeUnderflow && minValue != null) {
       errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))}));
     }
 
-    if (rangeOverflow) {
+    if (rangeOverflow && maxValue != null) {
       errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))}));
     }
 
@@ -81,14 +81,14 @@ export function getValidationResult(
 }
 
 export function getRangeValidationResult(
-  value: RangeValue<DateValue>,
-  minValue: DateValue,
-  maxValue: DateValue,
-  isDateUnavailable: (v: DateValue) => boolean,
+  value: RangeValue<DateValue | null> | null,
+  minValue: DateValue | null | undefined,
+  maxValue: DateValue | null | undefined,
+  isDateUnavailable: ((v: DateValue) => boolean) | undefined,
   options: FormatterOptions
 ) {
   let startValidation = getValidationResult(
-    value?.start,
+    value?.start ?? null,
     minValue,
     maxValue,
     isDateUnavailable,
@@ -96,7 +96,7 @@ export function getRangeValidationResult(
   );
 
   let endValidation = getValidationResult(
-    value?.end,
+    value?.end ?? null,
     minValue,
     maxValue,
     isDateUnavailable,
@@ -104,7 +104,7 @@ export function getRangeValidationResult(
   );
 
   let result = mergeValidation(startValidation, endValidation);
-  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+  if (value?.end != null && value.start != null && value.end.compare(value.start) < 0) {
     let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;
     result = mergeValidation(result, {
       isInvalid: true,
@@ -195,7 +195,7 @@ export function getFormatOptions(
   return opts;
 }
 
-export function getPlaceholderTime(placeholderValue: DateValue): TimeValue {
+export function getPlaceholderTime(placeholderValue: DateValue | null | undefined): TimeValue {
   if (placeholderValue && 'hour' in placeholderValue) {
     return placeholderValue;
   }
@@ -203,7 +203,7 @@ export function getPlaceholderTime(placeholderValue: DateValue): TimeValue {
   return new Time();
 }
 
-export function convertValue(value: DateValue, calendar: Calendar): DateValue {
+export function convertValue(value: DateValue | null | undefined, calendar: Calendar): DateValue | null | undefined {
   if (value === null) {
     return null;
   }
@@ -216,12 +216,12 @@ export function convertValue(value: DateValue, calendar: Calendar): DateValue {
 }
 
 
-export function createPlaceholderDate(placeholderValue: DateValue, granularity: string, calendar: Calendar, timeZone: string) {
+export function createPlaceholderDate(placeholderValue: DateValue | null | undefined, granularity: string, calendar: Calendar, timeZone: string | undefined): DateValue {
   if (placeholderValue) {
-    return convertValue(placeholderValue, calendar);
+    return convertValue(placeholderValue, calendar)!;
   }
 
-  let date = toCalendar(now(timeZone).set({
+  let date = toCalendar(now(timeZone ?? getLocalTimeZone()).set({
     hour: 0,
     minute: 0,
     second: 0,
@@ -239,7 +239,7 @@ export function createPlaceholderDate(placeholderValue: DateValue, granularity:
   return date;
 }
 
-export function useDefaultProps(v: DateValue, granularity: Granularity): [Granularity, string] {
+export function useDefaultProps(v: DateValue | null, granularity: Granularity | undefined): [Granularity, string | undefined] {
   // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
   let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);
   let defaultGranularity: Granularity = (v && 'minute' in v ? 'minute' : 'day');
@@ -249,7 +249,7 @@ export function useDefaultProps(v: DateValue, granularity: Granularity): [Granul
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
-  let [lastValue, setLastValue] = useState<[Granularity, string]>([defaultGranularity, defaultTimeZone]);
+  let [lastValue, setLastValue] = useState<[Granularity, string | undefined]>([defaultGranularity, defaultTimeZone]);
 
   // If the granularity or time zone changed, update the last value.
   if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone)) {
diff --git a/packages/@react-stately/dnd/src/useDraggableCollectionState.ts b/packages/@react-stately/dnd/src/useDraggableCollectionState.ts
index 20147c66cc3..c0ba9e798ae 100644
--- a/packages/@react-stately/dnd/src/useDraggableCollectionState.ts
+++ b/packages/@react-stately/dnd/src/useDraggableCollectionState.ts
@@ -69,7 +69,7 @@ export function useDraggableCollectionState(props: DraggableCollectionStateOptio
   } = props;
   let [, setDragging] = useState(false);
   let draggingKeys = useRef(new Set<Key>());
-  let draggedKey = useRef(null);
+  let draggedKey = useRef<Key | null>(null);
   let getKeys = (key: Key) => {
     // The clicked item is always added to the drag. If it is selected, then all of the
     // other selected items are also dragged. If it is not selected, the only the clicked
diff --git a/packages/@react-stately/dnd/src/useDroppableCollectionState.ts b/packages/@react-stately/dnd/src/useDroppableCollectionState.ts
index d86783cd8c3..688c7315bb8 100644
--- a/packages/@react-stately/dnd/src/useDroppableCollectionState.ts
+++ b/packages/@react-stately/dnd/src/useDroppableCollectionState.ts
@@ -43,7 +43,7 @@ export interface DroppableCollectionState {
   /** Sets the current drop target. */
   setTarget(target: DropTarget | null): void,
   /** Returns whether the given target is equivalent to the current drop target. */
-  isDropTarget(target: DropTarget): boolean,
+  isDropTarget(target: DropTarget | null): boolean,
   /** Returns the drop operation for the given parameters. */
   getDropOperation(e: DropOperationEvent): DropOperation
 }
diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts
index 360f8294915..4dd785d6111 100644
--- a/packages/@react-stately/form/src/useFormValidationState.ts
+++ b/packages/@react-stately/form/src/useFormValidationState.ts
@@ -46,7 +46,7 @@ export const privateValidationStateProp = '__formValidationState' + Date.now();
 interface FormValidationProps<T> extends Validation<T> {
   builtinValidation?: ValidationResult,
   name?: string | string[],
-  value: T
+  value: T | null
 }
 
 export interface FormValidationState {
@@ -89,10 +89,16 @@ function useFormValidationStateImpl<T>(props: FormValidationProps<T>): FormValid
   } : null;
 
   // Perform custom client side validation.
-  let clientError: ValidationResult | null = useMemo(() => getValidationResult(runValidate(validate, value)), [validate, value]);
+  let clientError: ValidationResult | null = useMemo(() => {
+    if (!validate || value == null) {
+      return null;
+    }
+    let validateErrors = runValidate(validate, value);
+    return getValidationResult(validateErrors);
+  }, [validate, value]);
 
   if (builtinValidation?.validationDetails.valid) {
-    builtinValidation = null;
+    builtinValidation = undefined;
   }
 
   // Get relevant server errors from the form.
@@ -217,7 +223,7 @@ function isEqualValidation(a: ValidationResult | null, b: ValidationResult | nul
     return true;
   }
 
-  return a && b
+  return !!a && !!b
     && a.isInvalid === b.isInvalid
     && a.validationErrors.length === b.validationErrors.length
     && a.validationErrors.every((a, i) => a === b.validationErrors[i])
diff --git a/packages/@react-stately/grid/src/GridCollection.ts b/packages/@react-stately/grid/src/GridCollection.ts
index aef3c489268..daeb09a4771 100644
--- a/packages/@react-stately/grid/src/GridCollection.ts
+++ b/packages/@react-stately/grid/src/GridCollection.ts
@@ -24,7 +24,7 @@ export class GridCollection<T> implements IGridCollection<T> {
   columnCount: number;
   rows: GridNode<T>[];
 
-  constructor(opts?: GridCollectionOptions<T>) {
+  constructor(opts: GridCollectionOptions<T>) {
     this.keyMap = new Map();
     this.columnCount = opts?.columnCount;
     this.rows = [];
@@ -41,7 +41,7 @@ export class GridCollection<T> implements IGridCollection<T> {
       this.keyMap.set(node.key, node);
 
       let childKeys = new Set();
-      let last: GridNode<T>;
+      let last: GridNode<T> | null = null;
       for (let child of node.childNodes) {
         if (child.type === 'cell' && child.parentKey == null) {
           // if child is a cell parent key isn't already established by the collection, match child node to parent row
@@ -83,19 +83,20 @@ export class GridCollection<T> implements IGridCollection<T> {
       }
     };
 
-    let last: GridNode<T>;
-    opts.items.forEach((node, i) => {
-      let rowNode = {
-        level: 0,
-        key: 'row-' + i,
-        type: 'row',
-        value: undefined,
+    let last: GridNode<T> | null = null;
+    for (let [i, node] of opts.items.entries()) {
+      let rowNode: GridNode<T> = {
+        ...node,
+        level: node.level ?? 0,
+        key: node.key ?? 'row-' + i,
+        type: node.type ?? 'row',
+        value: node.value ?? null,
         hasChildNodes: true,
         childNodes: [...node.childNodes],
-        rendered: undefined,
-        textValue: undefined,
-        ...node
-      } as GridNode<T>;
+        rendered: node.rendered,
+        textValue: node.textValue ?? '',
+        index: node.index ?? i
+      };
 
       if (last) {
         last.nextKey = rowNode.key;
@@ -108,7 +109,7 @@ export class GridCollection<T> implements IGridCollection<T> {
       visit(rowNode);
 
       last = rowNode;
-    });
+    }
 
     if (last) {
       last.nextKey = null;
@@ -137,11 +138,11 @@ export class GridCollection<T> implements IGridCollection<T> {
     return node ? node.nextKey ?? null : null;
   }
 
-  getFirstKey() {
+  getFirstKey(): Key | null {
     return [...this.rows][0]?.key;
   }
 
-  getLastKey() {
+  getLastKey(): Key | null {
     let rows = [...this.rows];
     return rows[rows.length - 1]?.key;
   }
diff --git a/packages/@react-stately/grid/src/useGridState.ts b/packages/@react-stately/grid/src/useGridState.ts
index 0c47a1db0c1..818c23391cb 100644
--- a/packages/@react-stately/grid/src/useGridState.ts
+++ b/packages/@react-stately/grid/src/useGridState.ts
@@ -41,9 +41,9 @@ export function useGridState<T extends object, C extends GridCollection<T>>(prop
       if (item?.type === 'item') {
         let children = getChildNodes(item, collection);
         if (child === 'last') {
-          key = getLastItem(children)?.key;
+          key = getLastItem(children)?.key ?? null;
         } else {
-          key = getFirstItem(children)?.key;
+          key = getFirstItem(children)?.key ?? null;
         }
       }
     }
@@ -57,14 +57,18 @@ export function useGridState<T extends object, C extends GridCollection<T>>(prop
   );
 
   // Reset focused key if that item is deleted from the collection.
-  const cachedCollection = useRef(null);
+  const cachedCollection = useRef<C | null>(null);
   useEffect(() => {
-    if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
+    if (selectionState.focusedKey != null && cachedCollection.current && !collection.getItem(selectionState.focusedKey)) {
       const node = cachedCollection.current.getItem(selectionState.focusedKey);
       const parentNode =
-        node.parentKey != null && (node.type === 'cell' || node.type === 'rowheader' || node.type === 'column') ?
+        node?.parentKey != null && (node.type === 'cell' || node.type === 'rowheader' || node.type === 'column') ?
         cachedCollection.current.getItem(node.parentKey) :
         node;
+      if (!parentNode) {
+        selectionState.setFocusedKey(null);
+        return;
+      }
       const cachedRows = cachedCollection.current.rows;
       const rows = collection.rows;
       const diff = cachedRows.length - rows.length;
@@ -75,7 +79,7 @@ export function useGridState<T extends object, C extends GridCollection<T>>(prop
           parentNode.index
         ),
         rows.length - 1);
-      let newRow:GridNode<T>;
+      let newRow: GridNode<T> | null = null;
       while (index >= 0) {
         if (!selectionManager.isDisabled(rows[index].key) && rows[index].type !== 'headerrow') {
           newRow = rows[index];
@@ -97,6 +101,7 @@ export function useGridState<T extends object, C extends GridCollection<T>>(prop
         const keyToFocus =
           newRow.hasChildNodes &&
           parentNode !== node &&
+          node &&
           node.index < childNodes.length ?
           childNodes[node.index].key :
           newRow.key;
diff --git a/packages/@react-stately/layout/src/GridLayout.ts b/packages/@react-stately/layout/src/GridLayout.ts
index 03eef6167bf..af94c5f8c9a 100644
--- a/packages/@react-stately/layout/src/GridLayout.ts
+++ b/packages/@react-stately/layout/src/GridLayout.ts
@@ -47,10 +47,10 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   protected minSpace: Size;
   protected maxColumns: number;
   protected dropIndicatorThickness: number;
-  protected itemSize: Size;
-  protected numColumns: number;
-  protected horizontalSpacing: number;
-  protected layoutInfos: LayoutInfo[];
+  protected itemSize: Size = new Size();
+  protected numColumns: number = 0;
+  protected horizontalSpacing: number = 0;
+  protected layoutInfos: LayoutInfo[] = [];
 
   constructor(options: GridLayoutOptions) {
     super();
@@ -62,7 +62,7 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   update(): void {
-    let visibleWidth = this.virtualizer.visibleRect.width;
+    let visibleWidth = this.virtualizer!.visibleRect.width;
 
     // The max item width is always the entire viewport.
     // If the max item height is infinity, scale in proportion to the max width.
@@ -92,7 +92,7 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
 
     this.layoutInfos = [];
-    for (let node of this.virtualizer.collection) {
+    for (let node of this.virtualizer!.collection) {
       this.layoutInfos.push(this.getLayoutInfoForNode(node));
     }
   }
@@ -102,8 +102,8 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
     let result = this.layoutInfos.slice(firstVisibleItem, lastVisibleItem + 1);
     let persistedIndices: number[] = [];
-    for (let key of this.virtualizer.persistedKeys) {
-      let item = this.virtualizer.collection.getItem(key);
+    for (let key of this.virtualizer!.persistedKeys) {
+      let item = this.virtualizer!.collection.getItem(key);
       if (item?.index != null) {
         persistedIndices.push(item.index);
       }
@@ -127,14 +127,14 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     let itemWidth = this.itemSize.width + this.horizontalSpacing;
     return Math.max(0,
       Math.min(
-        this.virtualizer.collection.size - 1,
+        this.virtualizer!.collection.size - 1,
         Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)
       )
     );
   }
 
   getLayoutInfo(key: Key): LayoutInfo | null {
-    let node = this.virtualizer.collection.getItem(key);
+    let node = this.virtualizer!.collection.getItem(key);
     return node ? this.layoutInfos[node.index] : null;
   }
 
@@ -149,9 +149,9 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   getContentSize(): Size {
-    let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
+    let numRows = Math.ceil(this.virtualizer!.collection.size / this.numColumns);
     let contentHeight = this.minSpace.height + numRows * (this.itemSize.height + this.minSpace.height);  
-    return new Size(this.virtualizer.visibleRect.width, contentHeight);
+    return new Size(this.virtualizer!.visibleRect.width, contentHeight);
   }
 
   getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
@@ -159,8 +159,8 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       return {type: 'root'};
     }
 
-    x += this.virtualizer.visibleRect.x;
-    y += this.virtualizer.visibleRect.y;
+    x += this.virtualizer!.visibleRect.x;
+    y += this.virtualizer!.visibleRect.y;
     let index = this.getIndexAtPoint(x, y);
 
     let layoutInfo = this.layoutInfos[index];
@@ -195,7 +195,7 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
-    let layoutInfo = this.getLayoutInfo(target.key);
+    let layoutInfo = this.getLayoutInfo(target.key)!;
     let rect: Rect;
     if (this.numColumns === 1) {
       // Flip from vertical to horizontal if only one column is visible.
diff --git a/packages/@react-stately/layout/src/ListLayout.ts b/packages/@react-stately/layout/src/ListLayout.ts
index f8c39b6607f..01df3e609ef 100644
--- a/packages/@react-stately/layout/src/ListLayout.ts
+++ b/packages/@react-stately/layout/src/ListLayout.ts
@@ -51,16 +51,15 @@ const DEFAULT_HEIGHT = 48;
  * the virtualizer itself).
  */
 export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
-  protected rowHeight: number;
-  protected estimatedRowHeight: number;
-  protected headingHeight: number;
-  protected estimatedHeadingHeight: number;
-  protected loaderHeight: number;
+  protected rowHeight: number | null;
+  protected estimatedRowHeight: number | null;
+  protected headingHeight: number | null;
+  protected estimatedHeadingHeight: number | null;
+  protected loaderHeight: number | null;
   protected dropIndicatorThickness: number;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
-  protected collection: Collection<Node<T>>;
-  private lastCollection: Collection<Node<T>>;
+  protected lastCollection: Collection<Node<T>> | null;
   private lastWidth: number;
   protected rootNodes: LayoutNode[];
   private invalidateEverything: boolean;
@@ -75,21 +74,27 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
    */
   constructor(options: ListLayoutOptions = {}) {
     super();
-    this.rowHeight = options.rowHeight;
-    this.estimatedRowHeight = options.estimatedRowHeight;
-    this.headingHeight = options.headingHeight;
-    this.estimatedHeadingHeight = options.estimatedHeadingHeight;
-    this.loaderHeight = options.loaderHeight;
+    this.rowHeight = options.rowHeight ?? null;
+    this.estimatedRowHeight = options.estimatedRowHeight ?? null;
+    this.headingHeight = options.headingHeight ?? null;
+    this.estimatedHeadingHeight = options.estimatedHeadingHeight ?? null;
+    this.loaderHeight = options.loaderHeight ?? null;
     this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
     this.layoutNodes = new Map();
     this.rootNodes = [];
     this.lastWidth = 0;
     this.lastCollection = null;
+    this.invalidateEverything = false;
     this.validRect = new Rect();
     this.requestedRect = new Rect();
     this.contentSize = new Size();
   }
 
+  // Backward compatibility for subclassing.
+  protected get collection(): Collection<Node<T>> {
+    return this.virtualizer!.collection;
+  }
+
   getLayoutInfo(key: Key) {
     this.ensureLayoutInfo(key);
     return this.layoutNodes.get(key)?.layoutInfo || null;
@@ -99,7 +104,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     // Adjust rect to keep number of visible rows consistent.
     // (only if height > 1 for getDropTargetFromPoint)
     if (rect.height > 1) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
+      let rowHeight = this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT;
       rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
       rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
     }
@@ -137,7 +142,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     }
     
     // Ensure all of the persisted keys are available.
-    for (let key of this.virtualizer.persistedKeys) {
+    for (let key of this.virtualizer!.persistedKeys) {
       if (this.ensureLayoutInfo(key)) {
         return;
       }
@@ -159,32 +164,32 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected isVisible(node: LayoutNode, rect: Rect) {
-    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer.isPersistedKey(node.layoutInfo.key);
+    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer!.isPersistedKey(node.layoutInfo.key);
   }
 
   protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>) {
     // Invalidate cache if the size of the collection changed.
     // In this case, we need to recalculate the entire layout.
-    return invalidationContext.sizeChanged;
+    return invalidationContext.sizeChanged || false;
   }
 
   update(invalidationContext: InvalidationContext<O>) {
-    this.collection = this.virtualizer.collection;
+    let collection = this.virtualizer!.collection;
 
     // Reset valid rect if we will have to invalidate everything.
     // Otherwise we can reuse cached layout infos outside the current visible rect.
     this.invalidateEverything = this.shouldInvalidateEverything(invalidationContext);
     if (this.invalidateEverything) {
-      this.requestedRect = this.virtualizer.visibleRect.copy();
+      this.requestedRect = this.virtualizer!.visibleRect.copy();
       this.layoutNodes.clear();
     }
 
     this.rootNodes = this.buildCollection();
 
     // Remove deleted layout nodes
-    if (this.lastCollection && this.collection !== this.lastCollection) {
+    if (this.lastCollection && collection !== this.lastCollection) {
       for (let key of this.lastCollection.getKeys()) {
-        if (!this.collection.getItem(key)) {
+        if (!collection.getItem(key)) {
           let layoutNode = this.layoutNodes.get(key);
           if (layoutNode) {
             this.layoutNodes.delete(key);
@@ -193,17 +198,18 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       }
     }
 
-    this.lastWidth = this.virtualizer.visibleRect.width;
-    this.lastCollection = this.collection;
+    this.lastWidth = this.virtualizer!.visibleRect.width;
+    this.lastCollection = collection;
     this.invalidateEverything = false;
     this.validRect = this.requestedRect.copy();
   }
 
   protected buildCollection(y = 0): LayoutNode[] {
+    let collection = this.virtualizer!.collection;
     let skipped = 0;
-    let nodes = [];
-    for (let node of this.collection) {
-      let rowHeight = this.rowHeight ?? this.estimatedRowHeight;
+    let nodes: LayoutNode[] = [];
+    for (let node of collection) {
+      let rowHeight = this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT;
 
       // Skip rows before the valid rectangle unless they are already cached.
       if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -217,12 +223,12 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       nodes.push(layoutNode);
 
       if (node.type === 'item' && y > this.requestedRect.maxY) {
-        y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
+        y += (collection.size - (nodes.length + skipped)) * rowHeight;
         break;
       }
     }
 
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
+    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
     return nodes;
   }
 
@@ -240,7 +246,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
 
   protected buildChild(node: Node<T>, x: number, y: number, parentKey: Key | null): LayoutNode {
     if (this.isValid(node, y)) {
-      return this.layoutNodes.get(node.key);
+      return this.layoutNodes.get(node.key)!;
     }
 
     let layoutNode = this.buildNode(node, x, y);
@@ -260,14 +266,16 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
         return this.buildSectionHeader(node, x, y);
       case 'loader':
         return this.buildLoader(node, x, y);
+      default:
+        throw new Error('Unsupported node type: ' + node.type);
     }
   }
 
   protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {
     let rect = new Rect(x, y, 0, 0);
     let layoutInfo = new LayoutInfo('loader', node.key, rect);
-    rect.width = this.virtualizer.contentSize.width;
-    rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
+    rect.width = this.virtualizer!.contentSize.width;
+    rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || DEFAULT_HEIGHT;
 
     return {
       layoutInfo,
@@ -276,15 +284,16 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
-    let width = this.virtualizer.visibleRect.width;
+    let collection = this.virtualizer!.collection;
+    let width = this.virtualizer!.visibleRect.width;
     let rect = new Rect(0, y, width, 0);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
 
     let startY = y;
     let skipped = 0;
-    let children = [];
-    for (let child of getChildNodes(node, this.collection)) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
+    let children: LayoutNode[] = [];
+    for (let child of getChildNodes(node, collection)) {
+      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT);
 
       // Skip rows before the valid rectangle unless they are already cached.
       if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -299,7 +308,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
 
       if (y > this.requestedRect.maxY) {
         // Estimate the remaining height for rows that we don't need to layout right now.
-        y += ([...getChildNodes(node, this.collection)].length - (children.length + skipped)) * rowHeight;
+        y += ([...getChildNodes(node, collection)].length - (children.length + skipped)) * rowHeight;
         break;
       }
     }
@@ -315,7 +324,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
-    let width = this.virtualizer.visibleRect.width;
+    let width = this.virtualizer!.visibleRect.width;
     let rectHeight = this.headingHeight;
     let isEstimated = false;
 
@@ -327,7 +336,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       let previousLayoutNode = this.layoutNodes.get(node.key);
       let previousLayoutInfo = previousLayoutNode?.layoutInfo;
       if (previousLayoutInfo) {
-        let curNode = this.collection.getItem(node.key);
+        let curNode = this.virtualizer!.collection.getItem(node.key);
         let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
         rectHeight = previousLayoutInfo.rect.height;
         isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutInfo.estimatedSize;
@@ -353,7 +362,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
-    let width = this.virtualizer.visibleRect.width;
+    let width = this.virtualizer!.visibleRect.width;
     let rectHeight = this.rowHeight;
     let isEstimated = false;
 
@@ -394,6 +403,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       return false;
     }
 
+    let collection = this.virtualizer!.collection;
     let layoutInfo = layoutNode.layoutInfo;
     layoutInfo.estimatedSize = false;
     if (layoutInfo.rect.height !== size.height) {
@@ -412,10 +422,10 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       // Invalidate layout for this layout node and all parents
       this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
 
-      let node = this.collection.getItem(layoutInfo.parentKey);
+      let node = layoutInfo.parentKey != null ? collection.getItem(layoutInfo.parentKey) : null;
       while (node) {
         this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
-        node = this.collection.getItem(node.parentKey);
+        node = node.parentKey != null ? collection.getItem(node.parentKey) : null;
       }
 
       return true;
@@ -441,16 +451,20 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     return this.contentSize;
   }
 
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
-    x += this.virtualizer.visibleRect.x;
-    y += this.virtualizer.visibleRect.y;
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
+    x += this.virtualizer!.visibleRect.x;
+    y += this.virtualizer!.visibleRect.y;
 
-    let key = this.virtualizer.keyAtPoint(new Point(x, y));
-    if (key == null || this.collection.size === 0) {
+    let key = this.virtualizer!.keyAtPoint(new Point(x, y));
+    if (key == null || this.virtualizer!.collection.size === 0) {
       return {type: 'root'};
     }
 
     let layoutInfo = this.getLayoutInfo(key);
+    if (!layoutInfo) {
+      return null;
+    }
+
     let rect = layoutInfo.rect;
     let target: DropTarget = {
       type: 'item',
@@ -477,7 +491,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
-    let layoutInfo = this.getLayoutInfo(target.key);
+    let layoutInfo = this.getLayoutInfo(target.key)!;
     let rect: Rect;
     if (target.dropPosition === 'before') {
       rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts
index e80dbb042d3..07c943fa320 100644
--- a/packages/@react-stately/layout/src/TableLayout.ts
+++ b/packages/@react-stately/layout/src/TableLayout.ts
@@ -22,11 +22,13 @@ export interface TableLayoutProps {
   columnWidths?: Map<Key, number>
 }
 
+const DEFAULT_ROW_HEIGHT = 48;
+
 export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
-  protected collection: TableCollection<T>;
-  private columnWidths: Map<Key, number>;
+  protected lastCollection: TableCollection<T> | null = null;
+  private columnWidths: Map<Key, number> = new Map();
   private stickyColumnIndices: number[];
-  private lastPersistedKeys: Set<Key> = null;
+  private lastPersistedKeys: Set<Key> | null = null;
   private persistedIndices: Map<Key, number[]> = new Map();
 
   constructor(options: ListLayoutOptions) {
@@ -34,6 +36,11 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     this.stickyColumnIndices = [];
   }
 
+  // Backward compatibility for subclassing.
+  protected get collection(): TableCollection<T> {
+    return this.virtualizer!.collection as TableCollection<T>;
+  }
+
   private columnsChanged(newCollection: TableCollection<T>, oldCollection: TableCollection<T> | null) {
     return !oldCollection ||
       newCollection.columns !== oldCollection.columns &&
@@ -47,7 +54,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   update(invalidationContext: InvalidationContext<O>): void {
-    let newCollection = this.virtualizer.collection as TableCollection<T>;
+    let newCollection = this.virtualizer!.collection as TableCollection<T>;
 
     // If columnWidths were provided via layoutOptions, update those.
     // Otherwise, calculate column widths ourselves.
@@ -56,9 +63,9 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
         this.columnWidths = invalidationContext.layoutOptions.columnWidths;
         invalidationContext.sizeChanged = true;
       }
-    } else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.collection)) {
+    } else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
       let columnLayout = new TableColumnLayout({});
-      this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, newCollection, new Map());
+      this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer!.visibleRect.width, newCollection, new Map());
       invalidationContext.sizeChanged = true;
     }
 
@@ -68,10 +75,11 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   protected buildCollection(): LayoutNode[] {
     this.stickyColumnIndices = [];
 
-    for (let column of this.collection.columns) {
+    let collection = this.virtualizer!.collection as TableCollection<T>;
+    for (let column of collection.columns) {
       // The selection cell and any other sticky columns always need to be visible.
       // In addition, row headers need to be in the DOM for accessibility labeling.
-      if (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) {
+      if (this.isStickyColumn(column) || collection.rowHeaderColumnKeys.has(column.key)) {
         this.stickyColumnIndices.push(column.index);
       }
     }
@@ -90,15 +98,16 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   protected buildTableHeader(): LayoutNode {
+    let collection = this.virtualizer!.collection as TableCollection<T>;
     let rect = new Rect(0, 0, 0, 0);
-    let layoutInfo = new LayoutInfo('header', this.collection.head?.key ?? 'header', rect);
+    let layoutInfo = new LayoutInfo('header', collection.head?.key ?? 'header', rect);
     layoutInfo.isSticky = true;
     layoutInfo.zIndex = 1;
 
     let y = 0;
     let width = 0;
     let children: LayoutNode[] = [];
-    for (let headerRow of this.collection.headerRows) {
+    for (let headerRow of collection.headerRows) {
       let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);
       layoutNode.layoutInfo.parentKey = layoutInfo.key;
       y = layoutNode.layoutInfo.rect.maxY;
@@ -114,7 +123,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       layoutInfo,
       children,
       validRect: layoutInfo.rect,
-      node: this.collection.head
+      node: collection.head
     };
   }
 
@@ -124,7 +133,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     let height = 0;
     let columns: LayoutNode[] = [];
-    for (let cell of getChildNodes(headerRow, this.collection)) {
+    for (let cell of getChildNodes(headerRow, this.virtualizer!.collection)) {
       let layoutNode = this.buildChild(cell, x, y, row.key);
       layoutNode.layoutInfo.parentKey = row.key;
       x = layoutNode.layoutInfo.rect.maxX;
@@ -161,20 +170,21 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
   // used to get the column widths when rendering to the DOM
   private getRenderedColumnWidth(node: GridNode<T>) {
+    let collection = this.virtualizer!.collection as TableCollection<T>;
     let colspan = node.colspan ?? 1;
     let colIndex = node.colIndex ?? node.index;
     let width = 0;
     for (let i = colIndex; i < colIndex + colspan; i++) {
-      let column = this.collection.columns[i];
+      let column = collection.columns[i];
       if (column?.key != null) {
-        width += this.columnWidths.get(column.key);
+        width += this.columnWidths.get(column.key) ?? 0;
       }
     }
 
     return width;
   }
 
-  private getEstimatedHeight(node: GridNode<T>, width: number, height: number, estimatedHeight: number) {
+  private getEstimatedHeight(node: GridNode<T>, width: number, height: number | null, estimatedHeight: number | null) {
     let isEstimated = false;
 
     // If no explicit height is available, use an estimated height.
@@ -187,7 +197,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
         height = previousLayoutNode.layoutInfo.rect.height;
         isEstimated = node !== previousLayoutNode.node || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
       } else {
-        height = estimatedHeight;
+        height = estimatedHeight ?? DEFAULT_ROW_HEIGHT;
         isEstimated = true;
       }
     }
@@ -196,12 +206,12 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   protected getEstimatedRowHeight(): number {
-    return this.rowHeight ?? this.estimatedRowHeight;
+    return this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_ROW_HEIGHT;
   }
 
   protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
     let width = this.getRenderedColumnWidth(node);
-    let {height, isEstimated} = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
+    let {height, isEstimated} = this.getEstimatedHeight(node, width, this.headingHeight ?? this.rowHeight, this.estimatedHeadingHeight ?? this.estimatedRowHeight);
     let rect = new Rect(x, y, width, height);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
     layoutInfo.isSticky = this.isStickyColumn(node);
@@ -223,15 +233,16 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   protected buildBody(y: number): LayoutNode {
+    let collection = this.virtualizer!.collection as TableCollection<T>;
     let rect = new Rect(0, y, 0, 0);
-    let layoutInfo = new LayoutInfo('rowgroup', this.collection.body.key, rect);
+    let layoutInfo = new LayoutInfo('rowgroup', collection.body.key, rect);
 
     let startY = y;
     let skipped = 0;
     let width = 0;
     let children: LayoutNode[] = [];
     let rowHeight = this.getEstimatedRowHeight();
-    for (let node of getChildNodes(this.collection.body, this.collection)) {
+    for (let node of getChildNodes(collection.body, collection)) {
       // Skip rows before the valid rectangle unless they are already cached.
       if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         y += rowHeight;
@@ -248,13 +259,13 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
       if (y > this.requestedRect.maxY) {
         // Estimate the remaining height for rows that we don't need to layout right now.
-        y += (this.collection.size - (skipped + children.length)) * rowHeight;
+        y += (collection.size - (skipped + children.length)) * rowHeight;
         break;
       }
     }
 
     if (children.length === 0) {
-      y = this.virtualizer.visibleRect.maxY;
+      y = this.virtualizer!.visibleRect.maxY;
     }
 
     rect.width = width;
@@ -264,7 +275,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       layoutInfo,
       children,
       validRect: layoutInfo.rect.intersection(this.requestedRect),
-      node: this.collection.body
+      node: collection.body
     };
   }
 
@@ -287,12 +298,13 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
+    let collection = this.virtualizer!.collection as TableCollection<T>;
     let rect = new Rect(x, y, 0, 0);
     let layoutInfo = new LayoutInfo('row', node.key, rect);
 
     let children: LayoutNode[] = [];
     let height = 0;
-    for (let child of getChildNodes(node, this.collection)) {
+    for (let child of getChildNodes(node, collection)) {
       if (child.type === 'cell') {
         if (x > this.requestedRect.maxX) {
           // Adjust existing cached layoutInfo to ensure that it is out of view.
@@ -316,7 +328,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     this.setChildHeights(children, height);
 
-    rect.width = this.layoutNodes.get(this.collection.head?.key ?? 'header').layoutInfo.rect.width;
+    rect.width = this.layoutNodes.get(collection.head?.key ?? 'header')!.layoutInfo.rect.width;
     rect.height = height;
 
     return {
@@ -480,20 +492,20 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   private buildPersistedIndices() {
-    if (this.virtualizer.persistedKeys === this.lastPersistedKeys) {
+    if (this.virtualizer!.persistedKeys === this.lastPersistedKeys) {
       return;
     }
 
-    this.lastPersistedKeys = this.virtualizer.persistedKeys;
+    this.lastPersistedKeys = this.virtualizer!.persistedKeys;
     this.persistedIndices.clear();
 
     // Build a map of parentKey => indices of children to persist.
-    for (let key of this.virtualizer.persistedKeys) {
+    for (let key of this.virtualizer!.persistedKeys) {
       let layoutInfo = this.layoutNodes.get(key)?.layoutInfo;
 
       // Walk up ancestors so parents are also persisted if children are.
       while (layoutInfo && layoutInfo.parentKey) {
-        let collectionNode = this.collection.getItem(layoutInfo.key);
+        let collectionNode = this.virtualizer!.collection.getItem(layoutInfo.key);
         let indices = this.persistedIndices.get(layoutInfo.parentKey);
         if (!indices) {
           // stickyColumnIndices are always persisted along with any cells from persistedKeys.
@@ -501,9 +513,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
           this.persistedIndices.set(layoutInfo.parentKey, indices);
         }
 
-        let index = this.layoutNodes.get(layoutInfo.key).index;
-
-        if (!indices.includes(index)) {
+        let index = this.layoutNodes.get(layoutInfo.key)?.index;
+        if (index != null && !indices.includes(index)) {
           indices.push(index);
         }
 
@@ -516,15 +527,15 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     }
   }
 
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
-    x += this.virtualizer.visibleRect.x;
-    y += this.virtualizer.visibleRect.y;
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
+    x += this.virtualizer!.visibleRect.x;
+    y += this.virtualizer!.visibleRect.y;
 
     // Custom variation of this.virtualizer.keyAtPoint that ignores body
-    let key: Key;
+    let key: Key | null = null;
     let point = new Point(x, y);
     let rectAtPoint = new Rect(point.x, point.y, 1, 1);
-    let layoutInfos = this.virtualizer.layout.getVisibleLayoutInfos(rectAtPoint).filter(info => info.type === 'row');
+    let layoutInfos = this.virtualizer!.layout.getVisibleLayoutInfos(rectAtPoint).filter(info => info.type === 'row');
 
     // Layout may return multiple layout infos in the case of
     // persisted keys, so find the first one that actually intersects.
@@ -534,11 +545,15 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       }
     }
 
-    if (key == null || this.collection.size === 0) {
+    if (key == null || this.virtualizer!.collection.size === 0) {
       return {type: 'root'};
     }
 
     let layoutInfo = this.getLayoutInfo(key);
+    if (!layoutInfo) {
+      return null;
+    }
+
     let rect = layoutInfo.rect;
     let target: DropTarget = {
       type: 'item',
@@ -566,7 +581,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
   getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
     let layoutInfo = super.getDropTargetLayoutInfo(target);
-    layoutInfo.parentKey = this.collection.body.key;
+    layoutInfo.parentKey = (this.virtualizer!.collection as TableCollection<T>).body.key;
     return layoutInfo;
   }
 }
diff --git a/packages/@react-stately/menu/src/useSubmenuTriggerState.ts b/packages/@react-stately/menu/src/useSubmenuTriggerState.ts
index e04449c6548..991a526a10d 100644
--- a/packages/@react-stately/menu/src/useSubmenuTriggerState.ts
+++ b/packages/@react-stately/menu/src/useSubmenuTriggerState.ts
@@ -48,10 +48,10 @@ export function useSubmenuTriggerState(props: SubmenuTriggerProps, state: RootMe
   let {expandedKeysStack, openSubmenu, closeSubmenu, close: closeAll} = state;
   let [submenuLevel] = useState(expandedKeysStack?.length);
   let isOpen = useMemo(() => expandedKeysStack[submenuLevel] === triggerKey, [expandedKeysStack, triggerKey, submenuLevel]);
-  let [focusStrategy, setFocusStrategy] = useState<FocusStrategy>(null);
+  let [focusStrategy, setFocusStrategy] = useState<FocusStrategy | null>(null);
 
-  let open = useCallback((focusStrategy: FocusStrategy = null) => {
-    setFocusStrategy(focusStrategy);
+  let open = useCallback((focusStrategy?: FocusStrategy | null) => {
+    setFocusStrategy(focusStrategy ?? null);
     openSubmenu(triggerKey, submenuLevel);
   }, [openSubmenu, submenuLevel, triggerKey]);
 
@@ -60,8 +60,8 @@ export function useSubmenuTriggerState(props: SubmenuTriggerProps, state: RootMe
     closeSubmenu(triggerKey, submenuLevel);
   }, [closeSubmenu, submenuLevel, triggerKey]);
 
-  let toggle = useCallback((focusStrategy: FocusStrategy = null) => {
-    setFocusStrategy(focusStrategy);
+  let toggle = useCallback((focusStrategy?: FocusStrategy | null) => {
+    setFocusStrategy(focusStrategy ?? null);
     if (isOpen) {
       close();
     } else {
diff --git a/packages/@react-stately/pagination/README.md b/packages/@react-stately/pagination/README.md
deleted file mode 100644
index 3429346c009..00000000000
--- a/packages/@react-stately/pagination/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @react-stately/pagination
-
-This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-stately/pagination/index.ts b/packages/@react-stately/pagination/index.ts
deleted file mode 100644
index 1210ae1e402..00000000000
--- a/packages/@react-stately/pagination/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-export * from './src';
diff --git a/packages/@react-stately/pagination/package.json b/packages/@react-stately/pagination/package.json
deleted file mode 100644
index eaff2966350..00000000000
--- a/packages/@react-stately/pagination/package.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "name": "@react-stately/pagination",
-  "version": "3.0.0-alpha.1",
-  "description": "Spectrum UI components in React",
-  "license": "Apache-2.0",
-  "private": true,
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "exports": {
-    "types": "./dist/types.d.ts",
-    "import": "./dist/import.mjs",
-    "require": "./dist/main.js"
-  },
-  "types": "dist/types.d.ts",
-  "source": "src/index.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/react-spectrum"
-  },
-  "dependencies": {
-    "@react-stately/utils": "^3.1.0",
-    "@react-types/pagination": "3.0.0-alpha.1",
-    "@swc/helpers": "^0.5.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/@react-stately/pagination/src/index.ts b/packages/@react-stately/pagination/src/index.ts
deleted file mode 100644
index 49f50f0c9ef..00000000000
--- a/packages/@react-stately/pagination/src/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-export type {PaginationState} from './usePaginationState';
-export {usePaginationState} from './usePaginationState';
diff --git a/packages/@react-stately/pagination/src/usePaginationState.ts b/packages/@react-stately/pagination/src/usePaginationState.ts
deleted file mode 100644
index 19033ded7f5..00000000000
--- a/packages/@react-stately/pagination/src/usePaginationState.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {PaginationProps} from '@react-types/pagination';
-import {useControlledState} from '@react-stately/utils';
-import {useRef} from 'react';
-
-export interface PaginationState {
-  onChange?: (val: string | number) => void,
-  onDecrement?: () => void,
-  onIncrement?: () => void,
-  ref?: {current: number},
-  value?: any
-}
-
-export function usePaginationState(props: PaginationProps): PaginationState {
-  const [value, setValue] = useControlledState(props.value, props.defaultValue, props.onChange);
-  let ref = useRef(value);
-
-  const onPageInputChange = (value) => {
-    if (value === '' || isValidPage(props.maxValue, value)) {
-      value = value !== '' ? parseInt(value, 10) : value;
-      setValue(value);
-      ref.current = value;
-    }
-  };
-
-  const onIncrement = () => {
-    let val = (value === '') ? 1 : parseInt(value, 10) + 1;
-    if (isValidPage(props.maxValue, val)) {
-      ref.current = val;
-      setValue(val);
-    }
-  };
-
-  const onDecrement = () => {
-    let val = (value === '') ? 1 : parseInt(value, 10) - 1;
-    if (isValidPage(props.maxValue, val)) {
-      ref.current = val;
-      setValue(val);
-    }
-  };
-
-  return {
-    onChange: onPageInputChange,
-    onDecrement,
-    onIncrement,
-    ref,
-    value
-  };
-}
-
-function isValidPage(totalPages, page) {
-  page = parseInt(page, 10);
-  totalPages = parseInt(totalPages, 10);
-  return !isNaN(page) && (page >= 1 && totalPages && page <= totalPages);
-}
diff --git a/packages/@react-stately/pagination/test/usePaginationState.test.js b/packages/@react-stately/pagination/test/usePaginationState.test.js
deleted file mode 100644
index f7426ed9f79..00000000000
--- a/packages/@react-stately/pagination/test/usePaginationState.test.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {actHook as act, renderHook} from '@react-spectrum/test-utils-internal';
-import React from 'react';
-import {usePaginationState} from '../';
-
-describe('usePaginationState tests', function () {
-
-  let setValue = jest.fn();
-  let onIncrement = jest.fn();
-  let onDecrement = jest.fn();
-  let state = {};
-  let maxValue = 20;
-
-  beforeEach(() => {
-    state.value = 1;
-    state.onChange = setValue;
-    state.onIncrement = onIncrement;
-    state.onDecrement = onDecrement;
-    state.ref = {current: 1};
-  });
-
-  afterEach(() => {
-    setValue.mockClear();
-    state.value = 1;
-    state.ref = {};
-    state.onChange.mockClear();
-    state.onIncrement.mockClear();
-    state.onDecrement.mockClear();
-  });
-
-  it('should have correct type', function () {
-    let props = {defaultValue: 1};
-    const {result} = renderHook(() => usePaginationState(props, state));
-    expect(typeof result.current.ref).toBe('object');
-    expect(typeof result.current.onChange).toBe('function');
-    expect(typeof result.current.value).toBe('number');
-    expect(typeof result.current.onDecrement).toBe('function');
-    expect(typeof result.current.onIncrement).toBe('function');
-  });
-
-  it('renders with default value', function () {
-    let props = {defaultValue: 1};
-    const {result} = renderHook(() => usePaginationState(props));
-    expect(result.current.value).toEqual(props.defaultValue);
-    expect(result.current.ref.current).toEqual(props.defaultValue);
-  });
-
-  it('renders with changed value', function () {
-    let props = {value: 2, defaultValue: 1};
-    const {result} = renderHook(() => usePaginationState(props));
-    expect(result.current.value).toEqual(2);
-    expect(result.current.ref.current).toEqual(2);
-  });
-
-  it('test onPageInputChange', function () {
-    let props = {defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onChange(5));
-    expect(result.current.value).toEqual(5);
-    expect(result.current.ref.current).toEqual(5);
-  });
-
-  it('should be controlled if props.value is defined', function () {
-    let props = {value: 2, defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onChange(5));
-    expect(result.current.value).toEqual(props.value);
-  });
-
-  it('test invalid state value : character', function () {
-    let props = {defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onChange('a'));
-    expect(result.current.value).toEqual(props.defaultValue);
-    expect(result.current.ref.current).toEqual(props.defaultValue);
-  });
-
-  it('test invalid state value : value > maxValue', function () {
-    let props = {defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onChange(maxValue + 1));
-    expect(result.current.value).toEqual(props.defaultValue);
-    expect(result.current.ref.current).toEqual(props.defaultValue);
-  });
-
-  it('test empty state value', function () {
-    let props = {defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onChange(''));
-    expect(result.current.value).toEqual('');
-    expect(result.current.ref.current).toEqual('');
-  });
-
-  it('test onIncrement', function () {
-    let props = {defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onIncrement());
-    expect(result.current.value).toEqual(2);
-    expect(result.current.ref.current).toEqual(2);
-  });
-
-  it('test onDecrement', function () {
-    state.value = 2;
-    let props = {defaultValue: 1, maxValue: maxValue};
-    const {result} = renderHook(() => usePaginationState(props));
-    act(() => result.current.onDecrement());
-    expect(result.current.value).toEqual(1);
-    expect(result.current.ref.current).toEqual(1);
-  });
-});
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
index f02cf7adb24..3aff970197e 100644
--- a/packages/@react-stately/select/src/useSelectState.ts
+++ b/packages/@react-stately/select/src/useSelectState.ts
@@ -43,7 +43,7 @@ export interface SelectState<T> extends SingleSelectListState<T>, OverlayTrigger
  */
 export function useSelectState<T extends object>(props: SelectStateOptions<T>): SelectState<T>  {
   let triggerState = useOverlayTriggerState(props);
-  let [focusStrategy, setFocusStrategy] = useState<FocusStrategy>(null);
+  let [focusStrategy, setFocusStrategy] = useState<FocusStrategy | null>(null);
   let listState = useSingleSelectListState({
     ...props,
     onSelectionChange: (key) => {
@@ -68,14 +68,14 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
     ...listState,
     ...triggerState,
     focusStrategy,
-    open(focusStrategy: FocusStrategy = null) {
+    open(focusStrategy: FocusStrategy | null = null) {
       // Don't open if the collection is empty.
       if (listState.collection.size !== 0) {
         setFocusStrategy(focusStrategy);
         triggerState.open();
       }
     },
-    toggle(focusStrategy: FocusStrategy = null) {
+    toggle(focusStrategy: FocusStrategy | null = null) {
       if (listState.collection.size !== 0) {
         setFocusStrategy(focusStrategy);
         triggerState.toggle();
diff --git a/packages/@react-stately/selection/src/Selection.ts b/packages/@react-stately/selection/src/Selection.ts
index d5b7e167304..7b4262df830 100644
--- a/packages/@react-stately/selection/src/Selection.ts
+++ b/packages/@react-stately/selection/src/Selection.ts
@@ -17,17 +17,17 @@ import {Key} from '@react-types/shared';
  * and current selected key for use when range selecting.
  */
 export class Selection extends Set<Key> {
-  anchorKey: Key;
-  currentKey: Key;
+  anchorKey: Key | null;
+  currentKey: Key | null;
 
-  constructor(keys?: Iterable<Key> | Selection, anchorKey?: Key, currentKey?: Key) {
+  constructor(keys?: Iterable<Key> | Selection, anchorKey?: Key | null, currentKey?: Key | null) {
     super(keys);
     if (keys instanceof Selection) {
       this.anchorKey = anchorKey ?? keys.anchorKey;
       this.currentKey = currentKey ?? keys.currentKey;
     } else {
-      this.anchorKey = anchorKey;
-      this.currentKey = currentKey;
+      this.anchorKey = anchorKey ?? null;
+      this.currentKey = currentKey ?? null;
     }
   }
 }
diff --git a/packages/@react-stately/selection/src/SelectionManager.ts b/packages/@react-stately/selection/src/SelectionManager.ts
index 03b10b2ec16..5c30d4f4c29 100644
--- a/packages/@react-stately/selection/src/SelectionManager.ts
+++ b/packages/@react-stately/selection/src/SelectionManager.ts
@@ -38,7 +38,7 @@ export class SelectionManager implements MultipleSelectionManager {
   collection: Collection<Node<unknown>>;
   private state: MultipleSelectionState;
   private allowsCellSelection: boolean;
-  private _isSelectAll: boolean;
+  private _isSelectAll: boolean | null;
   private layoutDelegate: LayoutDelegate | null;
 
   constructor(collection: Collection<Node<unknown>>, state: MultipleSelectionState, options?: SelectionManagerOptions) {
@@ -94,12 +94,12 @@ export class SelectionManager implements MultipleSelectionManager {
   /**
    * The current focused key in the collection.
    */
-  get focusedKey(): Key {
+  get focusedKey(): Key | null {
     return this.state.focusedKey;
   }
 
   /** Whether the first or last child of the focused key should receive focus. */
-  get childFocusStrategy(): FocusStrategy {
+  get childFocusStrategy(): FocusStrategy | null {
     return this.state.childFocusStrategy;
   }
 
@@ -137,10 +137,13 @@ export class SelectionManager implements MultipleSelectionManager {
       return false;
     }
 
-    key = this.getKey(key);
+    let mappedKey = this.getKey(key);
+    if (mappedKey == null) {
+      return false;
+    }
     return this.state.selectedKeys === 'all'
-      ? this.canSelectItem(key)
-      : this.state.selectedKeys.has(key);
+      ? this.canSelectItem(mappedKey)
+      : this.state.selectedKeys.has(mappedKey);
   }
 
   /**
@@ -181,7 +184,7 @@ export class SelectionManager implements MultipleSelectionManager {
       }
     }
 
-    return first?.key;
+    return first?.key ?? null;
   }
 
   get lastSelectedKey(): Key | null {
@@ -193,7 +196,7 @@ export class SelectionManager implements MultipleSelectionManager {
       }
     }
 
-    return last?.key;
+    return last?.key ?? null;
   }
 
   get disabledKeys(): Set<Key> {
@@ -217,22 +220,25 @@ export class SelectionManager implements MultipleSelectionManager {
       return;
     }
 
-    toKey = this.getKey(toKey);
+    let mappedToKey = this.getKey(toKey);
+    if (mappedToKey == null) {
+      return;
+    }
 
     let selection: Selection;
 
     // Only select the one key if coming from a select all.
     if (this.state.selectedKeys === 'all') {
-      selection = new Selection([toKey], toKey, toKey);
+      selection = new Selection([mappedToKey], mappedToKey, mappedToKey);
     } else {
       let selectedKeys = this.state.selectedKeys as Selection;
-      let anchorKey = selectedKeys.anchorKey ?? toKey;
-      selection = new Selection(selectedKeys, anchorKey, toKey);
-      for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey ?? toKey)) {
+      let anchorKey = selectedKeys.anchorKey ?? mappedToKey;
+      selection = new Selection(selectedKeys, anchorKey, mappedToKey);
+      for (let key of this.getKeyRange(anchorKey, selectedKeys.currentKey ?? mappedToKey)) {
         selection.delete(key);
       }
 
-      for (let key of this.getKeyRange(toKey, anchorKey)) {
+      for (let key of this.getKeyRange(mappedToKey, anchorKey)) {
         if (this.canSelectItem(key)) {
           selection.add(key);
         }
@@ -262,10 +268,10 @@ export class SelectionManager implements MultipleSelectionManager {
     }
 
     let keys: Key[] = [];
-    let key = from;
+    let key: Key | null = from;
     while (key != null) {
       let item = this.collection.getItem(key);
-      if (item && item.type === 'item' || (item.type === 'cell' && this.allowsCellSelection)) {
+      if (item && (item.type === 'item' || (item.type === 'cell' && this.allowsCellSelection))) {
         keys.push(key);
       }
 
@@ -292,7 +298,7 @@ export class SelectionManager implements MultipleSelectionManager {
     }
 
     // Find a parent item to select
-    while (item.type !== 'item' && item.parentKey != null) {
+    while (item && item.type !== 'item' && item.parentKey != null) {
       item = this.collection.getItem(item.parentKey);
     }
 
@@ -316,20 +322,20 @@ export class SelectionManager implements MultipleSelectionManager {
       return;
     }
 
-    key = this.getKey(key);
-    if (key == null) {
+    let mappedKey = this.getKey(key);
+    if (mappedKey == null) {
       return;
     }
 
     let keys = new Selection(this.state.selectedKeys === 'all' ? this.getSelectAllKeys() : this.state.selectedKeys);
-    if (keys.has(key)) {
-      keys.delete(key);
+    if (keys.has(mappedKey)) {
+      keys.delete(mappedKey);
       // TODO: move anchor to last selected key...
       // Does `current` need to move here too?
-    } else if (this.canSelectItem(key)) {
-      keys.add(key);
-      keys.anchorKey = key;
-      keys.currentKey = key;
+    } else if (this.canSelectItem(mappedKey)) {
+      keys.add(mappedKey);
+      keys.anchorKey = mappedKey;
+      keys.currentKey = mappedKey;
     }
 
     if (this.disallowEmptySelection && keys.size === 0) {
@@ -347,13 +353,13 @@ export class SelectionManager implements MultipleSelectionManager {
       return;
     }
 
-    key = this.getKey(key);
-    if (key == null) {
+    let mappedKey = this.getKey(key);
+    if (mappedKey == null) {
       return;
     }
 
-    let selection = this.canSelectItem(key)
-      ? new Selection([key], key, key)
+    let selection = this.canSelectItem(mappedKey)
+      ? new Selection([mappedKey], mappedKey, mappedKey)
       : new Selection();
 
     this.state.setSelectedKeys(selection);
@@ -369,9 +375,9 @@ export class SelectionManager implements MultipleSelectionManager {
 
     let selection = new Selection();
     for (let key of keys) {
-      key = this.getKey(key);
-      if (key != null) {
-        selection.add(key);
+      let mappedKey = this.getKey(key);
+      if (mappedKey != null) {
+        selection.add(mappedKey);
         if (this.selectionMode === 'single') {
           break;
         }
@@ -383,17 +389,17 @@ export class SelectionManager implements MultipleSelectionManager {
 
   private getSelectAllKeys() {
     let keys: Key[] = [];
-    let addKeys = (key: Key) => {
+    let addKeys = (key: Key | null) => {
       while (key != null) {
         if (this.canSelectItem(key)) {
           let item = this.collection.getItem(key);
-          if (item.type === 'item') {
+          if (item?.type === 'item') {
             keys.push(key);
           }
 
           // Add child keys. If cell selection is allowed, then include item children too.
-          if (item.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
-            addKeys(getFirstItem(getChildNodes(item, this.collection)).key);
+          if (item?.hasChildNodes && (this.allowsCellSelection || item.type !== 'item')) {
+            addKeys(getFirstItem(getChildNodes(item, this.collection))?.key ?? null);
           }
         }
 
diff --git a/packages/@react-stately/selection/src/types.ts b/packages/@react-stately/selection/src/types.ts
index fcc2b1c346f..30dbee9c0b1 100644
--- a/packages/@react-stately/selection/src/types.ts
+++ b/packages/@react-stately/selection/src/types.ts
@@ -19,9 +19,9 @@ export interface FocusState {
   /** Sets whether the collection is focused. */
   setFocused(isFocused: boolean): void,
   /** The current focused key in the collection. */
-  readonly focusedKey: Key,
+  readonly focusedKey: Key | null,
   /** Whether the first or last child of the focused key should receive focus. */
-  readonly childFocusStrategy: FocusStrategy,
+  readonly childFocusStrategy: FocusStrategy | null,
   /** Sets the focused key, and optionally, whether the first or last child of that key should receive focus. */
   setFocusedKey(key: Key | null, child?: FocusStrategy): void
 }
diff --git a/packages/@react-stately/selection/src/useMultipleSelectionState.ts b/packages/@react-stately/selection/src/useMultipleSelectionState.ts
index 73320a05024..e58d0823850 100644
--- a/packages/@react-stately/selection/src/useMultipleSelectionState.ts
+++ b/packages/@react-stately/selection/src/useMultipleSelectionState.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DisabledBehavior, Key, MultipleSelection, SelectionBehavior, SelectionMode} from '@react-types/shared';
+import {DisabledBehavior, FocusStrategy, Key, MultipleSelection, SelectionBehavior, SelectionMode} from '@react-types/shared';
 import {MultipleSelectionState} from './types';
 import {Selection} from './Selection';
 import {useControlledState} from '@react-stately/utils';
@@ -45,7 +45,7 @@ export interface MultipleSelectionStateProps extends MultipleSelection {
 export function useMultipleSelectionState(props: MultipleSelectionStateProps): MultipleSelectionState {
   let {
     selectionMode = 'none' as SelectionMode,
-    disallowEmptySelection,
+    disallowEmptySelection = false,
     allowDuplicateSelectionEvents,
     selectionBehavior: selectionBehaviorProp = 'toggle',
     disabledBehavior = 'all'
@@ -55,14 +55,14 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
   // But we also need to trigger a react re-render. So, we have both a ref (sync) and state (async).
   let isFocusedRef = useRef(false);
   let [, setFocused] = useState(false);
-  let focusedKeyRef = useRef(null);
-  let childFocusStrategyRef = useRef(null);
-  let [, setFocusedKey] = useState(null);
+  let focusedKeyRef = useRef<Key | null>(null);
+  let childFocusStrategyRef = useRef<FocusStrategy | null>(null);
+  let [, setFocusedKey] = useState<Key | null>(null);
   let selectedKeysProp = useMemo(() => convertSelection(props.selectedKeys), [props.selectedKeys]);
   let defaultSelectedKeys = useMemo(() => convertSelection(props.defaultSelectedKeys, new Selection()), [props.defaultSelectedKeys]);
   let [selectedKeys, setSelectedKeys] = useControlledState(
     selectedKeysProp,
-    defaultSelectedKeys,
+    defaultSelectedKeys!,
     props.onSelectionChange
   );
   let disabledKeysProp = useMemo(() =>
@@ -119,7 +119,7 @@ export function useMultipleSelectionState(props: MultipleSelectionStateProps): M
   };
 }
 
-function convertSelection(selection: 'all' | Iterable<Key>, defaultValue?: Selection): 'all' | Set<Key> {
+function convertSelection(selection: 'all' | Iterable<Key> | null | undefined, defaultValue?: Selection): 'all' | Set<Key> | undefined {
   if (!selection) {
     return defaultValue;
   }
diff --git a/packages/@react-stately/slider/src/useSliderState.ts b/packages/@react-stately/slider/src/useSliderState.ts
index bacee3e0bff..d2de8e145a6 100644
--- a/packages/@react-stately/slider/src/useSliderState.ts
+++ b/packages/@react-stately/slider/src/useSliderState.ts
@@ -176,14 +176,14 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
     return Math.max(calcPageSize, step);
   }, [step, maxValue, minValue]);
 
-  let restrictValues = useCallback((values: number[]) => values?.map((val, idx) => {
+  let restrictValues = useCallback((values: number[] | undefined) => values?.map((val, idx) => {
     let min = idx === 0 ? minValue : values[idx - 1];
     let max = idx === values.length - 1 ? maxValue : values[idx + 1];
     return snapValueToStep(val, min, max, step);
   }), [minValue, maxValue, step]);
 
   let value = useMemo(() => restrictValues(convertValue(props.value)), [props.value]);
-  let defaultValue = useMemo(() => restrictValues(convertValue(props.defaultValue) ?? [minValue]), [props.defaultValue, minValue]);
+  let defaultValue = useMemo(() => restrictValues(convertValue(props.defaultValue) ?? [minValue])!, [props.defaultValue, minValue]);
   let onChange = createOnChange(props.value, props.defaultValue, props.onChange);
   let onChangeEnd = createOnChange(props.value, props.defaultValue, props.onChangeEnd);
 
@@ -321,7 +321,7 @@ function replaceIndex<T>(array: T[], index: number, value: T) {
   return [...array.slice(0, index), value, ...array.slice(index + 1)];
 }
 
-function convertValue(value: number | number[]) {
+function convertValue(value?: number | number[]) {
   if (value == null) {
     return undefined;
   }
diff --git a/packages/@react-stately/table/src/Cell.ts b/packages/@react-stately/table/src/Cell.ts
index ed193bae470..58a45082d32 100644
--- a/packages/@react-stately/table/src/Cell.ts
+++ b/packages/@react-stately/table/src/Cell.ts
@@ -14,7 +14,7 @@ import {CellProps} from '@react-types/table';
 import {JSX, ReactElement} from 'react';
 import {PartialNode} from '@react-stately/collections';
 
-function Cell(props: CellProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Cell(props: CellProps): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
diff --git a/packages/@react-stately/table/src/Column.ts b/packages/@react-stately/table/src/Column.ts
index b6aa07d669f..6fd872cab19 100644
--- a/packages/@react-stately/table/src/Column.ts
+++ b/packages/@react-stately/table/src/Column.ts
@@ -16,7 +16,7 @@ import {GridNode} from '@react-types/grid';
 import {PartialNode} from '@react-stately/collections';
 import React, {JSX, ReactElement} from 'react';
 
-function Column<T>(props: ColumnProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Column<T>(props: ColumnProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
@@ -28,7 +28,7 @@ Column.getCollectionNode = function* getCollectionNode<T>(props: ColumnProps<T>,
 
   let fullNodes = yield {
     type: 'column',
-    hasChildNodes: !!childColumns || (title && React.Children.count(children) > 0),
+    hasChildNodes: !!childColumns || (!!title && React.Children.count(children) > 0),
     rendered,
     textValue,
     props,
diff --git a/packages/@react-stately/table/src/Row.ts b/packages/@react-stately/table/src/Row.ts
index 5f864a2ecd6..5b45271d1c6 100644
--- a/packages/@react-stately/table/src/Row.ts
+++ b/packages/@react-stately/table/src/Row.ts
@@ -15,7 +15,7 @@ import {PartialNode} from '@react-stately/collections';
 import React, {JSX, ReactElement} from 'react';
 import {RowProps} from '@react-types/table';
 
-function Row<T>(props: RowProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Row<T>(props: RowProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
diff --git a/packages/@react-stately/table/src/TableBody.ts b/packages/@react-stately/table/src/TableBody.ts
index 513ca04126a..6355c3326f6 100644
--- a/packages/@react-stately/table/src/TableBody.ts
+++ b/packages/@react-stately/table/src/TableBody.ts
@@ -14,7 +14,7 @@ import {PartialNode} from '@react-stately/collections';
 import React, {JSX, ReactElement} from 'react';
 import {TableBodyProps} from '@react-types/table';
 
-function TableBody<T>(props: TableBodyProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function TableBody<T>(props: TableBodyProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
diff --git a/packages/@react-stately/table/src/TableCollection.ts b/packages/@react-stately/table/src/TableCollection.ts
index 12d8f5cb7fd..e4fb89e67c2 100644
--- a/packages/@react-stately/table/src/TableCollection.ts
+++ b/packages/@react-stately/table/src/TableCollection.ts
@@ -40,7 +40,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
     let col = [column];
 
     while (parentKey) {
-      let parent: GridNode<T> = keyMap.get(parentKey);
+      let parent: GridNode<T> | undefined = keyMap.get(parentKey);
       if (!parent) {
         break;
       }
@@ -50,6 +50,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
       // than the previous column, than we need to shift the parent
       // in the previous column so it's level with the current column.
       if (seen.has(parent)) {
+        parent.colspan ??= 0;
         parent.colspan++;
 
         let {column, index} = seen.get(parent);
@@ -82,7 +83,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
   }
 
   let maxLength = Math.max(...columns.map(c => c.length));
-  let headerRows = Array(maxLength).fill(0).map(() => []);
+  let headerRows: GridNode<T>[][] = Array(maxLength).fill(0).map(() => []);
 
   // Convert columns into rows.
   let colIndex = 0;
@@ -92,7 +93,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
       if (item) {
         // Fill the space up until the current column with a placeholder
         let row = headerRows[i];
-        let rowLength = row.reduce((p, c) => p + c.colspan, 0);
+        let rowLength = row.reduce((p, c) => p + (c.colspan ?? 1), 0);
         if (rowLength < colIndex) {
           let placeholder: GridNode<T> = {
             type: 'placeholder',
@@ -104,7 +105,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
             level: i,
             hasChildNodes: false,
             childNodes: [],
-            textValue: null
+            textValue: ''
           };
 
           // eslint-disable-next-line max-depth
@@ -135,7 +136,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
   // Add placeholders at the end of each row that is shorter than the maximum
   let i = 0;
   for (let row of headerRows) {
-    let rowLength = row.reduce((p, c) => p + c.colspan, 0);
+    let rowLength = row.reduce((p, c) => p + (c.colspan ?? 1), 0);
     if (rowLength < columnNodes.length) {
       let placeholder: GridNode<T> = {
         type: 'placeholder',
@@ -147,7 +148,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
         level: i,
         hasChildNodes: false,
         childNodes: [],
-        textValue: null,
+        textValue: '',
         prevKey: row[row.length - 1].key
       };
 
@@ -167,7 +168,7 @@ export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: G
       level: 0,
       hasChildNodes: true,
       childNodes,
-      textValue: null
+      textValue: ''
     };
 
     return row;
@@ -181,9 +182,9 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
   body: GridNode<T>;
   _size: number = 0;
 
-  constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T>, opts?: GridCollectionOptions) {
+  constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T> | null, opts?: GridCollectionOptions) {
     let rowHeaderColumnKeys: Set<Key> = new Set();
-    let body: GridNode<T>;
+    let body: GridNode<T> | null = null;
     let columns: GridNode<T>[] = [];
     // Add cell for selection checkboxes if needed.
     if (opts?.showSelectionCheckboxes) {
@@ -225,7 +226,7 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
       columns.unshift(rowHeaderColumn);
     }
 
-    let rows = [];
+    let rows: GridNode<T>[] = [];
     let columnKeyMap = new Map();
     let visit = (node: GridNode<T>) => {
       switch (node.type) {
@@ -268,13 +269,16 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
     });
     this.columns = columns;
     this.rowHeaderColumnKeys = rowHeaderColumnKeys;
-    this.body = body;
+    this.body = body!;
     this.headerRows = headerRows;
-    this._size = [...body.childNodes].length;
+    this._size = [...body!.childNodes].length;
 
     // Default row header column to the first one.
     if (this.rowHeaderColumnKeys.size === 0) {
-      this.rowHeaderColumnKeys.add(this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell).key);
+      let col = this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell);
+      if (col) {
+        this.rowHeaderColumnKeys.add(col.key);
+      }
     }
   }
 
@@ -292,24 +296,24 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
 
   getKeyBefore(key: Key) {
     let node = this.keyMap.get(key);
-    return node ? node.prevKey : null;
+    return node?.prevKey ?? null;
   }
 
   getKeyAfter(key: Key) {
     let node = this.keyMap.get(key);
-    return node ? node.nextKey : null;
+    return node?.nextKey ?? null;
   }
 
   getFirstKey() {
-    return getFirstItem(this.body.childNodes)?.key;
+    return getFirstItem(this.body.childNodes)?.key ?? null;
   }
 
   getLastKey() {
-    return getLastItem(this.body.childNodes)?.key;
+    return getLastItem(this.body.childNodes)?.key ?? null;
   }
 
   getItem(key: Key) {
-    return this.keyMap.get(key);
+    return this.keyMap.get(key) ?? null;
   }
 
   at(idx: number) {
@@ -339,7 +343,7 @@ export class TableCollection<T> extends GridCollection<T> implements ITableColle
     // Otherwise combine the text of each of the row header columns.
     let rowHeaderColumnKeys = this.rowHeaderColumnKeys;
     if (rowHeaderColumnKeys) {
-      let text = [];
+      let text: string[] = [];
       for (let cell of row.childNodes) {
         let column = this.columns[cell.index];
         if (rowHeaderColumnKeys.has(column.key) && cell.textValue) {
diff --git a/packages/@react-stately/table/src/TableColumnLayout.ts b/packages/@react-stately/table/src/TableColumnLayout.ts
index 1e2ba6f8a65..42a1299e17c 100644
--- a/packages/@react-stately/table/src/TableColumnLayout.ts
+++ b/packages/@react-stately/table/src/TableColumnLayout.ts
@@ -54,7 +54,7 @@ export class TableColumnLayout<T> {
       if (uncontrolledColumns.has(col.key)) {
         return [col.key, uncontrolledWidths.get(col.key)];
       } else {
-        return [col.key, controlledColumns.get(col.key).props.width];
+        return [col.key, controlledColumns.get(col.key)!.props.width];
       }
     }));
   }
@@ -91,7 +91,7 @@ export class TableColumnLayout<T> {
         freeze = false;
       } else if (freeze) {
         // freeze columns to the left to their previous pixel value
-        newWidths.set(column.key, prevColumnWidths.get(column.key));
+        newWidths.set(column.key, prevColumnWidths.get(column.key) ?? 0);
       } else {
         newWidths.set(column.key, column.props.width ?? uncontrolledWidths.get(column.key));
       }
diff --git a/packages/@react-stately/table/src/TableHeader.ts b/packages/@react-stately/table/src/TableHeader.ts
index a2d982c568d..70af4722f06 100644
--- a/packages/@react-stately/table/src/TableHeader.ts
+++ b/packages/@react-stately/table/src/TableHeader.ts
@@ -15,7 +15,7 @@ import {PartialNode} from '@react-stately/collections';
 import React, {JSX, ReactElement} from 'react';
 import {TableHeaderProps} from '@react-types/table';
 
-function TableHeader<T>(props: TableHeaderProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function TableHeader<T>(props: TableHeaderProps<T>): ReactElement | null { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
diff --git a/packages/@react-stately/table/src/TableUtils.ts b/packages/@react-stately/table/src/TableUtils.ts
index 4d359ebe16a..346251ccffc 100644
--- a/packages/@react-stately/table/src/TableUtils.ts
+++ b/packages/@react-stately/table/src/TableUtils.ts
@@ -44,7 +44,7 @@ export function parseStaticWidth(width: number | string, tableWidth: number): nu
 }
 
 
-export function getMaxWidth(maxWidth: number | string, tableWidth: number): number {
+export function getMaxWidth(maxWidth: number | string | null | undefined, tableWidth: number): number {
   return maxWidth != null
     ? parseStaticWidth(maxWidth, tableWidth)
     : Number.MAX_SAFE_INTEGER;
@@ -63,7 +63,18 @@ export interface IColumn {
   maxWidth?: number | string,
   width?: number | string,
   defaultWidth?: number | string,
-  key?: Key
+  key: Key
+}
+
+interface FlexItem {
+  frozen: boolean,
+  baseSize: number,
+  hypotheticalMainSize: number,
+  min: number,
+  max: number,
+  flex: number,
+  targetMainSize: number,
+  violation: number
 }
 
 /**
@@ -93,12 +104,12 @@ export interface IColumn {
  */
 export function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth, getDefaultMinWidth) {
   let hasNonFrozenItems = false;
-  let flexItems = columns.map((column, index) => {
+  let flexItems: FlexItem[] = columns.map((column, index) => {
     let width = changedColumns.get(column.key) != null ? changedColumns.get(column.key) : column.width ?? column.defaultWidth ?? getDefaultWidth?.(index) ?? '1fr';
     let frozen = false;
     let baseSize = 0;
     let flex = 0;
-    let targetMainSize = null;
+    let targetMainSize = 0;
     if (isStatic(width)) {
       baseSize = parseStaticWidth(width, availableWidth);
       frozen = true;
@@ -232,7 +243,7 @@ export function calculateColumnSizes(availableWidth: number, columns: IColumn[],
   return cascadeRounding(flexItems);
 }
 
-function cascadeRounding(flexItems): number[] {
+function cascadeRounding(flexItems: FlexItem[]): number[] {
   /*
   Given an array of floats that sum to an integer, this rounds the floats
   and returns an array of integers with the same sum.
@@ -240,7 +251,7 @@ function cascadeRounding(flexItems): number[] {
 
   let fpTotal = 0;
   let intTotal = 0;
-  let roundedArray = [];
+  let roundedArray: number[] = [];
   flexItems.forEach(function (item) {
     let float = item.targetMainSize;
     let integer = Math.round(float + fpTotal) - intTotal;
diff --git a/packages/@react-stately/table/src/useTableColumnResizeState.ts b/packages/@react-stately/table/src/useTableColumnResizeState.ts
index 6bc80951a2a..7ba050cb1e8 100644
--- a/packages/@react-stately/table/src/useTableColumnResizeState.ts
+++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts
@@ -108,7 +108,7 @@ export function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<
 
   let updateResizedColumns = useCallback((key: Key, width: number): Map<Key, ColumnSize> => {
     let newSizes = columnLayout.resizeColumnWidth(state.collection, uncontrolledWidths, key, width);
-    let map = new Map(Array.from(uncontrolledColumns).map(([key]) => [key, newSizes.get(key)]));
+    let map = new Map(Array.from(uncontrolledColumns).map(([key]) => [key, newSizes.get(key)!]));
     map.set(key, width);
     setUncontrolledWidths(map);
     return newSizes;
diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts
index ca2448702b1..0addeb10a35 100644
--- a/packages/@react-stately/table/src/useTableState.ts
+++ b/packages/@react-stately/table/src/useTableState.ts
@@ -24,7 +24,7 @@ export interface TableState<T> extends GridState<T, ITableCollection<T>> {
   /** Whether the row selection checkboxes should be displayed. */
   showSelectionCheckboxes: boolean,
   /** The current sorted column and direction. */
-  sortDescriptor: SortDescriptor,
+  sortDescriptor: SortDescriptor | null,
   /** Calls the provided onSortChange handler with the provided column key and sort direction. */
   sort(columnKey: Key, direction?: 'ascending' | 'descending'): void,
   /** Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
@@ -94,11 +94,11 @@ export function useTableState<T extends object>(props: TableStateProps<T>): Tabl
     disabledKeys,
     selectionManager,
     showSelectionCheckboxes: props.showSelectionCheckboxes || false,
-    sortDescriptor: props.sortDescriptor,
+    sortDescriptor: props.sortDescriptor ?? null,
     isKeyboardNavigationDisabled: collection.size === 0 || isKeyboardNavigationDisabled,
     setKeyboardNavigationDisabled,
     sort(columnKey: Key, direction?: 'ascending' | 'descending') {
-      props.onSortChange({
+      props.onSortChange?.({
         column: columnKey,
         direction: direction ?? (props.sortDescriptor?.column === columnKey
           ? OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction]
diff --git a/packages/@react-stately/table/src/useTreeGridState.ts b/packages/@react-stately/table/src/useTreeGridState.ts
index e9027bb24f9..3e6e3247927 100644
--- a/packages/@react-stately/table/src/useTreeGridState.ts
+++ b/packages/@react-stately/table/src/useTreeGridState.ts
@@ -140,11 +140,11 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     expandedKeys = new Set()
   } = opts;
 
-  let body: GridNode<T>;
-  let flattenedRows = [];
+  let body: GridNode<T> | null = null;
+  let flattenedRows: GridNode<T>[] = [];
   let columnCount = 0;
   let userColumnCount = 0;
-  let originalColumns = [];
+  let originalColumns: GridNode<T>[] = [];
   let keyMap = new Map();
 
   if (opts?.showSelectionCheckboxes) {
@@ -155,7 +155,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     columnCount++;
   }
 
-  let topLevelRows = [];
+  let topLevelRows: GridNode<T>[] = [];
   let visit = (node: GridNode<T>) => {
     switch (node.type) {
       case 'body':
@@ -183,6 +183,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     }
     visit(node);
   }
+
   columnCount += userColumnCount;
 
   // Update each grid node in the treegrid table with values specific to a treegrid structure. Also store a set of flattened row nodes for TableCollection to consume
@@ -192,7 +193,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     // to TableCollection. Index, level, and parent keys are all changed to reflect a flattened row structure rather than the treegrid structure
     // values automatically calculated via CollectionBuilder
     if (node.type === 'item') {
-      let childNodes = [];
+      let childNodes: GridNode<T>[] = [];
       for (let child of node.childNodes) {
         if (child.type === 'cell') {
           let cellClone = {...child};
@@ -202,7 +203,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
           childNodes.push({...cellClone});
         }
       }
-      let clone = {...node, childNodes: childNodes, parentKey: body.key, level: 1, index: globalRowCount++};
+      let clone: GridNode<T> = {...node, childNodes: childNodes, parentKey: body!.key, level: 1, index: globalRowCount++};
       flattenedRows.push(clone);
     }
 
@@ -218,7 +219,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     Object.assign(node, newProps);
     keyMap.set(node.key, node);
 
-    let lastNode: GridNode<T>;
+    let lastNode: GridNode<T> | null = null;
     let rowIndex = 0;
     for (let child of node.childNodes) {
       if (!(child.type === 'item' && expandedKeys !== 'all' && !expandedKeys.has(node.key))) {
@@ -250,8 +251,8 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     }
   };
 
-  let last: GridNode<T>;
-  topLevelRows.forEach((node: GridNode<T>, i) => {
+  let last: GridNode<T> | null = null;
+  for (let [i, node] of topLevelRows.entries()) {
     visitNode(node as GridNode<T>, i);
 
     if (last) {
@@ -262,7 +263,7 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     }
 
     last = node;
-  });
+  }
 
   if (last) {
     last.nextKey = null;
@@ -272,6 +273,6 @@ function generateTreeGridCollection<T>(nodes, opts: TreeGridCollectionOptions):
     keyMap,
     userColumnCount,
     flattenedRows,
-    tableNodes: [...originalColumns, {...body, childNodes: flattenedRows}]
+    tableNodes: [...originalColumns, {...body!, childNodes: flattenedRows}]
   };
 }
diff --git a/packages/@react-stately/tabs/src/useTabListState.ts b/packages/@react-stately/tabs/src/useTabListState.ts
index d10c20ab1a4..74a55aaf09e 100644
--- a/packages/@react-stately/tabs/src/useTabListState.ts
+++ b/packages/@react-stately/tabs/src/useTabListState.ts
@@ -30,7 +30,7 @@ export function useTabListState<T extends object>(props: TabListStateOptions<T>)
   let state = useSingleSelectListState<T>({
     ...props,
     suppressTextValueWarning: true,
-    defaultSelectedKey: props.defaultSelectedKey ?? findDefaultSelectedKey(props.collection, props.disabledKeys ? new Set(props.disabledKeys) : new Set())
+    defaultSelectedKey: props.defaultSelectedKey ?? findDefaultSelectedKey(props.collection, props.disabledKeys ? new Set(props.disabledKeys) : new Set()) ?? undefined
   });
 
   let {
@@ -43,7 +43,7 @@ export function useTabListState<T extends object>(props: TabListStateOptions<T>)
   useEffect(() => {
     // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
     let selectedKey = currentSelectedKey;
-    if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {
+    if (selectionManager.isEmpty || selectedKey == null || !collection.getItem(selectedKey)) {
       selectedKey = findDefaultSelectedKey(collection, state.disabledKeys);
       if (selectedKey != null) {
         // directly set selection because replace/toggle selection won't consider disabled keys
@@ -64,16 +64,16 @@ export function useTabListState<T extends object>(props: TabListStateOptions<T>)
   };
 }
 
-function findDefaultSelectedKey<T>(collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) {
-  let selectedKey = null;
+function findDefaultSelectedKey<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {
+  let selectedKey: Key | null = null;
   if (collection) {
     selectedKey = collection.getFirstKey();
     // loop over tabs until we find one that isn't disabled and select that
-    while ((disabledKeys.has(selectedKey) || collection.getItem(selectedKey)?.props?.isDisabled) && selectedKey !== collection.getLastKey()) {
+    while (selectedKey != null && (disabledKeys.has(selectedKey) || collection.getItem(selectedKey)?.props?.isDisabled) && selectedKey !== collection.getLastKey()) {
       selectedKey = collection.getKeyAfter(selectedKey);
     }
     // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last
-    if ((disabledKeys.has(selectedKey) || collection.getItem(selectedKey)?.props?.isDisabled) && selectedKey === collection.getLastKey()) {
+    if (selectedKey != null && (disabledKeys.has(selectedKey) || collection.getItem(selectedKey)?.props?.isDisabled) && selectedKey === collection.getLastKey()) {
       selectedKey = collection.getFirstKey();
     }
   }
diff --git a/packages/@react-stately/toast/src/useToastState.ts b/packages/@react-stately/toast/src/useToastState.ts
index cd84a379e36..2d04528f1f8 100644
--- a/packages/@react-stately/toast/src/useToastState.ts
+++ b/packages/@react-stately/toast/src/useToastState.ts
@@ -42,7 +42,7 @@ export interface QueuedToast<T> extends ToastOptions {
   /** A timer for the toast, if a timeout was set. */
   timer?: Timer,
   /** The current animation state for the toast. */
-  animation?: 'entering' | 'queued' | 'exiting'
+  animation?: 'entering' | 'queued' | 'exiting' | null
 }
 
 export interface ToastState<T> {
@@ -120,7 +120,7 @@ export class ToastQueue<T> {
       ...options,
       content,
       key: toastKey,
-      timer: options.timeout ? new Timer(() => this.close(toastKey), options.timeout) : null
+      timer: options.timeout ? new Timer(() => this.close(toastKey), options.timeout) : undefined
     };
 
     let low = 0;
@@ -173,7 +173,7 @@ export class ToastQueue<T> {
       let prevToasts: QueuedToast<T>[] = this.visibleToasts
         .filter(t => !toasts.some(t2 => t.key === t2.key))
         .map(t => ({...t, animation: 'exiting'}));
-      this.visibleToasts = prevToasts.concat(toasts).sort((a, b) => b.priority - a.priority);
+      this.visibleToasts = prevToasts.concat(toasts).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
     } else if (action === 'close' && this.hasExitAnimation) {
       // Cause a rerender to happen for exit animation
       this.visibleToasts = this.visibleToasts.map(t => {
@@ -213,7 +213,7 @@ export class ToastQueue<T> {
 
 class Timer {
   private timerId;
-  private startTime: number;
+  private startTime: number | null = null;
   private remaining: number;
   private callback: () => void;
 
@@ -234,7 +234,7 @@ class Timer {
 
     clearTimeout(this.timerId);
     this.timerId = null;
-    this.remaining -= Date.now() - this.startTime;
+    this.remaining -= Date.now() - this.startTime!;
   }
 
   resume() {
diff --git a/packages/@react-stately/toast/test/useToastState.test.js b/packages/@react-stately/toast/test/useToastState.test.js
index b27e9af087a..8c1182cf8f7 100644
--- a/packages/@react-stately/toast/test/useToastState.test.js
+++ b/packages/@react-stately/toast/test/useToastState.test.js
@@ -36,7 +36,7 @@ describe('useToastState', () => {
     expect(result.current.visibleToasts[0].content).toBe(newValue[0].content);
     expect(result.current.visibleToasts[0].animation).toBe('entering');
     expect(result.current.visibleToasts[0].timeout).toBe(0);
-    expect(result.current.visibleToasts[0].timer).toBe(null);
+    expect(result.current.visibleToasts[0].timer).toBe(undefined);
     expect(result.current.visibleToasts[0]).toHaveProperty('key');
   });
 
@@ -49,7 +49,7 @@ describe('useToastState', () => {
     expect(result.current.visibleToasts[0].content).toBe('Test');
     expect(result.current.visibleToasts[0].animation).toBe('entering');
     expect(result.current.visibleToasts[0].timeout).toBe(5000);
-    expect(result.current.visibleToasts[0].timer).not.toBe(null);
+    expect(result.current.visibleToasts[0].timer).not.toBe(undefined);
     expect(result.current.visibleToasts[0]).toHaveProperty('key');
   });
 
diff --git a/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts b/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts
index 48d6d29bf8e..32227e8ba60 100644
--- a/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts
+++ b/packages/@react-stately/tooltip/src/useTooltipTriggerState.ts
@@ -33,8 +33,8 @@ export interface TooltipTriggerState {
 let tooltips = {};
 let tooltipId = 0;
 let globalWarmedUp = false;
-let globalWarmUpTimeout = null;
-let globalCooldownTimeout = null;
+let globalWarmUpTimeout: ReturnType<typeof setTimeout> | null = null;
+let globalCooldownTimeout: ReturnType<typeof setTimeout> | null = null;
 
 /**
  * Manages state for a tooltip trigger. Tracks whether the tooltip is open, and provides
@@ -45,7 +45,7 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
   let {delay = TOOLTIP_DELAY, closeDelay = TOOLTIP_COOLDOWN} = props;
   let {isOpen, open, close} = useOverlayTriggerState(props);
   let id = useMemo(() => `${++tooltipId}`, []);
-  let closeTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+  let closeTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   let closeCallback = useRef<() => void>(close);
 
   let ensureTooltipEntry = () => {
@@ -62,7 +62,9 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
   };
 
   let showTooltip = () => {
-    clearTimeout(closeTimeout.current);
+    if (closeTimeout.current) {
+      clearTimeout(closeTimeout.current);
+    }
     closeTimeout.current = null;
     closeOpenTooltips();
     ensureTooltipEntry();
@@ -80,7 +82,9 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
 
   let hideTooltip = (immediate?: boolean) => {
     if (immediate || closeDelay <= 0) {
-      clearTimeout(closeTimeout.current);
+      if (closeTimeout.current) {
+        clearTimeout(closeTimeout.current);
+      }
       closeTimeout.current = null;
       closeCallback.current();
     } else if (!closeTimeout.current) {
@@ -124,10 +128,12 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
     closeCallback.current = close;
   }, [close]);
 
-   
+
   useEffect(() => {
     return () => {
-      clearTimeout(closeTimeout.current);
+      if (closeTimeout.current) {
+        clearTimeout(closeTimeout.current);
+      }
       let tooltip = tooltips[id];
       if (tooltip) {
         delete tooltips[id];
diff --git a/packages/@react-stately/tree/src/TreeCollection.ts b/packages/@react-stately/tree/src/TreeCollection.ts
index e465bd0366e..83b61609e3a 100644
--- a/packages/@react-stately/tree/src/TreeCollection.ts
+++ b/packages/@react-stately/tree/src/TreeCollection.ts
@@ -15,8 +15,8 @@ import {Collection, Key, Node} from '@react-types/shared';
 export class TreeCollection<T> implements Collection<Node<T>> {
   private keyMap: Map<Key, Node<T>> = new Map();
   private iterable: Iterable<Node<T>>;
-  private firstKey: Key;
-  private lastKey: Key;
+  private firstKey: Key | null = null;
+  private lastKey: Key | null = null;
 
   constructor(nodes: Iterable<Node<T>>, {expandedKeys}: {expandedKeys?: Set<Key>} = {}) {
     this.iterable = nodes;
@@ -36,7 +36,7 @@ export class TreeCollection<T> implements Collection<Node<T>> {
       visit(node);
     }
 
-    let last: Node<T>;
+    let last: Node<T> | null = null;
     let index = 0;
     for (let [key, node] of this.keyMap) {
       if (last) {
@@ -58,7 +58,7 @@ export class TreeCollection<T> implements Collection<Node<T>> {
       last.nextKey = undefined;
     }
 
-    this.lastKey = last?.key;
+    this.lastKey = last?.key ?? null;
   }
 
   *[Symbol.iterator]() {
@@ -75,12 +75,12 @@ export class TreeCollection<T> implements Collection<Node<T>> {
 
   getKeyBefore(key: Key) {
     let node = this.keyMap.get(key);
-    return node ? node.prevKey : null;
+    return node ? node.prevKey ?? null : null;
   }
 
   getKeyAfter(key: Key) {
     let node = this.keyMap.get(key);
-    return node ? node.nextKey : null;
+    return node ? node.nextKey ?? null : null;
   }
 
   getFirstKey() {
@@ -92,7 +92,7 @@ export class TreeCollection<T> implements Collection<Node<T>> {
   }
 
   getItem(key: Key) {
-    return this.keyMap.get(key);
+    return this.keyMap.get(key) ?? null;
   }
 
   at(idx: number) {
diff --git a/packages/@react-stately/tree/stories/useTreeState.stories.tsx b/packages/@react-stately/tree/stories/useTreeState.stories.tsx
index 355f3e01275..bf48fe0a3b6 100644
--- a/packages/@react-stately/tree/stories/useTreeState.stories.tsx
+++ b/packages/@react-stately/tree/stories/useTreeState.stories.tsx
@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Collection, Key, Node} from '@react-types/shared';
 import {Item} from '@react-stately/collections';
-import {Key, Node} from '@react-types/shared';
 import React, {useMemo, useRef} from 'react';
 import {TreeCollection} from '../src/TreeCollection';
 import {usePress} from '@react-aria/interactions';
@@ -51,7 +51,7 @@ function TreeExample(props = {}) {
 
 function Tree(props) {
   let state = useTreeState(props);
-  let ref = useRef(undefined);
+  let ref = useRef(null);
 
   let keyboardDelegate = useMemo(() => new TreeKeyboardDelegate(state.collection, state.disabledKeys), [state.collection, state.disabledKeys]);
 
@@ -71,8 +71,8 @@ function Tree(props) {
   );
 }
 
-function TreeNodes({nodes, state}) {
-  return Array.from(nodes).map((node: Node<object>) => (
+function TreeNodes({nodes, state}: {nodes: Collection<Node<object>>, state: any}) {
+  return Array.from(nodes).map(node => (
     <TreeItem
       node={node}
       key={node.key}
@@ -81,7 +81,7 @@ function TreeNodes({nodes, state}) {
 }
 
 function TreeItem({node, state}) {
-  let ref = useRef(undefined);
+  let ref = useRef(null);
 
   let {itemProps} = useSelectableItem({
     key: node.key,
diff --git a/packages/@react-stately/virtualizer/src/Layout.ts b/packages/@react-stately/virtualizer/src/Layout.ts
index 1cb27f9b865..d2190d2be6a 100644
--- a/packages/@react-stately/virtualizer/src/Layout.ts
+++ b/packages/@react-stately/virtualizer/src/Layout.ts
@@ -32,7 +32,7 @@ import {Virtualizer} from './Virtualizer';
  */
 export abstract class Layout<T extends object, O = any> implements LayoutDelegate {
   /** The Virtualizer the layout is currently attached to. */
-  virtualizer: Virtualizer<T, any>;
+  virtualizer: Virtualizer<T, any> | null = null;
 
   /**
    * Returns whether the layout should invalidate in response to
@@ -83,11 +83,11 @@ export abstract class Layout<T extends object, O = any> implements LayoutDelegat
    */
   getDropTargetLayoutInfo?(target: ItemDropTarget): LayoutInfo;
 
-  getItemRect(key: Key): Rect {
-    return this.getLayoutInfo(key)?.rect;
+  getItemRect(key: Key): Rect | null {
+    return this.getLayoutInfo(key)?.rect ?? null;
   }
 
   getVisibleRect(): Rect {
-    return this.virtualizer.visibleRect;
+    return this.virtualizer!.visibleRect;
   }
 }
diff --git a/packages/@react-stately/virtualizer/src/ReusableView.ts b/packages/@react-stately/virtualizer/src/ReusableView.ts
index 535c678d279..f033495d901 100644
--- a/packages/@react-stately/virtualizer/src/ReusableView.ts
+++ b/packages/@react-stately/virtualizer/src/ReusableView.ts
@@ -28,23 +28,25 @@ export class ReusableView<T extends object, V> {
   layoutInfo: LayoutInfo | null;
 
   /** The content currently being displayed by this view, set by the virtualizer. */
-  content: T;
+  content: T | null;
 
-  rendered: V;
+  rendered: V | null;
 
   viewType: string;
   key: Key;
 
-  parent: ReusableView<T, V> | null;
-  children: Set<ReusableView<T, V>>;
-  reusableViews: Map<string, ReusableView<T, V>[]>;
+  children: Set<ChildView<T, V>>;
+  reusableViews: Map<string, ChildView<T, V>[]>;
 
-  constructor(virtualizer: Virtualizer<T, V>) {
+  constructor(virtualizer: Virtualizer<T, V>, viewType: string) {
     this.virtualizer = virtualizer;
     this.key = ++KEY;
-    this.parent = null;
+    this.viewType = viewType;
     this.children = new Set();
     this.reusableViews = new Map();
+    this.layoutInfo = null;
+    this.content = null;
+    this.rendered = null;
   }
 
   /**
@@ -62,16 +64,14 @@ export class ReusableView<T extends object, V> {
     // The cells within a row are removed from their parent in order. If the row is reused, the cells
     // should be reused in the new row in the same order they were before.
     let reusable = this.reusableViews.get(reuseType);
-    let view = reusable?.length > 0
-      ? reusable.shift()
-      : new ReusableView<T, V>(this.virtualizer);
+    let view = reusable && reusable.length > 0
+      ? reusable.shift()!
+      : new ChildView<T, V>(this.virtualizer, this, reuseType);
 
-    view.viewType = reuseType;
-    view.parent = this;
     return view;
   }
 
-  reuseChild(child: ReusableView<T, V>) {
+  reuseChild(child: ChildView<T, V>) {
     child.prepareForReuse();
     let reusable = this.reusableViews.get(child.viewType);
     if (!reusable) {
@@ -81,3 +81,18 @@ export class ReusableView<T extends object, V> {
     reusable.push(child);
   }
 }
+
+export class RootView<T extends object, V> extends ReusableView<T, V> {
+  constructor(virtualizer: Virtualizer<T, V>) {
+    super(virtualizer, 'root');
+  }
+}
+
+export class ChildView<T extends object, V> extends ReusableView<T, V> {
+  parent: ReusableView<T, V>;
+
+  constructor(virtualizer: Virtualizer<T, V>, parent: ReusableView<T, V>, viewType: string) {
+    super(virtualizer, viewType);
+    this.parent = parent;
+  }
+}
diff --git a/packages/@react-stately/virtualizer/src/Virtualizer.ts b/packages/@react-stately/virtualizer/src/Virtualizer.ts
index 9279ffa8bda..d41dbbe5a1e 100644
--- a/packages/@react-stately/virtualizer/src/Virtualizer.ts
+++ b/packages/@react-stately/virtualizer/src/Virtualizer.ts
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {ChildView, ReusableView, RootView} from './ReusableView';
 import {Collection, Key} from '@react-types/shared';
 import {InvalidationContext, Mutable, VirtualizerDelegate, VirtualizerRenderOptions} from './types';
 import {isSetEqual} from './utils';
@@ -18,9 +19,14 @@ import {LayoutInfo} from './LayoutInfo';
 import {OverscanManager} from './OverscanManager';
 import {Point} from './Point';
 import {Rect} from './Rect';
-import {ReusableView} from './ReusableView';
 import {Size} from './Size';
 
+interface VirtualizerOptions<T extends object, V> {
+  delegate: VirtualizerDelegate<T, V>,
+  collection: Collection<T>,
+  layout: Layout<T>
+}
+
 /**
  * The Virtualizer class renders a scrollable collection of data using customizable layouts.
  * It supports very large collections by only rendering visible views to the DOM, reusing
@@ -55,23 +61,25 @@ export class Virtualizer<T extends object, V> {
   /** The set of persisted keys that are always present in the DOM, even if not currently in view. */
   readonly persistedKeys: Set<Key>;
 
-  private _visibleViews: Map<Key, ReusableView<T, V>>;
+  private _visibleViews: Map<Key, ChildView<T, V>>;
   private _renderedContent: WeakMap<T, V>;
-  private _rootView: ReusableView<T, V>;
+  private _rootView: RootView<T, V>;
   private _isScrolling: boolean;
-  private _invalidationContext: InvalidationContext | null;
+  private _invalidationContext: InvalidationContext;
   private _overscanManager: OverscanManager;
 
-  constructor(delegate: VirtualizerDelegate<T, V>) {
-    this.delegate = delegate;
+  constructor(options: VirtualizerOptions<T, V>) {
+    this.delegate = options.delegate;
+    this.collection = options.collection;
+    this.layout = options.layout;
     this.contentSize = new Size;
     this.visibleRect = new Rect;
     this.persistedKeys = new Set();
     this._visibleViews = new Map();
     this._renderedContent = new WeakMap();
-    this._rootView = new ReusableView(this);
+    this._rootView = new RootView(this);
     this._isScrolling = false;
-    this._invalidationContext = null;
+    this._invalidationContext = {};
     this._overscanManager = new OverscanManager();
   }
 
@@ -86,7 +94,7 @@ export class Virtualizer<T extends object, V> {
     for (let k of this.persistedKeys) {
       while (k != null) {
         let layoutInfo = this.layout.getLayoutInfo(k);
-        if (!layoutInfo) {
+        if (!layoutInfo || layoutInfo.parentKey == null) {
           break;
         }
 
@@ -105,7 +113,7 @@ export class Virtualizer<T extends object, V> {
     return layoutInfo.parentKey != null ? this._visibleViews.get(layoutInfo.parentKey) : this._rootView;
   }
 
-  private getReusableView(layoutInfo: LayoutInfo): ReusableView<T, V> {
+  private getReusableView(layoutInfo: LayoutInfo): ChildView<T, V> {
     let parentView = this.getParentView(layoutInfo)!;
     let view = parentView.getReusableView(layoutInfo.type);
     view.layoutInfo = layoutInfo;
@@ -114,13 +122,15 @@ export class Virtualizer<T extends object, V> {
   }
 
   private _renderView(reusableView: ReusableView<T, V>) {
-    let {type, key, content} = reusableView.layoutInfo;
-    reusableView.content = content || this.collection.getItem(key);
-    reusableView.rendered = this._renderContent(type, reusableView.content);
+    if (reusableView.layoutInfo) {
+      let {type, key, content} = reusableView.layoutInfo;
+      reusableView.content = content || this.collection.getItem(key);
+      reusableView.rendered = this._renderContent(type, reusableView.content);
+    }
   }
 
-  private _renderContent(type: string, content: T) {
-    let cached = this._renderedContent.get(content);
+  private _renderContent(type: string, content: T | null) {
+    let cached = content != null ? this._renderedContent.get(content) : null;
     if (cached != null) {
       return cached;
     }
@@ -196,7 +206,7 @@ export class Virtualizer<T extends object, V> {
   private updateSubviews() {
     let visibleLayoutInfos = this.getVisibleLayoutInfos();
 
-    let removed = new Set<ReusableView<T, V>>();
+    let removed = new Set<ChildView<T, V>>();
     for (let [key, view] of this._visibleViews) {
       let layoutInfo = visibleLayoutInfos.get(key);
       // If a view's parent changed, treat it as a delete and re-create in the new parent.
@@ -219,7 +229,9 @@ export class Virtualizer<T extends object, V> {
 
         let item = this.collection.getItem(layoutInfo.key);
         if (view.content !== item) {
-          this._renderedContent.delete(view.content);
+          if (view.content != null) {
+            this._renderedContent.delete(view.content);
+          }
           this._renderView(view);
         }
       }
@@ -261,7 +273,7 @@ export class Virtualizer<T extends object, V> {
       needsLayout = true;
     }
 
-    if (opts.layout !== this.layout) {
+    if (opts.layout !== this.layout || this.layout.virtualizer !== this) {
       if (this.layout) {
         this.layout.virtualizer = null;
       }
diff --git a/packages/@react-stately/virtualizer/src/types.ts b/packages/@react-stately/virtualizer/src/types.ts
index bb5fa65cc61..df8c88d55f9 100644
--- a/packages/@react-stately/virtualizer/src/types.ts
+++ b/packages/@react-stately/virtualizer/src/types.ts
@@ -24,14 +24,14 @@ export interface InvalidationContext<O = any> {
 
 export interface VirtualizerDelegate<T extends object, V> {
   setVisibleRect(rect: Rect): void,
-  renderView(type: string, content: T): V,
+  renderView(type: string, content: T | null): V,
   invalidate(ctx: InvalidationContext): void
 }
 
 export interface VirtualizerRenderOptions<T extends object, O = any> {
   layout: Layout<T>,
   collection: Collection<T>,
-  persistedKeys?: Set<Key>,
+  persistedKeys?: Set<Key> | null,
   visibleRect: Rect,
   invalidationContext: InvalidationContext,
   isScrolling: boolean,
diff --git a/packages/@react-stately/virtualizer/src/useVirtualizerState.ts b/packages/@react-stately/virtualizer/src/useVirtualizerState.ts
index dff243c91a2..9844e2acdd0 100644
--- a/packages/@react-stately/virtualizer/src/useVirtualizerState.ts
+++ b/packages/@react-stately/virtualizer/src/useVirtualizerState.ts
@@ -21,7 +21,7 @@ import {useLayoutEffect} from '@react-aria/utils';
 import {Virtualizer} from './Virtualizer';
 
 interface VirtualizerProps<T extends object, V, O> {
-  renderView(type: string, content: T): V,
+  renderView(type: string, content: T | null): V,
   layout: Layout<T>,
   collection: Collection<T>,
   onVisibleRectChange(rect: Rect): void,
@@ -45,13 +45,17 @@ export function useVirtualizerState<T extends object, V, O = any>(opts: Virtuali
   let [invalidationContext, setInvalidationContext] = useState<InvalidationContext>({});
   let visibleRectChanged = useRef(false);
   let [virtualizer] = useState(() => new Virtualizer<T, V>({
-    setVisibleRect(rect) {
-      setVisibleRect(rect);
-      visibleRectChanged.current = true;
-    },
-    // TODO: should changing these invalidate the entire cache?
-    renderView: opts.renderView,
-    invalidate: setInvalidationContext
+    collection: opts.collection,
+    layout: opts.layout,
+    delegate: {
+      setVisibleRect(rect) {
+        setVisibleRect(rect);
+        visibleRectChanged.current = true;
+      },
+      // TODO: should changing these invalidate the entire cache?
+      renderView: opts.renderView,
+      invalidate: setInvalidationContext
+    }
   }));
 
   // onVisibleRectChange must be called from an effect, not during render.
diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts
index 5cdf3791323..0fc6d643559 100644
--- a/packages/@react-types/calendar/src/index.d.ts
+++ b/packages/@react-types/calendar/src/index.d.ts
@@ -44,9 +44,9 @@ export interface CalendarPropsBase {
    */
   autoFocus?: boolean,
   /** Controls the currently focused date within the calendar. */
-  focusedValue?: DateValue,
+  focusedValue?: DateValue | null,
   /** The date that is focused when the calendar first mounts (uncountrolled). */
-  defaultFocusedValue?: DateValue,
+  defaultFocusedValue?: DateValue | null,
   /** Handler that is called when the focused date changes. */
   onFocusChange?: (date: CalendarDate) => void,
   /**
@@ -66,8 +66,8 @@ export interface CalendarPropsBase {
 }
 
 export type DateRange = RangeValue<DateValue> | null;
-export interface CalendarProps<T extends DateValue | null> extends CalendarPropsBase, ValueBase<T | null, MappedDateValue<T>> {}
-export interface RangeCalendarProps<T extends DateValue | null> extends CalendarPropsBase, ValueBase<RangeValue<T> | null> {
+export interface CalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<T | null, MappedDateValue<T>> {}
+export interface RangeCalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>>> {
   /**
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
index 1421ca90aba..6aa97f34a40 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -39,13 +39,13 @@ type MappedDateValue<T> =
 export type Granularity = 'day' | 'hour' | 'minute' | 'second';
 interface DateFieldBase<T extends DateValue> extends InputBase, Validation<MappedDateValue<T>>, FocusableProps, LabelableProps, HelpTextProps, OverlayTriggerProps {
   /** The minimum allowed date that a user may select. */
-  minValue?: DateValue,
+  minValue?: DateValue | null,
   /** The maximum allowed date that a user may select. */
-  maxValue?: DateValue,
+  maxValue?: DateValue | null,
   /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
   isDateUnavailable?: (date: DateValue) => boolean,
   /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */
-  placeholderValue?: T,
+  placeholderValue?: T | null,
   /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
   hourCycle?: 12 | 24,
   /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */
@@ -63,7 +63,7 @@ interface DateFieldBase<T extends DateValue> extends InputBase, Validation<Mappe
 }
 
 interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
-export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T>> {}
+export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
 export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {}
 
 interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayTriggerProps {
@@ -75,11 +75,11 @@ interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayT
 }
 export interface AriaDatePickerBaseProps<T extends DateValue> extends DatePickerBase<T>, AriaLabelingProps, DOMProps {}
 
-export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T>> {}
+export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
 export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T>, InputDOMProps {}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>>> {
+export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>> | null> {
   /**
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
@@ -134,7 +134,7 @@ type MappedTimeValue<T> =
   T extends Time ? Time :
   never;
 
-export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation<MappedTimeValue<T>>, FocusableProps, LabelableProps, HelpTextProps, ValueBase<T | null, MappedTimeValue<T>> {
+export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation<MappedTimeValue<T>>, FocusableProps, LabelableProps, HelpTextProps, ValueBase<T | null, MappedTimeValue<T> | null> {
   /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
   hourCycle?: 12 | 24,
   /**
@@ -155,9 +155,9 @@ export interface TimePickerProps<T extends TimeValue> extends InputBase, Validat
    */
   placeholderValue?: T,
   /** The minimum allowed time that a user may select. */
-  minValue?: TimeValue,
+  minValue?: TimeValue | null,
   /** The maximum allowed time that a user may select. */
-  maxValue?: TimeValue
+  maxValue?: TimeValue | null
 }
 
 export interface AriaTimeFieldProps<T extends TimeValue> extends TimePickerProps<T>, AriaLabelingProps, DOMProps, InputDOMProps {}
diff --git a/packages/@react-types/grid/src/index.d.ts b/packages/@react-types/grid/src/index.d.ts
index e56c3480bba..7b12b7fb39e 100644
--- a/packages/@react-types/grid/src/index.d.ts
+++ b/packages/@react-types/grid/src/index.d.ts
@@ -19,7 +19,7 @@ export interface GridCollection<T> extends Collection<GridNode<T>> {
   rows: GridNode<T>[]
 }
 
-export interface GridRow<T> {
+export interface GridRow<T> extends Partial<GridNode<T>> {
   key?: Key,
   type: string,
   childNodes: Iterable<Node<T>>
diff --git a/packages/@react-types/pagination/README.md b/packages/@react-types/pagination/README.md
deleted file mode 100644
index aa51131261c..00000000000
--- a/packages/@react-types/pagination/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @react-types/pagination
-
-This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.
diff --git a/packages/@react-types/pagination/package.json b/packages/@react-types/pagination/package.json
deleted file mode 100644
index e7e56bca216..00000000000
--- a/packages/@react-types/pagination/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "name": "@react-types/pagination",
-  "version": "3.0.0-alpha.1",
-  "description": "Spectrum UI components in React",
-  "license": "Apache-2.0",
-  "private": true,
-  "types": "src/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/react-spectrum"
-  },
-  "dependencies": {
-    "@react-types/shared": "^3.1.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-  }
-}
diff --git a/packages/@react-types/pagination/src/index.d.ts b/packages/@react-types/pagination/src/index.d.ts
deleted file mode 100644
index 7b49c95191c..00000000000
--- a/packages/@react-types/pagination/src/index.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ValueBase} from '@react-types/shared';
-
-export interface PaginationBase extends ValueBase<number> {
-  maxValue?: number,
-  onPrevious?: (value: number, e: Event) => void,
-  onNext?: (value: number, e: Event) => void
-}
-
-export interface PaginationProps {
-  value?: any,
-  maxValue?: number,
-  defaultValue?: number,
-  onChange?: (val: number) => void
-}
diff --git a/packages/@react-types/shared/src/collections.d.ts b/packages/@react-types/shared/src/collections.d.ts
index 7c34092be7d..f627cdf3511 100644
--- a/packages/@react-types/shared/src/collections.d.ts
+++ b/packages/@react-types/shared/src/collections.d.ts
@@ -29,7 +29,7 @@ export interface ItemProps<T> extends LinkDOMProps {
   hasChildItems?: boolean
 }
 
-export type ItemElement<T> = ReactElement<ItemProps<T>>;
+export type ItemElement<T> = ReactElement<ItemProps<T>> | null;
 export type ItemRenderer<T> = (item: T) => ItemElement<T>;
 export type LoadingState = 'loading' | 'sorting' | 'loadingMore' | 'error' | 'idle' | 'filtering';
 
@@ -51,7 +51,7 @@ export interface SectionProps<T> {
   items?: Iterable<T>
 }
 
-export type SectionElement<T> = ReactElement<SectionProps<T>>;
+export type SectionElement<T> = ReactElement<SectionProps<T>> | null;
 
 export type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
 export type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
@@ -114,13 +114,13 @@ export interface KeyboardDelegate {
   getKeyPageAbove?(key: Key): Key | null,
 
   /** Returns the first key, or `null` for none. */
-  getFirstKey?(key?: Key, global?: boolean): Key | null,
+  getFirstKey?(key?: Key | null, global?: boolean): Key | null,
 
   /** Returns the last key, or `null` for none. */
-  getLastKey?(key?: Key, global?: boolean): Key | null,
+  getLastKey?(key?: Key | null, global?: boolean): Key | null,
 
   /** Returns the next key after `fromKey` that matches the given search string, or `null` for none. */
-  getKeyForSearch?(search: string, fromKey?: Key): Key | null
+  getKeyForSearch?(search: string, fromKey?: Key | null): Key | null
 }
 
 export interface Rect {
@@ -206,7 +206,7 @@ export interface Node<T> {
   /** An accessibility label for this node. */
   'aria-label'?: string,
   /** The index of this node within its parent. */
-  index?: number,
+  index: number,
   /** A function that should be called to wrap the rendered node. */
   wrapper?: (element: ReactElement) => ReactElement,
   /** The key of the parent node. */
@@ -218,7 +218,7 @@ export interface Node<T> {
   /** Additional properties specific to a particular node type. */
   props?: any,
   /** @private */
-  shouldInvalidate?: (context: unknown) => boolean,
+  shouldInvalidate?: (context: any) => boolean,
   /** A function that renders this node to a React Element in the DOM. */
   render?: (node: Node<any>) => ReactElement
 }
diff --git a/packages/@react-types/shared/src/refs.d.ts b/packages/@react-types/shared/src/refs.d.ts
index 828adc07c14..16bcbe30265 100644
--- a/packages/@react-types/shared/src/refs.d.ts
+++ b/packages/@react-types/shared/src/refs.d.ts
@@ -13,7 +13,7 @@
 import {ReactElement, Ref, RefAttributes} from 'react';
 
 export interface DOMRefValue<T extends HTMLElement = HTMLElement> {
-  UNSAFE_getDOMNode(): T
+  UNSAFE_getDOMNode(): T | null
 }
 
 export interface FocusableRefValue<T extends HTMLElement = HTMLElement, D extends HTMLElement = T> extends DOMRefValue<D> {
diff --git a/packages/@spectrum-icons/ui/scripts/generateIcons.cjs b/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
index d04442469a0..f51fb77b570 100644
--- a/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
+++ b/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
@@ -38,15 +38,15 @@ function template(iconName) {
     return (
 `import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}.js';
 import {UIIcon, UIIconPropsWithoutChildren} from '@react-spectrum/icon';
-import {useProvider} from '@react-spectrum/provider';
-import React from 'react';
+import {Context} from '@react-spectrum/provider';
+import React, {useContext} from 'react';
 
 ${jsx}
 
 ExpressIcon.displayName = IconComponent.displayName;
 
 export default function ${iconName}(props: UIIconPropsWithoutChildren) {
-  let provider = useProvider();
+  let provider = useContext(Context);
   return <UIIcon {...props}>{provider?.theme?.global?.express ? <ExpressIcon /> : <IconComponent />}</UIIcon>;
 }
 `
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
index e46144e991c..273c22ce5ba 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
@@ -108,7 +108,7 @@ export default function transformer(file: FileInfo, api: API, options: Options)
         if (!specifier || !t.isImportDefaultSpecifier(specifier)) {return;}
 
         let localName = specifier.local.name;
-        
+
         if (iconMap.has(iconName)) {
           let newIconName = iconMap.get(iconName)!;
           iconImports.set(localName, {path, newName: newIconName});
@@ -150,7 +150,7 @@ export default function transformer(file: FileInfo, api: API, options: Options)
     let {path, newName} = iconInfo;
     if (newName) {
       let newImportSource = `@react-spectrum/s2/icons/${newName}`;
-      
+
       // Check if we can update local name
       let newLocalName = localName;
       if (localName === path.node.source.value.split('/').pop() && localName !== newName) {
diff --git a/packages/dev/docs/pages/react-aria/home/I18n.tsx b/packages/dev/docs/pages/react-aria/home/I18n.tsx
index 8b8a8157d20..8e7e291be11 100644
--- a/packages/dev/docs/pages/react-aria/home/I18n.tsx
+++ b/packages/dev/docs/pages/react-aria/home/I18n.tsx
@@ -12,7 +12,7 @@
 import {Calendar} from 'tailwind-starter/Calendar';
 import {DateField} from 'tailwind-starter/DateField';
 import {DateValue, I18nProvider, useLocale} from 'react-aria-components';
-import {getLocalTimeZone, now} from '@internationalized/date';
+import {getLocalTimeZone, now, ZonedDateTime} from '@internationalized/date';
 import {NumberField} from 'tailwind-starter/NumberField';
 import React from 'react';
 import {Select, SelectItem, SelectSection} from 'tailwind-starter/Select';
@@ -121,7 +121,8 @@ export function I18n() {
   }, [langDisplay, regionDisplay]);
 
   let pref = preferences.find(p => p.value === locale);
-  let preferredCalendars = React.useMemo(() => pref ? (pref.ordering || 'gregory').split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
+  // @ts-ignore there cannot be any undefined values in the array
+  let preferredCalendars: Array<{key: string, name: string}> = React.useMemo(() => pref ? (pref.ordering || 'gregory').split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
   let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p?.key === c.key)), [preferredCalendars]);
 
   let updateLocale = locale => {
@@ -149,8 +150,8 @@ export function I18n() {
     numberingSystem = 'arab';
   }
 
-  let [date, setDate] = React.useState(() => now(getLocalTimeZone()));
-  let [focusedDate, setFocusedDate] = React.useState<DateValue>(date);
+  let [date, setDate] = React.useState<ZonedDateTime | null>(() => now(getLocalTimeZone()));
+  let [focusedDate, setFocusedDate] = React.useState<DateValue | null>(date);
   let [number, setNumber] = React.useState(1234);
   let updateNumberFormat = format => {
     setNumberFormat(format);
@@ -176,10 +177,10 @@ export function I18n() {
         </Select>
         <Select label="Calendar" selectedKey={calendar} onSelectionChange={updateCalendar}>
           <SelectSection title="Preferred" items={preferredCalendars}>
-            {item => <SelectItem>{item.name}</SelectItem>}
+            {(item: { key: string, name: string }) => <SelectItem>{item.name}</SelectItem>}
           </SelectSection>
           <SelectSection title="Other" items={otherCalendars}>
-            {item => <SelectItem>{item.name}</SelectItem>}
+            {(item: { key: string, name: string }) => <SelectItem>{item.name}</SelectItem>}
           </SelectSection>
         </Select>
         <Select label="Numbering System" selectedKey={numberingSystem} onSelectionChange={setNumberingSystem}>
diff --git a/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx b/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx
index 449c5edd81a..a5d47463d38 100644
--- a/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx
+++ b/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx
@@ -134,7 +134,7 @@ function Column({list, status, itemClassName}: ColumnProps) {
     getItems(keys) {
       return [...keys].map((id) => ({
         'issue-id': String(id),
-        'text/plain': list.getItem(id).title
+        'text/plain': list.getItem(id)?.title ?? ''
       }));
     },
 
@@ -162,7 +162,7 @@ function Column({list, status, itemClassName}: ColumnProps) {
         e.items.filter(isTextDropItem).map(item => item.getText('issue-id'))
       );
       for (let id of ids) {
-        list.update(id, {...list.getItem(id), status});
+        list.update(id, {...list.getItem(id)!, status});
       }
       if (e.target.dropPosition === 'before') {
         list.moveBefore(e.target.key, ids);
@@ -177,7 +177,7 @@ function Column({list, status, itemClassName}: ColumnProps) {
         e.items.filter(isTextDropItem).map(item => item.getText('issue-id'))
       );
       for (let id of ids) {
-        list.update(id, {...list.getItem(id), status});
+        list.update(id, {...list.getItem(id)!, status});
       }
     },
 
diff --git a/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx b/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
index f85908826e6..412a5818dba 100644
--- a/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
+++ b/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
@@ -16,7 +16,7 @@ import React, {useCallback, useRef, useState} from 'react';
 import {Switch} from 'react-aria-components';
 
 export function SwitchAnimation() {
-  let ref = useRef(undefined);
+  let ref = useRef(null);
   let [isAnimating, setAnimating] = useState(false);
   let [isSelected, setSelected] = useState(true);
 
@@ -49,15 +49,15 @@ export function SwitchAnimation() {
 
   return (
     <>
-      <Finger style={{animation: isAnimating ? 'touch-animation 12s ease-in-out 500ms' : null}} />
+      <Finger style={{animation: isAnimating ? 'touch-animation 12s ease-in-out 500ms' : undefined}} />
       <Switch
         aria-label="Example switch"
         ref={ref}
         isSelected={isSelected}
         onChange={isAnimating ? undefined : setSelected}
         className="group inline-flex touch-none">
-        <span className="[--bg:theme(colors.slate.300)] dark:[--bg:theme(colors.zinc.600)] forced-colors:![--bg:ButtonFace] bg-[--bg] [--bg-selected:theme(colors.green.500)] forced-colors:![--bg-selected:Highlight] group-selected:bg-[--bg-selected] group-focus-visible:outline outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : null}}>
-          <span className="group-selected:ml-6 group-selected:group-pressed:ml-4 group-pressed:w-10 block h-8 w-8 origin-right rounded-full bg-white forced-colors:bg-[ButtonText] forced-colors:group-selected:bg-[HighlightText] border border-transparent shadow transition-all duration-200" style={{animation: isAnimating ? 'switch-animation 12s ease-in-out 500ms' : null, contain: 'layout'}} />
+        <span className="[--bg:theme(colors.slate.300)] dark:[--bg:theme(colors.zinc.600)] forced-colors:![--bg:ButtonFace] bg-[--bg] [--bg-selected:theme(colors.green.500)] forced-colors:![--bg-selected:Highlight] group-selected:bg-[--bg-selected] group-focus-visible:outline outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : undefined}}>
+          <span className="group-selected:ml-6 group-selected:group-pressed:ml-4 group-pressed:w-10 block h-8 w-8 origin-right rounded-full bg-white forced-colors:bg-[ButtonText] forced-colors:group-selected:bg-[HighlightText] border border-transparent shadow transition-all duration-200" style={{animation: isAnimating ? 'switch-animation 12s ease-in-out 500ms' : undefined, contain: 'layout'}} />
         </span>
       </Switch>
     </>
diff --git a/packages/dev/docs/pages/react-aria/home/components.tsx b/packages/dev/docs/pages/react-aria/home/components.tsx
index 27ef0a08c55..388ae964aa3 100644
--- a/packages/dev/docs/pages/react-aria/home/components.tsx
+++ b/packages/dev/docs/pages/react-aria/home/components.tsx
@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {ArrowRight} from 'lucide-react';
-import React, {HTMLAttributes, ReactNode} from 'react';
-import {RefObject} from '@react-types/shared';
+import React, {ForwardedRef, HTMLAttributes, ReactNode} from 'react';
 
 export function Window({children, className = '', isBackground = false, toolbar}) {
   return (
@@ -77,7 +76,7 @@ export function Arrow({href, children, textX, x1, x2, points, y, marker = 'marke
   );
 }
 
-export const Finger = React.forwardRef((props: HTMLAttributes<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) => {
+export const Finger = React.forwardRef((props: HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement | null>) => {
   return <div ref={ref} className="z-10 pointer-events-none absolute w-10 h-10 rounded-full border border-black/80 bg-black/80 dark:border-white/80 dark:bg-white/80 dark:mix-blend-difference opacity-0 [--hover-opacity:0.15] [--pressed-opacity:0.3] forced-colors:[--hover-opacity:0.5] forced-colors:[--pressed-opacity:1] forced-colors:!bg-[Highlight] forced-colors:!mix-blend-normal" {...props} />;
 });
 
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index 3517748e5b0..7c189bc67fa 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -177,6 +177,6 @@ function useCollectionRender(
 
 export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
 
-export function usePersistedKeys(focusedKey: Key) {
+export function usePersistedKeys(focusedKey: Key | null) {
   return useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
 }
diff --git a/packages/react-aria-components/src/OverlayArrow.tsx b/packages/react-aria-components/src/OverlayArrow.tsx
index b4ac146e253..b1b44a59a1c 100644
--- a/packages/react-aria-components/src/OverlayArrow.tsx
+++ b/packages/react-aria-components/src/OverlayArrow.tsx
@@ -16,7 +16,7 @@ import {PlacementAxis} from 'react-aria';
 import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
 interface OverlayArrowContextValue extends OverlayArrowProps {
-  placement: PlacementAxis
+  placement: PlacementAxis | null
 }
 
 export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContextValue, HTMLDivElement>>({
@@ -30,7 +30,7 @@ export interface OverlayArrowRenderProps {
    * The placement of the overlay relative to the trigger.
    * @selector [data-placement="left | right | top | bottom"]
    */
-  placement: PlacementAxis
+  placement: PlacementAxis | null
 }
 
 function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
@@ -38,9 +38,11 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
   let placement = (props as OverlayArrowContextValue).placement;
   let style: CSSProperties = {
     position: 'absolute',
-    [placement]: '100%',
     transform: placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : 'translateY(-50%)'
   };
+  if (placement != null) {
+    style[placement] = '100%';
+  }
 
   let renderProps = useRenderProps({
     ...props,
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index d3df5300080..246e5551627 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -65,7 +65,7 @@ export interface PopoverRenderProps {
    * The placement of the popover relative to the trigger.
    * @selector [data-placement="left | right | top | bottom"]
    */
-  placement: PlacementAxis,
+  placement: PlacementAxis | null,
   /**
    * Whether the popover is currently entering. Use this to apply animations.
    * @selector [data-entering]
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 719eb2c7d6b..f240beb22b3 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1143,7 +1143,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
   },
   props => {
     if (props.id == null && typeof props.children === 'function') {
-      console.warn('No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.');
+      throw new Error('No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.');
     }
 
     let dependencies = [props.value].concat(props.dependencies);
@@ -1194,7 +1194,6 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
   let {dragState} = useContext(DragAndDropContext);
   let {isVirtualized} = useContext(CollectionRendererContext);
 
-  // @ts-ignore
   cell.column = state.collection.columns[cell.index];
 
   let {gridCellProps, isPressed} = useTableCell({
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
index 90847f44db4..15787f84dc6 100644
--- a/packages/react-aria-components/src/Tooltip.tsx
+++ b/packages/react-aria-components/src/Tooltip.tsx
@@ -55,7 +55,7 @@ export interface TooltipRenderProps {
    * The placement of the tooltip relative to the trigger.
    * @selector [data-placement="left | right | top | bottom"]
    */
-  placement: PlacementAxis,
+  placement: PlacementAxis | null,
   /**
    * Whether the tooltip is currently entering. Use this to apply animations.
    * @selector [data-entering]
@@ -168,7 +168,7 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: Ref
       ref={props.tooltipRef}
       {...renderProps}
       style={{...overlayProps.style, ...renderProps.style}}
-      data-placement={placement}
+      data-placement={placement ?? undefined}
       data-entering={isEntering || undefined}
       data-exiting={props.isExiting || undefined}>
       <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
diff --git a/packages/react-aria-components/src/Virtualizer.tsx b/packages/react-aria-components/src/Virtualizer.tsx
index 7b9edb2a858..c1c83554888 100644
--- a/packages/react-aria-components/src/Virtualizer.tsx
+++ b/packages/react-aria-components/src/Virtualizer.tsx
@@ -126,7 +126,7 @@ function renderWrapper(
   );
 
   let {collection, layout} = reusableView.virtualizer;
-  let {key, type} = reusableView.content;
+  let {key, type} = reusableView.content!;
   if (type === 'item' && renderDropIndicator && layout.getDropTargetLayoutInfo) {
     rendered = (
       <React.Fragment key={reusableView.key}>
@@ -146,7 +146,7 @@ function renderDropIndicatorWrapper(
   dropPosition: DropPosition,
   renderDropIndicator: (target: ItemDropTarget) => ReactNode
 ) {
-  let target: DropTarget = {type: 'item', key: reusableView.content.key, dropPosition};
+  let target: DropTarget = {type: 'item', key: reusableView.content!.key, dropPosition};
   let indicator = renderDropIndicator(target);
   if (indicator) {
     let layoutInfo = reusableView.virtualizer.layout.getDropTargetLayoutInfo!(target);
diff --git a/packages/react-aria-components/stories/GridList.stories.tsx b/packages/react-aria-components/stories/GridList.stories.tsx
index 38af0aa6120..d896c5d882b 100644
--- a/packages/react-aria-components/stories/GridList.stories.tsx
+++ b/packages/react-aria-components/stories/GridList.stories.tsx
@@ -125,7 +125,7 @@ export function VirtualizedGridList() {
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => {
-      return [...keys].map(key => ({'text/plain': list.getItem(key).name}));
+      return [...keys].map(key => ({'text/plain': list.getItem(key)?.name ?? ''}));
     },
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
diff --git a/packages/react-aria-components/stories/ListBox.stories.tsx b/packages/react-aria-components/stories/ListBox.stories.tsx
index 625211eabc4..14d403e4520 100644
--- a/packages/react-aria-components/stories/ListBox.stories.tsx
+++ b/packages/react-aria-components/stories/ListBox.stories.tsx
@@ -134,7 +134,7 @@ export const ListBoxDnd = (props: ListBoxProps<typeof albums[0]>) => {
   });
 
   let {dragAndDropHooks} = useDragAndDrop({
-    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).title})),
+    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key)?.title ?? ''})),
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
         list.moveBefore(e.target.key, e.keys);
@@ -312,7 +312,7 @@ export function VirtualizedListBoxDnd() {
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => {
-      return [...keys].map(key => ({'text/plain': list.getItem(key).name}));
+      return [...keys].map(key => ({'text/plain': list.getItem(key)?.name ?? ''}));
     },
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
@@ -363,7 +363,7 @@ export function VirtualizedListBoxGrid({minSize, maxSize}) {
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => {
-      return [...keys].map(key => ({'text/plain': list.getItem(key).name}));
+      return [...keys].map(key => ({'text/plain': list.getItem(key)?.name ?? ''}));
     },
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
diff --git a/packages/react-aria-components/stories/Table.stories.tsx b/packages/react-aria-components/stories/Table.stories.tsx
index 28db512d235..3e63b22ad82 100644
--- a/packages/react-aria-components/stories/Table.stories.tsx
+++ b/packages/react-aria-components/stories/Table.stories.tsx
@@ -30,10 +30,10 @@ const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: stri
 
   const {dragAndDropHooks} = useDragAndDrop({
     getItems: keys => {
-      return [...keys].map(k => {
+      return [...keys].filter(k => !!list.getItem(k)).map(k => {
         const item = list.getItem(k);
         return {
-          'text/plain': item.id,
+          'text/plain': item!.id,
           item: JSON.stringify(item)
         };
       });
@@ -254,11 +254,11 @@ export const DndTable = (props: DndTableProps) => {
     isDisabled: props.isDisabled,
     // Provide drag data in a custom format as well as plain text.
     getItems(keys) {
-      return [...keys].map((key) => {
+      return [...keys].filter(k => !!list.getItem(k)).map((key) => {
         let item = list.getItem(key);
         return {
           'custom-app-type': JSON.stringify(item),
-          'text/plain': item.name
+          'text/plain': item!.name
         };
       });
     },
@@ -629,7 +629,7 @@ export function VirtualizedTable() {
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys) => {
-      return [...keys].map(key => ({'text/plain': list.getItem(key).foo}));
+      return [...keys].filter(k => !!list.getItem(k)).map(key => ({'text/plain': list.getItem(key)!.foo}));
     },
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js
index c3ab8d4a6e4..9bae0de17ea 100644
--- a/packages/react-aria-components/test/Table.test.js
+++ b/packages/react-aria-components/test/Table.test.js
@@ -873,8 +873,8 @@ describe('Table', () => {
     );
 
     let rows = getAllByRole('row');
-    expect(rows).toHaveLength(8);
-    expect(rows.map(r => r.textContent)).toEqual(['FooBar', 'Foo 0Bar 0', 'Foo 1Bar 1', 'Foo 2Bar 2', 'Foo 3Bar 3', 'Foo 4Bar 4', 'Foo 5Bar 5', 'Foo 6Bar 6']);
+    expect(rows).toHaveLength(7);
+    expect(rows.map(r => r.textContent)).toEqual(['FooBar', 'Foo 0Bar 0', 'Foo 1Bar 1', 'Foo 2Bar 2', 'Foo 3Bar 3', 'Foo 4Bar 4', 'Foo 5Bar 5']);
     for (let row of rows) {
       expect(row).toHaveAttribute('aria-rowindex');
     }
@@ -885,14 +885,14 @@ describe('Table', () => {
 
     rows = getAllByRole('row');
     expect(rows).toHaveLength(8);
-    expect(rows.map(r => r.textContent)).toEqual(['FooBar', 'Foo 8Bar 8', 'Foo 9Bar 9', 'Foo 10Bar 10', 'Foo 11Bar 11', 'Foo 12Bar 12', 'Foo 13Bar 13', 'Foo 14Bar 14']);
+    expect(rows.map(r => r.textContent)).toEqual(['FooBar', 'Foo 7Bar 7', 'Foo 8Bar 8', 'Foo 9Bar 9', 'Foo 10Bar 10', 'Foo 11Bar 11', 'Foo 12Bar 12', 'Foo 13Bar 13']);
 
     await user.tab();
     await user.keyboard('{End}');
 
     rows = getAllByRole('row');
     expect(rows).toHaveLength(9);
-    expect(rows.map(r => r.textContent)).toEqual(['FooBar', 'Foo 8Bar 8', 'Foo 9Bar 9', 'Foo 10Bar 10', 'Foo 11Bar 11', 'Foo 12Bar 12', 'Foo 13Bar 13', 'Foo 14Bar 14', 'Foo 49Bar 49']);
+    expect(rows.map(r => r.textContent)).toEqual(['FooBar', 'Foo 7Bar 7', 'Foo 8Bar 8', 'Foo 9Bar 9', 'Foo 10Bar 10', 'Foo 11Bar 11', 'Foo 12Bar 12', 'Foo 13Bar 13', 'Foo 49Bar 49']);
   });
 
   describe('drag and drop', () => {
@@ -1355,8 +1355,7 @@ describe('Table', () => {
         );
       }
 
-      expect(() => render(<StaticRowDynamicCell />)).toThrow();
-      expect(consoleWarnSpy).toHaveBeenCalledWith('No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.');
+      expect(() => render(<StaticRowDynamicCell />)).toThrow('No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.');
     });
   });
 
diff --git a/packages/react-aria-components/test/Tree.test.tsx b/packages/react-aria-components/test/Tree.test.tsx
index 67d82e362c7..89b2fdc064e 100644
--- a/packages/react-aria-components/test/Tree.test.tsx
+++ b/packages/react-aria-components/test/Tree.test.tsx
@@ -1219,8 +1219,7 @@ describe('Tree', () => {
     let offsetHeight, scrollHeight;
     beforeAll(function () {
       scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 880);
-      offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
-        // @ts-ignore
+      offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function (this: HTMLElement) {
         if (this.getAttribute('role') === 'treegrid') {
           return 880;
         }
diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx
index 90a39702499..5a40c8b5c20 100644
--- a/starters/tailwind/src/ListBox.tsx
+++ b/starters/tailwind/src/ListBox.tsx
@@ -90,6 +90,7 @@ export function DropdownItem(props: ListBoxItemProps) {
 
 export interface DropdownSectionProps<T> extends SectionProps<T> {
   title?: string
+  items?: any
 }
 
 export function DropdownSection<T extends object>(props: DropdownSectionProps<T>) {
diff --git a/tsconfig.json b/tsconfig.json
index 6d7b7c33d7d..4df9d95a37e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,124 +33,10 @@
       "dom.iterable"
     ],
     "skipLibCheck": false,
-    "strict": false,
+    "strict": true,
     "plugins": [
       {
         "name": "@react-spectrum/ts-plugin"
-      },
-      {
-        "name": "typescript-strict-plugin",
-        "paths": [
-          "./packages/@internationalized",
-          "./packages/@react-aria/a",
-          "./packages/@react-aria/b",
-          "./packages/@react-aria/c",
-          "./packages/@react-aria/d",
-          "./packages/@react-aria/l",
-          "./packages/@react-aria/disclosure",
-          "./packages/@react-aria/e",
-          "./packages/@react-aria/f",
-          "./packages/@react-aria/h",
-          "./packages/@react-aria/i",
-          "./packages/@react-aria/j",
-          "./packages/@react-aria/k",
-          "./packages/@react-aria/l",
-          "./packages/@react-aria/meter",
-          "./packages/@react-aria/numberfield",
-          "./packages/@react-aria/progress",
-          "./packages/@react-aria/q",
-          "./packages/@react-aria/radio",
-          "./packages/@react-aria/searchfield",
-          "./packages/@react-aria/separator",
-          "./packages/@react-aria/sidenav",
-          "./packages/@react-aria/spinbutton",
-          "./packages/@react-aria/ssr",
-          "./packages/@react-aria/steplist",
-          "./packages/@react-aria/switch",
-          "./packages/@react-aria/tabs",
-          "./packages/@react-aria/tag",
-          "./packages/@react-aria/test-utils",
-          "./packages/@react-aria/toggle",
-          "./packages/@react-aria/u",
-          "./packages/@react-aria/visually-hidden",
-          "./packages/@react-aria/w",
-          "./packages/@react-aria/x",
-          "./packages/@react-aria/y",
-          "./packages/@react-aria/z",
-          "./packages/@react-spectrum/a",
-          "./packages/@react-spectrum/b",
-          "./packages/@react-spectrum/calendar",
-          "./packages/@react-spectrum/color",
-          "./packages/@react-spectrum/contextualhelp",
-          "./packages/@react-spectrum/checkbox",
-          "./packages/@react-spectrum/dialog",
-          "./packages/@react-spectrum/divider",
-          "./packages/@react-spectrum/dropzone",
-          "./packages/@react-spectrum/form",
-          "./packages/@react-spectrum/icon",
-          "./packages/@react-spectrum/illustratedmessage",
-          "./packages/@react-spectrum/inlinealert",
-          "./packages/@react-spectrum/image",
-          "./packages/@react-spectrum/label",
-          "./packages/@react-spectrum/link",
-          "./packages/@react-spectrum/meter",
-          "./packages/@react-spectrum/numberfield",
-          "./packages/@react-spectrum/progress",
-          "./packages/@react-spectrum/radio",
-          "./packages/@react-spectrum/s2",
-          "./packages/@react-spectrum/searchfield",
-          "./packages/@react-spectrum/searchwithin",
-          "./packages/@react-spectrum/statuslight",
-          "./packages/@react-spectrum/steplist",
-          "./packages/@react-spectrum/story-utils",
-          "./packages/@react-spectrum/switch",
-          "./packages/@react-spectrum/tabs",
-          "./packages/@react-spectrum/tag",
-          "./packages/@react-spectrum/text",
-          "./packages/@react-spectrum/textfield",
-          "./packages/@react-spectrum/theme-dark",
-          "./packages/@react-spectrum/theme-default",
-          "./packages/@react-spectrum/theme-light",
-          "./packages/@react-spectrum/codemods",
-          "./packages/@react-spectrum/view",
-          "./packages/@react-spectrum/well",
-          "./packages/@react-stately/calendar",
-          "./packages/@react-stately/checkbox",
-          "./packages/@react-stately/color",
-          "./packages/@react-stately/combobox",
-          "./packages/@react-stately/disclosure",
-          "./packages/@react-stately/list",
-          "./packages/@react-stately/numberfield",
-          "./packages/@react-stately/overlays",
-          "./packages/@react-stately/pagination",
-          "./packages/@react-stately/radio",
-          "./packages/@react-stately/searchfield",
-          "./packages/@react-stately/steplist",
-          "./packages/@react-stately/toggle",
-          "./packages/@react-stately/utils",
-          "./packages/@react-types/a",
-          "./packages/@react-types/b",
-          "./packages/@react-types/checkbox",
-          "./packages/@react-types/color",
-          "./packages/@react-types/dialog",
-          "./packages/@react-types/divider",
-          "./packages/@react-types/illustratedmessage",
-          "./packages/@react-types/image",
-          "./packages/@react-types/l",
-          "./packages/@react-types/meter",
-          "./packages/@react-types/numberfield",
-          "./packages/@react-types/progress",
-          "./packages/@react-types/searchfield",
-          "./packages/@react-types/shared",
-          "./packages/@react-types/statuslight",
-          "./packages/@react-types/tabs",
-          "./packages/@react-types/text",
-          "./packages/@react-types/tooltip",
-          "./packages/@react-types/view",
-          "./packages/@react-types/well",
-          "./packages/@spectrum-icons",
-          "./packages/react-aria-components"
-        ]
       }
     ],
     "paths": {
diff --git a/yarn.lock b/yarn.lock
index f89d7de6e09..9e0dfaa5ca0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6170,7 +6170,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-aria/i18n@npm:^3.1.0, @react-aria/i18n@npm:^3.12.3, @react-aria/i18n@npm:^3.6.3, @react-aria/i18n@workspace:packages/@react-aria/i18n":
+"@react-aria/i18n@npm:^3.12.3, @react-aria/i18n@npm:^3.6.3, @react-aria/i18n@workspace:packages/@react-aria/i18n":
   version: 0.0.0-use.local
   resolution: "@react-aria/i18n@workspace:packages/@react-aria/i18n"
   dependencies:
@@ -6354,18 +6354,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-aria/pagination@npm:3.0.0-alpha.1, @react-aria/pagination@workspace:packages/@react-aria/pagination":
-  version: 0.0.0-use.local
-  resolution: "@react-aria/pagination@workspace:packages/@react-aria/pagination"
-  dependencies:
-    "@react-aria/i18n": "npm:^3.1.0"
-    "@react-stately/pagination": "npm:3.0.0-alpha.1"
-    "@swc/helpers": "npm:^0.5.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  languageName: unknown
-  linkType: soft
-
 "@react-aria/parcel-resolver-optimize-locales@workspace:packages/dev/parcel-resolver-optimize-locales":
   version: 0.0.0-use.local
   resolution: "@react-aria/parcel-resolver-optimize-locales@workspace:packages/dev/parcel-resolver-optimize-locales"
@@ -7691,26 +7679,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-spectrum/pagination@workspace:packages/@react-spectrum/pagination":
-  version: 0.0.0-use.local
-  resolution: "@react-spectrum/pagination@workspace:packages/@react-spectrum/pagination"
-  dependencies:
-    "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1"
-    "@react-aria/i18n": "npm:^3.1.0"
-    "@react-aria/pagination": "npm:3.0.0-alpha.1"
-    "@react-spectrum/button": "npm:^3.1.0"
-    "@react-spectrum/textfield": "npm:^3.1.0"
-    "@react-spectrum/utils": "npm:^3.1.0"
-    "@react-stately/pagination": "npm:3.0.0-alpha.1"
-    "@react-types/pagination": "npm:3.0.0-alpha.1"
-    "@spectrum-icons/ui": "npm:^3.1.0"
-    "@swc/helpers": "npm:^0.5.0"
-  peerDependencies:
-    "@react-spectrum/provider": ^3.0.0
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  languageName: unknown
-  linkType: soft
-
 "@react-spectrum/parcel-transformer-s2-icon@npm:^0.1.2, @react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon":
   version: 0.0.0-use.local
   resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon"
@@ -8151,7 +8119,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-spectrum/textfield@npm:^3.1.0, @react-spectrum/textfield@npm:^3.12.6, @react-spectrum/textfield@workspace:packages/@react-spectrum/textfield":
+"@react-spectrum/textfield@npm:^3.12.6, @react-spectrum/textfield@workspace:packages/@react-spectrum/textfield":
   version: 0.0.0-use.local
   resolution: "@react-spectrum/textfield@workspace:packages/@react-spectrum/textfield"
   dependencies:
@@ -8304,7 +8272,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-spectrum/utils@npm:^3.1.0, @react-spectrum/utils@npm:^3.11.11, @react-spectrum/utils@npm:^3.8.1, @react-spectrum/utils@workspace:packages/@react-spectrum/utils":
+"@react-spectrum/utils@npm:^3.11.11, @react-spectrum/utils@npm:^3.8.1, @react-spectrum/utils@workspace:packages/@react-spectrum/utils":
   version: 0.0.0-use.local
   resolution: "@react-spectrum/utils@workspace:packages/@react-spectrum/utils"
   dependencies:
@@ -8580,18 +8548,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-stately/pagination@npm:3.0.0-alpha.1, @react-stately/pagination@workspace:packages/@react-stately/pagination":
-  version: 0.0.0-use.local
-  resolution: "@react-stately/pagination@workspace:packages/@react-stately/pagination"
-  dependencies:
-    "@react-stately/utils": "npm:^3.1.0"
-    "@react-types/pagination": "npm:3.0.0-alpha.1"
-    "@swc/helpers": "npm:^0.5.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  languageName: unknown
-  linkType: soft
-
 "@react-stately/radio@npm:^3.10.8, @react-stately/radio@workspace:packages/@react-stately/radio":
   version: 0.0.0-use.local
   resolution: "@react-stately/radio@workspace:packages/@react-stately/radio"
@@ -8754,7 +8710,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-stately/utils@npm:^3.1.0, @react-stately/utils@npm:^3.10.4, @react-stately/utils@workspace:packages/@react-stately/utils":
+"@react-stately/utils@npm:^3.10.4, @react-stately/utils@workspace:packages/@react-stately/utils":
   version: 0.0.0-use.local
   resolution: "@react-stately/utils@workspace:packages/@react-stately/utils"
   dependencies:
@@ -9102,16 +9058,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-types/pagination@npm:3.0.0-alpha.1, @react-types/pagination@workspace:packages/@react-types/pagination":
-  version: 0.0.0-use.local
-  resolution: "@react-types/pagination@workspace:packages/@react-types/pagination"
-  dependencies:
-    "@react-types/shared": "npm:^3.1.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  languageName: unknown
-  linkType: soft
-
 "@react-types/progress@npm:^3.5.7, @react-types/progress@workspace:packages/@react-types/progress":
   version: 0.0.0-use.local
   resolution: "@react-types/progress@workspace:packages/@react-types/progress"
@@ -17847,23 +17793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "execa@npm:4.0.3"
-  dependencies:
-    cross-spawn: "npm:^7.0.0"
-    get-stream: "npm:^5.0.0"
-    human-signals: "npm:^1.1.1"
-    is-stream: "npm:^2.0.0"
-    merge-stream: "npm:^2.0.0"
-    npm-run-path: "npm:^4.0.0"
-    onetime: "npm:^5.1.0"
-    signal-exit: "npm:^3.0.2"
-    strip-final-newline: "npm:^2.0.0"
-  checksum: 10c0/53741fc72a7cc8ae286dac4ec6fa12353e3128548bcf3def39670de3a598bf5c3ce7440a7c36478462bda7d95345d03ef6ce5cbe4b36eda7d0a2a573bda9d8cc
-  languageName: node
-  linkType: hard
-
 "execa@npm:^5.0.0, execa@npm:^5.1.1":
   version: 5.1.1
   resolution: "execa@npm:5.1.1"
@@ -19247,15 +19176,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stream@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "get-stream@npm:5.1.0"
-  dependencies:
-    pump: "npm:^3.0.0"
-  checksum: 10c0/e6cd43afd63f598b2074b29e7b91ef8004d07fbb68cf13aa0ef93ab3069e4d9eb69c1749efc230a374459749f3771fcedd7c7750d27e6631da37f4e8279cd3de
-  languageName: node
-  linkType: hard
-
 "get-stream@npm:^6.0.0":
   version: 6.0.0
   resolution: "get-stream@npm:6.0.0"
@@ -20677,13 +20597,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"human-signals@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "human-signals@npm:1.1.1"
-  checksum: 10c0/18810ed239a7a5e23fb6c32d0fd4be75d7cd337a07ad59b8dbf0794cb0761e6e628349ee04c409e605fe55344716eab5d0a47a62ba2a2d0d367c89a2b4247b1e
-  languageName: node
-  linkType: hard
-
 "human-signals@npm:^2.1.0":
   version: 2.1.0
   resolution: "human-signals@npm:2.1.0"
@@ -26530,7 +26443,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-run-path@npm:^4.0.0, npm-run-path@npm:^4.0.1":
+"npm-run-path@npm:^4.0.1":
   version: 4.0.1
   resolution: "npm-run-path@npm:4.0.1"
   dependencies:
@@ -29616,7 +29529,6 @@ __metadata:
     tempy: "npm:^0.5.0"
     typescript: "npm:^5.5.0"
     typescript-eslint: "npm:^8.9.0"
-    typescript-strict-plugin: "npm:^2.0.0"
     verdaccio: "npm:^5.13.0"
     walk-object: "npm:^4.0.0"
     wsrun: "npm:^5.0.0"
@@ -33571,21 +33483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript-strict-plugin@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "typescript-strict-plugin@npm:2.0.0"
-  dependencies:
-    chalk: "npm:^3.0.0"
-    execa: "npm:^4.0.0"
-    ora: "npm:^5.4.1"
-    yargs: "npm:^16.2.0"
-  bin:
-    tsc-strict: dist/cli/tsc-strict/index.js
-    update-strict-comments: dist/cli/update-strict-comments/index.js
-  checksum: 10c0/ab5724c698169a6a7b23e15cd34e8cdfeb4690bebbdd7544a004e2982bfc599138b4831ce3fbbc1ce0fc86633e76ee43d070468f8b6d7b634729ee26adc1c514
-  languageName: node
-  linkType: hard
-
 "typescript@npm:^5.5.0":
   version: 5.5.2
   resolution: "typescript@npm:5.5.2"