@mui/codemod 6.0.0-dev.240424162023-9968b4889d → 6.0.0

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
+  component: "span",
+  ref: ref,
+  ...props,
+  disabled: Boolean(disabled),
+  onClick: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  },
+  onFocusVisible: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  },
+  sx: [theme => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...((!disableBorder || selected) && {
+      borderColor: 'grey.100'
+    }),
+    ...(selected && {
+      bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+      borderColor: 'primary.300',
+      boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
+      // color: 'primary.500',
+    }),
+    ...(!selected && {
+      '&:hover, &:focus': {
+        bgcolor: 'primary.50',
+        borderColor: 'primary.100',
+        '@media (hover: none)': {
+          bgcolor: 'transparent'
+        }
+      }
+    }),
+    ...theme.applyDarkStyles({
+      color: 'primary.800',
+      ...((!disableBorder || selected) && {
+        borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
+      }),
+      ...(!selected && {
+        '&:hover, &:focus': {
+          bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+          borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+          '@media (hover: none)': {
+            bgcolor: 'transparent'
+          }
+        }
+      }),
+      ...(selected && {
+        bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+        borderColor: 'primary.700',
+        // color: 'primary.300',
+        boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
+      })
+    }),
+    ...theme.applyStyles('light', {
+      color: 'primary.500',
+      ...((!disableBorder || selected) && {
+        borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
+      })
+    }),
+    '&.Mui-disabled': {
+      opacity: 0.4
+    }
+  }), ...(Array.isArray(sx) ? sx : [sx])]
+});

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
+  component: "span",
+  ref: ref,
+  ...props,
+  disabled: Boolean(disabled),
+  onClick: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  },
+  onFocusVisible: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  },
+  sx: [theme => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...theme.applyDarkStyles({
+      color: 'primary.800'
+    }),
+    ...theme.applyStyles('light', {
+      color: 'primary.500'
+    }),
+    '&.Mui-disabled': {
+      opacity: 0.4
+    }
+  }), (!disableBorder || selected) && {
+    borderColor: 'grey.100'
+  }, selected && (theme => ({
+    bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+    borderColor: 'primary.300',
+    // color: 'primary.500',
+    boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
+  })), !selected && {
+    '&:hover, &:focus': {
+      bgcolor: 'primary.50',
+      borderColor: 'primary.100',
+      '@media (hover: none)': {
+        bgcolor: 'transparent'
+      }
+    }
+  }, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
+    borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
+  })), !selected && (theme => theme.applyDarkStyles({
+    '&:hover, &:focus': {
+      bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+      borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+      '@media (hover: none)': {
+        bgcolor: 'transparent'
+      }
+    }
+  })), selected && (theme => theme.applyDarkStyles({
+    bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+    borderColor: 'primary.700',
+    // color: 'primary.300',
+    boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
+  })), (!disableBorder || selected) && (theme => theme.applyStyles('light', {
+    borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
+  })), ...(Array.isArray(sx) ? sx : [sx])]
+});

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+/*#__PURE__*/(0, _react.createElement)(Card, {
+  ...otherProps,
+  ref: ref,
+  key: it.wcId,
+  "data-p": it.performance / 100,
+  variant: "outlined",
+  sx: {
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    ...(horizontal ? {
+      display: 'flex',
+      flexDirection: 'row',
+      pr: 1
+    } : {
+      display: 'flex',
+      flexDirection: 'column',
+      pb: 0.5
+    }),
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important'
+    }
+  },
+  onClick: event => {
+    event.preventDefault();
+    navigate(href);
+  }
+}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+  component: Link,
+  to: href,
+  sx: {
+    position: 'relative',
+    aspectRatio: '100/55',
+    ...(horizontal ? {
+      maxWidth: '50vw',
+      height: {
+        sm: '150px',
+        md: '170px',
+        lg: '210px',
+        xl: '250px'
+      }
+    } : {
+      width: '100%'
+    })
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
+    sizes: imageSizes,
+    loading: imageLoading,
+    src: it.images[0]?.src,
+    alt: it.name,
+    style: {
+      aspectRatio: '100/55',
+      ...(horizontal ? {
+        width: 'auto',
+        height: '100%'
+      } : {
+        width: '100%',
+        height: 'auto'
+      })
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
+    children: productOffer && productOffer.ui?.itemCard && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+      style: {
+        ...defaultPromoCodeStyles,
+        ...productOffer.style,
+        ...productOffer.ui?.itemCard?.style
+      },
+      children: productOffer.offerText
+    })
+  })]
+}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "column",
+  sx: {
+    flex: 1,
+    ...(horizontal ? {
+      py: 1.5,
+      px: 1.5
+    } : {
+      px: 1,
+      pb: 0.5
+    })
+  }
+}));

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+/*#__PURE__*/(0, _react.createElement)(Card, {
+  ...otherProps,
+  ref: ref,
+  key: it.wcId,
+  "data-p": it.performance / 100,
+  variant: "outlined",
+  sx: [{
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important'
+    }
+  }, horizontal ? {
+    display: 'flex',
+    flexDirection: 'row',
+    pr: 1
+  } : {
+    display: 'flex',
+    flexDirection: 'column',
+    pb: 0.5
+  }],
+  onClick: event => {
+    event.preventDefault();
+    navigate(href);
+  }
+}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+  component: Link,
+  to: href,
+  sx: [{
+    position: 'relative',
+    aspectRatio: '100/55'
+  }, horizontal ? {
+    maxWidth: '50vw',
+    height: {
+      sm: '150px',
+      md: '170px',
+      lg: '210px',
+      xl: '250px'
+    }
+  } : {
+    width: '100%'
+  }],
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
+    sizes: imageSizes,
+    loading: imageLoading,
+    src: it.images[0]?.src,
+    alt: it.name,
+    style: {
+      aspectRatio: '100/55',
+      ...(horizontal ? {
+        width: 'auto',
+        height: '100%'
+      } : {
+        width: '100%',
+        height: 'auto'
+      })
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
+    children: productOffer && productOffer.ui?.itemCard && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+      style: {
+        ...defaultPromoCodeStyles,
+        ...productOffer.style,
+        ...productOffer.ui?.itemCard?.style
+      },
+      children: productOffer.offerText
+    })
+  })]
+}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "column",
+  sx: [{
+    flex: 1
+  }, horizontal ? {
+    py: 1.5,
+    px: 1.5
+  } : {
+    px: 1,
+    pb: 0.5
+  }]
+}));

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

@@ -0,0 +1,55 @@
+"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})`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${colors[data.role]}.softBg`
+  },
+  children: data.role
+});

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  }),
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
+    color: 'red',
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: theme => ({
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
+    })
+  }),
+  style: {
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": 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
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${"var(--colors-data-role)"}.softBg`
+  },
+  style: {
+    "--colors-data-role": colors[data.role]
+  },
+  children: data.role
+});

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

@@ -0,0 +1,107 @@
+"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'
+    })
+  }]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+  indicator: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIndicator, {
+    variant: activeStep <= index ? 'soft' : 'solid',
+    color: activeStep < index ? 'neutral' : 'primary',
+    children: activeStep <= index ? index + 1 : /*#__PURE__*/(0, _jsxRuntime.jsx)(Check, {})
+  }),
+  sx: {
+    '&:not([data-active])': {
+      '&::after': {
+        ...(activeStep > index && index !== 2 && {
+          bgcolor: 'primary.solidBg'
+        })
+      }
+    }
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepButton, {
+    onClick: () => setActiveStep(index),
+    children: step
+  })
+}, step);