@mui/x-codemod 6.0.0-beta.0 → 6.0.0-beta.1

package/README.md

@@ -87,9 +87,14 @@ 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)
+- [`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`
 
@@ -196,6 +201,165 @@ If you were always using the same text value in all your components, consider mo
 
 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
@@ -209,25 +373,28 @@ 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>
+ <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
@@ -236,18 +403,87 @@ 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
-  />
+ <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 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-beta.0",
+  "version": "6.0.0-beta.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",

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

@@ -13,6 +13,10 @@ function removeProps({
   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();
+    // 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/v6.0.0/data-grid/column-menu-components-rename/index.js

@@ -12,9 +12,10 @@ const VARIABLES = {
   GridColumnsMenuItem: 'GridColumnMenuColumnsItem',
   SortGridMenuItems: 'GridColumnMenuSortItem',
   GridColumnPinningMenuItems: 'GridColumnMenuPinningItem',
-  GridAggregationColumnMenuItem: 'GridColumnMenuAggregationItem'
+  GridAggregationColumnMenuItem: 'GridColumnMenuAggregationItem',
+  GridFilterItemProps: 'GridColumnMenuItemProps'
 };
-const PACKAGE_REGEXP = /@mui\/x-data-grid(-pro|-premium)(\/(.*)|)/;
+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;

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

@@ -6,9 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 var _columnMenuComponentsRename = _interopRequireDefault(require("../column-menu-components-rename"));
+var _rowSelectionPropsRename = _interopRequireDefault(require("../row-selection-props-rename"));
+var _renameRowsPerPageOptionsProp = _interopRequireDefault(require("../rename-rowsPerPageOptions-prop"));
 var _removeDisableExtendRowFullWidthProp = _interopRequireDefault(require("../remove-disableExtendRowFullWidth-prop"));
+var _renameSelectorsAndEvents = _interopRequireDefault(require("../rename-selectors-and-events"));
 function transformer(file, api, options) {
   file.source = (0, _columnMenuComponentsRename.default)(file, api, options);
+  file.source = (0, _rowSelectionPropsRename.default)(file, api, options);
+  file.source = (0, _renameRowsPerPageOptionsProp.default)(file, api, options);
   file.source = (0, _removeDisableExtendRowFullWidthProp.default)(file, api, options);
+  file.source = (0, _renameSelectorsAndEvents.default)(file, api, options);
   return file.source;
 }

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _removeProps = _interopRequireDefault(require("packages/x-codemod/src/util/removeProps"));
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
 const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
 const props = ['disableExtendRowFullWidth'];
 function transformer(file, api, options) {

package/v6.0.0/data-grid/rename-rowsPerPageOptions-prop/index.js

@@ -0,0 +1,26 @@
+"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 componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const props = {
+  rowsPerPageOptions: 'pageSizeOptions'
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  return (0, _renameProps.default)({
+    root,
+    j,
+    props,
+    componentNames
+  }).toSource(printOptions);
+}

package/v6.0.0/data-grid/rename-selectors-and-events/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const renamedSelectors = {
+  gridSelectionStateSelector: 'gridRowSelectionStateSelector',
+  gridVisibleSortedRowIdsSelector: 'gridExpandedSortedRowIdsSelector',
+  gridVisibleSortedRowEntriesSelector: 'gridExpandedSortedRowEntriesSelector',
+  gridVisibleRowCountSelector: 'gridExpandedRowCountSelector',
+  gridVisibleSortedTopLevelRowEntriesSelector: 'gridFilteredSortedTopLevelRowEntriesSelector',
+  gridVisibleTopLevelRowCountSelector: 'gridFilteredTopLevelRowCountSelector'
+};
+const renamedEvents = {
+  selectionChange: 'rowSelectionChange',
+  rowsScroll: 'scrollPositionChange'
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+
+  // Rename the import and usage of renamed selectors
+  // - import { gridSelectionStateSelector } from '@mui/x-data-grid'
+  // + import { gridRowSelectionStateSelector } from '@mui/x-data-grid'
+  root.find(j.Identifier).filter(path => !!renamedSelectors[path.node.name]).replaceWith(path => j.identifier(renamedSelectors[path.node.name]));
+
+  // Rename the usage of renamed event literals
+  // - useGridApiEventHandler('selectionChange', handleEvent);
+  // - apiRef.current.subscribeEvent('selectionChange', handleEvent);
+  // + useGridApiEventHandler('rowSelectionChange', handleEvent);
+  // + apiRef.current.subscribeEvent('rowSelectionChange', handleEvent);
+  root.find(j.CallExpression).find(j.Literal).filter(path => !!renamedEvents[path.node.value]).replaceWith(path => j.literal(renamedEvents[path.node.value]));
+  return root.toSource(printOptions);
+}

package/v6.0.0/data-grid/row-selection-props-rename/index.js

@@ -0,0 +1,32 @@
+"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 props = {
+  selectionModel: 'rowSelectionModel',
+  onSelectionModelChange: 'onRowSelectionModelChange',
+  disableSelectionOnClick: 'disableRowSelectionOnClick',
+  disableMultipleSelection: 'disableMultipleRowSelection',
+  showCellRightBorder: 'showCellVerticalBorder',
+  showColumnRightBorder: 'showColumnVerticalBorder',
+  headerHeight: 'columnHeaderHeight'
+};
+const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  return (0, _renameProps.default)({
+    root,
+    componentNames,
+    props,
+    j
+  }).toSource(printOptions);
+}

package/v6.0.0/pickers/migrate-to-components-componentsProps/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 _addComponentsSlots = require("../../../util/addComponentsSlots");
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+var _renameComponentsSlots = _interopRequireDefault(require("../../../util/renameComponentsSlots"));
+const propsToSlots = {
+  // components
+  TransitionComponent: {
+    prop: 'components',
+    path: 'DesktopTransition'
+  },
+  // componentsProps
+  PopperProps: {
+    prop: 'componentsProps',
+    path: 'popper'
+  },
+  DialogProps: {
+    prop: 'componentsProps',
+    path: 'dialog'
+  },
+  PaperProps: {
+    prop: 'componentsProps',
+    path: 'desktopPaper'
+  },
+  TrapFocusProps: {
+    prop: 'componentsProps',
+    path: 'desktopTrapFocus'
+  },
+  InputProps: {
+    prop: 'componentsProps',
+    path: 'textField.InputProps'
+  },
+  InputAdornmentProps: {
+    prop: 'componentsProps',
+    path: 'inputAdornment'
+  },
+  OpenPickerButtonProps: {
+    prop: 'componentsProps',
+    path: 'openPickerButton'
+  }
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const componentNames = new Set();
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return node.source.value.startsWith('@mui/x-date-pickers');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only date-pickers components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        componentNames.add(node.local.name);
+        const attributesToTransform = j(elementPath).find(j.JSXAttribute).filter(attribute => {
+          const attributeParent = attribute.parentPath.parentPath;
+          if (attribute.parentPath.parentPath.value.type !== 'JSXOpeningElement' || attributeParent.value.name.name !== node.local.name) {
+            return false;
+          }
+          return Object.keys(propsToSlots).includes(attribute.value.name.name);
+        });
+        attributesToTransform.forEach(attribute => {
+          const attributeName = attribute.value.name.name;
+
+          // Get the value in case it's:
+          // - prop={value}
+          // - prop="value"
+          // - prop (which means true)
+          const value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value || j.booleanLiteral(true);
+          (0, _addComponentsSlots.transformNestedProp)(elementPath, propsToSlots[attributeName].prop, propsToSlots[attributeName].path, value, j);
+        });
+      });
+      (0, _removeProps.default)({
+        root,
+        componentNames: [node.local.name],
+        props: Object.keys(propsToSlots),
+        j
+      });
+    });
+  });
+  return (0, _renameComponentsSlots.default)({
+    root,
+    componentNames: Array.from(componentNames),
+    translation: {
+      input: 'textField'
+    },
+    j
+  }).toSource(printOptions);
+}

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

@@ -10,6 +10,11 @@ var _textPropsToLocaleText = _interopRequireDefault(require("../text-props-to-lo
 var _viewComponentsRename = _interopRequireDefault(require("../view-components-rename"));
 var _viewComponentsRenameValueProp = _interopRequireDefault(require("../view-components-rename-value-prop"));
 var _adapterChangeImport = _interopRequireDefault(require("../adapter-change-import"));
+var _replaceTabsProps = _interopRequireDefault(require("../replace-tabs-props"));
+var _replaceToolbarPropsBySlot = _interopRequireDefault(require("../replace-toolbar-props-by-slot"));
+var _migrateToComponentsComponentsProps = _interopRequireDefault(require("../migrate-to-components-componentsProps"));
+var _replaceArrowsButtonSlot = _interopRequireDefault(require("../replace-arrows-button-slot"));
+var _renameShouldDisableTime = _interopRequireDefault(require("../rename-should-disable-time"));
 function transformer(file, api, options) {
   file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
 
@@ -18,5 +23,10 @@ function transformer(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);
+  file.source = (0, _replaceTabsProps.default)(file, api, options);
+  file.source = (0, _replaceToolbarPropsBySlot.default)(file, api, options);
+  file.source = (0, _migrateToComponentsComponentsProps.default)(file, api, options);
+  file.source = (0, _replaceArrowsButtonSlot.default)(file, api, options);
+  file.source = (0, _renameShouldDisableTime.default)(file, api, options);
   return file.source;
 }

package/v6.0.0/pickers/rename-components-to-slots/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+function transformComponentsProp(attributeNode) {
+  attributeNode.name.name = 'slots';
+  const valueExpression = attributeNode.value.expression;
+  if (valueExpression?.type !== 'ObjectExpression') {
+    return;
+  }
+  valueExpression.properties.forEach(property => {
+    property.key.name = property.key.name[0].toLowerCase() + property.key.name.slice(1);
+    if (property.shorthand) {
+      property.shorthand = false;
+    }
+  });
+}
+function transformComponentsPropsProp(attributeNode) {
+  attributeNode.name.name = 'slotProps';
+}
+
+/**
+ * @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);
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return node.source.value.startsWith('@mui/x-date-pickers');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only date-pickers components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        elementPath.node.openingElement.attributes.forEach(elementNode => {
+          if (elementNode.type !== 'JSXAttribute') {
+            return;
+          }
+          switch (elementNode.name.name) {
+            case 'components':
+              transformComponentsProp(elementNode);
+              break;
+            case 'componentsProps':
+              transformComponentsPropsProp(elementNode);
+              break;
+            default:
+          }
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/v6.0.0/pickers/rename-should-disable-time/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @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);
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return node.source.value.startsWith('@mui/x-date-pickers');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only date-pickers components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        elementPath.node.openingElement.attributes.forEach(elementNode => {
+          if (elementNode.type !== 'JSXAttribute') {
+            return;
+          }
+          if (elementNode.name.name === 'shouldDisableTime') {
+            elementNode.name.name = 'shouldDisableClock';
+          }
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/v6.0.0/pickers/replace-arrows-button-slot/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameComponentsSlots = _interopRequireDefault(require("../../../util/renameComponentsSlots"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const componentNames = new Set();
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return node.source.value.startsWith('@mui/x-date-pickers');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only date-pickers components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        componentNames.add(node.local.name);
+      });
+    });
+  });
+  return (0, _renameComponentsSlots.default)({
+    root,
+    componentNames: Array.from(componentNames),
+    translation: {
+      LeftArrowButton: 'PreviousIconButton',
+      RightArrowButton: 'NextIconButton'
+    },
+    j
+  }).toSource(printOptions);
+}

package/v6.0.0/pickers/replace-tabs-props/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameComponentsSlots = _interopRequireDefault(require("../../../util/renameComponentsSlots"));
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+const propsToComponentsProps = {
+  hideTabs: 'tabs.hidden',
+  dateRangeIcon: 'tabs.dateIcon',
+  timeIcon: 'tabs.timeIcon'
+};
+const COMPONENTS = ['DateTimePicker', 'MobileDateTimePicker', 'DesktopDateTimePicker', 'StaticDateTimePicker'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  root.find(j.JSXElement).filter(path => {
+    return COMPONENTS.includes(path.value.openingElement.name.name);
+  }).forEach(path => {
+    const attributesToTransform = j(path).find(j.JSXAttribute).filter(attribute => Object.keys(propsToComponentsProps).includes(attribute.value.name.name));
+    attributesToTransform.forEach(attribute => {
+      const attributeName = attribute.value.name.name;
+
+      // Get the value in case it's:
+      // - prop={value}
+      // - prop="value"
+      // - prop (which means true)
+      const value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value || j.booleanLiteral(true);
+      (0, _addComponentsSlots.transformNestedProp)(path, 'componentsProps', propsToComponentsProps[attributeName], value, j);
+    });
+  });
+  (0, _removeProps.default)({
+    root,
+    componentNames: COMPONENTS,
+    props: Object.keys(propsToComponentsProps),
+    j
+  });
+  return (0, _renameComponentsSlots.default)({
+    root,
+    componentNames: COMPONENTS,
+    translation: {
+      dateRangeIcon: 'dateIcon'
+    },
+    j
+  }).toSource(printOptions);
+}

package/v6.0.0/pickers/replace-toolbar-props-by-slot/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+const propsToSlots = {
+  ToolbarComponent: {
+    prop: 'components',
+    path: 'Toolbar'
+  },
+  toolbarPlaceholder: {
+    prop: 'componentsProps',
+    path: 'toolbar.toolbarPlaceholder'
+  },
+  toolbarFormat: {
+    prop: 'componentsProps',
+    path: 'toolbar.toolbarFormat'
+  },
+  showToolbar: {
+    prop: 'componentsProps',
+    path: 'toolbar.hidden'
+  },
+  toolbarTitle: {
+    prop: 'localeText',
+    path: 'toolbarTitle'
+  }
+};
+const COMPONENTS = ['DateTimePicker', 'MobileDateTimePicker', 'DesktopDateTimePicker', 'StaticDateTimePicker', 'DatePicker', 'MobileDatePicker', 'DesktopDatePicker', 'StaticDatePicker', 'TimePicker', 'MobileTimePicker', 'DesktopTimePicker', 'StaticTimePicker', 'DateRangePicker', 'MobileDateRangePicker', 'DesktopDateRangePicker', 'StaticDateRangePicker'];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  root.find(j.JSXElement).filter(path => {
+    return COMPONENTS.includes(path.value.openingElement.name.name);
+  }).forEach(path => {
+    const attributesToTransform = j(path).find(j.JSXAttribute).filter(attribute => Object.keys(propsToSlots).includes(attribute.value.name.name));
+    attributesToTransform.forEach(attribute => {
+      const attributeName = attribute.value.name.name;
+
+      // Get the value in case it's:
+      // - prop={value}
+      // - prop="value"
+      // - prop (which means true)
+      let value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value || j.booleanLiteral(true);
+      if (attributeName === 'showToolbar') {
+        if (value.type === 'BooleanLiteral' || value.type === 'Literal' && typeof value.value === 'boolean') {
+          value.value = !value.value;
+        } else {
+          value = j.unaryExpression('!', value);
+        }
+      }
+      (0, _addComponentsSlots.transformNestedProp)(path, propsToSlots[attributeName].prop, propsToSlots[attributeName].path, value, j);
+    });
+  });
+  (0, _removeProps.default)({
+    root,
+    componentNames: COMPONENTS,
+    props: Object.keys(propsToSlots),
+    j
+  });
+  return root.toSource(printOptions);
+}