From 4aeb891ebbbf1963fa6fda0b10a637d2ceb42a85 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Tue, 5 Dec 2023 15:10:48 -0800 Subject: [PATCH] Fix prop table in docs --- examples/rsp-next-ts-17/components/Section.tsx | 4 ++-- examples/rsp-next-ts/components/Section.tsx | 4 ++-- packages/@react-aria/dnd/src/DragPreview.tsx | 6 +++--- .../@react-aria/focus/stories/FocusScope.stories.tsx | 4 ++-- packages/@react-aria/ssr/src/SSRProvider.tsx | 6 +++--- .../@react-spectrum/dialog/src/DialogTrigger.tsx | 4 ++-- packages/@react-spectrum/dnd/src/useDragAndDrop.ts | 8 ++++---- packages/@react-spectrum/link/src/Link.tsx | 4 ++-- packages/@react-spectrum/list/src/ListView.tsx | 4 ++-- .../menu/src/ContextualHelpTrigger.tsx | 4 ++-- .../@react-spectrum/table/src/TableViewWrapper.tsx | 4 ++-- packages/@react-spectrum/table/src/index.ts | 4 ++-- packages/@react-spectrum/tag/src/TagGroup.tsx | 4 ++-- .../@react-spectrum/tooltip/src/TooltipTrigger.tsx | 4 ++-- packages/@react-stately/collections/src/Item.ts | 4 ++-- packages/@react-stately/collections/src/Section.ts | 4 ++-- packages/@react-stately/table/src/Cell.ts | 4 ++-- packages/@react-stately/table/src/Column.ts | 4 ++-- packages/@react-stately/table/src/Row.ts | 4 ++-- packages/@react-stately/table/src/TableBody.ts | 4 ++-- packages/@react-stately/table/src/TableHeader.ts | 4 ++-- packages/@react-types/table/src/index.d.ts | 4 ++-- packages/dev/docs/src/PropTable.js | 7 +------ packages/react-aria-components/src/Breadcrumbs.tsx | 4 ++-- packages/react-aria-components/src/Collection.tsx | 6 +++--- packages/react-aria-components/src/DateField.tsx | 4 ++-- packages/react-aria-components/src/GridList.tsx | 4 ++-- packages/react-aria-components/src/ListBox.tsx | 6 +++--- packages/react-aria-components/src/Table.tsx | 12 ++++++------ packages/react-aria-components/src/Tabs.tsx | 6 +++--- packages/react-aria-components/src/TagGroup.tsx | 4 ++-- .../react-aria-components/src/useDragAndDrop.tsx | 12 ++++++------ packages/react-aria-components/src/utils.tsx | 6 +++--- 33 files changed, 81 insertions(+), 86 deletions(-) diff --git a/examples/rsp-next-ts-17/components/Section.tsx b/examples/rsp-next-ts-17/components/Section.tsx index a0d2372fbb8..9e8a47a64bd 100644 --- a/examples/rsp-next-ts-17/components/Section.tsx +++ b/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) { diff --git a/examples/rsp-next-ts/components/Section.tsx b/examples/rsp-next-ts/components/Section.tsx index a0d2372fbb8..9e8a47a64bd 100644 --- a/examples/rsp-next-ts/components/Section.tsx +++ b/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) { diff --git a/packages/@react-aria/dnd/src/DragPreview.tsx b/packages/@react-aria/dnd/src/DragPreview.tsx index 95949c492db..f393bb5342a 100644 --- a/packages/@react-aria/dnd/src/DragPreview.tsx +++ b/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) { let render = props.children; - let [children, setChildren] = useState(null); + let [children, setChildren] = useState(null); let domRef = useRef(null); useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => { diff --git a/packages/@react-aria/focus/stories/FocusScope.stories.tsx b/packages/@react-aria/focus/stories/FocusScope.stories.tsx index 0fdfb579cda..2526d900750 100644 --- a/packages/@react-aria/focus/stories/FocusScope.stories.tsx +++ b/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)); } diff --git a/packages/@react-aria/ssr/src/SSRProvider.tsx b/packages/@react-aria/ssr/src/SSRProvider.tsx index ea637eafce0..fa2247e9d43 100644 --- a/packages/@react-aria/ssr/src/SSRProvider.tsx +++ b/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.'); diff --git a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx b/packages/@react-spectrum/dialog/src/DialogTrigger.tsx index ae88775fd06..0daae0aa746 100644 --- a/packages/@react-spectrum/dialog/src/DialogTrigger.tsx +++ b/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}) { diff --git a/packages/@react-spectrum/dnd/src/useDragAndDrop.ts b/packages/@react-spectrum/dnd/src/useDragAndDrop.ts index 769f60d1cca..ee4fd5c2203 100644 --- a/packages/@react-spectrum/dnd/src/useDragAndDrop.ts +++ b/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 {} @@ -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, draggedKey: Key) => React.JSX.Element} + dragAndDropHooks: DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set, draggedKey: Key) => JSX.Element} } export interface DragAndDropOptions extends Omit, DroppableCollectionProps { @@ -67,7 +67,7 @@ export interface DragAndDropOptions extends Omit) => DragItem[], /** Provide a custom drag preview. `draggedKey` represents the key of the item the user actually dragged. */ - renderPreview?: (keys: Set, draggedKey: Key) => React.JSX.Element + renderPreview?: (keys: Set, 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, draggedKey: Key) => React.JSX.Element}; + let hooks = {} as DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set, draggedKey: Key) => JSX.Element}; if (isDraggable) { hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOptions) { return useDraggableCollectionState({...props, ...options}); diff --git a/packages/@react-spectrum/link/src/Link.tsx b/packages/@react-spectrum/link/src/Link.tsx index ff063721cee..faddfaeba8d 100644 --- a/packages/@react-spectrum/link/src/Link.tsx +++ b/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 = {children}; } else { diff --git a/packages/@react-spectrum/list/src/ListView.tsx b/packages/@react-spectrum/list/src/ListView.tsx index 9d6b3171542..5a18f0131ce 100644 --- a/packages/@react-spectrum/list/src/ListView.tsx +++ b/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 extends AriaGridListProps, 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. diff --git a/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx b/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx index 0e1ca24e102..81ce575ea0d 100644 --- a/packages/@react-spectrum/menu/src/ContextualHelpTrigger.tsx +++ b/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(props: }; }; -let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => React.JSX.Element; +let _Item = ContextualHelpTrigger as (props: SpectrumMenuDialogTriggerProps) => JSX.Element; export {_Item as ContextualHelpTrigger}; diff --git a/packages/@react-spectrum/table/src/TableViewWrapper.tsx b/packages/@react-spectrum/table/src/TableViewWrapper.tsx index a7963b79dbb..5385a6488c2 100644 --- a/packages/@react-spectrum/table/src/TableViewWrapper.tsx +++ b/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 extends TableProps, 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, /** diff --git a/packages/@react-spectrum/table/src/index.ts b/packages/@react-spectrum/table/src/index.ts index cd88e69b0c9..e365c1368a6 100644 --- a/packages/@react-spectrum/table/src/index.ts +++ b/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 (props: SpectrumColumnProps) => React.JSX.Element; +const SpectrumColumn = Column as (props: SpectrumColumnProps) => JSX.Element; export {SpectrumColumn as Column}; export { diff --git a/packages/@react-spectrum/tag/src/TagGroup.tsx b/packages/@react-spectrum/tag/src/TagGroup.tsx index 9f422e67187..ad34d300a1e 100644 --- a/packages/@react-spectrum/tag/src/TagGroup.tsx +++ b/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 extends Omit, '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 } diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx index 0144be2e063..a84e6e765d6 100644 --- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx +++ b/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}; diff --git a/packages/@react-stately/collections/src/Item.ts b/packages/@react-stately/collections/src/Item.ts index de9f2baf0f1..4ea49f91c71 100644 --- a/packages/@react-stately/collections/src/Item.ts +++ b/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(props: ItemProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars return null; @@ -76,5 +76,5 @@ function hasChildItems(props: ItemProps) { } // We don't want getCollectionNode to show up in the type definition -let _Item = Item as (props: ItemProps) => React.JSX.Element; +let _Item = Item as (props: ItemProps) => JSX.Element; export {_Item as Item}; diff --git a/packages/@react-stately/collections/src/Section.ts b/packages/@react-stately/collections/src/Section.ts index 9c5201b1bab..97fceb5d4b9 100644 --- a/packages/@react-stately/collections/src/Section.ts +++ b/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(props: SectionProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars @@ -55,5 +55,5 @@ Section.getCollectionNode = function* getCollectionNode(props: SectionProps(props: SectionProps) => React.JSX.Element; +let _Section = Section as (props: SectionProps) => JSX.Element; export {_Section as Section}; diff --git a/packages/@react-stately/table/src/Cell.ts b/packages/@react-stately/table/src/Cell.ts index 91da2f3856f..ed193bae470 100644 --- a/packages/@react-stately/table/src/Cell.ts +++ b/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(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}; diff --git a/packages/@react-stately/table/src/Column.ts b/packages/@react-stately/table/src/Column.ts index f37421dccee..b6aa07d669f 100644 --- a/packages/@react-stately/table/src/Column.ts +++ b/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(props: ColumnProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars return null; @@ -79,5 +79,5 @@ Column.getCollectionNode = function* getCollectionNode(props: ColumnProps, * 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 (props: ColumnProps) => React.JSX.Element; +let _Column = Column as (props: ColumnProps) => JSX.Element; export {_Column as Column}; diff --git a/packages/@react-stately/table/src/Row.ts b/packages/@react-stately/table/src/Row.ts index 1f76adbe9c6..5f864a2ecd6 100644 --- a/packages/@react-stately/table/src/Row.ts +++ b/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(props: RowProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars @@ -115,5 +115,5 @@ Row.getCollectionNode = function* getCollectionNode(props: RowProps, 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 (props: RowProps) => React.JSX.Element; +let _Row = Row as (props: RowProps) => JSX.Element; export {_Row as Row}; diff --git a/packages/@react-stately/table/src/TableBody.ts b/packages/@react-stately/table/src/TableBody.ts index 8ef3eaf5425..513ca04126a 100644 --- a/packages/@react-stately/table/src/TableBody.ts +++ b/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(props: TableBodyProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars @@ -57,5 +57,5 @@ TableBody.getCollectionNode = function* getCollectionNode(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 (props: TableBodyProps) => React.JSX.Element; +let _TableBody = TableBody as (props: TableBodyProps) => JSX.Element; export {_TableBody as TableBody}; diff --git a/packages/@react-stately/table/src/TableHeader.ts b/packages/@react-stately/table/src/TableHeader.ts index bbf48b53e8b..a2d982c568d 100644 --- a/packages/@react-stately/table/src/TableHeader.ts +++ b/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(props: TableHeaderProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars @@ -55,5 +55,5 @@ TableHeader.getCollectionNode = function* getCollectionNode(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 (props: TableHeaderProps) => React.JSX.Element; +let _TableHeader = TableHeader as (props: TableHeaderProps) => JSX.Element; export {_TableHeader as TableHeader}; diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts index 16d21d12cb6..e9bb24ad28e 100644 --- a/packages/@react-types/table/src/index.d.ts +++ b/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 extends TableProps, 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, /** diff --git a/packages/dev/docs/src/PropTable.js b/packages/dev/docs/src/PropTable.js index d80c31907d1..0b2f5e6ebf8 100644 --- a/packages/dev/docs/src/PropTable.js +++ b/packages/dev/docs/src/PropTable.js @@ -76,12 +76,7 @@ const GROUPS = { }; export function PropTable({component, links, style}) { - let ungrouped, groups; - if (!component.props) { - [ungrouped, groups] = groupProps(component.parameters[0].value.properties); - } else { - [ungrouped, groups] = groupProps(component.props.properties); - } + let [ungrouped, groups] = groupProps(component.props.properties); return (
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx index 6530eed75dc..234561190d1 100644 --- a/packages/react-aria-components/src/Breadcrumbs.tsx +++ b/packages/react-aria-components/src/Breadcrumbs.tsx @@ -16,7 +16,7 @@ import {ContextValue, forwardRefType, SlotProps, StyleProps, useContextProps} fr import {filterDOMProps} from '@react-aria/utils'; import {Key} from '@react-types/shared'; import {LinkContext} from './Link'; -import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, RefObject} from 'react'; export interface BreadcrumbsProps extends Omit, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps { /** Whether the breadcrumbs are disabled. */ @@ -79,7 +79,7 @@ export interface BreadcrumbProps extends StyleProps { children: ReactNode } -function Breadcrumb(props: BreadcrumbProps, ref: ForwardedRef): React.JSX.Element | null { +function Breadcrumb(props: BreadcrumbProps, ref: ForwardedRef): JSX.Element | null { return useSSRCollectionNode('item', props, ref, props.children); } diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx index 27ae5f02205..61de7c20403 100644 --- a/packages/react-aria-components/src/Collection.tsx +++ b/packages/react-aria-components/src/Collection.tsx @@ -14,7 +14,7 @@ import {createPortal} from 'react-dom'; import {forwardRefType, StyleProps} from './utils'; import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately'; import {mergeProps, useIsSSR} from 'react-aria'; -import React, {cloneElement, createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react'; +import React, {cloneElement, createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef} from 'react'; import {useSyncExternalStore as useSyncExternalStoreShim} from 'use-sync-external-store/shim/index.js'; // This Collection implementation is perhaps a little unusual. It works by rendering the React tree into a @@ -892,7 +892,7 @@ export interface SectionProps extends Omit, 'children' children?: ReactNode | ((item: T) => ReactElement) } -function Section(props: SectionProps, ref: ForwardedRef): React.JSX.Element | null { +function Section(props: SectionProps, ref: ForwardedRef): JSX.Element | null { let children = useCollectionChildren(props); return useSSRCollectionNode('section', props, ref, null, children); } @@ -904,7 +904,7 @@ export const CollectionContext = createContext | export const CollectionRendererContext = createContext['children']>(null); /** A Collection renders a list of items, automatically managing caching and keys. */ -export function Collection(props: CollectionProps): React.JSX.Element { +export function Collection(props: CollectionProps): JSX.Element { let ctx = useContext(CollectionContext)!; props = mergeProps(ctx, props); let renderer = typeof props.children === 'function' ? props.children : null; diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx index b21348261e4..7124f547ca6 100644 --- a/packages/react-aria-components/src/DateField.tsx +++ b/packages/react-aria-components/src/DateField.tsx @@ -18,7 +18,7 @@ import {filterDOMProps, useObjectRef} from '@react-aria/utils'; import {Group, GroupContext} from './Group'; import {Input, InputContext} from './Input'; import {LabelContext} from './Label'; -import React, {cloneElement, createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react'; +import React, {cloneElement, createContext, ForwardedRef, forwardRef, JSX, ReactElement, useContext, useRef} from 'react'; import {TextContext} from './Text'; export interface DateFieldRenderProps { @@ -201,7 +201,7 @@ export interface DateInputProps extends SlotProps, StyleRenderProps ReactElement } -function DateInput(props: DateInputProps, ref: ForwardedRef): React.JSX.Element { +function DateInput(props: DateInputProps, ref: ForwardedRef): JSX.Element { // If state is provided by DateField/TimeField, just render. // Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves. let dateFieldState = useContext(DateFieldStateContext); diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx index a6daa5b7ab7..3864fb8a8a4 100644 --- a/packages/react-aria-components/src/GridList.tsx +++ b/packages/react-aria-components/src/GridList.tsx @@ -19,7 +19,7 @@ import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContex import {filterDOMProps, useObjectRef} from '@react-aria/utils'; import {Key, LinkDOMProps} from '@react-types/shared'; import {ListStateContext} from './ListBox'; -import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useEffect, useRef} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, RefObject, useContext, useEffect, useRef} from 'react'; import {TextContext} from './Text'; export interface GridListRenderProps { @@ -119,7 +119,7 @@ function GridListInner({props, collection, gridListRef: ref}: let dropState: DroppableCollectionState | undefined = undefined; let droppableCollection: DroppableCollectionResult | undefined = undefined; let isRootDropTarget = false; - let dragPreview: React.JSX.Element | null = null; + let dragPreview: JSX.Element | null = null; let preview = useRef(null); if (isListDraggable && dragAndDropHooks) { diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx index c4ba450e028..33e85229061 100644 --- a/packages/react-aria-components/src/ListBox.tsx +++ b/packages/react-aria-components/src/ListBox.tsx @@ -18,7 +18,7 @@ import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Ori import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils'; import {Header} from './Header'; import {Key, LinkDOMProps} from '@react-types/shared'; -import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, RefObject, useContext, useEffect, useMemo, useRef} from 'react'; import {Separator, SeparatorContext} from './Separator'; import {TextContext} from './Text'; @@ -181,7 +181,7 @@ function ListBoxInner({state, props, listBoxRef}: ListBoxInnerProps) { let dropState: DroppableCollectionState | undefined = undefined; let droppableCollection: DroppableCollectionResult | undefined = undefined; let isRootDropTarget = false; - let dragPreview: React.JSX.Element | null = null; + let dragPreview: JSX.Element | null = null; let preview = useRef(null); if (isListDraggable && dragAndDropHooks) { @@ -229,7 +229,7 @@ function ListBoxInner({state, props, listBoxRef}: ListBoxInnerProps) { values: renderValues }); - let emptyState: React.JSX.Element | null = null; + let emptyState: JSX.Element | null = null; if (state.collection.size === 0 && props.renderEmptyState) { emptyState = (
extends BaseCollection implements ITableCollection { @@ -324,7 +324,7 @@ function Table(props: TableProps, ref: ForwardedRef) { let dropState: DroppableCollectionState | undefined = undefined; let droppableCollection: DroppableCollectionResult | undefined = undefined; let isRootDropTarget = false; - let dragPreview: React.JSX.Element | null = null; + let dragPreview: JSX.Element | null = null; let preview = useRef(null); if (isListDraggable && dragAndDropHooks) { @@ -547,7 +547,7 @@ export interface ColumnProps extends RenderProps maxWidth?: ColumnStaticSize | null } -function Column(props: ColumnProps, ref: ForwardedRef): React.JSX.Element | null { +function Column(props: ColumnProps, ref: ForwardedRef): JSX.Element | null { let render = useContext(CollectionRendererContext); let childColumns: ReactNode | ((item: T) => ReactNode); if (typeof render === 'function') { @@ -588,7 +588,7 @@ export interface TableBodyProps extends CollectionProps, StyleRenderProps< renderEmptyState?: (props: TableBodyRenderProps) => ReactNode } -function TableBody(props: TableBodyProps, ref: ForwardedRef): React.JSX.Element | null { +function TableBody(props: TableBodyProps, ref: ForwardedRef): JSX.Element | null { let children = useCollectionChildren(props); return useSSRCollectionNode('tablebody', props, ref, null, children); } @@ -611,7 +611,7 @@ export interface RowProps extends StyleRenderProps, LinkDOMPr textValue?: string } -function Row(props: RowProps, ref: ForwardedRef): React.JSX.Element | null { +function Row(props: RowProps, ref: ForwardedRef): JSX.Element | null { let children = useCollectionChildren({ children: props.children, items: props.columns, @@ -662,7 +662,7 @@ export interface CellProps extends RenderProps { textValue?: string } -function Cell(props: CellProps, ref: ForwardedRef): React.JSX.Element | null { +function Cell(props: CellProps, ref: ForwardedRef): JSX.Element | null { return useSSRCollectionNode('cell', props, ref, props.children); } diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx index abdc03b8a40..bb62b52d32f 100644 --- a/packages/react-aria-components/src/Tabs.tsx +++ b/packages/react-aria-components/src/Tabs.tsx @@ -16,7 +16,7 @@ import {Collection, Node, TabListState, useTabListState} from 'react-stately'; import {CollectionDocumentContext, CollectionPortal, CollectionProps, useCollectionDocument, useSSRCollectionNode} from './Collection'; import {ContextValue, createHideableComponent, forwardRefType, Hidden, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils'; import {filterDOMProps, useObjectRef} from '@react-aria/utils'; -import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext, useMemo} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, JSX, RefObject, useContext, useMemo} from 'react'; export interface TabsProps extends Omit, 'items' | 'children'>, RenderProps, SlotProps {} @@ -191,7 +191,7 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) { const _Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(Tabs); export {_Tabs as Tabs}; -function TabList(props: TabListProps, ref: ForwardedRef): React.JSX.Element { +function TabList(props: TabListProps, ref: ForwardedRef): JSX.Element { let document = useContext(CollectionDocumentContext); return document ? @@ -251,7 +251,7 @@ function TabListInner({props, forwardedRef: ref}: TabListInner const _TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(TabList); export {_TabList as TabList}; -function Tab(props: TabProps, ref: ForwardedRef): React.JSX.Element | null { +function Tab(props: TabProps, ref: ForwardedRef): JSX.Element | null { return useSSRCollectionNode('item', props, ref, props.children); } diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx index 9f29af6198a..4e92c9f7f35 100644 --- a/packages/react-aria-components/src/TagGroup.tsx +++ b/packages/react-aria-components/src/TagGroup.tsx @@ -19,7 +19,7 @@ import {Key, LinkDOMProps} from '@react-types/shared'; import {LabelContext} from './Label'; import {ListState, Node, useListState} from 'react-stately'; import {ListStateContext} from './ListBox'; -import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useRef} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react'; import {TextContext} from './Text'; export interface TagGroupProps extends Omit, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps {} @@ -196,7 +196,7 @@ export interface TagProps extends RenderProps, LinkDOMProps { textValue?: string } -function Tag(props: TagProps, ref: ForwardedRef): React.JSX.Element | null { +function Tag(props: TagProps, ref: ForwardedRef): JSX.Element | null { return useSSRCollectionNode('item', props, ref, props.children); } diff --git a/packages/react-aria-components/src/useDragAndDrop.tsx b/packages/react-aria-components/src/useDragAndDrop.tsx index ff12dddfb58..4b1a631c0d1 100644 --- a/packages/react-aria-components/src/useDragAndDrop.tsx +++ b/packages/react-aria-components/src/useDragAndDrop.tsx @@ -40,7 +40,7 @@ import { useDraggableCollectionState, useDroppableCollectionState } from 'react-stately'; -import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useMemo} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, RefObject, useContext, useMemo} from 'react'; import {RenderProps} from './utils'; interface DraggableCollectionStateOpts extends Omit {} @@ -50,7 +50,7 @@ interface DragHooks { useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject) => void, useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult, DragPreview?: typeof DragPreview, - renderDragPreview?: (items: DragItem[]) => React.JSX.Element + renderDragPreview?: (items: DragItem[]) => JSX.Element } interface DropHooks { @@ -58,7 +58,7 @@ interface DropHooks { useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject) => DroppableCollectionResult, useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject) => DroppableItemResult, useDropIndicator?: (props: AriaDropIndicatorProps, state: DroppableCollectionState, ref: RefObject) => DropIndicatorAria, - renderDropIndicator?: (target: DropTarget) => React.JSX.Element, + renderDropIndicator?: (target: DropTarget) => JSX.Element, dropTargetDelegate?: DropTargetDelegate, ListDropTargetDelegate: typeof ListDropTargetDelegate } @@ -80,13 +80,13 @@ export interface DragAndDropOptions extends Omit React.JSX.Element, + renderDragPreview?: (items: DragItem[]) => JSX.Element, /** * A function that renders a drop indicator element between two items in a collection. * This should render a `` element. If this function is not provided, a * default DropIndicator is provided. */ - renderDropIndicator?: (target: DropTarget) => React.JSX.Element, + renderDropIndicator?: (target: DropTarget) => JSX.Element, /** A custom delegate object that provides drop targets for pointer coordinates within the collection. */ dropTargetDelegate?: DropTargetDelegate } @@ -160,7 +160,7 @@ interface DropIndicatorContextValue { render: (props: DropIndicatorProps, ref: ForwardedRef) => ReactNode } -function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef): React.JSX.Element { +function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef): JSX.Element { let {render} = useContext(DropIndicatorContext)!; return <>{render(props, ref)}; } diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx index 51d8e478239..b06725f193d 100644 --- a/packages/react-aria-components/src/utils.tsx +++ b/packages/react-aria-components/src/utils.tsx @@ -12,7 +12,7 @@ import {AriaLabelingProps, DOMProps as SharedDOMProps} from '@react-types/shared'; import {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils'; -import React, {Context, createContext, CSSProperties, ForwardedRef, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; +import React, {Context, createContext, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; import ReactDOM from 'react-dom'; import {useIsSSR} from 'react-aria'; @@ -53,13 +53,13 @@ interface ProviderProps { children: ReactNode } -export function Provider({values, children}: ProviderProps): React.JSX.Element { +export function Provider({values, children}: ProviderProps): JSX.Element { for (let [Context, value] of values) { // @ts-ignore children = {children}; } - return children as React.JSX.Element; + return children as JSX.Element; } export interface StyleProps {