Changes from react-element react-ts-codemod

Author: LukasTy

packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx

@@ -1499,11 +1499,14 @@ describe('<DataGridPro /> - Row editing', () => {
         }
       }, [hasFocus, inputRef]);
       return (
-        (<Portal>
-          <input ref={ref => {
-            setInputRef(ref);
-          }} data-testid="input" />
-        </Portal>)
+        <Portal>
+          <input
+            ref={(ref) => {
+              setInputRef(ref);
+            }}
+            data-testid="input"
+          />
+        </Portal>
       );
     }
     const renderEditCell = (props: GridRenderEditCellParams) => (

packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx

@@ -7,14 +7,14 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridActionsCellItemCommonProps {
   label: string;
-  icon?: React.ReactElement;
+  icon?: React.ReactElement<any>;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
   component?: React.ElementType;
 }
 
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
   (
-    | ({ showInMenu?: false; icon: React.ReactElement } & Omit<IconButtonProps, 'component'>)
+    | ({ showInMenu?: false; icon: React.ReactElement<any> } & Omit<IconButtonProps, 'component'>)
     | ({
         showInMenu: true;
         /**

packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx

@@ -89,7 +89,7 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
       title={
         apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(
           counter,
-        ) as React.ReactElement
+        ) as React.ReactElement<any>
       }
       enterDelay={1000}
       {...rootProps.slotProps?.baseTooltip}

packages/x-data-grid/src/components/panel/GridPanel.test.tsx

@@ -33,7 +33,7 @@ describe('<GridPanel />', () => {
     classes: classes as any,
     inheritComponent: Popper,
     muiName: 'MuiGridPanel',
-    render: (node: React.ReactElement) =>
+    render: (node: React.ReactElement<any>) =>
       render(
         <Wrapper>
           <div data-id="gridPanelAnchor" />

packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx

@@ -55,7 +55,7 @@ const GridToolbarDensitySelector = forwardRef<HTMLButtonElement, GridToolbarDens
       },
     ];
 
-    const startIcon = React.useMemo<React.ReactElement>(() => {
+    const startIcon = React.useMemo<React.ReactElement<any>>(() => {
       switch (density) {
         case 'compact':
           return <rootProps.slots.densityCompactIcon />;
@@ -92,7 +92,7 @@ const GridToolbarDensitySelector = forwardRef<HTMLButtonElement, GridToolbarDens
       return null;
     }
 
-    const densityElements = densityOptions.map<React.ReactElement>((option, index) => (
+    const densityElements = densityOptions.map<React.ReactElement<any>>((option, index) => (
       <rootProps.slots.baseMenuItem
         key={index}
         onClick={() => handleDensityUpdate(option.value)}

packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx

@@ -73,10 +73,10 @@ const GridToolbarFilterButton = forwardRef<HTMLButtonElement, GridToolbarFilterB
 
     const tooltipContentNode = React.useMemo(() => {
       if (preferencePanel.open) {
-        return apiRef.current.getLocaleText('toolbarFiltersTooltipHide') as React.ReactElement;
+        return apiRef.current.getLocaleText('toolbarFiltersTooltipHide') as React.ReactElement<any>;
       }
       if (activeFilters.length === 0) {
-        return apiRef.current.getLocaleText('toolbarFiltersTooltipShow') as React.ReactElement;
+        return apiRef.current.getLocaleText('toolbarFiltersTooltipShow') as React.ReactElement<any>;
       }
 
       const getOperatorLabel = (item: GridFilterItem): string =>

packages/x-data-grid/src/hooks/core/pipeProcessing/gridPipeProcessingApi.ts

@@ -38,7 +38,10 @@ export interface GridPipeProcessingLookup {
   hydrateRows: {
     value: GridHydrateRowsValue;
   };
-  exportMenu: { value: { component: React.ReactElement; componentName: string }[]; context: any };
+  exportMenu: {
+    value: { component: React.ReactElement<any>; componentName: string }[];
+    context: any;
+  };
   preferencePanel: { value: React.ReactNode; context: GridPreferencePanelsValue };
   restoreState: {
     value: GridRestoreStatePreProcessingValue;

packages/x-data-grid/src/models/api/gridDensityApi.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridDensity } from '../gridDensity';
 
 export interface GridDensityOption {
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
   label: string;
   value: GridDensity;
 }

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx

@@ -51,12 +51,12 @@ export interface ExportedDateTimeRangePickerTabsProps extends ExportedBaseTabsPr
    * Date tab icon.
    * @default DateRangeIcon
    */
-  dateIcon?: React.ReactElement;
+  dateIcon?: React.ReactElement<any>;
   /**
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon?: React.ReactElement;
+  timeIcon?: React.ReactElement<any>;
   /**
    * Override or extend the styles applied to the component.
    */

packages/x-date-pickers/src/DateCalendar/PickersFadeTransitionGroup.tsx

@@ -10,7 +10,7 @@ import {
 } from './pickersFadeTransitionGroupClasses';
 
 export interface PickersFadeTransitionGroupProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   className?: string;
   reduceAnimations: boolean;
   transKey: React.Key;

packages/x-date-pickers/src/DateCalendar/PickersSlideTransition.tsx

@@ -28,7 +28,7 @@ export interface ExportedSlideTransitionProps {
 export interface SlideTransitionProps
   extends Omit<CSSTransitionProps, 'timeout'>,
     ExportedSlideTransitionProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   className?: string;
   reduceAnimations: boolean;
   slideDirection: SlideDirection;
@@ -150,7 +150,7 @@ export function PickersSlideTransition(inProps: SlideTransitionProps) {
   return (
     <PickersSlideTransitionRoot
       className={clsx(classes.root, className)}
-      childFactory={(element: React.ReactElement) =>
+      childFactory={(element: React.ReactElement<any>) =>
         React.cloneElement(element, {
           classNames: transitionClasses,
         })