@mui/codemod 5.11.12 → 5.12.0

package/README.md

@@ -79,7 +79,7 @@ npx @mui/codemod v5.0.0/rename-css-variables <path>
 
 #### `base-hook-imports`
 
-Updates the sources of the imports of the MUI Base hooks to adapt to the new directories of the hooks.
+Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks.
 
 ```diff
 -  import { useBadge } from '@mui/base/BadgeUnstyled';
@@ -397,7 +397,7 @@ You can find more details about this breaking change in [the migration guide](ht
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
 Also, changes `slots`' fields names to camelCase.
 
-This change only affects MUI Base components.
+This change only affects Base UI components.
 
 ```diff
  <BadgeUnstyled

package/node/v5.0.0/rename-css-variables.js

@@ -7,7 +7,7 @@ exports.default = transformer;
 const capitalize = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
-const JoyComponents = ['Alert', 'AspectRatio', 'Autocomplete', 'AutocompleteListbox', 'AutocompleteOption', 'Avatar', 'AvatarGroup', 'Badge', 'Box', 'Breadcrumbs', 'Button', 'Card', 'CardContent', 'CardCover', 'CardOverflow', 'Checkbox', 'Chip', 'ChipDelete', 'CircularProgress', 'Container', 'CssBaseline', 'Divider', 'FormControl', 'FormHelperText', 'FormLabel', 'Grid', 'IconButton', 'Input', 'LinearProgress', 'Link', 'List', 'ListDivider', 'ListItem', 'ListItemButton', 'ListItemContent', 'ListItemDecorator', 'ListSubheader', 'Menu', 'MenuItem', 'MenuList', 'Modal', 'ModalClose', 'ModalDialog', 'Option', 'Radio', 'RadioGroup', 'ScopedCssBaseline', 'Select', 'Sheet', 'Slider', 'Stack', 'SvgIcon', 'Switch', 'Tab', 'Table', 'TabList', 'TabPanel', 'Tabs', 'Textarea', 'TextField', 'Tooltip', 'Typography'];
+const JoyComponents = ['Alert', 'AspectRatio', 'Autocomplete', 'AutocompleteListbox', 'AutocompleteOption', 'Avatar', 'AvatarGroup', 'Badge', 'Box', 'Breadcrumbs', 'Button', 'Card', 'CardContent', 'CardCover', 'CardOverflow', 'Checkbox', 'Chip', 'ChipDelete', 'CircularProgress', 'Container', 'CssBaseline', 'Divider', 'FormControl', 'FormHelperText', 'FormLabel', 'Grid', 'IconButton', 'Input', 'LinearProgress', 'Link', 'List', 'ListDivider', 'ListItem', 'ListItemButton', 'ListItemContent', 'ListItemDecorator', 'ListSubheader', 'Menu', 'MenuItem', 'MenuList', 'Modal', 'ModalClose', 'ModalDialog', 'Option', 'Radio', 'RadioGroup', 'ScopedCssBaseline', 'Select', 'Sheet', 'Slider', 'Stack', 'SvgIcon', 'Switch', 'Tab', 'Table', 'TableCell', 'TabList', 'TabPanel', 'Tabs', 'Textarea', 'TextField', 'Tooltip', 'Typography'];
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -16,15 +16,24 @@ function transformer(file) {
   return file.source
   // from `--<Component>-<slot>-<property>` to `--<Component>-<slot><Property>`
   .replace(/--([a-zA-Z]+)([-_])([a-zA-Z]+)-([a-zA-Z]+)/gm, (matched, capture1, capture2, capture3, capture4) => {
-    if (!JoyComponents.includes(capture1) && !['internal', 'unstable'].includes(capture1)) {
+    if (!JoyComponents.includes(capture1) && !['internal', 'unstable', 'private'].includes(capture1)) {
       return matched;
     }
     // turn `--List-item-...` and `--List-divider-...` to `--ListItem-...` and `--ListDivider-...`
     if (capture1 === 'List' && ['divider', 'item'].includes(capture3)) {
       return `--${capture1}${capitalize(capture3)}-${capture4}`;
     }
-    return `--${capture1}${capture2}${capture3}${capitalize(capture4)}`;
-  })
+    // turn `--List-decorator-...` to `--ListItemDecorator-...`
+    if (capture1 === 'List' && ['decorator'].includes(capture3)) {
+      return `--${capture1}Item${capitalize(capture3)}-${capture4}`;
+    }
+    if (!JoyComponents.includes(capture3)) {
+      return `--${capture1}${capture2}${capture3}${capitalize(capture4)}`;
+    }
+    return matched;
+  }).replace(/--List-decoratorSize/gm, '--ListItemDecorator-size').replace(/--List-decoratorColor/gm, '--ListItemDecorator-color')
   // from `--internal-...` to `--unstable_...`
-  .replace(/--internal-/gm, '--unstable_');
+  .replace(/--internal-/gm, '--unstable_')
+  // from `--private_...` to `--unstable_...`
+  .replace(/--private_/gm, '--unstable_');
 }

package/node/v5.0.0/rename-css-variables.test/actual.js

@@ -4,7 +4,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
     sx: {
-      py: 'var(--ListDivider-gap)'
+      py: 'var(--ListDivider-gap)',
+      '--List-decorator-size': '24px'
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+    sx: {
+      '--List-decoratorSize': '24px'
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
     sx: {
@@ -14,6 +19,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       '--Input-decoratorChildHeight': '10px'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalDialog, {
+    sx: {
+      '--unstable_ModalDialog-descriptionOffset': '12px'
+    }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
     sx: {
       '--Autocomplete-wrapperGap': '10px'
@@ -26,6 +35,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       py: 'var(--internal-action-radius)'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    sx: {
+      py: 'var(--private_action-radius)'
+    }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
     sx: {
       py: 'var(--unstable_action-radius)'

package/node/v5.0.0/rename-css-variables.test/expected.js

@@ -4,7 +4,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
     sx: {
-      py: 'var(--ListDivider-gap)'
+      py: 'var(--ListDivider-gap)',
+      '--ListItemDecorator-size': '24px'
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+    sx: {
+      '--ListItemDecorator-size': '24px'
     }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
     sx: {
@@ -14,6 +19,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       '--Input-decoratorChildHeight': '10px'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalDialog, {
+    sx: {
+      '--unstable_ModalDialog-descriptionOffset': '12px'
+    }
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
     sx: {
       '--Autocomplete-wrapperGap': '10px'
@@ -30,5 +39,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     sx: {
       py: 'var(--unstable_actionRadius)'
     }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    sx: {
+      py: 'var(--unstable_actionRadius)'
+    }
   })]
 });

package/node/v5.0.0/theme-augment.js

@@ -30,7 +30,7 @@ function transformer(file, api, options) {
       if (node.imported.name === 'Theme') {
         hasTheme = true;
       }
-      if (node.imported.name === 'ThemeProvider' || node.imported.nmae === 'MuiThemeProvider') {
+      if (node.imported.name === 'ThemeProvider' || node.imported.name === 'MuiThemeProvider') {
         isRootFile = true;
       }
     });

package/node/v5.0.0/theme-spacing.test/large-actual.js

@@ -186,7 +186,7 @@ const NewStartScreen = () => {
     }, category.name))
   });
 };
-function DocSearcHit(props) {
+function DocSearchHit(props) {
   const {
     children,
     hit
@@ -205,7 +205,7 @@ function DocSearcHit(props) {
       text = 'Joy UI';
     }
     if (pathname.startsWith('/base/')) {
-      text = 'MUI Base';
+      text = 'Base UI';
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
       label: text,
@@ -238,7 +238,7 @@ function DocSearcHit(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? DocSearcHit.propTypes = {
+process.env.NODE_ENV !== "production" ? DocSearchHit.propTypes = {
   children: _propTypes.default.node,
   hit: _propTypes.default.object.isRequired
 } : void 0;
@@ -358,7 +358,7 @@ function AppSearch() {
           });
         });
       },
-      hitComponent: DocSearcHit,
+      hitComponent: DocSearchHit,
       initialScrollY: typeof window !== 'undefined' ? window.scrollY : undefined,
       onClose: onClose,
       navigator: keyboardNavigator

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -186,7 +186,7 @@ const NewStartScreen = () => {
     }, category.name))
   });
 };
-function DocSearcHit(props) {
+function DocSearchHit(props) {
   const {
     children,
     hit
@@ -205,7 +205,7 @@ function DocSearcHit(props) {
       text = 'Joy UI';
     }
     if (pathname.startsWith('/base/')) {
-      text = 'MUI Base';
+      text = 'Base UI';
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
       label: text,
@@ -238,7 +238,7 @@ function DocSearcHit(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? DocSearcHit.propTypes = {
+process.env.NODE_ENV !== "production" ? DocSearchHit.propTypes = {
   children: _propTypes.default.node,
   hit: _propTypes.default.object.isRequired
 } : void 0;
@@ -358,7 +358,7 @@ function AppSearch() {
           });
         });
       },
-      hitComponent: DocSearcHit,
+      hitComponent: DocSearchHit,
       initialScrollY: typeof window !== 'undefined' ? window.scrollY : undefined,
       onClose: onClose,
       navigator: keyboardNavigator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.11.12",
+  "version": "5.12.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/runtime": "^7.21.0",
-    "@babel/traverse": "^7.21.2",
+    "@babel/traverse": "^7.21.3",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.1"