[TypeScript] Fix usage of ReactElement when it should be ReactNode

packages/ra-ui-materialui/src/button/DeleteButton.tsx

@@ -28,7 +28,7 @@ import {
  * @prop {string} label Button label. Defaults to 'ra.action.delete, translated.
  * @prop {boolean} disabled Disable the button.
  * @prop {string} variant Material UI variant for the button. Defaults to 'contained'.
- * @prop {ReactElement} icon Override the icon. Defaults to the Delete icon from Material UI.
+ * @prop {ReactNode} icon Override the icon. Defaults to the Delete icon from Material UI.
  *
  * @param {Props} inProps
  *

packages/ra-ui-materialui/src/detail/CreateView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ElementType, ReactElement, ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import {
     Card,
     type ComponentsOverrides,
@@ -55,8 +55,8 @@ export const CreateView = (props: CreateViewProps) => {
 
 export interface CreateViewProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    actions?: ReactElement | false;
-    aside?: ReactElement;
+    actions?: ReactNode | false;
+    aside?: ReactNode;
     component?: ElementType;
     sx?: SxProps<Theme>;
     title?: ReactNode;

packages/ra-ui-materialui/src/detail/EditView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ReactElement, ElementType, ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import {
     Card,
     CardContent,
@@ -104,7 +104,7 @@ export const EditView = (props: EditViewProps) => {
 
 export interface EditViewProps
     extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'title'> {
-    actions?: ReactElement | false;
+    actions?: ReactNode | false;
     aside?: ReactNode;
     component?: ElementType;
     emptyWhileLoading?: boolean;

packages/ra-ui-materialui/src/detail/Show.tsx

@@ -47,7 +47,7 @@ import { Loading } from '../layout';
  * @typedef {(showContext: Object) => ReactNode} RenderProp
  * @param {ShowProps} inProps
  * @param {RenderProp} inProps.render A function rendering the page content, receive the show context as its argument.
- * @param {ReactElement|false} inProps.actions An element to display above the page content, or false to disable actions.
+ * @param {ReactNode|false} inProps.actions An element to display above the page content, or false to disable actions.
  * @param {string} inProps.className A className to apply to the page content.
  * @param {ElementType} inProps.component The component to use as root component (div by default).
  * @param {boolean} inProps.emptyWhileLoading Do not display the page content while loading the initial data.

packages/ra-ui-materialui/src/detail/Tab.tsx

@@ -164,7 +164,7 @@ export interface TabProps extends Omit<MuiTabProps, 'children'> {
     className?: string;
     divider?: ReactNode;
     icon?: ReactElement;
-    label: string | ReactElement;
+    label: ReactNode;
     path?: string;
     record?: RaRecord;
     spacing?: ResponsiveStyleValue<number | string>;

packages/ra-ui-materialui/src/field/ReferenceOneField.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { Typography } from '@mui/material';
 import {
@@ -106,7 +106,7 @@ export interface ReferenceOneFieldProps<
     /**
      * @deprecated Use the empty prop instead
      */
-    emptyText?: string | ReactElement;
+    emptyText?: ReactNode;
     empty?: ReactNode;
     offline?: ReactNode;
     queryOptions?: Omit<

packages/ra-ui-materialui/src/field/TranslatableFields.tsx

@@ -68,7 +68,7 @@ import { TranslatableFieldsTabContent } from './TranslatableFieldsTabContent';
  * @param props The component props
  * @param {string} props.defaultLocale The locale selected by default. Default to 'en'.
  * @param {string[]} props.locales An array of the possible locales in the form. For example [{ 'en', 'fr' }].
- * @param {ReactElement} props.selector The element responsible for selecting a locale. Defaults to Material UI tabs.
+ * @param {ReactNode} props.selector The element responsible for selecting a locale. Defaults to Material UI tabs.
  */
 export const TranslatableFields = (inProps: TranslatableFieldsProps) => {
     const props = useThemeProps({

packages/ra-ui-materialui/src/form/SimpleForm.tsx

@@ -39,10 +39,10 @@ import { Toolbar } from './Toolbar';
  * );
  *
  * @typedef {Object} Props the props you can use (other props are injected by Create or Edit)
- * @prop {ReactElement[]} children Input elements
+ * @prop {ReactNode[]} children Input elements
  * @prop {Object} defaultValues
  * @prop {Function} validate
- * @prop {ReactElement} toolbar The element displayed at the bottom of the form, containing the SaveButton
+ * @prop {ReactNode} toolbar The element displayed at the bottom of the form, containing the SaveButton
  *
  * @param {Props} props
  */

packages/ra-ui-materialui/src/form/TabbedForm.tsx

@@ -67,10 +67,10 @@ import { FormTab } from './FormTab';
  * );
  *
  * @typedef {Object} Props the props you can use (other props are injected by Create or Edit)
- * @prop {ReactElement[]} FormTab elements
+ * @prop {ReactNode[]} FormTab elements
  * @prop {Object} defaultValues
  * @prop {Function} validate
- * @prop {ReactElement} toolbar The element displayed at the bottom of the form, containing the SaveButton
+ * @prop {ReactNode} toolbar The element displayed at the bottom of the form, containing the SaveButton
  *
  * @param {Props} props
  */
@@ -126,7 +126,7 @@ export interface TabbedFormProps
     resource?: string;
     syncWithLocation?: boolean;
     tabs?: ReactElement;
-    toolbar?: ReactElement | false;
+    toolbar?: ReactNode | false;
     warnWhenUnsavedChanges?: boolean;
 }
 

packages/ra-ui-materialui/src/input/ReferenceError.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import TextField from '@mui/material/TextField';
 
+// @deprecated
 export const ReferenceError = ({
     label,
     error,
 }: {
-    label?: string | ReactElement | false;
+    label?: ReactNode;
     error: Error;
 }) => (
     <TextField

packages/ra-ui-materialui/src/input/SelectInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-    type ReactElement,
+    type ReactNode,
     useCallback,
     useEffect,
     type ChangeEvent,
@@ -415,7 +415,7 @@ export type SelectInputProps = Omit<CommonInputProps, 'source'> &
     ChoicesProps &
     Omit<SupportCreateSuggestionOptions, 'handleChange'> &
     Omit<TextFieldProps, 'label' | 'helperText' | 'classes' | 'onChange'> & {
-        emptyText?: string | ReactElement;
+        emptyText?: ReactNode;
         emptyValue?: any;
         resettable?: boolean;
         // Source is optional as AutocompleteInput can be used inside a ReferenceInput that already defines the source

packages/ra-ui-materialui/src/input/TranslatableInputs.tsx

@@ -6,7 +6,7 @@ import {
     styled,
 } from '@mui/material/styles';
 import { StackProps, useThemeProps } from '@mui/material';
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import {
     TranslatableContextProvider,
     useTranslatable,
@@ -67,7 +67,7 @@ import { TranslatableInputsTabContent } from './TranslatableInputsTabContent';
  * @param props The component props
  * @param {string} props.defaultLocale The locale selected by default. Default to 'en'.
  * @param {string[]} props.locales An array of the possible locales. For example: `['en', 'fr'].
- * @param {ReactElement} props.selector The element responsible for selecting a locale. Defaults to Material UI tabs.
+ * @param {ReactNode} props.selector The element responsible for selecting a locale. Defaults to Material UI tabs.
  */
 export const TranslatableInputs = (inProps: TranslatableInputsProps) => {
     const props = useThemeProps({

packages/ra-ui-materialui/src/layout/MenuItemLink.tsx

@@ -1,10 +1,4 @@
-import React, {
-    forwardRef,
-    useCallback,
-    useRef,
-    type ReactElement,
-    type ReactNode,
-} from 'react';
+import React, { forwardRef, useCallback, useRef, type ReactNode } from 'react';
 import {
     type ComponentsOverrides,
     styled,
@@ -193,7 +187,7 @@ export type MenuItemLinkProps = Omit<
     LinkProps & MenuItemProps<'li'>,
     'placeholder' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'
 > & {
-    leftIcon?: ReactElement;
+    leftIcon?: ReactNode;
     primaryText?: ReactNode;
     /**
      * @deprecated

packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx

@@ -5,7 +5,7 @@ import {
     styled,
     useThemeProps,
 } from '@mui/material/styles';
-import { memo, type ReactElement } from 'react';
+import { memo, type ReactNode } from 'react';
 import {
     IconButton,
     ListItem,
@@ -262,9 +262,9 @@ const StyledListItem = styled(ListItem, {
 });
 
 export interface FilterListItemProps extends Omit<ListItemProps, 'value'> {
-    label: string | ReactElement;
+    label: ReactNode;
     value: any;
-    icon?: ReactElement;
+    icon?: ReactNode;
     toggleFilter?: (value: any, filters: any) => any;
     isSelected?: (value: any, filters: any) => boolean;
 }

packages/ra-ui-materialui/src/list/filter/RemoveSavedQueryIconButton.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { ReactElement, useState } from 'react';
+import { useState } from 'react';
 import { IconButton, IconButtonProps } from '@mui/material';
 import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
 import { useTranslate } from 'ra-core';
 
 import { RemoveSavedQueryDialog } from './RemoveSavedQueryDialog';
 
-export const RemoveSavedQueryIconButton = (
-    props: IconButtonProps
-): ReactElement => {
+export const RemoveSavedQueryIconButton = (props: IconButtonProps) => {
     const [confirmationOpen, setConfirmationOpen] = useState(false);
     const handleConfirmationClose = (): void => {
         setConfirmationOpen(false);

packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactElement, memo } from 'react';
+import { memo } from 'react';
 import {
     IconButton,
     ListItem,
@@ -27,7 +27,7 @@ const arePropsEqual = (
     isEqual(prevProps.value, nextProps.value);
 
 export const SavedQueryFilterListItem = memo(
-    (inProps: SavedQueryFilterListItemProps): ReactElement => {
+    (inProps: SavedQueryFilterListItemProps) => {
         const props = useThemeProps({
             props: inProps,
             name: PREFIX,