@mui/codemod 5.10.10 → 5.10.12

package/README.md

@@ -169,10 +169,10 @@ You can find more details about this breaking change in [the migration guide](ht
 Renames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.
 
 ```diff
-<Autocomplete
-- getOptionSelected={(option, value) => option.title === value.title}
-+ isOptionEqualToValue={(option, value) => option.title === value.title}
-/>
+ <Autocomplete
+-  getOptionSelected={(option, value) => option.title === value.title}
++  isOptionEqualToValue={(option, value) => option.title === value.title}
+ />
 ```
 
 <!-- #default-branch-switch -->
@@ -211,22 +211,22 @@ Renames the badge's props.
 -<Badge overlap="rectangle">
 +<Badge overlap="circular">
 +<Badge overlap="rectangular">
-<Badge classes={{
-- anchorOriginTopRightRectangle: 'className',
-- anchorOriginBottomRightRectangle: 'className',
-- anchorOriginTopLeftRectangle: 'className',
-- anchorOriginBottomLeftRectangle: 'className',
-- anchorOriginTopRightCircle: 'className',
-- anchorOriginBottomRightCircle: 'className',
-- anchorOriginTopLeftCircle: 'className',
-+ anchorOriginTopRightRectangular: 'className',
-+ anchorOriginBottomRightRectangular: 'className',
-+ anchorOriginTopLeftRectangular: 'className',
-+ anchorOriginBottomLeftRectangular: 'className',
-+ anchorOriginTopRightCircular: 'className',
-+ anchorOriginBottomRightCircular: 'className',
-+ anchorOriginTopLeftCircular: 'className',
-}}>
+ <Badge classes={{
+-  anchorOriginTopRightRectangle: 'className',
+-  anchorOriginBottomRightRectangle: 'className',
+-  anchorOriginTopLeftRectangle: 'className',
+-  anchorOriginBottomLeftRectangle: 'className',
+-  anchorOriginTopRightCircle: 'className',
+-  anchorOriginBottomRightCircle: 'className',
+-  anchorOriginTopLeftCircle: 'className',
++  anchorOriginTopRightRectangular: 'className',
++  anchorOriginBottomRightRectangular: 'className',
++  anchorOriginTopLeftRectangular: 'className',
++  anchorOriginBottomLeftRectangular: 'className',
++  anchorOriginTopRightCircular: 'className',
++  anchorOriginBottomRightCircular: 'className',
++  anchorOriginTopLeftCircular: 'className',
+ }}>
 ```
 
 <!-- #default-branch-switch -->
@@ -237,6 +237,30 @@ npx @mui/codemod v5.0.0/badge-overlap-value <path>
 
 You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#badge).
 
+#### `base-rename-components-to-slots`
+
+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.
+
+```diff
+ <BadgeUnstyled
+-  components={{ Root, Badge: CustomBadge }}
++  slots={{ root: Root, badge: CustomBadge }}
+-  componentsProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
++  slotProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
+ />;
+```
+
+<!-- #default-branch-switch -->
+
+```sh
+npx @mui/codemod v5.0.0/base-rename-components-to-slots <path>
+```
+
+The associated breaking change was done in [#34693](https://github.com/mui/material-ui/pull/34693).
+
 #### `box-borderradius-values`
 
 Updates the Box API from separate system props to `sx`.
@@ -440,10 +464,10 @@ You can find more details about this breaking change in [the migration guide](ht
 Adds `prepend: true` to Emotion `createCache`
 
 ```diff
-const cache = emotionCreateCache({
-  key: 'css',
-+ prepend: true,
-});
+ const cache = emotionCreateCache({
+   key: 'css',
++  prepend: true,
+ });
 ```
 
 ```sh
@@ -542,7 +566,7 @@ You can find more details about this breaking change in [the migration guide](ht
 Replace JSS styling with `makeStyles` or `withStyles` to `styled` API.
 
 ```diff
-import Typography from '@material-ui/core/Typography';
+ import Typography from '@material-ui/core/Typography';
 -import makeStyles from '@material-ui/styles/makeStyles';
 +import { styled } from '@material-ui/core/styles';
 
@@ -583,17 +607,17 @@ import Typography from '@material-ui/core/Typography';
 +  },
 +}))
 
-export const MyCard = () => {
-  const classes = useStyles();
-  return (
--   <div className={classes.root}>
-+   <Root className={classes.root}>
-      <Typography className={classes.content}>...</Typography>
-      <Button className={classes.cta}>Go</Button>
-+   </Root>
--   </div>
-  )
-}
+ export const MyCard = () => {
+   const classes = useStyles();
+   return (
+-    <div className={classes.root}>
++    <Root className={classes.root}>
+       <Typography className={classes.content}>...</Typography>
+       <Button className={classes.cta}>Go</Button>
+-    </div>
++    </Root>
+   )
+ }
 ```
 
 ```sh
@@ -661,11 +685,11 @@ Migrate JSS styling with `makeStyles` or `withStyles` to the corresponding `tss-
          The Background take the primary theme color when the mouse hovers the parent.
          I am smaller than the other child.
        </div>
-    </div>
-  );
-}
+     </div>
+   );
+ }
 
-export default App;
+ export default App;
 ```
 
 ```sh
@@ -731,7 +755,7 @@ Moves JSS imports to `@material-ui/styles`
 +import withStyles from '@material-ui/styles/withStyles';
 +import withTheme from '@material-ui/styles/withTheme';
 +import getStylesCreator from '@material-ui/styles/getStylesCreator';
-import mergeClasses from '@material-ui/styles/mergeClasses';
+ import mergeClasses from '@material-ui/styles/mergeClasses';
 ```
 
 ```sh
@@ -758,10 +782,10 @@ You can find more details about this breaking change in [the migration guide](ht
 Removes `disableBackdropClick` and `onEscapeKeyDown` from `<Modal>`
 
 ```diff
-<Modal
-- disableBackdropClick
-- onEscapeKeyDown={handleEscapeKeyDown}
-/>
+ <Modal
+-  disableBackdropClick
+-  onEscapeKeyDown={handleEscapeKeyDown}
+ />
 ```
 
 ```sh
@@ -1100,7 +1124,7 @@ npx @mui/codemod v5.0.0/use-autocomplete <path>
 Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to replace the `onEnter*` and `onExit*` props.
 
 ```diff
-<Dialog
+ <Dialog
 -  onEnter={onEnter}
 -  onEntered={onEntered}
 -  onEntering={onEntering}
@@ -1115,7 +1139,7 @@ Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to
 +    onExited,
 +    onExiting,
 +  }}
-/>
+ />
 ```
 
 <!-- #default-branch-switch -->
@@ -1159,9 +1183,9 @@ npx @mui/codemod v5.0.0/variant-prop <path>
 Removes imported `withMobileDialog`, and inserts hardcoded version to prevent application crash.
 
 ```diff
-- import withMobileDialog from '@material-ui/core/withMobileDialog';
-+ // FIXME checkout https://mui.com/material-ui/migration/v5-component-changes/#dialog
-+ const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="lg" fullScreen={false} />;
+-import withMobileDialog from '@material-ui/core/withMobileDialog';
++// FIXME checkout https://mui.com/material-ui/migration/v5-component-changes/#dialog
++const withMobileDialog = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="lg" fullScreen={false} />;
 ```
 
 ```sh
@@ -1175,9 +1199,9 @@ You can find more details about this breaking change in [the migration guide](ht
 Removes `withWidth` import, and inserts hardcoded version to prevent application crash.
 
 ```diff
-- import withWidth from '@material-ui/core/withWidth';
-+ // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-+ const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+-import withWidth from '@material-ui/core/withWidth';
++// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
++const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
 ```
 
 ```sh
@@ -1228,7 +1252,7 @@ Replace every occurrence of `material-ui` related package with the new package n
 **Dependencies**
 
 ```diff
-// package.json
+  // package.json
 -"@material-ui/core": "next",
 -"@material-ui/icons": "next",
 -"@material-ui/lab": "next",
@@ -1271,7 +1295,7 @@ This codemod tries to perform a basic expression simplification which can be imp
 -const spacing = theme.spacing.unit / 5;
 +const spacing = theme.spacing(0.2);
 
-// Limitation
+ // Limitation
 -const spacing = theme.spacing.unit * 5 * 5;
 +const spacing = theme.spacing(5) * 5;
 ```
@@ -1411,11 +1435,11 @@ MUI v0.15.0 is reorganizing the folder distribution of the project.
 The diff should look like this:
 
 ```diff
-// From the source
+ // From the source
 -import FlatButton from 'material-ui/src/flat-button';
 +import FlatButton from 'material-ui/src/FlatButton';
 
-// From npm
+ // From npm
 -import RaisedButton from 'material-ui/lib/raised-button';
 +import RaisedButton from 'material-ui/RaisedButton';
 ```

package/node/v1.0.0/color-imports.js

@@ -11,7 +11,7 @@ const commonColors = ['black', 'white', 'transparent', 'fullBlack', 'darkBlack',
  */
 
 function colorAccent(colorIdentifier) {
-  const [, palette, hue] = colorIdentifier.match(/([A-za-z]+?)(A?\d+)?$/);
+  const [, palette, hue] = colorIdentifier.match(/([A-Za-z]+?)(A?\d+)?$/);
   return {
     palette,
     hue

package/node/v5.0.0/base-rename-components-to-slots.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+
+function transformComponentsProp(attributeNode) {
+  attributeNode.name.name = 'slots';
+  const valueExpression = attributeNode.value.expression;
+
+  if ((valueExpression == null ? void 0 : valueExpression.type) !== 'ObjectExpression') {
+    return;
+  }
+
+  valueExpression.properties.forEach(property => {
+    property.key.name = property.key.name[0].toLowerCase() + property.key.name.slice(1);
+
+    if (property.shorthand) {
+      property.shorthand = false;
+    }
+  });
+}
+
+function transformComponentsPropsProp(attributeNode) {
+  attributeNode.name.name = 'slotProps';
+}
+/**
+ * @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;
+  const transformed = root.findJSXElements().forEach(path => {
+    // Process only unstyled components
+    if (!path.node.openingElement.name.name.endsWith('Unstyled')) {
+      return;
+    }
+
+    path.node.openingElement.attributes.forEach(node => {
+      if (node.type !== 'JSXAttribute') {
+        return;
+      }
+
+      switch (node.name.name) {
+        case 'components':
+          transformComponentsProp(node);
+          break;
+
+        case 'componentsProps':
+          transformComponentsPropsProp(node);
+          break;
+
+        default:
+      }
+    });
+  });
+  return transformed.toSource(printOptions);
+}

package/node/v5.0.0/base-rename-components-to-slots.test/actual.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*#__PURE__*/
+(0, _jsxRuntime.jsx)(BadgeUnstyled, {
+  components: {
+    Root,
+    Badge: CustomBadge
+  },
+  componentsProps: {
+    root: {
+      className: 'root'
+    },
+    badge: {
+      'data-testid': 'badge'
+    }
+  }
+});
+
+/*#__PURE__*/
+(0, _jsxRuntime.jsx)(InputUnstyled, {
+  components: {
+    Input: CustomInput,
+    Root: CustomRoot
+  },
+  componentsProps: {
+    root: {
+      className: 'root'
+    },
+    input: {
+      className: 'input'
+    }
+  }
+});
+
+/*#__PURE__*/
+(0, _jsxRuntime.jsx)(Badge, {
+  components: {
+    Root,
+    Badge: CustomBadge
+  },
+  componentsProps: {
+    root: {
+      className: 'root'
+    },
+    badge: {
+      'data-testid': 'badge'
+    }
+  }
+});

package/node/v5.0.0/base-rename-components-to-slots.test/expected.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*#__PURE__*/
+(0, _jsxRuntime.jsx)(BadgeUnstyled, {
+  slots: {
+    root: Root,
+    badge: CustomBadge
+  },
+  slotProps: {
+    root: {
+      className: 'root'
+    },
+    badge: {
+      'data-testid': 'badge'
+    }
+  }
+});
+
+/*#__PURE__*/
+(0, _jsxRuntime.jsx)(InputUnstyled, {
+  slots: {
+    input: CustomInput,
+    root: CustomRoot
+  },
+  slotProps: {
+    root: {
+      className: 'root'
+    },
+    input: {
+      className: 'input'
+    }
+  }
+});
+
+/*#__PURE__*/
+(0, _jsxRuntime.jsx)(Badge, {
+  components: {
+    Root,
+    Badge: CustomBadge
+  },
+  componentsProps: {
+    root: {
+      className: 'root'
+    },
+    badge: {
+      'data-testid': 'badge'
+    }
+  }
+});

package/node/v5.0.0/jss-to-styled.js

@@ -274,7 +274,7 @@ function transformer(file, api, options) {
    * @param {import('jscodeshift').ObjectExpression | import('jscodeshift').ArrowFunctionExpression | import('jscodeshift').FunctionDeclaration} prevStyleArg
    */
 
-  function convertToStyledArg(functionExpression, rootKeys = [], prevStyleArg) {
+  function convertToStyledArg(functionExpression, rootKeys, prevStyleArg) {
     const objectExpression = getObjectExpression(functionExpression);
 
     if (objectExpression) {

package/node/v5.0.0/jss-to-styled.test/seventh.actual.js

@@ -84,10 +84,6 @@ function Iframe(props) {
         setIframeHeight(scrollHeight);
       }
 
-      if (event.data.redirect) {
-        window.location = event.data.redirect;
-      }
-
       if (event.data.pathname) {
         onPathnameChange({
           pathname: event.data.pathname,

package/node/v5.0.0/jss-to-styled.test/seventh.expected.js

@@ -87,10 +87,6 @@ function Iframe(props) {
         setIframeHeight(scrollHeight);
       }
 
-      if (event.data.redirect) {
-        window.location = event.data.redirect;
-      }
-
       if (event.data.pathname) {
         onPathnameChange({
           pathname: event.data.pathname,

package/node/v5.0.0/jss-to-tss-react.test/actual-todo-comments.js

@@ -9,7 +9,7 @@ exports.useExportedStyles = exports.default = void 0;
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _core = require("@material-ui/core");
 
@@ -17,6 +17,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _InnerComponent;
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const useStyles = (0, _core.makeStyles)(() => ({
   test: {
     backgroundColor: "purple",

package/node/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useExportedStyles = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _mui = require("tss-react/mui");
 
@@ -15,6 +13,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _InnerComponent;
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 // TODO jss-to-tss-react codemod: Unable to handle style definition reliably. ArrowFunctionExpression in CSS prop.
 const useStyles = (0, _mui.makeStyles)()((_theme, _params, classes) => ({
   test: {

package/package.json

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