@mui/codemod 6.4.7 → 6.4.11

package/README.md

@@ -11,8 +11,6 @@ Some of the codemods also run [postcss](https://github.com/postcss/postcss) plug
 
 ## Setup & run
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest <codemod> <paths...>
 
@@ -1032,6 +1030,42 @@ npx @mui/codemod@latest deprecations/circular-progress-classes <path>
 npx @mui/codemod@latest deprecations/divider-props <path>
 ```
 
+#### `dialog-classes`
+
+JS transforms:
+
+```diff
+ import { dialogClasses } from '@mui/material/Dialog';
+
+ MuiDialog: {
+   styleOverrides: {
+     root: {
+-      [`& .${dialogClasses.paperScrollBody}`]: {
++      [`& .${dialogClasses.scrollBody} > .${dialogClasses.paper}`]: {
+         color: 'red',
+       },
+-      [`& .${dialogClasses.paperScrollPaper}`]: {
++      [`& .${dialogClasses.scrollPaper} > .${dialogClasses.paper}`]: {
+         color: 'red',
+       },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiDialog-root .MuiDialog-paperScrollBody
++.MuiDialog-root .MuiDialog-scrollBody > .MuiDialog-paper
+-.MuiDialog-root .MuiDialog-paperScrollPaper
++.MuiDialog-root .MuiDialog-scrollPaper > .MuiDialog-paper
+```
+
+```bash
+npx @mui/codemod@latest deprecations/dialog-classes <path>
+```
+
 #### `drawer-classes`
 
 JS transforms:
@@ -2595,8 +2629,6 @@ Renames `Autocomplete`'s `closeIcon` prop to `clearIcon`.
 +<Autocomplete clearIcon={defaultClearIcon} />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/autocomplete-rename-closeicon  <path>
 ```
@@ -2614,8 +2646,6 @@ Renames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.
  />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/autocomplete-rename-option  <path>
 ```
@@ -2633,8 +2663,6 @@ Updates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circu
 +<Avatar classes={{ circular: 'className' }} />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/avatar-circle-circular <path>
 ```
@@ -2668,8 +2696,6 @@ Renames the badge's props.
  }}>
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/badge-overlap-value <path>
 ```
@@ -2692,8 +2718,6 @@ This change only affects Base UI components.
  />;
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/base-rename-components-to-slots <path>
 ```
@@ -2711,8 +2735,6 @@ Updates the Box API from separate system props to `sx`.
 +<Box borderRadius="16px">
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/box-borderradius-values <path>
 ```
@@ -2747,8 +2769,6 @@ Renames the Box `grid*Gap` props.
 +<Box rowGap={4}>Item 5</Box>
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/box-rename-gap <path>
 ```
@@ -2764,8 +2784,6 @@ Removes the outdated `color` prop values.
 +<Button>
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/button-color-prop <path>
 ```
@@ -2781,8 +2799,6 @@ Removes the Chip `variant` prop if the value is `"default"`.
 +<Chip>
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/chip-variant-prop <path>
 ```
@@ -2798,8 +2814,6 @@ Renames the CircularProgress `static` variant to `determinate`.
 +<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/circularprogress-variant <path>
 ```
@@ -2817,8 +2831,6 @@ Renames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.
 +<Collapse classes={{ root: 'collapse' }} />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/collapse-rename-collapsedheight <path>
 ```
@@ -2836,8 +2848,6 @@ A generic codemod to rename any component prop.
 +<Component newProp />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
 ```
@@ -2948,8 +2958,6 @@ Renames the `fade` style utility import and calls to `alpha()`.
 +const foo = alpha('#aaa');
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/fade-rename-alpha <path>
 ```
@@ -2965,8 +2973,6 @@ Renames `Grid`'s `justify` prop to `justifyContent`.
 +<Grid item justifyContent="left">Item</Grid>
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/grid-justify-justifycontent <path>
 ```
@@ -3249,8 +3255,6 @@ or
 +import { SpeedDial } from '@material-ui/core';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/moved-lab-modules <path>
 ```
@@ -3293,8 +3297,6 @@ Fix private import paths.
 +import { createTheme } from '@material-ui/core/styles';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/optimal-imports <path>
 ```
@@ -3422,8 +3424,6 @@ Updates breakpoint values to match new logic. ⚠️ This mod is not idempotent,
 +theme.breakpoints.between('sm', 'lg')
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/theme-breakpoints <path>
 ```
@@ -3496,8 +3496,6 @@ Removes the 'px' suffix from some template strings.
 +`${theme.spacing(2)} ${theme.spacing(4)}`
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/theme-spacing <path>
 ```
@@ -3529,8 +3527,6 @@ Converts all `@mui/material` submodule imports to the root module:
 +import { List, Grid } from '@mui/material';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/top-level-imports <path>
 ```
@@ -3581,8 +3577,6 @@ Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to
  />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/use-transitionprops <path>
 ```
@@ -3611,8 +3605,6 @@ The diff should look like this:
 +<FormControl value="Standard" variant="standard" />
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v5.0.0/variant-prop <path>
 ```
@@ -3722,8 +3714,6 @@ The diff should look like this:
 +const spacing = theme.spacing(1);
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v4.0.0/theme-spacing-api <path>
 ```
@@ -3749,8 +3739,6 @@ Converts all `@material-ui/core` imports more than 1 level deep to the optimal f
 +import { withStyles, createTheme } from '@material-ui/core/styles';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v4.0.0/optimal-imports <path>
 ```
@@ -3767,8 +3755,6 @@ Converts all `@material-ui/core` submodule imports to the root module:
 +import { List, withStyles } from '@material-ui/core';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v4.0.0/top-level-imports <path>
 ```
@@ -3788,8 +3774,6 @@ The diff should look like this:
 +import MenuItem from '@material-ui/core/MenuItem';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v1.0.0/import-path <path>
 ```
@@ -3815,16 +3799,12 @@ The diff should look like this:
 +const teal500 = teal['500'];
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v1.0.0/color-imports <path>
 ```
 
 **additional options**
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
 ```
@@ -3841,8 +3821,6 @@ The diff should look like this:
 +import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v1.0.0/svg-icon-imports <path>
 ```
@@ -3859,8 +3837,6 @@ The diff should look like this:
 +<MenuItem>{"Profile" + "!"}</MenuItem>
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v1.0.0/menu-item-primary-text <path>
 ```
@@ -3883,8 +3859,6 @@ The diff should look like this:
 +import RaisedButton from 'material-ui/RaisedButton';
 ```
 
-<!-- #default-branch-switch -->
-
 ```bash
 npx @mui/codemod@latest v0.15.0/import-path <path>
 ```

package/node/deprecations/all/deprecations-all.js

@@ -8,6 +8,7 @@ exports.default = deprecationsAll;
 var _accordionSummaryClasses = _interopRequireDefault(require("../accordion-summary-classes"));
 var _accordionProps = _interopRequireDefault(require("../accordion-props"));
 var _alertClasses = _interopRequireDefault(require("../alert-classes"));
+var _alertProps = _interopRequireDefault(require("../alert-props"));
 var _avatarGroupProps = _interopRequireDefault(require("../avatar-group-props"));
 var _autocompleteProps = _interopRequireDefault(require("../autocomplete-props"));
 var _avatarProps = _interopRequireDefault(require("../avatar-props"));
@@ -18,6 +19,7 @@ var _chipClasses = _interopRequireDefault(require("../chip-classes"));
 var _circularProgressClasses = _interopRequireDefault(require("../circular-progress-classes"));
 var _dividerProps = _interopRequireDefault(require("../divider-props"));
 var _drawerClasses = _interopRequireDefault(require("../drawer-classes"));
+var _dialogClasses = _interopRequireDefault(require("../dialog-classes"));
 var _filledInputProps = _interopRequireDefault(require("../filled-input-props"));
 var _formControlLabelProps = _interopRequireDefault(require("../form-control-label-props"));
 var _imageListItemBarClasses = _interopRequireDefault(require("../image-list-item-bar-classes"));
@@ -28,7 +30,9 @@ var _listItemTextProps = _interopRequireDefault(require("../list-item-text-props
 var _linearProgressClasses = _interopRequireDefault(require("../linear-progress-classes"));
 var _modalProps = _interopRequireDefault(require("../modal-props"));
 var _outlinedInputProps = _interopRequireDefault(require("../outlined-input-props"));
+var _paginationItemProps = _interopRequireDefault(require("../pagination-item-props"));
 var _paginationItemClasses = _interopRequireDefault(require("../pagination-item-classes"));
+var _popperProps = _interopRequireDefault(require("../popper-props"));
 var _speedDialProps = _interopRequireDefault(require("../speed-dial-props"));
 var _tableSortLabelClasses = _interopRequireDefault(require("../table-sort-label-classes"));
 var _selectClasses = _interopRequireDefault(require("../select-classes"));
@@ -42,14 +46,16 @@ var _tooltipProps = _interopRequireDefault(require("../tooltip-props"));
 var _tablePaginationProps = _interopRequireDefault(require("../table-pagination-props"));
 var _cardHeaderProps = _interopRequireDefault(require("../card-header-props"));
 var _popoverProps = _interopRequireDefault(require("../popover-props"));
+var _snackbarProps = _interopRequireDefault(require("../snackbar-props"));
+var _sliderProps = _interopRequireDefault(require("../slider-props"));
 var _sliderClasses = _interopRequireDefault(require("../slider-classes"));
 var _mobileStepperProps = _interopRequireDefault(require("../mobile-stepper-props"));
-var _snackbarProps = _interopRequireDefault(require("../snackbar-props"));
 var _tabsProps = _interopRequireDefault(require("../tabs-props"));
 var _tabsClasses = _interopRequireDefault(require("../tabs-classes"));
 var _drawerProps = _interopRequireDefault(require("../drawer-props"));
 var _menuProps = _interopRequireDefault(require("../menu-props"));
 var _ratingProps = _interopRequireDefault(require("../rating-props"));
+var _typographyProps = _interopRequireDefault(require("../typography-props"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -58,6 +64,7 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _accordionSummaryClasses.default)(file, api, options);
   file.source = (0, _accordionProps.default)(file, api, options);
   file.source = (0, _alertClasses.default)(file, api, options);
+  file.source = (0, _alertProps.default)(file, api, options);
   file.source = (0, _avatarGroupProps.default)(file, api, options);
   file.source = (0, _autocompleteProps.default)(file, api, options);
   file.source = (0, _avatarProps.default)(file, api, options);
@@ -68,6 +75,7 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _circularProgressClasses.default)(file, api, options);
   file.source = (0, _dividerProps.default)(file, api, options);
   file.source = (0, _drawerClasses.default)(file, api, options);
+  file.source = (0, _dialogClasses.default)(file, api, options);
   file.source = (0, _filledInputProps.default)(file, api, options);
   file.source = (0, _formControlLabelProps.default)(file, api, options);
   file.source = (0, _imageListItemBarClasses.default)(file, api, options);
@@ -79,6 +87,8 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _modalProps.default)(file, api, options);
   file.source = (0, _outlinedInputProps.default)(file, api, options);
   file.source = (0, _paginationItemClasses.default)(file, api, options);
+  file.source = (0, _paginationItemProps.default)(file, api, options);
+  file.source = (0, _popperProps.default)(file, api, options);
   file.source = (0, _speedDialProps.default)(file, api, options);
   file.source = (0, _stepConnectorClasses.default)(file, api, options);
   file.source = (0, _stepContentProps.default)(file, api, options);
@@ -92,6 +102,8 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _tablePaginationProps.default)(file, api, options);
   file.source = (0, _cardHeaderProps.default)(file, api, options);
   file.source = (0, _popoverProps.default)(file, api, options);
+  file.source = (0, _snackbarProps.default)(file, api, options);
+  file.source = (0, _sliderProps.default)(file, api, options);
   file.source = (0, _sliderClasses.default)(file, api, options);
   file.source = (0, _mobileStepperProps.default)(file, api, options);
   file.source = (0, _snackbarProps.default)(file, api, options);
@@ -100,5 +112,6 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _drawerProps.default)(file, api, options);
   file.source = (0, _menuProps.default)(file, api, options);
   file.source = (0, _ratingProps.default)(file, api, options);
+  file.source = (0, _typographyProps.default)(file, api, options);
   return file.source;
 }

package/node/deprecations/dialog-classes/dialog-classes.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _postcssPlugin = require("./postcss-plugin");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  _postcssPlugin.classes.forEach(({
+    deprecatedClass,
+    replacementSelector
+  }) => {
+    const replacementSelectorPrefix = '&';
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/Dialog$/)).forEach(path => {
+      path.node.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'dialogClasses') {
+          const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');
+          root.find(j.MemberExpression, {
+            object: {
+              name: specifier.local.name
+            },
+            property: {
+              name: deprecatedAtomicClass
+            }
+          }).forEach(memberExpression => {
+            const parent = memberExpression.parentPath.parentPath.value;
+            if (parent.type === j.TemplateLiteral.name) {
+              const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
+              const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+              const atomicClasses = replacementSelector.replaceAll('MuiDialog-', '').replaceAll(replacementSelectorPrefix, '').replaceAll(' > ', '').replaceAll(' ', '').split('.').filter(Boolean);
+              if (precedingTemplateElement.value.raw.endsWith(deprecatedClass.startsWith(' ') ? `${replacementSelectorPrefix} .` : `${replacementSelectorPrefix}.`)) {
+                parent.expressions.splice(memberExpressionIndex, 1, j.memberExpression(memberExpression.value.object, j.identifier(atomicClasses[0])), j.memberExpression(memberExpression.value.object, j.identifier(atomicClasses[1])));
+                if (replacementSelector.includes(' > ')) {
+                  parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
+                    raw: precedingTemplateElement.value.raw,
+                    cooked: precedingTemplateElement.value.cooked
+                  }, false), j.templateElement({
+                    raw: ' > .',
+                    cooked: ' > .'
+                  }, false));
+                } else {
+                  parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
+                    raw: precedingTemplateElement.value.raw,
+                    cooked: precedingTemplateElement.value.cooked
+                  }, false), j.templateElement({
+                    raw: '.',
+                    cooked: '.'
+                  }, false));
+                }
+              }
+            }
+          });
+        }
+      });
+    });
+    const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`);
+    root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
+      path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelectorPrefix}${deprecatedClass.startsWith(' ') ? ' ' : ''}${replacementSelector.trim()}`)));
+    });
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/dialog-classes/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _dialogClasses.default;
+  }
+});
+var _dialogClasses = _interopRequireDefault(require("./dialog-classes"));

package/node/deprecations/dialog-classes/postcss-plugin.js

@@ -0,0 +1,33 @@
+"use strict";
+
+const classes = [{
+  deprecatedClass: ' .MuiDialog-paperScrollBody',
+  replacementSelector: ' .MuiDialog-scrollBody > .MuiDialog-paper'
+}, {
+  deprecatedClass: ' .MuiDialog-paperScrollPaper',
+  replacementSelector: ' .MuiDialog-scrollPaper > .MuiDialog-paper'
+}];
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deprecated Dialog classes with new classes`,
+    Rule(rule) {
+      const {
+        selector
+      } = rule;
+      classes.forEach(({
+        deprecatedClass,
+        replacementSelector
+      }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass}`);
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    }
+  };
+};
+plugin.postcss = true;
+module.exports = {
+  plugin,
+  classes
+};

package/node/deprecations/dialog-classes/postcss.config.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const {
+  plugin
+} = require('./postcss-plugin');
+module.exports = {
+  plugins: [plugin]
+};

package/node/deprecations/dialog-classes/test-cases/actual.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Dialog = require("@mui/material/Dialog");
+'& .MuiDialog-paperScrollBody';
+'& .MuiDialog-paperScrollPaper';
+`& .${_Dialog.dialogClasses.paperScrollBody}`;
+`& .${_Dialog.dialogClasses.paperScrollPaper}`;

package/node/deprecations/dialog-classes/test-cases/expected.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Dialog = require("@mui/material/Dialog");
+"& .MuiDialog-scrollBody > .MuiDialog-paper";
+"& .MuiDialog-scrollPaper > .MuiDialog-paper";
+`& .${_Dialog.dialogClasses.scrollBody} > .${_Dialog.dialogClasses.paper}`;
+`& .${_Dialog.dialogClasses.scrollPaper} > .${_Dialog.dialogClasses.paper}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.4.7",
+  "version": "6.4.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",