@mui/codemod 7.1.0 → 7.2.0

package/deprecations/step-content-props/test-cases/package.actual.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _StepContent = _interopRequireDefault(require("@org/ui/material/StepContent"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepContent, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: transitionVars
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slots: {
+    root: 'div'
+  },
+  slotProps: {
+    root: {
+      className: 'foo'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepContent, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slots: {
+    ...outerSlots
+  },
+  slotProps: {
+    ...outerSlotProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  TransitionComponent: ComponentTransition,
+  slots: {
+    transition: SlotTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slotProps: {
+    transition: {
+      id: 'test'
+    }
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiStepContent, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});

package/deprecations/step-content-props/test-cases/package.expected.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _StepContent = _interopRequireDefault(require("@org/ui/material/StepContent"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepContent, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: transitionVars
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    root: {
+      className: 'foo'
+    },
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.StepContent, {
+  slots: {
+    ...outerSlots,
+    transition: CustomTransition
+  },
+  slotProps: {
+    ...outerSlotProps,
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  slots: {
+    transition: SlotTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContent.default, {
+  slotProps: {
+    transition: {
+      ...{
+        unmountOnExit: true
+      },
+      ...{
+        id: 'test'
+      }
+    }
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiStepContent, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});

package/deprecations/step-label-props/step-label-props.js

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

package/deprecations/step-label-props/test-cases/package.actual.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _StepLabel = _interopRequireDefault(require("@org/ui/material/StepLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  componentsProps: {
+    label: componentsLabelProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slots: {
+    label: SlotsLabel
+  },
+  slotProps: {
+    label: slotLabelProps
+  },
+  componentsProps: {
+    label: componentsLabelProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  componentsProps: {
+    label: componentsLabelProps
+  },
+  StepIconProps: StepIconProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slots: {
+    label: SlotsLabel
+  },
+  slotProps: {
+    label: slotLabelProps
+  },
+  componentsProps: {
+    label: componentsLabelProps
+  },
+  StepIconComponent: StepIconComponent,
+  StepIconProps: StepIconProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  StepIconComponent: StepIconComponent,
+  StepIconProps: StepIconProps
+});

package/deprecations/step-label-props/test-cases/package.expected.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _StepLabel = _interopRequireDefault(require("@org/ui/material/StepLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slotProps: {
+    label: componentsLabelProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slots: {
+    label: SlotsLabel
+  },
+  slotProps: {
+    label: {
+      ...componentsLabelProps,
+      ...slotLabelProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slotProps: {
+    label: componentsLabelProps,
+    stepIcon: StepIconProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slots: {
+    label: SlotsLabel,
+    stepIcon: StepIconComponent
+  },
+  slotProps: {
+    label: {
+      ...componentsLabelProps,
+      ...slotLabelProps
+    },
+    stepIcon: StepIconProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+  slots: {
+    stepIcon: StepIconComponent
+  },
+  slotProps: {
+    stepIcon: StepIconProps
+  }
+});

package/deprecations/tab-classes/tab-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\/Tab$/)).forEach(path => {
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${options.packageName || '@mui/material'}(/Tab)?$`))).forEach(path => {
       path.node.specifiers.forEach(specifier => {
         if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tabClasses') {
           const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');

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

@@ -0,0 +1,5 @@
+"use strict";
+
+var _Tab = require("@org/ui/material/Tab");
+'& .MuiTab-iconWrapper';
+`& .${_Tab.tabClasses.iconWrapper}`;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+var _Tab = require("@org/ui/material/Tab");
+"& .MuiTab-icon";
+`& .${_Tab.tabClasses.icon}`;

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

@@ -17,12 +17,14 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TablePagination',
     propName: 'ActionsComponent',
     slotName: 'actions'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TablePagination',
     propName: 'SelectProps',
     slotName: 'select'

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _TablePagination = _interopRequireDefault(require("@org/ui/material/TablePagination"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  },
+  slots: {
+    actions: 'div',
+    select: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  },
+  slots: {
+    root: 'div'
+  },
+  slotProps: {
+    root: {
+      'aria-label': ''
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  },
+  slots: {
+    actions: () => null
+  },
+  slotProps: {
+    select: {
+      native: false
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TablePagination, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTablePagination, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  }
+});

package/deprecations/table-pagination-props/test-cases/package.expected.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _TablePagination = _interopRequireDefault(require("@org/ui/material/TablePagination"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  slots: {
+    actions: "div"
+  },
+  slotProps: {
+    select: {
+      native: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  slots: {
+    actions: 'div',
+    select: 'div'
+  },
+  slotProps: {
+    select: {
+      native: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  slots: {
+    root: 'div',
+    actions: "div"
+  },
+  slotProps: {
+    root: {
+      'aria-label': ''
+    },
+    select: {
+      native: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TablePagination.default, {
+  slots: {
+    actions: () => null
+  },
+  slotProps: {
+    select: {
+      ...{
+        native: true
+      },
+      ...{
+        native: false
+      }
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TablePagination, {
+  slots: {
+    actions: "div"
+  },
+  slotProps: {
+    select: {
+      native: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTablePagination, {
+  ActionsComponent: "div",
+  SelectProps: {
+    native: true
+  }
+});

package/deprecations/table-sort-label-classes/table-sort-label-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\/TableSortLabel$/)).forEach(path => {
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${options.packageName || '@mui/material'}(/TableSortLabel)?$`))).forEach(path => {
       path.node.specifiers.forEach(specifier => {
         if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tableSortLabelClasses') {
           const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');

package/deprecations/table-sort-label-classes/test-cases/package.actual.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _TableSortLabel = require("@org/ui/material/TableSortLabel");
+'& .MuiTableSortLabel-iconDirectionDesc';
+'& .MuiTableSortLabel-iconDirectionAsc';
+`& .${_TableSortLabel.tableSortLabelClasses.iconDirectionDesc}`;
+`& .${_TableSortLabel.tableSortLabelClasses.iconDirectionAsc}`;

package/deprecations/table-sort-label-classes/test-cases/package.expected.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _TableSortLabel = require("@org/ui/material/TableSortLabel");
+"&.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon";
+"&.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon";
+`&.${_TableSortLabel.tableSortLabelClasses.directionDesc} > .${_TableSortLabel.tableSortLabelClasses.icon}`;
+`&.${_TableSortLabel.tableSortLabelClasses.directionAsc} > .${_TableSortLabel.tableSortLabelClasses.icon}`;

package/deprecations/tabs-classes/tabs-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\/Tabs$/)).forEach(path => {
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${options.packageName || '@mui/material'}(/Tabs)?$`))).forEach(path => {
       path.node.specifiers.forEach(specifier => {
         if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tabsClasses') {
           const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');

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

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Tabs = require("@org/ui/material/Tabs");
+'&.MuiTabs-flexContainer';
+'&.MuiTabs-flexContainerVertical';
+`&.${_Tabs.tabsClasses.flexContainer}`;
+`&.${_Tabs.tabsClasses.flexContainerVertical}`;

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

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Tabs = require("@org/ui/material/Tabs");
+"&.MuiTabs-list";
+"&.MuiTabs-list.MuiTabs-vertical";
+`&.${_Tabs.tabsClasses.list}`;
+`&.${_Tabs.tabsClasses.list}.${_Tabs.tabsClasses.vertical}`;

package/deprecations/tabs-props/tabs-props.js

@@ -17,18 +17,21 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tabs',
     propName: 'ScrollButtonComponent',
     slotName: 'scrollButton'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tabs',
     propName: 'TabScrollButtonProps',
     slotName: 'scrollButton'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tabs',
     propName: 'TabIndicatorProps',
     slotName: 'indicator'

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Tabs = _interopRequireDefault(require("@org/ui/material/Tabs"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+  ScrollButtonComponent: CustomScrollButton,
+  TabScrollButtonProps: {
+    disableRipple: true
+  },
+  TabIndicatorProps: {
+    className: 'indicator'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
+  ScrollButtonComponent: CustomScrollButton,
+  TabScrollButtonProps: {
+    disableRipple: true
+  },
+  TabIndicatorProps: {
+    className: 'indicator'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTabs, {
+  ScrollButtonComponent: CustomScrollButton,
+  TabScrollButtonProps: {
+    disableRipple: true
+  },
+  TabIndicatorProps: {
+    className: 'indicator'
+  }
+});

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Tabs = _interopRequireDefault(require("@org/ui/material/Tabs"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+  slots: {
+    scrollButton: CustomScrollButton
+  },
+  slotProps: {
+    scrollButton: {
+      disableRipple: true
+    },
+    indicator: {
+      className: 'indicator'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
+  slots: {
+    scrollButton: CustomScrollButton
+  },
+  slotProps: {
+    scrollButton: {
+      disableRipple: true
+    },
+    indicator: {
+      className: 'indicator'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTabs, {
+  ScrollButtonComponent: CustomScrollButton,
+  TabScrollButtonProps: {
+    disableRipple: true
+  },
+  TabIndicatorProps: {
+    className: 'indicator'
+  }
+});

package/deprecations/text-field-props/test-cases/package.actual.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _TextField = _interopRequireDefault(require("@org/ui/material/TextField"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+  InputProps: CustomInputProps,
+  inputProps: CustomHtmlInputProps,
+  SelectProps: CustomSelectProps,
+  InputLabelProps: CustomInputLabelProps,
+  FormHelperTextProps: CustomFormHelperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+  InputProps: CustomInputProps,
+  inputProps: CustomHtmlInputProps,
+  SelectProps: CustomSelectProps,
+  InputLabelProps: CustomInputLabelProps,
+  FormHelperTextProps: CustomFormHelperProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiTextField, {
+  InputProps: CustomInputProps,
+  inputProps: CustomHtmlInputProps,
+  SelectProps: CustomSelectProps,
+  InputLabelProps: CustomInputLabelProps,
+  FormHelperTextProps: CustomFormHelperProps
+});

package/deprecations/text-field-props/test-cases/package.expected.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _TextField = _interopRequireDefault(require("@org/ui/material/TextField"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+  slotProps: {
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+  slotProps: {
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiTextField, {
+  InputProps: CustomInputProps,
+  inputProps: CustomHtmlInputProps,
+  SelectProps: CustomSelectProps,
+  InputLabelProps: CustomInputLabelProps,
+  FormHelperTextProps: CustomFormHelperProps
+});

package/deprecations/text-field-props/text-field-props.js

@@ -16,30 +16,35 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TextField',
     propName: 'InputProps',
     slotName: 'input'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TextField',
     propName: 'inputProps',
     slotName: 'htmlInput'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TextField',
     propName: 'SelectProps',
     slotName: 'select'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TextField',
     propName: 'InputLabelProps',
     slotName: 'inputLabel'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'TextField',
     propName: 'FormHelperTextProps',
     slotName: 'formHelperText'