@mui/codemod 6.0.0-alpha.4 → 6.0.0-alpha.6

package/README.md

@@ -858,6 +858,29 @@ npx @mui/codemod@next deprecations/chip-classes <path>
 npx @mui/codemod@next deprecations/divider-props <path>
 ```
 
+#### `form-control-label-props`
+
+```diff
+ <FormControlLabel
+-  componentsProps={{ typography: typographyProps }}
++  slotProps={{ typography: typographyProps }}
+ />
+```
+
+```diff
+ MuiFormControlLabel: {
+   defaultProps: {
+-  componentsProps={{ typography: typographyProps }}
++  slotProps={{ typography: typographyProps }}
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/form-control-label-props <path>
+
+```
+
 #### `pagination-item-classes`
 
 JS transforms:
@@ -922,6 +945,28 @@ CSS transforms:
 npx @mui/codemod@next deprecations/pagination-item-classes <path>
 ```
 
+#### `pagination-item-props`
+
+```diff
+ <PaginationItem
+-  components={{ first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }}
++  slots={{ first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }}
+ />
+```
+
+```diff
+ MuiPaginationItem: {
+   defaultProps: {
+-    components: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }
++    slots: { first: FirstIcon, last: LastIcon, next: NextIcon, previous: PreviousIcons }
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/pagination-item-props <path>
+```
+
 #### `slider-props`
 
 ```diff
@@ -1054,8 +1099,74 @@ npx @mui/codemod@next deprecations/step-connector-classes <path>
 
 ### v6.0.0
 
+#### `theme-v6`
+
+```bash
+npx @mui/codemod@next v6.0.0/theme-v6 <path>
+```
+
+Update the theme creation from `@mui/system@v5` to be compatible with `@pigment-css/react`.
+
+- replace palette mode conditional with `theme.applyStyles()`
+- replace `ownerState` with `variants`
+- move theme variants to the root slot
+
+```diff
+  createTheme({
+    components: {
+      MuiButton: {
+-        variants: [
+-          {
+-            props: { color: 'primary' },
+-            style: {
+-              color: 'red',
+-            },
+-          },
+-        ],
+        styleOverrides: {
+-          root: ({ theme, ownerState }) => ({
++          root: ({ theme }) => ({
+            ...ownerState.variant === 'contained' && {
+              backgroundColor: alpha(theme.palette.primary.main, 0.8),
+              ...theme.palette.mode === 'dark' && {
+                backgroundColor: alpha(theme.palette.primary.light, 0.9),
+              }
+            },
++           variants: [
++             {
++               prop: { variant: 'contained' },
++               style: {
++                 backgroundColor: alpha(theme.palette.primary.main, 0.8),
++               },
++             },
++             {
++               prop: { variant: 'contained' },
++               style: {
++                 ...theme.applyStyles('dark', {
++                   backgroundColor: alpha(theme.palette.primary.light, 0.9),
++                 })
++               },
++             },
++             {
++               prop: { color: 'primary' },
++               style: {
++                 color: 'red',
++               },
++             },
++           ],
+          })
+        }
+      }
+    }
+  })
+```
+
 #### `styled-v6`
 
+```bash
+npx @mui/codemod@next v6.0.0/styled-v6 <path>
+```
+
 Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`.
 
 This codemod transforms the styles based on props to `variants` by looking for `styled` calls:

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = deprecationsAll;
 var _accordionProps = _interopRequireDefault(require("../accordion-props"));
+var _formControlLabelProps = _interopRequireDefault(require("../form-control-label-props"));
 var _avatarProps = _interopRequireDefault(require("../avatar-props"));
 var _dividerProps = _interopRequireDefault(require("../divider-props"));
 var _accordionSummaryClasses = _interopRequireDefault(require("../accordion-summary-classes"));
@@ -18,12 +19,14 @@ var _toggleButtonGroupClasses = _interopRequireDefault(require("../toggle-button
 var _stepLabelProps = _interopRequireDefault(require("../step-label-props"));
 var _backdropProps = _interopRequireDefault(require("../backdrop-props"));
 var _stepConnectorClasses = _interopRequireDefault(require("../step-connector-classes"));
+var _speedDialProps = _interopRequireDefault(require("../speed-dial-props"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
 function deprecationsAll(file, api, options) {
   file.source = (0, _accordionProps.default)(file, api, options);
+  file.source = (0, _formControlLabelProps.default)(file, api, options);
   file.source = (0, _avatarProps.default)(file, api, options);
   file.source = (0, _dividerProps.default)(file, api, options);
   file.source = (0, _accordionSummaryClasses.default)(file, api, options);
@@ -36,5 +39,6 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _stepLabelProps.default)(file, api, options);
   file.source = (0, _backdropProps.default)(file, api, options);
   file.source = (0, _stepConnectorClasses.default)(file, api, options);
+  file.source = (0, _speedDialProps.default)(file, api, options);
   return file.source;
 }

package/node/deprecations/form-control-label-props/form-control-label-props.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _replaceComponentsWithSlots = _interopRequireDefault(require("../utils/replaceComponentsWithSlots"));
+/**
+ * @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, _replaceComponentsWithSlots.default)(j, {
+    root,
+    componentName: 'FormControlLabel'
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/form-control-label-props/index.js

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

package/node/deprecations/form-control-label-props/test-cases/actual.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+  componentsProps: {
+    typography: componentsTypographyProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+  slots: {
+    typography: SlotsTypography
+  },
+  slotProps: {
+    typography: slotsTypographyProps
+  },
+  componentsProps: {
+    typography: componentsTypographyProps
+  }
+});

package/node/deprecations/form-control-label-props/test-cases/expected.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+  slotProps: {
+    typography: componentsTypographyProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+  slots: {
+    typography: SlotsTypography
+  },
+  slotProps: {
+    typography: (0, _extends2.default)({}, componentsTypographyProps, slotsTypographyProps)
+  }
+});

package/node/deprecations/form-control-label-props/test-cases/theme.actual.js

@@ -0,0 +1,23 @@
+"use strict";
+
+fn({
+  MuiFormControlLabel: {
+    defaultProps: {
+      componentsProps: {
+        typography: componentsTypographyProps
+      }
+    }
+  }
+});
+fn({
+  MuiFormControlLabel: {
+    defaultProps: {
+      componentsProps: {
+        typography: componentsTypographyProps
+      },
+      slotProps: {
+        typography: slotsTypographyProps
+      }
+    }
+  }
+});

package/node/deprecations/form-control-label-props/test-cases/theme.expected.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+fn({
+  MuiFormControlLabel: {
+    defaultProps: {
+      slotProps: {
+        typography: componentsTypographyProps
+      }
+    }
+  }
+});
+fn({
+  MuiFormControlLabel: {
+    defaultProps: {
+      slotProps: {
+        typography: (0, _extends2.default)({}, componentsTypographyProps, slotsTypographyProps)
+      }
+    }
+  }
+});

package/node/deprecations/pagination-item-props/index.js

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

package/node/deprecations/pagination-item-props/pagination-item-props.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _replaceComponentsWithSlots = _interopRequireDefault(require("../utils/replaceComponentsWithSlots"));
+/**
+ * @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, _replaceComponentsWithSlots.default)(j, {
+    root,
+    componentName: 'PaginationItem'
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/pagination-item-props/test-cases/actual.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _PaginationItem = _interopRequireDefault(require("@mui/material/PaginationItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, {
+  components: {
+    first: first,
+    last: last,
+    next: next,
+    previous: previous
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, {
+  slots: {
+    first: slotFirst,
+    last: slotLast,
+    next: slotNext,
+    previous: slotPrevious
+  },
+  components: {
+    first: componentFirst,
+    last: componentLast,
+    next: componentNext,
+    previous: componentPrevious
+  }
+});

package/node/deprecations/pagination-item-props/test-cases/expected.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _PaginationItem = _interopRequireDefault(require("@mui/material/PaginationItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, {
+  slots: {
+    first: first,
+    last: last,
+    next: next,
+    previous: previous
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.default, {
+  slots: {
+    first: slotFirst,
+    last: slotLast,
+    next: slotNext,
+    previous: slotPrevious
+  }
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+
+fn({
+  MuiPaginationItem: {
+    defaultProps: {
+      components: {
+        first: componentFirst,
+        last: componentLast,
+        next: componentNext,
+        previous: componentPrevious
+      }
+    }
+  }
+});
+fn({
+  MuiPaginationItem: {
+    defaultProps: {
+      components: {
+        first: componentFirst,
+        last: componentLast
+      },
+      slots: {
+        next: slotNext,
+        previous: slotPrevious
+      }
+    }
+  }
+});

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

@@ -0,0 +1,26 @@
+"use strict";
+
+fn({
+  MuiPaginationItem: {
+    defaultProps: {
+      slots: {
+        first: componentFirst,
+        last: componentLast,
+        next: componentNext,
+        previous: componentPrevious
+      }
+    }
+  }
+});
+fn({
+  MuiPaginationItem: {
+    defaultProps: {
+      slots: {
+        first: componentFirst,
+        last: componentLast,
+        next: slotNext,
+        previous: slotPrevious
+      }
+    }
+  }
+});

package/node/deprecations/speed-dial-props/index.js

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

package/node/deprecations/speed-dial-props/speed-dial-props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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: 'SpeedDial',
+    propName: 'TransitionComponent',
+    slotName: 'transition'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'SpeedDial',
+    propName: 'TransitionProps',
+    slotName: 'transition'
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/speed-dial-props/test-cases/actual.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _SpeedDial = _interopRequireDefault(require("@mui/material/SpeedDial"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: (0, _extends2.default)({}, outerSlots)
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  TransitionComponent: ComponentTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiSpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});

package/node/deprecations/speed-dial-props/test-cases/expected.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _SpeedDial = _interopRequireDefault(require("@mui/material/SpeedDial"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  slots: (0, _extends2.default)({}, outerSlots, {
+    transition: CustomTransition
+  }),
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiSpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});

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

@@ -0,0 +1,33 @@
+"use strict";
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div'
+      }
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      }
+    }
+  }
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    }
+  }
+});

package/node/util/getReturnExpression.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getReturnExpression;
+/**
+ * @param {import('ast-types').namedTypes.ArrowFunctionExpression | import('ast-types').namedTypes.FunctionExpression} node
+ */
+function getReturnExpression(node) {
+  let body = node.body;
+  if (body === 'BlockStatement') {
+    body = body.body;
+  }
+  if (Array.isArray(body)) {
+    var _body$find;
+    return (_body$find = body.find(statement => statement.type === 'ReturnStatement')) == null ? void 0 : _body$find.argument;
+  }
+  return body;
+}