@mui/codemod 7.0.2 → 7.1.1

package/deprecations/modal-props/modal-props.js

@@ -18,16 +18,19 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Modal'
   });
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Modal',
     propName: 'BackdropComponent',
     slotName: 'backdrop'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Modal',
     propName: 'BackdropProps',
     slotName: 'backdrop'

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

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

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

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

package/deprecations/outlined-input-props/outlined-input-props.js

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

package/deprecations/outlined-input-props/test-cases/package.actual.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _OutlinedInput = _interopRequireDefault(require("@org/ui/material/OutlinedInput"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  components: {
+    Input: ComponentsInput
+  },
+  componentsProps: {
+    input: componentsInputProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    root: SlotsRoot
+  },
+  components: {
+    Input: ComponentsInput
+  },
+  slotProps: {
+    root: slotsRootProps
+  },
+  componentsProps: {
+    input: componentsInputProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    root: SlotsRoot,
+    input: SlotsInput
+  },
+  components: {
+    Input: ComponentsInput
+  },
+  slotProps: {
+    root: slotsRootProps,
+    input: slotsInputProps
+  },
+  componentsProps: {
+    input: componentsInputProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    root: SlotsRoot,
+    input: SlotsInput
+  },
+  components: {
+    Input: ComponentsInput
+  },
+  slotProps: {
+    root: slotsRootProps,
+    input: slotsInputProps
+  },
+  componentsProps: {
+    input: componentsInputProps,
+    root: componentsRootProps
+  }
+});

package/deprecations/outlined-input-props/test-cases/package.expected.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _OutlinedInput = _interopRequireDefault(require("@org/ui/material/OutlinedInput"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    input: ComponentsInput
+  },
+  slotProps: {
+    input: componentsInputProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    root: SlotsRoot,
+    input: ComponentsInput
+  },
+  slotProps: {
+    root: slotsRootProps,
+    input: componentsInputProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    root: SlotsRoot,
+    input: SlotsInput
+  },
+  slotProps: {
+    root: slotsRootProps,
+    input: {
+      ...componentsInputProps,
+      ...slotsInputProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
+  slots: {
+    root: SlotsRoot,
+    input: SlotsInput
+  },
+  slotProps: {
+    input: {
+      ...componentsInputProps,
+      ...slotsInputProps
+    },
+    root: {
+      ...componentsRootProps,
+      ...slotsRootProps
+    }
+  }
+});

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

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

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
+  }
+});