@mui/codemod 6.4.4 → 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)
@@ -1625,6 +1626,27 @@ npx @mui/codemod@latest deprecations/select-classes <path>
 npx @mui/codemod@latest deprecations/slider-props <path>
 ```
 
+#### `snackbar-props`
+
+```diff
+ <Snackbar
+-    ClickAwayListenerProps={CustomClickAwayListenerProps}
+-    ContentProps={CustomContentProps}
+-    TransitionComponent={CustomTransition}
+-    TransitionProps={CustomTransitionProps}
++    slots={{ transition: CustomTransition }}
++    slotProps={{
++        clickAwayListener: CustomClickAwayListenerProps,
++        content: CustomContentProps,
++        transition: CustomTransitionProps
++    }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/snackbar-props <path>
+```
+
 #### `slider-classes`
 
 JS transforms:
@@ -1995,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`
@@ -2505,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>
@@ -2524,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>
@@ -2543,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>
@@ -2578,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>
@@ -2602,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>
@@ -2621,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>
@@ -2657,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>
@@ -2674,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>
@@ -2691,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>
@@ -2708,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>
@@ -2727,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>
@@ -2746,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
@@ -2858,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>
@@ -2875,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>
@@ -3159,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>
@@ -3203,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>
@@ -3332,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>
@@ -3406,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>
@@ -3439,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>
@@ -3491,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>
@@ -3521,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>
@@ -3632,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>
@@ -3659,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>
@@ -3677,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>
@@ -3698,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>
@@ -3725,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>
@@ -3733,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'
@@ -3751,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>
@@ -3769,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>
@@ -3793,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

@@ -40,7 +40,12 @@ var _toggleButtonGroupClasses = _interopRequireDefault(require("../toggle-button
 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 _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
@@ -82,7 +87,12 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _tooltipProps.default)(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, _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/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
+  }
+});

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

@@ -0,0 +1,97 @@
+"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, {
+  slots: {
+    backdrop: Backdrop
+  },
+  slotProps: {
+    backdrop: {
+      transitionDuration: 300
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeableDrawer.default, {
+  slots: {
+    backdrop: Backdrop
+  },
+  slotProps: {
+    backdrop: {
+      transitionDuration: 300
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+  slotProps: {
+    paper: {
+      elevation: 20
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeableDrawer.default, {
+  slotProps: {
+    paper: {
+      elevation: 20
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+  slotProps: {
+    transition: {
+      direction: 'right'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SwipeableDrawer.default, {
+  slotProps: {
+    transition: {
+      direction: 'right'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Drawer, {
+  slots: {
+    backdrop: Backdrop
+  },
+  slotProps: {
+    backdrop: {
+      transitionDuration: 300
+    },
+    paper: {
+      elevation: 20
+    },
+    transition: {
+      direction: 'right'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SwipeableDrawer, {
+  slots: {
+    backdrop: Backdrop
+  },
+  slotProps: {
+    backdrop: {
+      transitionDuration: 300
+    },
+    paper: {
+      elevation: 20
+    },
+    transition: {
+      direction: 'right'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomDrawer, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        transitionDuration: 300
+      }
+    }
+  }
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        transitionDuration: 300
+      }
+    }
+  }
+});
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      PaperProps: {
+        elevation: 20
+      }
+    }
+  }
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      PaperProps: {
+        elevation: 20
+      }
+    }
+  }
+});
+fn({
+  MuiDrawer: {
+    defaultProps: {
+      SlideProps: {
+        direction: 'right'
+      }
+    }
+  }
+});
+fn({
+  MuiSwipeableDrawer: {
+    defaultProps: {
+      SlideProps: {
+        direction: 'right'
+      }
+    }
+  }
+});