Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
@mui/x-codemod
Advanced tools
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 <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 v6.0.0/preset-safe src
npx @mui/x-codemod v6.0.0/component-rename-prop src --
--component=DataGrid --from=prop --to=newProp
jscodeshift
optionsTo 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 here.
Recast
OptionsOptions to recast's printer can be provided
through jscodeshift's printOptions
command line argument
npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
preset-safe
for v7.0.0A 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 v7.0.0/preset-safe <path|folder>
The corresponding sub-sections are listed below
preset-safe
for pickers v7.0.0The preset-safe
codemods for pickers.
npx @mui/x-codemod 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 }}
+ slots={{ toolbar: CustomToolbar }}
- componentsProps={{ actionBar: { actions: ['clear'] } }}
+ slotProps={{ actionBar: { actions: ['clear'] } }}
/>;
npx @mui/x-codemod 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 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 v7.0.0/pickers/rename-day-picker-classes <path>
rename-slots-types
Replace types suffix SlotsComponent
by Slots
and SlotsComponentsProps
by SlotProps
.
- DateCalendarSlotsComponent
+ DateCalendarSlots
- DateCalendarSlotsComponentsProps
+ DateCalendarSlotProps
npx @mui/x-codemod v7.0.0/pickers/rename-slots-types <path>
preset-safe
for data grid v7.0.0The preset-safe
codemods for data grid.
npx @mui/x-codemod 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 }}
+ slots={{ toolbar: CustomToolbar }}
- componentsProps={{ toolbar: { showQuickFilter: true }}}
+ slotProps={{ toolbar: { showQuickFilter: true }}}
/>;
npx @mui/x-codemod v7.0.0/data-grid/rename-components-to-slots <path>
rename-cell-selection-props
Rename props related to cellSelection
feature.
<DataGridPremium
- unstable_cellSelection
+ cellSelection
- cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
+ cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }}
- unstable_onCellSelectionModelChange={() => {}}
+ onCellSelectionModelChange={() => {}}
/>;
npx @mui/x-codemod v7.0.0/data-grid/rename-cell-selection-props <path>
preset-safe
for v6.0.0A 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 v6.0.0/preset-safe <path|folder>
The corresponding sub-sections are listed below
preset-safe
for pickers v6.0.0The preset-safe
codemods for pickers.
npx @mui/x-codemod 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 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 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 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 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 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 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 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 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 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 }}
+ slots={{ toolbar: CustomToolbar }}
- componentsProps={{ actionBar: { actions: ['clear'] } }}
+ slotProps={{ actionBar: { actions: ['clear'] } }}
/>;
npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
preset-safe
for data grid v6.0.0The preset-safe
codemods for data grid.
npx @mui/x-codemod 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 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 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 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 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 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 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 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 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 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 }}
+ slots={{ toolbar: CustomToolbar }}
- componentsProps={{ actionBar: { actions: ['clear'] } }}
+ slotProps={{ actionBar: { actions: ['clear'] } }}
/>;
npx @mui/x-codemod v6.0.0/data-grid/rename-components-to-slots <path>
You can find more details about Data Grid breaking change in the migration guide.
7.0.0-alpha.6
Dec 22, 2023
We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
Date
objects in the filterModel
The filter panel no longer uses the native version of the Select
component for all components.
The getOptionValue
and getOptionLabel
props were removed from the following components:
GridEditSingleSelectCell
GridFilterInputSingleSelect
GridFilterInputMultipleSingleSelect
Use the getOptionValue
and getOptionLabel
properties on the singleSelect
column definition instead:
const column: GridColDef = {
type: 'singleSelect',
field: 'country',
valueOptions: [
{ code: 'BR', name: 'Brazil' },
{ code: 'FR', name: 'France' },
],
getOptionValue: (value: any) => value.code,
getOptionLabel: (value: any) => value.name,
};
The filterModel
now supports Date
objects as values for date
and dateTime
column types.
The filterModel
still accepts strings as values for date
and dateTime
column types,
but all updates to the filterModel
coming from the UI (for example filter panel) will set the value as a Date
object.
FAQs
Codemod scripts for MUI X.
The npm package @mui/x-codemod receives a total of 986 weekly downloads. As such, @mui/x-codemod popularity was classified as not popular.
We found that @mui/x-codemod demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.