Merge pull request #10552 from marmelab/fix-button-icon-prop-type

[TypeScript] Fix buttons `icon` prop type
marmelab · Feb 28, 2025 · ba8d76d · ba8d76d
2 parents 2be72f4 + 2d76032
commit ba8d76d
Show file tree

Hide file tree

Showing 21 changed files with 34 additions and 39 deletions.
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Fragment, ReactElement, useState } from 'react';
+import { Fragment, useState } from 'react';
 import ActionDelete from '@mui/icons-material/Delete';
 
 import { alpha, styled } from '@mui/material/styles';
@@ -159,7 +159,7 @@ export interface BulkDeleteWithConfirmButtonProps<
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
     confirmColor?: 'primary' | 'warning';
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     mutationMode: MutationMode;
     mutationOptions?: UseMutationOptions<
         RecordType,

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
 import ActionDelete from '@mui/icons-material/Delete';
 import { alpha, styled } from '@mui/material/styles';
 import {
@@ -110,7 +109,7 @@ export interface BulkDeleteWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
 > extends ButtonProps {
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     mutationOptions?: UseMutationOptions<
         RecordType,
         MutationOptionsError,

diff --git a/packages/ra-ui-materialui/src/button/BulkExportButton.tsx b/packages/ra-ui-materialui/src/button/BulkExportButton.tsx
@@ -96,7 +96,7 @@ const sanitizeRestProps = ({
 
 interface Props {
     exporter?: Exporter;
-    icon?: JSX.Element;
+    icon?: React.ReactNode;
     label?: string;
     onClick?: (e: Event) => void;
     resource?: string;

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Fragment, useState, ReactElement } from 'react';
+import { Fragment, useState } from 'react';
 import ActionUpdate from '@mui/icons-material/Update';
 
 import { alpha, styled } from '@mui/material/styles';
@@ -156,7 +156,7 @@ export interface BulkUpdateWithConfirmButtonProps<
 > extends ButtonProps {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     data: any;
     onSuccess?: () => void;
     onError?: (error: any) => void;

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
 import ActionUpdate from '@mui/icons-material/Update';
 import { alpha, styled } from '@mui/material/styles';
 import {
@@ -117,7 +116,7 @@ export interface BulkUpdateWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
 > extends ButtonProps {
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     data: any;
     onSuccess?: () => void;
     onError?: (error: any) => void;

diff --git a/packages/ra-ui-materialui/src/button/Button.tsx b/packages/ra-ui-materialui/src/button/Button.tsx
@@ -93,7 +93,7 @@ export const Button = <RootComponent extends React.ElementType = 'button'>(
 
 interface Props<RootComponent extends React.ElementType> {
     alignIcon?: 'left' | 'right';
-    children?: React.ReactElement;
+    children?: React.ReactNode;
     className?: string;
     component?: RootComponent;
     to?: LocationDescriptor | To;

diff --git a/packages/ra-ui-materialui/src/button/CloneButton.tsx b/packages/ra-ui-materialui/src/button/CloneButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo, ReactElement } from 'react';
+import { memo, ReactNode } from 'react';
 import Queue from '@mui/icons-material/Queue';
 import { Link } from 'react-router-dom';
 import { stringify } from 'query-string';
@@ -56,7 +56,7 @@ const sanitizeRestProps = ({
 
 interface Props {
     record?: any;
-    icon?: ReactElement;
+    icon?: ReactNode;
     scrollToTop?: boolean;
 }
 

diff --git a/packages/ra-ui-materialui/src/button/CreateButton.tsx b/packages/ra-ui-materialui/src/button/CreateButton.tsx
@@ -109,7 +109,7 @@ const defaultIcon = <ContentAdd />;
 
 interface Props {
     resource?: string;
-    icon?: React.ReactElement;
+    icon?: React.ReactNode;
     scrollToTop?: boolean;
     to?: LocationDescriptor | To;
 }

diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.tsx b/packages/ra-ui-materialui/src/button/DeleteButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
 import { UseMutationOptions } from '@tanstack/react-query';
 import {
     RaRecord,
@@ -98,7 +97,7 @@ export interface DeleteButtonProps<
     confirmTitle?: React.ReactNode;
     confirmContent?: React.ReactNode;
     confirmColor?: 'primary' | 'warning';
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     mutationMode?: MutationMode;
     mutationOptions?: UseMutationOptions<
         RecordType,

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, ReactEventHandler, ReactElement } from 'react';
+import React, { Fragment, ReactEventHandler } from 'react';
 import ActionDelete from '@mui/icons-material/Delete';
 import clsx from 'clsx';
 
@@ -104,8 +104,8 @@ export interface DeleteWithConfirmButtonProps<
 > extends ButtonProps {
     confirmTitle?: React.ReactNode;
     confirmContent?: React.ReactNode;
+    icon?: React.ReactNode;
     confirmColor?: 'primary' | 'warning';
-    icon?: ReactElement;
     mutationMode?: MutationMode;
     onClick?: ReactEventHandler<any>;
     // May be injected by Toolbar - sanitized in Button

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement, ReactEventHandler } from 'react';
+import { ReactNode, ReactEventHandler } from 'react';
 import ActionDelete from '@mui/icons-material/Delete';
 import clsx from 'clsx';
 import { UseMutationOptions } from '@tanstack/react-query';
@@ -61,7 +61,7 @@ export interface DeleteWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
 > extends ButtonProps {
-    icon?: ReactElement;
+    icon?: ReactNode;
     onClick?: ReactEventHandler<any>;
     mutationOptions?: UseMutationOptions<
         RecordType,

diff --git a/packages/ra-ui-materialui/src/button/EditButton.tsx b/packages/ra-ui-materialui/src/button/EditButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import ContentCreate from '@mui/icons-material/Create';
@@ -77,7 +77,7 @@ const defaultIcon = <ContentCreate />;
 const stopPropagation = e => e.stopPropagation();
 
 interface Props<RecordType extends RaRecord = any> {
-    icon?: ReactElement;
+    icon?: ReactNode;
     label?: string;
     record?: RecordType;
     resource?: string;

diff --git a/packages/ra-ui-materialui/src/button/ExportButton.tsx b/packages/ra-ui-materialui/src/button/ExportButton.tsx
@@ -96,7 +96,7 @@ const sanitizeRestProps = ({
 
 interface Props {
     exporter?: Exporter;
-    icon?: JSX.Element;
+    icon?: React.ReactNode;
     label?: string;
     maxResults?: number;
     onClick?: (e: Event) => void;

diff --git a/packages/ra-ui-materialui/src/button/ListButton.tsx b/packages/ra-ui-materialui/src/button/ListButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
 import ActionList from '@mui/icons-material/List';
 import { Link } from 'react-router-dom';
 import { useResourceContext, useCreatePath, useCanAccess } from 'ra-core';
@@ -78,7 +77,7 @@ const scrollStates = {
 const defaultIcon = <ActionList />;
 
 interface Props {
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     label?: string;
     resource?: string;
     scrollToTop?: boolean;

diff --git a/packages/ra-ui-materialui/src/button/RefreshButton.tsx b/packages/ra-ui-materialui/src/button/RefreshButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement, MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import NavigationRefresh from '@mui/icons-material/Refresh';
 import { useRefresh } from 'ra-core';
 
@@ -35,7 +35,7 @@ const defaultIcon = <NavigationRefresh />;
 
 interface Props {
     label?: string;
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     onClick?: (e: MouseEvent) => void;
 }
 

diff --git a/packages/ra-ui-materialui/src/button/RefreshIconButton.tsx b/packages/ra-ui-materialui/src/button/RefreshIconButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, ReactElement } from 'react';
+import { useCallback } from 'react';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import NavigationRefresh from '@mui/icons-material/Refresh';
@@ -45,7 +45,7 @@ const defaultIcon = <NavigationRefresh />;
 
 interface Props {
     className?: string;
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     label?: string;
     onClick?: (e: MouseEvent) => void;
 }

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.tsx b/packages/ra-ui-materialui/src/button/SaveButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MouseEventHandler, ReactElement, useCallback } from 'react';
+import { MouseEventHandler, useCallback } from 'react';
 import { UseMutationOptions } from '@tanstack/react-query';
 import { styled } from '@mui/material/styles';
 import { Button, ButtonProps, CircularProgress } from '@mui/material';
@@ -24,7 +24,7 @@ import {
  * @prop {string} label Button label. Defaults to 'ra.action.save', translated.
  * @prop {boolean} disabled Disable the button.
  * @prop {string} variant Material UI variant for the button. Defaults to 'contained'.
- * @prop {ReactElement} icon
+ * @prop {ReactNode} icon
  * @prop {function} mutationOptions Object of options passed to react-query.
  * @prop {function} transform Callback to execute before calling the dataProvider. Receives the data from the form, must return that transformed data. Can be asynchronous (and return a Promise)
  * @prop {boolean} alwaysEnable Force enabling the <SaveButton>. If it's not defined, the `<SaveButton>` will be enabled using `react-hook-form`'s `isValidating` state props and form context's `saving` prop (disabled if isValidating or saving, enabled otherwise).
@@ -159,7 +159,7 @@ interface Props<
 > {
     className?: string;
     disabled?: boolean;
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     invalid?: boolean;
     label?: string;
     mutationOptions?: UseMutationOptions<

diff --git a/packages/ra-ui-materialui/src/button/ShowButton.tsx b/packages/ra-ui-materialui/src/button/ShowButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { memo, ReactElement } from 'react';
+import { memo } from 'react';
 import ImageEye from '@mui/icons-material/RemoveRedEye';
 import { Link } from 'react-router-dom';
 import {
@@ -76,7 +76,7 @@ const defaultIcon = <ImageEye />;
 const stopPropagation = e => e.stopPropagation();
 
 interface Props<RecordType extends RaRecord = any> {
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     label?: string;
     record?: RecordType;
     resource?: string;

diff --git a/packages/ra-ui-materialui/src/button/SortButton.tsx b/packages/ra-ui-materialui/src/button/SortButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement, memo } from 'react';
+import { memo } from 'react';
 import clsx from 'clsx';
 import {
     Button,
@@ -172,7 +172,7 @@ const arePropsEqual = (prevProps, nextProps) =>
 export interface SortButtonProps {
     className?: string;
     fields: string[];
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     label?: string;
     resource?: string;
     sx?: SxProps;

diff --git a/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Fragment, useState, ReactElement } from 'react';
+import { Fragment, useState } from 'react';
 import ActionUpdate from '@mui/icons-material/Update';
 
 import { alpha, styled } from '@mui/material/styles';
@@ -157,7 +157,7 @@ export interface UpdateWithConfirmButtonProps<
 > extends ButtonProps {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     data: any;
     mutationMode?: MutationMode;
     mutationOptions?: UseMutationOptions<

diff --git a/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { alpha, styled } from '@mui/material/styles';
-import { ReactElement } from 'react';
 import ActionUpdate from '@mui/icons-material/Update';
 import {
     useRefresh,
@@ -113,7 +112,7 @@ export interface UpdateWithUndoButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
 > extends ButtonProps {
-    icon?: ReactElement;
+    icon?: React.ReactNode;
     data: any;
     mutationOptions?: UseMutationOptions<
         RecordType,