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

Author: jonathanarnault

docs_headless/src/content/docs/ReferenceOneInputBase.md

@@ -58,9 +58,9 @@ const BookEdit = () => (
 | `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 |
 | `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() |

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;

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 ? (

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

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;
 }

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}

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;

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);

packages/ra-core/src/types.ts

@@ -343,10 +343,10 @@ export type AdminChildren =
     | Iterable<ReactNode | RenderResourcesFunction>
     | ReactNode;
 
-export type TitleComponent = string | ReactElement<any>;
+export type TitleComponent = ReactNode;
 export type CatchAllComponent = ComponentType<{ title?: TitleComponent }>;
 
-export type LoginComponent = ComponentType<{}> | ReactElement<any>;
+export type LoginComponent = ComponentType<{}> | ReactNode;
 export type DashboardComponent = ComponentType<WithPermissionsChildrenParams>;
 
 export interface CoreLayoutProps {

packages/ra-core/src/util/FieldTitle.tsx

@@ -15,9 +15,7 @@ export const FieldTitle = (props: FieldTitleProps) => {
     const translateLabel = useTranslateLabel();
 
     if (label === true) {
-        throw new Error(
-            'Label parameter must be a string, a ReactElement or false'
-        );
+        throw new Error('Label parameter must be a ReactNode');
     }
 
     if (label === false || label === '') {