@mui/codemod 7.1.0 → 7.2.0

package/deprecations/pagination-item-classes/test-cases/package.actual.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _PaginationItem = require("@org/ui/material/PaginationItem");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        '&.MuiPaginationItem-textPrimary': {
+          color: 'red'
+        },
+        '&.MuiPaginationItem-textSecondary': {
+          color: 'red'
+        },
+        '&.MuiPaginationItem-outlinedPrimary': {
+          color: 'red'
+        },
+        '&.MuiPaginationItem-outlinedSecondary': {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        [`&.${_PaginationItem.paginationItemClasses.textPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.textSecondary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlinedPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlinedSecondary}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    '&.MuiPaginationItem-textPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-textSecondary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedSecondary': {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`&.${_PaginationItem.paginationItemClasses.textPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.textSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedSecondary}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    '&.MuiPaginationItem-textPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-textSecondary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedPrimary': {
+      color: 'red'
+    },
+    '&.MuiPaginationItem-outlinedSecondary': {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    [`&.${_PaginationItem.paginationItemClasses.textPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.textSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlinedSecondary}`]: {
+      color: 'red'
+    }
+  }
+});

package/deprecations/pagination-item-classes/test-cases/package.expected.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _PaginationItem = require("@org/ui/material/PaginationItem");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
+          color: 'red'
+        },
+        "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
+          color: 'red'
+        },
+        "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
+          color: 'red'
+        },
+        "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: {
+        [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+          color: 'red'
+        },
+        [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": {
+      color: 'red'
+    },
+    "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, {
+  sx: {
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.text}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorPrimary}`]: {
+      color: 'red'
+    },
+    [`&.${_PaginationItem.paginationItemClasses.outlined}.${_PaginationItem.paginationItemClasses.colorSecondary}`]: {
+      color: 'red'
+    }
+  }
+});

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

@@ -16,6 +16,7 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'PaginationItem'
   });
   return root.toSource(printOptions);

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _PaginationItem = _interopRequireDefault(require("@org/ui/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/deprecations/pagination-item-props/test-cases/package.expected.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _PaginationItem = _interopRequireDefault(require("@org/ui/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/deprecations/popover-props/popover-props.js

@@ -17,30 +17,35 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Popover',
     propName: 'BackdropComponent',
     slotName: 'backdrop'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Popover',
     propName: 'BackdropProps',
     slotName: 'backdrop'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Popover',
     propName: 'PaperProps',
     slotName: 'paper'
   });
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Popover',
     propName: 'TransitionComponent',
     slotName: 'transition'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Popover',
     propName: 'TransitionProps',
     slotName: 'transition'

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Popover = _interopRequireDefault(require("@org/ui/material/Popover"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+  BackdropComponent: CustomBackdrop,
+  BackdropProps: {
+    timeout: 200
+  },
+  PaperProps: {
+    elevation: 4
+  },
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    timeout: 200
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+  BackdropComponent: CustomBackdrop,
+  BackdropProps: {
+    timeout: 200
+  },
+  PaperProps: {
+    elevation: 4
+  },
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    timeout: 200
+  },
+  slotProps: {
+    backdrop: {
+      sx: {
+        backgroundColor: 'red'
+      }
+    },
+    paper: {
+      sx: {
+        backgroundColor: 'blue'
+      }
+    },
+    transition: {
+      onEnter: () => {}
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+  BackdropComponent: CustomBackdrop,
+  BackdropProps: {
+    timeout: 200
+  },
+  PaperProps: {
+    elevation: 4
+  },
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    timeout: 200
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomPopover, {
+  BackdropComponent: CustomBackdrop,
+  BackdropProps: {
+    timeout: 200
+  },
+  PaperProps: {
+    elevation: 4
+  },
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    timeout: 200
+  }
+});

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Popover = _interopRequireDefault(require("@org/ui/material/Popover"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+  slots: {
+    backdrop: CustomBackdrop,
+    transition: CustomTransition
+  },
+  slotProps: {
+    backdrop: {
+      timeout: 200
+    },
+    paper: {
+      elevation: 4
+    },
+    transition: {
+      timeout: 200
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+  slotProps: {
+    backdrop: {
+      ...{
+        timeout: 200
+      },
+      ...{
+        sx: {
+          backgroundColor: 'red'
+        }
+      }
+    },
+    paper: {
+      ...{
+        elevation: 4
+      },
+      ...{
+        sx: {
+          backgroundColor: 'blue'
+        }
+      }
+    },
+    transition: {
+      ...{
+        timeout: 200
+      },
+      ...{
+        onEnter: () => {}
+      }
+    }
+  },
+  slots: {
+    backdrop: CustomBackdrop,
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+  slots: {
+    backdrop: CustomBackdrop,
+    transition: CustomTransition
+  },
+  slotProps: {
+    backdrop: {
+      timeout: 200
+    },
+    paper: {
+      elevation: 4
+    },
+    transition: {
+      timeout: 200
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomPopover, {
+  BackdropComponent: CustomBackdrop,
+  BackdropProps: {
+    timeout: 200
+  },
+  PaperProps: {
+    elevation: 4
+  },
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    timeout: 200
+  }
+});

package/deprecations/popper-props/popper-props.js

@@ -16,6 +16,7 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Popper'
   });
   return root.toSource(printOptions);

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Popper = _interopRequireDefault(require("@org/ui/material/Popper"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+  components: {
+    Root: ComponentsRoot
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+  slots: {
+    root: SlotsRoot
+  },
+  components: {
+    Root: ComponentsRoot
+  },
+  slotProps: {
+    root: slotsRootProps
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Popper = _interopRequireDefault(require("@org/ui/material/Popper"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+  slots: {
+    root: ComponentsRoot
+  },
+  slotProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+  slots: {
+    root: SlotsRoot
+  },
+  slotProps: {
+    root: {
+      ...componentsRootProps,
+      ...slotsRootProps
+    }
+  }
+});

package/deprecations/rating-props/rating-props.js

@@ -16,6 +16,7 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Rating',
     propName: 'IconContainerComponent',
     slotName: 'icon',

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Rating = _interopRequireDefault(require("@org/ui/material/Rating"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  IconContainerComponent: CustomIconContainer
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer,
+  slots: {
+    root: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  IconContainerComponent: CustomIconContainer,
+  slots: {
+    ...outerSlots
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer,
+  slotProps: {
+    icon: {
+      id: 'my-rating-icon'
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiRating, {
+  IconContainerComponent: CustomIconContainer
+});

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Rating = _interopRequireDefault(require("@org/ui/material/Rating"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slots: {
+    root: 'div'
+  },
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  slots: {
+    ...outerSlots
+  },
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slotProps: {
+    icon: {
+      id: 'my-rating-icon',
+      component: CustomIconContainer
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiRating, {
+  IconContainerComponent: CustomIconContainer
+});

package/deprecations/select-classes/select-classes.js

@@ -18,7 +18,7 @@ function transformer(file, api, options) {
     replacementSelector
   }) => {
     const replacementSelectorPrefix = '&';
-    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/Select$/)).forEach(path => {
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${options.packageName || '@mui/material'}(/Select)?$`))).forEach(path => {
       path.node.specifiers.forEach(specifier => {
         if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') {
           const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');

package/deprecations/select-classes/test-cases/package.actual.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _Select = require("@org/ui/material/Select");
+'& .MuiSelect-iconFilled';
+'& .MuiSelect-iconOutlined';
+'& .MuiSelect-iconStandard';
+`& .${_Select.selectClasses.iconFilled}`;
+`& .${_Select.selectClasses.iconOutlined}`;
+`& .${_Select.selectClasses.iconStandard}`;

package/deprecations/select-classes/test-cases/package.expected.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _Select = require("@org/ui/material/Select");
+"& .MuiSelect-filled ~ .MuiSelect-icon";
+"& .MuiSelect-outlined ~ .MuiSelect-icon";
+"& .MuiSelect-standard ~ .MuiSelect-icon";
+`& .${_Select.selectClasses.filled} ~ .${_Select.selectClasses.icon}`;
+`& .${_Select.selectClasses.outlined} ~ .${_Select.selectClasses.icon}`;
+`& .${_Select.selectClasses.standard} ~ .${_Select.selectClasses.icon}`;

package/deprecations/slider-classes/slider-classes.js

@@ -18,7 +18,7 @@ function transformer(file, api, options) {
     replacementSelector
   }) => {
     const replacementSelectorPrefix = '&';
-    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/Slider$/)).forEach(path => {
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${options.packageName || '@mui/material'}(/Slider)?$`))).forEach(path => {
       path.node.specifiers.forEach(specifier => {
         if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'sliderClasses') {
           const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');