@mui/x-codemod 6.0.0-alpha.9 → 6.0.0-beta.1

package/README.md

@@ -62,19 +62,94 @@ npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":
 
 #### 🚀 `preset-safe`
 
-A combination of all important transformers for migrating v5 to v6. ⚠️ This codemod should be run only once.
+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.
 
 ```sh
 npx @mui/x-codemod v6.0.0/preset-safe <path|folder>
 ```
 
+The corresponding sub-sections are listed below
+
+- [`preset-safe-for-pickers`](#preset-safe-for-pickers)
+- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid)
+
+### Pickers codemods
+
+#### `preset-safe` for pickers
+
+The `preset-safe` codemods for pickers.
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/preset-safe <path|folder>
+```
+
 The list includes these transformers
 
+- [`adapter-change-import`](#adapter-change-import)
+- [`view-components-rename`](#view-components-rename)
+- [`view-components-rename-value-prop`](#view-components-rename-value-prop)
 - [`localization-provider-rename-locale`](#localization-provider-rename-locale)
+- [`text-props-to-localeText`](#text-props-to-localeText)
+- [`replace-tabs-props`](#replace-tabs-props)
+- [`replace-toolbar-props-by-slot`](#replace-toolbar-props-by-slot)
+- [`migrate-to-components-componentsProps`](#migrate-to-components-componentsProps)
+- [`replace-arrows-button-slot`](#replace-arrows-button-slot)
+- [`rename-should-disable-time`](#rename-should-disable-time)
+
+#### `adapter-change-import`
+
+Import the adapters from `@mui/x-date-pickers` instead of `@date-io`.
+
+```diff
+-import AdapterJalaali from '@date-io/jalaali';
++import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';
+```
+
+#### `view-components-rename`
+
+Renames the view components.
+
+```diff
+-<CalendarPicker {...props} />
++<DateCalendar {...props} />
+
+-<DayPicker {...props} />
++<DayCalendar {...props} />
+
+-<CalendarPickerSkeleton {...props} />
++<DayCalendarSkeleton {...props} />
+
+-<MonthPicker {...props} />
++<MonthCalendar {...props} />
+
+-<YearPicker {...props} />
++<YearCalendar {...props} />
+
+-<ClockPicker {...props} />
++<TimeClock {...props} />
+```
+
+#### `view-components-rename-value-prop`
+
+Renames the `date` prop of the view components into `value`.
+
+```diff
+-<MonthPicker date={dayjs()} />
++<MonthCalendar value={dayjs()} />
+
+-<YearPicker date={dayjs()} />
++<YearCalendar value={dayjs()} />
+
+-<ClockPicker date={dayjs()} />
++<TimeClock value={dayjs()} />
+
+-<CalendarPicker date={dayjs()} />
++<DateCalendar value={dayjs()} />
+```
 
 #### `localization-provider-rename-locale`
 
-Renames `locale` into `adapterLocale` (or `LocalizationProvider`)
+Renames the `locale` prop of the `LocalizationProvider` component into `adapterLocale`.
 
 ```diff
  <LocalizationProvider
@@ -88,7 +163,327 @@ Renames `locale` into `adapterLocale` (or `LocalizationProvider`)
 ```
 
 ```sh
-npx @mui/x-codemod v6.0.0/localization-provider-rename-locale <path>
+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.
+
+```diff
+ <DatePicker
+-  cancelText="Cancelar"
++  localeText={{
++    cancelButtonLabel: "Cancelar"
++  }}
+ />
+```
+
+```sh
+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.
+
+```diff
+ <LocalizationProvider
+   dateAdapter={AdapterDayjs}
++ localeText={{ cancelButtonLabel: "Cancelar" }}
+ >
+   <DatePicker
+-    localeText={{ cancelButtonLabel: "Cancelar" }}
+   />
+   <DateTimePicker
+-    localeText={{ cancelButtonLabel: "Cancelar" }}
+   />
+ </LocalizationProvider>
+```
+
+You can find more details about Date and Time breaking changes in [the migration guide](https://next.mui.com/x/migration/migration-pickers-v5/).
+
+#### `replace-tabs-props`
+
+Replace props used for `Tabs` in DateTime pickers by `componentsProps.tabs` properties.
+
+```diff
+ <DateTimePicker
+-  hideTabs={false}
+-  dateRangeIcon={<LightModeIcon />}
+-  timeIcon={<AcUnitIcon />}
++  componentsProps={{
++    tabs: {
++      hidden: false,
++      dateIcon: <LightModeIcon />,
++      timeIcon: <AcUnitIcon />,
++    }
++  }}
+ />
+```
+
+```sh
+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`.
+
+```diff
+ <DatePicker
+-  ToolbarComponent={MyToolbar}
++  components={{ Toolbar: MyToolbar }}
+-  toolbarPlaceholder="__"
+-  toolbarFormat="DD / MM / YYYY"
+-  showToolbar
++  componentsProps={{
++    toolbar: {
++      toolbarPlaceholder: "__",
++      toolbarFormat: "DD / MM / YYYY",
++      hidden: false,
++    }
++  }}
+-  toolbarTitle="Title"
++  localeText={{ toolbarTitle: "Title" }}
+```
+
+```sh
+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.
+
+```diff
+ <DatePicker
+-  PopperProps={{ onClick: handleClick }}
++  componentsProps={{ popper: { onClick: handleClick }}}
+ />
+
+ <DatePicker
+-  TransitionComponent={Fade}
++  components={{ DesktopTransition: Fade }}
+ />
+
+ <DatePicker
+-  DialogProps={{ backgroundColor: 'red' }}
++  componentsProps={{ dialog: { backgroundColor: 'red' }}}
+ />
+
+ <DatePicker
+-  PaperProps={{ backgroundColor: 'red' }}
++  componentsProps={{ desktopPaper: { backgroundColor: 'red' }}}
+ />
+
+ <DatePicker
+-  TrapFocusProps={{ isEnabled: () => false }}
++  componentsProps={{ desktopTrapFocus: { isEnabled: () => false }}}
+ />
+
+ <DatePicker
+-  InputProps={{ color: 'primary' }}
++  componentsProps={{ textField: { InputProps: { color: 'primary' }}}}
+ />
+
+ <DatePicker
+-  InputAdornmentProps={{ position: 'start' }}
++  componentsProps={{ inputAdornment: { position: 'start' }}}
+ />
+
+ <DatePicker
+-  OpenPickerButtonProps={{ ref: buttonRef }}
++  componentsProps={{ openPickerButton: { ref: buttonRef }}}
+ />
+```
+
+```sh
+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`.
+
+```diff
+ <DatePicker
+   components={{
+-    LeftArrowButton: CustomButton,
++    PreviousIconButton: CustomButton,
+-    RightArrowButton: CustomButton,
++    NextIconButton: CustomButton,
+   }}
+
+   componentsProps={{
+-    leftArrowButton: {},
++    previousIconButton: {},
+-    rightArrowButton: {},
++    nextIconButton: {},
+   }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/replace-arrows-button-slot <path>
+```
+
+#### `rename-should-disable-time`
+
+Replace `shouldDisableTime` by `shouldDisableClock`.
+
+```diff
+  <DateTimePicker
+-   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
++   shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+  />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/rename-should-disable-time <path>
+```
+
+#### `rename-components-to-slots`
+
+Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
+
+This change only affects pickers components.
+
+```diff
+ <DatePicker
+-  components={{ Toolbar: CustomToolbar }}
++  slots={{ toolbar: CustomToolbar }}
+-  componentsProps={{ actionBar: { actions: ['clear'] } }}
++  slotProps={{ actionBar: { actions: ['clear'] } }}
+ />;
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
+```
+
+### Data grid codemods
+
+#### `preset-safe` for data grid
+
+The `preset-safe` codemods for data grid.
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`column-menu-components-rename`](#column-menu-components-rename)
+- [`row-selection-props-rename`](#row-selection-props-rename)
+- [`rename-rowsPerPageOptions-prop`](#rename-rowsPerPageOptions-prop)
+- [`remove-disableExtendRowFullWidth-prop`](#remove-disableExtendRowFullWidth-prop)
+- [`rename-selectors-and-events`](#rename-selectors-and-events)
+
+#### `column-menu-components-rename`
+
+Replace column menu items that have been renamed.
+
+```diff
+ <CustomColumnMenu>
+-  <GridFilterMenuItem column={column} onClick={hideMenu} />
++  <GridColumnMenuFilterItem colDef={column} onClick={hideMenu} />
+-  <HideGridColMenuItem column={column} onClick={hideMenu} />
++  <GridColumnMenuHideItem colDef={column} onClick={hideMenu} />
+-  <GridColumnsMenuItem column={column} onClick={hideMenu} />
++  <GridColumnMenuColumnsItem colDef={column} onClick={hideMenu} />
+-  <SortGridMenuItems column={column} onClick={hideMenu} />
++  <GridColumnMenuSortItem colDef={column} onClick={hideMenu} />
+-  <GridColumnPinningMenuItems column={column} onClick={hideMenu} />
++  <GridColumnMenuPinningItem colDef={column} onClick={hideMenu} />
+ </CustomColumnMenu>
+```
+
+```sh
+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.
+
+```diff
+ <DataGrid
+-  selectionModel={model}
++  rowSelectionModel={model}
+-  onSelectionModelChange={handler}
++  onRowSelectionModelChange={handler}
+-  disableSelectionOnClick
++  disableRowSelectionOnClick
+-  disableMultipleSelection
++  disableMultipleRowSelection
+-  showCellRightBorder
++  showCellVerticalBorder
+-  showColumnRightBorder
++  showColumnVerticalBorder
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/row-selection-props-rename <path>
+```
+
+#### `rename-rowsPerPageOptions-prop`
+
+Rename `rowsPerPageOptions` prop to `pageSizeOptions`.
+
+```diff
+ <DataGrid
+-  rowsPerPageOptions={[5, 10, 20]}
++  pageSizeOptions={[5, 10, 20]}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/rename-rowsPerPageOptions-prop <path>
+```
+
+#### `remove-disableExtendRowFullWidth-prop`
+
+Remove `disableExtendRowFullWidth` prop which is no longer supported.
+
+```diff
+ <DataGrid
+-  disableExtendRowFullWidth
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop <path>
+```
+
+#### `rename-selectors-and-events`
+
+Rename selectors and events.
+
+```diff
+ function App() {
+-  useGridApiEventHandler('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);
++  useGridApiEventHandler('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);
+ }
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/rename-selectors-and-events <path>
 ```
 
-You can find more details about this breaking change in [the migration guide](https://next.mui.com/x/migration/migration-pickers-v5/#rename-the-locale-prop-on-localizationprovider).
+You can find more details about Data Grid breaking change in [the migration guide](https://next.mui.com/x/migration/migration-data-grid-v5/).

package/codemod.js

@@ -57,7 +57,6 @@ function run(argv) {
 _yargs.default.command({
   command: '$0 <codemod> <paths...>',
   describe: 'Applies a `@mui/x-codemod` to the specified paths',
-  // @ts-expect-error
   builder: command => {
     return command.positional('codemod', {
       description: 'The name of the codemod',
@@ -76,5 +75,6 @@ _yargs.default.command({
       type: 'array'
     });
   },
+  // @ts-expect-error
   handler: run
 }).scriptName('npx @mui/x-codemod').example('$0 v6.0.0/localization-provider-rename-locale src', 'Run "localization-provider-rename-locale" codemod on "src" path').example('$0 v6.0.0/component-rename-prop src -- --component=DataGrid --from=prop --to=newProp', 'Run "component-rename-prop" codemod in "src" path on "DataGrid" component with custom "from" and "to" arguments').help().parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-beta.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -31,9 +31,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/runtime": "^7.20.1",
-    "@babel/traverse": "^7.20.1",
+    "@babel/core": "^7.20.12",
+    "@babel/runtime": "^7.20.7",
+    "@babel/traverse": "^7.20.12",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.6.2"

package/util/addComponentsSlots.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformNestedProp = exports.addItemToObject = void 0;
+/**
+ * Recusive function that:
+ * Return a jscodeshift object with `value` associated to path.
+ * The path can be such as 'tabs.hidden' which will return `{ tabs: { hidden: value } }`.
+ * If object is not null, path/value will be added respecting the other properties of the object.
+ */
+const addItemToObject = (path, value, object, j) => {
+  const splitedPath = path.split('.');
+
+  // Final case where we have to add the property to the object.
+  if (splitedPath.length === 1) {
+    const propertyToAdd = j.objectProperty(j.identifier(path), value);
+    if (object === null) {
+      return j.objectExpression([propertyToAdd]);
+    }
+    return j.objectExpression([...(object.properties ?? []).filter(property => property.key.name !== path), propertyToAdd]);
+  }
+  const remainingPath = splitedPath.slice(1).join('.');
+  const targetKey = splitedPath[0];
+  if (object === null) {
+    // Simplest case, no object to take into consideration
+    const propertyToAdd = j.objectProperty(j.identifier(targetKey), addItemToObject(remainingPath, value, null, j));
+    return j.objectExpression([propertyToAdd]);
+  }
+
+  // Look if the object we got already contains the property we have to use.
+  const correspondingObject = (object.properties ?? []).find(property => property.key.name === targetKey);
+  const propertyToAdd = j.objectProperty(j.identifier(targetKey),
+  // Here we use recursion to mix the new value with the current one
+  addItemToObject(remainingPath, value, correspondingObject?.value ?? null, j));
+  return j.objectExpression([...(object.properties ?? []).filter(property => property.key.name !== targetKey), propertyToAdd]);
+};
+
+/**
+ *
+ * @param elementPath jscodshift path of the element
+ * @param propName the name of the prop to edit (`'componentsProps'` for example)
+ * @param nestedPath path of the nested object keys with '.' to separate. ('tabs.hidden' for example)
+ * @param value the jscodeshift value to associate to the key
+ * @param j jscodeshift
+ */
+exports.addItemToObject = addItemToObject;
+const transformNestedProp = (elementPath, propName, nestedPath, value, j) => {
+  const initialAttribute = elementPath.value.openingElement.attributes?.find(attribute => attribute.name.name === propName);
+  // the object in JSX element
+  const initialValue = initialAttribute?.value.expression;
+
+  // Add the value
+  const withNewValues = addItemToObject(nestedPath, value, initialValue ?? null, j);
+
+  // Create a new component with the prop added
+  const newComponent = j.jsxElement(j.jsxOpeningElement(elementPath.node.openingElement.name, [...(elementPath.node.openingElement.attributes ?? []).filter(attribute => attribute.name.name !== propName),
+  // build and insert our new prop
+  j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(withNewValues))]), elementPath.node.closingElement, elementPath.node.children);
+  newComponent.openingElement.selfClosing = elementPath.node.closingElement === null;
+  newComponent.selfClosing = elementPath.node.closingElement === null;
+
+  // Replace our original component with our modified one
+  j(elementPath).replaceWith(newComponent);
+};
+exports.transformNestedProp = transformNestedProp;

package/util/removeProps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = removeProps;
+function removeProps({
+  root,
+  componentNames,
+  props,
+  j
+}) {
+  return root.find(j.JSXElement).filter(path => {
+    return componentNames.includes(path.value.openingElement.name.name);
+  }).find(j.JSXAttribute).filter(attribute => props.includes(attribute.node.name.name)).forEach(attribute => {
+    // Only remove props from components in componentNames. Not nested ones.
+    const attributeParent = attribute.parentPath.parentPath;
+    if (attributeParent.value.type === 'JSXOpeningElement' && componentNames.includes(attributeParent.value.name.name)) {
+      j(attribute).remove();
+    }
+  });
+}

package/util/renameComponentsSlots.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renameComponentsSlots;
+const lowerCase = key => `${key.slice(0, 1).toLowerCase()}${key.slice(1)}`;
+const getSlotsTranslation = translations => {
+  const lowercasedTranslation = {};
+  Object.entries(translations).forEach(([key, value]) => {
+    lowercasedTranslation[lowerCase(key)] = lowerCase(value);
+  });
+  return lowercasedTranslation;
+};
+function renameComponentsSlots({
+  root,
+  componentNames,
+  translation,
+  j
+}) {
+  return root.find(j.JSXElement).filter(path => {
+    return componentNames.includes(path.value.openingElement.name.name);
+  }).find(j.JSXAttribute).filter(attribute => ['components', 'componentsProps', 'slots', 'slotProps'].includes(attribute.node.name.name)).forEach(attribute => {
+    const usedTranslation = attribute.node.name.name === 'components' ? translation : getSlotsTranslation(translation);
+    j(attribute).find(j.Property).forEach(property => {
+      if (property.value.key.type === 'Identifier' && usedTranslation[property.value.key.name] !== undefined) {
+        property.value.key.name = usedTranslation[property.value.key.name];
+      }
+    });
+  });
+}

package/util/renameProps.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = renameProps;
 function renameProps({
   root,
-  componentName,
-  props
+  componentNames,
+  props,
+  j
 }) {
-  return root.findJSXElements(componentName).forEach(path => {
-    path.node.openingElement.attributes?.forEach(node => {
-      if (node.type === 'JSXAttribute' && Object.keys(props).includes(node.name.name)) {
-        node.name.name = props[node.name.name];
-      }
-    });
+  return root.find(j.JSXElement).filter(path => {
+    return componentNames.includes(path.value.openingElement.name.name);
+  }).find(j.JSXAttribute).filter(attribute => Object.keys(props).includes(attribute.node.name.name)).forEach(attribute => {
+    j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(props[attribute.node.name.name]), attribute.node.value));
   });
 }

package/v6.0.0/component-rename-prop/index.js

@@ -12,9 +12,10 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   return (0, _renameProps.default)({
     root,
-    componentName: options.component,
+    componentNames: [options.component],
     props: {
       [options.from]: options.to
-    }
+    },
+    j
   }).toSource(printOptions);
 }

package/v6.0.0/data-grid/column-menu-components-rename/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+const VARIABLES = {
+  GridFilterMenuItem: 'GridColumnMenuFilterItem',
+  HideGridColMenuItem: 'GridColumnMenuHideItem',
+  GridColumnsMenuItem: 'GridColumnMenuColumnsItem',
+  SortGridMenuItems: 'GridColumnMenuSortItem',
+  GridColumnPinningMenuItems: 'GridColumnMenuPinningItem',
+  GridAggregationColumnMenuItem: 'GridColumnMenuAggregationItem',
+  GridFilterItemProps: 'GridColumnMenuItemProps'
+};
+const PACKAGE_REGEXP = /@mui\/x-data-grid(-pro|-premium)?/;
+const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
+
+  // Rename the import specifiers
+  // - import { GridFilterMenuItem } from '@mui/x-data-grid'
+  // + import { GridColumnMenuFilterItem } from '@mui/x-data-grid'
+  matchingImports.find(j.ImportSpecifier).filter(path => !!VARIABLES[path.node.imported.name]).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
+
+  // Rename the import usage
+  // - <GridFilterMenuItem />
+  // + <GridColumnMenuFilterItem />
+  root.find(j.Identifier).filter(path => !!VARIABLES[path.node.name]).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
+
+  // Rename `column` prop to `colDef`
+  // - <GridFilterMenuItem column={col} onClick={onClick} />
+  // + <GridFilterMenuItem colDef={col} onClick={onClick} />
+  return (0, _renameProps.default)({
+    root,
+    componentNames: Object.values(VARIABLES),
+    props: {
+      column: 'colDef'
+    },
+    j
+  }).toSource(printOptions);
+}