@mui/x-codemod v8.5.2

@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\"}'"

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.