diff --git a/packages/@react-aria/dnd/src/index.ts b/packages/@react-aria/dnd/src/index.ts
index c72126cd021..76e0f8a6735 100644
--- a/packages/@react-aria/dnd/src/index.ts
+++ b/packages/@react-aria/dnd/src/index.ts
@@ -65,3 +65,4 @@ export {useClipboard} from './useClipboard';
 export {DragPreview} from './DragPreview';
 export {ListDropTargetDelegate} from './ListDropTargetDelegate';
 export {isVirtualDragging} from './DragManager';
+export {isDirectoryDropItem, isFileDropItem, isTextDropItem} from './utils';
diff --git a/packages/@react-aria/dnd/src/utils.ts b/packages/@react-aria/dnd/src/utils.ts
index 866602471cc..c46e495dc8a 100644
--- a/packages/@react-aria/dnd/src/utils.ts
+++ b/packages/@react-aria/dnd/src/utils.ts
@@ -11,7 +11,7 @@
  */
 
 import {CUSTOM_DRAG_TYPE, DROP_OPERATION, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
-import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes} from '@react-types/shared';
+import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes, TextDropItem} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getInteractionModality, useInteractionModality} from '@react-aria/interactions';
 import {Key, RefObject} from 'react';
@@ -314,6 +314,21 @@ function getEntryFile(entry: FileSystemFileEntry): Promise<File> {
   return new Promise((resolve, reject) => entry.file(resolve, reject));
 }
 
+/** Returns whether a drop item contains text data. */
+export function isTextDropItem(dropItem: DropItem): dropItem is TextDropItem {
+  return dropItem.kind === 'text';
+}
+
+/** Returns whether a drop item is a file. */
+export function isFileDropItem(dropItem: DropItem): dropItem is FileDropItem {
+  return dropItem.kind === 'file';
+}
+
+/** Returns whether a drop item is a directory. */
+export function isDirectoryDropItem(dropItem: DropItem): dropItem is DirectoryDropItem {
+  return dropItem.kind === 'directory';
+}
+
 // Global DnD collection state tracker.
 export interface DnDState {
   /** A ref for the  of the drag items in the current drag session if any. */
diff --git a/packages/@react-aria/listbox/src/useOption.ts b/packages/@react-aria/listbox/src/useOption.ts
index 0f2e9c2b919..8c5a45059df 100644
--- a/packages/@react-aria/listbox/src/useOption.ts
+++ b/packages/@react-aria/listbox/src/useOption.ts
@@ -119,7 +119,7 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
   }
 
   if (isVirtualized) {
-    let index = Number(state.collection.getItem(key).index);
+    let index = Number(state.collection.getItem(key)?.index);
     optionProps['aria-posinset'] = Number.isNaN(index) ? undefined : index + 1;
     optionProps['aria-setsize'] = getItemCount(state.collection);
   }
diff --git a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
index 7a14cc30a16..8f708c83e6c 100644
--- a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
+++ b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
@@ -36,6 +36,8 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
       key = this.collection.getKeyAfter(key);
     }
+
+    return null;
   }
 
   getKeyAbove(key: Key) {
@@ -48,6 +50,8 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
       key = this.collection.getKeyBefore(key);
     }
+
+    return null;
   }
 
   getFirstKey() {
@@ -60,6 +64,8 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
       key = this.collection.getKeyAfter(key);
     }
+
+    return null;
   }
 
   getLastKey() {
@@ -72,6 +78,8 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
       key = this.collection.getKeyBefore(key);
     }
+
+    return null;
   }
 
   private getItem(key: Key): HTMLElement {
@@ -89,7 +97,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
     while (item && item.offsetTop > pageY) {
       key = this.getKeyAbove(key);
-      item = this.getItem(key);
+      item = key == null ? null : this.getItem(key);
     }
 
     return key;
@@ -106,7 +114,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
     while (item && item.offsetTop < pageY) {
       key = this.getKeyBelow(key);
-      item = this.getItem(key);
+      item = key == null ? null : this.getItem(key);
     }
 
     return key;
diff --git a/packages/@react-aria/tabs/src/index.ts b/packages/@react-aria/tabs/src/index.ts
index 6a75ea01d1a..e36be83acab 100644
--- a/packages/@react-aria/tabs/src/index.ts
+++ b/packages/@react-aria/tabs/src/index.ts
@@ -16,4 +16,4 @@ export type {AriaTabListProps, AriaTabPanelProps, AriaTabProps} from '@react-typ
 export type {Orientation} from '@react-types/shared';
 export type {TabAria} from './useTab';
 export type {TabPanelAria} from './useTabPanel';
-export type {TabListAria} from './useTabList';
+export type {AriaTabListOptions, TabListAria} from './useTabList';
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
index b241126985e..e69e0fd51a6 100644
--- a/packages/@react-aria/tabs/src/useTabList.ts
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -20,17 +20,18 @@ import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
 import {useLocale} from '@react-aria/i18n';
 import {useSelectableCollection} from '@react-aria/selection';
 
+export interface AriaTabListOptions<T> extends Omit<AriaTabListProps<T>, 'children'> {}
+
 export interface TabListAria {
   /** Props for the tablist container. */
   tabListProps: DOMAttributes
 }
 
-
 /**
  * Provides the behavior and accessibility implementation for a tab list.
  * Tabs organize content into multiple sections and allow users to navigate between them.
  */
-export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref: RefObject<HTMLElement>): TabListAria {
+export function useTabList<T>(props: AriaTabListOptions<T>, state: TabListState<T>, ref: RefObject<HTMLElement>): TabListAria {
   let {
     orientation = 'horizontal',
     keyboardActivation = 'automatic'
diff --git a/packages/@react-aria/utils/src/mergeProps.ts b/packages/@react-aria/utils/src/mergeProps.ts
index 9fdb5a1c017..5d7444e20f5 100644
--- a/packages/@react-aria/utils/src/mergeProps.ts
+++ b/packages/@react-aria/utils/src/mergeProps.ts
@@ -18,8 +18,11 @@ interface Props {
   [key: string]: any
 }
 
+type PropsArg = Props | null | undefined;
+
 // taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
-type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? V : never;
+type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? NullToObject<V> : never;
+type NullToObject<T> = T extends (null | undefined) ? {} : T;
 // eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
 
@@ -30,7 +33,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */
-export function mergeProps<T extends Props[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
+export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
   // Start with a base clone of the first argument. This is a lot faster than starting
   // with an empty object and adding properties as we go.
   let result: Props = {...args[0]};
diff --git a/packages/@react-stately/calendar/src/useCalendarState.ts b/packages/@react-stately/calendar/src/useCalendarState.ts
index e9024962f02..fe6aab36958 100644
--- a/packages/@react-stately/calendar/src/useCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useCalendarState.ts
@@ -32,7 +32,7 @@ import {CalendarState} from './types';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useRef, useState} from 'react';
 
-export interface CalendarStateOptions extends CalendarProps<DateValue> {
+export interface CalendarStateOptions<T extends DateValue = DateValue> extends CalendarProps<T> {
   /** The locale to display and edit the value according to. */
   locale: string,
   /**
@@ -55,7 +55,7 @@ export interface CalendarStateOptions extends CalendarProps<DateValue> {
  * Provides state management for a calendar component.
  * A calendar displays one or more date grids and allows users to select a single date.
  */
-export function useCalendarState(props: CalendarStateOptions): CalendarState {
+export function useCalendarState<T extends DateValue = DateValue>(props: CalendarStateOptions<T>): CalendarState {
   let defaultFormatter = useMemo(() => new DateFormatter(props.locale), [props.locale]);
   let resolvedOptions = useMemo(() => defaultFormatter.resolvedOptions(), [defaultFormatter]);
   let {
diff --git a/packages/@react-stately/calendar/src/useRangeCalendarState.ts b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
index cb21224246e..2bf7e8bb549 100644
--- a/packages/@react-stately/calendar/src/useRangeCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
@@ -20,7 +20,7 @@ import {useCalendarState} from './useCalendarState';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useRef, useState} from 'react';
 
-export interface RangeCalendarStateOptions extends RangeCalendarProps<DateValue> {
+export interface RangeCalendarStateOptions<T extends DateValue = DateValue> extends RangeCalendarProps<T> {
   /** The locale to display and edit the value according to. */
   locale: string,
   /**
@@ -41,7 +41,7 @@ export interface RangeCalendarStateOptions extends RangeCalendarProps<DateValue>
  * Provides state management for a range calendar component.
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
-export function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState {
+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<DateRange>(
     valueProp,
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index 97315086ae4..ad63325ca7c 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -115,7 +115,7 @@ const TYPE_MAPPING = {
   dayperiod: 'dayPeriod'
 };
 
-export interface DateFieldStateOptions extends DatePickerProps<DateValue> {
+export interface DateFieldStateOptions<T extends DateValue = DateValue> extends DatePickerProps<T> {
   /**
    * The maximum unit to display in the date field.
    * @default 'year'
@@ -137,7 +137,7 @@ export interface DateFieldStateOptions extends DatePickerProps<DateValue> {
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export function useDateFieldState(props: DateFieldStateOptions): DateFieldState {
+export function useDateFieldState<T extends DateValue = DateValue>(props: DateFieldStateOptions<T>): DateFieldState {
   let {
     locale,
     createCalendar,
diff --git a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
index 13333a37072..36a6105935f 100644
--- a/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
+++ b/packages/@react-stately/datepicker/src/useDateRangePickerState.ts
@@ -18,7 +18,7 @@ import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
 import {useState} from 'react';
 
-export interface DateRangePickerStateOptions extends DateRangePickerProps<DateValue> {
+export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> {
   /**
    * Determines whether the date picker popover should close automatically when a date is selected.
    * @default true
@@ -71,7 +71,7 @@ export interface DateRangePickerState extends OverlayTriggerState {
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
  */
-export function useDateRangePickerState(props: DateRangePickerStateOptions): DateRangePickerState {
+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});
diff --git a/packages/@react-stately/datepicker/src/useTimeFieldState.ts b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
index 0c73068164f..e547583480c 100644
--- a/packages/@react-stately/datepicker/src/useTimeFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useTimeFieldState.ts
@@ -16,7 +16,7 @@ import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, to
 import {useControlledState} from '@react-stately/utils';
 import {useMemo} from 'react';
 
-export interface TimeFieldStateOptions extends TimePickerProps<TimeValue> {
+export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends TimePickerProps<T> {
   /** The locale to display and edit the value according to. */
   locale: string
 }
@@ -26,7 +26,7 @@ export interface TimeFieldStateOptions extends TimePickerProps<TimeValue> {
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export function useTimeFieldState(props: TimeFieldStateOptions): DateFieldState {
+export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): DateFieldState {
   let {
     placeholderValue = new Time(),
     minValue,
diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts
index 84382eefa94..d07946a1581 100644
--- a/packages/@react-types/calendar/src/index.d.ts
+++ b/packages/@react-types/calendar/src/index.d.ts
@@ -56,8 +56,8 @@ export interface CalendarPropsBase {
 }
 
 export type DateRange = RangeValue<DateValue>;
-export interface CalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<T, MappedDateValue<T>> {}
-export interface RangeCalendarProps<T extends DateValue> extends CalendarPropsBase, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {
+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 5fbe9cffabe..6d7aa8404d8 100644
--- a/packages/@react-types/datepicker/src/index.d.ts
+++ b/packages/@react-types/datepicker/src/index.d.ts
@@ -55,17 +55,17 @@ interface DateFieldBase<T extends DateValue> extends InputBase, Validation, Focu
 }
 
 interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
-export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T, MappedDateValue<T>> {}
+export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T>> {}
 export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T> {}
 
 interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayTriggerProps {}
 export interface AriaDatePickerBaseProps<T extends DateValue> extends DatePickerBase<T>, AriaLabelingProps, DOMProps {}
 
-export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T, MappedDateValue<T>> {}
+export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T>> {}
 export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T> {}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<RangeValue<T>, RangeValue<MappedDateValue<T>>> {
+export interface DateRangePickerProps<T extends DateValue> extends DatePickerBase<T>, 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.
@@ -112,7 +112,7 @@ type MappedTimeValue<T> =
   T extends Time ? Time :
   never;
 
-export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation, FocusableProps, LabelableProps, HelpTextProps, ValueBase<T, MappedTimeValue<T>> {
+export interface TimePickerProps<T extends TimeValue> extends InputBase, Validation, FocusableProps, LabelableProps, HelpTextProps, ValueBase<T | null, MappedTimeValue<T>> {
   /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
   hourCycle?: 12 | 24,
   /**
diff --git a/packages/@react-types/shared/src/collections.d.ts b/packages/@react-types/shared/src/collections.d.ts
index 126386e0eb8..a8769e06d71 100644
--- a/packages/@react-types/shared/src/collections.d.ts
+++ b/packages/@react-types/shared/src/collections.d.ts
@@ -133,10 +133,10 @@ export interface Collection<T> extends Iterable<T> {
   getKeys(): Iterable<Key>,
 
   /** Get an item by its key. */
-  getItem(key: Key): T,
+  getItem(key: Key): T | null,
 
   /** Get an item by the index of its key. */
-  at(idx: number): T,
+  at(idx: number): T | null,
 
   /** Get the key that comes before the given key in the collection. */
   getKeyBefore(key: Key): Key | null,
@@ -160,7 +160,7 @@ export interface Node<T> {
   /** A unique key for the node. */
   key: Key,
   /** The object value the node was created from. */
-  value: T,
+  value: T | null,
   /** The level of depth this node is at in the heirarchy. */
   level: number,
   /** Whether this item has children, even if not loaded yet. */
@@ -181,11 +181,11 @@ export interface Node<T> {
   /** A function that should be called to wrap the rendered node. */
   wrapper?: (element: ReactElement) => ReactElement,
   /** The key of the parent node. */
-  parentKey?: Key,
+  parentKey?: Key | null,
   /** The key of the node before this node. */
-  prevKey?: Key,
+  prevKey?: Key | null,
   /** The key of the node after this node. */
-  nextKey?: Key,
+  nextKey?: Key | null,
   /** Additional properties specific to a particular node type. */
   props?: any,
   /** @private */
diff --git a/packages/react-aria-components/docs/Breadcrumbs.mdx b/packages/react-aria-components/docs/Breadcrumbs.mdx
index 601f6c5ebbf..bb8ebd2ae81 100644
--- a/packages/react-aria-components/docs/Breadcrumbs.mdx
+++ b/packages/react-aria-components/docs/Breadcrumbs.mdx
@@ -247,7 +247,7 @@ function Example() {
     {id: 3, label: 'March 2022 Assets'}
   ]);
 
-  let navigate = (item) => {
+  let navigate = (item: typeof breadcrumbs[0]) => {
     setBreadcrumbs(breadcrumbs.slice(0, breadcrumbs.indexOf(item) + 1));
   };
 
diff --git a/packages/react-aria-components/docs/Button.mdx b/packages/react-aria-components/docs/Button.mdx
index a69f0541e48..1ac8d2e476b 100644
--- a/packages/react-aria-components/docs/Button.mdx
+++ b/packages/react-aria-components/docs/Button.mdx
@@ -191,13 +191,13 @@ Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesD
 
 ```tsx example
 function Example() {
-  let [pointerType, setPointerType] = React.useState(null);
+  let [pointerType, setPointerType] = React.useState('');
 
   return (
     <>
       <Button
         onPressStart={e => setPointerType(e.pointerType)}
-        onPressEnd={e => setPointerType(null)}>
+        onPressEnd={() => setPointerType('')}>
         Press me
       </Button>
       <p>{pointerType ? `You are pressing the button with a ${pointerType}!` : 'Ready to be pressed.'}</p>
diff --git a/packages/react-aria-components/docs/Calendar.mdx b/packages/react-aria-components/docs/Calendar.mdx
index ba96b296379..f4e459f06ea 100644
--- a/packages/react-aria-components/docs/Calendar.mdx
+++ b/packages/react-aria-components/docs/Calendar.mdx
@@ -473,7 +473,7 @@ The below example displays a `Calendar` in the Hindi language, using the Indian
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [date, setDate] = React.useState<DateValue>(null);
+  let [date, setDate] = React.useState<DateValue | null>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyCalendar aria-label="Date" value={date} onChange={setDate} />
@@ -515,7 +515,7 @@ function Example() {
   ];
 
   let {locale} = useLocale();
-  let isDateUnavailable = (date) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
+  let isDateUnavailable = (date: DateValue) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
 
   return <MyCalendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
 }
@@ -580,7 +580,7 @@ function Example() {
       value={date}
       onChange={setDate}
       validationState={isInvalid ? 'invalid' : 'valid'}
-      errorMessage={isInvalid ? 'We are closed on weekends' : null} />
+      errorMessage={isInvalid ? 'We are closed on weekends' : undefined} />
   );
 }
 ```
diff --git a/packages/react-aria-components/docs/CheckboxGroup.mdx b/packages/react-aria-components/docs/CheckboxGroup.mdx
index 0f17f4a9b53..4bfd8b6f9f1 100644
--- a/packages/react-aria-components/docs/CheckboxGroup.mdx
+++ b/packages/react-aria-components/docs/CheckboxGroup.mdx
@@ -436,10 +436,10 @@ prop to `"invalid"` when no options are selected and removes it otherwise.
 
 ```tsx example
 function Example() {
-  let [selected, setSelected] = React.useState([]);
+  let [selected, setSelected] = React.useState<string[]>([]);
 
   return (
-    <MyCheckboxGroup label="Sandwich condiments" value={selected} onChange={setSelected} isRequired validationState={selected.length === 0 ? 'invalid' : null}>
+    <MyCheckboxGroup label="Sandwich condiments" value={selected} onChange={setSelected} isRequired validationState={selected.length === 0 ? 'invalid' : undefined}>
       <MyCheckbox value="lettuce">Lettuce</MyCheckbox>
       <MyCheckbox value="tomato">Tomato</MyCheckbox>
       <MyCheckbox value="onion">Onion</MyCheckbox>
@@ -460,13 +460,13 @@ indicates that the group is required, not any individual option. In addition, `v
 
 ```tsx example
 function Example() {
-  let [selected, setSelected] = React.useState([]);
+  let [selected, setSelected] = React.useState<string[]>([]);
 
   return (
     <MyCheckboxGroup label="Agree to the following" isRequired value={selected} onChange={setSelected}>
-      <MyCheckbox value="terms" isRequired validationState={!selected.includes('terms') ? 'invalid' : null}>Terms and conditions</MyCheckbox>
-      <MyCheckbox value="privacy" isRequired validationState={!selected.includes('privacy') ? 'invalid' : null}>Privacy policy</MyCheckbox>
-      <MyCheckbox value="cookies" isRequired validationState={!selected.includes('cookies') ? 'invalid' : null}>Cookie policy</MyCheckbox>
+      <MyCheckbox value="terms" isRequired validationState={!selected.includes('terms') ? 'invalid' : undefined}>Terms and conditions</MyCheckbox>
+      <MyCheckbox value="privacy" isRequired validationState={!selected.includes('privacy') ? 'invalid' : undefined}>Privacy policy</MyCheckbox>
+      <MyCheckbox value="cookies" isRequired validationState={!selected.includes('cookies') ? 'invalid' : undefined}>Cookie policy</MyCheckbox>
     </MyCheckboxGroup>
   );
 }
@@ -487,8 +487,8 @@ function Example() {
       onChange={setChecked}
       value={checked}
       validationState={isValid ? 'valid' : 'invalid'}
-      description={isValid ? 'Select your pets.' : null}
-      errorMessage={isValid ? null : checked.includes('cats')
+      description={isValid ? 'Select your pets.' : undefined}
+      errorMessage={isValid ? undefined : checked.includes('cats')
         ? 'No cats allowed.'
         : 'Select only dogs and dragons.'}
     >
diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx
index 7b22a780f5d..8d6d233693a 100644
--- a/packages/react-aria-components/docs/ComboBox.mdx
+++ b/packages/react-aria-components/docs/ComboBox.mdx
@@ -778,7 +778,7 @@ function ControlledComboBox() {
   // Store ComboBox input value, selected option, open state, and items
   // in a state tracker
   let [fieldState, setFieldState] = React.useState({
-    selectedKey: '',
+    selectedKey: '' as React.Key,
     inputValue: '',
     items: optionList
   });
@@ -789,7 +789,7 @@ function ControlledComboBox() {
 
   // Specify how each of the ComboBox values should change when an
   // option is selected from the list box
-  let onSelectionChange = (key) => {
+  let onSelectionChange = (key: React.Key) => {
     setFieldState(prevState => {
       let selectedItem = prevState.items.find(option => option.id === key);
       return ({
@@ -802,7 +802,7 @@ function ControlledComboBox() {
 
   // Specify how each of the ComboBox values should change when the input
   // field is altered by the user
-  let onInputChange = (value) => {
+  let onInputChange = (value: string) => {
     setFieldState(prevState => ({
       inputValue: value,
       selectedKey: value === '' ? '' : prevState.selectedKey,
@@ -811,7 +811,7 @@ function ControlledComboBox() {
   };
 
   // Show entire list if user opens the menu manually
-  let onOpenChange = (isOpen, menuTrigger) => {
+  let onOpenChange = (isOpen: boolean, menuTrigger?: string) => {
     if (menuTrigger === 'manual' && isOpen) {
       setFieldState(prevState => ({
         inputValue: prevState.inputValue,
diff --git a/packages/react-aria-components/docs/DateField.mdx b/packages/react-aria-components/docs/DateField.mdx
index a19139b6e96..ee707264944 100644
--- a/packages/react-aria-components/docs/DateField.mdx
+++ b/packages/react-aria-components/docs/DateField.mdx
@@ -471,7 +471,7 @@ The below example displays a `DateField` in the Hindi language, using the Indian
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [date, setDate] = React.useState<DateValue>(null);
+  let [date, setDate] = React.useState<DateValue | null>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDateField label="Date" value={date} onChange={setDate} />
@@ -517,8 +517,8 @@ function Example() {
       value={date}
       onChange={setDate}
       validationState={isInvalid ? 'invalid' : 'valid'}
-      description={isInvalid ? null : 'Select a weekday'}
-      errorMessage={isInvalid ? 'We are closed on weekends' : null} />
+      description={isInvalid ? undefined : 'Select a weekday'}
+      errorMessage={isInvalid ? 'We are closed on weekends' : undefined} />
   );
 }
 ```
diff --git a/packages/react-aria-components/docs/DatePicker.mdx b/packages/react-aria-components/docs/DatePicker.mdx
index 01a42066d81..75c18e1e92e 100644
--- a/packages/react-aria-components/docs/DatePicker.mdx
+++ b/packages/react-aria-components/docs/DatePicker.mdx
@@ -845,7 +845,7 @@ The below example displays a `DatePicker` in the Hindi language, using the India
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [date, setDate] = React.useState<DateValue>(null);
+  let [date, setDate] = React.useState<DateValue | null>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDatePicker label="Date" value={date} onChange={setDate} />
@@ -889,7 +889,7 @@ function Example() {
   ];
 
   let {locale} = useLocale();
-  let isDateUnavailable = (date) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
+  let isDateUnavailable = (date: DateValue) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
 
   return <MyDatePicker label="Appointment date" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
 }
diff --git a/packages/react-aria-components/docs/DateRangePicker.mdx b/packages/react-aria-components/docs/DateRangePicker.mdx
index e4127068fd1..239ec74eea4 100644
--- a/packages/react-aria-components/docs/DateRangePicker.mdx
+++ b/packages/react-aria-components/docs/DateRangePicker.mdx
@@ -903,7 +903,7 @@ import type {DateRange} from 'react-aria-components';
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [range, setRange] = React.useState<DateRange>(null);
+  let [range, setRange] = React.useState<DateRange | null>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDateRangePicker label="Date range" value={range} onChange={setRange} />
@@ -952,9 +952,9 @@ function Example() {
     [now.add({days: 23}), now.add({days: 24})],
   ];
 
-  let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
-  let [value, setValue] = React.useState<DateRange>(null);
-  let isInvalid = value && disabledRanges.some(interval => value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0);
+  let isDateUnavailable = (date: DateValue) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
+  let [value, setValue] = React.useState<DateRange | null>(null);
+  let isInvalid = disabledRanges.some(interval => value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0);
 
   return (
     <MyDateRangePicker
@@ -963,7 +963,7 @@ function Example() {
       isDateUnavailable={isDateUnavailable}
       value={value}
       onChange={setValue}
-      validationState={isInvalid ? 'invalid' : null} />
+      validationState={isInvalid ? 'invalid' : undefined} />
   );
 }
 ```
@@ -1007,8 +1007,8 @@ function Example() {
       value={range}
       onChange={setRange}
       validationState={isInvalid ? 'invalid' : 'valid'}
-      description={isInvalid ? null : 'Select your vacation dates'}
-      errorMessage={isInvalid ? 'Maximum stay duration is 1 week' : null} />
+      description={isInvalid ? undefined : 'Select your vacation dates'}
+      errorMessage={isInvalid ? 'Maximum stay duration is 1 week' : undefined} />
   );
 }
 ```
diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx
index 3216a666724..de9af8abc36 100644
--- a/packages/react-aria-components/docs/GridList.mdx
+++ b/packages/react-aria-components/docs/GridList.mdx
@@ -846,7 +846,7 @@ function DraggableGridList() {
     /*- begin highlight -*/
     getItems(keys) {
       return [...keys].map(key => {
-        let item = items.get(key as string);
+        let item = items.get(key as string)!;
         return {
           'text/plain': item.name,
           'text/html': `<${item.style}>${item.name}</${item.style}>`,
@@ -876,8 +876,13 @@ function DraggableGridList() {
 Dropping on the GridList as a whole can be enabled using the `onRootDrop` event. When a valid drag hovers over the GridList, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector.
 
 ```tsx example
+interface Item {
+  id: number,
+  name: string
+}
+
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<Item[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
@@ -1091,17 +1096,25 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.T
 The example below uses the `acceptedDragTypes` prop to accept items that include a custom app-specific type, which is retrieved using the item's `getText` method. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead. When `acceptedDragTypes` is specified, the dropped items are filtered to include only items that include the accepted types.
 
 ```tsx example export=true
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
+
+interface TextItem {
+  id: string,
+  name: string,
+  style: string
+}
 
 function DroppableGridList() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<TextItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: ['custom-app-type'],
     async onRootDrop(e) {
       let items = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       setItems(items);
     }
@@ -1110,7 +1123,7 @@ function DroppableGridList() {
 
   return (
     <MyGridList aria-label="Droppable list" items={items} dragAndDropHooks={dragAndDropHooks} renderEmptyState={() => "Drop items here"}>
-      {({name, style: Tag = 'span'}) => <MyItem><Tag>{name}</Tag></MyItem>}
+      {item => <MyItem>{React.createElement(item.style, null, item.name)}</MyItem>}
     </MyGridList>
   );
 }
@@ -1129,17 +1142,23 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.F
 This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). When the list is empty, you can drop on the whole collection, and otherwise items can be inserted.
 
 ```tsx example
-import type {FileDropItem} from 'react-aria-components';
+import {isFileDropItem} from 'react-aria-components';
+
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string
+}
 
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<ImageItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: ['image/jpeg', 'image/png'],
     async onRootDrop(e) {
       let items = await Promise.all(
-        e.items.map(async (item: FileDropItem) => ({
+        e.items.filter(isFileDropItem).map(async item => ({
           id: Math.random(),
           url: URL.createObjectURL(await item.getFile()),
           name: item.name
@@ -1200,23 +1219,28 @@ The `getEntries` method returns an [async iterable](https://developer.mozilla.or
 This example accepts directory drops over the whole collection, and renders the contents as items in the list. `DIRECTORY_DRAG_TYPE` is imported from `react-aria-components` and included in the `acceptedDragTypes` prop to limit the accepted items to only directories.
 
 ```tsx example
-import type {DirectoryDropItem} from 'react-aria-components';
 import File from '@spectrum-icons/workflow/FileTxt';
 import Folder from '@spectrum-icons/workflow/Folder';
 ///- begin highlight -///
-import {DIRECTORY_DRAG_TYPE} from 'react-aria-components';
+import {DIRECTORY_DRAG_TYPE, isDirectoryDropItem} from 'react-aria-components';
 ///- end highlight -///
 
+interface DirItem {
+  name: string,
+  kind: string
+}
+
 function Example() {
-  let [files, setFiles] = React.useState([]);
+  let [files, setFiles] = React.useState<DirItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: [DIRECTORY_DRAG_TYPE],
     async onRootDrop(e) {
       // Read entries in directory and update state with relevant info.
+      let dir = e.items.find(isDirectoryDropItem)!;
       let files = [];
-      for await (let entry of (e.items[0] as DirectoryDropItem).getEntries()) {
+      for await (let entry of dir.getEntries()) {
         files.push({
           name: entry.name,
           kind: entry.kind
@@ -1399,8 +1423,15 @@ The `getDropOperation` function passed to `useDragAndDrop` can be used to provid
 In the below example, the drop target only supports dropping PNG images. If a PNG is dragged over the target, it will be highlighted and the operating system displays a copy cursor. If another type is dragged over the target, then there is no visual feedback, indicating that a drop is not accepted there. If the user holds a modifier key such as <Keyboard>Control</Keyboard> while dragging over the drop target in order to change the drop operation, then the drop target does not accept the drop.
 
 ```tsx example
+///- begin collapse -///
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string
+}
+///- end collapse -///
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<ImageItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
@@ -1410,7 +1441,7 @@ function Example() {
     async onRootDrop(e) {
       ///- begin collapse -///
       let items = await Promise.all(
-        e.items.map(async (item: FileDropItem) => ({
+        e.items.filter(isFileDropItem).map(async item => ({
           id: Math.random(),
           url: URL.createObjectURL(await item.getFile()),
           name: item.name
@@ -1468,7 +1499,7 @@ let onItemDrop = async (e) => {
 This example puts together many of the concepts described above, allowing users to drag items between lists bidirectionally. It also supports reordering items within the same list. When a list is empty, it accepts drops on the whole collection. `getDropOperation` ensures that items are always moved rather than copied, which avoids duplicate items.
 
 ```tsx example
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
 
 interface FileItem {
   id: string,
@@ -1517,7 +1548,9 @@ function DndGridList(props: DndGridListProps) {
     // Handle drops between items from other lists.
     async onInsert(e) {
       let processedItems = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       if (e.target.dropPosition === 'before') {
         list.insertBefore(e.target.key, ...processedItems);
@@ -1529,7 +1562,9 @@ function DndGridList(props: DndGridListProps) {
     // Handle drops on the collection when empty.
     async onRootDrop(e) {
       let processedItems = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       list.append(...processedItems);
     },
diff --git a/packages/react-aria-components/docs/Link.mdx b/packages/react-aria-components/docs/Link.mdx
index 2a74077f5ea..564de953d43 100644
--- a/packages/react-aria-components/docs/Link.mdx
+++ b/packages/react-aria-components/docs/Link.mdx
@@ -208,13 +208,13 @@ Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesD
 
 ```tsx example
 function Example() {
-  let [pointerType, setPointerType] = React.useState(null);
+  let [pointerType, setPointerType] = React.useState('');
 
   return (
     <>
       <Link
         onPressStart={e => setPointerType(e.pointerType)}
-        onPressEnd={e => setPointerType(null)}>
+        onPressEnd={() => setPointerType('')}>
         Press me
       </Link>
       <p>{pointerType ? `You are pressing the link with a ${pointerType}!` : 'Ready to be pressed.'}</p>
diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx
index 04ba5ba3bd1..bb1ee14e239 100644
--- a/packages/react-aria-components/docs/ListBox.mdx
+++ b/packages/react-aria-components/docs/ListBox.mdx
@@ -812,7 +812,7 @@ function DraggableListBox() {
     /*- begin highlight -*/
     getItems(keys) {
       return [...keys].map(key => {
-        let item = items.get(key as string);
+        let item = items.get(key as string)!;
         return {
           'text/plain': item.name,
           'text/html': `<${item.style}>${item.name}</${item.style}>`,
@@ -842,8 +842,13 @@ function DraggableListBox() {
 Dropping on the ListBox as a whole can be enabled using the `onRootDrop` event. When a valid drag hovers over the ListBox, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector.
 
 ```tsx example
+interface Item {
+  id: number,
+  name: string
+}
+
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<Item[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
@@ -926,8 +931,6 @@ function Example() {
 Dropping between items can be enabled using the `onInsert` event. ListBox renders a <TypeLink links={docs.links} type={docs.exports.DropIndicator} /> between items to indicate the insertion position, which can be styled using the `.react-aria-DropIndicator` selector. When it is active, it receives the `[data-drop-target]` state.
 
 ```tsx example
-import type {TextDropItem} from 'react-aria-components';
-
 function Example() {
   let list = useListData({
     initialItems: [
@@ -1059,17 +1062,25 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.T
 The example below uses the `acceptedDragTypes` prop to accept items that include a custom app-specific type, which is retrieved using the item's `getText` method. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead. When `acceptedDragTypes` is specified, the dropped items are filtered to include only items that include the accepted types.
 
 ```tsx example export=true
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
+
+interface TextItem {
+  id: string,
+  name: string,
+  style: string
+}
 
 function DroppableListBox() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<TextItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: ['custom-app-type'],
     async onRootDrop(e) {
       let items = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       setItems(items);
     }
@@ -1078,7 +1089,7 @@ function DroppableListBox() {
 
   return (
     <ListBox aria-label="Droppable list" items={items} dragAndDropHooks={dragAndDropHooks} renderEmptyState={() => "Drop items here"}>
-      {({name, style: Tag = 'span'}) => <Item><Tag>{name}</Tag></Item>}
+      {item => <Item>{React.createElement(item.style, null, item.name)}</Item>}
     </ListBox>
   );
 }
@@ -1097,17 +1108,23 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.F
 This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). When the list is empty, you can drop on the whole collection, and otherwise items can be inserted.
 
 ```tsx example
-import type {FileDropItem} from 'react-aria-components';
+import {isFileDropItem} from 'react-aria-components';
+
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string
+}
 
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<ImageItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: ['image/jpeg', 'image/png'],
     async onRootDrop(e) {
       let items = await Promise.all(
-        e.items.map(async (item: FileDropItem) => ({
+        e.items.filter(isFileDropItem).map(async item => ({
           id: Math.random(),
           url: URL.createObjectURL(await item.getFile()),
           name: item.name
@@ -1168,23 +1185,28 @@ The `getEntries` method returns an [async iterable](https://developer.mozilla.or
 This example accepts directory drops over the whole collection, and renders the contents as items in the list. `DIRECTORY_DRAG_TYPE` is imported from `react-aria-components` and included in the `acceptedDragTypes` prop to limit the accepted items to only directories.
 
 ```tsx example
-import type {DirectoryDropItem} from 'react-aria-components';
 import File from '@spectrum-icons/workflow/FileTxt';
 import Folder from '@spectrum-icons/workflow/Folder';
 ///- begin highlight -///
-import {DIRECTORY_DRAG_TYPE} from 'react-aria-components';
+import {DIRECTORY_DRAG_TYPE, isDirectoryDropItem} from 'react-aria-components';
 ///- end highlight -///
 
+interface DirItem {
+  name: string,
+  kind: string
+}
+
 function Example() {
-  let [files, setFiles] = React.useState([]);
+  let [files, setFiles] = React.useState<DirItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: [DIRECTORY_DRAG_TYPE],
     async onRootDrop(e) {
       // Read entries in directory and update state with relevant info.
+      let dir = e.items.find(isDirectoryDropItem)!;
       let files = [];
-      for await (let entry of (e.items[0] as DirectoryDropItem).getEntries()) {
+      for await (let entry of dir.getEntries()) {
         files.push({
           name: entry.name,
           kind: entry.kind
@@ -1367,8 +1389,15 @@ The `getDropOperation` function passed to `useDragAndDrop` can be used to provid
 In the below example, the drop target only supports dropping PNG images. If a PNG is dragged over the target, it will be highlighted and the operating system displays a copy cursor. If another type is dragged over the target, then there is no visual feedback, indicating that a drop is not accepted there. If the user holds a modifier key such as <Keyboard>Control</Keyboard> while dragging over the drop target in order to change the drop operation, then the drop target does not accept the drop.
 
 ```tsx example
+///- begin collapse -///
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string
+}
+///- end collapse -///
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<ImageItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
@@ -1378,7 +1407,7 @@ function Example() {
     async onRootDrop(e) {
       ///- begin collapse -///
       let items = await Promise.all(
-        e.items.map(async (item: FileDropItem) => ({
+        e.items.filter(isFileDropItem).map(async item => ({
           id: Math.random(),
           url: URL.createObjectURL(await item.getFile()),
           name: item.name
@@ -1433,10 +1462,10 @@ let onItemDrop = async (e) => {
 
 ### Drag between lists
 
-This example puts together many of the concepts described above, allowing users to drag items between lists bidirectionally. Items are always moved to avoid duplicate items being added to the same list.
+This example puts together many of the concepts described above, allowing users to drag items between lists bidirectionally. It also supports reordering items within the same list. When a list is empty, it accepts drops on the whole collection. `getDropOperation` ensures that items are always moved rather than copied, which avoids duplicate items.
 
 ```tsx example
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
 
 interface FileItem {
   id: string,
@@ -1485,7 +1514,9 @@ function DndListBox(props: DndListBoxProps) {
     // Handle drops between items from other lists.
     async onInsert(e) {
       let processedItems = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       if (e.target.dropPosition === 'before') {
         list.insertBefore(e.target.key, ...processedItems);
@@ -1497,7 +1528,9 @@ function DndListBox(props: DndListBoxProps) {
     // Handle drops on the collection when empty.
     async onRootDrop(e) {
       let processedItems = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       list.append(...processedItems);
     },
diff --git a/packages/react-aria-components/docs/NumberField.mdx b/packages/react-aria-components/docs/NumberField.mdx
index cd7f7ccc880..7b05840fbfa 100644
--- a/packages/react-aria-components/docs/NumberField.mdx
+++ b/packages/react-aria-components/docs/NumberField.mdx
@@ -528,8 +528,8 @@ function Example() {
       value={value}
       onChange={setValue}
       label="Positive numbers only"
-      description={isValid ? 'Enter a positive number.' : null}
-      errorMessage={isValid ? null : value === 0 ? 'Is zero positive?' : 'Positive numbers are bigger than 0.'} />
+      description={isValid ? 'Enter a positive number.' : undefined}
+      errorMessage={isValid ? undefined : value === 0 ? 'Is zero positive?' : 'Positive numbers are bigger than 0.'} />
   );
 }
 ```
diff --git a/packages/react-aria-components/docs/RadioGroup.mdx b/packages/react-aria-components/docs/RadioGroup.mdx
index 88977517c31..977c3327780 100644
--- a/packages/react-aria-components/docs/RadioGroup.mdx
+++ b/packages/react-aria-components/docs/RadioGroup.mdx
@@ -397,8 +397,8 @@ function Example() {
       aria-label="Favorite pet"
       onChange={setSelected}
       validationState={isValid ? 'valid' : 'invalid'}
-      description={isValid ? 'Please select a pet.' : null}
-      errorMessage={isValid ? null :
+      description={isValid ? 'Please select a pet.' : undefined}
+      errorMessage={isValid ? undefined :
         selected === 'cats'
           ? 'No cats allowed.'
           : 'Please select dogs.'
diff --git a/packages/react-aria-components/docs/RangeCalendar.mdx b/packages/react-aria-components/docs/RangeCalendar.mdx
index 4f86965c02f..ae96bcf4d38 100644
--- a/packages/react-aria-components/docs/RangeCalendar.mdx
+++ b/packages/react-aria-components/docs/RangeCalendar.mdx
@@ -505,10 +505,11 @@ Selected dates passed to `onChange` always use the same calendar system as the `
 The below example displays a `RangeCalendar` in the Hindi language, using the Indian calendar. Dates emitted from `onChange` are in the Gregorian calendar.
 
 ```tsx example
+import type {DateRange} from 'react-aria-components';
 import {I18nProvider} from '@react-aria/i18n';
 
 function Example() {
-  let [range, setRange] = React.useState(null);
+  let [range, setRange] = React.useState<DateRange | null>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyRangeCalendar aria-label="Date range" value={range} onChange={setRange} />
@@ -550,7 +551,7 @@ function Example() {
     [now.add({days: 23}), now.add({days: 24})],
   ];
 
-  let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
+  let isDateUnavailable = (date: DateValue) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
 
   return <MyRangeCalendar aria-label="Trip dates" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
 }
@@ -633,7 +634,7 @@ function Example() {
       value={range}
       onChange={setRange}
       validationState={isInvalid ? 'invalid' : 'valid'}
-      errorMessage={isInvalid ? 'Maximum stay duration is 1 week' : null} />
+      errorMessage={isInvalid ? 'Maximum stay duration is 1 week' : undefined} />
   );
 }
 ```
diff --git a/packages/react-aria-components/docs/Select.mdx b/packages/react-aria-components/docs/Select.mdx
index 8ed41a43377..b97ab0b81b6 100644
--- a/packages/react-aria-components/docs/Select.mdx
+++ b/packages/react-aria-components/docs/Select.mdx
@@ -906,8 +906,8 @@ function Example() {
     <MySelect
       validationState={isValid ? 'valid' : 'invalid'}
       label="Favorite animal"
-      description={isValid ? 'Pick your favorite animal, you will be judged.' : null}
-      errorMessage={isValid ? null : animalId === 2
+      description={isValid ? 'Pick your favorite animal, you will be judged.' : undefined}
+      errorMessage={isValid ? undefined : animalId === 2
         ? 'The author of this example is a dog person.'
         : "Oh no it's a snake! Choose anything else."}
       items={options}
diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx
index 539606b851b..46bf3d6ec3c 100644
--- a/packages/react-aria-components/docs/Table.mdx
+++ b/packages/react-aria-components/docs/Table.mdx
@@ -612,7 +612,9 @@ In the example below, both the columns and the rows are provided to the table vi
 only the rows dynamic.
 
 ```tsx example export=true
-function FileTable(props) {
+import type {TableProps} from 'react-aria-components';
+
+function FileTable(props: TableProps) {
   let columns = [
     {name: 'Name', key: 'name', isRowHeader: true},
     {name: 'Type', key: 'type'},
@@ -685,7 +687,7 @@ To programmatically control row selection, use the `selectedKeys` prop paired wi
 be passed into the callback when the row is pressed, allowing you to update state accordingly.
 
 ```tsx example export=true
-import type {TableProps, Selection} from 'react-aria-components';
+import type {Selection} from 'react-aria-components';
 
 interface Pokemon {
   id: number,
@@ -694,7 +696,7 @@ interface Pokemon {
   level: string
 }
 
-interface PokemonTableProps extends TableProps<Pokemon> {
+interface PokemonTableProps extends TableProps {
   items?: Pokemon[],
   renderEmptyState?: () => string
 }
@@ -1225,7 +1227,7 @@ function DraggableTable() {
     /*- begin highlight -*/
     getItems(keys) {
       return [...keys].map(key => {
-        let item = items.find(item => item.id === key);
+        let item = items.find(item => item.id === key)!;
         return {
           'text/plain': `${item.name} – ${item.type}`,
           'text/html': `<strong>${item.name}</strong> – <em>${item.type}</em>`,
@@ -1256,15 +1258,18 @@ function DraggableTable() {
 Dropping on the Table as a whole can be enabled using the `onRootDrop` event. When a valid drag hovers over the Table, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector.
 
 ```tsx example
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
 
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<Pokemon[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     async onRootDrop(e) {
-      let items = await Promise.all(e.items.map(async (item: TextDropItem) => (
+      let items = await Promise.all(
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => (
         JSON.parse(await item.getText('pokemon'))
       )));
       setItems(items);
@@ -1338,7 +1343,7 @@ function Example() {
 Dropping between items can be enabled using the `onInsert` event. Table renders a <TypeLink links={docs.links} type={docs.exports.DropIndicator} /> between items to indicate the insertion position, which can be styled using the `.react-aria-DropIndicator` selector. When it is active, it receives the `[data-drop-target]` state.
 
 ```tsx example
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
 
 function Example() {
   let list = useListData({
@@ -1353,7 +1358,7 @@ function Example() {
   let { dragAndDropHooks } = useDragAndDrop({
     ///- begin highlight -///
     async onInsert(e) {
-      let items = await Promise.all(e.items.map(async (item: TextDropItem) => {
+      let items = await Promise.all(e.items.filter(isTextDropItem).map(async item => {
         let {name, type, level} = JSON.parse(await item.getText('pokemon'));
         return {id: Math.random(), name, type, level};
       }));
@@ -1399,7 +1404,7 @@ function Example() {
     // ...
     ///- begin collapse -///
     async onInsert(e) {
-      let items = await Promise.all(e.items.map(async (item: TextDropItem) => {
+      let items = await Promise.all(e.items.filter(isTextDropItem).map(async item => {
         let {name, type, level} = JSON.parse(await item.getText('pokemon'));
         return {id: Math.random(), name, type, level};
       }));
@@ -1471,17 +1476,19 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.T
 The example below uses the `acceptedDragTypes` prop to accept items that include a custom app-specific type, which is retrieved using the item's `getText` method. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead. When `acceptedDragTypes` is specified, the dropped items are filtered to include only items that include the accepted types.
 
 ```tsx example export=true
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
 
 function DroppableTable() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<Pokemon[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: ['pokemon'],
     async onRootDrop(e) {
       let items = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('pokemon')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('pokemon')))
       );
       setItems(items);
     }
@@ -1510,17 +1517,25 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.F
 This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). When the list is empty, you can drop on the whole collection, and otherwise items can be inserted.
 
 ```tsx example
-import type {FileDropItem} from 'react-aria-components';
+import {isFileDropItem} from 'react-aria-components';
+
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string,
+  type: string,
+  lastModified: number
+}
 
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<ImageItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: ['image/jpeg', 'image/png'],
     async onRootDrop(e) {
       let items = await Promise.all(
-        e.items.map(async (item: FileDropItem) => {
+        e.items.filter(isFileDropItem).map(async item => {
           let file = await item.getFile();
           return {
             id: Math.random(),
@@ -1584,23 +1599,29 @@ The `getEntries` method returns an [async iterable](https://developer.mozilla.or
 This example accepts directory drops over the whole collection, and renders the contents as items in the list. `DIRECTORY_DRAG_TYPE` is imported from `react-aria-components` and included in the `acceptedDragTypes` prop to limit the accepted items to only directories.
 
 ```tsx example
-import type {DirectoryDropItem} from 'react-aria-components';
 import File from '@spectrum-icons/workflow/FileTxt';
 import Folder from '@spectrum-icons/workflow/Folder';
 ///- begin highlight -///
-import {DIRECTORY_DRAG_TYPE} from 'react-aria-components';
+import {DIRECTORY_DRAG_TYPE, isDirectoryDropItem} from 'react-aria-components';
 ///- end highlight -///
 
+interface DirItem {
+  name: string,
+  kind: string,
+  type: string
+}
+
 function Example() {
-  let [files, setFiles] = React.useState([]);
+  let [files, setFiles] = React.useState<DirItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
     acceptedDragTypes: [DIRECTORY_DRAG_TYPE],
     async onRootDrop(e) {
       // Read entries in directory and update state with relevant info.
+      let dir = e.items.find(isDirectoryDropItem)!;
       let files = [];
-      for await (let entry of (e.items[0] as DirectoryDropItem).getEntries()) {
+      for await (let entry of dir.getEntries()) {
         files.push({
           name: entry.name,
           kind: entry.kind,
@@ -1767,8 +1788,17 @@ The `getDropOperation` function passed to `useDragAndDrop` can be used to provid
 In the below example, the drop target only supports dropping PNG images. If a PNG is dragged over the target, it will be highlighted and the operating system displays a copy cursor. If another type is dragged over the target, then there is no visual feedback, indicating that a drop is not accepted there. If the user holds a modifier key such as <Keyboard>Control</Keyboard> while dragging over the drop target in order to change the drop operation, then the drop target does not accept the drop.
 
 ```tsx example
+///- begin collapse -///
+interface ImageItem {
+  id: number,
+  url: string,
+  name: string,
+  type: string,
+  lastModified: number
+}
+///- end collapse -///
 function Example() {
-  let [items, setItems] = React.useState([]);
+  let [items, setItems] = React.useState<ImageItem[]>([]);
 
   let { dragAndDropHooks } = useDragAndDrop({
     /*- begin highlight -*/
@@ -1778,7 +1808,7 @@ function Example() {
     async onRootDrop(e) {
       ///- begin collapse -///
       let items = await Promise.all(
-        e.items.map(async (item: FileDropItem) => {
+        e.items.filter(isFileDropItem).map(async item => {
           let file = await item.getFile();
           return {
             id: Math.random(),
@@ -1851,7 +1881,7 @@ let onItemDrop = async (e) => {
 This example puts together many of the concepts described above, allowing users to drag items between tables bidirectionally. It also supports reordering items within the same table. When a table is empty, it accepts drops on the whole collection. `getDropOperation` ensures that items are always moved rather than copied, which avoids duplicate items.
 
 ```tsx example
-import type {TextDropItem} from 'react-aria-components';
+import {isTextDropItem} from 'react-aria-components';
 
 interface FileItem {
   id: string,
@@ -1900,7 +1930,9 @@ function DndTable(props: DndTableProps) {
     // Handle drops between items from other lists.
     async onInsert(e) {
       let processedItems = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       if (e.target.dropPosition === 'before') {
         list.insertBefore(e.target.key, ...processedItems);
@@ -1912,7 +1944,9 @@ function DndTable(props: DndTableProps) {
     // Handle drops on the collection when empty.
     async onRootDrop(e) {
       let processedItems = await Promise.all(
-        e.items.map(async (item: TextDropItem) => JSON.parse(await item.getText('custom-app-type')))
+        e.items
+          .filter(isTextDropItem)
+          .map(async item => JSON.parse(await item.getText('custom-app-type')))
       );
       list.append(...processedItems);
     },
diff --git a/packages/react-aria-components/docs/TimeField.mdx b/packages/react-aria-components/docs/TimeField.mdx
index 65bf6190c8e..bb7c8c1607e 100644
--- a/packages/react-aria-components/docs/TimeField.mdx
+++ b/packages/react-aria-components/docs/TimeField.mdx
@@ -451,8 +451,8 @@ function Example() {
       value={time}
       onChange={setTime}
       validationState={isInvalid ? 'invalid' : 'valid'}
-      description={isInvalid ? null : 'Select a meeting time'}
-      errorMessage={isInvalid ? 'Meetings start every 15 minutes.' : null} />
+      description={isInvalid ? undefined : 'Select a meeting time'}
+      errorMessage={isInvalid ? 'Meetings start every 15 minutes.' : undefined} />
   );
 }
 ```
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index bb374562126..5fe3209c668 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -15,6 +15,7 @@ import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContex
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './Heading';
 import {LinkContext} from './Link';
+import {Node} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
 export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, Omit<AriaBreadcrumbsProps, 'children'>, StyleProps, SlotProps {
@@ -58,11 +59,17 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: Forwarde
 const _Breadcrumbs = (forwardRef as forwardRefType)(Breadcrumbs);
 export {_Breadcrumbs as Breadcrumbs};
 
-function BreadcrumbItem({node, isCurrent, isDisabled}) {
+interface BreadcrumbItemProps {
+  node: Node<object>,
+  isCurrent: boolean,
+  isDisabled?: boolean
+}
+
+function BreadcrumbItem({node, isCurrent, isDisabled}: BreadcrumbItemProps) {
   // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
-  let headingProps: HTMLAttributes<HTMLHeadingElement> = isCurrent ? {'aria-current': 'page'} : undefined;
+  let headingProps: HTMLAttributes<HTMLHeadingElement> | null = isCurrent ? {'aria-current': 'page'} : null;
   let linkProps = {
-    'aria-current': isCurrent ? 'page' : undefined,
+    'aria-current': isCurrent ? 'page' : null,
     isDisabled: isDisabled || isCurrent
   };
 
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
index 5adce19c31f..cc617ec2a09 100644
--- a/packages/react-aria-components/src/Calendar.tsx
+++ b/packages/react-aria-components/src/Calendar.tsx
@@ -38,8 +38,8 @@ export interface RangeCalendarProps<T extends DateValue> extends Omit<BaseRangeC
 
 export const CalendarContext = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>({});
 export const RangeCalendarContext = createContext<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>({});
-const InternalCalendarContext = createContext<CalendarState | RangeCalendarState>(null);
-const InternalCalendarGridContext = createContext<CalendarDate>(null);
+const InternalCalendarContext = createContext<CalendarState | RangeCalendarState | null>(null);
+const InternalCalendarGridContext = createContext<CalendarDate | null>(null);
 
 function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CalendarContext);
@@ -257,7 +257,7 @@ export interface CalendarGridProps extends StyleProps {
 }
 
 function CalendarGrid(props: CalendarGridProps, ref: ForwardedRef<HTMLTableElement>) {
-  let state = useContext(InternalCalendarContext);
+  let state = useContext(InternalCalendarContext)!;
   let startDate = state.visibleRange.start;
   if (props.offset) {
     startDate = startDate.add(props.offset);
@@ -313,8 +313,8 @@ export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>
 }
 
 function CalendarCell({date, ...otherProps}: CalendarCellProps, ref: ForwardedRef<HTMLDivElement>) {
-  let state = useContext(InternalCalendarContext);
-  let currentMonth = useContext(InternalCalendarGridContext);
+  let state = useContext(InternalCalendarContext)!;
+  let currentMonth = useContext(InternalCalendarGridContext)!;
   let objectRef = useObjectRef(ref);
   let {cellProps, buttonProps, ...states} = useCalendarCell(
     {date},
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index ae2a51ab591..e4999320a9c 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -87,7 +87,7 @@ export interface CheckboxRenderProps {
    * Whether the checkbox is valid or invalid.
    * @selector [data-validation-state="valid | invalid"]
    */
-  validationState: ValidationState,
+  validationState?: ValidationState,
   /**
    * Whether the checkbox is required.
    * @selector [data-required]
@@ -96,7 +96,7 @@ export interface CheckboxRenderProps {
 }
 
 export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
-const InternalCheckboxGroupContext = createContext<CheckboxGroupState>(null);
+const InternalCheckboxGroupContext = createContext<CheckboxGroupState | null>(null);
 
 function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index d3609f09e3f..6d55017da64 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -11,9 +11,10 @@
  */
 import {CollectionBase} from '@react-types/shared';
 import {createPortal} from 'react-dom';
-import {DOMProps, RenderProps, useContextProps} from './utils';
+import {DOMProps, RenderProps} from './utils';
 import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, ItemProps as SharedItemProps, SectionProps as SharedSectionProps} from 'react-stately';
-import React, {cloneElement, createContext, Key, ReactElement, ReactNode, ReactPortal, useCallback, useMemo} from 'react';
+import {mergeProps} from 'react-aria';
+import React, {cloneElement, createContext, Key, ReactElement, ReactNode, ReactPortal, useCallback, useContext, useMemo} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
@@ -39,12 +40,12 @@ type Mutable<T> = {
 export class NodeValue<T> implements Node<T> {
   readonly type: string;
   readonly key: Key;
-  readonly value: T;
+  readonly value: T | null = null;
   readonly level: number = 0;
   readonly hasChildNodes: boolean = false;
   readonly rendered: ReactNode = null;
-  readonly textValue: string | null = null;
-  readonly 'aria-label'?: string = null;
+  readonly textValue: string = '';
+  readonly 'aria-label'?: string = undefined;
   readonly index: number = 0;
   readonly parentKey: Key | null = null;
   readonly prevKey: Key | null = null;
@@ -86,11 +87,11 @@ export class NodeValue<T> implements Node<T> {
  * and queues an update with the owner document.
  */
 class BaseNode<T> {
-  private _firstChild: ElementNode<T> | null;
-  private _lastChild: ElementNode<T> | null;
-  private _previousSibling: ElementNode<T> | null;
-  private _nextSibling: ElementNode<T> | null;
-  private _parentNode: BaseNode<T> | null;
+  private _firstChild: ElementNode<T> | null = null;
+  private _lastChild: ElementNode<T> | null = null;
+  private _previousSibling: ElementNode<T> | null = null;
+  private _nextSibling: ElementNode<T> | null = null;
+  private _parentNode: BaseNode<T> | null = null;
   ownerDocument: Document<T, any>;
 
   constructor(ownerDocument: Document<T, any>) {
@@ -191,14 +192,14 @@ class BaseNode<T> {
 
     if (this.firstChild === referenceNode) {
       this.firstChild = newNode;
-    } else {
+    } else if (referenceNode.previousSibling) {
       referenceNode.previousSibling.nextSibling = newNode;
     }
 
     referenceNode.previousSibling = newNode;
     newNode.parentNode = referenceNode.parentNode;
 
-    let node = referenceNode;
+    let node: ElementNode<T> | null = referenceNode;
     while (node) {
       node.index++;
       node = node.nextSibling;
@@ -237,7 +238,7 @@ class BaseNode<T> {
     child.parentNode = null;
     child.nextSibling = null;
     child.previousSibling = null;
-    child.index = null;
+    child.index = 0;
 
     this.ownerDocument.removeNode(child);
   }
@@ -260,7 +261,7 @@ const TYPE_MAP = {
 export class ElementNode<T> extends BaseNode<T> {
   nodeType = 8; // COMMENT_NODE (we'd use ELEMENT_NODE but React DevTools will fail to get its dimensions)
   node: NodeValue<T>;
-  private _index: number;
+  private _index: number = 0;
 
   constructor(type: string, ownerDocument: Document<T, any>) {
     super(ownerDocument);
@@ -276,7 +277,7 @@ export class ElementNode<T> extends BaseNode<T> {
     this.ownerDocument.dirtyNodes.add(this);
   }
 
-  get level() {
+  get level(): number {
     if (this.parentNode instanceof ElementNode) {
       return this.parentNode.level + (this.node.type === 'item' ? 1 : 0);
     }
@@ -289,16 +290,16 @@ export class ElementNode<T> extends BaseNode<T> {
     node.index = this.index;
     node.level = this.level;
     node.parentKey = this.parentNode instanceof ElementNode ? this.parentNode.node.key : null;
-    node.prevKey = this.previousSibling?.node.key;
-    node.nextKey = this.nextSibling?.node.key;
+    node.prevKey = this.previousSibling?.node.key ?? null;
+    node.nextKey = this.nextSibling?.node.key ?? null;
     node.hasChildNodes = !!this.firstChild;
-    node.firstChildKey = this.firstChild?.node.key;
-    node.lastChildKey = this.lastChild?.node.key;
+    node.firstChildKey = this.firstChild?.node.key ?? null;
+    node.lastChildKey = this.lastChild?.node.key ?? null;
   }
 
   // Special property that React passes through as an object rather than a string via setAttribute.
   // See below for details.
-  set multiple(value) {
+  set multiple(value: any) {
     let node = this.ownerDocument.getMutableNode(this);
     node.props = value;
     node.rendered = value.rendered;
@@ -322,8 +323,8 @@ export class ElementNode<T> extends BaseNode<T> {
 
   hasAttribute() {}
   setAttribute(key: string, value: string) {
-    if (key in this.node) {
-      let node = this.ownerDocument.getMutableNode(this);
+    let node = this.ownerDocument.getMutableNode(this);
+    if (key in node) {
       node[key] = value;
     }
   }
@@ -351,10 +352,10 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   }
 
   *[Symbol.iterator]() {
-    let node: Node<T> = this.keyMap.get(this.firstKey);
+    let node: Node<T> | undefined = this.firstKey != null ? this.keyMap.get(this.firstKey) : undefined;
     while (node) {
       yield node;
-      node = this.keyMap.get(node.nextKey);
+      node = node.nextKey != null ? this.keyMap.get(node.nextKey) : undefined;
     }
   }
 
@@ -363,10 +364,10 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     return {
       *[Symbol.iterator]() {
         let parent = keyMap.get(key);
-        let node = parent && keyMap.get(parent.firstChildKey);
+        let node = parent?.firstChildKey != null ? keyMap.get(parent.firstChildKey) : null;
         while (node) {
-          yield node;
-          node = keyMap.get(node.nextKey);
+          yield node as Node<T>;
+          node = node.nextKey != null ? keyMap.get(node.nextKey) : undefined;
         }
       }
     };
@@ -381,11 +382,11 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     if (node.prevKey != null) {
       node = this.keyMap.get(node.prevKey);
 
-      while (node.type !== 'item' && node.lastChildKey != null) {
+      while (node && node.type !== 'item' && node.lastChildKey != null) {
         node = this.keyMap.get(node.lastChildKey);
       }
 
-      return node.key;
+      return node?.key ?? null;
     }
 
     return node.parentKey;
@@ -412,6 +413,8 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
         return null;
       }
     }
+
+    return null;
   }
 
   getFirstKey() {
@@ -419,16 +422,16 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
   }
 
   getLastKey() {
-    let node = this.keyMap.get(this.lastKey);
+    let node = this.lastKey != null ? this.keyMap.get(this.lastKey) : null;
     while (node?.lastChildKey != null) {
       node = this.keyMap.get(node.lastChildKey);
     }
 
-    return node?.key;
+    return node?.key ?? null;
   }
 
-  getItem(key: Key): Node<T> {
-    return this.keyMap.get(key);
+  getItem(key: Key): Node<T> | null {
+    return this.keyMap.get(key) ?? null;
   }
 
   at(): Node<T> {
@@ -463,7 +466,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     this.keyMap.delete(key);
   }
 
-  commit(firstKey: Key, lastKey: Key) {
+  commit(firstKey: Key | null, lastKey: Key | null) {
     if (this.frozen) {
       throw new Error('Cannot commit a frozen collection');
     }
@@ -488,6 +491,7 @@ export class Document<T, C extends BaseCollection<T>> extends BaseNode<T> {
   private subscriptions: Set<() => void> = new Set();
 
   constructor(collection: C) {
+    // @ts-ignore
     super(null);
     this.collection = collection;
     this.collectionMutated = true;
@@ -562,7 +566,7 @@ export class Document<T, C extends BaseCollection<T>> extends BaseNode<T> {
         }
       }
 
-      collection.commit(this.firstChild?.node.key, this.lastChild?.node.key);
+      collection.commit(this.firstChild?.node.key ?? null, this.lastChild?.node.key ?? null);
       this.mutatedNodes.clear();
     }
 
@@ -596,7 +600,7 @@ export function useCachedChildren<T extends object>(props: CachedChildrenOptions
   let cache = useMemo(() => new WeakMap(), []);
   return useMemo(() => {
     if (items && typeof children === 'function') {
-      let res = [];
+      let res: ReactElement[] = [];
       for (let item of items) {
         let rendered = cache.get(item);
         if (!rendered) {
@@ -733,11 +737,12 @@ export function Section<T extends object>(props: SectionProps<T>): JSX.Element {
   return <section multiple={{...props, rendered: props.title}}>{children}</section>;
 }
 
-export const CollectionContext = createContext<CachedChildrenOptions<unknown>>(null);
+export const CollectionContext = createContext<CachedChildrenOptions<unknown> | null>(null);
 export const CollectionRendererContext = createContext<CollectionProps<unknown>['children']>(null);
 
 export function Collection<T extends object>(props: CollectionProps<T>): JSX.Element {
-  [props] = useContextProps(props, null, CollectionContext);
+  let ctx = useContext(CollectionContext)!;
+  props = mergeProps(ctx, props);
   let renderer = typeof props.children === 'function' ? props.children : null;
   return (
     <CollectionRendererContext.Provider value={renderer}>
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index 8ddf4121441..a8bf7a81fb2 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -42,14 +42,14 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
     defaultFilter: props.defaultFilter || contains,
     ...props,
     items: propsFromListBox ? (props.items ?? propsFromListBox.items) : [],
-    children: null,
+    children: undefined,
     collection
   });
 
   let buttonRef = useRef<HTMLButtonElement>(null);
   let inputRef = useRef<HTMLInputElement>(null);
-  let listBoxRef = useRef(null);
-  let popoverRef = useRef(null);
+  let listBoxRef = useRef<HTMLDivElement>(null);
+  let popoverRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let {
     buttonProps,
@@ -69,7 +69,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
   state);
 
   // Make menu width match input + button
-  let [menuWidth, setMenuWidth] = useState(null);
+  let [menuWidth, setMenuWidth] = useState<string | null>(null);
   let onResize = useCallback(() => {
     if (inputRef.current) {
       let buttonRect = buttonRef.current?.getBoundingClientRect();
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index b85c0d3a4a3..d300c7795c4 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -39,7 +39,7 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
     createCalendar
   });
 
-  let fieldRef = useRef();
+  let fieldRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useDateField({...props, label}, state, fieldRef);
 
@@ -83,7 +83,7 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
     locale
   });
 
-  let fieldRef = useRef();
+  let fieldRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useTimeField({...props, label}, state, fieldRef);
 
@@ -116,10 +116,10 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-const _TimeField = forwardRef(TimeField);
+const _TimeField = (forwardRef as forwardRefType)(TimeField);
 export {_TimeField as TimeField};
 
-const InternalDateInputContext = createContext<DateFieldState>(null);
+const InternalDateInputContext = createContext<DateFieldState| null>(null);
 
 export interface DateInputProps extends SlotProps, StyleProps {
   children: (segment: IDateSegment) => ReactElement
@@ -176,7 +176,7 @@ export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps> {
 }
 
 function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
-  let state = useContext(InternalDateInputContext);
+  let state = useContext(InternalDateInputContext)!;
   let domRef = useObjectRef(ref);
   let {segmentProps} = useDateSegment(segment, state, domRef);
   let renderProps = useRenderProps({
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 5b768dfcbf7..0c3ea534ba8 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -32,7 +32,7 @@ export const DateRangePickerContext = createContext<ContextValue<DateRangePicker
 function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DatePickerContext);
   let state = useDatePickerState(props);
-  let groupRef = useRef();
+  let groupRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let {
     groupProps,
@@ -52,7 +52,7 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
     createCalendar
   });
 
-  let fieldRef = useRef();
+  let fieldRef = useRef<HTMLDivElement>(null);
   let {fieldProps: dateFieldProps} = useDateField({...fieldProps, label}, fieldState, fieldRef);
 
   let renderProps = useRenderProps({
@@ -94,7 +94,7 @@ export {_DatePicker as DatePicker};
 function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DateRangePickerContext);
   let state = useDateRangePickerState(props);
-  let groupRef = useRef();
+  let groupRef = useRef<HTMLDivElement>(null);
   let [labelRef, label] = useSlot();
   let {
     groupProps,
@@ -115,7 +115,7 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
     createCalendar
   });
 
-  let startFieldRef = useRef();
+  let startFieldRef = useRef<HTMLDivElement>(null);
   let {fieldProps: startDateFieldProps} = useDateField({...startFieldProps, label}, startFieldState, startFieldRef);
 
   let endFieldState = useDateFieldState({
@@ -124,7 +124,7 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
     createCalendar
   });
 
-  let endFieldRef = useRef();
+  let endFieldRef = useRef<HTMLDivElement>(null);
   let {fieldProps: endDateFieldProps} = useDateField({...endFieldProps, label}, endFieldState, endFieldRef);
 
   let renderProps = useRenderProps({
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 579bd1f8a14..350f00a2813 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -40,7 +40,7 @@ export const DialogContext = createContext<ContextValue<DialogProps, HTMLElement
 export function DialogTrigger(props: DialogTriggerProps) {
   let state = useOverlayTriggerState(props);
 
-  let buttonRef = useRef();
+  let buttonRef = useRef<HTMLButtonElement>(null);
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
 
   return (
@@ -64,7 +64,7 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   let children = props.children;
   if (typeof children === 'function') {
     children = children({
-      close: props.onClose
+      close: props.onClose || (() => {})
     });
   }
 
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index c333e232013..d1207db9217 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaGridListProps, DraggableItemResult, DropIndicatorAria, DroppableCollectionResult, ListKeyboardDelegate, mergeProps, useFocusRing, useGridList, useGridListItem, useGridListSelectionCheckbox, useHover, useVisuallyHidden, VisuallyHidden} from 'react-aria';
+import {AriaGridListProps, DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, ListKeyboardDelegate, mergeProps, useFocusRing, useGridList, useGridListItem, useGridListSelectionCheckbox, useHover, useVisuallyHidden, VisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './Checkbox';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
@@ -17,7 +17,7 @@ import {ContextValue, defaultSlot, forwardRefType, Provider, SlotProps, StyleRen
 import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import {filterDOMProps, isIOS, isWebKit, useObjectRef} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface GridListRenderProps {
@@ -49,17 +49,17 @@ interface InternalGridListContextValue {
   dropState?: DroppableCollectionState
 }
 
-export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLUListElement>>(null);
-const InternalGridListContext = createContext<InternalGridListContextValue>(null);
+export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLDivElement>>(null);
+const InternalGridListContext = createContext<InternalGridListContextValue | null>(null);
 
-function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLUListElement>) {
+function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, GridListContext);
   let {dragAndDropHooks} = props;
   let {portal, collection} = useCollection(props);
   let state = useListState({
     ...props,
     collection,
-    children: null
+    children: undefined
   });
 
   let {gridProps} = useGridList(props, state, ref);
@@ -88,28 +88,29 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
     console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
   }
 
-  let dragState: DraggableCollectionState;
-  let dropState: DroppableCollectionState;
-  let droppableCollection: DroppableCollectionResult;
-  let isRootDropTarget: boolean;
-  let dragPreview: JSX.Element;
-  let preview = useRef(null);
+  let dragState: DraggableCollectionState | undefined = undefined;
+  let dropState: DroppableCollectionState | undefined = undefined;
+  let droppableCollection: DroppableCollectionResult | undefined = undefined;
+  let isRootDropTarget = false;
+  let dragPreview: JSX.Element | null = null;
+  let preview = useRef<DragPreviewRenderer>(null);
 
-  if (isListDraggable) {
-    dragState = dragAndDropHooks.useDraggableCollectionState({
+  if (isListDraggable && dragAndDropHooks) {
+    dragState = dragAndDropHooks.useDraggableCollectionState!({
       collection,
       selectionManager,
-      preview: dragAndDropHooks.renderDragPreview ? preview : null
+      preview: dragAndDropHooks.renderDragPreview ? preview : undefined
     });
-    dragAndDropHooks.useDraggableCollection({}, dragState, ref);
+    dragAndDropHooks.useDraggableCollection!({}, dragState, ref);
 
+    let DragPreview = dragAndDropHooks.DragPreview!;
     dragPreview = dragAndDropHooks.renderDragPreview
-      ? <dragAndDropHooks.DragPreview ref={preview}>{dragAndDropHooks.renderDragPreview}</dragAndDropHooks.DragPreview>
+      ? <DragPreview ref={preview}>{dragAndDropHooks.renderDragPreview}</DragPreview>
       : null;
   }
 
-  if (isListDroppable) {
-    dropState = dragAndDropHooks.useDroppableCollectionState({
+  if (isListDroppable && dragAndDropHooks) {
+    dropState = dragAndDropHooks.useDroppableCollectionState!({
       collection,
       selectionManager
     });
@@ -120,7 +121,7 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
       ref
     );
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(collection, ref);
-    droppableCollection = dragAndDropHooks.useDroppableCollection({
+    droppableCollection = dragAndDropHooks.useDroppableCollection!({
       keyboardDelegate,
       dropTargetDelegate
     }, dropState, ref);
@@ -138,8 +139,8 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
     }
   });
 
-  let emptyState;
-  let emptyStatePropOverrides;
+  let emptyState: ReactNode = null;
+  let emptyStatePropOverrides: HTMLAttributes<HTMLElement> | null = null;
   if (state.collection.size === 0 && props.renderEmptyState) {
     // Ideally we'd use `display: contents` on the row and cell elements so that
     // they don't affect the layout of the children. However, WebKit currently has
@@ -208,8 +209,8 @@ const _GridList = (forwardRef as forwardRefType)(GridList);
 export {_GridList as GridList};
 
 function GridListItem({item}) {
-  let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalGridListContext);
-  let ref = React.useRef();
+  let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalGridListContext)!;
+  let ref = React.useRef<HTMLDivElement>(null);
   let {rowProps, gridCellProps, descriptionProps, ...states} = useGridListItem(
     {
       node: item,
@@ -229,16 +230,16 @@ function GridListItem({item}) {
     state
   );
 
-  let draggableItem: DraggableItemResult;
-  if (dragState) {
-    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
+  let draggableItem: DraggableItemResult | null = null;
+  if (dragState && dragAndDropHooks) {
+    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
   }
 
-  let dropIndicator: DropIndicatorAria;
-  let dropIndicatorRef = useRef(null);
+  let dropIndicator: DropIndicatorAria | null = null;
+  let dropIndicatorRef = useRef<HTMLDivElement>(null);
   let {visuallyHiddenProps} = useVisuallyHidden();
-  if (dropState) {
-    dropIndicator = dragAndDropHooks.useDropIndicator({
+  if (dropState && dragAndDropHooks) {
+    dropIndicator = dragAndDropHooks.useDropIndicator!({
       target: {type: 'item', key: item.key, dropPosition: 'on'}
     }, dropState, dropIndicatorRef);
   }
@@ -263,7 +264,7 @@ function GridListItem({item}) {
   });
 
   let renderDropIndicator = dragAndDropHooks?.renderDropIndicator || (target => <DropIndicator target={target} />);
-  let dragButtonRef = useRef(null);
+  let dragButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (dragState && !dragButtonRef.current) {
       console.warn('Draggable items in a GridList must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
@@ -328,11 +329,11 @@ function GridListItem({item}) {
 
 function GridListDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {dragAndDropHooks, dropState} = useContext(InternalGridListContext);
-  let buttonRef = useRef(null);
-  let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks.useDropIndicator(
+  let {dragAndDropHooks, dropState} = useContext(InternalGridListContext)!;
+  let buttonRef = useRef<HTMLDivElement>(null);
+  let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
-    dropState,
+    dropState!,
     buttonRef
   );
 
@@ -365,12 +366,12 @@ function GridListDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTML
 }
 
 function RootDropIndicator() {
-  let {dragAndDropHooks, dropState} = useContext(InternalGridListContext);
-  let ref = useRef();
-  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator({
+  let {dragAndDropHooks, dropState} = useContext(InternalGridListContext)!;
+  let ref = useRef<HTMLDivElement>(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-aria-components/src/Link.tsx b/packages/react-aria-components/src/Link.tsx
index f4371821fe6..6e6f6561905 100644
--- a/packages/react-aria-components/src/Link.tsx
+++ b/packages/react-aria-components/src/Link.tsx
@@ -66,7 +66,7 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
     defaultClassName: 'react-aria-Link',
     values: {
       isCurrent: !!props['aria-current'],
-      isDisabled: props.isDisabled,
+      isDisabled: props.isDisabled || false,
       isPressed,
       isHovered,
       isFocused,
@@ -74,7 +74,7 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
     }
   });
 
-  let element: any = typeof renderProps.children === 'string' 
+  let element: any = typeof renderProps.children === 'string'
     ? <span>{renderProps.children}</span>
     : React.Children.only(renderProps.children);
 
@@ -85,7 +85,7 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
       children: element.props.children,
       'data-hovered': isHovered || undefined,
       'data-pressed': isPressed || undefined,
-      'data-focus-visible': isFocusVisible || undefined  
+      'data-focus-visible': isFocusVisible || undefined
     }, element.props)
   });
 }
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 51e32863034..d21072f923b 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DroppableCollectionResult, DroppableItemResult, ListKeyboardDelegate, mergeProps, useHover, useListBox, useListBoxSection, useOption} from 'react-aria';
+import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, ListKeyboardDelegate, mergeProps, useHover, useListBox, useListBoxSection, useOption} from 'react-aria';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {ContextValue, forwardRefType, HiddenContext, Provider, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
@@ -48,14 +48,14 @@ interface ListBoxContextValue<T> extends ListBoxProps<T> {
 
 interface InternalListBoxContextValue {
   state: ListState<unknown>,
-  shouldFocusOnHover: boolean,
+  shouldFocusOnHover?: boolean,
   dragAndDropHooks?: DragAndDropHooks,
   dragState?: DraggableCollectionState,
   dropState?: DroppableCollectionState
 }
 
 export const ListBoxContext = createContext<ContextValue<ListBoxContextValue<any>, HTMLDivElement>>(null);
-const InternalListBoxContext = createContext<InternalListBoxContextValue>(null);
+const InternalListBoxContext = createContext<InternalListBoxContextValue | null>(null);
 
 function ListBox<T>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ListBoxContext);
@@ -128,28 +128,29 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
     console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
   }
 
-  let dragState: DraggableCollectionState;
-  let dropState: DroppableCollectionState;
-  let droppableCollection: DroppableCollectionResult;
-  let isRootDropTarget: boolean;
-  let dragPreview: JSX.Element;
-  let preview = useRef(null);
+  let dragState: DraggableCollectionState | undefined = undefined;
+  let dropState: DroppableCollectionState | undefined = undefined;
+  let droppableCollection: DroppableCollectionResult | undefined = undefined;
+  let isRootDropTarget = false;
+  let dragPreview: JSX.Element | null = null;
+  let preview = useRef<DragPreviewRenderer>(null);
 
-  if (isListDraggable) {
-    dragState = dragAndDropHooks.useDraggableCollectionState({
+  if (isListDraggable && dragAndDropHooks) {
+    dragState = dragAndDropHooks.useDraggableCollectionState!({
       collection,
       selectionManager,
-      preview: dragAndDropHooks.renderDragPreview ? preview : null
+      preview: dragAndDropHooks.renderDragPreview ? preview : undefined
     });
-    dragAndDropHooks.useDraggableCollection({}, dragState, listBoxRef);
+    dragAndDropHooks.useDraggableCollection!({}, dragState, listBoxRef);
 
+    let DragPreview = dragAndDropHooks.DragPreview!;
     dragPreview = dragAndDropHooks.renderDragPreview
-      ? <dragAndDropHooks.DragPreview ref={preview}>{dragAndDropHooks.renderDragPreview}</dragAndDropHooks.DragPreview>
+      ? <DragPreview ref={preview}>{dragAndDropHooks.renderDragPreview}</DragPreview>
       : null;
   }
 
-  if (isListDroppable) {
-    dropState = dragAndDropHooks.useDroppableCollectionState({
+  if (isListDroppable && dragAndDropHooks) {
+    dropState = dragAndDropHooks.useDroppableCollectionState!({
       collection,
       selectionManager
     });
@@ -160,7 +161,7 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
       listBoxRef
     );
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(collection, listBoxRef);
-    droppableCollection = dragAndDropHooks.useDroppableCollection({
+    droppableCollection = dragAndDropHooks.useDroppableCollection!({
       keyboardDelegate,
       dropTargetDelegate
     }, dropState, listBoxRef);
@@ -178,7 +179,7 @@ function ListBoxInner<T>({state, props, listBoxRef}: ListBoxInnerProps<T>) {
     }
   });
 
-  let emptyState;
+  let emptyState: JSX.Element | null = null;
   if (state.collection.size === 0 && props.renderEmptyState) {
     emptyState = (
       <div
@@ -218,14 +219,14 @@ interface ListBoxSectionProps<T> extends StyleProps {
 }
 
 function ListBoxSection<T>({section, className, style, ...otherProps}: ListBoxSectionProps<T>) {
-  let {state} = useContext(InternalListBoxContext);
+  let {state} = useContext(InternalListBoxContext)!;
   let {headingProps, groupProps} = useListBoxSection({
     heading: section.rendered,
-    'aria-label': section['aria-label']
+    'aria-label': section['aria-label'] ?? undefined
   });
 
   let children = useCachedChildren({
-    items: state.collection.getChildren(section.key),
+    items: state.collection.getChildren!(section.key),
     children: item => {
       if (item.type !== 'item') {
         throw new Error('Only items are allowed within a section');
@@ -256,8 +257,8 @@ interface OptionProps<T> {
 }
 
 function Option<T>({item}: OptionProps<T>) {
-  let ref = useRef();
-  let {state, shouldFocusOnHover, dragAndDropHooks, dragState, dropState} = useContext(InternalListBoxContext);
+  let ref = useRef<HTMLDivElement>(null);
+  let {state, shouldFocusOnHover, dragAndDropHooks, dragState, dropState} = useContext(InternalListBoxContext)!;
   let {optionProps, labelProps, descriptionProps, ...states} = useOption(
     {key: item.key},
     state,
@@ -273,14 +274,14 @@ function Option<T>({item}: OptionProps<T>) {
     isHovered = states.isFocused;
   }
 
-  let draggableItem: DraggableItemResult;
-  if (dragState) {
-    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key}, dragState);
+  let draggableItem: DraggableItemResult | null = null;
+  if (dragState && dragAndDropHooks) {
+    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key}, dragState);
   }
 
-  let droppableItem: DroppableItemResult;
-  if (dropState) {
-    droppableItem = dragAndDropHooks.useDroppableItem({
+  let droppableItem: DroppableItemResult | null = null;
+  if (dropState && dragAndDropHooks) {
+    droppableItem = dragAndDropHooks.useDroppableItem!({
       target: {type: 'item', key: item.key, dropPosition: 'on'}
     }, dropState, ref);
   }
@@ -341,10 +342,10 @@ function Option<T>({item}: OptionProps<T>) {
 
 function ListBoxDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {dragAndDropHooks, dropState} = useContext(InternalListBoxContext);
-  let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks.useDropIndicator(
+  let {dragAndDropHooks, dropState} = useContext(InternalListBoxContext)!;
+  let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
-    dropState,
+    dropState!,
     ref
   );
 
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 78e1a116699..c94d52800a5 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -24,7 +24,7 @@ import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
-const InternalMenuContext = createContext<TreeState<unknown>>(null);
+const InternalMenuContext = createContext<TreeState<unknown> | null>(null);
 
 export interface MenuTriggerProps extends BaseMenuTriggerProps {
   children?: ReactNode
@@ -33,7 +33,7 @@ export interface MenuTriggerProps extends BaseMenuTriggerProps {
 export function MenuTrigger(props: MenuTriggerProps) {
   let state = useMenuTriggerState(props);
 
-  let ref = useRef();
+  let ref = useRef<HTMLButtonElement>(null);
   let {menuTriggerProps, menuProps} = useMenuTrigger({
     ...props,
     type: 'menu'
@@ -76,7 +76,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
   let state = useTreeState({
     ...props,
     collection,
-    children: null
+    children: undefined
   });
   let {menuProps} = useMenu(props, state, ref);
 
@@ -126,14 +126,14 @@ interface MenuSectionProps<T> extends StyleProps {
 }
 
 function MenuSection<T>({section, className, style, ...otherProps}: MenuSectionProps<T>) {
-  let state = useContext(InternalMenuContext);
+  let state = useContext(InternalMenuContext)!;
   let {headingProps, groupProps} = useMenuSection({
     heading: section.rendered,
-    'aria-label': section['aria-label']
+    'aria-label': section['aria-label'] ?? undefined
   });
 
   let children = useCachedChildren({
-    items: state.collection.getChildren(section.key),
+    items: state.collection.getChildren!(section.key),
     children: item => {
       if (item.type !== 'item') {
         throw new Error('Only items are allowed within a section');
@@ -172,8 +172,8 @@ interface MenuItemProps<T> {
 }
 
 function MenuItem<T>({item}: MenuItemProps<T>) {
-  let state = useContext(InternalMenuContext);
-  let ref = useRef();
+  let state = useContext(InternalMenuContext)!;
+  let ref = useRef<HTMLDivElement>(null);
   let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({key: item.key}, state, ref);
 
   let props: ItemProps<T> = item.props;
diff --git a/packages/react-aria-components/src/Meter.tsx b/packages/react-aria-components/src/Meter.tsx
index 89c971d2e8d..33f5e4c46f3 100644
--- a/packages/react-aria-components/src/Meter.tsx
+++ b/packages/react-aria-components/src/Meter.tsx
@@ -26,7 +26,7 @@ export interface MeterRenderProps {
    * A formatted version of the value.
    * @selector [aria-valuetext]
    */
-  valueText: string
+  valueText?: string
 }
 
 export const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index b9120e94857..9c5baebbfd2 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -29,8 +29,8 @@ interface InternalModalContextValue {
   isExiting: boolean
 }
 
-export const ModalContext = createContext<ModalContextValue>(null);
-const InternalModalContext = createContext<InternalModalContextValue>(null);
+export const ModalContext = createContext<ModalContextValue | null>(null);
+const InternalModalContext = createContext<InternalModalContextValue | null>(null);
 
 export interface ModalRenderProps {
   /**
@@ -98,7 +98,7 @@ export const ModalOverlay = forwardRef((props: ModalOverlayProps, ref: Forwarded
   let state = ctx?.state ?? useOverlayTriggerState(props);
 
   let objectRef = useObjectRef(ref);
-  let modalRef = useRef(null);
+  let modalRef = useRef<HTMLDivElement>(null);
   let isOverlayExiting = useExitAnimation(objectRef, state.isOpen);
   let isModalExiting = useExitAnimation(modalRef, state.isOpen);
   let isExiting = isOverlayExiting || isModalExiting;
@@ -159,7 +159,7 @@ interface ModalContentProps extends RenderProps<ModalRenderProps> {
 }
 
 function ModalContent(props: ModalContentProps) {
-  let {modalProps, modalRef, isExiting} = useContext(InternalModalContext);
+  let {modalProps, modalRef, isExiting} = useContext(InternalModalContext)!;
   let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);
 
   let ref = useObjectRef(mergedRefs);
diff --git a/packages/react-aria-components/src/NumberField.tsx b/packages/react-aria-components/src/NumberField.tsx
index e9340bc254a..d9f41cd49c3 100644
--- a/packages/react-aria-components/src/NumberField.tsx
+++ b/packages/react-aria-components/src/NumberField.tsx
@@ -28,7 +28,7 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
   [props, ref] = useContextProps(props, ref, NumberFieldContext);
   let {locale} = useLocale();
   let state = useNumberFieldState({...props, locale});
-  let inputRef = useRef();
+  let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
   let {
     labelProps,
diff --git a/packages/react-aria-components/src/OverlayArrow.tsx b/packages/react-aria-components/src/OverlayArrow.tsx
index 4cc25b08543..6c9ca1cd867 100644
--- a/packages/react-aria-components/src/OverlayArrow.tsx
+++ b/packages/react-aria-components/src/OverlayArrow.tsx
@@ -20,7 +20,7 @@ interface OverlayArrowContextValue {
   placement: PlacementAxis
 }
 
-export const OverlayArrowContext = createContext<OverlayArrowContextValue>(null);
+export const OverlayArrowContext = createContext<OverlayArrowContextValue | null>(null);
 
 export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>, RenderProps<OverlayArrowRenderProps> {}
 
@@ -33,7 +33,7 @@ export interface OverlayArrowRenderProps {
 }
 
 function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {arrowProps, placement} = useContext(OverlayArrowContext);
+  let {arrowProps, placement} = useContext(OverlayArrowContext)!;
   let style: CSSProperties = {
     ...arrowProps.style,
     position: 'absolute',
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 337fb55e15a..7a894e38ea2 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -45,15 +45,16 @@ export interface PopoverRenderProps {
 }
 
 interface PopoverContextValue extends PopoverProps {
-  state?: OverlayTriggerState,
-  preserveChildren?: boolean
+  state: OverlayTriggerState,
+  preserveChildren?: boolean,
+  triggerRef: RefObject<Element>
 }
 
 export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
 
 function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, PopoverContext);
-  let {preserveChildren, state} = props as PopoverContextValue;
+  let {preserveChildren, state, triggerRef} = props as PopoverContextValue;
   let isExiting = useExitAnimation(ref, state.isOpen);
 
   if (state && !state.isOpen && !isExiting) {
@@ -63,7 +64,7 @@ function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   return (
     <PopoverInner
       {...props}
-      triggerRef={props.triggerRef}
+      triggerRef={triggerRef}
       state={state}
       popoverRef={ref}
       isExiting={isExiting} />
diff --git a/packages/react-aria-components/src/ProgressBar.tsx b/packages/react-aria-components/src/ProgressBar.tsx
index eac03bc6b79..e166a111174 100644
--- a/packages/react-aria-components/src/ProgressBar.tsx
+++ b/packages/react-aria-components/src/ProgressBar.tsx
@@ -21,12 +21,12 @@ export interface ProgressBarRenderProps {
   /**
    * The value as a percentage between the minimum and maximum.
    */
-  percentage: number,
+  percentage?: number,
   /**
    * A formatted version of the value.
    * @selector [aria-valuetext]
    */
-  valueText: string,
+  valueText?: string,
   /**
    * Whether the progress bar is indeterminate.
    * @selector :not([aria-valuenow])
@@ -42,7 +42,7 @@ function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>)
     value = 0,
     minValue = 0,
     maxValue = 100,
-    isIndeterminate
+    isIndeterminate = false
   } = props;
 
   let [labelRef, label] = useSlot();
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index a06582327d8..b50adf77421 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -46,7 +46,7 @@ export interface RadioGroupRenderProps {
    * The validation state of the radio group.
    * @selector [aria-invalid]
    */
-  validationState: ValidationState
+  validationState: ValidationState | null
 }
 
 export interface RadioRenderProps {
@@ -89,7 +89,7 @@ export interface RadioRenderProps {
     * Whether the radio is valid or invalid.
     * @selector [data-validation-state="valid | invalid"]
     */
-   validationState: ValidationState,
+   validationState: ValidationState | null,
    /**
     * Whether the checkbox is required.
     * @selector [data-required]
@@ -98,7 +98,7 @@ export interface RadioRenderProps {
 }
 
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
-let InternalRadioContext = createContext<RadioGroupState>(null);
+let InternalRadioContext = createContext<RadioGroupState | null>(null);
 
 function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RadioGroupContext);
@@ -141,7 +141,7 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
 }
 
 function Radio(props: RadioProps, ref: ForwardedRef<HTMLInputElement>) {
-  let state = React.useContext(InternalRadioContext);
+  let state = React.useContext(InternalRadioContext)!;
   let domRef = useObjectRef(ref);
   let {inputProps, isSelected, isDisabled, isPressed: isPressedKeyboard} = useRadio(props, state, domRef);
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
index cbeecd771fb..6857ea07983 100644
--- a/packages/react-aria-components/src/SearchField.tsx
+++ b/packages/react-aria-components/src/SearchField.tsx
@@ -33,7 +33,7 @@ export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, H
 
 function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SearchFieldContext);
-  let inputRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
   let state = useSearchFieldState(props);
   let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
@@ -48,7 +48,7 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
   });
 
   return (
-    <div 
+    <div
       {...renderProps}
       ref={ref}
       slot={props.slot}
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index f929ad00f41..260a9b771bf 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -31,7 +31,7 @@ interface SelectValueContext {
 }
 
 export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
-const InternalSelectContext = createContext<SelectValueContext>(null);
+const InternalSelectContext = createContext<SelectValueContext | null>(null);
 
 function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
@@ -44,7 +44,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
   let state = useSelectState({
     ...props,
     collection,
-    children: null
+    children: undefined
   });
 
   // Get props for child elements from useSelect
@@ -60,7 +60,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
   } = useSelect({...props, label}, state, buttonRef);
 
   // Make menu width match input + button
-  let [buttonWidth, setButtonWidth] = useState(null);
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
   let onResize = useCallback(() => {
     if (buttonRef.current) {
       setButtonWidth(buttonRef.current.offsetWidth + 'px');
@@ -131,7 +131,7 @@ export interface SelectValueRenderProps {
 export interface SelectValueProps extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps> {}
 
 function SelectValue(props: SelectValueProps, ref: ForwardedRef<HTMLSpanElement>) {
-  let {state, valueProps} = useContext(InternalSelectContext);
+  let {state, valueProps} = useContext(InternalSelectContext)!;
   let renderProps = useRenderProps({
     ...props,
     defaultChildren: state.selectedItem?.rendered || 'Select an item',
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index ea33d4d1be1..17a193b4bac 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -33,7 +33,7 @@ interface SliderContextValue {
 }
 
 export const SliderContext = createContext<ContextValue<SliderProps, HTMLDivElement>>(null);
-const InternalSliderContext = createContext<SliderContextValue>(null);
+const InternalSliderContext = createContext<SliderContextValue | null>(null);
 
 export interface SliderRenderProps {
   /**
@@ -50,7 +50,7 @@ export interface SliderRenderProps {
 
 function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderContext);
-  let trackRef = useRef(null);
+  let trackRef = useRef<HTMLDivElement>(null);
   let numberFormatter = useNumberFormatter(props.formatOptions);
   let state = useSliderState({...props, numberFormatter});
   let [labelRef, label] = useSlot();
@@ -93,7 +93,7 @@ export {_Slider as Slider};
 export interface SliderOutputProps extends RenderProps<SliderState> {}
 
 function SliderOutput({children, style, className}: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
-  let {state, outputProps} = useContext(InternalSliderContext);
+  let {state, outputProps} = useContext(InternalSliderContext)!;
   let renderProps = useRenderProps({
     className,
     style,
@@ -115,7 +115,7 @@ export {_SliderOutput as SliderOutput};
 export interface SliderTrackProps extends RenderProps<SliderState> {}
 
 function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {state, trackProps, trackRef} = useContext(InternalSliderContext);
+  let {state, trackProps, trackRef} = useContext(InternalSliderContext)!;
   let domRef = mergeRefs(ref, trackRef);
   let renderProps = useRenderProps({
     ...props,
@@ -160,9 +160,9 @@ export interface SliderThumbRenderProps {
 export interface SliderThumbProps extends AriaSliderThumbProps, RenderProps<SliderThumbRenderProps> {}
 
 function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {state, trackRef} = useContext(InternalSliderContext);
+  let {state, trackRef} = useContext(InternalSliderContext)!;
   let {index = 0} = props;
-  let inputRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
   let {thumbProps, inputProps, labelProps, isDragging, isFocused, isDisabled} = useSliderThumb({
     ...props,
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 8c9d154ed4d..116c765b14e 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -3,10 +3,10 @@ import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererCo
 import {buildHeaderRows} from '@react-stately/table';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './Checkbox';
-import {ContextValue, defaultSlot, forwardRefType, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, defaultSlot, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableState} from 'react-stately';
 import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
-import {DraggableItemResult, DropIndicatorAria, DroppableCollectionResult, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
+import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
@@ -105,7 +105,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
   getKeyAfter(key: Key) {
     let node = this.getItem(key);
     if (node?.type === 'column') {
-      return node.nextKey;
+      return node.nextKey ?? null;
     }
 
     return super.getKeyAfter(key);
@@ -114,15 +114,15 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
   getKeyBefore(key: Key) {
     let node = this.getItem(key);
     if (node?.type === 'column') {
-      return node.prevKey;
+      return node.prevKey ?? null;
     }
 
-    key = super.getKeyBefore(key);
-    if (this.getItem(key)?.type === 'tablebody') {
+    let k = super.getKeyBefore(key);
+    if (k != null && this.getItem(k)?.type === 'tablebody') {
       return null;
     }
 
-    return key;
+    return k;
   }
 
   getChildren(key: Key): Iterable<Node<T>> {
@@ -155,8 +155,8 @@ interface InternalTableContextValue {
   dropState?: DroppableCollectionState
 }
 
-export const TableContext = createContext<ContextValue<TableProps<any>, HTMLTableElement>>(null);
-const InternalTableContext = createContext<InternalTableContextValue>(null);
+export const TableContext = createContext<ContextValue<TableProps, HTMLTableElement>>(null);
+const InternalTableContext = createContext<InternalTableContextValue | null>(null);
 
 export interface TableRenderProps {
   /**
@@ -166,7 +166,9 @@ export interface TableRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableProps<T> extends Omit<SharedTableProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps {
+export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps {
+  /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
+  children?: ReactNode,
   /**
    * How multiple selection should behave in the collection.
    * @default "toggle"
@@ -185,14 +187,14 @@ export interface TableProps<T> extends Omit<SharedTableProps<T>, 'children'>, Co
   dragAndDropHooks?: DragAndDropHooks
 }
 
-function Table<T extends object>(props: TableProps<T>, ref: ForwardedRef<HTMLTableElement>) {
+function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
   [props, ref] = useContextProps(props, ref, TableContext);
-  let initialCollection = useMemo(() => new TableCollection<T>(), []);
+  let initialCollection = useMemo(() => new TableCollection<any>(), []);
   let {portal, collection} = useCollection(props, initialCollection);
   let state = useTableState({
     ...props,
     collection,
-    children: null
+    children: undefined
   });
 
   let {gridProps} = useTable(props, state, ref);
@@ -210,28 +212,29 @@ function Table<T extends object>(props: TableProps<T>, ref: ForwardedRef<HTMLTab
     console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
   }
 
-  let dragState: DraggableCollectionState;
-  let dropState: DroppableCollectionState;
-  let droppableCollection: DroppableCollectionResult;
-  let isRootDropTarget: boolean;
-  let dragPreview: JSX.Element;
-  let preview = useRef(null);
+  let dragState: DraggableCollectionState | undefined = undefined;
+  let dropState: DroppableCollectionState | undefined = undefined;
+  let droppableCollection: DroppableCollectionResult | undefined = undefined;
+  let isRootDropTarget = false;
+  let dragPreview: JSX.Element | null = null;
+  let preview = useRef<DragPreviewRenderer>(null);
 
-  if (isListDraggable) {
-    dragState = dragAndDropHooks.useDraggableCollectionState({
+  if (isListDraggable && dragAndDropHooks) {
+    dragState = dragAndDropHooks.useDraggableCollectionState!({
       collection,
       selectionManager,
-      preview: dragAndDropHooks.renderDragPreview ? preview : null
+      preview: dragAndDropHooks.renderDragPreview ? preview : undefined
     });
-    dragAndDropHooks.useDraggableCollection({}, dragState, ref);
+    dragAndDropHooks.useDraggableCollection!({}, dragState, ref);
 
+    let DragPreview = dragAndDropHooks.DragPreview!;
     dragPreview = dragAndDropHooks.renderDragPreview
-      ? <dragAndDropHooks.DragPreview ref={preview}>{dragAndDropHooks.renderDragPreview}</dragAndDropHooks.DragPreview>
+      ? <DragPreview ref={preview}>{dragAndDropHooks.renderDragPreview}</DragPreview>
       : null;
   }
 
-  if (isListDroppable) {
-    dropState = dragAndDropHooks.useDroppableCollectionState({
+  if (isListDroppable && dragAndDropHooks) {
+    dropState = dragAndDropHooks.useDroppableCollectionState!({
       collection,
       selectionManager
     });
@@ -242,7 +245,7 @@ function Table<T extends object>(props: TableProps<T>, ref: ForwardedRef<HTMLTab
       ref
     );
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(collection, ref);
-    droppableCollection = dragAndDropHooks.useDroppableCollection({
+    droppableCollection = dragAndDropHooks.useDroppableCollection!({
       keyboardDelegate,
       dropTargetDelegate
     }, dropState, ref);
@@ -297,7 +300,7 @@ function Table<T extends object>(props: TableProps<T>, ref: ForwardedRef<HTMLTab
  * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys,
  * and optionally supports row selection and sorting.
  */
-const _Table = (forwardRef as forwardRefType)(Table);
+const _Table = forwardRef(Table);
 export {_Table as Table};
 
 export interface TableOptionsContextValue {
@@ -311,13 +314,13 @@ export interface TableOptionsContextValue {
   allowsDragging: boolean
 }
 
-const TableOptionsContext = createContext<TableOptionsContextValue>(null);
+const TableOptionsContext = createContext<TableOptionsContextValue | null>(null);
 
 /**
  * Returns options from the parent `<Table>` component.
  */
 export function useTableOptions(): TableOptionsContextValue {
-  return useContext(TableOptionsContext);
+  return useContext(TableOptionsContext)!;
 }
 
 export interface TableHeaderProps<T> {
@@ -365,7 +368,7 @@ export interface ColumnRenderProps {
    * The current sort direction.
    * @selector [aria-sort="ascending | descending"]
    */
-  sortDirection: SortDirection | null
+  sortDirection?: SortDirection
 }
 
 export interface ColumnProps<T = object> extends RenderProps<ColumnRenderProps> {
@@ -563,13 +566,13 @@ function TableBodyRowGroup<T>({collection, isDroppable}: {collection: TableColle
 }
 
 function TableHeaderRow<T>({item}: {item: GridNode<T>}) {
-  let ref = useRef();
-  let {state} = useContext(InternalTableContext);
+  let ref = useRef<HTMLTableRowElement>(null);
+  let {state} = useContext(InternalTableContext)!;
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
   let {checkboxProps} = useTableSelectAllCheckbox(state);
 
   let cells = useCachedChildren({
-    items: state.collection.getChildren(item.key),
+    items: state.collection.getChildren!(item.key),
     children: (item) => {
       switch (item.type) {
         case 'column':
@@ -597,8 +600,8 @@ function TableHeaderRow<T>({item}: {item: GridNode<T>}) {
 }
 
 function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
-  let ref = useRef();
-  let {state} = useContext(InternalTableContext);
+  let ref = useRef<HTMLTableHeaderCellElement>(null);
+  let {state} = useContext(InternalTableContext)!;
   let {columnHeaderProps} = useTableColumnHeader(
     {node: column},
     state,
@@ -617,8 +620,8 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
       isFocusVisible,
       allowsSorting: column.props.allowsSorting,
       sortDirection: state.sortDescriptor?.column === column.key
-        ? state.sortDescriptor?.direction
-        : null
+        ? state.sortDescriptor.direction
+        : undefined
     }
   });
 
@@ -636,8 +639,8 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
 }
 
 function TableRow<T>({item}: {item: GridNode<T>}) {
-  let ref = useRef();
-  let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalTableContext);
+  let ref = useRef<HTMLTableRowElement>(null);
+  let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalTableContext)!;
   let {rowProps, ...states} = useTableRow(
     {
       node: item,
@@ -656,22 +659,22 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
     state
   );
 
-  let draggableItem: DraggableItemResult;
-  if (dragState) {
-    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
+  let draggableItem: DraggableItemResult | undefined = undefined;
+  if (dragState && dragAndDropHooks) {
+    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
   }
 
-  let dropIndicator: DropIndicatorAria;
-  let dropIndicatorRef = useRef(null);
+  let dropIndicator: DropIndicatorAria | undefined = undefined;
+  let dropIndicatorRef = useRef<HTMLDivElement>(null);
   let {visuallyHiddenProps} = useVisuallyHidden();
-  if (dropState) {
-    dropIndicator = dragAndDropHooks.useDropIndicator({
+  if (dropState && dragAndDropHooks) {
+    dropIndicator = dragAndDropHooks.useDropIndicator!({
       target: {type: 'item', key: item.key, dropPosition: 'on'}
     }, dropState, dropIndicatorRef);
   }
 
   let renderDropIndicator = dragAndDropHooks?.renderDropIndicator || (target => <DropIndicator target={target} />);
-  let dragButtonRef = useRef(null);
+  let dragButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (dragState && !dragButtonRef.current) {
       console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
@@ -698,8 +701,8 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
   });
 
   let cells = useCachedChildren({
-    items: state.collection.getChildren(item.key),
-    children: (item: Node<T>) => {
+    items: state.collection.getChildren!(item.key),
+    children: (item: Node<unknown>) => {
       switch (item.type) {
         case 'cell':
           return <TableCell cell={item} />;
@@ -762,8 +765,8 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
 }
 
 function TableCell<T>({cell}: {cell: GridNode<T>}) {
-  let ref = useRef();
-  let {state, dragState} = useContext(InternalTableContext);
+  let ref = useRef<HTMLTableCellElement>(null);
+  let {state, dragState} = useContext(InternalTableContext)!;
 
   // @ts-ignore
   cell.column = state.collection.columns[cell.index];
@@ -801,11 +804,11 @@ function TableCell<T>({cell}: {cell: GridNode<T>}) {
 
 function TableDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext);
-  let buttonRef = useRef(null);
-  let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks.useDropIndicator(
+  let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
+  let buttonRef = useRef<HTMLDivElement>(null);
+  let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
-    dropState,
+    dropState!,
     buttonRef
   );
 
@@ -841,12 +844,12 @@ function TableDropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLEle
 }
 
 function RootDropIndicator() {
-  let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext);
-  let ref = useRef();
-  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator({
+  let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
+  let ref = useRef<HTMLDivElement>(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-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index bf04abeafce..28727486dd5 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -14,7 +14,7 @@ import {AriaLabelingProps} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
 import {CollectionProps, Item, useCollection} from './Collection';
 import {ContextValue, forwardRefType, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import {Node, useTabListState} from 'react-stately';
+import {Node, TabListState, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, Key, useContext, useEffect, useState} from 'react';
 import {useObjectRef} from '@react-aria/utils';
 
@@ -95,13 +95,19 @@ export interface TabPanelRenderProps {
   isFocusVisible: boolean
 }
 
+interface InternalTabsContextValue {
+  state: TabListState<unknown> | null,
+  setState: React.Dispatch<React.SetStateAction<TabListState<unknown> | null>>,
+  orientation: Orientation
+}
+
 export const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);
-const InternalTabsContext = createContext(null);
+const InternalTabsContext = createContext<InternalTabsContextValue | null>(null);
 
 function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TabsContext);
   let {orientation = 'horizontal'} = props;
-  let [state, setState] = useState(null);
+  let [state, setState] = useState<TabListState<unknown> | null>(null);
 
   let renderProps = useRenderProps({
     ...props,
@@ -131,19 +137,18 @@ const _Tabs = forwardRef(Tabs);
 export {_Tabs as Tabs};
 
 function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
-  let {setState, orientation} = useContext(InternalTabsContext);
+  let {setState, orientation} = useContext(InternalTabsContext)!;
   let objectRef = useObjectRef(ref);
 
   let {portal, collection} = useCollection(props);
   let state = useTabListState({
     ...props,
     collection,
-    children: null
+    children: undefined
   });
 
   let {tabListProps} = useTabList({
     ...props,
-    children: null,
     orientation
   }, state, objectRef);
 
@@ -191,9 +196,9 @@ export function Tab(props: TabProps): JSX.Element {
   return Item(props);
 }
 
-function TabInner({item, state}) {
+function TabInner({item, state}: {item: Node<object>, state: TabListState<object>}) {
   let {key} = item;
-  let ref = React.useRef();
+  let ref = React.useRef<HTMLDivElement>(null);
   let {tabProps, isSelected, isDisabled, isPressed} = useTab({key}, state, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
@@ -231,9 +236,11 @@ export interface TabPanelsProps<T> extends Omit<CollectionProps<T>, 'disabledKey
  * The ids of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.
  */
 export function TabPanels<T extends object>(props: TabPanelsProps<T>) {
-  const {state} = useContext(InternalTabsContext);
+  const {state} = useContext(InternalTabsContext)!;
   let {portal, collection} = useCollection(props);
-  const selectedItem = collection.getItem(state?.selectedKey);
+  const selectedItem = state?.selectedKey != null
+    ? collection.getItem(state!.selectedKey)
+    : null;
 
   return (
     <>
@@ -251,9 +258,9 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
 }
 
 function SelectedTabPanel({item}: {item: Node<object>}) {
-  const {state} = useContext(InternalTabsContext);
-  let ref = React.useRef();
-  let {tabPanelProps} = useTabPanel(item.props, state, ref);
+  const {state} = useContext(InternalTabsContext)!;
+  let ref = React.useRef<HTMLDivElement>(null);
+  let {tabPanelProps} = useTabPanel(item.props, state!, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
   let renderProps = useRenderProps({
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
index 2b303b34cf5..fa5875754b2 100644
--- a/packages/react-aria-components/src/TextField.tsx
+++ b/packages/react-aria-components/src/TextField.tsx
@@ -24,7 +24,7 @@ export const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLD
 
 function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TextFieldContext);
-  let inputRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
     ...props,
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
index 64b416c0fc0..61346709efc 100644
--- a/packages/react-aria-components/src/Tooltip.tsx
+++ b/packages/react-aria-components/src/Tooltip.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, FocusableElement} from '@react-types/shared';
 import {FocusableProvider} from '@react-aria/focus';
 import {mergeProps, OverlayContainer, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';
 import {mergeRefs, useObjectRef} from '@react-aria/utils';
@@ -45,11 +45,11 @@ export interface TooltipRenderProps {
 
 interface TooltipContextValue {
   state: TooltipTriggerState,
-  triggerRef: RefObject<HTMLDivElement>,
+  triggerRef: RefObject<FocusableElement>,
   tooltipProps: DOMAttributes
 }
 
-const InternalTooltipContext = createContext<TooltipContextValue>(null);
+const InternalTooltipContext = createContext<TooltipContextValue | null>(null);
 
 /**
  * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
@@ -58,7 +58,7 @@ const InternalTooltipContext = createContext<TooltipContextValue>(null);
  */
 export function TooltipTrigger(props: TooltipTriggerComponentProps) {
   let state = useTooltipTriggerState(props);
-  let ref = useRef();
+  let ref = useRef<FocusableElement>(null);
   let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);
 
   return (
@@ -71,7 +71,7 @@ export function TooltipTrigger(props: TooltipTriggerComponentProps) {
 }
 
 function Tooltip(props: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {state} = useContext(InternalTooltipContext);
+  let {state} = useContext(InternalTooltipContext)!;
   let objectRef = useObjectRef(ref);
   let isExiting = useExitAnimation(objectRef, state.isOpen);
   if (!state.isOpen && !isExiting) {
@@ -92,9 +92,9 @@ const _Tooltip = forwardRef(Tooltip);
 export {_Tooltip as Tooltip};
 
 function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: ForwardedRef<HTMLDivElement>}) {
-  let {state, triggerRef, tooltipProps: triggerTooltipProps} = useContext(InternalTooltipContext);
+  let {state, triggerRef, tooltipProps: triggerTooltipProps} = useContext(InternalTooltipContext)!;
 
-  let overlayRef = useRef();
+  let overlayRef = useRef<HTMLDivElement>(null);
   let {overlayProps, arrowProps, placement} = useOverlayPosition({
     placement: props.placement || 'top',
     targetRef: triggerRef,
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index e33478aec88..7968a9b976f 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -48,7 +48,7 @@ export {TextField, TextFieldContext} from './TextField';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {TooltipTrigger, Tooltip} from './Tooltip';
 export {useDragAndDrop, DropIndicator, DropIndicatorContext} from './useDragAndDrop';
-export {DIRECTORY_DRAG_TYPE} from 'react-aria';
+export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem} from 'react-aria';
 
 export type {BreadcrumbsProps} from './Breadcrumbs';
 export type {ButtonProps, ButtonRenderProps} from './Button';
diff --git a/packages/react-aria-components/src/useDragAndDrop.tsx b/packages/react-aria-components/src/useDragAndDrop.tsx
index 13d0d8e237c..0066865a139 100644
--- a/packages/react-aria-components/src/useDragAndDrop.tsx
+++ b/packages/react-aria-components/src/useDragAndDrop.tsx
@@ -31,7 +31,6 @@ import {
   useDroppableCollection,
   useDroppableItem
 } from 'react-aria';
-import {createContext, ForwardedRef, forwardRef, Key, RefObject, useContext, useMemo} from 'react';
 import {DraggableCollectionProps, DroppableCollectionProps} from '@react-types/shared';
 import {
   DraggableCollectionState,
@@ -41,6 +40,7 @@ import {
   useDraggableCollectionState,
   useDroppableCollectionState
 } from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, Key, ReactNode, RefObject, useContext, useMemo} from 'react';
 import {RenderProps} from './utils';
 
 interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {}
@@ -83,7 +83,7 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
   renderDragPreview?: (items: DragItem[]) => JSX.Element,
   /**
    * A function that renders a drop indicator element between two items in a collection.
-   * This should render a `<DropIndicator>` element. If this function is not provided, a 
+   * This should render a `<DropIndicator>` element. If this function is not provided, a
    * default DropIndicator is provided.
    */
   renderDropIndicator?: (target: DropTarget) => JSX.Element,
@@ -113,8 +113,8 @@ export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop {
 
     let hooks = {} as DragHooks & DropHooks;
     if (isDraggable) {
-      hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOptions) {
-        return useDraggableCollectionState({...props, ...options});
+      hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOpts) {
+        return useDraggableCollectionState({...props, ...options} as DraggableCollectionStateOptions);
       };
       hooks.useDraggableCollection = useDraggableCollection;
       hooks.useDraggableItem = useDraggableItem;
@@ -144,7 +144,7 @@ export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop {
   };
 }
 
-export const DropIndicatorContext = createContext<DropIndicatorContextValue>(null);
+export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
 
 export interface DropIndicatorRenderProps {
   /**
@@ -157,12 +157,12 @@ export interface DropIndicatorRenderProps {
 export interface DropIndicatorProps extends AriaDropIndicatorProps, RenderProps<DropIndicatorRenderProps> {}
 
 interface DropIndicatorContextValue {
-  render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => JSX.Element
+  render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
 }
 
 function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
-  let {render} = useContext(DropIndicatorContext);
-  return render(props, ref);
+  let {render} = useContext(DropIndicatorContext)!;
+  return <>{render(props, ref)}</>;
 }
 
 /**
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index d0b1fc8116c..bfd20ff186c 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -29,7 +29,7 @@ interface SlottedValue<T> {
   [slotCallbackSymbol]?: (value: T) => void
 }
 
-export type ContextValue<T extends SlotProps, E extends Element> = SlottedValue<WithRef<T, E>> | WithRef<T, E>;
+export type ContextValue<T extends SlotProps, E extends Element> = SlottedValue<WithRef<T, E>> | WithRef<T, E> | null | undefined;
 
 type ProviderValue<T> = [React.Context<T>, T];
 type ProviderValues<A, B, C, D, E, F, G, H> =
@@ -118,7 +118,7 @@ export interface SlotProps {
 
 export function useContextProps<T, U, E extends Element>(props: T & SlotProps, ref: React.ForwardedRef<E>, context: React.Context<ContextValue<U, E>>): [T, React.RefObject<E>] {
   let ctx = useContext(context) || {};
-  if ('slots' in ctx) {
+  if ('slots' in ctx && ctx.slots) {
     if (!props.slot && !ctx.slots[defaultSlot]) {
       throw new Error('A slot prop is required');
     }
@@ -203,7 +203,7 @@ export function useExitAnimation(ref: RefObject<HTMLElement>, isOpen: boolean) {
 }
 
 function useAnimation(ref: RefObject<HTMLElement>, isActive: boolean, onEnd: () => void) {
-  let prevAnimation = useRef(null);
+  let prevAnimation = useRef<string | null>(null);
   if (isActive && ref.current) {
     prevAnimation.current = window.getComputedStyle(ref.current).animation;
   }
diff --git a/packages/react-aria/src/index.ts b/packages/react-aria/src/index.ts
index 5fe5db9864f..2c0f65f5f45 100644
--- a/packages/react-aria/src/index.ts
+++ b/packages/react-aria/src/index.ts
@@ -17,7 +17,7 @@ export {useCheckbox, useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/c
 export {useComboBox} from '@react-aria/combobox';
 export {useDateField, useDatePicker, useDateRangePicker, useDateSegment, useTimeField} from '@react-aria/datepicker';
 export {useDialog} from '@react-aria/dialog';
-export {useDrag, useDrop, useDraggableCollection, useDroppableCollection, useDroppableItem, useDropIndicator, useDraggableItem, useClipboard, DragPreview, ListDropTargetDelegate, DIRECTORY_DRAG_TYPE} from '@react-aria/dnd';
+export {useDrag, useDrop, useDraggableCollection, useDroppableCollection, useDroppableItem, useDropIndicator, useDraggableItem, useClipboard, DragPreview, ListDropTargetDelegate, DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem} from '@react-aria/dnd';
 export {FocusRing, FocusScope, useFocusManager, useFocusRing, useFocusable} from '@react-aria/focus';
 export {I18nProvider, useCollator, useDateFormatter, useFilter, useLocale, useLocalizedStringFormatter, useMessageFormatter, useNumberFormatter} from '@react-aria/i18n';
 export {useFocus, useFocusVisible, useFocusWithin, useHover, useInteractOutside, useKeyboard, useMove, usePress, useLongPress} from '@react-aria/interactions';
@@ -73,7 +73,7 @@ export type {SSRProviderProps} from '@react-aria/ssr';
 export type {AriaSliderProps, AriaSliderThumbProps, AriaSliderThumbOptions, SliderAria, SliderThumbAria} from '@react-aria/slider';
 export type {AriaSwitchProps, SwitchAria} from '@react-aria/switch';
 export type {AriaTableCellProps, AriaTableColumnHeaderProps, AriaTableProps, AriaTableSelectionCheckboxProps, GridAria, GridRowAria, GridRowProps, TableCellAria, TableColumnHeaderAria, TableHeaderRowAria, TableSelectAllCheckboxAria, TableSelectionCheckboxAria} from '@react-aria/table';
-export type {AriaTabListProps, AriaTabPanelProps, AriaTabProps, TabAria, TabListAria, TabPanelAria} from '@react-aria/tabs';
+export type {AriaTabListProps, AriaTabListOptions, AriaTabPanelProps, AriaTabProps, TabAria, TabListAria, TabPanelAria} from '@react-aria/tabs';
 export type {AriaTextFieldOptions, AriaTextFieldProps, TextFieldAria} from '@react-aria/textfield';
 export type {AriaTooltipProps, TooltipAria, TooltipTriggerAria, TooltipTriggerProps} from '@react-aria/tooltip';
 export type {VisuallyHiddenAria, VisuallyHiddenProps} from '@react-aria/visually-hidden';
diff --git a/tsconfig.json b/tsconfig.json
index ef743f733be..0e701954ead 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -61,7 +61,8 @@
           "./packages/@react-types/statuslight",
           "./packages/@react-types/text",
           "./packages/@react-types/view",
-          "./packages/@react-types/well"
+          "./packages/@react-types/well",
+          "./packages/react-aria-components"
         ]
       }
     ]