@mui/codemod 7.1.0 → 7.2.0

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  },
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  },
+  slotProps: {
+    popupIndicator: {
+      width: 20
+    }
+  },
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  },
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  }
+});

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

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  slots: {
+    paper: CustomPaper,
+    popper: CustomPopper
+  },
+  slotProps: {
+    chip: {
+      height: 10
+    },
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    },
+    listbox: {
+      component: CustomListbox,
+      ...{
+        height: 12
+      }
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  slotProps: {
+    chip: {
+      height: 10
+    },
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      ...{
+        width: 16
+      },
+      ...{
+        width: 20
+      }
+    },
+    listbox: {
+      component: CustomListbox,
+      ...{
+        height: 12
+      }
+    }
+  },
+  slots: {
+    paper: CustomPaper,
+    popper: CustomPopper
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  slots: {
+    paper: CustomPaper,
+    popper: CustomPopper
+  },
+  slotProps: {
+    chip: {
+      height: 10
+    },
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    },
+    listbox: {
+      component: CustomListbox,
+      ...{
+        height: 12
+      }
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  }
+});

package/deprecations/avatar-group-props/avatar-group-props.js

@@ -18,13 +18,15 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
-    componentName: 'AvatarGroup'
+    componentName: 'AvatarGroup',
+    packageName: options.packageName
   });
 
   // replace `slotProps.additionalAvatar` with `slotProps.surplus` in JSX
   (0, _findComponentJSX.default)(j, {
     root,
-    componentName: 'AvatarGroup'
+    componentName: 'AvatarGroup',
+    packageName: options.packageName
   }, elementPath => {
     const slotPropsIndex = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'slotProps');
     if (slotPropsIndex !== -1) {

package/deprecations/avatar-group-props/test-cases/package.actual.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _AvatarGroup = _interopRequireDefault(require("@org/ui/material/AvatarGroup"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarGroup.default, {
+  componentsProps: {
+    additionalAvatar: {
+      color: "red"
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+  componentsProps: {
+    additionalAvatar: {
+      color: "red"
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+  componentsProps: {
+    additionalAvatar: {
+      color: "red"
+    }
+  },
+  slotProps: {
+    additionalAvatar: {
+      color: "blue"
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+  componentsProps: {
+    additionalAvatar: {
+      color: "red"
+    }
+  },
+  slotProps: {
+    additionalAvatar: {
+      color: "blue"
+    },
+    surplus: {
+      color: "yellow"
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatarGroup, {
+  componentsProps: {
+    additionalAvatar: {
+      color: "red"
+    }
+  }
+});

package/deprecations/avatar-group-props/test-cases/package.expected.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _AvatarGroup = _interopRequireDefault(require("@org/ui/material/AvatarGroup"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarGroup.default, {
+  slotProps: {
+    surplus: {
+      color: "red"
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+  slotProps: {
+    surplus: {
+      color: "red"
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+  slotProps: {
+    surplus: {
+      ...{
+        color: "red"
+      },
+      ...{
+        color: "blue"
+      }
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+  slotProps: {
+    surplus: {
+      ...{
+        ...{
+          color: "red"
+        },
+        ...{
+          color: "blue"
+        }
+      },
+      ...{
+        color: "yellow"
+      }
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatarGroup, {
+  componentsProps: {
+    additionalAvatar: {
+      color: "red"
+    }
+  }
+});

package/deprecations/avatar-props/avatar-props.js

@@ -18,7 +18,8 @@ function transformer(file, api, options) {
     root,
     componentName: 'Avatar',
     propName: 'imgProps',
-    slotName: 'img'
+    slotName: 'img',
+    packageName: options.packageName
   });
   return root.toSource(printOptions);
 }

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Avatar = _interopRequireDefault(require("@org/ui/material/Avatar"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  imgProps: {
+    onLoad: () => {}
+  },
+  slotProps: {
+    img: {
+      onError: () => {}
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatar, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Avatar = _interopRequireDefault(require("@org/ui/material/Avatar"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  slotProps: {
+    img: {
+      onError: () => {},
+      onLoad: () => {}
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  slotProps: {
+    img: {
+      onError: () => {},
+      onLoad: () => {}
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  slotProps: {
+    img: {
+      ...{
+        onLoad: () => {}
+      },
+      ...{
+        onError: () => {}
+      }
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatar, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});

package/deprecations/backdrop-props/backdrop-props.js

@@ -17,10 +17,12 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Backdrop'
   });
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Backdrop',
     propName: 'TransitionComponent',
     slotName: 'transition'

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Backdrop = _interopRequireDefault(require("@org/ui/material/Backdrop"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  TransitionComponent: CustomTransition
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  TransitionComponent: CustomTransition
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  TransitionComponent: CustomTransition,
+  slots: {
+    root: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  TransitionComponent: CustomTransition,
+  slots: {
+    ...outerSlots
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  TransitionComponent: ComponentTransition,
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiBackdrop, {
+  TransitionComponent: CustomTransition
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  components: {
+    Root: ComponentsRoot
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  components: {
+    Root: ComponentsRoot
+  },
+  slotProps: {
+    root: slotsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  slots: {
+    root: SlotsRoot
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  slots: {
+    root: SlotsRoot
+  },
+  components: {
+    Root: ComponentsRoot
+  },
+  slotProps: {
+    root: slotsRootProps
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiBackdrop, {
+  components: {
+    Root: ComponentsRoot
+  }
+});

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Backdrop = _interopRequireDefault(require("@org/ui/material/Backdrop"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  slots: {
+    ...outerSlots,
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiBackdrop, {
+  TransitionComponent: CustomTransition
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  slots: {
+    root: ComponentsRoot
+  },
+  slotProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  slotProps: {
+    root: slotsRootProps
+  },
+  slots: {
+    root: ComponentsRoot
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+  slots: {
+    root: SlotsRoot
+  },
+  slotProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
+  slots: {
+    root: SlotsRoot
+  },
+  slotProps: {
+    root: {
+      ...componentsRootProps,
+      ...slotsRootProps
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiBackdrop, {
+  components: {
+    Root: ComponentsRoot
+  }
+});

package/deprecations/badge-props/badge-props.js

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

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+  components: {
+    root: ComponentsRoot
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+  slots: {
+    badge: SlotsBadge
+  },
+  components: {
+    root: ComponentsRoot
+  },
+  slotProps: {
+    badge: slotsBadgeProps
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+  slots: {
+    root: SlotsRoot,
+    badge: SlotsBadge
+  },
+  components: {
+    root: ComponentsRoot
+  },
+  slotProps: {
+    root: slotsRootProps,
+    badge: slotsBadgeProps
+  },
+  componentsProps: {
+    root: componentsRootProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+  slots: {
+    root: SlotsRoot,
+    badge: SlotsBadge
+  },
+  components: {
+    root: ComponentsRoot
+  },
+  slotProps: {
+    root: slotsRootProps,
+    badge: slotsBadgeProps
+  },
+  componentsProps: {
+    root: componentsRootProps,
+    badge: componentsBadgeProps
+  }
+});