docs: Type check examples

Makefile

@@ -124,7 +124,7 @@ website-production:
 	mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip
 
 check-examples:
-	node scripts/extractExamples.mjs
+	node scripts/extractExamplesS2.mjs
 	yarn tsc --project dist/docs-examples/tsconfig.json
 
 starter:

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

@@ -21,6 +21,7 @@ import {
   Provider
 } from 'react-aria-components';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared';
+import {forwardRefType} from './types';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from '../src/Icon';
 import {pressScale} from './pressScale';
@@ -33,7 +34,7 @@ export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
-  children: ReactNode,
+  children: ReactNode | ((item: T) => ReactNode),
   /**
    * The layout direction of the content in each SelectBox.
    * @default 'vertical'
@@ -384,7 +385,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 /**
  * SelectBoxGroup allows users to select one or more options from a list.
  */
-export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const SelectBoxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
 
   let {

packages/@react-spectrum/s2/src/TableView.tsx

@@ -58,7 +58,7 @@ import Chevron from '../ui-icons/Chevron';
 import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg';
 import {ColumnSize} from '@react-types/table';
 import {CustomDialog, DialogContainer} from '..';
-import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared';
 import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
@@ -1446,7 +1446,7 @@ const row = style<RowRenderProps & S2TableProps>({
   forcedColorAdjust: 'none'
 });
 
-export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>  {}
+export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'isDisabled' | 'onAction' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>, LinkDOMProps {}
 
 /**
  * A row within a `<Table>`.

packages/dev/s2-docs/pages/WelcomeHeader.tsx

@@ -1,5 +1,6 @@
 import {ProductCard, Content, Footer, Text, LinkButton} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+// @ts-ignore
 import {TAB_DEFS} from '../src/constants';
 // @ts-ignore
 import url from 'url:../assets/wallpaper_collaborative_S2_desktop.webp';

packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx

@@ -1081,7 +1081,6 @@ function AsyncLoadingExample() {
   return (
     <Autocomplete
       /*- begin highlight -*/
-      filter={null}
       inputValue={list.filterText}
       onInputChange={list.setFilterText}>
       {/*- end highlight -*/}

packages/dev/s2-docs/pages/react-aria/ColorField.mdx

@@ -42,11 +42,11 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to
 ```tsx render
 "use client";
 import {ColorField} from 'vanilla-starter/ColorField';
-import {parseColor} from 'react-aria-components';
+import {parseColor, type Color} from 'react-aria-components';
 import {useState} from 'react';
 
 function Example() {
-  let [value, setValue] = useState(parseColor('#e73623'));
+  let [value, setValue] = useState<Color | null>(parseColor('#e73623'));
 
   return (
     <div>
@@ -68,11 +68,11 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel`
 ```tsx render
 "use client";
 import {ColorField} from 'vanilla-starter/ColorField';
-import {parseColor} from 'react-aria-components';
+import {parseColor, type Color} from 'react-aria-components';
 import {useState} from 'react';
 
 function Example() {
-  let [color, setColor] = useState(parseColor('#7f007f'));
+  let [color, setColor] = useState<Color | null>(parseColor('#7f007f'));
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -109,7 +109,7 @@ Use the `name` prop to submit the text value to the server. Set the `isRequired`
 
 ```tsx render
 "use client";
-import {ColorField, Button, Form} from 'vanilla-starter/ColorField';
+import {ColorField} from 'vanilla-starter/ColorField';
 import {Button} from 'vanilla-starter/Button';
 import {Form} from 'vanilla-starter/Form';
 

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -113,12 +113,12 @@ Use the `defaultSelectedKey` or `selectedKey` prop to set the selected item. The
 
 ```tsx render
 "use client";
-import type {Key} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {useState} from 'react';
+import type {Key} from 'react-aria-components';
 
 function Example() {
-  let [animal, setAnimal] = useState<Key>("bison");
+  let [animal, setAnimal] = useState<Key | null>("bison");
 
   return (
     <div>
@@ -148,12 +148,11 @@ Use the `inputValue` or `defaultInputValue` prop to set the value of the input f
 
 ```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['allowsCustomValue']} initialProps={{defaultSelectedKey: 'kangaroo'}}
 "use client";
-import type {Key} from 'react-aria-components';
 import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
 import {useState} from 'react';
 
 function Example(props) {
-  let [value, setValue] = useState<Key>('Kangaroo');
+  let [value, setValue] = useState('Kangaroo');
 
   return (
     <div>
@@ -204,15 +203,15 @@ function ControlledComboBox() {
   ];
   /*- end collapse -*/
 
-  let [fieldState, setFieldState] = useState({
+  let [fieldState, setFieldState] = useState<{selectedKey: Key | null, inputValue: string}>({
     selectedKey: null,
     inputValue: ''
   });
 
-  let onSelectionChange = (id: Key) => {
+  let onSelectionChange = (id: Key | null) => {
     // Update inputValue when selectedKey changes.
     setFieldState({
-      inputValue: options.find(o => o.id === id)?.name ?? '',
+      inputValue: id == null ? '' : options.find(o => o.id === id)?.name ?? '',
       selectedKey: id
     });
   };
@@ -227,7 +226,7 @@ function ControlledComboBox() {
 
   return (
     <div>
-       <ComboBox
+      <ComboBox
         label="Engineering major"
         placeholder="Select a major"
         /*- begin highlight -*/

packages/dev/s2-docs/pages/react-aria/DateField.mdx

@@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t
 
 ```tsx render
 "use client";
-import {parseDate, getLocalTimeZone} from '@internationalized/date';
+import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
 import {useDateFormatter} from 'react-aria';
 import {DateField} from 'vanilla-starter/DateField';
 import {useState} from 'react';
 
 function Example() {
-  let [date, setDate] = useState(parseDate('2020-02-03'));
+  let [date, setDate] = useState<CalendarDate | null>(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
 
   return (

packages/dev/s2-docs/pages/react-aria/DatePicker.mdx

@@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t
 
 ```tsx render
 "use client";
-import {parseDate, getLocalTimeZone} from '@internationalized/date';
+import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
 import {useDateFormatter} from 'react-aria';
 import {DatePicker} from 'vanilla-starter/DatePicker';
 import {useState} from 'react';
 
 function Example() {
-  let [date, setDate] = useState(parseDate('2020-02-03'));
+  let [date, setDate] = useState<CalendarDate | null>(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
 
   return (

packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx

@@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj
 
 ```tsx render
 "use client";
-import {parseDate, getLocalTimeZone} from '@internationalized/date';
-import {useDateFormatter} from 'react-aria';
+import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date';
+import {useDateFormatter, type RangeValue} from 'react-aria';
 import {DateRangePicker} from 'vanilla-starter/DateRangePicker';
 import {useState} from 'react';
 
 function Example() {
-  let [range, setRange] = useState({
+  let [range, setRange] = useState<RangeValue<CalendarDate> | null>({
     start: parseDate('2025-02-03'),
     end: parseDate('2025-02-12')
   });
@@ -60,10 +60,10 @@ function Example() {
         value={range}
         onChange={setRange} />
         {/*- end highlight -*/}
-      <p>Selected range: {formatter.formatRange(
+      <p>Selected range: {range ? formatter.formatRange(
         range.start.toDate(getLocalTimeZone()),
         range.end.toDate(getLocalTimeZone())
-      )}</p>
+      ) : '--'}</p>
     </>
   );
 }

packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx

@@ -1,6 +1,6 @@
 'use client';
 import {useDragAndDrop} from 'react-aria-components';
-import {PokemonGridList, Pokemon} from './PokemonGridList';
+import {PokemonGridList, type Pokemon} from './PokemonGridList';
 
 export function DraggableGridList() {
   let {dragAndDropHooks} = useDragAndDrop<Pokemon>({

packages/dev/s2-docs/pages/react-aria/DraggableListBox.tsx

@@ -1,6 +1,6 @@
 'use client';
 import {useDragAndDrop} from 'react-aria-components';
-import {PokemonListBox, Pokemon} from './PokemonListBox';
+import {PokemonListBox, type Pokemon} from './PokemonListBox';
 
 export function DraggableListBox() {
   let {dragAndDropHooks} = useDragAndDrop<Pokemon>({

packages/dev/s2-docs/pages/react-aria/DraggableTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 import {useDragAndDrop} from 'react-aria-components';
-import {PokemonTable, Pokemon} from './PokemonTable';
+import {PokemonTable, type Pokemon} from './PokemonTable';
 
 export function DraggableTable() {
   let {dragAndDropHooks} = useDragAndDrop<Pokemon>({

packages/dev/s2-docs/pages/react-aria/DraggableTree.tsx

@@ -1,6 +1,6 @@
 "use client";
 import {useDragAndDrop} from 'react-aria-components';
-import {PokemonTree, Pokemon} from './PokemonTree';
+import {PokemonTree, type Pokemon} from './PokemonTree';
 
 export function DraggableTree() {
   let {dragAndDropHooks} = useDragAndDrop<Pokemon>({

packages/dev/s2-docs/pages/react-aria/DropTarget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, {JSX, ReactNode} from 'react';
+import React, {ReactNode} from 'react';
 import type {TextDropItem} from '@react-aria/dnd';
 import {useDrop} from '@react-aria/dnd';
 

packages/dev/s2-docs/pages/react-aria/DropZone.mdx

@@ -18,9 +18,10 @@ export const description = 'An area into which one or multiple objects can be dr
   import {DropZone} from 'vanilla-starter/DropZone';
   import {Text} from 'react-aria-components';
   import {useState} from 'react';
+  import React from 'react';
 
   function Example() {
-    let [content, setContent] = useState(null);
+    let [content, setContent] = useState<string | React.ReactElement | null>(null);
     return (
       <DropZone
         // Determine whether dragged content should be accepted.
@@ -58,9 +59,10 @@ export const description = 'An area into which one or multiple objects can be dr
   import {DropZone} from 'tailwind-starter/DropZone';
   import {Text} from 'react-aria-components';
   import {useState} from 'react';
+  import React from 'react';
 
   function Example() {
-    let [content, setContent] = useState(null);
+    let [content, setContent] = useState<string | React.ReactElement | null>(null);
     return (
       <DropZone
         // Determine whether dragged content should be accepted.

packages/dev/s2-docs/pages/react-aria/DroppableGridList.tsx

@@ -1,7 +1,7 @@
 'use client';
 import {useState} from 'react';
 import {isTextDropItem, useDragAndDrop} from 'react-aria-components';
-import {PokemonGridList, Pokemon} from './PokemonGridList';
+import {PokemonGridList, type Pokemon} from './PokemonGridList';
 
 export function DroppableGridList() {
   let [items, setItems] = useState<Pokemon[]>([]);

packages/dev/s2-docs/pages/react-aria/DroppableListBox.tsx

@@ -1,7 +1,7 @@
 'use client';
 import {useState} from 'react';
 import {isTextDropItem, useDragAndDrop} from 'react-aria-components';
-import {PokemonListBox, Pokemon} from './PokemonListBox';
+import {PokemonListBox, type Pokemon} from './PokemonListBox';
 
 export function DroppableListBox() {
   let [items, setItems] = useState<Pokemon[]>([]);

packages/dev/s2-docs/pages/react-aria/DroppableTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 import {isTextDropItem, useDragAndDrop} from 'react-aria-components';
 import {useState} from 'react';
-import {PokemonTable, Pokemon} from './PokemonTable';
+import {PokemonTable, type Pokemon} from './PokemonTable';
 
 export function DroppableTable() {
   let [items, setItems] = useState<Pokemon[]>([]);

packages/dev/s2-docs/pages/react-aria/DroppableTree.tsx

@@ -1,7 +1,7 @@
 'use client';
 import {isTextDropItem, useDragAndDrop} from 'react-aria-components';
 import {useState} from 'react';
-import {PokemonTree, Pokemon} from './PokemonTree';
+import {PokemonTree, type Pokemon} from './PokemonTree';
 
 export function DroppableTree() {
   let [items, setItems] = useState<Pokemon[]>([]);

packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx

@@ -19,7 +19,7 @@ import {Button} from 'vanilla-starter/Button';
 import {useState} from 'react';
 
 function Example(props) {
-  let [files, setFiles] = useState([]);
+  let [files, setFiles] = useState<string[]>([]);
 
   return (
     <>

packages/dev/s2-docs/pages/react-aria/FocusScope.mdx

@@ -95,10 +95,10 @@ function ToolbarButton(props) {
   let onKeyDown = (e) => {
     switch (e.key) {
       case 'ArrowRight':
-        focusManager.focusNext({wrap: true});
+        focusManager?.focusNext({wrap: true});
         break;
       case 'ArrowLeft':
-        focusManager.focusPrevious({wrap: true});
+        focusManager?.focusPrevious({wrap: true});
         break;
     }
   };

packages/dev/s2-docs/pages/react-aria/Form.mdx

@@ -83,12 +83,13 @@ import {Button} from 'vanilla-starter/Button';
     event.preventDefault();
 
     // Get data from form.
-    let formData = new FormData(event.target);
+    let form = event.target as HTMLFormElement;
+    let formData = new FormData(form);
     let name = formData.get('name');
     alert(`Hello, ${name}!`);
 
     // Reset form after submission.
-    event.target.reset();
+    form.reset();
   }}>
   {/*- end highlight -*/}
   <TextField name="name" label="Name" placeholder="Enter your full name" />

packages/dev/s2-docs/pages/react-aria/GridList.mdx

@@ -373,6 +373,16 @@ import {Collection, Text} from 'react-aria-components';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
 import {useAsyncList} from '@react-stately/data';
 
+type Item = {
+  id: string;
+  description?: string;
+  alt_description?: string;
+  urls: {regular: string};
+  width: number;
+  height: number;
+  user: {name: string};
+};
+
 function AsyncLoadingExample() {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
@@ -866,7 +876,7 @@ function Example() {
 
   ///- begin highlight -///
   let {dragAndDropHooks} = useDragAndDrop({
-    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).title})),
+    getItems: (keys, items: typeof list.items) => items.map(item => ({'text/plain': item.title})),
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
         list.moveBefore(e.target.key, e.keys);