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

package/README.md

@@ -242,6 +242,20 @@ 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>
+```
+
 ### Data Grid codemods
 
 #### `preset-safe` for Data Grid v8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,7 +30,7 @@
     "@babel/traverse": "^7.26.7",
     "jscodeshift": "17.1.2",
     "yargs": "^17.7.2",
-    "@mui/x-internals": "8.0.0-alpha.10"
+    "@mui/x-internals": "8.0.0-alpha.11"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",

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

@@ -12,6 +12,7 @@ var _replaceLegendDirectionValues = _interopRequireDefault(require("../replace-l
 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);
@@ -20,5 +21,6 @@ function transformer(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-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);
+}