[Chore]: Update ra-core to use ReactNode instead of ReactElement where applicable

jonathanarnault · jonathanarnault · commit 945ab5c6da24 · 2025-10-17T16:19:55.000+02:00
diff --git a/docs_headless/src/content/docs/DeletedRecordsListBase.md b/docs_headless/src/content/docs/DeletedRecordsListBase.md
@@ -59,7 +59,7 @@ That's enough to display the deleted records list, with functional simple filter
 
 | Prop                       | Required       | Type                            | Default                                  | Description                                                                                      |
 |----------------------------|----------------|---------------------------------|------------------------------------------|--------------------------------------------------------------------------------------------------|
-| `children`                 | Required       | `Element`                       |                   | The component used to render the list of deleted records.                                        |
+| `children`                 | Required       | `ReactNode`                       |                   | The component used to render the list of deleted records.                                        |
 | `authLoading`              | Optional       | `ReactNode`                     | -                                        | The component to render while checking for authentication and permissions.                       |
 | `debounce`                 | Optional       | `number`                        | `500`                                    | The debounce delay in milliseconds to apply when users change the sort or filter parameters.     |
 | `disable Authentication`   | Optional       | `boolean`                       | `false`                                  | Set to `true` to disable the authentication check.                                               |
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/ShowDeletedBase.md b/docs_headless/src/content/docs/ShowDeletedBase.md
@@ -74,5 +74,5 @@ const DeletedItem = ({ record }: { record: DeletedRecordType }) => {
 
 | Prop       | Required | Type       | Default | Description                                                                           |
 |------------|----------|------------|---------|---------------------------------------------------------------------------------------|
-| `children` | Required | `Element`  |         | The component used to render the deleted record.                                      |
+| `children` | Required | `ReactNode`  |         | The component used to render the deleted record.                                      |
 | `record`   | Optional | `RaRecord` |         | The deleted record. If not provided, the record from closest `RecordContext` is used. |
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,7 @@ export interface ReferenceArrayFieldBaseProps<
     ReferenceRecordType extends RaRecord = RaRecord,
 > extends BaseFieldProps<RecordType> {
     children?: ReactNode;
-    render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
+    render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
     error?: ReactNode;
     loading?: ReactNode;
     empty?: ReactNode;
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/useResourceDefinition.ts b/packages/ra-core/src/core/useResourceDefinition.ts
@@ -3,7 +3,11 @@ import defaults from 'lodash/defaults';
 
 import { useResourceDefinitions } from './useResourceDefinitions';
 import { useResourceContext } from './useResourceContext';
-import { ResourceDefinition, ResourceOptions } from '../types';
+import {
+    RecordToStringFunction,
+    ResourceDefinition,
+    ResourceOptions,
+} from '../types';
 
 /**
  * Hook to get the definition of a given resource
@@ -67,8 +71,5 @@ export interface UseResourceDefinitionOptions {
     readonly hasEdit?: boolean;
     readonly hasShow?: boolean;
     readonly hasCreate?: boolean;
-    readonly recordRepresentation?:
-        | string
-        | React.ReactElement
-        | ((record: any) => string);
+    readonly recordRepresentation?: React.ReactNode | RecordToStringFunction;
 }
diff --git a/packages/ra-core/src/form/useSuggestions.ts b/packages/ra-core/src/form/useSuggestions.ts
@@ -1,4 +1,4 @@
-import { useCallback, isValidElement, ReactElement } from 'react';
+import { useCallback, isValidElement } from 'react';
 import set from 'lodash/set';
 import {
     useChoices,
@@ -164,7 +164,7 @@ export const getSuggestionsFactory =
         selectedItem,
         suggestionLimit = 0,
     }: UseSuggestionsOptions & {
-        getChoiceText: (choice: any) => string | ReactElement;
+        getChoiceText: (choice: any) => React.ReactNode;
         getChoiceValue: (choice: any) => string;
     }) =>
     filter => {
diff --git a/packages/ra-core/src/i18n/TranslatableContextProvider.tsx b/packages/ra-core/src/i18n/TranslatableContextProvider.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement, ReactNode } from 'react';
 import {
     TranslatableContext,
     TranslatableContextValue,
@@ -9,9 +8,9 @@ export const TranslatableContextProvider = ({
     children,
     value,
 }: {
-    children: ReactNode;
+    children: React.ReactNode;
     value: TranslatableContextValue;
-}): ReactElement => {
+}): React.ReactNode => {
     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
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
     PreferencesEditorContext,
     PreferencesEditorContextValue,
 } from './PreferencesEditorContext';
 
 export const PreferencesEditorContextProvider = ({ children }) => {
     const [isEnabled, setIsEnabled] = useState(false);
-    const [editor, setEditor] = useState<ReactElement | null>(null);
+    const [editor, setEditor] = useState<React.ReactNode>(null);
     const [preferenceKey, setPreferenceKey] = useState<string | null>(null);
     const [path, setPath] = useState<string | null>(null);
     const [title, setTitleString] = useState<string | null>(null);
diff --git a/packages/ra-core/src/types.ts b/packages/ra-core/src/types.ts
diff --git a/packages/ra-core/src/util/FieldTitle.tsx b/packages/ra-core/src/util/FieldTitle.tsx
