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

package/README.md

@@ -95,6 +95,8 @@ The list includes these transformers
 - [`migrate-to-components-componentsProps`](#migrate-to-components-componentsProps)
 - [`replace-arrows-button-slot`](#replace-arrows-button-slot)
 - [`rename-should-disable-time`](#rename-should-disable-time)
+- [`rename-inputFormat-prop`](#rename-inputFormat-prop)
+- [`rename-default-toolbar-title-localeText`](#rename-default-toolbar-title-localeText)
 
 #### `adapter-change-import`
 
@@ -341,6 +343,44 @@ Replace `shouldDisableTime` by `shouldDisableClock`.
 npx @mui/x-codemod v6.0.0/pickers/rename-should-disable-time <path>
 ```
 
+#### `rename-inputFormat-prop`
+
+Replace `inputFormat` prop with `format`.
+
+```diff
+ <DatePicker
+-  inputFormat="YYYY"
++  format="YYYY"
+ />
+```
+
+```sh
+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.
+
+```diff
+ <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',
+   }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/rename-default-toolbar-title-localeText <path>
+```
+
 #### `rename-components-to-slots`
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
@@ -376,7 +416,11 @@ The list includes these transformers
 - [`row-selection-props-rename`](#row-selection-props-rename)
 - [`rename-rowsPerPageOptions-prop`](#rename-rowsPerPageOptions-prop)
 - [`remove-disableExtendRowFullWidth-prop`](#remove-disableExtendRowFullWidth-prop)
+- [`rename-linkOperators-logicOperators`](#rename-linkOperators-logicOperators)
+- [`rename-filter-item-props`](#rename-filter-item-props)
 - [`rename-selectors-and-events`](#rename-selectors-and-events)
+- [`remove-stabilized-experimentalFeatures`](#remove-stabilized-experimentalFeatures)
+- [`replace-onCellFocusOut-prop`](#replace-onCellFocusOut-prop)
 
 #### `column-menu-components-rename`
 
@@ -457,6 +501,102 @@ Remove `disableExtendRowFullWidth` prop which is no longer supported.
 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.
+
+```diff
+ 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' },
+  }}
+ />
+```
+
+```sh
+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.
+
+```diff
+ <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',
+      },
+    ],
+  }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/rename-filter-item-props <path>
+```
+
 #### `rename-selectors-and-events`
 
 Rename selectors and events.
@@ -471,6 +611,11 @@ Rename selectors and events.
 -  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('rowSelectionChange', handleEvent);
 +  apiRef.current.subscribeEvent('rowSelectionChange', handleEvent);
 +  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
@@ -479,6 +624,11 @@ Rename selectors and events.
 +  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);
  }
 ```
 
@@ -486,4 +636,48 @@ Rename selectors and events.
 npx @mui/x-codemod v6.0.0/data-grid/rename-selectors-and-events <path>
 ```
 
+#### `remove-stabilized-experimentalFeatures`
+
+Remove feature flags for stabilized `experimentalFeatures`.
+
+```diff
+ <DataGrid
+-  experimentalFeatures={{
+-    newEditingApi: true,
+-  }}
+ />
+```
+
+```diff
+ <DataGrid
+  experimentalFeatures={{
+-   newEditingApi: true,
+    columnGrouping: true,
+  }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
+```
+
+#### `replace-onCellFocusOut-prop`
+
+Replace `onCellFocusOut` prop with `componentsProps.cell.onBlur`.
+
+```diff
+ <DataGrid
+-  onCellFocusOut={handleBlur}
++  componentsProps={{
++    cell: {
++      onBlur: handleBlur,
++    },
++  }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/replace-onCellFocusOut-prop <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

@@ -34,6 +34,17 @@ async function runTransform(transform, files, flags, codemodFlags) {
 
   // eslint-disable-next-line no-console -- debug information
   console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+  console.warn(`
+====================================
+IMPORTANT NOTICE ABOUT CODEMOD USAGE
+====================================
+Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies and etc., the changes are not properly identified and therefore must be handled manually.
+
+For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected.
+<DatePicker {...pickerProps} />
+  
+After running the codemods, make sure to test your application and that you don't have any console errors.
+`);
   const jscodeshiftProcess = _child_process.default.spawnSync('node', args, {
     stdio: 'inherit'
   });
@@ -77,4 +88,4 @@ _yargs.default.command({
   },
   // @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();
+}).scriptName('npx @mui/x-codemod').example('$0 v6.0.0/preset-safe src', 'Run "preset-safe" 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.1",
+  "version": "6.0.0-beta.3",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.20.12",
-    "@babel/runtime": "^7.20.7",
-    "@babel/traverse": "^7.20.12",
+    "@babel/runtime": "^7.20.13",
+    "@babel/traverse": "^7.20.13",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.6.2"

package/util/addComponentsSlots.js

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.transformNestedProp = exports.addItemToObject = void 0;
 /**
- * Recusive function that:
+ * Recursive 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('.');
+  const splittedPath = path.split('.');
 
   // Final case where we have to add the property to the object.
-  if (splitedPath.length === 1) {
+  if (splittedPath.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];
+  const remainingPath = splittedPath.slice(1).join('.');
+  const targetKey = splittedPath[0];
   if (object === null) {
     // Simplest case, no object to take into consideration
     const propertyToAdd = j.objectProperty(j.identifier(targetKey), addItemToObject(remainingPath, value, null, j));

package/util/removeObjectProperty.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = removeObjectProperty;
+function removeObjectProperty({
+  root,
+  propName,
+  componentsNames,
+  propKey,
+  j
+}) {
+  root.find(j.JSXElement).filter(path => {
+    return componentsNames.includes(path.value.openingElement.name.name);
+  }).forEach(element => {
+    const targetAttribute = element.value.openingElement.attributes.find(attribute => attribute.name.name === propName);
+    if (!targetAttribute) {
+      return;
+    }
+    const definedKeys = [];
+    const objectProperties = j(targetAttribute).find(j.Property);
+    objectProperties.forEach(path => {
+      const objectKey = path.value.key.name;
+      definedKeys.push(objectKey);
+    });
+    if (definedKeys.length === 1 && definedKeys[0] === propKey) {
+      // only that property is defined, remove the whole prop
+      j(element).find(j.JSXAttribute).filter(a => a.value.name.name === propName).forEach(path => {
+        j(path).remove();
+      });
+    } else {
+      objectProperties.forEach(path => {
+        if (path.value.key.name === propKey) {
+          j(path).remove();
+        }
+      });
+    }
+  });
+}

package/util/renameCSSClasses.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renameCSSClasses;
+function renameCSSClasses({
+  root,
+  j,
+  renamedClasses
+}) {
+  root.find(j.Literal).filter(path => !!Object.keys(renamedClasses).find(className => {
+    const literal = path.node.value;
+    return typeof literal === 'string' && literal.includes(className) && !literal.includes(renamedClasses[className]);
+  })).replaceWith(path => {
+    const literal = path.node.value;
+    const targetClassKey = Object.keys(renamedClasses).find(className => literal.includes(className));
+    return j.literal(literal.replace(targetClassKey, renamedClasses[targetClassKey]));
+  });
+}

package/util/renameIdentifiers.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkPreRequisitesSatisfied = void 0;
+exports.default = renameIdentifiers;
+exports.matchImport = void 0;
+/* eslint-disable no-underscore-dangle */
+
+const matchImport = (path, regex) => (path.node.source.value.toString() || '').match(regex);
+exports.matchImport = matchImport;
+const findDeepASTPath = (j, currentPath, currentIdentifiers) => {
+  if (!currentIdentifiers.length) {
+    return true;
+  }
+  const target = j(currentPath).find(j.Identifier).filter(path => path.value.name === currentIdentifiers[0]);
+  if (target.__paths.length === 0) {
+    return false;
+  }
+  return findDeepASTPath(j, currentPath, currentIdentifiers.slice(1));
+};
+
+/**
+ * Checks if all pre-requisites are satisfied for the given path `root`.
+ * For it to be satisfied, at least one condition of all the pre-requisites must be fulfilled.
+ *
+ * @param {*} j
+ * @param {*} root
+ * @param {PreRequisiteUsage} preReqs
+ * @returns {boolean}
+ */
+const checkPreRequisitesSatisfied = (j, root, preReqs) => {
+  if (preReqs.packageRegex || preReqs.components) {
+    // check if any of the components is imported from a package which satisfies `preReqs.packageRegex`
+    const imports = root.find(j.ImportDeclaration);
+    const matchingImports = preReqs.packageRegex ? imports.filter(path => !!matchImport(path, preReqs.packageRegex)) : imports;
+    if (!matchingImports.__paths.length) {
+      return false;
+    }
+    // check if any of the `preReqs.components` is imported from the matching imports
+    const satisfyingImports = preReqs.components?.length ? matchingImports.find(j.Identifier).filter(path => preReqs.components.includes(path.node.name)) : matchingImports;
+    if (!satisfyingImports.__paths.length) {
+      return false;
+    }
+  }
+  if (!preReqs.possiblePaths?.length) {
+    return true;
+  }
+  const allComponents = root.find(j.JSXElement);
+  const matchingComponents = preReqs.components?.length ? allComponents.filter(path => preReqs.components.includes(path.node.openingElement.name.name)) : allComponents;
+  const matchingAttributes = matchingComponents.find(j.JSXAttribute)
+  // filter by props first
+  .filter(attribute => preReqs.possiblePaths.map(path => path.split('.')[0]).includes(attribute.node.name.name))
+  // filter by nested levels
+  .filter(attribute => findDeepASTPath(j, attribute, preReqs.possiblePaths.find(path => path.startsWith(attribute.node.name.name)).split('.').slice(1)));
+  return matchingAttributes.__paths.length > 0;
+};
+
+/**
+ * Renames identifiers based on the `identifiers` object passed plus an optional `preRequisiteUsages` object
+ * to control renaming based on certain conditions.
+ *
+ * @export renameIdentifiers
+ * @param {RenameIdentifiersArgs} {
+ *   root, // jscodeshift root
+ *   identifiers, // object of identifiers to rename
+ *   preRequisiteUsages, // an optional list of pre-requisite to control renaming based on certain conditions
+ *                       // if any of the pre-requisites is satisfied then the identifier will be renamed
+ *                       // for more details, see the type definition of `PreRequisiteUsage`
+ *   j, // jscodeshift
+ * }
+ */
+exports.checkPreRequisitesSatisfied = checkPreRequisitesSatisfied;
+function renameIdentifiers({
+  root,
+  identifiers,
+  preRequisiteUsages,
+  j
+}) {
+  root.find(j.Identifier).filter(path => !!identifiers[path.node.name]).replaceWith(path => {
+    if (!preRequisiteUsages || !preRequisiteUsages[path.node.name]) {
+      return j.importSpecifier(j.identifier(identifiers[path.node.name]));
+    }
+    const shouldReplace = checkPreRequisitesSatisfied(j, root, preRequisiteUsages[path.node.name]);
+    if (shouldReplace) {
+      return j.importSpecifier(j.identifier(identifiers[path.node.name]));
+    }
+    return j.importSpecifier(j.identifier(path.node.name));
+  });
+}

package/util/renameNestedProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renameNestedProps;
+function renameNestedProps({
+  root,
+  componentNames,
+  nestedProps,
+  j
+}) {
+  return root.find(j.JSXElement).filter(path => componentNames.includes(path.value.openingElement.name.name)).find(j.JSXAttribute).filter(attribute => Object.keys(nestedProps).includes(attribute.node.name.name)).forEach(attribute => {
+    Object.entries(nestedProps).forEach(([rootPropName, props]) => {
+      if (attribute.node.name.name === rootPropName && attribute.node.value?.type === 'JSXExpressionContainer' && attribute.node.value?.expression.type === 'ObjectExpression') {
+        const existingProperties = attribute.node.value.expression.properties;
+        existingProperties.forEach(property => {
+          if (property.type === 'Property' && property.key.type === 'Identifier' && props[property.key.name]) {
+            property.key.name = props[property.key.name];
+          }
+        });
+      }
+    });
+  });
+}

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

@@ -9,12 +9,20 @@ var _columnMenuComponentsRename = _interopRequireDefault(require("../column-menu
 var _rowSelectionPropsRename = _interopRequireDefault(require("../row-selection-props-rename"));
 var _renameRowsPerPageOptionsProp = _interopRequireDefault(require("../rename-rowsPerPageOptions-prop"));
 var _removeDisableExtendRowFullWidthProp = _interopRequireDefault(require("../remove-disableExtendRowFullWidth-prop"));
+var _renameLinkOperatorsLogicOperators = _interopRequireDefault(require("../rename-linkOperators-logicOperators"));
+var _renameFilterItemProps = _interopRequireDefault(require("../rename-filter-item-props"));
 var _renameSelectorsAndEvents = _interopRequireDefault(require("../rename-selectors-and-events"));
+var _removeStabilizedExperimentalFeatures = _interopRequireDefault(require("../remove-stabilized-experimentalFeatures"));
+var _replaceOnCellFocusOutProp = _interopRequireDefault(require("../replace-onCellFocusOut-prop"));
 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, _renameLinkOperatorsLogicOperators.default)(file, api, options);
+  file.source = (0, _renameFilterItemProps.default)(file, api, options);
   file.source = (0, _renameSelectorsAndEvents.default)(file, api, options);
+  file.source = (0, _removeStabilizedExperimentalFeatures.default)(file, api, options);
+  file.source = (0, _replaceOnCellFocusOutProp.default)(file, api, options);
   return file.source;
 }

package/v6.0.0/data-grid/remove-stabilized-experimentalFeatures/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _removeObjectProperty = _interopRequireDefault(require("../../../util/removeObjectProperty"));
+const componentsNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const propName = 'experimentalFeatures';
+const propKey = 'newEditingApi';
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  (0, _removeObjectProperty.default)({
+    root,
+    j,
+    propName,
+    componentsNames,
+    propKey
+  });
+  return root.toSource(printOptions);
+}

package/v6.0.0/data-grid/rename-filter-item-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 _renameIdentifiers = _interopRequireDefault(require("../../../util/renameIdentifiers"));
+const renamedIdentifiers = {
+  columnField: 'field',
+  operatorValue: 'operator'
+};
+const PACKAGE_REGEXP = /@mui\/x-data-grid(-pro|-premium)?/;
+const GridComponents = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const preRequisiteUsages = {
+  columnField: {
+    possiblePaths: ['initialState', 'filterModel', 'onFilterModelChange'],
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  },
+  operatorValue: {
+    possiblePaths: ['initialState', 'filterModel', 'onFilterModelChange'],
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  }
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+
+  // <DataGrid(Pro|Premium)
+  //   filterModel={{
+  //     items: [{
+  // -     columnField: 'name',
+  // +     field: 'name',
+  // -     operatorValue: 'contains',
+  // +     operator: 'contains',
+  //       value: 'a'
+  //     }]
+  //   }}
+  // />
+  (0, _renameIdentifiers.default)({
+    root,
+    j,
+    preRequisiteUsages,
+    identifiers: renamedIdentifiers
+  });
+  return root.toSource(printOptions);
+}

package/v6.0.0/data-grid/rename-linkOperators-logicOperators/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transform;
+var _renameCSSClasses = _interopRequireDefault(require("packages/x-codemod/src/util/renameCSSClasses"));
+var _renameIdentifiers = _interopRequireWildcard(require("../../../util/renameIdentifiers"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const renamedIdentifiers = {
+  GridLinkOperator: 'GridLogicOperator',
+  linkOperatorInputProps: 'logicOperatorInputProps',
+  linkOperator: 'logicOperator',
+  linkOperators: 'logicOperators',
+  setFilterLinkOperator: 'setFilterLogicOperator'
+};
+const PACKAGE_REGEXP = /@mui\/x-data-grid(-pro|-premium)?/;
+const GridComponents = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const preRequisiteUsages = {
+  GridLinkOperator: {
+    possiblePaths: ['initialState.filter', 'filterModel', 'componentsProps.filter'],
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  },
+  linkOperatorInputProps: {
+    possiblePaths: ['componentsProps.filter'],
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  },
+  linkOperator: {
+    possiblePaths: ['initialState.filter', 'filterModel', 'componentsProps.filter'],
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  },
+  linkOperators: {
+    possiblePaths: ['componentsProps.filter'],
+    components: GridComponents,
+    packageRegex: PACKAGE_REGEXP
+  }
+};
+const renamedLiterals = {
+  filterPanelLinkOperator: 'filterPanelLogicOperator'
+};
+const renamedClasses = {
+  'MuiDataGrid-filterFormLinkOperatorInput': 'MuiDataGrid-filterFormLogicOperatorInput',
+  'MuiDataGrid-withBorder': 'MuiDataGrid-withBorderColor'
+};
+function transform(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 => !!(0, _renameIdentifiers.matchImport)(path, PACKAGE_REGEXP));
+  if (matchingImports.length > 0) {
+    // Rename the identifiers
+    // <DataGrid
+    //  componentsProps={{
+    //    filter: {
+    // -   linkOperators: [GridLinkOperator.And],
+    // +   logicOperators: [GridLogicOperator.And],
+    //      filterFormProps: {
+    // -      linkOperatorInputProps: {
+    // +      logicOperatorInputProps: {
+    //          variant: 'outlined',
+    //          size: 'small',
+    //        },
+    //      },
+    //    },
+    //  }}
+    // />
+    (0, _renameIdentifiers.default)({
+      j,
+      root,
+      identifiers: renamedIdentifiers,
+      preRequisiteUsages
+    });
+
+    // Rename the literals
+    // - apiRef.current.getLocaleText('filterPanelLinkOperator')
+    // + apiRef.current.getLocaleText('filterPanelLogicOperator')
+    root.find(j.Literal).filter(path => !!renamedLiterals[path.node.value]).replaceWith(path => j.literal(renamedLiterals[path.node.value]));
+
+    // Rename the classes
+    // - 'MuiDataGrid-filterFormLinkOperatorInput'
+    // + 'MuiDataGrid-filterFormLogicOperatorInput'
+    (0, _renameCSSClasses.default)({
+      j,
+      root,
+      renamedClasses
+    });
+  }
+  return root.toSource(printOptions);
+}

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

@@ -4,18 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
+var _renameIdentifiers = require("../../../util/renameIdentifiers");
 const renamedSelectors = {
   gridSelectionStateSelector: 'gridRowSelectionStateSelector',
   gridVisibleSortedRowIdsSelector: 'gridExpandedSortedRowIdsSelector',
   gridVisibleSortedRowEntriesSelector: 'gridExpandedSortedRowEntriesSelector',
   gridVisibleRowCountSelector: 'gridExpandedRowCountSelector',
   gridVisibleSortedTopLevelRowEntriesSelector: 'gridFilteredSortedTopLevelRowEntriesSelector',
-  gridVisibleTopLevelRowCountSelector: 'gridFilteredTopLevelRowCountSelector'
+  gridVisibleTopLevelRowCountSelector: 'gridFilteredTopLevelRowCountSelector',
+  allGridColumnsFieldsSelector: 'gridColumnFieldsSelector',
+  allGridColumnsSelector: 'gridColumnDefinitionsSelector',
+  visibleGridColumnsSelector: 'gridVisibleColumnDefinitionsSelector',
+  filterableGridColumnsSelector: 'gridFilterableColumnDefinitionsSelector',
+  getGridNumericColumnOperators: 'getGridNumericOperators'
 };
 const renamedEvents = {
   selectionChange: 'rowSelectionChange',
   rowsScroll: 'scrollPositionChange'
 };
+const preRequisites = {
+  components: ['DataGrid', 'DataGridPro', 'DataGridPremium'],
+  packageRegex: /@mui\/x-data-grid(-pro|-premium)?/
+};
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -23,17 +33,19 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
+  const isGridUsed = (0, _renameIdentifiers.checkPreRequisitesSatisfied)(j, root, preRequisites);
+  if (isGridUsed) {
+    // 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 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]));
+    // 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/replace-onCellFocusOut-prop/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const propsToRename = {
+  onCellFocusOut: {
+    prop: 'componentsProps',
+    path: 'cell.onBlur'
+  }
+};
+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 componentNames.includes(path.value.openingElement.name.name);
+  }).forEach(path => {
+    const attributesToTransform = j(path).find(j.JSXAttribute).filter(attribute => Object.keys(propsToRename).includes(attribute.value.name.name));
+    attributesToTransform.forEach(attribute => {
+      const attributeName = attribute.value.name.name;
+      const value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value;
+      (0, _addComponentsSlots.transformNestedProp)(path, propsToRename[attributeName].prop, propsToRename[attributeName].path, value, j);
+    });
+  });
+  return (0, _removeProps.default)({
+    root,
+    j,
+    props: Object.keys(propsToRename),
+    componentNames
+  }).toSource(printOptions);
+}

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

@@ -15,6 +15,8 @@ var _replaceToolbarPropsBySlot = _interopRequireDefault(require("../replace-tool
 var _migrateToComponentsComponentsProps = _interopRequireDefault(require("../migrate-to-components-componentsProps"));
 var _replaceArrowsButtonSlot = _interopRequireDefault(require("../replace-arrows-button-slot"));
 var _renameShouldDisableTime = _interopRequireDefault(require("../rename-should-disable-time"));
+var _renameInputFormatProp = _interopRequireDefault(require("../rename-inputFormat-prop"));
+var _renameDefaultToolbarTitleLocaleText = _interopRequireDefault(require("../rename-default-toolbar-title-localeText"));
 function transformer(file, api, options) {
   file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
 
@@ -28,5 +30,7 @@ function transformer(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);
+  file.source = (0, _renameInputFormatProp.default)(file, api, options);
+  file.source = (0, _renameDefaultToolbarTitleLocaleText.default)(file, api, options);
   return file.source;
 }

package/v6.0.0/pickers/rename-default-toolbar-title-localeText/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameNestedProps = _interopRequireDefault(require("../../../util/renameNestedProps"));
+const propsToRename = {
+  localeText: {
+    datePickerDefaultToolbarTitle: 'datePickerToolbarTitle',
+    timePickerDefaultToolbarTitle: 'timePickerToolbarTitle',
+    dateTimePickerDefaultToolbarTitle: 'dateTimePickerToolbarTitle',
+    dateRangePickerDefaultToolbarTitle: 'dateRangePickerToolbarTitle'
+  }
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  (0, _renameNestedProps.default)({
+    root,
+    componentNames: ['LocalizationProvider'],
+    nestedProps: propsToRename,
+    j
+  });
+  return root.toSource(printOptions);
+}

package/v6.0.0/pickers/rename-inputFormat-prop/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 === 'inputFormat') {
+            elementNode.name.name = 'format';
+          }
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/util/renameClassKey.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = renameClassKey;
-function renameClassKey({
-  root,
-  componentName,
-  classes,
-  printOptions
-}) {
-  const source = root.findJSXElements(componentName).forEach(path => {
-    path.node.openingElement.attributes?.forEach(node => {
-      if (node.type === 'JSXAttribute' && node.name.name === 'classes') {
-        // @ts-expect-error
-        node.value?.expression?.properties?.forEach(subNode => {
-          if (Object.keys(classes).includes(subNode.key.name)) {
-            subNode.key.name = classes[subNode.key.name];
-          }
-        });
-      }
-    });
-  }).toSource(printOptions);
-  return Object.entries(classes).reduce((result, [currentKey, newKey]) => {
-    const regex = new RegExp(`.Mui${componentName}-${currentKey}`, 'gm');
-    return result.replace(regex, `.Mui${componentName}-${newKey}`);
-  }, source);
-}