Codemod scripts for MUI X
This repository contains a collection of codemod scripts based for use with jscodeshift that help update MUI X APIs.
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
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
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\"}'"
A combination of all important transformers for migrating v7 to v8.
npx @mui/x-codemod@latest v8.0.0/preset-safe <path|folder>
The corresponding sub-sections are listed below
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
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>
);
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';
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
Renames legend props to the corresponding slotProps.
<LineChart
- legend={{ hiden: true}}
+ slotProps={{ legend: { hiden: true} }}
/>
Replace row
and column
values by horizontal
and vertical
respectively.
<BarChart
slotProps={{
legend: {
- direction: "row"
+ direction: "horizontal"
}
}}
/>
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",
}
}
}}
/>
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>
Renames LegendPosition
to Position
.
-import { LegendPosition } from '@mui/x-charts/ChartsLegend';
+import { Position } from '@mui/x-charts/models';
[!WARNING] If you imported both
ResponsiveChartContainer
andChartContainer
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';
Renames labelFontSize
and tickFontSize
props to the corresponding xxxStyle
prop.
<ChartsXAxis
- labelFontSize={18}
+ labelStyle={{
+ fontSize: 18
+ }}
- tickFontSize={20}
+ tickStyle={{
+ fontSize: 20
+ }}
/>
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>
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';
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'])}
/>
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 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 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 to the new ones.
The list includes these props:
-
unstable_rowSpanning
torowSpanning
-
unstable_dataSource
todataSource
-
unstable_dataSourceCache
todataSourceCache
-
unstable_lazyLoading
tolazyLoading
-
unstable_lazyLoadingRequestThrottleMs
tolazyLoadingRequestThrottleMs
-
unstable_onDataSourceError
toonDataSourceError
-
unstable_listView
tolistView
-
unstable_listColumn
tolistViewColumn
<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>
This codemod renames the imports of the Data Grid components. The list includes these imports:
-
selectedGridRowsSelector
togridRowSelectionIdsSelector
-
selectedGridRowsCountSelector
togridRowSelectionCountSelector
-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>
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>
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>
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>
The preset-safe
codemods for Pickers.
npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe <path|folder>
The list includes these transformers
[!WARNING] This codemod is not idempotent. Running it multiple times will rename the imports back and forth. Usage of
AdapterDateFnsV3
would be replaced byAdapterDateFns
and a subsequent run would rename it toAdapterDateFnsV2
.
-
Renames
AdapterDateFns
andAdapterDateFnsJalali
imports toAdapterDateFnsV2
andAdapterDateFnsJalaliV2
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
andAdapterDateFnsJalaliV3
imports toAdapterDateFns
andAdapterDateFnsJalali
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>
Renames:
-
usePickersTranslations
tousePickerTranslations
-
usePickersContext
tousePickerContext
-
FieldValueType
toPickerValueType
-
RangeFieldSection
toFieldRangeSection
-
PickerShortcutChangeImportance
toPickerChangeImportance
-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>
A combination of all important transformers for migrating v6 to v7.
npx @mui/x-codemod@latest v7.0.0/preset-safe <path|folder>
The corresponding sub-sections are listed below
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
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>
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 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>
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>
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
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 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 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>
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
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>
);
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 the expansion props
<TreeView
- onNodeToggle={handleExpansionChange}
+ onExpandedItemsChange={handleExpansionChange}
- expanded={expandedItems}
+ expandedItems={expandedItems}
- defaultExpanded={defaultExpandedItems}
+ defaultExpandedItems={defaultExpandedItems}
/>
Rename the selection props
<TreeView
- onNodeSelect={handleSelectionChange}
+ onSelectedItemsChange={handleSelectionChange}
- selected={selectedItems}
+ selectedItems={selectedItems}
- defaultSelected={defaultSelectedItems}
+ defaultSelectedItems={defaultSelectedItems}
/>
Replace the TransitionComponent
and TransitionProps
components with the groupTransition
slot:
<TreeItem
- TransitionComponent={Fade}
+ slots={{ groupTransition: Fade }}
- TransitionProps={{ timeout: 600 }}
+ slotProps={{ groupTransition: { timeout: 600 } }}
/>
Replace the onNodeFocus
callback with onItemFocus
:
<TreeView
- onNodeFocus={onNodeFocus}
+ onItemFocus={onItemFocus}
/>
Rename nodeId to itemId
<TreeItem
- nodeId='unique-id'
+ itemId='unique-id'
A combination of all important transformers for migrating v5 to v6.
npx @mui/x-codemod@latest v6.0.0/preset-safe <path|folder>
The corresponding sub-sections are listed below
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
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';
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} />
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()} />
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>
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 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 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>
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 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>
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>
Replace inputFormat
prop with format
.
<DatePicker
- inputFormat="YYYY"
+ format="YYYY"
/>
npx @mui/x-codemod@latest v6.0.0/pickers/rename-inputFormat-prop <path>
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>
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>
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
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.
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 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 which is no longer supported.
<DataGrid
- disableExtendRowFullWidth
/>
npx @mui/x-codemod@latest v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop <path>
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 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.
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 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 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>
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.