@mui/codemod 6.0.0-alpha.1 → 6.0.0-alpha.10

package/node/v6.0.0/sx-prop/test-cases/basic-sx.expected.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
+  variant: "regular",
+  sx: theme => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexShrink: 0,
+    borderRadius: '999px',
+    bgcolor: 'hsla(220, 0%, 0%, 0.7)',
+    backdropFilter: 'blur(24px)',
+    maxHeight: 40,
+    border: '1px solid',
+    borderColor: 'divider',
+    boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
+    ...theme.applyStyles("light", {
+      bgcolor: 'hsla(220, 60%, 99%, 0.6)',
+      boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  component: "main",
+  sx: theme => ({
+    backgroundColor: theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100]
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    borderBottom: `1px solid ${'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280,
+    ...theme.applyStyles("light", {
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })
+});

package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: props.style,
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    color: 'red',
+    ...props.style
+  },
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  sx: {
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${post.image})`
+  }
+});

package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.expected.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  }),
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    color: 'red',
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  }),
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    ...props.style
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  sx: {
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${"var(--post-image)"})`
+  },
+  style: {
+    "--post-image": post.image
+  }
+});

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.actual.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    mb: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 2,
+    color: tier.title === 'Professional' ? 'grey.100' : '',
+    backgroundColor: theme => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    borderBottom: theme => `1px solid ${theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'}`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  sx: theme => ({
+    p: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    ...(tier.title === 'Professional' && {
+      border: 'none',
+      boxShadow: theme.palette.mode === 'light' ? `0 8px 12px hsla(210, 98%, 42%, 0.2)` : `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
+      background: 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  component: Button,
+  onClick: () => handleItemClick(index),
+  sx: theme => ({
+    p: 3,
+    height: 'fit-content',
+    width: '100%',
+    background: 'none',
+    ...(selectedItemIndex === index && {
+      backgroundColor: 'action.selected',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark'
+    }),
+    '&:hover': {
+      background: theme.palette.mode === 'light' ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
+      boxShadow: theme.palette.mode === 'light' ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' : '0px 1px 8px hsla(210, 100%, 25%, 0.5) '
+    }
+  })
+}, index);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CreditCardRoundedIcon, {
+  fontSize: "small",
+  sx: theme => ({
+    color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
+    ...(paymentType === 'creditCard' && {
+      color: 'primary.main'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+  edge: "start",
+  color: "inherit",
+  "aria-label": "open drawer",
+  onClick: toggleDrawer,
+  sx: {
+    marginRight: '36px',
+    ...(open && {
+      display: 'none'
+    })
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuIcon, {})
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  sx: [{
+    ...(selectedItemIndex === index && {
+      backgroundColor: 'action.selected',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark'
+    })
+  }, theme => ({
+    color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
+    ...(paymentType === 'creditCard' && {
+      color: 'primary.main'
+    })
+  }), {
+    marginRight: '36px',
+    ...(open && {
+      display: 'none'
+    })
+  }]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    mb: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 2,
+    backgroundColor: theme.palette.grey[900],
+    borderBottom: `1px solid ${'grey.800'}`,
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100],
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  sx: [theme => ({
+    p: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4
+  }), tier.title === 'Professional' && (theme => ({
+    border: 'none',
+    boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
+    background: 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))',
+    ...theme.applyStyles("light", {
+      boxShadow: `0 8px 12px hsla(210, 98%, 42%, 0.2)`
+    })
+  }))]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  component: Button,
+  onClick: () => handleItemClick(index),
+  sx: [theme => ({
+    p: 3,
+    height: 'fit-content',
+    width: '100%',
+    background: 'none',
+    '&:hover': {
+      background: 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
+      borderColor: 'primary.dark',
+      boxShadow: '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
+      ...theme.applyStyles("light", {
+        background: 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)',
+        borderColor: 'primary.light',
+        boxShadow: '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
+      })
+    }
+  }), selectedItemIndex === index && (theme => ({
+    backgroundColor: 'action.selected',
+    borderColor: 'primary.dark',
+    ...theme.applyStyles("light", {
+      borderColor: 'primary.light'
+    })
+  }))]
+}, index);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CreditCardRoundedIcon, {
+  fontSize: "small",
+  sx: [theme => ({
+    color: 'grey.600',
+    ...theme.applyStyles("light", {
+      color: 'grey.400'
+    })
+  }), paymentType === 'creditCard' && {
+    color: 'primary.main'
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+  edge: "start",
+  color: "inherit",
+  "aria-label": "open drawer",
+  onClick: toggleDrawer,
+  sx: [{
+    marginRight: '36px'
+  }, open && {
+    display: 'none'
+  }],
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuIcon, {})
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  sx: [selectedItemIndex === index && (theme => ({
+    backgroundColor: 'action.selected',
+    borderColor: 'primary.dark',
+    ...theme.applyStyles("light", {
+      borderColor: 'primary.light'
+    })
+  })), theme => ({
+    color: 'grey.600',
+    ...theme.applyStyles("light", {
+      color: 'grey.400'
+    })
+  }), paymentType === 'creditCard' && {
+    color: 'primary.main'
+  }, {
+    marginRight: '36px'
+  }, open && {
+    display: 'none'
+  }]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic2.actual.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Accordion, {
+  expanded: expanded,
+  onChange: handleExpansion,
+  slotProps: {
+    transition: {
+      timeout: 400
+    }
+  },
+  sx: {
+    '& .MuiAccordion-region': {
+      height: expanded ? 'auto' : 0
+    },
+    '& .MuiAccordionDetails-root': {
+      display: expanded ? 'block' : 'none'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    display: 'flex',
+    flexDirection: {
+      xs: 'column-reverse',
+      sm: 'row'
+    },
+    justifyContent: activeStep !== 0 ? 'space-between' : 'flex-end',
+    alignItems: 'end',
+    flexGrow: 1,
+    gap: 1,
+    pb: {
+      xs: 12,
+      sm: 0
+    },
+    mt: {
+      xs: 2,
+      sm: 0
+    },
+    mb: '60px'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    display: 'flex',
+    alignItems: 'baseline',
+    color: tier.title === 'Professional' ? 'grey.50' : undefined
+  }
+});

package/node/v6.0.0/sx-prop/test-cases/sx-dynamic2.expected.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Accordion, {
+  expanded: expanded,
+  onChange: handleExpansion,
+  slotProps: {
+    transition: {
+      timeout: 400
+    }
+  },
+  sx: [expanded ? {
+    '& .MuiAccordion-region': {
+      height: 'auto'
+    }
+  } : {
+    '& .MuiAccordion-region': {
+      height: 0
+    }
+  }, expanded ? {
+    '& .MuiAccordionDetails-root': {
+      display: 'block'
+    }
+  } : {
+    '& .MuiAccordionDetails-root': {
+      display: 'none'
+    }
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: [{
+    display: 'flex',
+    flexDirection: {
+      xs: 'column-reverse',
+      sm: 'row'
+    },
+    alignItems: 'end',
+    flexGrow: 1,
+    gap: 1,
+    pb: {
+      xs: 12,
+      sm: 0
+    },
+    mt: {
+      xs: 2,
+      sm: 0
+    },
+    mb: '60px'
+  }, activeStep !== 0 ? {
+    justifyContent: 'space-between'
+  } : {
+    justifyContent: 'flex-end'
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: [{
+    display: 'flex',
+    alignItems: 'baseline'
+  }, tier.title === 'Professional' ? {
+    color: 'grey.50'
+  } : {
+    color: null
+  }]
+});

package/node/v6.0.0/system-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _removeSystemProps.default;
+  }
+});
+var _removeSystemProps = _interopRequireDefault(require("./removeSystemProps"));