@mui/x-codemod

Codemod scripts for MUI X

This repository contains a collection of codemod scripts based for use with jscodeshift that help update MUI X APIs.

Setup & run

npx @mui/x-codemod@latest <codemod> <paths...>

Applies a `@mui/x-codemod` to the specified paths

Positionals:
  codemod  The name of the codemod                                [string]
  paths    Paths forwarded to `jscodeshift`                       [string]

Options:
  --version     Show version number                                 [boolean]
  --help        Show help                                           [boolean]
  --parser      which parser for jscodeshift to use.
                                                    [string] [default: 'tsx']
  --jscodeshift Pass options directly to jscodeshift                  [array]

Examples:
  npx @mui/x-codemod@latest v8.0.0/preset-safe src
  npx @mui/x-codemod@latest v6.0.0/component-rename-prop src --
  --component=DataGrid --from=prop --to=newProp

jscodeshift options

To pass more options directly to jscodeshift, use --jscodeshift=.... For example:

# single option
npx @mui/x-codemod --jscodeshift=--run-in-band

# multiple options
npx @mui/x-codemod --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2

See all available options.

Recast Options

Options to recast's printer can be provided through jscodeshift's printOptions command line argument

npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"

v9.0.0

🚀 preset-safe for v9.0.0

A combination of all important transformers for migrating v8 to v9. ⚠️ This codemod should be run only once. It runs codemods for all MUI X packages. To run codemods for a specific package, refer to the respective section.

npx @mui/x-codemod@latest v9.0.0/preset-safe <path|folder>

The corresponding sub-sections are listed below

• preset-safe-for-charts
• preset-safe-for-pickers

Data Grid codemods

remove-stabilized-experimentalFeatures

Removes the charts property from the experimentalFeatures prop of DataGridPremium. If charts is the only property, the entire experimentalFeatures prop is removed.

npx @mui/x-codemod@latest v9.0.0/data-grid/remove-stabilized-experimentalFeatures <path|folder>

 <DataGridPremium
-  experimentalFeatures={{ charts: true }}
   chartsIntegration
 />

Charts codemods

🚀 preset-safe for Charts v9.0.0

The preset-safe codemods for Charts.

npx @mui/x-codemod@latest v9.0.0/charts/preset-safe <path|folder>

The list includes these transformers

• replace-heatmap-hide-legend-false
• replace-show-mark-default
• rename-id-to-series-id
• rename-chart-api-import
• rename-sankey-chart
• rename-chart-container
• rename-chart-data-provider
• rename-chart-zoom-slider
• remove-enable-keyboard-navigation
• remove-stabilized-experimentalFeatures
• remove-deprecated-series-types
• remove-is-bar-series-helpers

replace-heatmap-hide-legend-false

The default value of the hideLegend prop in the Heatmap component has changed from true to false in v9. This improves consistency across chart components and developer experience.

 <Heatmap
+  hideLegend
 />

rename-axis-tooltip-hook

The useAxisTooltip() hook has been renamed to useAxesTooltip() to better reflect its functionality of handling multiple axes.

-import { useAxisTooltip, UseAxisTooltipReturnValue, UseAxisTooltipParams } from '@mui/x-charts';
+import { useAxesTooltip, UseAxesTooltipReturnValue, UseAxesTooltipParams } from '@mui/x-charts';

The hook now always returns an array of tooltip data (one entry per active axis) instead of a single object. The multipleAxes parameter has been removed since the hook now always supports multiple axes.

After running the codemod to do the renaming make sure to adapt the hook returned value to your needs.

 function CustomTooltip() {
   // If you want to keep only one axis
-  const tooltipData = useAxisTooltip();
+  const tooltipData = useAxesTooltip()[0] ?? null;
   // If you use all the axes
-  const tooltipData = useAxisTooltip({ multipleAxes: true });
+  const tooltipData = useAxesTooltip();
 }

rename-chart-api-import

Moves the ChartApi type import from @mui/x-charts/ChartContainer to @mui/x-charts/context.

-import type { ChartApi } from '@mui/x-charts/ChartContainer';
+import type { ChartApi } from '@mui/x-charts/context';

rename-id-to-series-id

Rename the props id to seriesId.

- <PieArc id='series-a' />
+ <PieArc seriesId='series-a' />

Here is the list of slots and components that are impacted by the renaming:

| slot | Component | | :------------ | :--------------------------------------- | | pieArc | PieArc | | | PieArcPlot | | pieArcLabel | PieArcLabel | | | PieArcLabelPlot | | bar | BarElement, AnimatedRangeBarElementProps | | area | AnimatedArea, AreaElement | | line | AnimatedLine, LineElement | | mark | MarkElement | | lineHighlight | LineHighlightElement |

replace-show-mark-default

Add showMark: true to line series when not defined to keep the same default behavior.

- <LineChart series={[{ data: [/* ... */] }]} />
+ <LineChart series={[{ data: [/* ... */] showMark: true }]} />
- <ChartDataProvider series={[{ type: 'line', data: [/* ... */] }]} />
+ <ChartDataProvider series={[{ type: 'line', data: [/* ... */] showMark: true }]} />

rename-chart-zoom-slider

Renames the ChartZoomSlider component and related exports to ChartsZoomSlider (with an S) to align with other components.

-import { ChartZoomSlider } from '@mui/x-charts-pro';
+import { ChartsZoomSlider } from '@mui/x-charts-pro';

-import { ChartZoomSlider } from '@mui/x-charts-pro/ChartZoomSlider';
+import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider';

rename-sankey-chart

Stabilizes the Unstable_SankeyChart export by renaming it to SankeyChart.

-import { Unstable_SankeyChart } from '@mui/x-charts-pro';
+import { SankeyChart } from '@mui/x-charts-pro';

-import { Unstable_SankeyChart } from '@mui/x-charts-pro/SankeyChart';
+import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';

rename-chart-container

Renames the ChartContainer component and related exports to ChartsContainer (with an S) to align with other components.

-import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { ChartsContainer } from '@mui/x-charts/ChartsContainer';

-import { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
+import { ChartsContainerPro } from '@mui/x-charts-pro/ChartsContainerPro';

rename-chart-data-provider

Renames the ChartDataProvider component and related exports to ChartsDataProvider (with an S) to align with other components.

-import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
+import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider';

-import { ChartDataProviderPro } from '@mui/x-charts-pro/ChartDataProviderPro';
+import { ChartsDataProviderPro } from '@mui/x-charts-pro/ChartsDataProviderPro';

remove-enable-keyboard-navigation

Removes the enableKeyboardNavigation props set to true since it's now the default behavior.

 <LineChart
-  enableKeyboardNavigation
 />

remove-stabilized-experimentalFeatures

Removes the preferStrictDomainInLineCharts property from the experimentalFeatures prop since it's now the default behavior. If preferStrictDomainInLineCharts is the only property in the object, the entire experimentalFeatures prop is removed.

 <LineChart
-  experimentalFeatures={{ preferStrictDomainInLineCharts: true }}
   series={[]}
 />

remove-deprecated-series-types

Replaces deprecated series type aliases (CartesianSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType) with their new equivalents using generic types.

-import { CartesianSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType } from '@mui/x-charts';
+import { AllSeriesType, DefaultizedSeriesType, CartesianChartSeriesType, StackableChartSeriesType } from '@mui/x-charts';

-function processCartesian(series: CartesianSeriesType) {}
+function processCartesian(series: AllSeriesType<CartesianChartSeriesType>) {}

-function processDefaultizedCartesian(series: DefaultizedCartesianSeriesType) {}
+function processDefaultizedCartesian(series: DefaultizedSeriesType<CartesianChartSeriesType>) {}

-function processStackable(series: StackableSeriesType) {}
+function processStackable(series: DefaultizedSeriesType<StackableChartSeriesType>) {}

remove-is-bar-series-helpers

Replaces the deprecated isBarSeries() and isDefaultizedBarSeries() helper functions with direct series.type === 'bar' checks and removes the corresponding imports.

-import { isBarSeries, isDefaultizedBarSeries } from '@mui/x-charts';
-
-if (isBarSeries(series)) {
+if (series.type === 'bar') {
   console.log('bar series');
 }

-if (isDefaultizedBarSeries(series)) {
+if (series.type === 'bar') {
   console.log('defaultized bar series');
 }

Pickers codemods

🚀 preset-safe for Pickers v9.0.0

The preset-safe codemods for Pickers.

npx @mui/x-codemod@latest v9.0.0/pickers/preset-safe <path|folder>

The list includes these transformers

• rename-field-ref
• remove-enable-accessible-field-dom-structure
• remove-picker-day-2
• rename-picker-day-2
• rename-pickers-day
• rename-picker-classes
• remove-disable-margin
• migrate-text-field-props

rename-field-ref

Renames the unstableFieldRef prop to fieldRef on all Picker and Field components.

-<DateField unstableFieldRef={fieldRef} />
+<DateField fieldRef={fieldRef} />

-<DateRangePicker unstableStartFieldRef={startRef} unstableEndFieldRef={endRef} />
+<DateRangePicker startFieldRef={startRef} endFieldRef={endRef} />

-<DatePicker slotProps={{ field: { unstableFieldRef: fieldRef } }} />
+<DatePicker slotProps={{ field: { fieldRef: fieldRef } }} />

npx @mui/x-codemod@latest v9.0.0/pickers/rename-field-ref <path|folder>

remove-enable-accessible-field-dom-structure

Removes the enableAccessibleFieldDOMStructure prop from all Picker and Field components. The accessible DOM structure is now the only supported option and this prop has no effect.

-<DateField enableAccessibleFieldDOMStructure={false} />
+<DateField />

-<DatePicker enableAccessibleFieldDOMStructure={false} slots={{ textField: MyCustomTextField }} />
+<DatePicker slots={{ textField: MyCustomTextField }} />

-<DatePicker slotProps={{ field: { enableAccessibleFieldDOMStructure: false } }} />
+<DatePicker />

npx @mui/x-codemod@latest v9.0.0/pickers/remove-enable-accessible-field-dom-structure <path|folder>

remove-picker-day-2

Removes the unnecessary slots={{ day: PickerDay2 }} and slots={{ day: DateRangePickerDay2 }} usages, since PickerDay2 and DateRangePickerDay2 are the new defaults. Also handles objects passed through variables (for example const slots = { day: PickerDay2 }).

-<DatePicker slots={{ day: PickerDay2 }} />
+<DatePicker />

-<DateRangePicker slots={{ day: DateRangePickerDay2 }} />
+<DateRangePicker />

npx @mui/x-codemod@latest v9.0.0/pickers/remove-picker-day-2 <path>

rename-picker-day-2

Renames PickerDay2 and DateRangePickerDay2 components and their related types, classes, and theme component names to PickerDay and DateRangePickerDay.

-import { PickerDay2, PickerDay2Props, pickerDay2Classes } from '@mui/x-date-pickers/PickerDay2';
+import { PickerDay, PickerDayProps, pickerDayClasses } from '@mui/x-date-pickers/PickerDay';

-import { DateRangePickerDay2 } from '@mui/x-date-pickers-pro/DateRangePickerDay2';
+import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';

 const theme = createTheme({
   components: {
-    MuiPickerDay2: {
+    MuiPickerDay: {
       styleOverrides: { root: { color: 'red' } },
     },
   },
 });

npx @mui/x-codemod@latest v9.0.0/pickers/rename-picker-day-2 <path>

rename-pickers-day

Renames PickersDay to PickerDay and all related types, classes, and theme component names.

-import { PickersDay, PickersDayProps, pickersDayClasses } from '@mui/x-date-pickers/PickersDay';
+import { PickerDay, PickerDayProps, pickerDayClasses } from '@mui/x-date-pickers/PickerDay';

 const theme = createTheme({
   components: {
-    MuiPickersDay: {
+    MuiPickerDay: {
       styleOverrides: { root: { color: 'red' } },
     },
   },
 });

npx @mui/x-codemod@latest v9.0.0/pickers/rename-pickers-day <path>

rename-picker-classes

Renames PickerDay and DateRangePickerDay CSS class keys to their new equivalents.

-'& .MuiPickerDay-outsideCurrentMonth'
+'& .MuiPickerDay-dayOutsideMonth'

-'& .MuiDateRangePickerDay-rangeIntervalDayHighlightStart'
+'& .MuiDateRangePickerDay-selectionStart'

-'& .MuiDateRangePickerDay-dayInsideRangeInterval'
+'& .MuiDateRangePickerDay-insideSelection'

npx @mui/x-codemod@latest v9.0.0/pickers/rename-picker-classes <path>

remove-disable-margin

Removes the disableMargin prop from PickerDay and DateRangePickerDay components and replaces it with the --PickerDay-horizontalMargin CSS variable via the sx prop.

-<PickerDay disableMargin day={day} />
+<PickerDay day={day} sx={{ '--PickerDay-horizontalMargin': 0 }} />

-<DatePicker slotProps={{ day: { disableMargin: true } }} />
+<DatePicker slotProps={{ day: { sx: { '--PickerDay-horizontalMargin': 0 } } }} />

When disableMargin={false}, the prop is simply removed without adding the CSS variable.

npx @mui/x-codemod@latest v9.0.0/pickers/remove-disable-margin <path>

migrate-text-field-props

Rewrites the legacy InputProps, inputProps, InputLabelProps and FormHelperTextProps props on Picker, Field and PickersTextField components into the new slotProps.{input,htmlInput,inputLabel,formHelperText} shape. On Picker and Field components the new keys are nested inside slotProps.textField.slotProps; on PickersTextField they live directly under slotProps.

-<DateField
-  InputProps={{ name: 'birthday' }}
-  inputProps={{ 'data-testid': 'html-input' }}
-/>
+<DateField
+  slotProps={{
+    textField: {
+      slotProps: {
+        input: { name: 'birthday' },
+        htmlInput: { 'data-testid': 'html-input' },
+      },
+    },
+  }}
+/>

-<DatePicker slotProps={{ textField: { InputProps: { name: 'date' } } }} />
+<DatePicker slotProps={{ textField: { slotProps: { input: { name: 'date' } } } }} />

npx @mui/x-codemod@next v9.0.0/pickers/migrate-text-field-props <path>

v8.0.0

🚀 preset-safe for v8.0.0

A combination of all important transformers for migrating v7 to v8. ⚠️ This codemod should be run only once. It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts). To run codemods for a specific package, refer to the respective section.

npx @mui/x-codemod@latest v8.0.0/preset-safe <path|folder>

The corresponding sub-sections are listed below

• preset-safe-for-tree-view
• preset-safe-for-charts
• preset-safe-for-data-grid
• preset-safe-for-pickers

Tree View codemods

preset-safe for Tree View v8.0.0

The preset-safe codemods for Tree View.

npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe <path|folder>

The list includes these transformers

• rename-tree-view-simple-tree-view
• rename-tree-item-2

rename-tree-view-simple-tree-view

Renames the Tree View component to Simple Tree View

-import { TreeView } from '@mui/x-tree-view';
+import { SimpleTreeView } from '@mui/x-tree-view';

-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';

 return (
-  <TreeView>
+  <SimpleTreeView>
     <TreeItem itemId="1" label="First item" />
-  </TreeView>
+  </SimpleTreeView>
 );

rename-tree-item-2

Renames the TreeItem2 component to TreeItem (same for any subcomponents or utils like useTreeItem2 or TreeItem2Icon).

-import { TreeItem2 } from '@mui/x-tree-view';
+import { TreeItem } from '@mui/x-tree-view';

-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';

Charts codemods

preset-safe for Charts v8.0.0

The preset-safe codemods for Charts.

npx @mui/x-codemod@latest v8.0.0/charts/preset-safe <path|folder>

The list includes these transformers

• rename-legend-to-slots-legend
• replace-legend-direction-values
• rename-responsive-chart-container
• rename-label-and-tick-font-size

rename-legend-to-slots-legend

Renames legend props to the corresponding slotProps.

 <LineChart
-  legend={{ hiden: true}}
+  slotProps={{ legend: { hiden: true} }}
 />

replace-legend-direction-values

Replace row and column values by horizontal and vertical respectively.

 <BarChart
    slotProps={{
      legend: {
-        direction: "row"
+        direction: "horizontal"
      }
    }}
 />

replace-legend-position-values

Replace "left" | "middle" | "right" values "start" | "center" | "end" respectively. This is to align with the CSS values and reflect the RTL ability of the legend component.

 <BarChart
    slotProps={{
      legend: {
        position: {
-          horizontal: "left",
+          horizontal: "start",
        }
      }
    }}
 />

rename-responsive-chart-container

Renames ResponsiveChartContainer and ResponsiveChartContainerPro by ChartContainer and ChartContainerPro which have the same behavior in v8.

-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';

-<ResponsiveChartContainer>
+<ChartContainer>
   <BarPlot />
-</ResponsiveChartContainer>
+</ChartContainer>

rename-legend-position-type

Renames LegendPosition to Position.

-import { LegendPosition } from '@mui/x-charts/ChartsLegend';
+import { Position } from '@mui/x-charts/models';

[!WARNING] If you imported both ResponsiveChartContainer and ChartContainer in the same file, you might end up with duplicated import. Verify the git diff to remove the duplicate.

 import { ChartContainer } from '@mui/x-charts/ChartContainer';
-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';

rename-label-and-tick-font-size

Renames labelFontSize and tickFontSize props to the corresponding xxxStyle prop.

 <ChartsXAxis
-  labelFontSize={18}
+  labelStyle={{
+    fontSize: 18
+  }}
-  tickFontSize={20}
+  tickStyle={{
+    fontSize: 20
+  }}
 />

remove-on-axis-click-handler

Remove the <ChartsOnAxisClickHandler /> and move the associated onAxisClick prop to its parent.

[!WARNING] This codemode does not work if component got renamed or if the handler is not a direct child of the container.

+ <ChartContainer onAxisClick={() => {}}>
- <ChartContainer>
-   <ChartsOnAxisClickHandler onAxisClick={() => {}} />
 </ChartContainer>

rename-unstable-use-series

Remove unstable_ prefix from useSeries and use*Series hooks, as they have now become stable.

  import {
-   unstable_useSeries,
+   useSeries,
-   unstable_usePieSeries,
+   usePieSeries,
-   unstable_useLineSeries,
+   useLineSeries,
-   unstable_useBarSeries,
+   useBarSeries,
-   unstable_useScatterSeries,
+   useScatterSeries,
  } from '@mui/x-charts/hooks';
  import {
-   unstable_useHeatmapSeries,
+   useHeatmapSeries,
  } from '@mui/x-charts-pro/hooks';

rename-sparkline-colors-to-color

Renames the colors prop of a SparkLineChart to color and accesses its first element.

 <SparkLineChart
-  colors={['red']}
+  color={'red'}
 />

If colors is a function, it will be wrapped in another function that returns its first element.

 <SparkLineChart
-  colors={fn}
+  color={typeof fn === 'function' ? mode => fn(mode)[0] : fn[0]}
 />

If there are cases that the codemod cannot handle, you should see a comment with a mui-x-codemod prefix in the code.

 <SparkLineChart
-  colors={(mode) => (mode === 'light' ? ['black'] : ['white'])}
+  /* mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. */
+  color={(mode) => (mode === 'light' ? ['black'] : ['white'])}
 />

Data Grid codemods

preset-safe for Data Grid v8.0.0

The preset-safe codemods for Data Grid.

npx @mui/x-codemod@latest v8.0.0/data-grid/preset-safe <path|folder>

The list includes these transformers

• remove-stabilized-v8-experimentalFeatures
• remove-props
• rename-props
• rename-imports
• reform-row-selection-model
• rename-package
• add-showToolbar-prop

remove-stabilized-v8-experimentalFeatures

Remove feature flags for stabilized experimentalFeatures.

 <DataGridPremium
-  experimentalFeatures={{
-    ariaV8: true,
-  }}
 />

npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>

remove-props

Remove props that are no longer supported.

The list includes these props:

• indeterminateCheckboxAction
• rowPositionsDebounceMs
• resetPageOnSortFilter

 <DataGrid
-  indeterminateCheckboxAction="deselect"
-  rowPositionsDebounceMs={100}
-  resetPageOnSortFilter
 />

npx @mui/x-codemod@latest v8.0.0/data-grid/remove-props <path>

rename-props

Rename props to the new ones.

The list includes these props:

• unstable_rowSpanning to rowSpanning
• unstable_dataSource to dataSource
• unstable_dataSourceCache to dataSourceCache
• unstable_lazyLoading to lazyLoading
• unstable_lazyLoadingRequestThrottleMs to lazyLoadingRequestThrottleMs
• unstable_onDataSourceError to onDataSourceError
• unstable_listView to listView
• unstable_listColumn to listViewColumn

 <DataGrid
-  unstable_rowSpanning
-  unstable_dataSource={dataSource}
-  unstable_dataSourceCache={dataSourceCache}
-  unstable_lazyLoading
-  unstable_lazyLoadingRequestThrottleMs={100}
-  unstable_onDataSourceError={() => {}}
-  unstable_listView
-  unstable_listColumn={{}}
+  rowSpanning
+  dataSource={dataSource}
+  dataSourceCache={dataSourceCache}
+  lazyLoading
+  lazyLoadingRequestThrottleMs={100}
+  onDataSourceError={() => {}}
+  listView
+  listViewColumn={{}}
 />

npx @mui/x-codemod@latest v8.0.0/data-grid/rename-props <path>

rename-imports

This codemod renames the imports of the Data Grid components. The list includes these imports:

• selectedGridRowsSelector to gridRowSelectionIdsSelector
• selectedGridRowsCountSelector to gridRowSelectionCountSelector

-import { selectedGridRowsSelector, selectedGridRowsCountSelector } from '@mui/x-data-grid';
+import { gridRowSelectionIdsSelector, gridRowSelectionCountSelector } from '@mui/x-data-grid';

npx @mui/x-codemod@latest v8.0.0/data-grid/rename-imports <path>

reform-row-selection-model

Reforms the controlled rowSelectionModel prop value to the new one.

-const [rowSelectionModel, setRowSelectionModel] = React.useState([1, 2]);
+const [rowSelectionModel, setRowSelectionModel] = React.useState({
+  type: 'include',
+  ids: new Set([1, 2]),
+});

 <DataGrid
  rowSelectionModel={rowSelectionModel}
  onRowSelectionModelChange={setRowSelectionModel}
 />

npx @mui/x-codemod@latest v8.0.0/data-grid/reform-row-selection-model <path>

rename-package

Reorganizes the imports moved from @mui/x-data-grid-pro and @mui/x-data-grid-premium.

-import { LicenseInfo } from '@mui/x-data-grid-pro';
+import { LicenseInfo } from '@mui/x-license';

npx @mui/x-codemod@latest v8.0.0/data-grid/rename-package <path>

add-showToolbar-prop

Adds the showToolbar prop to the Data Grid components that are using slots.toolbar prop.

 <DataGridPremium
  slots={{
    toolbar: GridToolbar,
  }}
+ showToolbar
 />

npx @mui/x-codemod@latest v8.0.0/data-grid/add-showToolbar-prop <path>

Pickers codemods

preset-safe for Pickers v8.0.0

The preset-safe codemods for Pickers.

npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe <path|folder>

The list includes these transformers

• rename-adapter-date-fns-imports
• rename-type-imports

rename-adapter-date-fns-imports

[!WARNING] This codemod is not idempotent. Running it multiple times will rename the imports back and forth. Usage of AdapterDateFnsV3 would be replaced by AdapterDateFns and a subsequent run would rename it to AdapterDateFnsV2.

• Renames AdapterDateFns and AdapterDateFnsJalali imports to AdapterDateFnsV2 and AdapterDateFnsJalaliV2 respectfully.

  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

• Renames AdapterDateFnsV3 and AdapterDateFnsJalaliV3 imports to AdapterDateFns and AdapterDateFnsJalali respectfully.

  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';

npx @mui/x-codemod@latest v8.0.0/pickers/rename-adapter-date-fns-imports <path>

rename-type-imports

Renames:

• usePickersTranslations to usePickerTranslations
• usePickersContext to usePickerContext
• FieldValueType to PickerValueType
• RangeFieldSection to FieldRangeSection
• PickerShortcutChangeImportance to PickerChangeImportance

-import { usePickersTranslations, usePickersContext } from '@mui/x-date-pickers/hooks';
+import { usePickerTranslations, usePickerContext } from '@mui/x-date-pickers/hooks';
-import { FieldValueType } from '@mui/x-date-pickers';
+import { PickerValueType } from '@mui/x-date-pickers';
-import { RangeFieldSection } from '@mui/x-date-pickers-pro/models';
+import { FieldRangeSection } from '@mui/x-date-pickers-pro/models';
-import { PickerShortcutChangeImportance } from '@mui/x-date-pickers/PickersShortcuts';
+import { PickerChangeImportance } from '@mui/x-date-pickers/models';

 interface MyComponentProps {
-  valueType: FieldValueType;
+  valueType: PickerValueType;
   foo: string;
   bar: number;
 }

npx @mui/x-codemod@latest v8.0.0/pickers/rename-type-imports <path>

v7.0.0

🚀 preset-safe for v7.0.0

A combination of all important transformers for migrating v6 to v7. ⚠️ This codemod should be run only once. It runs codemods for both Data Grid and Date and Time Pickers packages. To run codemods for a specific package, refer to the respective section.

npx @mui/x-codemod@latest v7.0.0/preset-safe <path|folder>

The corresponding sub-sections are listed below

• preset-safe-for-pickers
• preset-safe-for-data-grid
• preset-safe-for-tree-view

Pickers codemods

preset-safe for Pickers v7.0.0

The preset-safe codemods for Pickers.

npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe <path|folder>

The list includes these transformers

• rename-components-to-slots-pickers
• rename-default-calendar-month-to-reference-date
• rename-day-picker-classes
• rename-slots-types

rename-components-to-slots-pickers

Renames the components and componentsProps props to slots and slotProps, respectively.

This change only affects Date and Time Picker components.

 <DatePicker
-  components={{ Toolbar: CustomToolbar }}
-  componentsProps={{ actionBar: { actions: ['clear'] } }}
+  slots={{ toolbar: CustomToolbar }}
+  slotProps={{ actionBar: { actions: ['clear'] } }}
 />;

npx @mui/x-codemod@latest v7.0.0/pickers/rename-components-to-slots <path>

rename-default-calendar-month-to-reference-date

Replace the defaultCalendarMonth prop with the referenceDate prop.

-<DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
+<DateCalendar referenceDate{dayjs('2022-04-01')} />

npx @mui/x-codemod@latest v7.0.0/pickers/rename-default-calendar-month-to-reference-date <path>

rename-day-picker-classes

Rename the dayPickerClasses variable to dayCalendarClasses.

-import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
+import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';

npx @mui/x-codemod@latest v7.0.0/pickers/rename-day-picker-classes <path>

rename-slots-types

Replace types suffix SlotsComponent by Slots and SlotsComponentsProps by SlotProps.

-DateCalendarSlotsComponent
-DateCalendarSlotsComponentsProps
+DateCalendarSlots
+DateCalendarSlotProps

npx @mui/x-codemod@latest v7.0.0/pickers/rename-slots-types <path>

Data Grid codemods

preset-safe for Data Grid v7.0.0

The preset-safe codemods for Data Grid.

npx @mui/x-codemod@latest v7.0.0/data-grid/preset-safe <path|folder>

The list includes these transformers

• rename-components-to-slots-data-grid
• rename-cell-selection-props
• remove-stabilized-v7-experimentalFeatures

rename-components-to-slots-data-grid

Renames the components and componentsProps props to slots and slotProps, respectively.

This change only affects Data Grid components.

 <DataGrid
-  components={{ Toolbar: CustomToolbar }}
-  componentsProps={{ toolbar: { showQuickFilter: true }}}
+  slots={{ toolbar: CustomToolbar }}
+  slotProps={{ toolbar: { showQuickFilter: true }}}
 />;

npx @mui/x-codemod@latest v7.0.0/data-grid/rename-components-to-slots <path>

rename-cell-selection-props

Rename props related to cellSelection feature.

 <DataGridPremium
-  unstable_cellSelection
-  unstable_cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
-  unstable_onCellSelectionModelChange={() => {}}
+  cellSelection
+  cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
+  onCellSelectionModelChange={() => {}}
 />;

npx @mui/x-codemod@latest v7.0.0/data-grid/rename-cell-selection-props <path>

remove-stabilized-v7-experimentalFeatures

Remove feature flags for stabilized experimentalFeatures.

 <DataGrid
-  experimentalFeatures={{
-    lazyLoading: true,
-    ariaV7: true,
-    clipboardPaste: true,
-    columnGrouping: true,
-  }}
 />

npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeatures <path>

Tree View codemods

preset-safe for Tree View v7.0.0

The preset-safe codemods for Tree View.

npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe <path|folder>

The list includes these transformers

• rename-tree-view-simple-tree-view
• rename-use-tree-item
• rename-expansion-props
• rename-selection-props
• replace-transition-props-by-slot
• rename-focus-callback
• rename-nodeid

rename-tree-view-simple-tree-view

Renames the Tree View component to Simple Tree View

-import { TreeView } from '@mui/x-tree-view';
+import { SimpleTreeView } from '@mui/x-tree-view';

-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';

 return (
-  <TreeView>
+  <SimpleTreeView>
     <TreeItem itemId="1" label="First item" />
-  </TreeView>
+  </SimpleTreeView>
 );

rename-use-tree-item

Renames the useTreeItem hook to useTreeItemState

-import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';

 const CustomContent = React.forwardRef((props, ref) => {
-  const { disabled } = useTreeItem(props.itemId);
+  const { disabled } = useTreeItemState(props.itemId);

   // Render some UI
 });

 function App() {
   return (
     <SimpleTreeView>
       <TreeItem ContentComponent={CustomContent} />
     </SimpleTreeView>
   )
 }

rename-expansion-props

Rename the expansion props

 <TreeView
-  onNodeToggle={handleExpansionChange}
+  onExpandedItemsChange={handleExpansionChange}

-  expanded={expandedItems}
+  expandedItems={expandedItems}

-  defaultExpanded={defaultExpandedItems}
+  defaultExpandedItems={defaultExpandedItems}
 />

rename-selection-props

Rename the selection props

 <TreeView
-  onNodeSelect={handleSelectionChange}
+  onSelectedItemsChange={handleSelectionChange}

-  selected={selectedItems}
+  selectedItems={selectedItems}

-  defaultSelected={defaultSelectedItems}
+  defaultSelectedItems={defaultSelectedItems}
 />

replace-transition-props-by-slot

Replace the TransitionComponent and TransitionProps components with the groupTransition slot:

 <TreeItem
-  TransitionComponent={Fade}
+  slots={{ groupTransition: Fade }}

-  TransitionProps={{ timeout: 600 }}
+  slotProps={{ groupTransition: { timeout: 600 } }}
 />

rename-focus-callback

Replace the onNodeFocus callback with onItemFocus:

 <TreeView
-  onNodeFocus={onNodeFocus}
+  onItemFocus={onItemFocus}
 />

rename-nodeid

Rename nodeId to itemId

 <TreeItem
-  nodeId='unique-id'
+  itemId='unique-id'

v6.0.0

🚀 preset-safe for v6.0.0

A combination of all important transformers for migrating v5 to v6. ⚠️ This codemod should be run only once. It runs codemods for both Data Grid and Date and Time Pickers packages. To run codemods for a specific package, refer to the respective section.

npx @mui/x-codemod@latest v6.0.0/preset-safe <path|folder>

The corresponding sub-sections are listed below

• preset-safe-for-pickers
• preset-safe-for-data-grid

Pickers codemods

preset-safe for Pickers v6.0.0

The preset-safe codemods for Pickers.

npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe <path|folder>

The list includes these transformers

• adapter-change-import
• view-components-rename
• view-components-rename-value-prop
• localization-provider-rename-locale
• text-props-to-localeText
• replace-tabs-props
• replace-toolbar-props-by-slot
• migrate-to-components-componentsProps
• replace-arrows-button-slot
• rename-should-disable-time
• rename-inputFormat-prop
• rename-default-toolbar-title-localeText

adapter-change-import

Import the adapters from @mui/x-date-pickers instead of @date-io.

-import AdapterJalaali from '@date-io/jalaali';
+import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';

view-components-rename

Renames the view components.

-<CalendarPicker {...props} />
+<DateCalendar {...props} />

-<DayPicker {...props} />
+<DayCalendar {...props} />

-<CalendarPickerSkeleton {...props} />
+<DayCalendarSkeleton {...props} />

-<MonthPicker {...props} />
+<MonthCalendar {...props} />

-<YearPicker {...props} />
+<YearCalendar {...props} />

-<ClockPicker {...props} />
+<TimeClock {...props} />

view-components-rename-value-prop

Renames the date prop of the view components into value.

-<MonthPicker date={dayjs()} />
+<MonthCalendar value={dayjs()} />

-<YearPicker date={dayjs()} />
+<YearCalendar value={dayjs()} />

-<ClockPicker date={dayjs()} />
+<TimeClock value={dayjs()} />

-<CalendarPicker date={dayjs()} />
+<DateCalendar value={dayjs()} />

localization-provider-rename-locale

Renames the locale prop of the LocalizationProvider component into adapterLocale.

 <LocalizationProvider
   dateAdapter={AdapterDayjs}
-  locale="fr"
+  adapterLocale="fr"
 >
   {children}
 </LocalizationProvider

npx @mui/x-codemod@latest v6.0.0/pickers/localization-provider-rename-locale <path>

text-props-to-localeText

Replace props used for localization such as cancelText to their corresponding localeText key on all the Date and Time Pickers components.

 <DatePicker
-  cancelText="Cancelar"
+  localeText={{
+    cancelButtonLabel: "Cancelar"
+  }}
 />

npx @mui/x-codemod@latest v6.0.0/pickers/text-props-to-localeText <path>

If you were always using the same text value in all your components, consider moving those translation from the component to the LocalizationProvider by hand.

 <LocalizationProvider
   dateAdapter={AdapterDayjs}
+ localeText={{ cancelButtonLabel: "Cancelar" }}
 >
   <DatePicker
-    localeText={{ cancelButtonLabel: "Cancelar" }}
   />
   <DateTimePicker
-    localeText={{ cancelButtonLabel: "Cancelar" }}
   />
 </LocalizationProvider>

You can find more details about Date and Time breaking changes in the migration guide.

replace-tabs-props

Replace props used for Tabs in DateTime pickers by componentsProps.tabs properties.

 <DateTimePicker
-  hideTabs={false}
-  dateRangeIcon={<LightModeIcon />}
-  timeIcon={<AcUnitIcon />}
+  componentsProps={{
+    tabs: {
+      hidden: false,
+      dateIcon: <LightModeIcon />,
+      timeIcon: <AcUnitIcon />,
+    }
+  }}
 />

npx @mui/x-codemod@latest v6.0.0/pickers/replace-tabs-props <path>

replace-toolbar-props-by-slot

Replace props used to customize the Toolbar in pickers by slots properties and localeText.

 <DatePicker
-  ToolbarComponent={MyToolbar}
+  components={{ Toolbar: MyToolbar }}
-  toolbarPlaceholder="__"
-  toolbarFormat="DD / MM / YYYY"
-  showToolbar
+  componentsProps={{
+    toolbar: {
+      toolbarPlaceholder: "__",
+      toolbarFormat: "DD / MM / YYYY",
+      hidden: false,
+    }
+  }}
-  toolbarTitle="Title"
+  localeText={{ toolbarTitle: "Title" }}

npx @mui/x-codemod@latest v6.0.0/pickers/replace-toolbar-props-by-slot <path>

migrate-to-components-componentsProps

Replace customization props by their equivalent components and componentsProps properties.

 <DatePicker
-  PopperProps={{ onClick: handleClick }}
+  componentsProps={{ popper: { onClick: handleClick }}}
 />

 <DatePicker
-  TransitionComponent={Fade}
+  components={{ DesktopTransition: Fade }}
 />

 <DatePicker
-  DialogProps={{ backgroundColor: 'red' }}
+  componentsProps={{ dialog: { backgroundColor: 'red' }}}
 />

 <DatePicker
-  PaperProps={{ backgroundColor: 'red' }}
+  componentsProps={{ desktopPaper: { backgroundColor: 'red' }}}
 />

 <DatePicker
-  TrapFocusProps={{ isEnabled: () => false }}
+  componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
 />

 <DatePicker
-  InputProps={{ color: 'primary' }}
+  componentsProps={{ textField: { InputProps: { color: 'primary' }}}}
 />

 <DatePicker
-  InputAdornmentProps={{ position: 'start' }}
+  componentsProps={{ inputAdornment: { position: 'start' }}}
 />

 <DatePicker
-  OpenPickerButtonProps={{ ref: buttonRef }}
+  componentsProps={{ openPickerButton: { ref: buttonRef }}}
 />

npx @mui/x-codemod@latest v6.0.0/pickers/migrate-to-components-componentsProps <path>

replace-arrows-button-slot

Replace LeftArrowButton and RightArrowButton slots for navigation buttons by PreviousIconButton and NextIconButton.

 <DatePicker
   components={{
-    LeftArrowButton: CustomButton,
+    PreviousIconButton: CustomButton,
-    RightArrowButton: CustomButton,
+    NextIconButton: CustomButton,
   }}

   componentsProps={{
-    leftArrowButton: {},
+    previousIconButton: {},
-    rightArrowButton: {},
+    nextIconButton: {},
   }}
 />

npx @mui/x-codemod@latest v6.0.0/pickers/replace-arrows-button-slot <path>

rename-should-disable-time

Replace shouldDisableTime by shouldDisableClock.

  <DateTimePicker
-   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+   shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
  />

npx @mui/x-codemod@latest v6.0.0/pickers/rename-should-disable-time <path>

rename-inputFormat-prop

Replace inputFormat prop with format.

 <DatePicker
-  inputFormat="YYYY"
+  format="YYYY"
 />

npx @mui/x-codemod@latest v6.0.0/pickers/rename-inputFormat-prop <path>

rename-default-toolbar-title-localeText

Rename toolbar related translation keys, removing Default part from them to better fit their usage.

 <LocalizationProvider
   localeText={{
-    datePickerDefaultToolbarTitle: 'Date Picker',
+    datePickerToolbarTitle: 'Date Picker',
-    timePickerDefaultToolbarTitle: 'Time Picker',
+    timePickerToolbarTitle: 'Time Picker',
-    dateTimePickerDefaultToolbarTitle: 'Date Time Picker',
+    dateTimePickerToolbarTitle: 'Date Time Picker',
-    dateRangePickerDefaultToolbarTitle: 'Date Range Picker',
+    dateRangePickerToolbarTitle: 'Date Range Picker',
   }}
 />

npx @mui/x-codemod@latest v6.0.0/pickers/rename-default-toolbar-title-localeText <path>

rename-components-to-slots-pickers

Renames the components and componentsProps props to slots and slotProps, respectively.

This change only affects Date and Time Pickers components.

 <DatePicker
-  components={{ Toolbar: CustomToolbar }}
-  componentsProps={{ actionBar: { actions: ['clear'] } }}
+  slots={{ toolbar: CustomToolbar }}
+  slotProps={{ actionBar: { actions: ['clear'] } }}
 />;

npx @mui/x-codemod@latest v6.0.0/pickers/rename-components-to-slots <path>

Data Grid codemods

preset-safe for Data Grid v6.0.0

The preset-safe codemods for Data Grid.

npx @mui/x-codemod@latest v6.0.0/data-grid/preset-safe <path|folder>

The list includes these transformers

• column-menu-components-rename
• row-selection-props-rename
• rename-rowsPerPageOptions-prop
• remove-disableExtendRowFullWidth-prop
• rename-linkOperators-logicOperators
• rename-filter-item-props
• rename-selectors-and-events
• remove-stabilized-experimentalFeatures
• replace-onCellFocusOut-prop

column-menu-components-rename

Replace column menu items that have been renamed.

 <CustomColumnMenu>
-  <GridFilterMenuItem column={column} onClick={hideMenu} />
+  <GridColumnMenuFilterItem colDef={column} onClick={hideMenu} />
-  <HideGridColMenuItem column={column} onClick={hideMenu} />
+  <GridColumnMenuHideItem colDef={column} onClick={hideMenu} />
-  <GridColumnsMenuItem column={column} onClick={hideMenu} />
+  <GridColumnMenuColumnsItem colDef={column} onClick={hideMenu} />
-  <SortGridMenuItems column={column} onClick={hideMenu} />
+  <GridColumnMenuSortItem colDef={column} onClick={hideMenu} />
-  <GridColumnPinningMenuItems column={column} onClick={hideMenu} />
+  <GridColumnMenuPinningItem colDef={column} onClick={hideMenu} />
 </CustomColumnMenu>

npx @mui/x-codemod@latest v6.0.0/data-grid/column-menu-components-rename <path>

If you are using GridRowGroupingColumnMenuItems and GridRowGroupableColumnMenuItems for grouping, consider fixing them manually as these imports are replaced by GridColumnMenuGroupingItem and may require some extra work to port.

row-selection-props-rename

Data Grid props that have been renamed.

 <DataGrid
-  selectionModel={model}
+  rowSelectionModel={model}
-  onSelectionModelChange={handler}
+  onRowSelectionModelChange={handler}
-  disableSelectionOnClick
+  disableRowSelectionOnClick
-  disableMultipleSelection
+  disableMultipleRowSelection
-  showCellRightBorder
+  showCellVerticalBorder
-  showColumnRightBorder
+  showColumnVerticalBorder
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/row-selection-props-rename <path>

rename-rowsPerPageOptions-prop

Rename rowsPerPageOptions prop to pageSizeOptions.

 <DataGrid
-  rowsPerPageOptions={[5, 10, 20]}
+  pageSizeOptions={[5, 10, 20]}
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/rename-rowsPerPageOptions-prop <path>

remove-disableExtendRowFullWidth-prop

Remove disableExtendRowFullWidth prop which is no longer supported.

 <DataGrid
-  disableExtendRowFullWidth
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop <path>

rename-linkOperators-logicOperators

Rename linkOperators related props to logicOperators and rename classes.

 const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [],
-   linkOperator: GridLinkOperator.Or,
-   quickFilterLogicOperator: GridLinkOperator.Or,
+   logicOperator: GridLogicOperator.Or,
+   quickFilterLogicOperator: GridLogicOperator.Or,
  });
- apiRef.current.setFilterLinkOperator('and')
- const localeText = apiRef.current.getLocaleText('filterPanelLinkOperator')
+ apiRef.current.setFilterLogicOperator('and')
+ const localeText = apiRef.current.getLocaleText('filterPanelLogicOperator')
 <DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
-       linkOperator: GridLinkOperator.Or,
-       quickFilterLogicOperator: GridLinkOperator.Or,
+       logicOperator: GridLogicOperator.Or,
+       quickFilterLogicOperator: GridLogicOperator.Or,
      },
    },
  }}
  filterModel={filterModel}
  componentsProps={{
    filter: {
-     linkOperators: [GridLinkOperator.And],
+     logicOperators: [GridLogicOperator.And],
      filterFormProps: {
-       linkOperatorInputProps: {
+       logicOperatorInputProps: {
          variant: 'outlined',
          size: 'small',
        },
      },
    },
  }}
  sx={{
-   '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 },
-   '& .MuiDataGrid-withBorder': { borderColor: '#456' },
+   '& .MuiDataGrid-filterFormLogicOperatorInput': { mr: 2 },
+   '& .MuiDataGrid-withBorderColor': { borderColor: '#456' },
  }}
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/rename-linkOperators-logicOperators <path>

rename-filter-item-props

Rename filter item props to the new values.

 <DataGrid
  columns={columns}
  rows={rows}
  initialState={{
    filter: {
      filterModel: {
        items: [
          {
-           columnField: 'column',
-           operatorValue: 'contains',
+           field: 'column',
+           operator: 'contains',
            value: 'a',
          },
        ],
      },
    },
  }}
  filterModel={{
    items: [
      {
-       columnField: 'column',
-       operatorValue: 'contains',
+       field: 'column',
+       operator: 'contains',
        value: 'a',
      },
    ],
  }}
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/rename-filter-item-props <path>

rename-selectors-and-events

Rename selectors and events.

 function App() {
-  useGridApiEventHandler(apiRef, 'selectionChange', handleEvent);
-  apiRef.current.subscribeEvent('selectionChange', handleEvent);
-  const selection = useGridSelector(apiRef, gridSelectionStateSelector);
-  const sortedRowIds = useGridSelector(apiRef, gridVisibleSortedRowIdsSelector);
-  const sortedRowEntries = useGridSelector(apiRef, gridVisibleSortedRowEntriesSelector);
-  const rowCount = useGridSelector(apiRef, gridVisibleRowCountSelector);
-  const sortedTopLevelRowEntries = useGridSelector(apiRef, gridVisibleSortedTopLevelRowEntriesSelector);
-  const topLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
-  const allGridColumnsFields = useGridSelector(apiRef, allGridColumnsFieldsSelector);
-  const allGridColumns = useGridSelector(apiRef, allGridColumnsSelector);
-  const visibleGridColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
-  const filterableGridColumns = useGridSelector(apiRef, filterableGridColumnsSelector);
-  const getGridNumericColumn = useGridSelector(apiRef, getGridNumericColumnOperators);
+  useGridApiEventHandler(apiRef, 'rowSelectionChange', handleEvent);
+  apiRef.current.subscribeEvent('rowSelectionChange', handleEvent);
+  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
+  const sortedRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
+  const sortedRowEntries = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
+  const rowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  const sortedTopLevelRowEntries = useGridSelector(apiRef, gridFilteredSortedTopLevelRowEntriesSelector);
+  const topLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  const allGridColumnsFields = useGridSelector(apiRef, gridColumnFieldsSelector);
+  const allGridColumns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const visibleGridColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterableGridColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const getGridNumericColumn = useGridSelector(apiRef, getGridNumericOperators);
 }

npx @mui/x-codemod@latest v6.0.0/data-grid/rename-selectors-and-events <path>

remove-stabilized-experimentalFeatures

Remove feature flags for stabilized experimentalFeatures.

 <DataGrid
-  experimentalFeatures={{
-    newEditingApi: true,
-  }}
 />

 <DataGrid
  experimentalFeatures={{
-   newEditingApi: true,
    columnGrouping: true,
  }}
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/remove-stabilized-experimentalFeatures <path>

replace-onCellFocusOut-prop

Replace onCellFocusOut prop with componentsProps.cell.onBlur.

 <DataGrid
-  onCellFocusOut={handleBlur}
+  componentsProps={{
+    cell: {
+      onBlur: handleBlur,
+    },
+  }}
 />

npx @mui/x-codemod@latest v6.0.0/data-grid/replace-onCellFocusOut-prop <path>

rename-components-to-slots-data-grid

Renames the components and componentsProps props to slots and slotProps, respectively.

This change only affects Data Grid components.

 <DataGrid
-  components={{ Toolbar: CustomToolbar }}
-  componentsProps={{ actionBar: { actions: ['clear'] } }}
+  slots={{ toolbar: CustomToolbar }}
+  slotProps={{ actionBar: { actions: ['clear'] } }}
 />;

npx @mui/x-codemod@latest v6.0.0/data-grid/rename-components-to-slots <path>

You can find more details about Data Grid breaking change in the migration guide.