@mui/x-codemod 8.0.0-alpha.9 → 8.0.0-beta.2

package/README.md

@@ -29,7 +29,7 @@ Options:
   --jscodeshift Pass options directly to jscodeshift                  [array]
 
 Examples:
-  npx @mui/x-codemod@next v7.0.0/preset-safe src
+  npx @mui/x-codemod@next v8.0.0/preset-safe src
   npx @mui/x-codemod@next v6.0.0/component-rename-prop src --
   --component=DataGrid --from=prop --to=newProp
 ```
@@ -173,6 +173,24 @@ Replace `row` and `column` values by `horizontal` and `vertical` respectively.
  />
 ```
 
+#### `replace-legend-position-values`
+
+Replace `"left" | "middle" | "right"` values `"start" | "center" | "end"` respectively.
+This is to align with the CSS values and reflect the RTL ability of the legend component.
+
+```diff
+ <BarChart
+    slotProps={{
+      legend: {
+        position: {
+-          horizontal: "left",
++          horizontal: "start",
+        }
+      }
+    }}
+ />
+```
+
 #### `rename-responsive-chart-container`
 
 Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
@@ -188,6 +206,15 @@ Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartCo
 +</ChartContainer>
 ```
 
+#### `rename-legend-position-type`
+
+Renames `LegendPosition` to `Position`.
+
+```diff
+-import { LegendPosition } from '@mui/x-charts/ChartsLegend';
++import { Position } from '@mui/x-charts/models';
+```
+
 > [!WARNING]
 > If you imported both `ResponsiveChartContainer` and `ChartContainer` in the same file, you might end up with duplicated import.
 > Verify the git diff to remove the duplicate.
@@ -215,6 +242,73 @@ Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle`
  />
 ```
 
+#### `remove-on-axis-click-handler`
+
+Remove the `<ChartsOnAxisClickHandler />` and move the associated `onAxisClick` prop to its parent.
+
+> [!WARNING]
+> This codemode does not work if component got renamed or if the handler is not a direct child of the container.
+
+```diff
++ <ChartContainer onAxisClick={() => {}}>
+- <ChartContainer>
+-   <ChartsOnAxisClickHandler onAxisClick={() => {}} />
+ </ChartContainer>
+```
+
+#### `rename-unstable-use-series`
+
+Remove `unstable_` prefix from `useSeries` and `use*Series` hooks, as they have now become stable.
+
+```diff
+  import {
+-   unstable_useSeries,
++   useSeries,
+-   unstable_usePieSeries,
++   usePieSeries,
+-   unstable_useLineSeries,
++   useLineSeries,
+-   unstable_useBarSeries,
++   useBarSeries,
+-   unstable_useScatterSeries,
++   useScatterSeries,
+  } from '@mui/x-charts/hooks';
+  import {
+-   unstable_useHeatmapSeries,
++   useHeatmapSeries,
+  } from '@mui/x-charts-pro/hooks';
+```
+
+#### `rename-sparkline-colors-to-color`
+
+Renames the `colors` prop of a `SparkLineChart` to `color` and accesses its first element.
+
+```diff
+ <SparkLineChart
+-  colors={['red']}
++  color={'red'}
+ />
+```
+
+If `colors` is a function, it will be wrapped in another function that returns its first element.
+
+```diff
+ <SparkLineChart
+-  colors={fn}
++  color={typeof fn === 'function' ? mode => fn(mode)[0] : fn[0]}
+ />
+```
+
+If there are cases that the codemod cannot handle, you should see a comment with a `mui-x-codemod` prefix in the code.
+
+```diff
+ <SparkLineChart
+-  colors={(mode) => (mode === 'light' ? ['black'] : ['white'])}
++  /* mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. */
++  color={(mode) => (mode === 'light' ? ['black'] : ['white'])}
+ />
+```
+
 ### Data Grid codemods
 
 #### `preset-safe` for Data Grid v8.0.0
@@ -230,6 +324,12 @@ npx @mui/x-codemod@next v8.0.0/data-grid/preset-safe <path|folder>
 The list includes these transformers
 
 - [`remove-stabilized-v8-experimentalFeatures`](#remove-stabilized-v8-experimentalFeatures)
+- [`remove-props`](#remove-props)
+- [`rename-props`](#rename-props)
+- [`rename-imports`](#rename-imports)
+- [`reform-row-selection-model`](#reform-row-selection-model)
+- [`rename-package`](#rename-package)
+- [`add-showToolbar-prop`](#add-showToolbar-prop)
 
 #### `remove-stabilized-v8-experimentalFeatures`
 
@@ -249,6 +349,141 @@ Remove feature flags for stabilized `experimentalFeatures`.
 npx @mui/x-codemod@next v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
 ```
 
+#### `remove-props`
+
+Remove props that are no longer supported.
+
+The list includes these props:
+
+- `indeterminateCheckboxAction`
+- `rowPositionsDebounceMs`
+- `resetPageOnSortFilter`
+
+```diff
+ <DataGrid
+-  indeterminateCheckboxAction="deselect"
+-  rowPositionsDebounceMs={100}
+-  resetPageOnSortFilter
+ />
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/remove-props <path>
+```
+
+#### `rename-props`
+
+Rename props to the new ones.
+
+The list includes these props:
+
+- `unstable_rowSpanning` to `rowSpanning`
+- `unstable_dataSource` to `dataSource`
+- `unstable_dataSourceCache` to `dataSourceCache`
+- `unstable_lazyLoading` to `lazyLoading`
+- `unstable_lazyLoadingRequestThrottleMs` to `lazyLoadingRequestThrottleMs`
+- `unstable_onDataSourceError` to `onDataSourceError`
+
+```diff
+ <DataGrid
+-  unstable_rowSpanning
+-  unstable_dataSource={dataSource}
+-  unstable_dataSourceCache={dataSourceCache}
+-  unstable_lazyLoading
+-  unstable_lazyLoadingRequestThrottleMs={100}
+-  unstable_onDataSourceError={() => {}}
++  rowSpanning
++  dataSource={dataSource}
++  dataSourceCache={dataSourceCache}
++  lazyLoading
++  lazyLoadingRequestThrottleMs={100}
++  onDataSourceError={() => {}}
+ />
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/rename-props <path>
+```
+
+#### `rename-imports`
+
+This codemod renames the imports of the Data Grid components. The list includes these imports:
+
+- `selectedGridRowsSelector` to `gridRowSelectionIdsSelector`
+- `selectedGridRowsCountSelector` to `gridRowSelectionCountSelector`
+
+```diff
+-import { selectedGridRowsSelector, selectedGridRowsCountSelector } from '@mui/x-data-grid';
++import { gridRowSelectionIdsSelector, gridRowSelectionCountSelector } from '@mui/x-data-grid';
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/rename-imports <path>
+```
+
+#### `reform-row-selection-model`
+
+Reforms the controlled `rowSelectionModel` prop value to the new one.
+
+```diff
+-const [rowSelectionModel, setRowSelectionModel] = React.useState([1, 2]);
++const [rowSelectionModel, setRowSelectionModel] = React.useState({
++  type: 'include',
++  ids: new Set([1, 2]),
++});
+
+ <DataGrid
+  rowSelectionModel={rowSelectionModel}
+  onRowSelectionModelChange={setRowSelectionModel}
+ />
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/reform-row-selection-model <path>
+```
+
+#### `rename-package`
+
+Reorganizes the imports moved from `@mui/x-data-grid-pro` and `@mui/x-data-grid-premium`.
+
+```diff
+-import { LicenseInfo } from '@mui/x-data-grid-pro';
++import { LicenseInfo } from '@mui/x-license';
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/rename-package <path>
+```
+
+#### `add-showToolbar-prop`
+
+Adds the `showToolbar` prop to the Data Grid components that are using `slots.toolbar` prop.
+
+```diff
+ <DataGridPremium
+  slots={{
+    toolbar: GridToolbar,
+  }}
++ showToolbar
+ />
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/add-showToolbar-prop <path>
+```
+
 ### Pickers codemods
 
 #### `preset-safe` for Pickers v8.0.0
@@ -264,7 +499,7 @@ npx @mui/x-codemod@next v8.0.0/pickers/preset-safe <path|folder>
 The list includes these transformers
 
 - [`rename-adapter-date-fns-imports`](#rename-adapter-date-fns-imports)
-- [`rename-and-move-field-value-type`](#rename-and-move-field-value-type)
+- [`rename-type-imports`](#rename-type-imports)
 
 #### `rename-adapter-date-fns-imports`
 
@@ -296,13 +531,25 @@ The list includes these transformers
 npx @mui/x-codemod@next v8.0.0/pickers/rename-adapter-date-fns-imports <path>
 ```
 
-#### `rename-and-move-field-value-type`
+#### `rename-type-imports`
+
+Renames:
 
-Renames `FieldValueType` to `PickerValueType`.
+- `usePickersTranslations` to `usePickerTranslations`
+- `usePickersContext` to `usePickerContext`
+- `FieldValueType` to `PickerValueType`
+- `RangeFieldSection` to `FieldRangeSection`
+- `PickerShortcutChangeImportance` to `PickerChangeImportance`
 
 ```diff
+-import { usePickersTranslations, usePickersContext } from '@mui/x-date-pickers/hooks';
++import { usePickerTranslations, usePickerContext } from '@mui/x-date-pickers/hooks';
 -import { FieldValueType } from '@mui/x-date-pickers';
 +import { PickerValueType } from '@mui/x-date-pickers';
+-import { RangeFieldSection } from '@mui/x-date-pickers-pro/models';
++import { FieldRangeSection } from '@mui/x-date-pickers-pro/models';
+-import { PickerShortcutChangeImportance } from '@mui/x-date-pickers/PickersShortcuts';
++import { PickerChangeImportance } from '@mui/x-date-pickers/models';
 
  interface MyComponentProps {
 -  valueType: FieldValueType;
@@ -315,7 +562,7 @@ Renames `FieldValueType` to `PickerValueType`.
 <!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type <path>
+npx @mui/x-codemod@next v8.0.0/pickers/rename-type-imports <path>
 ```
 
 ## v7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "8.0.0-alpha.9",
+  "version": "8.0.0-beta.2",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,17 +25,17 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/runtime": "^7.26.0",
-    "@babel/traverse": "^7.26.5",
+    "@babel/core": "^7.26.10",
+    "@babel/runtime": "^7.26.10",
+    "@babel/traverse": "^7.26.10",
     "jscodeshift": "17.1.2",
     "yargs": "^17.7.2",
-    "@mui/x-internals": "8.0.0-alpha.9"
+    "@mui/x-internals": "8.0.0-beta.2"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",
     "dayjs": "^1.11.13",
-    "moment-timezone": "^0.5.46",
+    "moment-timezone": "^0.5.47",
     "rimraf": "^6.0.1"
   },
   "sideEffects": false,

package/v8.0.0/charts/preset-safe/index.js

@@ -9,11 +9,20 @@ var _renameLegendToSlotsLegend = _interopRequireDefault(require("../rename-legen
 var _renameResponsiveChartContainer = _interopRequireDefault(require("../rename-responsive-chart-container"));
 var _renameLabelAndTickFontSize = _interopRequireDefault(require("../rename-label-and-tick-font-size"));
 var _replaceLegendDirectionValues = _interopRequireDefault(require("../replace-legend-direction-values"));
+var _replaceLegendPositionValues = _interopRequireDefault(require("../replace-legend-position-values"));
+var _removeExperimentalMarkRendering = _interopRequireDefault(require("../remove-experimental-mark-rendering"));
+var _renameLegendPositionType = _interopRequireDefault(require("../rename-legend-position-type"));
+var _removeOnAxisClickHandler = _interopRequireDefault(require("../remove-on-axis-click-handler"));
+var _renameUnstableUseSeries = _interopRequireDefault(require("../rename-unstable-use-series"));
 function transformer(file, api, options) {
   file.source = (0, _renameLegendToSlotsLegend.default)(file, api, options);
   file.source = (0, _renameResponsiveChartContainer.default)(file, api, options);
   file.source = (0, _renameLabelAndTickFontSize.default)(file, api, options);
-  file.source = (0, _renameLabelAndTickFontSize.default)(file, api, options);
   file.source = (0, _replaceLegendDirectionValues.default)(file, api, options);
+  file.source = (0, _replaceLegendPositionValues.default)(file, api, options);
+  file.source = (0, _removeExperimentalMarkRendering.default)(file, api, options);
+  file.source = (0, _renameLegendPositionType.default)(file, api, options);
+  file.source = (0, _removeOnAxisClickHandler.default)(file, api, options);
+  file.source = (0, _renameUnstableUseSeries.default)(file, api, options);
   return file.source;
 }

package/v8.0.0/charts/remove-on-axis-click-handler/index.js

@@ -0,0 +1,74 @@
+"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);
+
+  // Move the handler to the container
+  root.findJSXElements().filter(path => Boolean(path.node.openingElement) && path.node.openingElement.name.type === 'JSXIdentifier' && path.node.openingElement.name.name.includes('ChartContainer')).forEach(path => {
+    // We find the <ChartsOnAxisClickHandler /> node
+    const clickHandler = path.node.children?.find(child => {
+      if (child.type !== 'JSXElement') {
+        return false;
+      }
+      if (child.openingElement.name.type !== 'JSXIdentifier') {
+        return false;
+      }
+      return child.openingElement.name.name === 'ChartsOnAxisClickHandler';
+    });
+    if (!clickHandler) {
+      return;
+    }
+    const clickCallback = clickHandler.openingElement.attributes?.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'onAxisClick');
+    if (!clickCallback) {
+      return;
+    }
+
+    // Move the callback to the container
+    path.node.openingElement.attributes?.push(clickCallback);
+
+    // Remove the children
+    path.node.children = path.node.children?.filter(child => {
+      if (child.type !== 'JSXElement') {
+        return true;
+      }
+      if (child.openingElement.name.type !== 'JSXIdentifier') {
+        return true;
+      }
+      return child.openingElement.name.name !== 'ChartsOnAxisClickHandler';
+    });
+  });
+
+  // Remove nested import
+  root.find(j.ImportDeclaration, {
+    source: {
+      value: '@mui/x-charts/ChartsOnAxisClickHandler'
+    }
+  }).remove();
+
+  // Remove global import
+  root.find(j.ImportDeclaration).forEach(path => {
+    if (typeof path.node.source.value !== 'string') {
+      return;
+    }
+    if (!path.node.source.value.includes('@mui/x-charts')) {
+      return;
+    }
+    path.node.specifiers = path.node.specifiers?.filter(specifier => {
+      if (specifier.type !== 'ImportSpecifier') {
+        return true;
+      }
+      return specifier.imported.name !== 'ChartsOnAxisClickHandler';
+    });
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/{pickers/rename-and-move-field-value-type → charts/rename-legend-position-type}/index.js

@@ -10,16 +10,18 @@ function transformer(file, api, options) {
   const root = j(file.source);
   const printOptions = options.printOptions || {
     quote: 'single',
-    trailingComma: true
+    trailingComma: true,
+    wrapColumn: 40
   };
   (0, _renameImports.renameImports)({
     j,
     root,
-    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    packageNames: ['@mui/x-charts', '@mui/x-charts-pro'],
     imports: [{
-      oldEndpoint: 'models',
+      oldEndpoint: 'ChartsLegend',
+      newEndpoint: 'models',
       importsMapping: {
-        FieldValueType: 'PickerValueType'
+        LegendPosition: 'Position'
       }
     }]
   });

package/v8.0.0/charts/rename-sparkline-colors-to-color/index.js

@@ -0,0 +1,40 @@
+"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);
+  const componentNames = ['SparkLineChart'];
+  const props = {
+    colors: 'color'
+  };
+  const colorAttributes = 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));
+  return colorAttributes.forEach(attribute => {
+    const colorsAttributeExpression = attribute.node.value?.type === 'JSXExpressionContainer' ? attribute.node.value.expression : null;
+    let colorAttributeExpression;
+    if (colorsAttributeExpression?.type === 'ArrayExpression') {
+      colorAttributeExpression = colorsAttributeExpression.elements[0];
+    } else if (colorsAttributeExpression?.type === 'Identifier') {
+      colorAttributeExpression = j.conditionalExpression(j.binaryExpression('===', j.unaryExpression('typeof', colorsAttributeExpression), j.literal('function')), j.arrowFunctionExpression([j.identifier('mode')], j.chainExpression(j.optionalMemberExpression(j.callExpression(colorsAttributeExpression, [j.identifier('mode')]), j.literal(0)))), colorsAttributeExpression);
+    } else {
+      // Don't know how to handle this case
+    }
+
+    // Only transform the value if we know how to handle it, otherwise rename the prop and add a comment
+    if (colorAttributeExpression) {
+      j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(props[attribute.node.name.name]), j.jsxExpressionContainer(colorAttributeExpression)));
+    } else {
+      j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(props[attribute.node.name.name]), attribute.node.value)).insertBefore(j.commentBlock(" mui-x-codemod: We renamed the `colors` prop to `color`, but didn't change the value. Please ensure sure this prop receives a string or a function that returns a string. "));
+    }
+  }).toSource(printOptions);
+}

package/v8.0.0/charts/rename-unstable-use-series/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+    wrapColumn: 40
+  };
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-charts', '@mui/x-charts-pro'],
+    imports: [{
+      oldEndpoint: 'hooks',
+      importsMapping: {
+        unstable_useSeries: 'useSeries',
+        unstable_usePieSeries: 'usePieSeries',
+        unstable_useLineSeries: 'useLineSeries',
+        unstable_useBarSeries: 'useBarSeries',
+        unstable_useScatterSeries: 'useScatterSeries',
+        unstable_useHeatmapSeries: 'useHeatmapSeries'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/charts/replace-legend-position-values/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+/**
+ * @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 typeof node.source.value === 'string' && node.source.value.startsWith('@mui/x-charts');
+  }).forEach(path => {
+    path.node.specifiers?.forEach(node => {
+      root.findJSXElements(node.local?.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        const slotProps = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === 'slotProps');
+        if (slotProps === null) {
+          // No slotProps to manage
+          return;
+        }
+        const position = slotProps?.value?.expression?.properties
+        // @ts-expect-error
+        ?.find(v => v?.key?.name === 'legend')
+        // @ts-expect-error
+        ?.value?.properties?.find(v => v?.key?.name === 'position');
+        const horizontal = position?.value?.properties?.find(v => v?.key?.name === 'horizontal');
+        if (horizontal === undefined || horizontal?.value === undefined || horizontal?.value?.value === undefined) {
+          return;
+        }
+        const horizontalValue = horizontal.value;
+        horizontalValue.value = mapFix(horizontalValue.value);
+        (0, _addComponentsSlots.transformNestedProp)(elementPath, 'slotProps', 'legend.position.horizontal', horizontalValue, j);
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}
+function mapFix(v) {
+  switch (v) {
+    case 'left':
+      return 'start';
+    case 'right':
+      return 'end';
+    case 'middle':
+      return 'center';
+    default:
+      return v;
+  }
+}

package/v8.0.0/data-grid/add-showToolbar-prop/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // List of DataGrid components
+  const dataGridComponents = new Set(['DataGrid', 'DataGridPro', 'DataGridPremium']);
+  // List of allowed import sources
+  const dataGridSources = new Set(['@mui/x-data-grid', '@mui/x-data-grid-pro', '@mui/x-data-grid-premium']);
+
+  // Find relevant DataGrid imports
+  const importedDataGrids = new Set();
+  root.find(j.ImportDeclaration).forEach(path => {
+    if (dataGridSources.has(path.node.source.value)) {
+      path.node.specifiers?.forEach(specifier => {
+        if (specifier.imported && dataGridComponents.has(specifier.imported.name)) {
+          const localName = specifier.local?.name;
+          if (localName) {
+            importedDataGrids.add(localName);
+          }
+        }
+      });
+    }
+  });
+  if (importedDataGrids.size === 0) {
+    return file.source;
+  }
+  root.find(j.JSXOpeningElement).forEach(path => {
+    if (!importedDataGrids.has(path.node.name.name)) {
+      return;
+    }
+    let hasSlotsToolbar = false;
+    let hasShowToolbar = false;
+    path.node.attributes?.forEach(attr => {
+      if (attr.type === 'JSXAttribute') {
+        if (attr.name.name === 'slots') {
+          if (attr.value && attr.value.type === 'JSXExpressionContainer' && attr.value.expression.type === 'ObjectExpression') {
+            hasSlotsToolbar = attr.value.expression.properties.some(prop => prop.key.name === 'toolbar');
+          }
+        }
+        if (attr.name.name === 'showToolbar') {
+          hasShowToolbar = true;
+        }
+      }
+    });
+    if (hasSlotsToolbar && !hasShowToolbar) {
+      path.node.attributes?.push(j.jsxAttribute(j.jsxIdentifier('showToolbar')));
+    }
+  });
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  return root.toSource(printOptions);
+}

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

@@ -6,7 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 var _removeStabilizedExperimentalFeatures = _interopRequireDefault(require("../remove-stabilized-experimentalFeatures"));
+var _removeProps = _interopRequireDefault(require("../remove-props"));
+var _renameProps = _interopRequireDefault(require("../rename-props"));
+var _reformRowSelectionModel = _interopRequireDefault(require("../reform-row-selection-model"));
+var _renameImports = _interopRequireDefault(require("../rename-imports"));
+var _renamePackage = _interopRequireDefault(require("../rename-package"));
+var _addShowToolbarProp = _interopRequireDefault(require("../add-showToolbar-prop"));
 function transformer(file, api, options) {
   file.source = (0, _removeStabilizedExperimentalFeatures.default)(file, api, options);
+  file.source = (0, _renameProps.default)(file, api, options);
+  file.source = (0, _removeProps.default)(file, api, options);
+  file.source = (0, _reformRowSelectionModel.default)(file, api, options);
+  file.source = (0, _renameImports.default)(file, api, options);
+  file.source = (0, _renamePackage.default)(file, api, options);
+  file.source = (0, _addShowToolbarProp.default)(file, api, options);
   return file.source;
 }

package/v8.0.0/data-grid/reform-row-selection-model/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+// @ts-nocheck - TODO: fix this
+
+const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const attrName = 'rowSelectionModel';
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Step 1: Collect variable names used in <DataGrid rowSelectionModel={...} />
+  const usedInDataGrid = new Set();
+  root.find(j.JSXOpeningElement).filter(path => j.JSXIdentifier.check(path.node.name) && componentNames.some(name => name === path.node.name.name)).forEach(path => {
+    path.node.attributes?.forEach(attr => {
+      if (j.JSXAttribute.check(attr) && j.JSXIdentifier.check(attr.name) && attr.name.name === attrName && attr.value && j.JSXExpressionContainer.check(attr.value) && j.Identifier.check(attr.value.expression)) {
+        usedInDataGrid.add(attr.value.expression.name);
+      }
+    });
+  });
+  if (usedInDataGrid.size === 0) {
+    return file.source; // No relevant transformations needed
+  }
+
+  // Step 2: Convert only relevant `useState` or `useMemo` variables
+  root.find(j.VariableDeclarator).filter(path => j.ArrayPattern.check(path.node.id) && path.node.id.elements.length === 2 && j.Identifier.check(path.node.id.elements[0]) && usedInDataGrid.has(path.node.id.elements[0].name) &&
+  // Only modify if used in `componentNames`
+  path.node.init && j.CallExpression.check(path.node.init) && (j.MemberExpression.check(path.node.init.callee) && j.Identifier.check(path.node.init.callee.object) && ['React', 'useState', 'useMemo'].includes(path.node.init.callee.object.name) || ['useState', 'useMemo'].includes(path.node.init.callee.name)) &&
+  // Handle direct calls
+  path.node.init.arguments.length > 0 && (j.ArrayExpression.check(path.node.init.arguments[0]) || j.ArrowFunctionExpression.check(path.node.init.arguments[0]) && j.BlockStatement.check(path.node.init.arguments[0].body) === false && j.ArrayExpression.check(path.node.init.arguments[0].body))).forEach(path => {
+    const arrayExpression = j.ArrayExpression.check(path.node.init?.arguments[0]) ? path.node.init?.arguments[0] : path.node.init?.arguments[0]?.body;
+    const newObject = j.objectExpression([j.property('init', j.identifier('type'), j.literal('include')), j.property('init', j.identifier('ids'), j.newExpression(j.identifier('Set'), [arrayExpression]))]);
+    if (j.ArrayExpression.check(path.node.init.arguments[0])) {
+      path.node.init.arguments[0] = newObject;
+    } else {
+      path.node.init.arguments[0].body = newObject;
+    }
+  });
+  const printOptions = options?.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  return root.toSource(printOptions);
+}

package/v8.0.0/data-grid/remove-props/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const props = ['indeterminateCheckboxAction', 'rowPositionsDebounceMs', 'resetPageOnSortFilter'];
+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/v8.0.0/data-grid/rename-imports/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-data-grid', '@mui/x-data-grid-pro', '@mui/x-data-grid-premium'],
+    imports: [{
+      oldEndpoint: 'DataGrid',
+      importsMapping: {
+        selectedGridRowsSelector: 'gridRowSelectionIdsSelector',
+        selectedGridRowsCountSelector: 'gridRowSelectionCountSelector'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/data-grid/rename-package/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+// TODO: Make it generic and move to utils
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  root.find(j.ImportDeclaration).filter(path => ['@mui/x-data-grid-pro', '@mui/x-data-grid-premium'].includes(path.node.source.value)).forEach(path => {
+    const specifiers = path.node.specifiers;
+    const filteredSpecifiers = specifiers.filter(spec => !(j.ImportSpecifier.check(spec) && spec.imported.name === 'LicenseInfo'));
+
+    // If `LicenseInfo` was found and removed
+    if (filteredSpecifiers.length !== specifiers.length) {
+      const licenseImport = j.importDeclaration([j.importSpecifier(j.identifier('LicenseInfo'))], j.stringLiteral('@mui/x-license'));
+      if (filteredSpecifiers.length > 0) {
+        // Keep other imports but remove `LicenseInfo`
+        path.node.specifiers = filteredSpecifiers;
+        // Insert new import right after the modified import
+        j(path).insertAfter(licenseImport);
+      } else {
+        // Remove import entirely and insert new one at the same position
+        j(path).replaceWith(licenseImport);
+      }
+    }
+  });
+  const printOptions = options?.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  return root.toSource(printOptions);
+}

package/v8.0.0/data-grid/rename-package/rename-package.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _path = _interopRequireDefault(require("path"));
+var _chai = require("chai");
+var _jscodeshift = _interopRequireDefault(require("jscodeshift"));
+var _ = _interopRequireDefault(require("."));
+var _readFile = _interopRequireDefault(require("../../../util/readFile"));
+function read(fileName) {
+  return (0, _readFile.default)(_path.default.join(__dirname, fileName));
+}
+describe('v8.0.0/data-grid', () => {
+  describe('rename package', () => {
+    it('transforms props as needed', () => {
+      const actual = (0, _.default)({
+        source: read('./actual.spec.js')
+      }, {
+        jscodeshift: _jscodeshift.default
+      });
+      const expected = read('./expected.spec.js');
+      (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+    it('should be idempotent', () => {
+      const actual = (0, _.default)({
+        source: read('./expected.spec.js')
+      }, {
+        jscodeshift: _jscodeshift.default
+      });
+      const expected = read('./expected.spec.js');
+      (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+  });
+});

package/v8.0.0/data-grid/rename-props/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+const componentNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const props = {
+  unstable_rowSpanning: 'rowSpanning',
+  unstable_dataSource: 'dataSource',
+  unstable_dataSourceCache: 'dataSourceCache',
+  unstable_lazyLoading: 'lazyLoading',
+  unstable_lazyLoadingRequestThrottleMs: 'lazyLoadingRequestThrottleMs',
+  unstable_onDataSourceError: 'onDataSourceError'
+};
+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/v8.0.0/pickers/preset-safe/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 var _renameAdapterDateFnsImports = _interopRequireDefault(require("../rename-adapter-date-fns-imports"));
-var _renameAndMoveFieldValueType = _interopRequireDefault(require("../rename-and-move-field-value-type"));
+var _renameTypeImports = _interopRequireDefault(require("../rename-type-imports"));
 function transformer(file, api, options) {
   file.source = (0, _renameAdapterDateFnsImports.default)(file, api, options);
-  file.source = (0, _renameAndMoveFieldValueType.default)(file, api, options);
+  file.source = (0, _renameTypeImports.default)(file, api, options);
   return file.source;
 }

package/v8.0.0/pickers/rename-type-imports/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  root = (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'hooks',
+      importsMapping: {
+        usePickersTranslations: 'usePickerTranslations',
+        usePickersContext: 'usePickerContext'
+      }
+    }, {
+      oldEndpoint: 'models',
+      importsMapping: {
+        FieldValueType: 'PickerValueType'
+      }
+    }, {
+      oldEndpoint: 'PickersShortcuts',
+      newEndpoint: 'models',
+      importsMapping: {
+        PickerShortcutChangeImportance: 'PickerChangeImportance'
+      }
+    }]
+  });
+  root = (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'models',
+      importsMapping: {
+        RangeFieldSection: 'FieldRangeSection'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}