@mui/x-codemod 8.0.0-alpha.1 → 8.0.0-alpha.11

package/README.md

@@ -39,9 +39,10 @@ Examples:
 To pass more options directly to jscodeshift, use `--jscodeshift=...`. For example:
 
 ```bash
-// single option
+# single option
 npx @mui/x-codemod@next --jscodeshift=--run-in-band
-// multiple options
+
+# multiple options
 npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
 ```
 
@@ -65,23 +66,29 @@ A combination of all important transformers for migrating v7 to v8.
 It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts).
 To run codemods for a specific package, refer to the respective section.
 
+<!-- #default-branch-switch -->
+
 ```bash
-npx @mui/x-codemod@latest v8.0.0/preset-safe <path|folder>
+npx @mui/x-codemod@next v8.0.0/preset-safe <path|folder>
 ```
 
 The corresponding sub-sections are listed below
 
 - [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v800)
 - [`preset-safe-for-charts`](#preset-safe-for-charts-v800)
+- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v800)
+- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v800)
 
 ### Tree View codemods
 
-#### `preset-safe` for tree view v8.0.0
+#### `preset-safe` for Tree View v8.0.0
 
-The `preset-safe` codemods for tree view.
+The `preset-safe` codemods for Tree View.
+
+<!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe <path|folder>
+npx @mui/x-codemod@next v8.0.0/tree-view/preset-safe <path|folder>
 ```
 
 The list includes these transformers
@@ -100,13 +107,13 @@ Renames the Tree View component to Simple Tree View
 -import { TreeView } from '@mui/x-tree-view/TreeView';
 +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 
-   return (
--    <TreeView>
-+    <SimpleTreeView>
-       <TreeItem itemId="1" label="First item" />
--    </TreeView>
-+    </SimpleTreeView>
-   );
+ return (
+-  <TreeView>
++  <SimpleTreeView>
+     <TreeItem itemId="1" label="First item" />
+-  </TreeView>
++  </SimpleTreeView>
+ );
 ```
 
 #### `rename-tree-item-2`
@@ -123,28 +130,65 @@ Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or u
 
 ### Charts codemods
 
-#### `preset-safe` for charts v8.0.0
+#### `preset-safe` for Charts v8.0.0
 
-The `preset-safe` codemods for charts.
+The `preset-safe` codemods for Charts.
+
+<!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod@latest v8.0.0/charts/preset-safe <path|folder>
+npx @mui/x-codemod@next v8.0.0/charts/preset-safe <path|folder>
 ```
 
 The list includes these transformers
 
 - [`rename-legend-to-slots-legend`](#rename-legend-to-slots-legend)
+- [`replace-legend-direction-values`](#replace-legend-direction-values)
 - [`rename-responsive-chart-container`](#rename-responsive-chart-container)
+- [`rename-label-and-tick-font-size`](#rename-label-and-tick-font-size)
 
 #### `rename-legend-to-slots-legend`
 
 Renames legend props to the corresponding slotProps.
 
 ```diff
-  <LineChart
--   legend={{ hiden: true}}
-+   slotProps={{ legend: { hiden: true} }}
-  />
+ <LineChart
+-  legend={{ hiden: true}}
++  slotProps={{ legend: { hiden: true} }}
+ />
+```
+
+#### `replace-legend-direction-values`
+
+Replace `row` and `column` values by `horizontal` and `vertical` respectively.
+
+```diff
+ <BarChart
+    slotProps={{
+      legend: {
+-        direction: "row"
++        direction: "horizontal"
+      }
+    }}
+ />
+```
+
+#### `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`
@@ -152,27 +196,168 @@ Renames legend props to the corresponding slotProps.
 Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
 
 ```diff
-- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-+ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++import { ChartContainer } from '@mui/x-charts/ChartContainer';
 
-- <ResponsiveChartContainer>
-+ <ChartContainer>
+-<ResponsiveChartContainer>
++<ChartContainer>
    <BarPlot />
-- </ResponsiveChartContainer>
-+ </ChartContainer>
+-</ResponsiveChartContainer>
++</ChartContainer>
 ```
 
-:::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.
+#### `rename-legend-position-type`
+
+Renames `LegendPosition` to `Position`.
 
 ```diff
- import { ChartContainer } from '@mui/x-charts/ChartContainer';
-- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-+ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+-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.
+>
+> ```diff
+>  import { ChartContainer } from '@mui/x-charts/ChartContainer';
+> -import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+> +import { ChartContainer } from '@mui/x-charts/ChartContainer';
+> ```
+
+#### `rename-label-and-tick-font-size`
+
+Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` prop.
+
+```diff
+ <ChartsXAxis
+-  labelFontSize={18}
++  labelStyle={{
++    fontSize: 18
++  }}
+-  tickFontSize={20}
++  tickStyle={{
++    fontSize: 20
++  }}
+ />
+```
+
+#### `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>
+```
+
+### Data Grid codemods
+
+#### `preset-safe` for Data Grid v8.0.0
+
+The `preset-safe` codemods for Data Grid.
+
+<!-- #default-branch-switch -->
+
+```bash
+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-stabilized-v8-experimentalFeatures`
+
+Remove feature flags for stabilized `experimentalFeatures`.
+
+```diff
+ <DataGridPremium
+-  experimentalFeatures={{
+-    ariaV8: true,
+-  }}
+ />
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
+```
+
+### Pickers codemods
+
+#### `preset-safe` for Pickers v8.0.0
+
+The `preset-safe` codemods for Pickers.
+
+<!-- #default-branch-switch -->
+
+```bash
+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-adapter-date-fns-imports`
+
+> [!WARNING]
+> This codemod is not idempotent. Running it multiple times will rename the imports back and forth.
+> Usage of `AdapterDateFnsV3` would be replaced by `AdapterDateFns` and a subsequent run would rename it to `AdapterDateFnsV2`.
+
+- Renames `AdapterDateFns` and `AdapterDateFnsJalali` imports to `AdapterDateFnsV2` and `AdapterDateFnsJalaliV2` respectfully.
+
+  ```diff
+  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
+  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
+  ```
+
+- Renames `AdapterDateFnsV3` and `AdapterDateFnsJalaliV3` imports to `AdapterDateFns` and `AdapterDateFnsJalali` respectfully.
+
+  ```diff
+  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+  ```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/pickers/rename-adapter-date-fns-imports <path>
+```
+
+#### `rename-and-move-field-value-type`
+
+Renames `FieldValueType` to `PickerValueType`.
+
+```diff
+-import { FieldValueType } from '@mui/x-date-pickers';
++import { PickerValueType } from '@mui/x-date-pickers';
+
+ interface MyComponentProps {
+-  valueType: FieldValueType;
++  valueType: PickerValueType;
+   foo: string;
+   bar: number;
+ }
+```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type <path>
+```
 
 ## v7.0.0
 
@@ -195,9 +380,9 @@ The corresponding sub-sections are listed below
 
 ### Pickers codemods
 
-#### `preset-safe` for pickers v7.0.0
+#### `preset-safe` for Pickers v7.0.0
 
-The `preset-safe` codemods for pickers.
+The `preset-safe` codemods for Pickers.
 
 ```bash
 npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe <path|folder>
@@ -374,13 +559,13 @@ Renames the Tree View component to Simple Tree View
 -import { TreeView } from '@mui/x-tree-view/TreeView';
 +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 
-   return (
--    <TreeView>
-+    <SimpleTreeView>
-       <TreeItem itemId="1" label="First item" />
--    </TreeView>
-+    </SimpleTreeView>
-   );
+ return (
+-  <TreeView>
++  <SimpleTreeView>
+     <TreeItem itemId="1" label="First item" />
+-  </TreeView>
++  </SimpleTreeView>
+ );
 ```
 
 #### `rename-use-tree-item`
@@ -496,9 +681,9 @@ The corresponding sub-sections are listed below
 
 ### Pickers codemods
 
-#### `preset-safe` for pickers v6.0.0
+#### `preset-safe` for Pickers v6.0.0
 
-The `preset-safe` codemods for pickers.
+The `preset-safe` codemods for Pickers.
 
 ```bash
 npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe <path|folder>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,12 +25,12 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/runtime": "^7.26.0",
-    "@babel/traverse": "^7.25.9",
-    "jscodeshift": "17.1.1",
+    "@babel/core": "^7.26.7",
+    "@babel/runtime": "^7.26.7",
+    "@babel/traverse": "^7.26.7",
+    "jscodeshift": "17.1.2",
     "yargs": "^17.7.2",
-    "@mui/x-internals": "8.0.0-alpha.1"
+    "@mui/x-internals": "8.0.0-alpha.11"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",

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

@@ -7,8 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = transformer;
 var _renameLegendToSlotsLegend = _interopRequireDefault(require("../rename-legend-to-slots-legend"));
 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"));
 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, _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);
   return file.source;
 }

package/v8.0.0/charts/remove-experimental-mark-rendering/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 = ['LineChart', 'LineChartPro', 'MarkPlot'];
+const props = ['experimentalMarkRendering'];
+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/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/charts/rename-label-and-tick-font-size/index.js

@@ -0,0 +1,56 @@
+"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;
+        }
+        ['label', 'tick'].forEach(attributeName => {
+          const attributeValue = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === `${attributeName}FontSize`);
+          if (!attributeValue) {
+            return;
+          }
+          const attributeStyle = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === `${attributeName}Style`);
+
+          // @ts-ignore receives an object.
+          const styleValue = attributeStyle?.value.expression.properties.find(prop => prop.key.name === 'fontSize');
+          if (attributeStyle === null) {
+            // We create a new "style" object
+            elementPath.node.openingElement.attributes?.push(j.jsxAttribute(j.jsxIdentifier(`${attributeName}Style`), j.jsxExpressionContainer(j.objectExpression([j.objectProperty(j.identifier('fontSize'),
+            // @ts-ignore receives an object.
+            attributeValue.value.expression)]))));
+          } else {
+            (0, _addComponentsSlots.transformNestedProp)(elementPath, `${attributeName}Style`, 'fontSize',
+            // @ts-ignore receives an object.
+            styleValue?.value ?? attributeValue.value.expression, j);
+          }
+        });
+
+        // Remove the legend prop
+        j(elementPath).find(j.JSXAttribute).filter(a => a.value.name.name === 'labelFontSize' || a.value.name.name === 'tickFontSize').forEach(pathToRemove => {
+          j(pathToRemove).remove();
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/v8.0.0/charts/rename-legend-position-type/index.js

@@ -0,0 +1,29 @@
+"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: 'ChartsLegend',
+      newEndpoint: 'models',
+      importsMapping: {
+        LegendPosition: 'Position'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,57 @@
+"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 direction = slotProps?.value?.expression?.properties
+        // @ts-expect-error
+        ?.find(v => v?.key?.name === 'legend')
+        // @ts-expect-error
+        ?.value?.properties?.find(v => v?.key?.name === 'direction');
+        if (direction === undefined || direction?.value === undefined || direction?.value?.value === undefined) {
+          return;
+        }
+        const directionValue = direction.value;
+        directionValue.value = mapFix(directionValue.value);
+        (0, _addComponentsSlots.transformNestedProp)(elementPath, 'slotProps', 'legend.direction', directionValue, j);
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}
+function mapFix(v) {
+  switch (v) {
+    case 'row':
+      return 'horizontal';
+    case 'column':
+      return 'vertical';
+    default:
+      return v;
+  }
+}

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/preset-safe/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _removeStabilizedExperimentalFeatures = _interopRequireDefault(require("../remove-stabilized-experimentalFeatures"));
+function transformer(file, api, options) {
+  file.source = (0, _removeStabilizedExperimentalFeatures.default)(file, api, options);
+  return file.source;
+}

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

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

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

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

package/v8.0.0/pickers/rename-adapter-date-fns-imports/index.js

@@ -0,0 +1,46 @@
+"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-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'AdapterDateFns',
+      newEndpoint: 'AdapterDateFnsV2',
+      importsMapping: {
+        AdapterDateFns: 'AdapterDateFns'
+      }
+    }, {
+      oldEndpoint: 'AdapterDateFnsV3',
+      newEndpoint: 'AdapterDateFns',
+      importsMapping: {
+        AdapterDateFns: 'AdapterDateFns'
+      }
+    }, {
+      oldEndpoint: 'AdapterDateFnsJalali',
+      newEndpoint: 'AdapterDateFnsJalaliV2',
+      importsMapping: {
+        AdapterDateFnsJalali: 'AdapterDateFnsJalali'
+      }
+    }, {
+      oldEndpoint: 'AdapterDateFnsJalaliV3',
+      newEndpoint: 'AdapterDateFnsJalali',
+      importsMapping: {
+        AdapterDateFnsJalali: 'AdapterDateFnsJalali'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

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

@@ -6,9 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = transformer;
 var _presetSafe = _interopRequireDefault(require("../tree-view/preset-safe"));
-var _presetSafe2 = _interopRequireDefault(require("../charts/preset-safe"));
+var _presetSafe2 = _interopRequireDefault(require("../pickers/preset-safe"));
+var _presetSafe3 = _interopRequireDefault(require("../charts/preset-safe"));
+var _presetSafe4 = _interopRequireDefault(require("../data-grid/preset-safe"));
 function transformer(file, api, options) {
   file.source = (0, _presetSafe.default)(file, api, options);
   file.source = (0, _presetSafe2.default)(file, api, options);
+  file.source = (0, _presetSafe3.default)(file, api, options);
+  file.source = (0, _presetSafe4.default)(file, api, options);
   return file.source;
 }