@mui/x-codemod

Package Overview

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/x-codemod

Codemod scripts for MUI X.

8.10.0

latest

Source

npm

Version published: 6 days ago

Weekly downloads: 1.5K

Maintainers: 15

Weekly downloads

Created: 3 years ago

Source

@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

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`

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`

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

[!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

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`

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`

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`

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

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`

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`

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.

8.10.0

Aug 8, 2025

We'd like to extend a big thank you to the 17 contributors who made this release possible. Here are some highlights ✨:

📊 FunnelChart marked as stable
📈 Zoom slider and Preview marked as stable
📈 Supporting label groups in band and point axis
🌎 Improve Norwegian Nynorsk (nn-NO) locale on the Data Grid
🐞 Bugfixes
📚 Documentation improvements

Special thanks go out to the community members for their valuable contributions: @AnderzL7, @aqeelat, @dwrth, @noobyogi0010, @nusr, @sai6855

The following are all team members who have contributed to this release: @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @oliviertassinari, @rita-codes, @romgrk

Data Grid

Keywords

FAQs

What is @mui/x-codemod?

Is @mui/x-codemod popular?

Is @mui/x-codemod well maintained?

Package last updated on 08 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@mui/x-codemod

@mui/x-codemod

Setup & run

jscodeshift options

Recast Options

v8.0.0

🚀 preset-safe for v8.0.0

Tree View codemods

preset-safe for Tree View v8.0.0

rename-tree-view-simple-tree-view

rename-tree-item-2

Charts codemods

preset-safe for Charts v8.0.0

rename-legend-to-slots-legend

replace-legend-direction-values

replace-legend-position-values

rename-responsive-chart-container

rename-legend-position-type

rename-label-and-tick-font-size

remove-on-axis-click-handler

rename-unstable-use-series

rename-sparkline-colors-to-color

Data Grid codemods

preset-safe for Data Grid v8.0.0

remove-stabilized-v8-experimentalFeatures

remove-props

rename-props

rename-imports

reform-row-selection-model

rename-package

add-showToolbar-prop

Pickers codemods

preset-safe for Pickers v8.0.0

rename-adapter-date-fns-imports

rename-type-imports

v7.0.0

🚀 preset-safe for v7.0.0

Pickers codemods

preset-safe for Pickers v7.0.0

rename-components-to-slots-pickers

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

rename-day-picker-classes

rename-slots-types

Data Grid codemods

preset-safe for Data Grid v7.0.0

rename-components-to-slots-data-grid

rename-cell-selection-props

remove-stabilized-v7-experimentalFeatures

Tree View codemods

preset-safe for Tree View v7.0.0

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

v6.0.0

🚀 preset-safe for v6.0.0

Pickers codemods

preset-safe for Pickers v6.0.0

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

rename-components-to-slots-pickers

Data Grid codemods

preset-safe for Data Grid v6.0.0

column-menu-components-rename

row-selection-props-rename

rename-rowsPerPageOptions-prop

remove-disableExtendRowFullWidth-prop

`jscodeshift` options

`Recast` Options

🚀 `preset-safe` for v8.0.0

`preset-safe` for Tree View v8.0.0

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

`rename-tree-item-2`

`preset-safe` for Charts v8.0.0

`rename-legend-to-slots-legend`

`replace-legend-direction-values`

`replace-legend-position-values`

`rename-responsive-chart-container`

`rename-legend-position-type`

`rename-label-and-tick-font-size`

`remove-on-axis-click-handler`

`rename-unstable-use-series`

`rename-sparkline-colors-to-color`

`preset-safe` for Data Grid v8.0.0

`remove-stabilized-v8-experimentalFeatures`

`remove-props`

`rename-props`

`rename-imports`

`reform-row-selection-model`

`rename-package`

`add-showToolbar-prop`

`preset-safe` for Pickers v8.0.0

`rename-adapter-date-fns-imports`

`rename-type-imports`

🚀 `preset-safe` for v7.0.0

`preset-safe` for Pickers v7.0.0

`rename-components-to-slots-pickers`

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

`rename-day-picker-classes`

`rename-slots-types`

`preset-safe` for Data Grid v7.0.0

`rename-components-to-slots-data-grid`

`rename-cell-selection-props`

`remove-stabilized-v7-experimentalFeatures`

`preset-safe` for Tree View v7.0.0

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

🚀 `preset-safe` for v6.0.0

`preset-safe` for Pickers v6.0.0

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

`rename-components-to-slots-pickers`

`preset-safe` for Data Grid v6.0.0

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

`rename-components-to-slots-data-grid`