# @mui/x-codemod

> Codemod scripts for MUI X

[![npm version](https://img.shields.io/npm/v/@mui/x-codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/x-codemod)
[![npm downloads](https://img.shields.io/npm/dm/@mui/x-codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/x-codemod)

This repository contains a collection of codemod scripts based for use with
[jscodeshift](https://github.com/facebook/jscodeshift) that help update MUI X APIs.

## Setup & run

<!-- #npm-tag-reference -->

```bash
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:

```bash
# 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](https://github.com/facebook/jscodeshift#usage-cli).

### `Recast` Options

Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
through jscodeshift's `printOptions` command line argument

```bash
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.

<!-- #npm-tag-reference -->

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

The corresponding sub-sections are listed below

<!-- - [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v900) -->
<!-- - [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v900) -->

- [`preset-safe-for-charts`](#preset-safe-for-charts-v900)
- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v900)

### 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.

<!-- #npm-tag-reference -->

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

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

### Charts codemods

#### 🚀 `preset-safe` for Charts v9.0.0

The `preset-safe` codemods for Charts.

<!-- #npm-tag-reference -->

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

The list includes these transformers

- [`replace-heatmap-hide-legend-false`](#replace-heatmap-hide-legend-false)
- [`replace-show-mark-default`](#replace-show-mark-default)
- [`rename-id-to-series-id`](#rename-id-to-series-id)
- [`rename-chart-api-import`](#rename-chart-api-import)
- [`rename-sankey-chart`](#rename-sankey-chart)
- [`rename-chart-container`](#rename-chart-container)
- [`rename-chart-data-provider`](#rename-chart-data-provider)
- [`rename-chart-zoom-slider`](#rename-chart-zoom-slider)
- [`remove-enable-keyboard-navigation`](#remove-enable-keyboard-navigation)
- [`remove-stabilized-experimentalFeatures`](#remove-stabilized-experimentalfeatures)
- [`remove-deprecated-series-types`](#remove-deprecated-series-types)
- [`remove-is-bar-series-helpers`](#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.

```diff
 <Heatmap
+  hideLegend
 />
```

#### `rename-axis-tooltip-hook`

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

```diff
-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.

```diff
 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`.

```diff
-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`.

```diff
- <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.

```diff
- <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.

```diff
-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`.

```diff
-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.

```diff
-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.

```diff
-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.

```diff
 <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.

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

#### `remove-deprecated-series-types`

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

```diff
-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.

```diff
-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 <a id="preset-safe-for-pickers-v900"></a>

The `preset-safe` codemods for Pickers.

<!-- #npm-tag-reference -->

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

The list includes these transformers

- [`rename-field-ref`](#rename-field-ref)
- [`remove-enable-accessible-field-dom-structure`](#remove-enable-accessible-field-dom-structure)
- [`remove-picker-day-2`](#remove-picker-day-2)
- [`rename-picker-day-2`](#rename-picker-day-2)
- [`rename-pickers-day`](#rename-pickers-day)
- [`rename-picker-classes`](#rename-picker-classes)
- [`remove-disable-margin`](#remove-disable-margin)
- [`migrate-text-field-props`](#migrate-text-field-props)

#### `rename-field-ref`

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

```diff
-<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 } }} />
```

<!-- #npm-tag-reference -->

```bash
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.

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

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

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

<!-- #npm-tag-reference -->

```bash
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 }`).

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

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

<!-- #npm-tag-reference -->

```bash
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`.

```diff
-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' } },
     },
   },
 });
```

<!-- #npm-tag-reference -->

```bash
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.

```diff
-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' } },
     },
   },
 });
```

<!-- #npm-tag-reference -->

```bash
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.

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

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

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

<!-- #npm-tag-reference -->

```bash
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.

```diff
-<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.

<!-- #npm-tag-reference -->

```bash
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`.

```diff
-<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' } } } }} />
```

<!-- #npm-tag-reference -->

```bash
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.

<!-- #npm-tag-reference -->

```bash
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-tree-view-v800)
- [`preset-safe-for-charts`](#preset-safe-for-charts-v800)
- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v800)
- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v800)

### Tree View codemods

#### `preset-safe` for Tree View v8.0.0

The `preset-safe` codemods for Tree View.

<!-- #npm-tag-reference -->

```bash
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-view-simple-tree-view)
- [`rename-tree-item-2`](#rename-tree-item-2)

#### `rename-tree-view-simple-tree-view`

Renames the Tree View component to Simple Tree View

```diff
-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`).

```diff
-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.

<!-- #npm-tag-reference -->

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

The list includes these transformers

- [`rename-legend-to-slots-legend`](#rename-legend-to-slots-legend)
- [`replace-legend-direction-values`](#replace-legend-direction-values)
- [`rename-responsive-chart-container`](#rename-responsive-chart-container)
- [`rename-label-and-tick-font-size`](#rename-label-and-tick-font-size)

#### `rename-legend-to-slots-legend`

Renames legend props to the corresponding slotProps.

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

#### `replace-legend-direction-values`

Replace `row` and `column` values by `horizontal` and `vertical` respectively.

```diff
 <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.

```diff
 <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.

```diff
-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`.

```diff
-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.
>
> ```diff
>  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.

```diff
 <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.

```diff
+ <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.

```diff
  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.

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

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

```diff
 <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.

```diff
 <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.

<!-- #npm-tag-reference -->

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

The list includes these transformers

- [`remove-stabilized-v8-experimentalFeatures`](#remove-stabilized-v8-experimentalFeatures)
- [`remove-props`](#remove-props)
- [`rename-props`](#rename-props)
- [`rename-imports`](#rename-imports)
- [`reform-row-selection-model`](#reform-row-selection-model)
- [`rename-package`](#rename-package)
- [`add-showToolbar-prop`](#add-showToolbar-prop)

#### `remove-stabilized-v8-experimentalFeatures`

Remove feature flags for stabilized `experimentalFeatures`.

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

<!-- #npm-tag-reference -->

```bash
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`

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

<!-- #npm-tag-reference -->

```bash
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`

```diff
 <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={{}}
 />
```

<!-- #npm-tag-reference -->

```bash
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`

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

<!-- #npm-tag-reference -->

```bash
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.

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

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

<!-- #npm-tag-reference -->

```bash
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`.

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

<!-- #npm-tag-reference -->

```bash
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.

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

<!-- #npm-tag-reference -->

```bash
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.

<!-- #npm-tag-reference -->

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

The list includes these transformers

- [`rename-adapter-date-fns-imports`](#rename-adapter-date-fns-imports)
- [`rename-type-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.

  ```diff
  -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.

  ```diff
  -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';
  ```

<!-- #npm-tag-reference -->

```bash
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`

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

<!-- #npm-tag-reference -->

```bash
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.

```bash
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-pickers-v700)
- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v700)
- [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v700)

### Pickers codemods

#### `preset-safe` for Pickers v7.0.0

The `preset-safe` codemods for Pickers.

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

The list includes these transformers

- [`rename-components-to-slots-pickers`](#rename-components-to-slots-pickers)
- [`rename-default-calendar-month-to-reference-date`](#rename-default-calendar-month-to-reference-date)
- [`rename-day-picker-classes`](#rename-day-picker-classes)
- [`rename-slots-types`](#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.

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

```bash
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.

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

```bash
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`.

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

```bash
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`.

```diff
-DateCalendarSlotsComponent
-DateCalendarSlotsComponentsProps
+DateCalendarSlots
+DateCalendarSlotProps
```

```bash
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.

```bash
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-components-to-slots-data-grid)
- [`rename-cell-selection-props`](#rename-cell-selection-props)
- [`remove-stabilized-v7-experimentalFeatures`](#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.

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

```bash
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.

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

```bash
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`.

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

```bash
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.

```bash
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-tree-view-simple-tree-view-1)
- [`rename-use-tree-item`](#rename-use-tree-item)
- [`rename-expansion-props`](#rename-expansion-props)
- [`rename-selection-props`](#rename-selection-props)
- [`replace-transition-props-by-slot`](#replace-transition-props-by-slot)
- [`rename-focus-callback`](#rename-focus-callback)
- [`rename-nodeid`](#rename-nodeid)

#### `rename-tree-view-simple-tree-view`

Renames the Tree View component to Simple Tree View

```diff
-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`

```diff
-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

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

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

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

#### `rename-selection-props`

Rename the selection props

```diff
 <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:

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

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

#### `rename-focus-callback`

Replace the `onNodeFocus` callback with `onItemFocus`:

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

#### `rename-nodeid`

Rename nodeId to itemId

```diff
 <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.

```bash
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-pickers-v600)
- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v600)

### Pickers codemods

#### `preset-safe` for Pickers v6.0.0

The `preset-safe` codemods for Pickers.

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

The list includes these transformers

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

#### `adapter-change-import`

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

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

#### `view-components-rename`

Renames the view components.

```diff
-<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`.

```diff
-<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`.

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

```

```bash
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.

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

```bash
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.

```diff
 <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](https://mui.com/x/migration/migration-pickers-v5/).

#### `replace-tabs-props`

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

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

```bash
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`.

```diff
 <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" }}
```

```bash
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.

```diff
 <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 }}}
 />
```

```bash
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`.

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

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

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

#### `rename-should-disable-time`

Replace `shouldDisableTime` by `shouldDisableClock`.

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

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

#### `rename-inputFormat-prop`

Replace `inputFormat` prop with `format`.

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

```bash
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.

```diff
 <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',
   }}
 />
```

```bash
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.

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

```bash
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.

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

The list includes these transformers

- [`column-menu-components-rename`](#column-menu-components-rename)
- [`row-selection-props-rename`](#row-selection-props-rename)
- [`rename-rowsPerPageOptions-prop`](#rename-rowsPerPageOptions-prop)
- [`remove-disableExtendRowFullWidth-prop`](#remove-disableExtendRowFullWidth-prop)
- [`rename-linkOperators-logicOperators`](#rename-linkOperators-logicOperators)
- [`rename-filter-item-props`](#rename-filter-item-props)
- [`rename-selectors-and-events`](#rename-selectors-and-events)
- [`remove-stabilized-experimentalFeatures`](#remove-stabilized-experimentalFeatures)
- [`replace-onCellFocusOut-prop`](#replace-onCellFocusOut-prop)

#### `column-menu-components-rename`

Replace column menu items that have been renamed.

```diff
 <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>
```

```bash
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.

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

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

#### `rename-rowsPerPageOptions-prop`

Rename `rowsPerPageOptions` prop to `pageSizeOptions`.

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

```bash
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.

```diff
 <DataGrid
-  disableExtendRowFullWidth
 />
```

```bash
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.

```diff
 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' },
  }}
 />
```

```bash
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.

```diff
 <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',
      },
    ],
  }}
 />
```

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

#### `rename-selectors-and-events`

Rename selectors and events.

```diff
 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);
 }
```

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

#### `remove-stabilized-experimentalFeatures`

Remove feature flags for stabilized `experimentalFeatures`.

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

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

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

#### `replace-onCellFocusOut-prop`

Replace `onCellFocusOut` prop with `componentsProps.cell.onBlur`.

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

```bash
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.

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

```bash
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](https://mui.com/x/migration/migration-data-grid-v5/).