@mui/x-codemod 7.0.0-beta.0 → 7.0.0-beta.7

package/README.md

@@ -221,6 +221,8 @@ The list includes these transformers
 - [`rename-use-tree-item`](#rename-use-tree-item)
 - [`rename-expansion-props`](#rename-expansion-props)
 - [`rename-selection-props`](#rename-selection-props)
+- [`replace-transition-props-by-slot`](#replace-transition-props-by-slot)
+- [`rename-focus-callback`](#rename-focus-callback)
 
 #### `rename-tree-view-simple-tree-view`
 
@@ -273,13 +275,13 @@ Rename the expansion props
 ```diff
  <TreeView
 -  onNodeToggle={handleExpansionChange}
-+  onExpandedNodesChange={handleExpansionChange}
++  onExpandedItemsChange={handleExpansionChange}
 
--  expanded={expandedNodes}
-+  expandedNodes={expandedNodes}
+-  expanded={expandedItems}
++  expandedItems={expandedItems}
 
--  defaultExpanded={defaultExpandedNodes}
-+  defaultExpandedNodes={defaultExpandedNodes}
+-  defaultExpanded={defaultExpandedItems}
++  defaultExpandedItems={defaultExpandedItems}
  />
 ```
 
@@ -290,13 +292,38 @@ Rename the selection props
 ```diff
  <TreeView
 -  onNodeSelect={handleSelectionChange}
-+  onSelectedNodesChange={handleSelectionChange}
++  onSelectedItemsChange={handleSelectionChange}
 
--  selected={selectedNodes}
-+  selectedNodes={selectedNodes}
+-  selected={selectedItems}
++  selectedItems={selectedItems}
 
--  defaultSelected={defaultSelectedNodes}
-+  defaultSelectedNodes={defaultSelectedNodes}
+-  defaultSelected={defaultSelectedItems}
++  defaultSelectedItems={defaultSelectedItems}
+ />
+```
+
+#### `replace-transition-props-by-slot`
+
+Replace the `TransitionComponent` and `TransitionProps` components with the `groupTransition` slot:
+
+```diff
+ <TreeItem
+-  TransitionComponent={Fade}
++  slots={{ groupTransition: Fade }}
+
+-  TransitionProps={{ timeout: 600 }}
++  slotProps={{ groupTransition: { timeout: 600 } }}
+ />
+```
+
+#### `rename-focus-callback`
+
+Replace the `onNodeFocus` callback with `onItemFocus`:
+
+```diff
+ <TreeView
+-  onNodeFocus={onNodeFocus}
++  onItemFocus={onItemFocus}
  />
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.0.0-beta.0",
+  "version": "7.0.0-beta.7",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -32,9 +32,9 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/runtime": "^7.23.8",
-    "@babel/traverse": "^7.23.7",
+    "@babel/core": "^7.24.0",
+    "@babel/runtime": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.2"

package/v7.0.0/tree-view/preset-safe/index.js

@@ -7,11 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = transformer;
 var _renameExpansionProps = _interopRequireDefault(require("../rename-expansion-props"));
 var _renameSelectionProps = _interopRequireDefault(require("../rename-selection-props"));
+var _renameFocusCallback = _interopRequireDefault(require("../rename-focus-callback"));
+var _replaceTransitionPropsBySlot = _interopRequireDefault(require("../replace-transition-props-by-slot"));
 var _renameUseTreeItem = _interopRequireDefault(require("../rename-use-tree-item"));
 var _renameTreeViewSimpleTreeView = _interopRequireDefault(require("../rename-tree-view-simple-tree-view"));
 function transformer(file, api, options) {
   file.source = (0, _renameExpansionProps.default)(file, api, options);
   file.source = (0, _renameSelectionProps.default)(file, api, options);
+  file.source = (0, _renameFocusCallback.default)(file, api, options);
+  file.source = (0, _replaceTransitionPropsBySlot.default)(file, api, options);
   file.source = (0, _renameUseTreeItem.default)(file, api, options);
   file.source = (0, _renameTreeViewSimpleTreeView.default)(file, api, options);
   return file.source;

package/v7.0.0/tree-view/rename-expansion-props/index.js

@@ -14,9 +14,9 @@ function transformer(file, api, options) {
     root,
     componentNames: ['TreeView', 'SimpleTreeView'],
     props: {
-      expanded: 'expandedNodes',
-      defaultExpanded: 'defaultExpandedNodes',
-      onNodeToggle: 'onExpandedNodesChange'
+      expanded: 'expandedItems',
+      defaultExpanded: 'defaultExpandedItems',
+      onNodeToggle: 'onExpandedItemsChange'
     },
     j
   }).toSource(printOptions);

package/v7.0.0/tree-view/rename-focus-callback/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  return (0, _renameProps.default)({
+    root,
+    componentNames: ['TreeView', 'SimpleTreeView'],
+    props: {
+      onNodeFocus: 'onItemFocus'
+    },
+    j
+  }).toSource(printOptions);
+}

package/v7.0.0/tree-view/rename-selection-props/index.js

@@ -14,9 +14,9 @@ function transformer(file, api, options) {
     root,
     componentNames: ['TreeView', 'SimpleTreeView'],
     props: {
-      selected: 'selectedNodes',
-      defaultSelected: 'defaultSelectedNodes',
-      onNodeSelect: 'onSelectedNodesChange'
+      selected: 'selectedItems',
+      defaultSelected: 'defaultSelectedItems',
+      onNodeSelect: 'onSelectedItemsChange'
     },
     j
   }).toSource(printOptions);

package/v7.0.0/tree-view/replace-transition-props-by-slot/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+var _removeProps = _interopRequireDefault(require("../../../util/removeProps"));
+const propsToSlots = {
+  TransitionComponent: {
+    prop: 'slots',
+    path: 'groupTransition'
+  },
+  TransitionProps: {
+    prop: 'slotProps',
+    path: 'groupTransition'
+  }
+};
+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 => path.value.openingElement.name.name === 'TreeItem').forEach(path => {
+    const attributesToTransform = j(path).find(j.JSXAttribute).filter(attribute => Object.keys(propsToSlots).includes(attribute.value.name.name));
+    attributesToTransform.forEach(attribute => {
+      const attributeName = attribute.value.name.name;
+
+      // Get the value in case it's:
+      // - prop={value}
+      // - prop="value"
+      // - prop (which means true)
+      let value = attribute.value.value?.type === 'JSXExpressionContainer' ? attribute.value.value.expression : attribute.value.value || j.booleanLiteral(true);
+      if (attributeName === 'showToolbar') {
+        if (value.type === 'BooleanLiteral' || value.type === 'Literal' && typeof value.value === 'boolean') {
+          value.value = !value.value;
+        } else {
+          value = j.unaryExpression('!', value);
+        }
+      }
+      (0, _addComponentsSlots.transformNestedProp)(path, propsToSlots[attributeName].prop, propsToSlots[attributeName].path, value, j);
+    });
+  });
+  (0, _removeProps.default)({
+    root,
+    componentNames: ['TreeItem'],
+    props: Object.keys(propsToSlots),
+    j
+  });
+  return root.toSource(printOptions);
+}