Chore: Use ReactNode instead of ReactElement where applicable in ra-core

jonathanarnault · jonathanarnault · commit 0a387f2ad631 · 2025-10-23T10:23:31.000+02:00
diff --git a/docs_headless/src/content/docs/ReferenceArrayFieldBase.md b/docs_headless/src/content/docs/ReferenceArrayFieldBase.md
@@ -83,8 +83,8 @@ You can change how the list of related records is rendered by passing a custom c
 | -------------- | -------- | --------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
 | `source`       | Required | `string`                                                                          | -                                | Name of the property to display                                                                        |
 | `reference`    | Required | `string`                                                                          | -                                | The name of the resource for the referenced records, e.g. 'tags'                                       |
-| `children`     | Optional\* | `Element`                                                                         |               | One or several elements that render a list of records based on a `ListContext`                         |
-| `render`     | Optional\* | `(ListContext) => Element`                                                                         |               | A function that takes a list context and renders a list of records                        |
+| `children`     | Optional\* | `ReactNode`                                                                         |               | One or several elements that render a list of records based on a `ListContext`                         |
+| `render`     | Optional\* | `(ListContext) => ReactNode`                                                                         |               | A function that takes a list context and renders a list of records                        |
 | `empty`        | Optional | `ReactNode`                                                                       | -                                | The component to render when the related records list is empty                                         |
 | `error`        | Optional | `ReactNode`                                                                       | -                                | The component to render when an error occurs while fetching the related records                        |
 | `filter`       | Optional | `Object`                                                                          | -                                | Filters to use when fetching the related records (the filtering is done client-side)                   |
diff --git a/docs_headless/src/content/docs/ReferenceManyFieldBase.md b/docs_headless/src/content/docs/ReferenceManyFieldBase.md
@@ -88,8 +88,8 @@ export const PostList = () => (
 | -------------- | -------- | --------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
 | `reference`    | Required | `string`                                                                          | -                                | The name of the resource for the referenced records, e.g. 'books'                   |
 | `target`       | Required | `string`                                                                          | -                                | Target field carrying the relationship on the referenced resource, e.g. 'user_id'   |
-| `children`     | Optional\* | `Element`                                                                         | -                                | One or several elements that render a list of records based on a `ListContext`      |
-| `render`     | Optional\* | `(ListContext) => Element`                                                                         | -                                | Function that receives a `ListContext` and returns an element      |
+| `children`     | Optional\* | `ReactNode`                                                                         | -                                | One or several elements that render a list of records based on a `ListContext`      |
+| `render`     | Optional\* | `(ListContext) => ReactNode`                                                                         | -                                | Function that receives a `ListContext` and returns an element      |
 | `debounce`     | Optional | `number`                                                                          | 500                              | debounce time in ms for the `setFilters` callbacks                                  |
 | `empty`        | Optional | `ReactNode`                                                                       | -                                | Element to display when there are no related records.                                |
 | `error`        | Optional | `ReactNode`                                                                       | -                                | The component to render when an error occurs while fetching the related records     |
diff --git a/docs_headless/src/content/docs/ReferenceManyInputBase.md b/docs_headless/src/content/docs/ReferenceManyInputBase.md
@@ -68,7 +68,7 @@ const ProductEdit = () => (
 | ----------------- | -------- | ------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `target`          | Required | `string`                  | -                                | Target field carrying the relationship on the referenced resource, e.g. 'user_id'                                                                                      |
 | `reference`       | Required | `string`                  | -                                | The name of the resource for the referenced records, e.g. 'books'                                                                                                      |
-| `children`        | Optional | `Element`                 | -                                | One or several elements that render a list of records based on a `ListContext`                                                                                         |
+| `children`        | Optional | `ReactNode`                 | -                                | One or several elements that render a list of records based on a `ListContext`                                                                                         |
 | `defaultValue`    | Optional | `array`                   | -                                | Default value of the input.                                                                                                                                            |
 | `filter`          | Optional | `Object`                  | -                                | Filters to use when fetching the related records, passed to `getManyReference()`                                                                                       |
 | `mutationOptions` | Optional | `UseMutationOptions`      | -                                | Options for the mutations (`create`, `update` and `delete`)                                                                                                            |
diff --git a/docs_headless/src/content/docs/ReferenceOneFieldBase.md b/docs_headless/src/content/docs/ReferenceOneFieldBase.md
@@ -69,8 +69,8 @@ const BookDetails = () => {
 | -------------- | ---------- | -------------------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------- |
 | `reference`    | Required   | `string`                                                                         | -                               | The name of the resource for the referenced records, e.g. 'book_details'          |
 | `target`       | Required   | string                                                                           | -                               | Target field carrying the relationship on the referenced resource, e.g. 'book_id' |
-| `children`     | Optional\* | `Element`                                                                        | -                               | React component to render the referenced record.                                  |
-| `render`       | Optional\* | `(ReferenceFieldContext) => Element`                                             | -                               | A function that takes the `ReferenceFieldContext` and return a React element      |
+| `children`     | Optional\* | `ReactNode`                                                                        | -                               | React component to render the referenced record.                                  |
+| `render`       | Optional\* | `(ReferenceFieldContext) => ReactNode`                                             | -                               | A function that takes the `ReferenceFieldContext` and return a React element      |
 | `empty`        | Optional   | `ReactNode`                                                                      | -                               | The text or element to display when the referenced record is empty                |
 | `filter`       | Optional   | `Object`                                                                         | `{}`                            | Used to filter referenced records                                                 |
 | `link`         | Optional   | `string                                                                          | Function`                       | `edit`                                                                            | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
diff --git a/docs_headless/src/content/docs/ReferenceOneInputBase.md b/docs_headless/src/content/docs/ReferenceOneInputBase.md
@@ -56,11 +56,11 @@ const BookEdit = () => (
 | ----------------- | -------- | -------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `target`          | Required | `string`             | -                               | Target field carrying the relationship on the referenced resource, e.g. 'book_id' |
 | `reference`       | Required | `string`             | -                               | The name of the resource for the referenced records, e.g. 'book_details' |
-| `children`        | Optional | `Element`            | -                               | One or several input elements that accept a `source` prop |
+| `children`        | Optional | `ReactNode`            | -                               | One or several input elements that accept a `source` prop |
 | `defaultValue`    | Optional | `Object`             | -                               | Default value for the related record (in case it does not yet exist) |
-| `error`           | Optional | `Element`            | -                               | The element to display when an error occurs while loading a reference |
+| `error`           | Optional | `ReactNode`            | -                               | The element to display when an error occurs while loading a reference |
 | `filter`          | Optional | `Object`             | -                               | Filters to use when fetching the related record, passed to `getManyReference() |
-| `loading`         | Optional | `Element`            | -                               | The element to display while loading a reference |
+| `loading`         | Optional | `ReactNode`            | -                               | The element to display while loading a reference |
 | `mutationOptions` | Optional | `UseMutationOptions` | -                               | Options for the mutations (`create` and `update`) |
 | `render`          | Optional | `Function`            | -                               | A function that returns the children to display. Takes precedence over `children` |
 | `sort`            | Optional | `{ field, order }`   | `{ field: 'id', order: 'ASC' }` | Sort order to use when fetching the related record, passed to `getManyReference() |
diff --git a/docs_headless/src/content/docs/SimpleFormIteratorBase.md b/docs_headless/src/content/docs/SimpleFormIteratorBase.md
@@ -67,4 +67,4 @@ const AddItemButton = () => {
 
 | Prop              | Required | Type           | Default               | Description                                   |
 |-------------------|----------|----------------|-----------------------|-----------------------------------------------|
-| `children`        | Optional | `ReactElement` | -                     | List of inputs to display for each array item |
+| `children`        | Optional | `ReactNode` | -                     | List of inputs to display for each array item |
diff --git a/packages/ra-core/src/auth/WithPermissions.tsx b/packages/ra-core/src/auth/WithPermissions.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Children, ReactElement, ComponentType, createElement } from 'react';
+import { Children, ComponentType, createElement } from 'react';
 import { Location } from 'react-router-dom';
 
 import warning from '../util/warning';
@@ -12,7 +12,7 @@ export interface WithPermissionsChildrenParams {
 
 type WithPermissionsChildren = (
     params: WithPermissionsChildrenParams
-) => ReactElement;
+) => React.ReactNode;
 
 export interface WithPermissionsProps {
     authParams?: object;
diff --git a/packages/ra-core/src/controller/field/ReferenceArrayFieldBase.tsx b/packages/ra-core/src/controller/field/ReferenceArrayFieldBase.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactElement, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { FilterPayload, RaRecord, SortPayload } from '../../types';
@@ -170,7 +170,9 @@ export interface ReferenceArrayFieldBaseProps<
     ReferenceRecordType extends RaRecord = RaRecord,
 > extends BaseFieldProps<RecordType> {
     children?: ReactNode;
-    render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
+    render?: (
+        props: ListControllerResult<ReferenceRecordType>
+    ) => React.ReactNode;
     error?: ReactNode;
     loading?: ReactNode;
     empty?: ReactNode;
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.spec.tsx b/packages/ra-core/src/controller/input/useReferenceArrayInputController.spec.tsx
@@ -11,9 +11,11 @@ import { CoreAdminContext } from '../../core';
 import { testDataProvider } from '../../dataProvider';
 import { ChoicesContextValue, Form } from '../../form';
 import { SORT_ASC } from '../list/queryReducer';
+import { GetManyResult, RaRecord } from '../../types';
 
 const ReferenceArrayInputController = (
     props: UseReferenceArrayInputParams & {
+        field: { value: any };
         children: (params: ChoicesContextValue) => ReactElement;
     }
 ) => {
@@ -157,7 +159,7 @@ describe('useReferenceArrayInputController', () => {
                         getMany: () =>
                             Promise.resolve({
                                 data: [{ id: 1, title: 'foo' }],
-                            }),
+                            } satisfies GetManyResult<RaRecord> as any),
                     })}
                 >
                     <Form onSubmit={jest.fn()}>
@@ -545,11 +547,7 @@ describe('useReferenceArrayInputController', () => {
     });
 
     it('should have props compatible with the ListContext', async () => {
-        const children = ({
-            setPage,
-            setPerPage,
-            setSort,
-        }): React.ReactElement => {
+        const children = ({ setPage, setPerPage, setSort }) => {
             const handleSetPage = () => {
                 setPage(2);
             };
diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx b/packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useCallback, ReactElement } from 'react';
+import { useState, useCallback } from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import expect from 'expect';
 
@@ -21,9 +21,7 @@ const ReferenceInputController = (
     const inputProps = useInput({
         ...rest,
     });
-    return children(
-        useReferenceInputController({ ...rest, ...inputProps })
-    ) as ReactElement;
+    return children(useReferenceInputController({ ...rest, ...inputProps }));
 };
 
 describe('useReferenceInputController', () => {
diff --git a/packages/ra-core/src/controller/record/OptionalRecordContextProvider.tsx b/packages/ra-core/src/controller/record/OptionalRecordContextProvider.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
 import { RaRecord } from '../../types';
 import { RecordContextProvider } from './RecordContext';
 
@@ -24,7 +23,7 @@ export const OptionalRecordContextProvider = <
     value,
     children,
 }: {
-    children: ReactElement;
+    children: React.ReactNode;
     value?: RecordType;
 }) =>
     value ? (
diff --git a/packages/ra-core/src/core/CoreAdminUI.tsx b/packages/ra-core/src/core/CoreAdminUI.tsx
@@ -6,7 +6,6 @@ import {
     createElement,
     useState,
     ErrorInfo,
-    ReactElement,
 } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -154,7 +153,7 @@ export interface CoreAdminUIProps {
         errorInfo?: ErrorInfo;
         error: Error;
         resetErrorBoundary: (args) => void;
-    }) => ReactElement;
+    }) => React.ReactNode;
 
     /**
      * The main app layout component
diff --git a/packages/ra-core/src/core/Resource.tsx b/packages/ra-core/src/core/Resource.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType, ReactElement, isValidElement } from 'react';
+import { ComponentType, isValidElement } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { isValidElementType } from 'react-is';
 
@@ -36,7 +36,9 @@ export const Resource = (props: ResourceProps) => {
     );
 };
 
-const getElement = (ElementOrComponent: ComponentType<any> | ReactElement) => {
+const getElement = (
+    ElementOrComponent: ComponentType<any> | React.ReactNode
+) => {
     if (isValidElement(ElementOrComponent)) {
         return ElementOrComponent;
     }
diff --git a/packages/ra-core/src/core/useConfigureAdminRouterFromChildren.spec.tsx b/packages/ra-core/src/core/useConfigureAdminRouterFromChildren.spec.tsx
@@ -198,8 +198,7 @@ const TestedComponentWithPermissions = () => {
 };
 
 const TestedComponentWithOnlyLazyCustomRoutes = ({ navigateCallback }) => {
-    const [lazyRoutes, setLazyRoutes] =
-        React.useState<React.ReactElement | null>(null);
+    const [lazyRoutes, setLazyRoutes] = React.useState<React.ReactNode>(null);
 
     React.useEffect(() => {
         const timer = setTimeout(
diff --git a/packages/ra-core/src/form/useInput.spec.tsx b/packages/ra-core/src/form/useInput.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent, ReactElement } from 'react';
+import { FunctionComponent } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { CoreAdminContext, SourceContextProvider } from '../core';
@@ -11,7 +11,7 @@ import { DefaultValue } from './useInput.stories';
 
 const Input: FunctionComponent<
     {
-        children: (props: ReturnType<typeof useInput>) => ReactElement;
+        children: (props: ReturnType<typeof useInput>) => React.ReactNode;
     } & InputProps
 > = props => {
     const inputProps = useInput(props);
@@ -20,7 +20,7 @@ const Input: FunctionComponent<
 
 const InputWithCustomOnChange: FunctionComponent<
     {
-        children: (props: ReturnType<typeof useInput>) => ReactElement;
+        children: (props: ReturnType<typeof useInput>) => React.ReactNode;
     } & InputProps & { setContextValue?: (value: string) => void }
 > = ({ children, setContextValue, ...props }) => {
     const { getValues } = useFormContext();
diff --git a/packages/ra-core/src/i18n/TranslatableContextProvider.tsx b/packages/ra-core/src/i18n/TranslatableContextProvider.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import {
     TranslatableContext,
     TranslatableContextValue,
@@ -11,7 +11,7 @@ export const TranslatableContextProvider = ({
 }: {
     children: ReactNode;
     value: TranslatableContextValue;
-}): ReactElement => {
+}) => {
     return (
         <TranslatableContext.Provider value={value}>
             {children}
diff --git a/packages/ra-core/src/preferences/PreferencesEditorContext.tsx b/packages/ra-core/src/preferences/PreferencesEditorContext.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { createContext, ReactElement } from 'react';
+import { createContext } from 'react';
 
 export const PreferencesEditorContext = createContext<
     PreferencesEditorContextValue | undefined
 >(undefined);
 
 export type PreferencesEditorContextValue = {
-    editor: ReactElement | null;
-    setEditor: React.Dispatch<React.SetStateAction<ReactElement | null>>;
+    editor: React.ReactNode;
+    setEditor: React.Dispatch<React.SetStateAction<React.ReactNode>>;
     preferenceKey: string | null;
     setPreferenceKey: React.Dispatch<React.SetStateAction<string | null>>;
     title: string | null;
diff --git a/packages/ra-core/src/preferences/PreferencesEditorContextProvider.tsx b/packages/ra-core/src/preferences/PreferencesEditorContextProvider.tsx
diff --git a/packages/ra-core/src/test-ui/SimpleFormIterator.tsx b/packages/ra-core/src/test-ui/SimpleFormIterator.tsx
