@mui/codemod 5.15.12 → 5.15.14

package/README.md

@@ -1632,14 +1632,14 @@ npx @mui/codemod@latest v5.0.0/jss-to-tss-react <path>
 The following scenarios are not currently handled by this codemod and will be marked with a
 "TODO jss-to-tss-react codemod" comment:
 
-- If the hook returned by `makeStyles` (e.g. `useStyles`) is exported and used in another file,
+- If the hook returned by `makeStyles` (for example `useStyles`) is exported and used in another file,
   the usages in other files will not be converted.
 - Arrow functions as the value for a CSS prop will not be converted. Arrow functions **are**
   supported at the rule level, though with some caveats listed below.
 - In order for arrow functions at the rule level to be converted, the parameter must use object
-  destructuring (e.g. `root: ({color, padding}) => (...)`). If the parameter is not destructured
-  (e.g. `root: (props) => (...)`), it will not be converted.
-- If an arrow function at the rule level contains a code block (i.e. contains an explicit `return`
+  destructuring (for example `root: ({color, padding}) => (...)`). If the parameter is not destructured
+  (for example `root: (props) => (...)`), it will not be converted.
+- If an arrow function at the rule level contains a code block (that is contains an explicit `return`
   statement) rather than just an object expression, it will not be converted.
 
 You can find more details about migrating from JSS to tss-react in [the migration guide](https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react).

package/node/deprecations/alert-props/test-cases/actual.js

@@ -40,4 +40,21 @@ var _jsxRuntime = require("react/jsx-runtime");
   componentsProps: {
     closeButton: componentsButtonProps
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  components: {
+    CloseButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: slotsButtonProps
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps,
+    closeIcon: componentsIconProps
+  }
 });

package/node/deprecations/alert-props/test-cases/expected.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
@@ -28,6 +29,16 @@ var _jsxRuntime = require("react/jsx-runtime");
   },
   slotProps: {
     closeIcon: slotsIconProps,
-    closeButton: slotsButtonProps
+    closeButton: (0, _extends2.default)({}, componentsButtonProps, slotsButtonProps)
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  slotProps: {
+    closeButton: (0, _extends2.default)({}, componentsButtonProps, slotsButtonProps),
+    closeIcon: (0, _extends2.default)({}, componentsIconProps, slotsIconProps)
   }
 });

package/node/deprecations/alert-props/test-cases/theme.actual.js

@@ -49,4 +49,25 @@ fn({
       }
     }
   }
+});
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: {
+        CloseButton: ComponentsButton
+      },
+      slots: {
+        closeIcon: SlotsIcon,
+        closeButton: SlotsButton
+      },
+      componentsProps: {
+        closeButton: componentsButtonProps,
+        closeIcon: componentsIconProps
+      },
+      slotProps: {
+        closeIcon: slotsIconProps,
+        closeButton: slotsButtonProps
+      }
+    }
+  }
 });

package/node/deprecations/alert-props/test-cases/theme.expected.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 fn({
   MuiAlert: {
     defaultProps: {
@@ -34,9 +36,23 @@ fn({
         closeIcon: SlotsIcon
       },
       slotProps: {
-        closeButton: slotsButtonProps,
+        closeButton: (0, _extends2.default)({}, componentsButtonProps, slotsButtonProps),
         closeIcon: slotsIconProps
       }
     }
   }
+});
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon
+      },
+      slotProps: {
+        closeButton: (0, _extends2.default)({}, componentsButtonProps, slotsButtonProps),
+        closeIcon: (0, _extends2.default)({}, componentsIconProps, slotsIconProps)
+      }
+    }
+  }
 });

package/node/deprecations/slider-props/test-cases/actual.js

@@ -40,4 +40,21 @@ var _jsxRuntime = require("react/jsx-runtime");
   componentsProps: {
     track: componentsTrackProps
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    rail: SlotsRail,
+    track: SlotsTrack
+  },
+  components: {
+    Track: ComponentsTrack
+  },
+  slotProps: {
+    rail: slotsRailProps,
+    track: slotsTrackProps
+  },
+  componentsProps: {
+    track: componentsTrackProps,
+    rail: componentsRailProps
+  }
 });

package/node/deprecations/slider-props/test-cases/expected.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
@@ -28,6 +29,16 @@ var _jsxRuntime = require("react/jsx-runtime");
   },
   slotProps: {
     rail: slotsRailProps,
-    track: slotsTrackProps
+    track: (0, _extends2.default)({}, componentsTrackProps, slotsTrackProps)
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {
+  slots: {
+    rail: SlotsRail,
+    track: SlotsTrack
+  },
+  slotProps: {
+    track: (0, _extends2.default)({}, componentsTrackProps, slotsTrackProps),
+    rail: (0, _extends2.default)({}, componentsRailProps, slotsRailProps)
   }
 });

package/node/deprecations/slider-props/test-cases/theme.actual.js

@@ -49,4 +49,25 @@ fn({
       }
     }
   }
+});
+fn({
+  MuiSlider: {
+    defaultProps: {
+      components: {
+        Track: ComponentsTrack
+      },
+      slots: {
+        rail: SlotsRail,
+        track: SlotsTrack
+      },
+      componentsProps: {
+        track: componentsTrackProps,
+        rail: componentsRailProps
+      },
+      slotProps: {
+        rail: slotsRailProps,
+        track: slotsTrackProps
+      }
+    }
+  }
 });

package/node/deprecations/slider-props/test-cases/theme.expected.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 fn({
   MuiSlider: {
     defaultProps: {
@@ -34,9 +36,23 @@ fn({
         rail: SlotsRail
       },
       slotProps: {
-        track: slotsTrackProps,
+        track: (0, _extends2.default)({}, componentsTrackProps, slotsTrackProps),
         rail: slotsRailProps
       }
     }
   }
+});
+fn({
+  MuiSlider: {
+    defaultProps: {
+      slots: {
+        track: SlotsTrack,
+        rail: SlotsRail
+      },
+      slotProps: {
+        track: (0, _extends2.default)({}, componentsTrackProps, slotsTrackProps),
+        rail: (0, _extends2.default)({}, componentsRailProps, slotsRailProps)
+      }
+    }
+  }
 });

package/node/deprecations/utils/replaceComponentsWithSlots.js

@@ -76,6 +76,16 @@ function replaceJsxComponentsPropsProp(j, element) {
               key: prop.key.name,
               expression: prop.value
             });
+          } else {
+            attr.value.expression.properties = attr.value.expression.properties.filter(p => {
+              var _p$key;
+              return (p == null || (_p$key = p.key) == null ? void 0 : _p$key.name) !== prop.key.name;
+            });
+            (0, _assignObject.default)(j, {
+              target: attr,
+              key: prop.key.name,
+              expression: j.objectExpression([j.spreadElement(prop.value), j.spreadElement(slotProps[prop.key.name])])
+            });
           }
         });
       }
@@ -137,7 +147,7 @@ function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
     const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slotProps');
     const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
       return (0, _extends2.default)({}, acc, {
-        [prop.key.name]: prop.value
+        [prop.key.name]: components[prop.key.name] ? j.objectExpression([j.spreadElement(components[prop.key.name]), j.spreadElement(prop.value)]) : prop.value
       });
     }, {}) : {};
     const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {

package/node/v5.0.0/jss-to-tss-react.js

@@ -102,7 +102,7 @@ function transformStylesExpression(j, comments, stylesExpression, nestedKeys, se
               if (prop.value.body.type === 'ObjectExpression') {
                 let example = '';
                 if (prop.value.params[0].type === 'Identifier') {
-                  example = ' (e.g. `(props) => ({...})` instead of `({color}) => ({...})`)';
+                  example = ' (for example `(props) => ({...})` instead of `({color}) => ({...})`)';
                 }
                 extraComment = ` Arrow function has parameter type of ${prop.value.params[0].type} instead of ObjectPattern${example}.`;
               } else {
@@ -303,7 +303,7 @@ function transformer(file, api, options) {
       });
     });
     /**
-     * Convert classes assignment syntax in calls to the hook (e.g. useStyles) and
+     * Convert classes assignment syntax in calls to the hook (for example useStyles) and
      * convert usages of clsx or classnames to cx.
      */
     styleHooks.forEach(hookName => {

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

@@ -38,7 +38,7 @@ const useExportedStyles = exports.useExportedStyles = (0, _mui.makeStyles)()({
 });
 
 // TODO jss-to-tss-react codemod: Unable to handle style definition reliably. Unsupported arrow function syntax.
-// Arrow function has parameter type of Identifier instead of ObjectPattern (e.g. `(props) => ({...})` instead of `({color}) => ({...})`).
+// Arrow function has parameter type of Identifier instead of ObjectPattern (for example `(props) => ({...})` instead of `({color}) => ({...})`).
 const useStyles2 = (0, _mui.makeStyles)()({
   test2: props => ({
     backgroundColor: "blue",

package/package.json

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