From 93d8a586bd35b7626ecb8aac112a0b237235ddc1 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 4 Mar 2023 13:34:50 -0500
Subject: [PATCH 1/6] Convert aria component docs to TypeScript

---
 packages/@react-aria/calendar/src/index.ts    |  2 +-
 packages/@react-aria/datepicker/src/index.ts  |  4 +--
 .../datepicker/src/useDateField.ts            |  4 +--
 packages/dev/docs/src/docs.css                |  8 +++++
 .../react-aria-components/docs/Calendar.mdx   |  9 ++++--
 .../react-aria-components/docs/Checkbox.mdx   |  4 ++-
 .../docs/CheckboxGroup.mdx                    | 11 +++++--
 .../react-aria-components/docs/ComboBox.mdx   | 24 +++++++++++----
 .../react-aria-components/docs/DateField.mdx  | 11 +++++--
 .../react-aria-components/docs/DatePicker.mdx | 15 +++++++---
 .../docs/DateRangePicker.mdx                  | 18 ++++++++----
 .../react-aria-components/docs/GridList.mdx   | 26 ++++++++++++-----
 .../react-aria-components/docs/ListBox.mdx    | 23 ++++++++++-----
 packages/react-aria-components/docs/Menu.mdx  | 22 ++++++++++----
 packages/react-aria-components/docs/Meter.mdx |  8 ++++-
 .../docs/NumberField.mdx                      | 13 +++++++--
 .../react-aria-components/docs/Popover.mdx    |  4 ++-
 .../docs/ProgressBar.mdx                      |  8 ++++-
 .../react-aria-components/docs/RadioGroup.mdx |  9 +++++-
 .../docs/RangeCalendar.mdx                    | 10 +++++--
 .../docs/SearchField.mdx                      | 11 +++++--
 .../react-aria-components/docs/Select.mdx     | 24 +++++++++++----
 .../react-aria-components/docs/Slider.mdx     |  9 +++++-
 .../react-aria-components/docs/Switch.mdx     |  4 ++-
 packages/react-aria-components/docs/Table.mdx | 29 +++++++++++++++----
 packages/react-aria-components/docs/Tabs.mdx  | 10 +++----
 .../react-aria-components/docs/TextField.mdx  | 11 +++++--
 .../react-aria-components/docs/TimeField.mdx  | 12 ++++++--
 .../react-aria-components/docs/Tooltip.mdx    |  4 ++-
 .../react-aria-components/src/Calendar.tsx    |  3 +-
 .../react-aria-components/src/Collection.tsx  | 10 +++++--
 .../react-aria-components/src/DateField.tsx   |  3 +-
 .../react-aria-components/src/DatePicker.tsx  |  3 +-
 packages/react-aria-components/src/Dialog.tsx |  5 ++++
 .../react-aria-components/src/GridList.tsx    |  8 +++--
 .../react-aria-components/src/ListBox.tsx     |  1 +
 packages/react-aria-components/src/Menu.tsx   |  1 +
 .../react-aria-components/src/SearchField.tsx |  4 +--
 packages/react-aria-components/src/Select.tsx |  4 +--
 packages/react-aria-components/src/Slider.tsx |  4 +--
 packages/react-aria-components/src/Table.tsx  | 17 ++++++-----
 packages/react-aria-components/src/index.ts   |  3 ++
 packages/react-aria-components/src/utils.tsx  |  7 +++++
 packages/react-aria/src/index.ts              |  2 +-
 scripts/extractExamples.mjs                   |  2 +-
 45 files changed, 316 insertions(+), 108 deletions(-)

diff --git a/packages/@react-aria/calendar/src/index.ts b/packages/@react-aria/calendar/src/index.ts
index 75be3d28cdb..1676e603a42 100644
--- a/packages/@react-aria/calendar/src/index.ts
+++ b/packages/@react-aria/calendar/src/index.ts
@@ -15,7 +15,7 @@ export {useRangeCalendar} from './useRangeCalendar';
 export {useCalendarGrid} from './useCalendarGrid';
 export {useCalendarCell} from './useCalendarCell';
 
-export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, RangeCalendarProps} from '@react-types/calendar';
+export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';
 export type {CalendarAria} from './useCalendarBase';
 export type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid';
 export type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell';
diff --git a/packages/@react-aria/datepicker/src/index.ts b/packages/@react-aria/datepicker/src/index.ts
index b691f77391a..5db0fc7368a 100644
--- a/packages/@react-aria/datepicker/src/index.ts
+++ b/packages/@react-aria/datepicker/src/index.ts
@@ -16,8 +16,8 @@ export {useDateField, useTimeField} from './useDateField';
 export {useDateRangePicker} from './useDateRangePicker';
 export {useDisplayNames} from './useDisplayNames';
 
-export type {AriaDatePickerProps, AriaDateRangePickerProps} from '@react-types/datepicker';
-export type {AriaDateFieldProps, DateFieldAria} from './useDateField';
+export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker';
+export type {AriaDateFieldOptions, DateFieldAria} from './useDateField';
 export type {DatePickerAria} from './useDatePicker';
 export type {DateRangePickerAria} from './useDateRangePicker';
 export type {DateSegmentAria} from './useDateSegment';
diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts
index 99ffe8787e7..a7001615ca5 100644
--- a/packages/@react-aria/datepicker/src/useDateField.ts
+++ b/packages/@react-aria/datepicker/src/useDateField.ts
@@ -24,7 +24,7 @@ import {useFocusWithin} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
-export interface AriaDateFieldProps<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
+export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
 
 export interface DateFieldAria {
    /** Props for the field's visible label element, if any. */
@@ -57,7 +57,7 @@ export const focusManagerSymbol = '__focusManager_' + Date.now();
  * 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 useDateField<T extends DateValue>(props: AriaDateFieldProps<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
+export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span'
diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css
index 1040ad83c4c..b14eb68382c 100644
--- a/packages/dev/docs/src/docs.css
+++ b/packages/dev/docs/src/docs.css
@@ -365,6 +365,10 @@ footer li:last-child:after {
   margin-bottom: 0;
 }
 
+.propTable td[data-column="CSS Selector"] code {
+  white-space: nowrap;
+}
+
 .type-description {
   margin-top: 0;
 }
@@ -720,6 +724,10 @@ h2.sectionHeader {
   main {
     margin-right: 0;
   }
+
+  .propTable td[data-column="CSS Selector"] code {
+    white-space: normal;
+  }
 }
 
 @define-mixin small-propTable {
diff --git a/packages/react-aria-components/docs/Calendar.mdx b/packages/react-aria-components/docs/Calendar.mdx
index ea208e2453c..ba96b296379 100644
--- a/packages/react-aria-components/docs/Calendar.mdx
+++ b/packages/react-aria-components/docs/Calendar.mdx
@@ -382,9 +382,14 @@ If you will use a Calendar in multiple places in your app, you can wrap all of t
 This example also shows how to use the `errorMessage` slot to render help text in case of a validation error ([see below for details](#error-message)).
 
 ```tsx example export=true
+import type {CalendarProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyCalendar({errorMessage, ...props}) {
+interface MyCalendarProps<T extends DateValue> extends CalendarProps<T> {
+  errorMessage?: string
+}
+
+function MyCalendar<T extends DateValue>({errorMessage, ...props}: MyCalendarProps<T>) {
   return (
     <Calendar {...props}>
       <header>
@@ -468,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(null);
+  let [date, setDate] = React.useState<DateValue>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyCalendar aria-label="Date" value={date} onChange={setDate} />
diff --git a/packages/react-aria-components/docs/Checkbox.mdx b/packages/react-aria-components/docs/Checkbox.mdx
index a0a1bd121bf..2aa3e0ebd57 100644
--- a/packages/react-aria-components/docs/Checkbox.mdx
+++ b/packages/react-aria-components/docs/Checkbox.mdx
@@ -260,7 +260,9 @@ If you will use a Checkbox in multiple places in your app, you can wrap all of t
 This example wraps `Checkbox` and all of its children together into a single component. It also shows how to use render props to conditionally render a different indicator icon when the checkbox is in an indeterminate state.
 
 ```tsx example export=true
-function MyCheckbox({children, ...props}) {
+import type {CheckboxProps} from 'react-aria-components';
+
+function MyCheckbox({children, ...props}: CheckboxProps) {
   return (
     <Checkbox {...props}>
       {({isIndeterminate}) => <>
diff --git a/packages/react-aria-components/docs/CheckboxGroup.mdx b/packages/react-aria-components/docs/CheckboxGroup.mdx
index 1830b64e06e..0f17f4a9b53 100644
--- a/packages/react-aria-components/docs/CheckboxGroup.mdx
+++ b/packages/react-aria-components/docs/CheckboxGroup.mdx
@@ -341,15 +341,22 @@ If you will use a CheckboxGroup in multiple places in your app, you can wrap all
 This example wraps `CheckboxGroup` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {CheckboxGroupProps, CheckboxProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
+interface MyCheckboxGroupProps extends CheckboxGroupProps {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
 function MyCheckboxGroup({
   label,
   description,
   errorMessage,
   children,
   ...props
-}) {
+}: MyCheckboxGroupProps) {
   return (
     <CheckboxGroup {...props}>
       {label}
@@ -360,7 +367,7 @@ function MyCheckboxGroup({
   );
 }
 
-function MyCheckbox({children, ...props}) {
+function MyCheckbox({children, ...props}: CheckboxProps) {
   return (
     <Checkbox {...props}>
       <div className="checkbox" aria-hidden="true">
diff --git a/packages/react-aria-components/docs/ComboBox.mdx b/packages/react-aria-components/docs/ComboBox.mdx
index 5fc3b016da9..c3e33c76cc9 100644
--- a/packages/react-aria-components/docs/ComboBox.mdx
+++ b/packages/react-aria-components/docs/ComboBox.mdx
@@ -462,9 +462,17 @@ If you will use a ComboBox in multiple places in your app, you can wrap all of t
 This example wraps `ComboBox` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)). The `Item` component is also wrapped to apply class names based on the current state, as described [above](#styling).
 
 ```tsx example export=true
+import type {ComboBoxProps, ItemProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyComboBox({label, description, errorMessage, children, ...props}) {
+interface MyComboBoxProps<T extends object> extends ComboBoxProps<T> {
+  label?: string,
+  description?: string | null,
+  errorMessage?: string | null,
+  children: React.ReactNode | ((item: T) => React.ReactNode)
+}
+
+function MyComboBox<T extends object>({label, description, errorMessage, children, ...props}: MyComboBoxProps<T>) {
   return (
     <ComboBox {...props}>
       <Label>{label}</Label>
@@ -483,7 +491,7 @@ function MyComboBox({label, description, errorMessage, children, ...props}) {
   );
 }
 
-function MyItem(props) {
+function MyItem(props: ItemProps) {
   return <Item {...props} className={({isFocused, isSelected}) => `my-item ${isFocused ? 'focused' : ''} ${isSelected ? 'selected' : ''}`} />
 }
 
@@ -565,7 +573,7 @@ function Example() {
     {id: 8, name: 'Agricultural'},
     {id: 9, name: 'Electrical'}
   ];
-  let [majorId, setMajorId] = React.useState();
+  let [majorId, setMajorId] = React.useState<React.Key | null>(null);
 
   return (
     <>
@@ -791,7 +799,7 @@ function ControlledComboBox() {
   let onInputChange = (value) => {
     setFieldState(prevState => ({
       inputValue: value,
-      selectedKey: value === '' ? null : prevState.selectedKey,
+      selectedKey: value === '' ? '' : prevState.selectedKey,
       items: optionList.filter(item => startsWith(item.name, value))
     }));
   };
@@ -875,8 +883,12 @@ of a ComboBox supporting those features.
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
 
+interface Character {
+  name: string
+}
+
 function AsyncLoadingExample() {
-  let list = useAsyncList({
+  let list = useAsyncList<Character>({
     async load({signal, filterText}) {
       let res = await fetch(
         `https://swapi.py4e.com/api/people/?search=${filterText}`,
@@ -908,7 +920,7 @@ The `description` slot can be used to associate additional help text with a Comb
 
 ```tsx example
 function Example() {
-  let [animalId, setAnimalId] = React.useState();
+  let [animalId, setAnimalId] = React.useState<React.Key | null>(null);
   let options = [
     { id: 1, name: 'Aardvark' },
     { id: 2, name: 'Cat' },
diff --git a/packages/react-aria-components/docs/DateField.mdx b/packages/react-aria-components/docs/DateField.mdx
index 6f507f81248..a19139b6e96 100644
--- a/packages/react-aria-components/docs/DateField.mdx
+++ b/packages/react-aria-components/docs/DateField.mdx
@@ -308,9 +308,16 @@ If you will use a DateField in multiple places in your app, you can wrap all of
 This example wraps `DateField` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {DateFieldProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyDateField({label, description, errorMessage, ...props}) {
+interface MyDateFieldProps<T extends DateValue> extends DateFieldProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyDateField<T extends DateValue>({label, description, errorMessage, ...props}: MyDateFieldProps<T>) {
   return (
     <DateField {...props}>
       <Label>{label}</Label>
@@ -464,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(null);
+  let [date, setDate] = React.useState<DateValue>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDateField label="Date" value={date} onChange={setDate} />
diff --git a/packages/react-aria-components/docs/DatePicker.mdx b/packages/react-aria-components/docs/DatePicker.mdx
index aa641e96852..01a42066d81 100644
--- a/packages/react-aria-components/docs/DatePicker.mdx
+++ b/packages/react-aria-components/docs/DatePicker.mdx
@@ -664,9 +664,16 @@ If you will use a DatePicker in multiple places in your app, you can wrap all of
 This example wraps `DatePicker` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {DatePickerProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyDatePicker({label, description, errorMessage, ...props}) {
+interface MyDatePickerProps<T extends DateValue> extends DatePickerProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyDatePicker<T extends DateValue>({label, description, errorMessage, ...props}: MyDatePickerProps<T>) {
   return (
     <DatePicker {...props}>
       <Label>{label}</Label>
@@ -838,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(null);
+  let [date, setDate] = React.useState<DateValue>(null);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDatePicker label="Date" value={date} onChange={setDate} />
@@ -909,8 +916,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/DateRangePicker.mdx b/packages/react-aria-components/docs/DateRangePicker.mdx
index c00f2625d7b..e4127068fd1 100644
--- a/packages/react-aria-components/docs/DateRangePicker.mdx
+++ b/packages/react-aria-components/docs/DateRangePicker.mdx
@@ -699,9 +699,16 @@ If you will use a DateRangePicker in multiple places in your app, you can wrap a
 This example wraps `DateRangePicker` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {DateRangePickerProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyDateRangePicker({label, description, errorMessage, ...props}) {
+interface MyDateRangePickerProps<T extends DateValue> extends DateRangePickerProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyDateRangePicker<T extends DateValue>({label, description, errorMessage, ...props}: MyDateRangePickerProps<T>) {
   return (
     <DateRangePicker {...props}>
       <Label>{label}</Label>
@@ -892,10 +899,11 @@ Selected dates passed to `onChange` always use the same calendar system as the `
 The below example displays a `DateRangePicker` 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);
   return (
     <I18nProvider locale="hi-IN-u-ca-indian">
       <MyDateRangePicker label="Date range" value={range} onChange={setRange} />
@@ -933,8 +941,8 @@ Note that by default, users may not select non-contiguous ranges, i.e. ranges th
 This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today. The `validationState` prop is used to mark selected date ranges with unavailable dates in the middle as invalid.
 
 ```tsx example
+import type {DateRange} from 'react-aria-components';
 import {today} from '@internationalized/date';
-import {useLocale} from '@react-aria/i18n';
 
 function Example() {
   let now = today(getLocalTimeZone());
@@ -944,9 +952,8 @@ function Example() {
     [now.add({days: 23}), now.add({days: 24})],
   ];
 
-  let {locale} = useLocale();
   let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
-  let [value, setValue] = React.useState(null);
+  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);
 
   return (
@@ -969,6 +976,7 @@ This example prevents selecting weekends, but allows selecting ranges that span
 
 ```tsx example
 import {isWeekend} from '@internationalized/date';
+import {useLocale} from '@react-aria/i18n';
 
 function Example() {
   let {locale} = useLocale();
diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx
index 98ab56dd627..2159952e3b0 100644
--- a/packages/react-aria-components/docs/GridList.mdx
+++ b/packages/react-aria-components/docs/GridList.mdx
@@ -404,9 +404,10 @@ If you will use a GridList in multiple places in your app, you can wrap all of t
 This example wraps `GridList` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. The `Item` component is also wrapped to include a custom [checkbox](Checkbox.html) component automatically when the item is multi-selectable.
 
 ```tsx example export=true
+import type {GridListProps, ItemProps} from 'react-aria-components';
 import {Checkbox} from 'react-aria-components';
 
-function MyGridList({children, ...props}) {
+function MyGridList<T extends object>({children, ...props}: GridListProps<T>) {
   return (
     <GridList {...props}>
       {children}
@@ -414,7 +415,7 @@ function MyGridList({children, ...props}) {
   );
 }
 
-function MyItem({children, ...props}) {
+function MyItem({children, ...props}: ItemProps) {
   return (
     <Item {...props}>
       {({selectionMode, selectionBehavior}) => <>
@@ -449,7 +450,12 @@ Dynamic collections, as shown below, can be used when the data comes from an ext
 In the example below, the rows are provided to the GridList via a render function.
 
 ```tsx example export=true
-function ExampleList(props) {
+interface ItemValue {
+  id: number,
+  name: string
+}
+
+function ExampleList(props: GridListProps<ItemValue>) {
   let rows = [
     {id: 1, name: 'Games'},
     {id: 2, name: 'Program Files'},
@@ -506,7 +512,9 @@ 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
-function PokemonList(props) {
+import type {Selection} from 'react-aria-components';
+
+function PokemonList(props: GridListProps<ItemValue>) {
   let rows = [
     {id: 1, name: 'Charizard'},
     {id: 2, name: 'Blastoise'},
@@ -514,7 +522,7 @@ function PokemonList(props) {
     {id: 4, name: 'Pikachu'}
   ];
 
-  let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
+  let [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([2]));
 
   return (
     <MyGridList aria-label="List with controlled selection" items={rows} selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
@@ -562,7 +570,7 @@ be triggered via the <Keyboard>Enter</Keyboard> key, and selection using the <Ke
 This behavior is slightly different when `selectionBehavior="replace"`, where single clicking selects the row and actions are performed via double click. Touch and keyboard behaviors are unaffected.
 
 ```tsx example
-<div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: 24 }}>
+<div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
   <ExampleList aria-label="Checkbox selection list with row actions" selectionMode="multiple" selectionBehavior="toggle" onAction={key => alert(`Opening item ${key}...`)} />
   <ExampleList aria-label="Highlight selection list with row actions" selectionMode="multiple" selectionBehavior="replace" onAction={key => alert(`Opening item ${key}...`)} />
 </div>
@@ -575,8 +583,12 @@ This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
 
+interface Character {
+  name: string
+}
+
 function AsyncList() {
-  let list = useAsyncList({
+  let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
diff --git a/packages/react-aria-components/docs/ListBox.mdx b/packages/react-aria-components/docs/ListBox.mdx
index ddbc87d1ab1..5aed35966e1 100644
--- a/packages/react-aria-components/docs/ListBox.mdx
+++ b/packages/react-aria-components/docs/ListBox.mdx
@@ -277,7 +277,9 @@ If you will use a ListBox in multiple places in your app, you can wrap all of th
 This example wraps `ListBox` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. The `Item` component is also wrapped to apply class names based on the current state, as described [above](#styling).
 
 ```tsx example export=true
-function MyListBox({children, ...props}) {
+import type {ListBoxProps, ItemProps} from 'react-aria-components';
+
+function MyListBox<T extends object>({children, ...props}: ListBoxProps<T>) {
   return (
     <ListBox {...props} className="my-listbox">
       {children}
@@ -285,7 +287,7 @@ function MyListBox({children, ...props}) {
   );
 }
 
-function MyItem(props) {
+function MyItem(props: ItemProps) {
   return <Item {...props} className={({isFocusVisible, isSelected}) => `my-item ${isFocusVisible ? 'focused' : ''} ${isSelected ? 'selected' : ''}`} />
 }
 
@@ -396,8 +398,10 @@ Use `defaultSelectedKeys` to provide a default set of selected items (uncontroll
 See the `react-stately` [Selection docs](../react-stately/selection.html) for more details.
 
 ```tsx example
+import type {Selection} from 'react-aria-components';
+
 function Example() {
-  let [selected, setSelected] = React.useState(new Set(['cheese']));
+  let [selected, setSelected] = React.useState<Selection>(new Set(['cheese']));
 
   return (
     <>
@@ -468,6 +472,8 @@ The above example shows sections with static items. Sections can also be populat
 Similarly to the props on ListBox, `<Section>` takes an array of data using the `items` prop.
 
 ```tsx example
+import type {Selection} from 'react-aria-components';
+
 function Example() {
   let options = [
     {name: 'Australian', children: [
@@ -481,7 +487,7 @@ function Example() {
       {id: 8, name: 'Skunk'}
     ]}
   ];
-  let [selected, setSelected] = React.useState(new Set());
+  let [selected, setSelected] = React.useState<Selection>(new Set());
 
   return (
     <ListBox
@@ -489,8 +495,7 @@ function Example() {
       items={options}
       selectedKeys={selected}
       selectionMode="single"
-      onSelectionChange={setSelected}
-      width="size-2400">
+      onSelectionChange={setSelected}>
       {item => (
         <Section id={item.name} items={item.children} title={item.name}>
           {item => <Item>{item.name}</Item>}
@@ -540,8 +545,12 @@ state to the user, or support features like infinite scroll to load more data.
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
 
+interface Character {
+  name: string
+}
+
 function AsyncLoadingExample() {
-  let list = useAsyncList({
+  let list = useAsyncList<Character>({
     async load({signal, filterText}) {
       let res = await fetch(
         `https://pokeapi.co/api/v2/pokemon`,
diff --git a/packages/react-aria-components/docs/Menu.mdx b/packages/react-aria-components/docs/Menu.mdx
index f5affe6b6f7..53189023c03 100644
--- a/packages/react-aria-components/docs/Menu.mdx
+++ b/packages/react-aria-components/docs/Menu.mdx
@@ -456,7 +456,13 @@ If you will use a Menu in multiple places in your app, you can wrap all of the p
 This example wraps `MenuTrigger` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. The `Item` component is also wrapped to apply class names based on the current state, as described [above](#styling).
 
 ```tsx example export=true
-function MyMenuButton({label, children, ...props}) {
+import type {MenuProps, MenuTriggerProps, ItemProps} from 'react-aria-components';
+
+interface MyMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {
+  label?: string
+}
+
+function MyMenuButton<T extends object>({label, children, ...props}: MyMenuButtonProps<T>) {
   return (
     <MenuTrigger {...props}>
       <Button>{label}</Button>
@@ -469,7 +475,7 @@ function MyMenuButton({label, children, ...props}) {
   );
 }
 
-function MyItem(props) {
+function MyItem(props: ItemProps) {
   return <Item {...props} className={({isFocused, isSelected}) => `my-item ${isFocused ? 'focused' : ''}`} />
 }
 
@@ -553,8 +559,10 @@ See the `react-stately` [Selection docs](../react-stately/selection.html#selecte
 #### Single
 
 ```tsx example
+import type {Selection} from 'react-aria-components';
+
 function Example() {
-  let [selected, setSelected] = React.useState(new Set(['center']));
+  let [selected, setSelected] = React.useState<Selection>(new Set(['center']));
 
   return (
     <>
@@ -572,8 +580,10 @@ function Example() {
 #### Multiple
 
 ```tsx example
+import type {Selection} from 'react-aria-components';
+
 function Example() {
-  let [selected, setSelected] = React.useState(new Set(['sidebar', 'console']));
+  let [selected, setSelected] = React.useState<Selection>(new Set(['sidebar', 'console']));
 
   return (
     <>
@@ -637,8 +647,10 @@ The above example shows sections with static items. Sections can also be populat
 Similarly to the props on Menu, `<Section>` takes an array of data using the `items` prop.
 
 ```tsx example
+import type {Selection} from 'react-aria-components';
+
 function Example() {
-  let [selected, setSelected] = React.useState(new Set([1,3]));
+  let [selected, setSelected] = React.useState<Selection>(new Set([1,3]));
   let openWindows = [
     {
       name: 'Left Panel',
diff --git a/packages/react-aria-components/docs/Meter.mdx b/packages/react-aria-components/docs/Meter.mdx
index 7aea8578f33..ddd9b7bf160 100644
--- a/packages/react-aria-components/docs/Meter.mdx
+++ b/packages/react-aria-components/docs/Meter.mdx
@@ -194,7 +194,13 @@ If you will use a Meter in multiple places in your app, you can wrap all of the
 This example wraps `Meter` and all of its children together into a single component which accepts a `label` prop that is passed to the right place.
 
 ```tsx example export=true
-function MyMeter({label, ...props}) {
+import type {MeterProps} from 'react-aria-components';
+
+interface MyMeterProps extends MeterProps {
+  label?: string
+}
+
+function MyMeter({label, ...props}: MyMeterProps) {
   return (
     <Meter {...props}>
       {({percentage, valueText}) => <>
diff --git a/packages/react-aria-components/docs/NumberField.mdx b/packages/react-aria-components/docs/NumberField.mdx
index da2b32e510f..cd7f7ccc880 100644
--- a/packages/react-aria-components/docs/NumberField.mdx
+++ b/packages/react-aria-components/docs/NumberField.mdx
@@ -317,9 +317,16 @@ If you will use a NumberField in multiple places in your app, you can wrap all o
 This example wraps `NumberField` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {NumberFieldProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyNumberField({label, description, errorMessage, ...props}) {
+interface MyNumberFieldProps extends NumberFieldProps {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyNumberField({label, description, errorMessage, ...props}: MyNumberFieldProps) {
   return (
     <NumberField {...props}>
       <Label>{label}</Label>
@@ -513,11 +520,11 @@ The `description` slot can be used to associate additional help text with a numb
 ```tsx example
 function Example() {
   let [value, setValue] = React.useState(1);
-  let isValid = React.useMemo(() => value > 0 || value === NaN, [value]);
+  let isValid = React.useMemo(() => value > 0 || Number.isNaN(value), [value]);
 
   return (
     <MyNumberField
-      validationState={value === NaN ? undefined : (isValid ? 'valid' : 'invalid')}
+      validationState={Number.isNaN(value) ? undefined : (isValid ? 'valid' : 'invalid')}
       value={value}
       onChange={setValue}
       label="Positive numbers only"
diff --git a/packages/react-aria-components/docs/Popover.mdx b/packages/react-aria-components/docs/Popover.mdx
index ce3eb7c76c0..01820681bad 100644
--- a/packages/react-aria-components/docs/Popover.mdx
+++ b/packages/react-aria-components/docs/Popover.mdx
@@ -274,7 +274,9 @@ If you will use a Popover in multiple places in your app, you can wrap all of th
 This example wraps `Popover` and all of its children together into a single component. Since the `Dialog` is built in, this means it can't be used for components like Select, Menu, and ComboBox. Exclude the dialog if your popover will be reused in these components.
 
 ```tsx example export=true
-function MyPopover({children, ...props}) {
+import type {PopoverProps} from 'react-aria-components';
+
+function MyPopover({children, ...props}: PopoverProps) {
   return (
     <Popover {...props}>
       <OverlayArrow>
diff --git a/packages/react-aria-components/docs/ProgressBar.mdx b/packages/react-aria-components/docs/ProgressBar.mdx
index b7095818071..2d99a04bbec 100644
--- a/packages/react-aria-components/docs/ProgressBar.mdx
+++ b/packages/react-aria-components/docs/ProgressBar.mdx
@@ -241,7 +241,13 @@ If you will use a ProgressBar in multiple places in your app, you can wrap all o
 This example wraps `ProgressBar` and all of its children together into a single component which accepts a `label` prop that is passed to the right place.
 
 ```tsx example export=true
-function MyProgressBar({label, ...props}) {
+import type {ProgressBarProps} from 'react-aria-components';
+
+interface MyProgressBarProps extends ProgressBarProps {
+  label?: string
+}
+
+function MyProgressBar({label, ...props}: MyProgressBarProps) {
   return (
     <ProgressBar {...props}>
       {({percentage, valueText}) => <>
diff --git a/packages/react-aria-components/docs/RadioGroup.mdx b/packages/react-aria-components/docs/RadioGroup.mdx
index 547eb0f88a3..88977517c31 100644
--- a/packages/react-aria-components/docs/RadioGroup.mdx
+++ b/packages/react-aria-components/docs/RadioGroup.mdx
@@ -290,15 +290,22 @@ If you will use a RadioGroup in multiple places in your app, you can wrap all of
 This example wraps `RadioGroup` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {RadioGroupProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
+interface MyRadioGroupProps extends RadioGroupProps {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
 function MyRadioGroup({
   label,
   description,
   errorMessage,
   children,
   ...props
-}) {
+}: MyRadioGroupProps) {
   return (
     <RadioGroup {...props}>
       {label}
diff --git a/packages/react-aria-components/docs/RangeCalendar.mdx b/packages/react-aria-components/docs/RangeCalendar.mdx
index 85fd5eb6baf..4f86965c02f 100644
--- a/packages/react-aria-components/docs/RangeCalendar.mdx
+++ b/packages/react-aria-components/docs/RangeCalendar.mdx
@@ -402,9 +402,14 @@ Multiple `CalendarGrid` elements can be rendered to show multiple months at once
 If you will use a RangeCalendar in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
 
 ```tsx example export=true
+import type {RangeCalendarProps, DateValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyRangeCalendar({errorMessage, ...props}) {
+interface MyRangeCalendarProps<T extends DateValue> extends RangeCalendarProps<T> {
+  errorMessage?: string
+}
+
+function MyRangeCalendar<T extends DateValue>({errorMessage, ...props}: MyRangeCalendarProps<T>) {
   return (
     <RangeCalendar {...props}>
       <header>
@@ -536,7 +541,6 @@ This example includes multiple unavailable date ranges, e.g. dates when a rental
 
 ```tsx example
 import {today} from '@internationalized/date';
-import {useLocale} from '@react-aria/i18n';
 
 function Example() {
   let now = today(getLocalTimeZone());
@@ -546,7 +550,6 @@ function Example() {
     [now.add({days: 23}), now.add({days: 24})],
   ];
 
-  let {locale} = useLocale();
   let isDateUnavailable = (date) => disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);
 
   return <MyRangeCalendar aria-label="Trip dates" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
@@ -561,6 +564,7 @@ This example prevents selecting weekends, but allows selecting ranges that span
 
 ```tsx example
 import {isWeekend} from '@internationalized/date';
+import {useLocale} from '@react-aria/i18n';
 
 function Example() {
   let {locale} = useLocale();
diff --git a/packages/react-aria-components/docs/SearchField.mdx b/packages/react-aria-components/docs/SearchField.mdx
index af29763fed7..50294273f9b 100644
--- a/packages/react-aria-components/docs/SearchField.mdx
+++ b/packages/react-aria-components/docs/SearchField.mdx
@@ -328,9 +328,16 @@ If you will use a SearchField in multiple places in your app, you can wrap all o
 This example wraps `SearchField` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#description)).
 
 ```tsx example export=true
+import type {SearchFieldProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MySearchField({label, description, errorMessage, ...props}) {
+interface MySearchFieldProps extends SearchFieldProps {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MySearchField({label, description, errorMessage, ...props}: MySearchFieldProps) {
   return (
     <SearchField {...props}>
       <Label>{label}</Label>
@@ -365,7 +372,7 @@ The `value` prop can be used to make the value controlled. The `onChange` event
 
 ```tsx example
 function Example() {
-  let [text, setText] = React.useState();
+  let [text, setText] = React.useState('');
 
   return (
     <>
diff --git a/packages/react-aria-components/docs/Select.mdx b/packages/react-aria-components/docs/Select.mdx
index bbc2f19fd90..7ab68475885 100644
--- a/packages/react-aria-components/docs/Select.mdx
+++ b/packages/react-aria-components/docs/Select.mdx
@@ -534,9 +534,17 @@ If you will use a Select in multiple places in your app, you can wrap all of the
 This example wraps `Select` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)). The `Item` component is also wrapped to apply class names based on the current state, as described [above](#styling).
 
 ```tsx example export=true
+import type {SelectProps, ItemProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MySelect({label, description, errorMessage, children, ...props}) {
+interface MySelectProps<T extends object> extends SelectProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string,
+  children: React.ReactNode | ((item: T) => React.ReactNode)
+}
+
+function MySelect<T extends object>({label, description, errorMessage, children, ...props}: MySelectProps<T>) {
   return (
     <Select {...props}>
       <Label>{label}</Label>
@@ -555,7 +563,7 @@ function MySelect({label, description, errorMessage, children, ...props}) {
   );
 }
 
-function MyItem(props) {
+function MyItem(props: ItemProps) {
   return <Item {...props} className={({isFocused, isSelected}) => `my-item ${isFocused ? 'focused' : ''} ${isSelected ? 'selected' : ''}`} />
 }
 
@@ -762,7 +770,7 @@ function Example() {
     {name: 'Bison'},
     {name: 'Skunk'}
   ];
-  let [animal, setAnimal] = React.useState("Bison");
+  let [animal, setAnimal] = React.useState<React.Key>("Bison");
 
   return (
     <MySelect
@@ -785,8 +793,12 @@ state to the user, or support features like infinite scroll to load more data.
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
 
+interface Character {
+  name: string
+}
+
 function AsyncLoadingExample() {
-  let list = useAsyncList({
+  let list = useAsyncList<Character>({
     async load({signal, filterText}) {
       let res = await fetch(
         `https://pokeapi.co/api/v2/pokemon`,
@@ -801,7 +813,7 @@ function AsyncLoadingExample() {
   });
 
   return (
-    <MySelect label="Pick a Pokemon" items={list.items} selectionMode="single">
+    <MySelect label="Pick a Pokemon" items={list.items}>
       {(item) => <Item id={item.name}>{item.name}</Item>}
     </MySelect>
   );
@@ -867,7 +879,7 @@ The `description` slot can be used to associate additional help text with a Sele
 
 ```tsx example
 function Example() {
-  let [animalId, setAnimalId] = React.useState();
+  let [animalId, setAnimalId] = React.useState<React.Key | null>(null);
   let options = [
     { id: 1, name: 'Aardvark' },
     { id: 2, name: 'Cat' },
diff --git a/packages/react-aria-components/docs/Slider.mdx b/packages/react-aria-components/docs/Slider.mdx
index 86a1b328c77..17daa67f232 100644
--- a/packages/react-aria-components/docs/Slider.mdx
+++ b/packages/react-aria-components/docs/Slider.mdx
@@ -344,7 +344,14 @@ If you will use a Slider in multiple places in your app, you can wrap all of the
 This example wraps `Slider` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `SliderTrack` and `SliderOutput` render props to render multiple slider thumbs, depending on the provided values. When multiple thumbs are rendered, each `SliderThumb` should have an `aria-label`, which is provided via the `thumbLabels` prop in this example.
 
 ```tsx example export=true
-function MySlider({label, thumbLabels, ...props}) {
+import type {SliderProps} from 'react-aria-components';
+
+interface MySliderProps<T> extends SliderProps<T> {
+  label?: string,
+  thumbLabels?: string[]
+}
+
+function MySlider<T extends number | number[]>({label, thumbLabels, ...props}: MySliderProps<T>) {
   return (
     <Slider {...props}>
       <Label>{label}</Label>
diff --git a/packages/react-aria-components/docs/Switch.mdx b/packages/react-aria-components/docs/Switch.mdx
index 2d42972a906..08d065c8cea 100644
--- a/packages/react-aria-components/docs/Switch.mdx
+++ b/packages/react-aria-components/docs/Switch.mdx
@@ -232,7 +232,9 @@ If you will use a Switch in multiple places in your app, you can wrap all of the
 This example wraps `Switch` and all of its children together into a single component.
 
 ```tsx example export=true
-function MySwitch({children, ...props}) {
+import type {SwitchProps} from 'react-aria-components';
+
+function MySwitch({children, ...props}: SwitchProps) {
   return (
     <Switch {...props}>
       <div className="indicator" />
diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx
index 4f39b104e5f..fcedb04ce5e 100644
--- a/packages/react-aria-components/docs/Table.mdx
+++ b/packages/react-aria-components/docs/Table.mdx
@@ -494,7 +494,9 @@ If you will use a Table in multiple places in your app, you can wrap all of the
 The following example includes a custom Column component with a sort indicator. It displays an upwards facing arrow when the column is sorted in the ascending direction, and a downward facing arrow otherwise.
 
 ```tsx example export=true render=false
-function MyColumn(props) {
+import type {ColumnProps} from 'react-aria-components';
+
+function MyColumn<T extends object>(props: ColumnProps<T>) {
   return (
     <Column {...props}>
       {({allowsSorting, sortDirection}) => <>
@@ -513,9 +515,10 @@ function MyColumn(props) {
 The TableHeader and Row components can also be wrapped to automatically include checkboxes for selection, allowing consumers to avoid repeating them in each row. In this example, the select all checkbox is displayed when [multiple selection](#multiple-selection) is enabled and the [selection behavior](#selection-behavior) is "toggle". These options can be retrieved from the table using the <TypeLink links={docs.links} type={docs.exports.useTableOptions} /> hook. We also use the <TypeLink links={docs.links} type={docs.exports.Collection} /> component to generate children from either static or [dynamic collections](#dynamic-collections) the same way as the default TableHeader and Row components.
 
 ```tsx example export=true render=false
+import type {TableHeaderProps, RowProps} from 'react-aria-components';
 import {Checkbox, Collection, useTableOptions} from 'react-aria-components';
 
-function MyTableHeader({columns, children}) {
+function MyTableHeader<T extends object>({columns, children}: TableHeaderProps<T>) {
   let {selectionBehavior, selectionMode} = useTableOptions();
 
   return (
@@ -528,7 +531,7 @@ function MyTableHeader({columns, children}) {
   );
 }
 
-function MyRow({id, columns, children}) {
+function MyRow<T extends object>({id, columns, children}: RowProps<T>) {
   let {selectionBehavior} = useTableOptions();
 
   return (
@@ -741,7 +744,7 @@ and a long press enters into selection mode, which temporarily swaps the selecti
 and reverts the selection behavior back to `"replace"`. Keyboard behaviors are unaffected.
 
 ```tsx example
-<div style={{display: 'flex', 'flex-wrap': 'wrap', gap: '24px'}}>
+<div style={{display: 'flex', flexWrap: 'wrap', gap: '24px'}}>
   <PokemonTable
     aria-label="Pokemon table with row actions and toggle selection behavior"
     ///- begin highlight -///
@@ -773,8 +776,15 @@ See the docs for more information on how to perform server side sorting.
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
 
+interface Character {
+  name: string,
+  height: number,
+  mass: number,
+  birth_year: number
+}
+
 function AsyncSortTable() {
-  let list = useAsyncList({
+  let list = useAsyncList<Character>({
     async load({signal}) {
       let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {signal});
       let json = await res.json();
@@ -878,7 +888,14 @@ Nested columns can also be defined dynamically using the function syntax and the
 The following example is the same as the example above, but defined dynamically.
 
 ```tsx example
-let columns = [
+interface ColumnDefinition {
+  name: string,
+  key: string,
+  children?: ColumnDefinition[],
+  isRowHeader?: boolean
+}
+
+let columns: ColumnDefinition[] = [
   {name: 'Name', key: 'name', children: [
     {name: 'First Name', key: 'first', isRowHeader: true},
     {name: 'Last Name', key: 'last', isRowHeader: true}
diff --git a/packages/react-aria-components/docs/Tabs.mdx b/packages/react-aria-components/docs/Tabs.mdx
index 15d2e39cacb..caef64fe128 100644
--- a/packages/react-aria-components/docs/Tabs.mdx
+++ b/packages/react-aria-components/docs/Tabs.mdx
@@ -303,8 +303,8 @@ When `Tabs` is used with dynamic items as described below, the key of each item
 See the `react-stately` [Selection docs](../react-stately/selection.html) for more details.
 
 ```tsx example
-<Tabs defaultSelectedKey="keyboard">
-  <TabList aria-label="Input settings">
+<Tabs>
+  <TabList aria-label="Input settings" defaultSelectedKey="keyboard">
     <Tab id="mouse">Mouse Settings</Tab>
     <Tab id="keyboard">Keyboard Settings</Tab>
     <Tab id="gamepad">Gamepad Settings</Tab>
@@ -323,13 +323,13 @@ Selection can be controlled using the `selectedKey` prop, paired with the `onSel
 
 ```tsx example
 function Example() {
-  let [timePeriod, setTimePeriod] = React.useState('triassic');
+  let [timePeriod, setTimePeriod] = React.useState<React.Key>('triassic');
 
   return (
     <>
       <p>Selected time period: {timePeriod}</p>
-      <Tabs selectedKey={timePeriod} onSelectionChange={setTimePeriod}>
-        <TabList aria-label="Mesozoic time periods">
+      <Tabs>
+        <TabList aria-label="Mesozoic time periods" selectedKey={timePeriod} onSelectionChange={setTimePeriod}>
           <Tab id="triassic">Triassic</Tab>
           <Tab id="jurassic">Jurassic</Tab>
           <Tab id="cretaceous">Cretaceous</Tab>
diff --git a/packages/react-aria-components/docs/TextField.mdx b/packages/react-aria-components/docs/TextField.mdx
index db760eb4378..772329bed63 100644
--- a/packages/react-aria-components/docs/TextField.mdx
+++ b/packages/react-aria-components/docs/TextField.mdx
@@ -239,9 +239,16 @@ If you will use a TextField in multiple places in your app, you can wrap all of
 This example wraps `TextField` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#description)).
 
 ```tsx example export=true
+import type {TextFieldProps} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyTextField({label, description, errorMessage, ...props}) {
+interface MyTextFieldProps extends TextFieldProps {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyTextField({label, description, errorMessage, ...props}: MyTextFieldProps) {
   return (
     <TextField {...props}>
       <Label>{label}</Label>
@@ -275,7 +282,7 @@ The `value` prop can be used to make the value controlled. The `onChange` event
 
 ```tsx example
 function Example() {
-  let [text, setText] = React.useState();
+  let [text, setText] = React.useState('');
 
   return (
     <>
diff --git a/packages/react-aria-components/docs/TimeField.mdx b/packages/react-aria-components/docs/TimeField.mdx
index e8ad35a1d9e..65bf6190c8e 100644
--- a/packages/react-aria-components/docs/TimeField.mdx
+++ b/packages/react-aria-components/docs/TimeField.mdx
@@ -301,9 +301,16 @@ If you will use a TimeField in multiple places in your app, you can wrap all of
 This example wraps `TimeField` and all of its children together into a single component which accepts a `label` prop, which is passed to the right place. It also shows how to use the `description` and `errorMessage` slots to render help text ([see below for details](#help-text)).
 
 ```tsx example export=true
+import type {TimeFieldProps, TimeValue} from 'react-aria-components';
 import {Text} from 'react-aria-components';
 
-function MyTimeField({label, description, errorMessage, ...props}) {
+interface MyTimeFieldProps<T extends TimeValue> extends TimeFieldProps<T> {
+  label?: string,
+  description?: string,
+  errorMessage?: string
+}
+
+function MyTimeField<T extends TimeValue>({label, description, errorMessage, ...props}: MyTimeFieldProps<T>) {
   return (
     <TimeField {...props}>
       <Label>{label}</Label>
@@ -387,7 +394,6 @@ import {parseAbsoluteToLocal} from '@internationalized/date';
 `TimeField` accepts an `onChange` prop which is triggered whenever the time is edited by the user. The example below uses `onChange` to update a separate element with a formatted version of the date in the user's locale and local time zone. This is done by converting the date to a native JavaScript `Date` object to pass to the formatter. `TimeField` allows editing the time components while keeping the date fixed.
 
 ```tsx example
-import {getLocalTimeZone} from '@internationalized/date';
 import {useDateFormatter} from '@react-aria/i18n';
 
 function Example() {
@@ -397,7 +403,7 @@ function Example() {
   return (
     <>
       <MyTimeField label="Time" value={date} onChange={setDate} />
-      <p>Selected date and time: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
+      <p>Selected date and time: {formatter.format(date.toDate())}</p>
     </>
   );
 }
diff --git a/packages/react-aria-components/docs/Tooltip.mdx b/packages/react-aria-components/docs/Tooltip.mdx
index af5f5751376..2fc7c9bd3a9 100644
--- a/packages/react-aria-components/docs/Tooltip.mdx
+++ b/packages/react-aria-components/docs/Tooltip.mdx
@@ -289,7 +289,9 @@ If you will use a Tooltip in multiple places in your app, you can wrap all of th
 This example wraps `Tooltip` and all of its children together into a single component.
 
 ```tsx example export=true
-function MyTooltip({children, ...props}) {
+import type {TooltipProps} from 'react-aria-components';
+
+function MyTooltip({children, ...props}: TooltipProps) {
   return (
     <Tooltip {...props}>
       <OverlayArrow>
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
index 031ca956ff6..f49647de882 100644
--- a/packages/react-aria-components/src/Calendar.tsx
+++ b/packages/react-aria-components/src/Calendar.tsx
@@ -9,8 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {CalendarProps as BaseCalendarProps, mergeProps, useCalendar, useCalendarCell, useCalendarGrid, useFocusRing, useHover, useLocale, useRangeCalendar, VisuallyHidden} from 'react-aria';
-import {RangeCalendarProps as BaseRangeCalendarProps, DateValue} from '@react-types/calendar';
+import {CalendarProps as BaseCalendarProps, RangeCalendarProps as BaseRangeCalendarProps, DateValue, mergeProps, useCalendar, useCalendarCell, useCalendarGrid, useFocusRing, useHover, useLocale, useRangeCalendar, VisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CalendarDate, createCalendar, DateDuration, endOfMonth, getWeeksInMonth, isSameDay, isSameMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index f35283b5f5e..6144353feb7 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -676,7 +676,9 @@ export interface ItemRenderProps {
   selectionBehavior: SelectionBehavior
 }
 
-export interface ItemProps<T> extends Omit<SharedItemProps<T>, 'children'>, RenderProps<ItemRenderProps> {}
+export interface ItemProps<T = object> extends Omit<SharedItemProps<T>, 'children'>, RenderProps<ItemRenderProps> {
+  id?: Key
+}
 
 export function Item<T extends object>(props: ItemProps<T>): JSX.Element {
   // HACK: the `multiple` prop is special in that React will pass it through as a property rather
@@ -688,7 +690,11 @@ export function Item<T extends object>(props: ItemProps<T>): JSX.Element {
   return <item multiple={{...props, rendered: props.children}} />;
 }
 
-export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children'>, DOMProps {}
+export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children'>, DOMProps {
+  id?: Key,
+  /** Static child items or a function to render children. */
+  children?: ReactNode | ((item: T) => ReactElement)
+}
 
 export function Section<T extends object>(props: SectionProps<T>): JSX.Element {
   let children = useCachedChildren(props);
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index a5b8c443489..e979bc4fd58 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -9,11 +9,10 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaDateFieldProps, AriaTimeFieldProps, useDateField, useDateSegment, useLocale, useTimeField} from 'react-aria';
+import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, TimeValue, useDateField, useDateSegment, useLocale, useTimeField} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, useDateFieldState, useTimeFieldState} from 'react-stately';
-import {DateValue, TimeValue} from '@react-types/datepicker';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {LabelContext} from './Label';
 import React, {cloneElement, createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactElement, useContext, useRef} from 'react';
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index bcf090ef329..3c7c328f271 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -9,14 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaDatePickerProps, AriaDateRangePickerProps, useDateField, useDatePicker, useDateRangePicker, useLocale} from 'react-aria';
+import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDateField, useDatePicker, useDateRangePicker, useLocale} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CalendarContext, RangeCalendarContext} from './Calendar';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createCalendar} from '@internationalized/date';
 import {DateInputContext} from './DateField';
 import {DatePickerState, DateRangePickerState, useDateFieldState, useDatePickerState, useDateRangePickerState} from 'react-stately';
-import {DateValue} from '@react-types/datepicker';
 import {DialogContext} from './Dialog';
 import {GroupContext} from './Group';
 import {LabelContext} from './Label';
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 5968d7e4031..81df2aa6a6b 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -23,7 +23,12 @@ export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
 }
 
+interface DialogRenderProps {
+  close: () => void
+}
+
 export interface DialogProps extends AriaDialogProps, DOMProps, SlotProps {
+  children: ReactNode | ((opts: DialogRenderProps) => ReactNode),
   onClose?: () => void
 }
 
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index 9b8e4ae5973..503a051ba60 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -15,11 +15,14 @@ import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Co
 import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {ListState, useListState} from 'react-stately';
-import {Node} from '@react-types/shared';
+import {Node, SelectionBehavior} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {TextContext} from './Text';
 
-export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps {}
+export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps {
+  /** How multiple selection should behave in the collection. */
+  selectionBehavior?: SelectionBehavior
+}
 
 export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLUListElement>>(null);
 const InternalGridListContext = createContext<ListState<unknown>>(null);
@@ -92,6 +95,7 @@ function GridListItem({item}) {
   let props: ItemProps<unknown> = item.props;
   let renderProps = useRenderProps({
     ...props,
+    id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-Item',
     values: {
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 6a0cc68e145..5e097b3dc5c 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -176,6 +176,7 @@ function Option<T>({item}: OptionProps<T>) {
   let focusVisible = states.isFocused && isFocusVisible();
   let renderProps = useRenderProps({
     ...props,
+    id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-Item',
     values: {
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 40c13284c4d..0db18ce7389 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -183,6 +183,7 @@ function MenuItem<T>({item}: MenuItemProps<T>) {
   let focusVisible = states.isFocused && isFocusVisible();
   let renderProps = useRenderProps({
     ...props,
+    id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-Item',
     values: {
diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
index bae56abfb7e..cbeecd771fb 100644
--- a/packages/react-aria-components/src/SearchField.tsx
+++ b/packages/react-aria-components/src/SearchField.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTextFieldProps, useSearchField} from 'react-aria';
+import {AriaSearchFieldProps, useSearchField} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {InputContext} from './Input';
@@ -19,7 +19,7 @@ import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {SearchFieldState, useSearchFieldState} from 'react-stately';
 import {TextContext} from './Text';
 
-export interface SearchFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage'>, RenderProps<SearchFieldState>, SlotProps {}
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage'>, RenderProps<SearchFieldState>, SlotProps {}
 
 export interface SearchFieldRenderProps {
   /**
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index 23827cb2472..67dc0c4f748 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -13,12 +13,12 @@
 import {AriaSelectProps} from '@react-types/select';
 import {ButtonContext} from './Button';
 import {ContextValue, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useCallback, useContext, useRef, useState} from 'react';
+import {createContext, ForwardedRef, HTMLAttributes, ReactNode, useCallback, useContext, useRef, useState} from 'react';
 import {HiddenSelect, useSelect} from 'react-aria';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListBoxProps} from './ListBox';
 import {PopoverContext} from './Popover';
-import React from 'react';
+import React, {forwardRef} from 'react';
 import {SelectState, useSelectState} from 'react-stately';
 import {TextContext} from './Text';
 import {useCollection} from './Collection';
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index c0577fbf374..2501ebc68f0 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -19,7 +19,7 @@ import {mergeRefs} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, OutputHTMLAttributes, RefObject, useContext, useRef} from 'react';
 import {SliderState, useSliderState} from 'react-stately';
 
-export interface SliderProps extends AriaSliderProps, RenderProps<SliderState>, SlotProps {
+export interface SliderProps<T = number | number[]> extends AriaSliderProps<T>, RenderProps<SliderState>, SlotProps {
   /**
    * The display format of the value label.
    */
@@ -49,7 +49,7 @@ export interface SliderRenderProps {
   isDisabled: boolean
 }
 
-function Slider(props: SliderProps, ref: ForwardedRef<HTMLDivElement>) {
+function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderContext);
   let trackRef = useRef(null);
   let numberFormatter = useNumberFormatter(props.formatOptions);
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index a00e44245d7..c999f1f72e3 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -7,7 +7,7 @@ import {GridNode} from '@react-types/grid';
 import {TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
 import {mergeProps, useFocusRing, useHover, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from 'react-aria';
 import {Provider, RenderProps, SlotProps, StyleProps, useRenderProps} from './utils';
-import React, {createContext, Key, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react';
+import React, {createContext, forwardRef, Key, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react';
 import {TableState, useTableState} from 'react-stately';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
@@ -165,11 +165,7 @@ export interface TableProps<T> extends Omit<SharedTableProps<T>, 'children'>, Co
   onCellAction?: (key: Key) => void
 }
 
-/**
- * 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.
- */
-export function Table<T extends object>(props: TableProps<T>) {
+function Table<T extends object>(props: TableProps<T>) {
   let initialCollection = useMemo(() => new TableCollection<T>(), []);
   let {portal, collection} = useCollection(props, initialCollection);
   let state = useTableState({
@@ -239,6 +235,13 @@ export function Table<T extends object>(props: TableProps<T>) {
   );
 }
 
+/**
+ * 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(Table);
+export {_Table as Table};
+
 export interface TableOptionsContextValue {
   /** The type of selection that is allowed in the collection. */
   selectionMode: SelectionMode,
@@ -305,7 +308,7 @@ export interface ColumnRenderProps {
   sortDirection: SortDirection | null
 }
 
-export interface ColumnProps<T> extends RenderProps<ColumnRenderProps> {
+export interface ColumnProps<T = object> extends RenderProps<ColumnRenderProps> {
   id?: Key,
   /** Rendered contents of the column if `children` contains child columns. */
   title?: ReactNode,
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index 704d406635c..37b705b920f 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -83,3 +83,6 @@ export type {TextFieldProps} from './TextField';
 export type {TextProps} from './Text';
 export type {ToggleButtonProps, ToggleButtonRenderProps} from './ToggleButton';
 export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} from './Tooltip';
+
+export type {DateValue, DateRange, TimeValue} from 'react-aria';
+export type {Selection} from 'react-stately';
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index c6b67a2dae2..fe7cba89547 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -14,6 +14,13 @@ import {AriaLabelingProps, DOMProps as SharedDOMProps} from '@react-types/shared
 import {filterDOMProps, mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import React, {CSSProperties, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react';
 
+// Override forwardRef types so generics work.
+declare module 'react' {
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+
 export const slotCallbackSymbol = Symbol('callback');
 
 interface SlottedValue<T> {
diff --git a/packages/react-aria/src/index.ts b/packages/react-aria/src/index.ts
index 441b9e8d363..bbba9019659 100644
--- a/packages/react-aria/src/index.ts
+++ b/packages/react-aria/src/index.ts
@@ -50,7 +50,7 @@ export type {AriaButtonProps, AriaToggleButtonProps, ButtonAria} from '@react-ar
 export type {AriaCalendarCellProps, AriaCalendarGridProps, AriaCalendarProps, AriaRangeCalendarProps, CalendarAria, CalendarCellAria, CalendarGridAria, CalendarProps, RangeCalendarProps} from '@react-aria/calendar';
 export type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps, CheckboxAria, CheckboxGroupAria} from '@react-aria/checkbox';
 export type {AriaComboBoxOptions, ComboBoxAria} from '@react-aria/combobox';
-export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, AriaTimeFieldProps, DateFieldAria, DatePickerAria, DateRangePickerAria, DateSegmentAria} from '@react-aria/datepicker';
+export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, AriaTimeFieldProps, DateFieldAria, DatePickerAria, DateRangePickerAria, DateSegmentAria, DateRange, DateValue, TimeValue} from '@react-aria/datepicker';
 export type {AriaDialogProps, DialogAria} from '@react-aria/dialog';
 export type {AriaFocusRingProps, FocusableAria, FocusableOptions, FocusManager, FocusManagerOptions, FocusRingAria, FocusRingProps, FocusScopeProps} from '@react-aria/focus';
 export type {DateFormatter, DateFormatterOptions, Filter, FormatMessage, I18nProviderProps, Locale, LocalizedStrings} from '@react-aria/i18n';
diff --git a/scripts/extractExamples.mjs b/scripts/extractExamples.mjs
index 04dcf6261f9..7defd4906de 100644
--- a/scripts/extractExamples.mjs
+++ b/scripts/extractExamples.mjs
@@ -25,7 +25,7 @@ try {
 } catch (err) {}
 fs.mkdirSync(distDir, {recursive: true});
 
-for (let file of glob.sync('packages/@react-{spectrum,aria,stately}/*/docs/*.mdx')) {
+for (let file of glob.sync('packages/{@react-{spectrum,aria,stately}/*,react-aria-components}/docs/*.mdx')) {
   console.log(`Extracting ${file}...`);
   let contents = fs.readFileSync(file);
   let ast = unified().use(remarkParse).use(remarkMdx).parse(contents);

From 7b2749e34f2fc8e32cbc33411f47c55fa6a6a0cb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 15 Mar 2023 12:23:02 -0700
Subject: [PATCH 2/6] Fixes

---
 .../react-aria-components/docs/Slider.mdx     |  6 +--
 packages/react-aria-components/src/Dialog.tsx | 42 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/react-aria-components/docs/Slider.mdx b/packages/react-aria-components/docs/Slider.mdx
index 17daa67f232..5545035d549 100644
--- a/packages/react-aria-components/docs/Slider.mdx
+++ b/packages/react-aria-components/docs/Slider.mdx
@@ -396,7 +396,7 @@ function Example() {
   let [value, setValue] = React.useState(25);
   return (
     <>
-      <MySlider
+      <MySlider<number>
         label="Cookies to buy"
         value={value}
         onChange={setValue} />
@@ -413,7 +413,7 @@ function Example() {
   let [value, setValue] = React.useState([25, 75]);
   return (
     <>
-      <MySlider
+      <MySlider<number[]>
         label="Range"
         thumbLabels={['start', 'end']}
         value={value}
@@ -433,7 +433,7 @@ function Example() {
   let [value, setValue] = React.useState(25);
   return (
     <>
-      <MySlider
+      <MySlider<number>
         label="Cookies to buy"
         defaultValue={value}
         onChangeEnd={setValue} />
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 81df2aa6a6b..92928d85104 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -9,15 +9,15 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaDialogProps, useDialog, useOverlayTrigger} from 'react-aria';
-import {ButtonContext} from './Button';
-import {ContextValue, DOMProps, Provider, SlotProps, useContextProps} from './utils';
-import {filterDOMProps} from '@react-aria/utils';
-import {HeadingContext} from './Heading';
-import {ModalContext} from './Modal';
-import {OverlayTriggerProps, useOverlayTriggerState} from 'react-stately';
-import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
+import { AriaDialogProps, useDialog, useOverlayTrigger } from 'react-aria';
+import { ButtonContext } from './Button';
+import { ContextValue, DOMProps, Provider, SlotProps, useContextProps } from './utils';
+import { filterDOMProps } from '@react-aria/utils';
+import { HeadingContext } from './Heading';
+import { ModalContext } from './Modal';
+import { OverlayTriggerProps, useOverlayTriggerState } from 'react-stately';
+import { PopoverContext } from './Popover';
+import React, { createContext, ForwardedRef, forwardRef, ReactNode, useRef } from 'react';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
@@ -28,7 +28,7 @@ interface DialogRenderProps {
 }
 
 export interface DialogProps extends AriaDialogProps, DOMProps, SlotProps {
-  children: ReactNode | ((opts: DialogRenderProps) => ReactNode),
+  children?: ReactNode | ((opts: DialogRenderProps) => ReactNode),
   onClose?: () => void
 }
 
@@ -39,17 +39,17 @@ export const DialogContext = createContext<ContextValue<DialogProps, HTMLElement
  */
 export function DialogTrigger(props: DialogTriggerProps) {
   let state = useOverlayTriggerState(props);
-  
+
   let buttonRef = useRef();
-  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
+  let { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, buttonRef);
 
   return (
     <Provider
       values={[
-        [ModalContext, {state}],
-        [DialogContext, {...overlayProps, onClose: state.close}],
-        [ButtonContext, {...triggerProps, isPressed: state.isOpen, ref: buttonRef}],
-        [PopoverContext, {state, triggerRef: buttonRef}]
+        [ModalContext, { state }],
+        [DialogContext, { ...overlayProps, onClose: state.close }],
+        [ButtonContext, { ...triggerProps, isPressed: state.isOpen, ref: buttonRef }],
+        [PopoverContext, { state, triggerRef: buttonRef }]
       ]}>
       {props.children}
     </Provider>
@@ -59,15 +59,15 @@ export function DialogTrigger(props: DialogTriggerProps) {
 
 function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, DialogContext);
-  let {dialogProps, titleProps} = useDialog(props, ref);
-  
+  let { dialogProps, titleProps } = useDialog(props, ref);
+
   let children = props.children;
   if (typeof children === 'function') {
     children = children({
       close: props.onClose
     });
   }
-  
+
   return (
     <section
       {...filterDOMProps(props)}
@@ -80,7 +80,7 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
         values={[
           [ButtonContext, undefined],
           // TODO: clear context within dialog content?
-          [HeadingContext, {...titleProps, level: 2}]
+          [HeadingContext, { ...titleProps, level: 2 }]
         ]}>
         {children}
       </Provider>
@@ -92,4 +92,4 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
  * A dialog is an overlay shown above other content in an application.
  */
 const _Dialog = forwardRef(Dialog);
-export {_Dialog as Dialog};
+export { _Dialog as Dialog };

From 7c27582665eeb4056f2aed6d3896a4d25d171c9f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 15 Mar 2023 13:27:01 -0700
Subject: [PATCH 3/6] Move more types into react-aria and react-stately
 monopackages

---
 packages/@react-aria/combobox/src/index.ts          |  3 ++-
 packages/@react-aria/overlays/src/index.ts          |  1 +
 packages/@react-aria/radio/src/index.ts             |  1 +
 packages/@react-aria/select/src/index.ts            |  3 ++-
 packages/@react-aria/slider/src/index.ts            |  2 ++
 packages/@react-aria/tabs/src/index.ts              |  1 +
 packages/@react-stately/table/src/index.ts          |  2 +-
 packages/react-aria-components/package.json         |  9 ---------
 packages/react-aria-components/src/Checkbox.tsx     |  7 +++----
 packages/react-aria-components/src/Collection.tsx   |  3 ++-
 packages/react-aria-components/src/GridList.tsx     |  3 +--
 packages/react-aria-components/src/ListBox.tsx      |  6 ++----
 packages/react-aria-components/src/Menu.tsx         |  6 ++----
 packages/react-aria-components/src/OverlayArrow.tsx |  4 ++--
 packages/react-aria-components/src/Popover.tsx      |  9 ++++-----
 packages/react-aria-components/src/RadioGroup.tsx   |  7 +++----
 packages/react-aria-components/src/Select.tsx       |  3 +--
 packages/react-aria-components/src/Slider.tsx       |  5 ++---
 packages/react-aria-components/src/Table.tsx        |  5 ++---
 packages/react-aria-components/src/Tabs.tsx         | 12 ++++++------
 packages/react-aria-components/src/Tooltip.tsx      | 13 ++++++-------
 packages/react-aria/package.json                    |  3 ++-
 packages/react-aria/src/index.ts                    |  9 +++++----
 packages/react-stately/src/index.ts                 |  2 +-
 24 files changed, 54 insertions(+), 65 deletions(-)

diff --git a/packages/@react-aria/combobox/src/index.ts b/packages/@react-aria/combobox/src/index.ts
index 275f3440e52..8e24d45b144 100644
--- a/packages/@react-aria/combobox/src/index.ts
+++ b/packages/@react-aria/combobox/src/index.ts
@@ -3,7 +3,7 @@
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
@@ -11,3 +11,4 @@
  */
 export {useComboBox} from './useComboBox';
 export type {AriaComboBoxOptions, ComboBoxAria} from './useComboBox';
+export type {AriaComboBoxProps} from '@react-types/combobox';
diff --git a/packages/@react-aria/overlays/src/index.ts b/packages/@react-aria/overlays/src/index.ts
index 104779c26e4..50031c0ec0d 100644
--- a/packages/@react-aria/overlays/src/index.ts
+++ b/packages/@react-aria/overlays/src/index.ts
@@ -28,3 +28,4 @@ export type {DismissButtonProps} from './DismissButton';
 export type {AriaPopoverProps, PopoverAria} from './usePopover';
 export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';
 export type {OverlayProps} from './Overlay';
+export type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
diff --git a/packages/@react-aria/radio/src/index.ts b/packages/@react-aria/radio/src/index.ts
index 683dae47fd4..1b82ecdef0f 100644
--- a/packages/@react-aria/radio/src/index.ts
+++ b/packages/@react-aria/radio/src/index.ts
@@ -12,5 +12,6 @@
 export {useRadio} from './useRadio';
 export {useRadioGroup} from './useRadioGroup';
 export type {AriaRadioGroupProps, AriaRadioProps} from '@react-types/radio';
+export type {Orientation} from '@react-types/shared';
 export type {RadioAria} from './useRadio';
 export type {RadioGroupAria} from './useRadioGroup';
diff --git a/packages/@react-aria/select/src/index.ts b/packages/@react-aria/select/src/index.ts
index 2f225662f28..3b130c526af 100644
--- a/packages/@react-aria/select/src/index.ts
+++ b/packages/@react-aria/select/src/index.ts
@@ -3,7 +3,7 @@
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software distributed under
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
@@ -13,3 +13,4 @@ export {useSelect} from './useSelect';
 export {useHiddenSelect, HiddenSelect} from './HiddenSelect';
 export type {AriaSelectOptions, SelectAria} from './useSelect';
 export type {AriaHiddenSelectProps, HiddenSelectProps} from './HiddenSelect';
+export type {AriaSelectProps} from '@react-types/select';
diff --git a/packages/@react-aria/slider/src/index.ts b/packages/@react-aria/slider/src/index.ts
index 72d00861dcb..b4d966cd3f4 100644
--- a/packages/@react-aria/slider/src/index.ts
+++ b/packages/@react-aria/slider/src/index.ts
@@ -14,3 +14,5 @@ export {useSliderThumb} from './useSliderThumb';
 export type {AriaSliderProps} from '@react-types/slider';
 export type {SliderAria} from './useSlider';
 export type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb';
+export type {AriaSliderThumbProps} from '@react-types/slider';
+export type {Orientation} from '@react-types/shared';
diff --git a/packages/@react-aria/tabs/src/index.ts b/packages/@react-aria/tabs/src/index.ts
index e43baa620ba..6a75ea01d1a 100644
--- a/packages/@react-aria/tabs/src/index.ts
+++ b/packages/@react-aria/tabs/src/index.ts
@@ -13,6 +13,7 @@ export {useTab} from './useTab';
 export {useTabPanel} from './useTabPanel';
 export {useTabList} from './useTabList';
 export type {AriaTabListProps, AriaTabPanelProps, AriaTabProps} from '@react-types/tabs';
+export type {Orientation} from '@react-types/shared';
 export type {TabAria} from './useTab';
 export type {TabPanelAria} from './useTabPanel';
 export type {TabListAria} from './useTabList';
diff --git a/packages/@react-stately/table/src/index.ts b/packages/@react-stately/table/src/index.ts
index 34ba6e512e3..e16c277a54c 100644
--- a/packages/@react-stately/table/src/index.ts
+++ b/packages/@react-stately/table/src/index.ts
@@ -22,5 +22,5 @@ export {Column} from './Column';
 export {Row} from './Row';
 export {Cell} from './Cell';
 export {Section} from '@react-stately/collections';
-export {TableCollection} from './TableCollection';
+export {TableCollection, buildHeaderRows} from './TableCollection';
 export {TableColumnLayout} from './TableColumnLayout';
diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json
index 3aff2d63d08..57dd7be66e4 100644
--- a/packages/react-aria-components/package.json
+++ b/packages/react-aria-components/package.json
@@ -19,19 +19,10 @@
     "@internationalized/date": "^3.0.0",
     "@react-aria/focus": "^3.6.1",
     "@react-aria/interactions": "^3.10.0",
-    "@react-aria/selection": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-stately/table": "^3.4.0",
-    "@react-types/calendar": "^3.0.0",
-    "@react-types/combobox": "^3.5.1",
-    "@react-types/datepicker": "^3.0.0",
     "@react-types/grid": "^3.1.3",
-    "@react-types/listbox": "^3.3.1",
-    "@react-types/menu": "^3.6.1",
-    "@react-types/overlays": "^3.6.1",
-    "@react-types/select": "^3.6.1",
     "@react-types/shared": "^3.13.1",
-    "@react-types/slider": "^3.2.0",
     "@react-types/table": "^3.3.1",
     "react-aria": "^3.17.0",
     "react-stately": "^3.15.0",
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index fe6f4b3178e..ae2a51ab591 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -10,12 +10,11 @@
  * governing permissions and limitations under the License.
  */
 import {AriaCheckboxGroupProps, AriaCheckboxProps, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, usePress, VisuallyHidden} from 'react-aria';
-import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately';
+import {CheckboxGroupState, useCheckboxGroupState, useToggleState, ValidationState} from 'react-stately';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useState} from 'react';
 import {TextContext} from './Text';
-import {ValidationState} from '@react-types/shared';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage'>, RenderProps<CheckboxGroupRenderProps>, SlotProps {}
 export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children'>, RenderProps<CheckboxRenderProps>, SlotProps {}
@@ -120,7 +119,7 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivEleme
   });
 
   return (
-    <div 
+    <div
       {...groupProps}
       {...renderProps}
       ref={ref}
@@ -206,7 +205,7 @@ function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLInputElement>) {
   });
 
   return (
-    <label 
+    <label
       {...mergeProps(pressProps, hoverProps, renderProps)}
       slot={props.slot}
       data-selected={isSelected || undefined}
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index 6144353feb7..5526ef17f48 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -9,9 +9,10 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {CollectionBase, Collection as ICollection, Node, SelectionBehavior, SelectionMode, ItemProps as SharedItemProps, SectionProps as SharedSectionProps} from '@react-types/shared';
+import {CollectionBase} from '@react-types/shared';
 import {createPortal} from 'react-dom';
 import {DOMProps, RenderProps, useContextProps} 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 {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index 503a051ba60..de157586696 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -14,8 +14,7 @@ import {CheckboxContext} from './Checkbox';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
-import {ListState, useListState} from 'react-stately';
-import {Node, SelectionBehavior} from '@react-types/shared';
+import {ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {TextContext} from './Text';
 
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 5e097b3dc5c..33c279b9d4a 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -10,14 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaListBoxOptions, mergeProps, useHover, useListBox, useListBoxSection, useOption} from 'react-aria';
-import {AriaListBoxProps} from '@react-types/listbox';
+import {AriaListBoxOptions, AriaListBoxProps, mergeProps, useHover, useListBox, useListBoxSection, useOption} from 'react-aria';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {isFocusVisible} from '@react-aria/interactions';
-import {ListState, OverlayTriggerState, useListState} from 'react-stately';
-import {Node, SelectionBehavior} from '@react-types/shared';
+import {ListState, Node, OverlayTriggerState, SelectionBehavior, useListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext, useRef} from 'react';
 import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 0db18ce7389..9bc9660a28f 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -11,20 +11,18 @@
  */
 
 
-import {AriaMenuProps, MenuTriggerProps as BaseMenuTriggerProps} from '@react-types/menu';
+import {AriaMenuProps, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
 import {BaseCollection, CollectionProps, ItemProps, ItemRenderProps, useCachedChildren, useCollection} from './Collection';
+import {MenuTriggerProps as BaseMenuTriggerProps, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
 import {ButtonContext} from './Button';
 import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {isFocusVisible} from '@react-aria/interactions';
 import {KeyboardContext} from './Keyboard';
-import {Node} from '@react-types/shared';
 import {PopoverContext} from './Popover';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {Separator, SeparatorContext} from './Separator';
 import {TextContext} from './Text';
-import {TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
-import {useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
 const InternalMenuContext = createContext<TreeState<unknown>>(null);
diff --git a/packages/react-aria-components/src/OverlayArrow.tsx b/packages/react-aria-components/src/OverlayArrow.tsx
index c3d0869454b..4cc25b08543 100644
--- a/packages/react-aria-components/src/OverlayArrow.tsx
+++ b/packages/react-aria-components/src/OverlayArrow.tsx
@@ -11,7 +11,7 @@
  */
 
 import {mergeProps} from '@react-aria/utils';
-import {PlacementAxis} from '@react-types/overlays';
+import {PlacementAxis} from 'react-aria';
 import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
 
@@ -48,7 +48,7 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
       placement
     }
   });
-  
+
   return (
     <div
       {...mergeProps(arrowProps, props)}
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 3643a59f1c6..526fb7e2860 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -10,18 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaPopoverProps, DismissButton, Overlay, usePopover} from 'react-aria';
+import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, usePopover} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerState} from 'react-stately';
-import {PlacementAxis, PositionProps} from '@react-types/overlays';
 import React, {createContext, ForwardedRef, forwardRef, ReactElement, RefObject} from 'react';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>, RenderProps<PopoverRenderProps>, SlotProps {
   /**
    * The ref for the element which the popover positions itself with respect to.
-   * 
-   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., 
+   *
+   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,
    * this is set automatically. It is only required when used standalone.
    */
   triggerRef?: RefObject<Element>
@@ -62,7 +61,7 @@ function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   }
 
   return (
-    <PopoverInner 
+    <PopoverInner
       {...props}
       triggerRef={props.triggerRef}
       state={state}
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index 97a63f15cb1..a06582327d8 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -10,12 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaRadioGroupProps, AriaRadioProps, useFocusRing, useHover, usePress, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
+import {AriaRadioGroupProps, AriaRadioProps, Orientation, useFocusRing, useHover, usePress, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {LabelContext} from './Label';
 import {mergeProps, useObjectRef} from '@react-aria/utils';
-import {Orientation, ValidationState} from '@react-types/shared';
-import {RadioGroupState, useRadioGroupState} from 'react-stately';
+import {RadioGroupState, useRadioGroupState, ValidationState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
 import {TextContext} from './Text';
 
@@ -95,7 +94,7 @@ export interface RadioRenderProps {
     * Whether the checkbox is required.
     * @selector [data-required]
     */
-   isRequired: boolean 
+   isRequired: boolean
 }
 
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index 67dc0c4f748..a84d6eceead 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -10,11 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSelectProps} from '@react-types/select';
+import {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createContext, ForwardedRef, HTMLAttributes, ReactNode, useCallback, useContext, useRef, useState} from 'react';
-import {HiddenSelect, useSelect} from 'react-aria';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListBoxProps} from './ListBox';
 import {PopoverContext} from './Popover';
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index 2501ebc68f0..0e0d4c03437 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -10,10 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSliderProps, mergeProps, useFocusRing, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
-import {AriaSliderThumbProps} from '@react-types/slider';
+import {AriaSliderProps, AriaSliderThumbProps, mergeProps, Orientation, useFocusRing, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {DOMAttributes, Orientation} from '@react-types/shared';
+import {DOMAttributes} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {mergeRefs} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, OutputHTMLAttributes, RefObject, useContext, useRef} from 'react';
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index c999f1f72e3..755e5dcb093 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1,14 +1,13 @@
 import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection} from './Collection';
-import {buildHeaderRows} from '@react-stately/table/src/TableCollection';
+import {buildHeaderRows} from '@react-stately/table';
 import {CheckboxContext} from './Checkbox';
-import {DisabledBehavior, Node, SelectionBehavior, SelectionMode, SortDirection} from '@react-types/shared';
+import {DisabledBehavior, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
 import {mergeProps, useFocusRing, useHover, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from 'react-aria';
 import {Provider, RenderProps, SlotProps, StyleProps, useRenderProps} from './utils';
 import React, {createContext, forwardRef, Key, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react';
-import {TableState, useTableState} from 'react-stately';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
   headerRows: GridNode<T>[] = [];
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 02e1d232490..fd2bf4a90e3 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, Node, Orientation} from '@react-types/shared';
-import {AriaTabListProps, AriaTabPanelProps, mergeProps, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
+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, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {Node, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, Key, useContext, useEffect, useState} from 'react';
 import {useObjectRef} from '@react-aria/utils';
-import {useTabListState} from 'react-stately';
 
 export interface TabsProps extends RenderProps<TabsRenderProps>, SlotProps {
   /**
@@ -112,7 +112,7 @@ function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   });
 
   return (
-    <div 
+    <div
       {...renderProps}
       ref={ref}
       slot={props.slot}
@@ -215,7 +215,7 @@ function TabInner({item, state}) {
   });
 
   return (
-    <div 
+    <div
       {...mergeProps(tabProps, focusProps, hoverProps, renderProps)}
       ref={ref}
       data-focus-visible={isFocusVisible || undefined}
@@ -267,7 +267,7 @@ function SelectedTabPanel({item}: {item: Node<object>}) {
   });
 
   return (
-    <div 
+    <div
       {...mergeProps(tabPanelProps, focusProps, renderProps)}
       ref={ref}
       data-focus-visible={isFocusVisible || undefined} />
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
index baf9fa36dc0..64b416c0fc0 100644
--- a/packages/react-aria-components/src/Tooltip.tsx
+++ b/packages/react-aria-components/src/Tooltip.tsx
@@ -12,10 +12,9 @@
 
 import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';
 import {FocusableProvider} from '@react-aria/focus';
-import {mergeProps, OverlayContainer, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';
+import {mergeProps, OverlayContainer, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';
 import {mergeRefs, useObjectRef} from '@react-aria/utils';
 import {OverlayArrowContext} from './OverlayArrow';
-import {PlacementAxis, PositionProps} from '@react-types/overlays';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {RenderProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
 import {TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
@@ -61,7 +60,7 @@ export function TooltipTrigger(props: TooltipTriggerComponentProps) {
   let state = useTooltipTriggerState(props);
   let ref = useRef();
   let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);
-    
+
   return (
     <InternalTooltipContext.Provider value={{state, triggerRef: ref, tooltipProps}}>
       <FocusableProvider {...triggerProps} ref={ref}>
@@ -78,7 +77,7 @@ function Tooltip(props: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
   if (!state.isOpen && !isExiting) {
     return null;
   }
-  
+
   return (
     <OverlayContainer>
       <TooltipInner {...props} tooltipRef={objectRef} isExiting={isExiting} />
@@ -115,12 +114,12 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: For
       isExiting: props.isExiting
     }
   });
-  
+
   props = mergeProps(props, overlayProps);
   let {tooltipProps} = useTooltip(props, state);
-    
+
   return (
-    <div 
+    <div
       {...mergeProps(triggerTooltipProps, tooltipProps)}
       ref={mergeRefs(overlayRef, props.tooltipRef)}
       {...renderProps}
diff --git a/packages/react-aria/package.json b/packages/react-aria/package.json
index 5ccccfae94b..2a0713a04af 100644
--- a/packages/react-aria/package.json
+++ b/packages/react-aria/package.json
@@ -57,7 +57,8 @@
     "@react-aria/textfield": "^3.9.0",
     "@react-aria/tooltip": "^3.4.0",
     "@react-aria/utils": "^3.15.0",
-    "@react-aria/visually-hidden": "^3.7.0"
+    "@react-aria/visually-hidden": "^3.7.0",
+    "@react-types/shared": "^3.17.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
diff --git a/packages/react-aria/src/index.ts b/packages/react-aria/src/index.ts
index bbba9019659..5fe5db9864f 100644
--- a/packages/react-aria/src/index.ts
+++ b/packages/react-aria/src/index.ts
@@ -49,7 +49,7 @@ export type {AriaBreadcrumbItemProps, AriaBreadcrumbsProps, BreadcrumbItemAria,
 export type {AriaButtonProps, AriaToggleButtonProps, ButtonAria} from '@react-aria/button';
 export type {AriaCalendarCellProps, AriaCalendarGridProps, AriaCalendarProps, AriaRangeCalendarProps, CalendarAria, CalendarCellAria, CalendarGridAria, CalendarProps, RangeCalendarProps} from '@react-aria/calendar';
 export type {AriaCheckboxGroupItemProps, AriaCheckboxGroupProps, AriaCheckboxProps, CheckboxAria, CheckboxGroupAria} from '@react-aria/checkbox';
-export type {AriaComboBoxOptions, ComboBoxAria} from '@react-aria/combobox';
+export type {AriaComboBoxOptions, AriaComboBoxProps, ComboBoxAria} from '@react-aria/combobox';
 export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, AriaTimeFieldProps, DateFieldAria, DatePickerAria, DateRangePickerAria, DateSegmentAria, DateRange, DateValue, TimeValue} from '@react-aria/datepicker';
 export type {AriaDialogProps, DialogAria} from '@react-aria/dialog';
 export type {AriaFocusRingProps, FocusableAria, FocusableOptions, FocusManager, FocusManagerOptions, FocusRingAria, FocusRingProps, FocusScopeProps} from '@react-aria/focus';
@@ -63,17 +63,18 @@ export type {AriaGridListOptions, AriaGridListProps, GridListAria, AriaGridListI
 export type {AriaMenuProps, AriaMenuItemProps, AriaMenuOptions, AriaMenuSectionProps, AriaMenuTriggerProps, MenuAria, MenuItemAria, MenuSectionAria, MenuTriggerAria} from '@react-aria/menu';
 export type {AriaMeterProps, MeterAria} from '@react-aria/meter';
 export type {AriaNumberFieldProps, NumberFieldAria} from '@react-aria/numberfield';
-export type {AriaModalOptions, AriaModalOverlayProps, AriaOverlayProps, AriaPopoverProps, AriaPositionProps, DismissButtonProps, ModalAria, ModalOverlayAria, ModalProviderAria, ModalProviderProps, OverlayAria, OverlayContainerProps, OverlayProps, OverlayTriggerAria, OverlayTriggerProps, PopoverAria, PositionAria} from '@react-aria/overlays';
+export type {AriaModalOptions, AriaModalOverlayProps, AriaOverlayProps, AriaPopoverProps, AriaPositionProps, DismissButtonProps, ModalAria, ModalOverlayAria, ModalProviderAria, ModalProviderProps, OverlayAria, OverlayContainerProps, OverlayProps, OverlayTriggerAria, OverlayTriggerProps, PopoverAria, PositionAria, Placement, PlacementAxis, PositionProps} from '@react-aria/overlays';
 export type {AriaProgressBarProps, ProgressBarAria} from '@react-aria/progress';
 export type {AriaRadioGroupProps, AriaRadioProps, RadioAria, RadioGroupAria} from '@react-aria/radio';
 export type {AriaSearchFieldProps, SearchFieldAria} from '@react-aria/searchfield';
-export type {AriaHiddenSelectProps, AriaSelectOptions, HiddenSelectProps, SelectAria} from '@react-aria/select';
+export type {AriaHiddenSelectProps, AriaSelectProps, AriaSelectOptions, HiddenSelectProps, SelectAria} from '@react-aria/select';
 export type {SeparatorAria, SeparatorProps} from '@react-aria/separator';
 export type {SSRProviderProps} from '@react-aria/ssr';
-export type {AriaSliderProps, AriaSliderThumbOptions, SliderAria, SliderThumbAria} from '@react-aria/slider';
+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 {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';
+export type {Orientation} from '@react-types/shared';
diff --git a/packages/react-stately/src/index.ts b/packages/react-stately/src/index.ts
index 99f5b5b13e5..e242ed2c082 100644
--- a/packages/react-stately/src/index.ts
+++ b/packages/react-stately/src/index.ts
@@ -30,7 +30,7 @@ export type {TabListProps, TabListState} from '@react-stately/tabs';
 export type {ToggleProps, ToggleState} from '@react-stately/toggle';
 export type {TooltipTriggerProps, TooltipTriggerState} from '@react-stately/tooltip';
 export type {TreeProps, TreeState} from '@react-stately/tree';
-export type {ItemProps, SectionProps, Selection} from '@react-types/shared';
+export type {ItemProps, SectionProps, Collection, Node, Orientation, DisabledBehavior, Selection, SelectionBehavior, SelectionMode, SortDirection, ValidationState} from '@react-types/shared';
 
 export {useCalendarState, useRangeCalendarState} from '@react-stately/calendar';
 export {useCheckboxGroupState} from '@react-stately/checkbox';

From 98adf1a0d88e673f4013c203d986c0de5c0277a7 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 15 Mar 2023 15:17:10 -0700
Subject: [PATCH 4/6] Better solution to forwardRef with generics

---
 .../DocsTransformer.js                        | 17 +++++++---
 .../react-aria-components/src/Breadcrumbs.tsx |  4 +--
 .../react-aria-components/src/Calendar.tsx    |  6 ++--
 .../react-aria-components/src/ComboBox.tsx    |  4 +--
 .../react-aria-components/src/DateField.tsx   |  4 +--
 .../react-aria-components/src/DatePicker.tsx  |  6 ++--
 packages/react-aria-components/src/Dialog.tsx | 34 +++++++++----------
 .../react-aria-components/src/GridList.tsx    |  4 +--
 .../react-aria-components/src/ListBox.tsx     |  4 +--
 packages/react-aria-components/src/Menu.tsx   |  4 +--
 packages/react-aria-components/src/Select.tsx |  4 +--
 packages/react-aria-components/src/Slider.tsx |  4 +--
 packages/react-aria-components/src/Table.tsx  | 11 +++---
 packages/react-aria-components/src/Tabs.tsx   |  4 +--
 packages/react-aria-components/src/index.ts   |  2 +-
 packages/react-aria-components/src/utils.tsx  | 10 +++---
 16 files changed, 65 insertions(+), 57 deletions(-)

diff --git a/packages/dev/parcel-transformer-docs/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js
index 976f4942cc8..f538a8d7610 100644
--- a/packages/dev/parcel-transformer-docs/DocsTransformer.js
+++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js
@@ -649,12 +649,19 @@ module.exports = new Transformer({
         return false;
       }
 
-      if (!t.isMemberExpression(path.node.callee)) {
-        return path.get('callee').referencesImport(module, name);
+      let callee = path.node.callee;
+      let calleePath = path.get('callee');
+      if (t.isTSAsExpression(callee)) {
+        callee = callee.expression;
+        calleePath = calleePath.get('expression');
       }
 
-      if (path.get('callee.object').referencesImport(module, 'default')) {
-        return t.isIdentifier(path.node.callee.property, {name});
+      if (!t.isMemberExpression(callee)) {
+        return calleePath.referencesImport(module, name);
+      }
+
+      if (calleePath.get('object').referencesImport(module, 'default')) {
+        return t.isIdentifier(callee.property, {name});
       }
 
       return false;
@@ -664,7 +671,7 @@ module.exports = new Transformer({
       if (path.isFunction()) {
         if (
           path.node.returnType &&
-          t.isTSTypeReference(path.node.returnType.typeAnnotation) && 
+          t.isTSTypeReference(path.node.returnType.typeAnnotation) &&
           t.isTSQualifiedName(path.node.returnType.typeAnnotation.typeName) &&
           t.isIdentifier(path.node.returnType.typeAnnotation.typeName.left, {name: 'JSX'}) &&
           t.isIdentifier(path.node.returnType.typeAnnotation.typeName.right, {name: 'Element'})
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index 0fa8ade9ef1..bb374562126 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -11,7 +11,7 @@
  */
 import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
 import {CollectionProps, useCollection} from './Collection';
-import {ContextValue, Provider, SlotProps, StyleProps, useContextProps} from './utils';
+import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './Heading';
 import {LinkContext} from './Link';
@@ -55,7 +55,7 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: Forwarde
 /**
  * Breadcrumbs display a heirarchy of links to the current page or resource in an application.
  */
-const _Breadcrumbs = forwardRef(Breadcrumbs);
+const _Breadcrumbs = (forwardRef as forwardRefType)(Breadcrumbs);
 export {_Breadcrumbs as Breadcrumbs};
 
 function BreadcrumbItem({node, isCurrent, isDisabled}) {
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
index f49647de882..5adce19c31f 100644
--- a/packages/react-aria-components/src/Calendar.tsx
+++ b/packages/react-aria-components/src/Calendar.tsx
@@ -13,7 +13,7 @@ import {CalendarProps as BaseCalendarProps, RangeCalendarProps as BaseRangeCalen
 import {ButtonContext} from './Button';
 import {CalendarDate, createCalendar, DateDuration, endOfMonth, getWeeksInMonth, isSameDay, isSameMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
-import {ContextValue, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {createContext, ForwardedRef, forwardRef, ReactElement, useContext} from 'react';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {HeadingContext} from './Heading';
@@ -103,7 +103,7 @@ function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRe
 /**
  * A calendar displays one or more date grids and allows users to select a single date.
  */
-const _Calendar = forwardRef(Calendar);
+const _Calendar = (forwardRef as forwardRefType)(Calendar);
 export {_Calendar as Calendar};
 
 function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
@@ -172,7 +172,7 @@ function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: F
 /**
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
-const _RangeCalendar = forwardRef(RangeCalendar);
+const _RangeCalendar = (forwardRef as forwardRefType)(RangeCalendar);
 export {_RangeCalendar as RangeCalendar};
 
 export interface CalendarCellRenderProps {
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index eb340b5e38c..9a08b8fa1ee 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -12,7 +12,7 @@
 import {AriaComboBoxProps} from '@react-types/combobox';
 import {ButtonContext} from './Button';
 import {ComboBoxState, useComboBoxState} from 'react-stately';
-import {ContextValue, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListBoxProps} from './ListBox';
@@ -126,5 +126,5 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
 /**
  * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
  */
-const _ComboBox = forwardRef(ComboBox);
+const _ComboBox = (forwardRef as forwardRefType)(ComboBox);
 export {_ComboBox as ComboBox};
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index e979bc4fd58..b85c0d3a4a3 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, TimeValue, useDateField, useDateSegment, useLocale, useTimeField} from 'react-aria';
-import {ContextValue, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, useDateFieldState, useTimeFieldState} from 'react-stately';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
@@ -72,7 +72,7 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
  * 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.
  */
-const _DateField = forwardRef(DateField);
+const _DateField = (forwardRef as forwardRefType)(DateField);
 export {_DateField as DateField};
 
 function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 3c7c328f271..5b768dfcbf7 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -12,7 +12,7 @@
 import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDateField, useDatePicker, useDateRangePicker, useLocale} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CalendarContext, RangeCalendarContext} from './Calendar';
-import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createCalendar} from '@internationalized/date';
 import {DateInputContext} from './DateField';
 import {DatePickerState, DateRangePickerState, useDateFieldState, useDatePickerState, useDateRangePickerState} from 'react-stately';
@@ -88,7 +88,7 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  */
-const _DatePicker = forwardRef(DatePicker);
+const _DatePicker = (forwardRef as forwardRefType)(DatePicker);
 export {_DatePicker as DatePicker};
 
 function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
@@ -174,5 +174,5 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
  */
-const _DateRangePicker = forwardRef(DateRangePicker);
+const _DateRangePicker = (forwardRef as forwardRefType)(DateRangePicker);
 export {_DateRangePicker as DateRangePicker};
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 92928d85104..579bd1f8a14 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -9,15 +9,15 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { AriaDialogProps, useDialog, useOverlayTrigger } from 'react-aria';
-import { ButtonContext } from './Button';
-import { ContextValue, DOMProps, Provider, SlotProps, useContextProps } from './utils';
-import { filterDOMProps } from '@react-aria/utils';
-import { HeadingContext } from './Heading';
-import { ModalContext } from './Modal';
-import { OverlayTriggerProps, useOverlayTriggerState } from 'react-stately';
-import { PopoverContext } from './Popover';
-import React, { createContext, ForwardedRef, forwardRef, ReactNode, useRef } from 'react';
+import {AriaDialogProps, useDialog, useOverlayTrigger} from 'react-aria';
+import {ButtonContext} from './Button';
+import {ContextValue, DOMProps, Provider, SlotProps, useContextProps} from './utils';
+import {filterDOMProps} from '@react-aria/utils';
+import {HeadingContext} from './Heading';
+import {ModalContext} from './Modal';
+import {OverlayTriggerProps, useOverlayTriggerState} from 'react-stately';
+import {PopoverContext} from './Popover';
+import React, {createContext, ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
   children: ReactNode
@@ -41,15 +41,15 @@ export function DialogTrigger(props: DialogTriggerProps) {
   let state = useOverlayTriggerState(props);
 
   let buttonRef = useRef();
-  let { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, buttonRef);
+  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);
 
   return (
     <Provider
       values={[
-        [ModalContext, { state }],
-        [DialogContext, { ...overlayProps, onClose: state.close }],
-        [ButtonContext, { ...triggerProps, isPressed: state.isOpen, ref: buttonRef }],
-        [PopoverContext, { state, triggerRef: buttonRef }]
+        [ModalContext, {state}],
+        [DialogContext, {...overlayProps, onClose: state.close}],
+        [ButtonContext, {...triggerProps, isPressed: state.isOpen, ref: buttonRef}],
+        [PopoverContext, {state, triggerRef: buttonRef}]
       ]}>
       {props.children}
     </Provider>
@@ -59,7 +59,7 @@ export function DialogTrigger(props: DialogTriggerProps) {
 
 function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, DialogContext);
-  let { dialogProps, titleProps } = useDialog(props, ref);
+  let {dialogProps, titleProps} = useDialog(props, ref);
 
   let children = props.children;
   if (typeof children === 'function') {
@@ -80,7 +80,7 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
         values={[
           [ButtonContext, undefined],
           // TODO: clear context within dialog content?
-          [HeadingContext, { ...titleProps, level: 2 }]
+          [HeadingContext, {...titleProps, level: 2}]
         ]}>
         {children}
       </Provider>
@@ -92,4 +92,4 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
  * A dialog is an overlay shown above other content in an application.
  */
 const _Dialog = forwardRef(Dialog);
-export { _Dialog as Dialog };
+export {_Dialog as Dialog};
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index de157586696..70c3a25cc4d 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -12,7 +12,7 @@
 import {AriaGridListProps, mergeProps, useFocusRing, useGridList, useGridListItem, useGridListSelectionCheckbox, useHover} from 'react-aria';
 import {CheckboxContext} from './Checkbox';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
-import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
@@ -69,7 +69,7 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
  * A grid list displays a list of interactive items, with support for keyboard navigation,
  * single or multiple selection, and row actions.
  */
-const _GridList = forwardRef(GridList);
+const _GridList = (forwardRef as forwardRefType)(GridList);
 export {_GridList as GridList};
 
 function GridListItem({item}) {
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 33c279b9d4a..be0e03a6440 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -12,7 +12,7 @@
 
 import {AriaListBoxOptions, AriaListBoxProps, mergeProps, useHover, useListBox, useListBoxSection, useOption} from 'react-aria';
 import {CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
-import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {isFocusVisible} from '@react-aria/interactions';
 import {ListState, Node, OverlayTriggerState, SelectionBehavior, useListState} from 'react-stately';
@@ -63,7 +63,7 @@ function ListBoxPortal({props, listBoxRef}) {
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
  */
-const _ListBox = forwardRef(ListBox);
+const _ListBox = (forwardRef as forwardRefType)(ListBox);
 export {_ListBox as ListBox};
 
 interface ListBoxInnerProps<T> {
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 9bc9660a28f..abce9ea23d2 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -15,7 +15,7 @@ import {AriaMenuProps, useMenu, useMenuItem, useMenuSection, useMenuTrigger} fro
 import {BaseCollection, CollectionProps, ItemProps, ItemRenderProps, useCachedChildren, useCollection} from './Collection';
 import {MenuTriggerProps as BaseMenuTriggerProps, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
 import {ButtonContext} from './Button';
-import {ContextValue, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {isFocusVisible} from '@react-aria/interactions';
 import {KeyboardContext} from './Keyboard';
@@ -119,7 +119,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
 /**
  * A menu displays a list of actions or options that a user can choose.
  */
-const _Menu = forwardRef(Menu);
+const _Menu = (forwardRef as forwardRefType)(Menu);
 export {_Menu as Menu};
 
 interface MenuSectionProps<T> extends StyleProps {
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index a84d6eceead..111aa48b92c 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -12,7 +12,7 @@
 
 import {AriaSelectProps, HiddenSelect, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
-import {ContextValue, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {createContext, ForwardedRef, HTMLAttributes, ReactNode, useCallback, useContext, useRef, useState} from 'react';
 import {LabelContext} from './Label';
 import {ListBoxContext, ListBoxProps} from './ListBox';
@@ -115,7 +115,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
 /**
  * A select displays a collapsible list of options and allows a user to select one of them.
  */
-const _Select = forwardRef(Select);
+const _Select = (forwardRef as forwardRefType)(Select);
 export {_Select as Select};
 
 export interface SelectValueRenderProps {
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index 0e0d4c03437..ea33d4d1be1 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -11,7 +11,7 @@
  */
 
 import {AriaSliderProps, AriaSliderThumbProps, mergeProps, Orientation, useFocusRing, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
-import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DOMAttributes} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {mergeRefs} from '@react-aria/utils';
@@ -87,7 +87,7 @@ function Slider<T extends number | number[]>(props: SliderProps<T>, ref: Forward
 /**
  * A slider allows a user to select one or more values within a range.
  */
-const _Slider = forwardRef(Slider);
+const _Slider = (forwardRef as forwardRefType)(Slider);
 export {_Slider as Slider};
 
 export interface SliderOutputProps extends RenderProps<SliderState> {}
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 755e5dcb093..912b75bb0ff 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1,4 +1,5 @@
 import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection} from './Collection';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {buildHeaderRows} from '@react-stately/table';
 import {CheckboxContext} from './Checkbox';
 import {DisabledBehavior, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableState} from 'react-stately';
@@ -6,8 +7,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
 import {mergeProps, useFocusRing, useHover, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from 'react-aria';
-import {Provider, RenderProps, SlotProps, StyleProps, useRenderProps} from './utils';
-import React, {createContext, forwardRef, Key, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, Key, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
   headerRows: GridNode<T>[] = [];
@@ -145,6 +145,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
   }
 }
 
+export const TableContext = createContext<ContextValue<TableProps<any>, HTMLTableElement>>(null);
 const InternalTableContext = createContext<TableState<unknown>>(null);
 
 export interface TableProps<T> extends Omit<SharedTableProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps {
@@ -164,7 +165,8 @@ export interface TableProps<T> extends Omit<SharedTableProps<T>, 'children'>, Co
   onCellAction?: (key: Key) => void
 }
 
-function Table<T extends object>(props: TableProps<T>) {
+function Table<T extends object>(props: TableProps<T>, ref: ForwardedRef<HTMLTableElement>) {
+  [props, ref] = useContextProps(props, ref, TableContext);
   let initialCollection = useMemo(() => new TableCollection<T>(), []);
   let {portal, collection} = useCollection(props, initialCollection);
   let state = useTableState({
@@ -173,7 +175,6 @@ function Table<T extends object>(props: TableProps<T>) {
     children: null
   });
 
-  let ref = useRef();
   let {gridProps} = useTable(props, state, ref);
 
   let headerRows = useCachedChildren({
@@ -238,7 +239,7 @@ function Table<T extends object>(props: TableProps<T>) {
  * 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(Table);
+const _Table = (forwardRef as forwardRefType)(Table);
 export {_Table as Table};
 
 export interface TableOptionsContextValue {
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index fd2bf4a90e3..bf04abeafce 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -13,7 +13,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, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {Node, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, Key, useContext, useEffect, useState} from 'react';
 import {useObjectRef} from '@react-aria/utils';
@@ -180,7 +180,7 @@ function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTM
  * A TabList is used within Tabs to group tabs that a user can switch between.
  * The ids of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
  */
-const _TabList = forwardRef(TabList);
+const _TabList = (forwardRef as forwardRefType)(TabList);
 export {_TabList as TabList};
 
 /**
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index 37b705b920f..2c506bd0044 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -41,7 +41,7 @@ export {Select, SelectValue, SelectContext} from './Select';
 export {Separator, SeparatorContext} from './Separator';
 export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext} from './Slider';
 export {Switch, SwitchContext} from './Switch';
-export {Table, Row, Cell, Column, TableHeader, TableBody, useTableOptions} from './Table';
+export {Table, Row, Cell, Column, TableHeader, TableBody, TableContext, useTableOptions} from './Table';
 export {Tabs, TabList, TabPanels, TabPanel, Tab, TabsContext} from './Tabs';
 export {Text, TextContext} from './Text';
 export {TextField, TextFieldContext} from './TextField';
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index fe7cba89547..a090c2ccf7f 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -15,11 +15,11 @@ import {filterDOMProps, mergeProps, mergeRefs, useLayoutEffect, useObjectRef} fr
 import React, {CSSProperties, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react';
 
 // Override forwardRef types so generics work.
-declare module 'react' {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
+declare function forwardRef<T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
+): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+export type forwardRefType = typeof forwardRef;
 
 export const slotCallbackSymbol = Symbol('callback');
 

From e1eb5dfd5c9dc838567b27356c46aa9844cc1acd Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 15 Mar 2023 15:23:07 -0700
Subject: [PATCH 5/6] lint

---
 packages/react-aria-components/src/ComboBox.tsx | 3 +--
 packages/react-aria-components/src/Table.tsx    | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index 9a08b8fa1ee..c9b7eb1d628 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.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 {AriaComboBoxProps} from '@react-types/combobox';
+import {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ComboBoxState, useComboBoxState} from 'react-stately';
 import {ContextValue, forwardRefType, Provider, RenderProps, slotCallbackSymbol, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
@@ -20,7 +20,6 @@ import {PopoverContext} from './Popover';
 import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
 import {TextContext} from './Text';
 import {useCollection} from './Collection';
-import {useComboBox, useFilter} from 'react-aria';
 import {useResizeObserver} from '@react-aria/utils';
 
 export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'name' | 'label' | 'description' | 'errorMessage'>, RenderProps<ComboBoxState<T>>, SlotProps {
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 912b75bb0ff..7b37beb12f6 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1,6 +1,6 @@
 import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection} from './Collection';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {buildHeaderRows} from '@react-stately/table';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {CheckboxContext} from './Checkbox';
 import {DisabledBehavior, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';

From 3a860d3fb6319536859106531522e43d0b6dee99 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 15 Mar 2023 15:31:50 -0700
Subject: [PATCH 6/6] ok maybe this time

---
 packages/react-aria-components/src/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 7b37beb12f6..a2058d41f7a 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1,7 +1,7 @@
 import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection} from './Collection';
 import {buildHeaderRows} from '@react-stately/table';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {CheckboxContext} from './Checkbox';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';