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

package/README.md

@@ -62,19 +62,89 @@ 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)
 - [`localization-provider-rename-locale`](#localization-provider-rename-locale)
+- [`text-props-to-localeText`](#text-props-to-localeText)
+
+#### `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 +158,96 @@ 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/).
+
+### 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)
+- [`remove-disableExtendRowFullWidth-prop`](#remove-disableExtendRowFullWidth-prop)
+
+#### `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.
+
+#### `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>
 ```
 
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-beta.0",
   "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/removeProps.js

@@ -0,0 +1,18 @@
+"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 => {
+    j(attribute).remove();
+  });
+}

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,49 @@
+"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'
+};
+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);
+}

package/v6.0.0/data-grid/preset-safe/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _columnMenuComponentsRename = _interopRequireDefault(require("../column-menu-components-rename"));
+var _removeDisableExtendRowFullWidthProp = _interopRequireDefault(require("../remove-disableExtendRowFullWidth-prop"));
+function transformer(file, api, options) {
+  file.source = (0, _columnMenuComponentsRename.default)(file, api, options);
+  file.source = (0, _removeDisableExtendRowFullWidthProp.default)(file, api, options);
+  return file.source;
+}

package/v6.0.0/data-grid/remove-disableExtendRowFullWidth-prop/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _removeProps = _interopRequireDefault(require("packages/x-codemod/src/util/removeProps"));
+const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const props = ['disableExtendRowFullWidth'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  return (0, _removeProps.default)({
+    root,
+    j,
+    props,
+    componentNames
+  }).toSource(printOptions);
+}

package/v6.0.0/pickers/adapter-change-import/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const adapters = {
+  'date-fns': 'AdapterDateFns',
+  'date-fns-jalali': 'AdapterDateFnsJalali',
+  dayjs: 'AdapterDayjs',
+  luxon: 'AdapterLuxon',
+  moment: 'AdapterMoment',
+  hijri: 'AdapterMomentHijri',
+  jalaali: 'AdapterMomentJalaali'
+};
+const getDateIoSubPackage = path => (path.node.source.value?.toString() ?? '').match(/@date-io\/(.*)/)?.[1];
+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 => {
+    const subPackage = getDateIoSubPackage(path);
+    return !!subPackage && !!adapters[subPackage];
+  });
+  const adapterVariableNames = {};
+
+  // Replace the default import specifier by an import specifiers
+  // - import WhateverDateFns from '@mui/x-date-pickers/MonthPicker'
+  // + import { AdapterDateFns } from '@mui/x-date-pickers/MonthPicker'
+  matchingImports.find(j.ImportDefaultSpecifier).replaceWith(path => {
+    const subPackage = getDateIoSubPackage(path.parentPath.parentPath);
+    const adapterVariableName = path.value.local?.name ?? '';
+    adapterVariableNames[adapterVariableName] = adapters[subPackage];
+    return j.importSpecifier(j.identifier(adapters[subPackage]));
+  });
+
+  // Rename the import declarations
+  // - import {} from '@date-io/date-fns'
+  // + import {} from '@mui/x-date-pickers/AdapterDateFns'
+  matchingImports.replaceWith(path => {
+    const subPackage = getDateIoSubPackage(path);
+    return j.importDeclaration(path.node.specifiers,
+    // copy over the existing import specifiers
+    j.stringLiteral(`@mui/x-date-pickers/${adapters[subPackage]}`) // Replace the source with our new source
+    );
+  });
+
+  // Rename the import usage
+  // - <LocalizationProvider dateAdapter={WhateverDateFns} />
+  // + <LocalizationProvider dateAdapter={AdapterDateFns} />
+  root.find(j.Identifier).filter(path => !!adapterVariableNames[path.node.name]).replaceWith(path => j.identifier(adapterVariableNames[path.node.name]));
+  return root.toSource(printOptions);
+}

package/v6.0.0/{localization-provider-rename-locale → pickers/localization-provider-rename-locale}/index.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _renameProps = _interopRequireDefault(require("../../util/renameProps"));
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;
   return (0, _renameProps.default)({
     root,
-    componentName: 'LocalizationProvider',
+    componentNames: ['LocalizationProvider'],
     props: {
       locale: 'adapterLocale'
-    }
+    },
+    j
   }).toSource(printOptions);
 }

package/v6.0.0/pickers/preset-safe/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _localizationProviderRenameLocale = _interopRequireDefault(require("../localization-provider-rename-locale"));
+var _textPropsToLocaleText = _interopRequireDefault(require("../text-props-to-localeText"));
+var _viewComponentsRename = _interopRequireDefault(require("../view-components-rename"));
+var _viewComponentsRenameValueProp = _interopRequireDefault(require("../view-components-rename-value-prop"));
+var _adapterChangeImport = _interopRequireDefault(require("../adapter-change-import"));
+function transformer(file, api, options) {
+  file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
+
+  // All the codemods impacting the view components should be run before renaming these components
+  file.source = (0, _textPropsToLocaleText.default)(file, api, options);
+  file.source = (0, _viewComponentsRenameValueProp.default)(file, api, options);
+  file.source = (0, _viewComponentsRename.default)(file, api, options);
+  file.source = (0, _adapterChangeImport.default)(file, api, options);
+  return file.source;
+}

package/v6.0.0/pickers/text-props-to-localeText/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const defaultPropsToKey = {
+  cancelText: ['cancelButtonLabel'],
+  okText: ['okButtonLabel'],
+  todayText: ['todayButtonLabel'],
+  clearText: ['clearButtonLabel'],
+  endText: ['end'],
+  getClockLabelText: ['clockLabelText'],
+  getHoursClockNumberText: ['hoursClockNumberText'],
+  getMinutesClockNumberText: ['minutesClockNumberText'],
+  getSecondsClockNumberText: ['secondsClockNumberText'],
+  getViewSwitchingButtonText: ['calendarViewSwitchingButtonAriaLabel'],
+  startText: ['start']
+};
+const isMonthSwitchComponent = {
+  DatePicker: true,
+  StaticDatePicker: true,
+  MobileDatePicker: true,
+  DesktopDatePicker: true,
+  DateRangePicker: true,
+  StaticDateRangePicker: true,
+  MobileDateRangePicker: true,
+  DesktopDateRangePicker: true,
+  CalendarPicker: true,
+  // Special cases of DateTimePickers present in both
+  DateTimePicker: true,
+  StaticDateTimePicker: true,
+  MobileDateTimePicker: true,
+  DesktopDateTimePicker: true
+};
+const isViewSwitchComponent = {
+  TimePicker: true,
+  StaticTimePicker: true,
+  MobileTimePicker: true,
+  DesktopTimePicker: true,
+  DateTimePicker: true,
+  ClockPicker: true,
+  // Special cases of DateTimePickers present in both
+  StaticDateTimePicker: true,
+  MobileDateTimePicker: true,
+  DesktopDateTimePicker: true
+};
+const needsWrapper = {
+  ClockPicker: true,
+  CalendarPicker: true
+};
+const impactedComponents = ['DateRangePicker', 'CalendarPicker', 'ClockPicker', 'DatePicker', 'DateRangePicker', 'DateRangePickerDay', 'DateTimePicker', 'DesktopDatePicker', 'DesktopDateRangePicker', 'DesktopDateTimePicker', 'DesktopTimePicker', 'MobileDatePicker', 'MobileDateRangePicker', 'MobileDateTimePicker', 'MobileTimePicker', 'StaticDatePicker', 'StaticDateRangePicker', 'StaticDateTimePicker', 'StaticTimePicker', 'TimePicker'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const root = j(file.source);
+  impactedComponents.forEach(componentName => {
+    const propsToKey = (0, _extends2.default)({}, defaultPropsToKey, {
+      leftArrowButtonText: [...(isViewSwitchComponent[componentName] ? ['openPreviousView'] : []), ...(isMonthSwitchComponent[componentName] ? ['previousMonth'] : [])],
+      rightArrowButtonText: [...(isViewSwitchComponent[componentName] ? ['openNextView'] : []), ...(isMonthSwitchComponent[componentName] ? ['nextMonth'] : [])]
+    });
+    root.findJSXElements(componentName).forEach(path => {
+      const newLocaleText = [];
+      const attributes = path.node.openingElement.attributes;
+      attributes.forEach((node, index) => {
+        if (node.type === 'JSXAttribute' && propsToKey[node.name.name] !== undefined) {
+          const newNames = propsToKey[node.name.name];
+          newNames.forEach(newName => {
+            const property = j.objectProperty(j.identifier(newName), node.value.expression ? node.value.expression : j.literal(node.value.value));
+            property.shorthand = node.value.expression && node.value.expression.name === newName;
+            newLocaleText.push(property);
+          });
+          delete attributes[index];
+        }
+      });
+      if (newLocaleText.length > 0) {
+        if (needsWrapper[componentName]) {
+          // From : https://www.codeshiftcommunity.com/docs/react/#wrapping-components
+
+          // Create a new JSXElement called "LocalizationProvider" and use the original component as children
+          const wrappedComponent = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier('LocalizationProvider'), [
+          // Add the new localeText prop
+          j.jsxAttribute(j.jsxIdentifier('localeText'), j.jsxExpressionContainer(j.objectExpression(newLocaleText)))]), j.jsxClosingElement(j.jsxIdentifier('LocalizationProvider')), [path.value] // Pass in the original component as children
+          );
+
+          j(path).replaceWith(wrappedComponent);
+        } else {
+          attributes.push(j.jsxAttribute(j.jsxIdentifier('localeText'), j.jsxExpressionContainer(j.objectExpression(newLocaleText))));
+        }
+      }
+    });
+  });
+  return root.toSource(printOptions);
+}

package/v6.0.0/pickers/view-components-rename/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const SUB_PACKAGES = {
+  CalendarPicker: 'DateCalendar',
+  CalendarPickerSkeleton: 'DayCalendarSkeleton',
+  MonthPicker: 'MonthCalendar',
+  YearPicker: 'YearCalendar',
+  ClockPicker: 'TimeClock'
+};
+const VARIABLES = {
+  // Date Calendar
+  CalendarPicker: 'DateCalendar',
+  CalendarPickerProps: 'DateCalendarProps',
+  CalendarPickerSlotsComponent: 'DateCalendarSlotsComponent',
+  CalendarPickerSlotsComponentsProps: 'DateCalendarSlotsComponentsProps',
+  CalendarPickerClasses: 'DateCalendarClasses',
+  CalendarPickerClassKey: 'DateCalendarClassKey',
+  calendarPickerClasses: 'dateCalendarClasses',
+  getCalendarPickerUtilityClass: 'getDateCalendarUtilityClass',
+  // Month Calendar
+  MonthPicker: 'MonthCalendar',
+  MonthPickerProps: 'MonthCalendarProps',
+  MonthPickerClasses: 'MonthCalendarClasses',
+  MonthPickerClassKey: 'MonthCalendarClassKey',
+  monthPickerClasses: 'monthCalendarClasses',
+  getMonthPickerUtilityClass: 'getMonthCalendarUtilityClass',
+  YearPicker: 'YearCalendar',
+  YearPickerProps: 'YearCalendarProps',
+  YearPickerClasses: 'YearCalendarClasses',
+  YearPickerClassKey: 'YearCalendarClassKey',
+  yearPickerClasses: 'yearCalendarClasses',
+  getYearPickerUtilityClass: 'getYearCalendarUtilityClass',
+  ClockPicker: 'TimeClock',
+  ClockPickerProps: 'TimeClockProps',
+  ClockPickerClasses: 'TimeClockClasses',
+  ClockPickerClassKey: 'TimeClockClassKey',
+  clockPickerClasses: 'timeClockClasses',
+  getClockPickerUtilityClass: 'getTimeClockUtilityClass',
+  CalendarPickerSkeleton: 'DayCalendarSkeleton',
+  CalendarPickerSkeletonProps: 'DayCalendarSkeletonProps',
+  CalendarPickerSkeletonClasses: 'DayCalendarSkeletonClasses',
+  CalendarPickerSkeletonClassKey: 'DayCalendarSkeletonClassKey',
+  calendarPickerSkeletonClasses: 'dayCalendarSkeletonClasses',
+  getCalendarPickerSkeletonUtilityClass: 'getDayCalendarSkeletonUtilityClass'
+};
+const PACKAGE_REGEXP = /@mui\/x-date-pickers(-pro|)(\/(.*)|)/;
+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 { MonthPicker } from '@mui/x-date-pickers/MonthPicker'
+  // + import { MonthCalendar } from '@mui/x-date-pickers/MonthPicker'
+  matchingImports.find(j.ImportSpecifier).filter(path => !!VARIABLES[path.node.imported.name]).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
+
+  // Rename the nested import declarations
+  // - import {} from '@mui/x-date-pickers/MonthPicker'
+  // + import {} from '@mui/x-date-pickers/MonthCalendar'
+  matchingImports.filter(path => !!SUB_PACKAGES[matchImport(path)?.[3] ?? '']).replaceWith(path => {
+    const subPackage = matchImport(path)[3];
+    const importPath = path.node.source.value?.toString() ?? '';
+    return j.importDeclaration(path.node.specifiers,
+    // copy over the existing import specifiers
+    j.stringLiteral(importPath.replace(subPackage, SUB_PACKAGES[subPackage])) // Replace the source with our new source
+    );
+  });
+
+  // Rename the import usage
+  // - <CalendarPicker />
+  // + <DateCalendar />
+  root.find(j.Identifier).filter(path => !!VARIABLES[path.node.name]).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
+  return root.toSource(printOptions);
+}

package/v6.0.0/pickers/view-components-rename-value-prop/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const result = (0, _renameProps.default)({
+    root,
+    componentNames: ['MonthPicker', 'YearPicker', 'CalendarPicker', 'ClockPicker'],
+    props: {
+      date: 'value'
+    },
+    j
+  });
+  return result.toSource(printOptions);
+}

package/v6.0.0/preset-safe/index.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _localizationProviderRenameLocale = _interopRequireDefault(require("../localization-provider-rename-locale"));
+var _presetSafe = _interopRequireDefault(require("../pickers/preset-safe"));
+var _presetSafe2 = _interopRequireDefault(require("../data-grid/preset-safe"));
 function transformer(file, api, options) {
-  file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
+  file.source = (0, _presetSafe.default)(file, api, options);
+  file.source = (0, _presetSafe2.default)(file, api, options);
   return file.source;
 }