@mui/codemod 7.0.0-alpha.0 → 7.0.0-alpha.1

package/README.md

@@ -11,10 +11,10 @@ Some of the codemods also run [postcss](https://github.com/postcss/postcss) plug
 
 ## Setup & run
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
-npx @mui/codemod@latest <codemod> <paths...>
+npx @mui/codemod@next <codemod> <paths...>
 
 Applies a `@mui/codemod` to the specified paths
 
@@ -62,6 +62,7 @@ npx @mui/codemod@latest <transform> <path> --jscodeshift="--printOptions='{\"quo
 ## Included scripts
 
 - [Deprecations](#deprecations)
+- [v7](#v700)
 - [v6](#v600)
 - [v5](#v500)
 - [v4](#v400)
@@ -1400,6 +1401,19 @@ npx @mui/codemod@latest deprecations/linear-progress-classes <path>
 npx @mui/codemod@latest deprecations/modal-props <path>
 ```
 
+#### `mobile-stepper-props`
+
+```diff
+ <MobileStepper
+-  LinearProgressProps={{ color: 'primary' }}
++  slotProps={{ progress: { color: 'primary' } }}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/mobile-stepper-props <path>
+```
+
 #### `pagination-item-classes`
 
 JS transforms:
@@ -1633,6 +1647,78 @@ npx @mui/codemod@latest deprecations/slider-props <path>
 npx @mui/codemod@next deprecations/snackbar-props <path>
 ```
 
+#### `slider-classes`
+
+JS transforms:
+
+```diff
+ import { sliderClasses } from '@mui/material/Slider';
+
+ MuiSlider: {
+   styleOverrides: {
+     root: {
+-      [`&.${sliderClasses.thumbSizeSmall}`]: {
++      [`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbSizeMedium}`]: {
++      [`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorPrimary}`]: {
++      [`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorSecondary}`]: {
++      [`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorError}`]: {
++      [`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClrsses.thumbColorInfo}`]: {
++      [`&.${soiderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorSuccess}`]: {
++      [`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+-      [`&.${sliderClasses.thumbColorWarning}`]: {
++      [`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`]: {
+         color: 'red',
+       },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiSlider-root .MuiSlider-thumbSizeSmall
++.MuiSlider-root.MuiSlider-sizeSmall > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbSizeMedium
++.MuiSlider-root.MuiSlider-sizeMedium > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorPrimary
++.MuiSlider-root.MuiSlider-colorPrimary > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorSecondary
++.MuiSlider-root.MuiSlider-colorSecondary > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorError
++.MuiSlider-root.MuiSlider-colorError > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorInfo
++.MuiSlider-root.MuiSlider-colorInfo > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorSuccess
++.MuiSlider-root.MuiSlider-colorSuccess > .MuiSlider-thumb
+-.MuiSlider-root .MuiSlider-thumbColorWarning
++.MuiSlider-root.MuiSlider-colorWarning > .MuiSlider-thumb
+```
+
+```bash
+npx @mui/codemod@latest deprecations/button-classes <path>
+```
+
 #### `tooltip-props`
 
 ```diff
@@ -1931,6 +2017,47 @@ npx @mui/codemod@latest deprecations/table-sort-label-classes <path>
 npx @mui/codemod@latest deprecations/typography-props <path>
 ```
 
+### v7.0.0
+
+#### `lab-removed-components`
+
+<!-- #npm-tag-reference -->
+
+```bash
+npx @mui/codemod@next v7.0.0/lab-removed-components <path>
+```
+
+Update the import of the following components and hook moved from `@mui/lab` to `@mui/material`:
+
+- Alert
+- AlertTitle
+- Autocomplete
+- AvatarGroup
+- Pagination
+- PaginationItem
+- Rating
+- Skeleton
+- SpeedDial
+- SpeedDialAction
+- SpeedDialIcon
+- ToggleButton
+- ToggleButtonGroup
+- usePagination
+
+It updates named imports from top-level `@mui/lab`:
+
+```diff
+- import { Alert } from '@mui/lab';
++ import { Alert } from '@mui/material';
+```
+
+As well as default and named imports from component-level files:
+
+```diff
+- import Alert, { alertClasses } from '@mui/lab/Alert';
++ import Alert, { alertClasses } from '@mui/material/Alert';
+```
+
 ### v6.0.0
 
 #### `sx-prop`
@@ -2441,7 +2568,7 @@ Renames `Autocomplete`'s `closeIcon` prop to `clearIcon`.
 +<Autocomplete clearIcon={defaultClearIcon} />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/autocomplete-rename-closeicon  <path>
@@ -2460,7 +2587,7 @@ Renames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.
  />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/autocomplete-rename-option  <path>
@@ -2479,7 +2606,7 @@ Updates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circu
 +<Avatar classes={{ circular: 'className' }} />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/avatar-circle-circular <path>
@@ -2514,7 +2641,7 @@ Renames the badge's props.
  }}>
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/badge-overlap-value <path>
@@ -2538,7 +2665,7 @@ This change only affects Base UI components.
  />;
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/base-rename-components-to-slots <path>
@@ -2557,7 +2684,7 @@ Updates the Box API from separate system props to `sx`.
 +<Box borderRadius="16px">
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/box-borderradius-values <path>
@@ -2593,7 +2720,7 @@ Renames the Box `grid*Gap` props.
 +<Box rowGap={4}>Item 5</Box>
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/box-rename-gap <path>
@@ -2610,7 +2737,7 @@ Removes the outdated `color` prop values.
 +<Button>
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/button-color-prop <path>
@@ -2627,7 +2754,7 @@ Removes the Chip `variant` prop if the value is `"default"`.
 +<Chip>
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/chip-variant-prop <path>
@@ -2644,7 +2771,7 @@ Renames the CircularProgress `static` variant to `determinate`.
 +<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/circularprogress-variant <path>
@@ -2663,7 +2790,7 @@ Renames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.
 +<Collapse classes={{ root: 'collapse' }} />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/collapse-rename-collapsedheight <path>
@@ -2682,7 +2809,7 @@ A generic codemod to rename any component prop.
 +<Component newProp />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
@@ -2794,7 +2921,7 @@ Renames the `fade` style utility import and calls to `alpha()`.
 +const foo = alpha('#aaa');
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/fade-rename-alpha <path>
@@ -2811,7 +2938,7 @@ Renames `Grid`'s `justify` prop to `justifyContent`.
 +<Grid item justifyContent="left">Item</Grid>
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/grid-justify-justifycontent <path>
@@ -3095,7 +3222,7 @@ or
 +import { SpeedDial } from '@material-ui/core';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/moved-lab-modules <path>
@@ -3139,7 +3266,7 @@ Fix private import paths.
 +import { createTheme } from '@material-ui/core/styles';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/optimal-imports <path>
@@ -3268,7 +3395,7 @@ Updates breakpoint values to match new logic. ⚠️ This mod is not idempotent,
 +theme.breakpoints.between('sm', 'lg')
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/theme-breakpoints <path>
@@ -3342,7 +3469,7 @@ Removes the 'px' suffix from some template strings.
 +`${theme.spacing(2)} ${theme.spacing(4)}`
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/theme-spacing <path>
@@ -3375,7 +3502,7 @@ Converts all `@mui/material` submodule imports to the root module:
 +import { List, Grid } from '@mui/material';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/top-level-imports <path>
@@ -3427,7 +3554,7 @@ Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to
  />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/use-transitionprops <path>
@@ -3457,7 +3584,7 @@ The diff should look like this:
 +<FormControl value="Standard" variant="standard" />
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v5.0.0/variant-prop <path>
@@ -3568,7 +3695,7 @@ The diff should look like this:
 +const spacing = theme.spacing(1);
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v4.0.0/theme-spacing-api <path>
@@ -3595,7 +3722,7 @@ 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 -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v4.0.0/optimal-imports <path>
@@ -3613,7 +3740,7 @@ Converts all `@material-ui/core` submodule imports to the root module:
 +import { List, withStyles } from '@material-ui/core';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v4.0.0/top-level-imports <path>
@@ -3634,7 +3761,7 @@ The diff should look like this:
 +import MenuItem from '@material-ui/core/MenuItem';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v1.0.0/import-path <path>
@@ -3661,7 +3788,7 @@ The diff should look like this:
 +const teal500 = teal['500'];
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v1.0.0/color-imports <path>
@@ -3669,7 +3796,7 @@ npx @mui/codemod@latest v1.0.0/color-imports <path>
 
 **additional options**
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
@@ -3687,7 +3814,7 @@ The diff should look like this:
 +import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v1.0.0/svg-icon-imports <path>
@@ -3705,7 +3832,7 @@ The diff should look like this:
 +<MenuItem>{"Profile" + "!"}</MenuItem>
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v1.0.0/menu-item-primary-text <path>
@@ -3729,7 +3856,7 @@ The diff should look like this:
 +import RaisedButton from 'material-ui/RaisedButton';
 ```
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npx @mui/codemod@latest v0.15.0/import-path <path>

package/{node/deprecations → deprecations}/all/deprecations-all.js

@@ -42,6 +42,11 @@ var _tablePaginationProps = _interopRequireDefault(require("../table-pagination-
 var _cardHeaderProps = _interopRequireDefault(require("../card-header-props"));
 var _popoverProps = _interopRequireDefault(require("../popover-props"));
 var _snackbarProps = _interopRequireDefault(require("../snackbar-props"));
+var _sliderClasses = _interopRequireDefault(require("../slider-classes"));
+var _tabsProps = _interopRequireDefault(require("../tabs-props"));
+var _tabsClasses = _interopRequireDefault(require("../tabs-classes"));
+var _drawerProps = _interopRequireDefault(require("../drawer-props"));
+var _mobileStepperProps = _interopRequireDefault(require("../mobile-stepper-props"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -84,5 +89,10 @@ function deprecationsAll(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, _sliderClasses.default)(file, api, options);
+  file.source = (0, _tabsProps.default)(file, api, options);
+  file.source = (0, _tabsClasses.default)(file, api, options);
+  file.source = (0, _drawerProps.default)(file, api, options);
+  file.source = (0, _mobileStepperProps.default)(file, api, options);
   return file.source;
 }

package/{node/deprecations → deprecations}/all/postcss.config.js

@@ -42,6 +42,9 @@ const {
 const {
   plugin: selectClassesPlugin
 } = require('../select-classes/postcss-plugin');
+const {
+  plugin: sliderClassesPlugin
+} = require('../slider-classes/postcss-plugin');
 module.exports = {
-  plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, linearProgressClassesPlugin, drawerClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin, selectClassesPlugin]
+  plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, linearProgressClassesPlugin, drawerClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin, selectClassesPlugin, sliderClassesPlugin]
 };

package/deprecations/drawer-props/drawer-props.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _movePropIntoSlots = _interopRequireDefault(require("../utils/movePropIntoSlots"));
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
+/**
+ * @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;
+  (0, _movePropIntoSlots.default)(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'BackdropComponent',
+    slotName: 'backdrop'
+  });
+  (0, _movePropIntoSlots.default)(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'BackdropComponent',
+    slotName: 'backdrop'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'BackdropProps',
+    slotName: 'backdrop'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'BackdropProps',
+    slotName: 'backdrop'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'PaperProps',
+    slotName: 'paper'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'PaperProps',
+    slotName: 'paper'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Drawer',
+    propName: 'SlideProps',
+    slotName: 'transition'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'SwipeableDrawer',
+    propName: 'SlideProps',
+    slotName: 'transition'
+  });
+  return root.toSource(printOptions);
+}

package/deprecations/drawer-props/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 _drawerProps.default;
+  }
+});
+var _drawerProps = _interopRequireDefault(require("./drawer-props"));

package/deprecations/drawer-props/test-cases/actual.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
+var _SwipeableDrawer = _interopRequireDefault(require("@mui/material/SwipeableDrawer"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+  BackdropComponent: Backdrop,
+  BackdropProps: {
+    transitionDuration: 300
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeableDrawer.default, {
+  BackdropComponent: Backdrop,
+  BackdropProps: {
+    transitionDuration: 300
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+  PaperProps: {
+    elevation: 20
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeableDrawer.default, {
+  PaperProps: {
+    elevation: 20
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+  SlideProps: {
+    direction: 'right'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeableDrawer.default, {
+  SlideProps: {
+    direction: 'right'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Drawer, {
+  BackdropComponent: Backdrop,
+  BackdropProps: {
+    transitionDuration: 300
+  },
+  PaperProps: {
+    elevation: 20
+  },
+  SlideProps: {
+    direction: 'right'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SwipeableDrawer, {
+  BackdropComponent: Backdrop,
+  BackdropProps: {
+    transitionDuration: 300
+  },
+  PaperProps: {
+    elevation: 20
+  },
+  SlideProps: {
+    direction: 'right'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomDrawer, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});