Fix prop table in docs

examples/rsp-next-ts-17/components/Section.tsx

@@ -1,9 +1,9 @@
 import { View, Heading, Divider } from "@adobe/react-spectrum";
-import React from "react";
+import React, {JSX} from "react";
 
 interface SectionProps {
   title: string;
-  children: React.JSX.Element | React.JSX.Element[];
+  children: JSX.Element | JSX.Element[];
 }
 
 export default function Section(props: SectionProps) {

examples/rsp-next-ts/components/Section.tsx

@@ -1,9 +1,9 @@
 import { View, Heading, Divider } from "@adobe/react-spectrum";
-import React from "react";
+import React, {JSX} from "react";
 
 interface SectionProps {
   title: string;
-  children: React.JSX.Element | React.JSX.Element[];
+  children: JSX.Element | JSX.Element[];
 }
 
 export default function Section(props: SectionProps) {

packages/@react-aria/dnd/src/DragPreview.tsx

@@ -12,15 +12,15 @@
 
 import {DragItem, DragPreviewRenderer} from '@react-types/shared';
 import {flushSync} from 'react-dom';
-import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
+import React, {JSX, RefObject, useImperativeHandle, useRef, useState} from 'react';
 
 export interface DragPreviewProps {
-  children: (items: DragItem[]) => React.JSX.Element
+  children: (items: DragItem[]) => JSX.Element
 }
 
 function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
   let render = props.children;
-  let [children, setChildren] = useState<React.JSX.Element>(null);
+  let [children, setChildren] = useState<JSX.Element>(null);
   let domRef = useRef(null);
 
   useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {

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

@@ -12,7 +12,7 @@
 
 import {FocusScope} from '../';
 import {Meta} from '@storybook/react';
-import React, {ReactNode, useEffect, useState} from 'react';
+import React, {JSX, ReactNode, useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
 
 const dialogsRoot = 'dialogsRoot';
@@ -135,7 +135,7 @@ function FocusableFirstInScopeExample() {
       </>
     );
   }
-  const contents: React.JSX.Element[] = [];
+  const contents: JSX.Element[] = [];
   for (let i = 0; i < 3; i++) {
     contents.push(DialogContent(i));
   }

packages/@react-aria/ssr/src/SSRProvider.tsx

@@ -13,7 +13,7 @@
 // We must avoid a circular dependency with @react-aria/utils, and this useLayoutEffect is
 // guarded by a check that it only runs on the client side.
 // eslint-disable-next-line rulesdir/useLayoutEffectRule
-import React, {ReactNode, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import React, {JSX, ReactNode, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
 
 // To support SSR, the auto incrementing id counter is stored in a context. This allows
 // it to be reset on every request to ensure the client and server are consistent.
@@ -45,7 +45,7 @@ export interface SSRProviderProps {
 }
 
 // This is only used in React < 18.
-function LegacySSRProvider(props: SSRProviderProps): React.JSX.Element {
+function LegacySSRProvider(props: SSRProviderProps): JSX.Element {
   let cur = useContext(SSRContext);
   let counter = useCounter(cur === defaultContext);
   let [isSSR, setIsSSR] = useState(true);
@@ -82,7 +82,7 @@ let warnedAboutSSRProvider = false;
  * When using SSR with React Aria in React 16 or 17, applications must be wrapped in an SSRProvider.
  * This ensures that auto generated ids are consistent between the client and server.
  */
-export function SSRProvider(props: SSRProviderProps): React.JSX.Element {
+export function SSRProvider(props: SSRProviderProps): JSX.Element {
   if (typeof React['useId'] === 'function') {
     if (process.env.NODE_ENV !== 'test' && !warnedAboutSSRProvider) {
       console.warn('In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app.');

packages/@react-spectrum/dialog/src/DialogTrigger.tsx

@@ -14,7 +14,7 @@ import {DialogContext} from './context';
 import {Modal, Popover, Tray} from '@react-spectrum/overlays';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {PressResponder} from '@react-aria/interactions';
-import React, {Fragment, ReactElement, useEffect, useRef} from 'react';
+import React, {Fragment, JSX, ReactElement, useEffect, useRef} from 'react';
 import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog';
 import {useIsMobileDevice} from '@react-spectrum/utils';
 import {useOverlayTrigger} from '@react-aria/overlays';
@@ -140,7 +140,7 @@ DialogTrigger.getCollectionNode = function* (props: SpectrumDialogTriggerProps)
  */
 
 // We don't want getCollectionNode to show up in the type definition
-let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => React.JSX.Element;
+let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => JSX.Element;
 export {_DialogTrigger as DialogTrigger};
 
 function PopoverTrigger({state, targetRef, trigger, content, hideArrow, ...props}) {

packages/@react-spectrum/dnd/src/useDragAndDrop.ts

@@ -37,7 +37,7 @@ import {
   useDraggableCollectionState,
   useDroppableCollectionState
 } from '@react-stately/dnd';
-import React, {RefObject, useMemo} from 'react';
+import {JSX, RefObject, useMemo} from 'react';
 
 interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {}
 
@@ -57,7 +57,7 @@ interface DropHooks {
 
 export interface DragAndDropHooks {
   /** Drag and drop hooks for the collection element.  */
-  dragAndDropHooks: DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => React.JSX.Element}
+  dragAndDropHooks: DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element}
 }
 
 export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>, DroppableCollectionProps {
@@ -67,7 +67,7 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
    */
   getItems?: (keys: Set<Key>) => DragItem[],
   /** Provide a custom drag preview. `draggedKey` represents the key of the item the user actually dragged. */
-  renderPreview?: (keys: Set<Key>, draggedKey: Key) => React.JSX.Element
+  renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element
 }
 
 /**
@@ -88,7 +88,7 @@ export function useDragAndDrop(options: DragAndDropOptions): DragAndDropHooks {
     let isDraggable = !!getItems;
     let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onRootDrop);
 
-    let hooks = {} as DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => React.JSX.Element};
+    let hooks = {} as DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element};
     if (isDraggable) {
       hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOptions) {
         return useDraggableCollectionState({...props, ...options});

packages/@react-spectrum/link/src/Link.tsx

@@ -13,7 +13,7 @@
 import {classNames, getWrappedElement, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps, mergeRefs} from '@react-aria/utils';
-import React, {useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import {SpectrumLinkProps} from '@react-types/link';
 import styles from '@adobe/spectrum-css-temp/components/link/vars.css';
 import {useHover} from '@react-aria/interactions';
@@ -59,7 +59,7 @@ export function Link(props: SpectrumLinkProps) {
     )
   };
 
-  let link: React.JSX.Element;
+  let link: JSX.Element;
   if (href) {
     link = <a {...domProps}>{children}</a>;
   } else {

packages/@react-spectrum/list/src/ListView.tsx

@@ -26,7 +26,7 @@ import {ListState, useListState} from '@react-stately/list';
 import listStyles from './styles.css';
 import {ListViewItem} from './ListViewItem';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {JSX, ReactElement, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import RootDropIndicator from './RootDropIndicator';
 import {DragPreview as SpectrumDragPreview} from './DragPreview';
 import {useCollator, useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -49,7 +49,7 @@ export interface SpectrumListViewProps<T> extends AriaGridListProps<T>, StylePro
    */
   overflowMode?: 'truncate' | 'wrap',
   /** Sets what the ListView should render when there is no content to display. */
-  renderEmptyState?: () => React.JSX.Element,
+  renderEmptyState?: () => JSX.Element,
   /**
    * Handler that is called when a user performs an action on an item. The exact user event depends on
    * the collection's `selectionStyle` prop and the interaction modality.

packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx

@@ -16,7 +16,7 @@ import {getInteractionModality} from '@react-aria/interactions';
 import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
 import {ItemProps, Key} from '@react-types/shared';
 import {Popover} from '@react-spectrum/overlays';
-import React, {ReactElement, useRef, useState} from 'react';
+import React, {JSX, ReactElement, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {SubmenuTriggerContext, useMenuStateContext} from './context';
@@ -193,5 +193,5 @@ ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props:
   };
 };
 
-let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => React.JSX.Element;
+let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
 export {_Item as ContextualHelpTrigger};

packages/@react-spectrum/table/src/TableViewWrapper.tsx

@@ -13,7 +13,7 @@
 import type {AriaLabelingProps, DOMProps, DOMRef, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
 import type {ColumnSize, TableProps} from '@react-types/table';
 import type {DragAndDropHooks} from '@react-spectrum/dnd';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import {tableNestedRows} from '@react-stately/flags';
 import {TableView} from './TableView';
 import {TreeGridTableView} from './TreeGridTableView';
@@ -32,7 +32,7 @@ export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionP
   /** Whether the TableView should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** Sets what the TableView should render when there is no content to display. */
-  renderEmptyState?: () => React.JSX.Element,
+  renderEmptyState?: () => JSX.Element,
   /** Handler that is called when a user performs an action on a row. */
   onAction?: (key: Key) => void,
   /**

packages/@react-spectrum/table/src/index.ts

@@ -14,11 +14,11 @@
 
 export {TableView} from './TableViewWrapper';
 import {Column} from '@react-stately/table';
-import React from 'react';
+import {JSX} from 'react';
 import {SpectrumColumnProps} from '@react-types/table';
 
 // Override TS for Column to support spectrum specific props.
-const SpectrumColumn = Column as <T>(props: SpectrumColumnProps<T>) => React.JSX.Element;
+const SpectrumColumn = Column as <T>(props: SpectrumColumnProps<T>) => JSX.Element;
 export {SpectrumColumn as Column};
 
 export {

packages/@react-spectrum/tag/src/TagGroup.tsx

@@ -21,7 +21,7 @@ import intlMessages from '../intl/*.json';
 import {ListCollection, useListState} from '@react-stately/list';
 import {ListKeyboardDelegate} from '@react-aria/selection';
 import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider';
-import React, {ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {JSX, ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
 import {Tag} from './Tag';
 import {useFormProps} from '@react-spectrum/form';
@@ -45,7 +45,7 @@ export interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'se
   /** Handler that is called when the action button is pressed. */
   onAction?: () => void,
   /** Sets what the TagGroup should render when there are no tags to display. */
-  renderEmptyState?: () => React.JSX.Element,
+  renderEmptyState?: () => JSX.Element,
   /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */
   maxRows?: number
 }

packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx

@@ -12,7 +12,7 @@
 
 import {FocusableProvider} from '@react-aria/focus';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {ReactElement, useRef, useState} from 'react';
+import React, {JSX, ReactElement, useRef, useState} from 'react';
 import {SpectrumTooltipTriggerProps} from '@react-types/tooltip';
 import {TooltipContext} from './context';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -123,5 +123,5 @@ TooltipTrigger.getCollectionNode = function* (props: SpectrumTooltipTriggerProps
  * relative to the trigger.
  */
 // We don't want getCollectionNode to show up in the type definition
-let _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => React.JSX.Element;
+let _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => JSX.Element;
 export {_TooltipTrigger as TooltipTrigger};

packages/@react-stately/collections/src/Item.ts

@@ -12,7 +12,7 @@
 
 import {ItemElement, ItemProps} from '@react-types/shared';
 import {PartialNode} from './types';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 
 function Item<T>(props: ItemProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
@@ -76,5 +76,5 @@ function hasChildItems<T>(props: ItemProps<T>) {
 }
 
 // We don't want getCollectionNode to show up in the type definition
-let _Item = Item as <T>(props: ItemProps<T>) => React.JSX.Element;
+let _Item = Item as <T>(props: ItemProps<T>) => JSX.Element;
 export {_Item as Item};

packages/@react-stately/collections/src/Section.ts

@@ -11,7 +11,7 @@
  */
 
 import {PartialNode} from './types';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import {SectionProps} from '@react-types/shared';
 
 function Section<T>(props: SectionProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -55,5 +55,5 @@ Section.getCollectionNode = function* getCollectionNode<T>(props: SectionProps<T
 };
 
 // We don't want getCollectionNode to show up in the type definition
-let _Section = Section as <T>(props: SectionProps<T>) => React.JSX.Element;
+let _Section = Section as <T>(props: SectionProps<T>) => JSX.Element;
 export {_Section as Section};

packages/@react-stately/table/src/Cell.ts

@@ -11,8 +11,8 @@
  */
 
 import {CellProps} from '@react-types/table';
+import {JSX, ReactElement} from 'react';
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
 
 function Cell(props: CellProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
@@ -36,5 +36,5 @@ Cell.getCollectionNode = function* getCollectionNode<T>(props: CellProps): Gener
  * A Cell represents the value of a single Column within a Table Row.
  */
 // We don't want getCollectionNode to show up in the type definition
-let _Cell = Cell as (props: CellProps) => React.JSX.Element;
+let _Cell = Cell as (props: CellProps) => JSX.Element;
 export {_Cell as Cell};

packages/@react-stately/table/src/Column.ts

@@ -14,7 +14,7 @@ import {CollectionBuilderContext} from './useTableState';
 import {ColumnProps} from '@react-types/table';
 import {GridNode} from '@react-types/grid';
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 
 function Column<T>(props: ColumnProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
@@ -79,5 +79,5 @@ Column.getCollectionNode = function* getCollectionNode<T>(props: ColumnProps<T>,
  * children, or dynamically generated using a function based on the `childColumns` prop.
  */
 // We don't want getCollectionNode to show up in the type definition
-let _Column = Column as <T>(props: ColumnProps<T>) => React.JSX.Element;
+let _Column = Column as <T>(props: ColumnProps<T>) => JSX.Element;
 export {_Column as Column};

packages/@react-stately/table/src/Row.ts

@@ -12,7 +12,7 @@
 
 import {CollectionBuilderContext} from './useTableState';
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import {RowProps} from '@react-types/table';
 
 function Row<T>(props: RowProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -115,5 +115,5 @@ Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, conte
  * based on the columns defined in the TableHeader.
  */
 // We don't want getCollectionNode to show up in the type definition
-let _Row = Row as <T>(props: RowProps<T>) => React.JSX.Element;
+let _Row = Row as <T>(props: RowProps<T>) => JSX.Element;
 export {_Row as Row};

packages/@react-stately/table/src/TableBody.ts

@@ -11,7 +11,7 @@
  */
 
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import {TableBodyProps} from '@react-types/table';
 
 function TableBody<T>(props: TableBodyProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -57,5 +57,5 @@ TableBody.getCollectionNode = function* getCollectionNode<T>(props: TableBodyPro
  * as children, or generated dynamically using a function based on the data passed to the `items` prop.
  */
 // We don't want getCollectionNode to show up in the type definition
-let _TableBody = TableBody as <T>(props: TableBodyProps<T>) => React.JSX.Element;
+let _TableBody = TableBody as <T>(props: TableBodyProps<T>) => JSX.Element;
 export {_TableBody as TableBody};

packages/@react-stately/table/src/TableHeader.ts

@@ -12,7 +12,7 @@
 
 import {CollectionBuilderContext} from './useTableState';
 import {PartialNode} from '@react-stately/collections';
-import React, {ReactElement} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import {TableHeaderProps} from '@react-types/table';
 
 function TableHeader<T>(props: TableHeaderProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -55,5 +55,5 @@ TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeade
  * as children, or generated dynamically using a function based on the data passed to the `columns` prop.
  */
 // We don't want getCollectionNode to show up in the type definition
-let _TableHeader = TableHeader as <T>(props: TableHeaderProps<T>) => React.JSX.Element;
+let _TableHeader = TableHeader as <T>(props: TableHeaderProps<T>) => JSX.Element;
 export {_TableHeader as TableHeader};

packages/@react-types/table/src/index.d.ts

@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, AsyncLoadable, DOMProps, Key, LinkDOMProps, LoadingState, MultipleSelection, Sortable, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
 import {GridCollection, GridNode} from '@react-types/grid';
-import React, {ReactElement, ReactNode} from 'react';
+import {JSX, ReactElement, ReactNode} from 'react';
 
 /** Widths that result in a constant pixel value for the same Table width. */
 export type ColumnStaticSize = number | `${number}` | `${number}%`; // match regex: /^(\d+)(?=%$)/
@@ -49,7 +49,7 @@ export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionP
   /** Whether the TableView should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** Sets what the TableView should render when there is no content to display. */
-  renderEmptyState?: () => React.JSX.Element,
+  renderEmptyState?: () => JSX.Element,
   /** Handler that is called when a user performs an action on a row. */
   onAction?: (key: Key) => void,
   /**