@mui/codemod 7.1.0 → 7.1.1

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'

package/deprecations/toggle-button-group-classes/test-cases/package.actual.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _ToggleButtonGroup = require("@org/ui/material/ToggleButtonGroup");
+'& .MuiToggleButtonGroup-groupedHorizontal';
+'& .MuiToggleButtonGroup-groupedVertical';
+`& .${_ToggleButtonGroup.toggleButtonGroupClasses.groupedHorizontal}`;
+`& .${_ToggleButtonGroup.toggleButtonGroupClasses.groupedVertical}`;

package/deprecations/toggle-button-group-classes/test-cases/package.expected.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _ToggleButtonGroup = require("@org/ui/material/ToggleButtonGroup");
+"&.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped";
+"&.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped";
+`&.${_ToggleButtonGroup.toggleButtonGroupClasses.horizontal} > .${_ToggleButtonGroup.toggleButtonGroupClasses.grouped}`;
+`&.${_ToggleButtonGroup.toggleButtonGroupClasses.vertical} > .${_ToggleButtonGroup.toggleButtonGroupClasses.grouped}`;

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

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

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Tooltip = _interopRequireDefault(require("@org/ui/material/Tooltip"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  components: {
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  },
+  componentsProps: {
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip
+  },
+  components: {
+    Arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  components: {
+    Arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: slotsArrowProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  components: {
+    Arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: slotsArrowProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps,
+    tooltip: componentsTooltipProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  },
+  components: {
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  },
+  slotProps: {
+    arrow: slotsArrowProps,
+    popper: slotsPopperProps,
+    tooltip: slotsTooltipProps,
+    transition: slotsTransitionProps
+  },
+  componentsProps: {
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  },
+  slotProps: {
+    tooltip: {
+      height: 20
+    }
+  },
+  slots: {
+    tooltip: "div"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTooltip, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});

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

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Tooltip = _interopRequireDefault(require("@org/ui/material/Tooltip"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    arrow: ComponentsArrow,
+    popper: ComponentsPopper,
+    tooltip: ComponentsTooltip,
+    transition: ComponentsTransition
+  },
+  slotProps: {
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: ComponentsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: componentsArrowProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  slotProps: {
+    tooltip: slotsTooltipProps,
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    tooltip: SlotsTooltip,
+    arrow: SlotsArrow
+  },
+  slotProps: {
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    },
+    tooltip: {
+      ...componentsTooltipProps,
+      ...slotsTooltipProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  },
+  slotProps: {
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    },
+    popper: {
+      ...componentsPopperProps,
+      ...slotsPopperProps
+    },
+    tooltip: {
+      ...componentsTooltipProps,
+      ...slotsTooltipProps
+    },
+    transition: {
+      ...componentsTransitionProps,
+      ...slotsTransitionProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slots: {
+    popper: CustomPopper,
+    transition: CustomTransition
+  },
+  slotProps: {
+    popper: {
+      disablePortal: true
+    },
+    transition: {
+      timeout: 200
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  slotProps: {
+    tooltip: {
+      height: 20
+    },
+    popper: {
+      disablePortal: true
+    },
+    transition: {
+      timeout: 200
+    }
+  },
+  slots: {
+    tooltip: "div",
+    popper: CustomPopper,
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+  slots: {
+    popper: CustomPopper,
+    transition: CustomTransition
+  },
+  slotProps: {
+    popper: {
+      disablePortal: true
+    },
+    transition: {
+      timeout: 200
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTooltip, {
+  PopperComponent: CustomPopper,
+  TransitionComponent: CustomTransition,
+  PopperProps: {
+    disablePortal: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});

package/deprecations/tooltip-props/tooltip-props.js

@@ -18,28 +18,33 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tooltip'
   });
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tooltip',
     propName: 'PopperComponent',
     slotName: 'popper'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tooltip',
     propName: 'PopperProps',
     slotName: 'popper'
   });
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tooltip',
     propName: 'TransitionComponent',
     slotName: 'transition'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Tooltip',
     propName: 'TransitionProps',
     slotName: 'transition'