@mui/codemod 6.0.0-alpha.11 → 6.0.0-alpha.14

package/node/v6.0.0/grid-v2-props/test-cases/actual.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
+var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  xs: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: true,
+  sm: "auto",
+  md: 2,
+  lg: true,
+  xl: false
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2,
+  smOffset: 4,
+  mdOffset: 6,
+  lgOffset: 8,
+  xlOffset: 10
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2,
+  smOffset: "auto"
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2,
+  sm: 4,
+  xsOffset: 0,
+  smOffset: 2
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  customXs: 2,
+  customSm: 4,
+  customMd: 6
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  customXsOffset: 2,
+  customSmOffset: 4,
+  customMdOffset: 6
+});

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});

package/node/v6.0.0/grid-v2-props/test-cases/expected.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
+var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  size: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: "grow",
+    sm: "auto",
+    md: 2,
+    lg: "grow",
+    xl: false
+  }
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: "auto"
+  }
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4
+  },
+  offset: {
+    xs: 0,
+    sm: 2
+  }
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});

package/node/v6.0.0/styled/test-cases/ConditionalStyled.expected.js

@@ -18,6 +18,7 @@ const LinearProgressBar1 = styled('span', {
       variant: 'buffer'
     },
     style: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].light,
       '&:hover': {}
     }
   }, {
@@ -28,14 +29,6 @@ const LinearProgressBar1 = styled('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, {
-    props: {
-      variant: 'buffer',
-      color: 'normal'
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].light
-    }
   }, {
     props: ({
       variant,
@@ -58,18 +51,18 @@ const LinearProgressBar1 = styled('span', {
     }
   }, {
     props: ({
-      ownerState,
-      color
-    }) => ownerState.variant !== 'buffer' && color === 'inherit',
+      ownerState
+    }) => ownerState.variant !== 'buffer',
     style: {
-      backgroundColor: 'currentColor'
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
   }, {
     props: ({
-      ownerState
-    }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+      ownerState,
+      color
+    }) => ownerState.variant !== 'buffer' && color === 'inherit',
     style: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      backgroundColor: 'currentColor'
     }
   }]
 }));
@@ -84,6 +77,7 @@ const ExpandMore = styled(props => {
 })(({
   theme
 }) => ({
+  transform: 'rotate(180deg)',
   marginLeft: 'auto',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest
@@ -95,13 +89,6 @@ const ExpandMore = styled(props => {
     style: {
       transform: 'rotate(0deg)'
     }
-  }, {
-    props: ({
-      expand
-    }) => !!expand,
-    style: {
-      transform: 'rotate(180deg)'
-    }
   }]
 }));
 const Main = styled('main', {

package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.actual.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const DemoToolbarRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => prop !== 'demoOptions' && prop !== 'openDemoSource'
+})(({
+  theme,
+  demoOptions,
+  openDemoSource
+}) => [{
+  display: 'none',
+  [theme.breakpoints.up('sm')]: {
+    top: 0,
+    maxHeight: 50,
+    display: 'block',
+    marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
+    padding: theme.spacing(0.5, 1),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderTopWidth: demoOptions.bg === 'inline' ? 1 : 0,
+    backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2),
+    borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
+    transition: theme.transitions.create('border-radius'),
+    ...(theme.direction === 'rtl' && {
+      left: theme.spacing(1)
+    }),
+    ...(theme.direction !== 'rtl' && {
+      right: theme.spacing(1)
+    })
+  }
+}, theme.applyDarkStyles({
+  [theme.breakpoints.up('sm')]: {
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }
+})]);
+var _default = exports.default = DemoToolbarRoot;

package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.expected.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const DemoToolbarRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => prop !== 'demoOptions' && prop !== 'openDemoSource'
+})(({
+  theme
+}) => [{
+  display: 'none',
+  [theme.breakpoints.up('sm')]: {
+    top: 0,
+    maxHeight: 50,
+    display: 'block',
+    marginTop: -1,
+    padding: theme.spacing(0.5, 1),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderTopWidth: 0,
+    backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2),
+    borderRadius: '0 0 12px 12px',
+    transition: theme.transitions.create('border-radius'),
+    ...theme.applyStyles("rtl", {
+      left: theme.spacing(1)
+    }),
+    ...theme.applyStyles("rtl", {
+      right: theme.spacing(1)
+    })
+  },
+  variants: [{
+    props: {
+      bg: 'inline'
+    },
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        marginTop: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      bg: 'inline'
+    },
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        borderTopWidth: 1
+      }
+    }
+  }, {
+    props: ({
+      openDemoSource
+    }) => openDemoSource,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        borderRadius: 0
+      }
+    }
+  }]
+}, theme.applyDarkStyles({
+  [theme.breakpoints.up('sm')]: {
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }
+})]);
+var _default = exports.default = DemoToolbarRoot;

package/node/v6.0.0/styled/test-cases/NestedSpread.expected.js

@@ -25,6 +25,13 @@ const Component = styled('div')(({
           }
         }
       }
+    }, {
+      props: {
+        edge: 'start'
+      },
+      style: {
+        marginLeft: -12
+      }
     }, {
       props: {
         edge: 'start',
@@ -34,12 +41,11 @@ const Component = styled('div')(({
         marginLeft: -3
       }
     }, {
-      props: ({
-        edge,
-        ownerState
-      }) => edge === 'start' && ownerState.size !== 'small',
+      props: {
+        edge: 'end'
+      },
       style: {
-        marginLeft: -12
+        marginRight: -12
       }
     }, {
       props: {
@@ -49,14 +55,6 @@ const Component = styled('div')(({
       style: {
         marginRight: -3
       }
-    }, {
-      props: ({
-        edge,
-        ownerState
-      }) => edge === 'end' && ownerState.size !== 'small',
-      style: {
-        marginRight: -12
-      }
     }, {
       props: ({
         ownerState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.14",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -27,9 +27,9 @@
     "@babel/core": "^7.24.7",
     "@babel/runtime": "^7.24.7",
     "@babel/traverse": "^7.24.7",
-    "jscodeshift": "^0.15.2",
+    "jscodeshift": "^0.16.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
   },