Annotate Grid and List return types explicitly to avoid redundant inlined inferred types (#876)

Author: Andarist

lib/components/grid/Grid.test.tsx

@@ -168,7 +168,7 @@ describe("Grid", () => {
       />
     );
 
-    const NewCellComponent = vi.fn(() => null);
+    const NewCellComponent = vi.fn(() => <div />);
 
     rerender(
       <Grid

lib/components/grid/Grid.tsx

@@ -5,6 +5,7 @@ import {
   useImperativeHandle,
   useMemo,
   useState,
+  type ReactElement,
   type ReactNode
 } from "react";
 import { useIsRtl } from "../../core/useIsRtl";
@@ -36,7 +37,7 @@ export function Grid<
   style,
   tagName = "div" as TagName,
   ...rest
-}: GridProps<CellProps, TagName>) {
+}: GridProps<CellProps, TagName>): ReactElement {
   const cellProps = useMemoizedObject(cellPropsUnstable);
   const CellComponent = useMemo(
     () => memo(CellComponentProp, arePropsEqual),

lib/components/grid/types.ts

@@ -2,6 +2,7 @@ import type {
   ComponentProps,
   CSSProperties,
   HTMLAttributes,
+  ReactElement,
   ReactNode,
   Ref
 } from "react";
@@ -34,7 +35,7 @@ export type GridProps<
       rowIndex: number;
       style: CSSProperties;
     } & CellProps
-  ) => ReactNode;
+  ) => ReactElement;
 
   /**
    * Additional props to be passed to the cell-rendering component.

lib/components/list/List.test.tsx

@@ -181,7 +181,7 @@ describe("List", () => {
       />
     );
 
-    const NewRowComponent = vi.fn(() => null);
+    const NewRowComponent = vi.fn(() => <div />);
 
     rerender(
       <List

lib/components/list/List.tsx

@@ -5,6 +5,7 @@ import {
   useImperativeHandle,
   useMemo,
   useState,
+  type ReactElement,
   type ReactNode
 } from "react";
 import { useVirtualizer } from "../../core/useVirtualizer";
@@ -35,7 +36,7 @@ export function List<
   tagName = "div" as TagName,
   style,
   ...rest
-}: ListProps<RowProps, TagName>) {
+}: ListProps<RowProps, TagName>): ReactElement {
   const rowProps = useMemoizedObject(rowPropsUnstable);
   const RowComponent = useMemo(
     () => memo(RowComponentProp, arePropsEqual),

lib/components/list/types.ts

@@ -2,6 +2,7 @@ import type {
   ComponentProps,
   CSSProperties,
   HTMLAttributes,
+  ReactElement,
   ReactNode,
   Ref
 } from "react";
@@ -98,7 +99,7 @@ export type ListProps<
       index: number;
       style: CSSProperties;
     } & RowProps
-  ) => ReactNode;
+  ) => ReactElement;
 
   /**
    * Number of items to be rendered in the list.

scripts/utils/getPropTypeText.ts

@@ -5,6 +5,14 @@ export function getPropTypeText(prop: PropItem) {
   if (!textToFormat && prop.type.name.includes(":")) {
     // Edge case where some prop types aren't registered as containing raw TS
     textToFormat = prop.type.name;
+
+    // List/Grid and rowComponent/cellComponent are annotated with a return type of ReactElement instead of ReactNode
+    // As a result of this change the generated docs are significantly less readable, so tidy them up here
+    // See github.com/bvaughn/react-window/issues/875
+    textToFormat = textToFormat.replace(
+      "ReactElement<unknown, string | JSXElementConstructor<...>>",
+      "ReactNode"
+    );
   }
 
   if (!textToFormat) {