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

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const FormHelperTextRoot = styled('p')(({
+  theme,
+  ownerState,
+  disabled
+}) => (0, _extends2.default)({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.caption, {
+  textAlign: 'left',
+  [`&.${formHelperTextClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  }
+}, ownerState.size === 'small' && {
+  marginTop: 4
+}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+  marginTop: 6
+}, ownerState.size === 'small' && ownerState.variant === 'contained' && disabled && {
+  marginTop: 6
+}, ownerState.size !== 'small' && {
+  marginBottom: 4
+}, ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled && {
+  marginBottom: 6
+}, ownerState.contained && {
+  marginLeft: 14,
+  marginRight: 14
+}, !ownerState.contained && {
+  marginTop: 14,
+  marginBottom: 14
+}, !!ownerState.disabled && {
+  opacity: 0.5
+}));
+const Component = styled.div(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({}, theme.typography.caption, ownerState.size === 'small' && {
+  marginTop: (theme.vars || theme).spacing(1)
+}));
+const ImageListRoot = styled('ul')(({
+  ownerState
+}) => {
+  return (0, _extends2.default)({
+    display: 'grid',
+    overflowY: 'auto',
+    listStyle: 'none',
+    padding: 0,
+    // Add iOS momentum scrolling for iOS < 13.0
+    WebkitOverflowScrolling: 'touch'
+  }, ownerState.variant === 'masonry' && {
+    display: 'block'
+  });
+});
+const ImageListItemRoot = styled('li')(({
+  ownerState
+}) => ({
+  display: 'block',
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: (0, _extends2.default)({
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    display: 'block'
+  }, ownerState.variant === 'standard' && {
+    height: 'auto',
+    flexGrow: 1
+  }, {
+    '&:hover': {
+      '&[data-shape="circular"]': (0, _extends2.default)({
+        borderRadius: '50%'
+      }, ownerState.variant === 'unique' && {
+        height: 'auto',
+        flexGrow: 1
+      })
+    }
+  })
+}));

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

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const FormHelperTextRoot = styled('p')(({
+  theme
+}) => (0, _extends2.default)({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.caption, {
+  textAlign: 'left',
+  [`&.${formHelperTextClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      size: 'small'
+    },
+    style: {
+      marginTop: 6
+    }
+  }, {
+    props: ({
+      disabled,
+      ownerState
+    }) => ownerState.size === 'small' && ownerState.variant === 'contained' && disabled,
+    style: {
+      marginTop: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.size !== 'small',
+    style: {
+      marginBottom: 4
+    }
+  }, {
+    props: ({
+      disabled,
+      ownerState
+    }) => ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled,
+    style: {
+      marginBottom: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.contained,
+    style: {
+      marginTop: 14,
+      marginBottom: 14
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.disabled,
+    style: {
+      opacity: 0.5
+    }
+  }]
+}));
+const Component = styled.div(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.caption, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: (theme.vars || theme).spacing(1)
+    }
+  }]
+}));
+const ImageListRoot = styled('ul')({
+  display: 'grid',
+  overflowY: 'auto',
+  listStyle: 'none',
+  padding: 0,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  variants: [{
+    props: {
+      variant: 'masonry'
+    },
+    style: {
+      display: 'block'
+    }
+  }]
+});
+const ImageListItemRoot = styled('li')({
+  display: 'block',
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: {
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    '&:hover': {
+      '&[data-shape="circular"]': {
+        borderRadius: '50%'
+      }
+    }
+  },
+  variants: [{
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        height: 'auto',
+        flexGrow: 1
+      }
+    }
+  }, {
+    props: {
+      variant: 'unique'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        '&:hover': {
+          '&[data-shape="circular"]': {
+            height: 'auto',
+            flexGrow: 1
+          }
+        }
+      }
+    }
+  }]
+});

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["expand"];
+const LinearProgressBar1 = styled('span', {
+  name: 'MuiLinearProgress',
+  slot: 'Bar1',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+  }
+})(({
+  ownerState,
+  theme
+}) => (0, _extends2.default)({}, ownerState.variant === 'buffer' && {
+  backgroundColor: ownerState.color !== 'normal' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].light,
+  '&:hover': (0, _extends2.default)({}, ownerState.color !== 'inherit' ? {
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+  } : {
+    backgroundColor: 'currentColor'
+  })
+}, ownerState.variant !== 'buffer' && {
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
+}));
+const ExpandMore = styled(props => {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({}, other));
+})(({
+  theme,
+  expand
+}) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest
+  })
+}));
+const Main = styled('main', {
+  shouldForwardProp: prop => prop !== 'disableToc'
+})(({
+  disableToc,
+  theme
+}) => (0, _extends2.default)({
+  minHeight: '100vh',
+  display: 'grid',
+  width: '100%'
+}, disableToc ? {
+  [theme.breakpoints.up('md')]: {
+    marginRight: TOC_WIDTH / 2
+  }
+} : {
+  [theme.breakpoints.up('md')]: {
+    gridTemplateColumns: `1fr ${TOC_WIDTH}px`
+  }
+}, {
+  '& .markdown-body .comment-link': {
+    display: 'flex'
+  }
+}));
+const StyledAppContainer = styled(AppContainer, {
+  shouldForwardProp: prop => prop !== 'disableAd' && prop !== 'hasTabs' && prop !== 'disableToc'
+})(({
+  disableAd,
+  hasTabs,
+  disableToc,
+  theme
+}) => {
+  return (0, _extends2.default)({
+    position: 'relative',
+    // By default, a grid item cannot be smaller than the size of its content.
+    // https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
+    minWidth: 0
+  }, disableToc ? {
+    // 105ch ≈ 930px
+    maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`
+  } : {
+    // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
+    fontFamily: 'Arial',
+    // 105ch ≈ 930px
+    maxWidth: '105ch'
+  }, !disableAd && (0, _extends2.default)({}, hasTabs ? {
+    '&& .component-tabs .MuiTabs-root': {
+      // 40px matches MarkdownElement h2 margin-top.
+      marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px + 40px)`,
+      [theme.breakpoints.up('sm')]: {
+        marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px + 40px)`
+      }
+    },
+    '&& .component-tabs.ad .MuiTabs-root': {
+      marginBottom: 0
+    }
+  } : {
+    '&& .description': {
+      marginBottom: theme.spacing(AD_MARGIN_BOTTOM),
+      paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px)`,
+      [theme.breakpoints.up('sm')]: {
+        paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px)`
+      }
+    },
+    '&& .description.ad': {
+      paddingBottom: 0,
+      marginBottom: 0
+    }
+  }), {
+    [theme.breakpoints.up('lg')]: {
+      paddingLeft: '60px',
+      paddingRight: '60px'
+    }
+  });
+});

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

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["expand"];
+const LinearProgressBar1 = styled('span', {
+  name: 'MuiLinearProgress',
+  slot: 'Bar1',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+  }
+})(({
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'buffer'
+    },
+    style: {
+      '&:hover': {}
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'buffer' && ownerState.color !== 'normal',
+    style: {
+      backgroundColor: 'currentColor'
+    }
+  }, {
+    props: {
+      variant: 'buffer',
+      color: 'normal'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].light
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'buffer' && ownerState.color !== 'inherit',
+    style: {
+      '&:hover': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+      }
+    }
+  }, {
+    props: {
+      variant: 'buffer',
+      color: 'inherit'
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: 'currentColor'
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      color
+    }) => ownerState.variant !== 'buffer' && color === 'inherit',
+    style: {
+      backgroundColor: 'currentColor'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+    style: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+    }
+  }]
+}));
+const ExpandMore = styled(props => {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({}, other));
+})(({
+  theme
+}) => ({
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest
+  }),
+  variants: [{
+    props: ({
+      expand
+    }) => !expand,
+    style: {
+      transform: 'rotate(0deg)'
+    }
+  }, {
+    props: ({
+      expand
+    }) => !!expand,
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+}));
+const Main = styled('main', {
+  shouldForwardProp: prop => prop !== 'disableToc'
+})(({
+  theme
+}) => ({
+  minHeight: '100vh',
+  display: 'grid',
+  width: '100%',
+  '& .markdown-body .comment-link': {
+    display: 'flex'
+  },
+  variants: [{
+    props: ({
+      disableToc
+    }) => disableToc,
+    style: {
+      [theme.breakpoints.up('md')]: {
+        marginRight: TOC_WIDTH / 2
+      }
+    }
+  }, {
+    props: ({
+      disableToc
+    }) => !disableToc,
+    style: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: `1fr ${TOC_WIDTH}px`
+      }
+    }
+  }]
+}));
+const StyledAppContainer = styled(AppContainer, {
+  shouldForwardProp: prop => prop !== 'disableAd' && prop !== 'hasTabs' && prop !== 'disableToc'
+})(({
+  theme
+}) => {
+  return {
+    position: 'relative',
+    // By default, a grid item cannot be smaller than the size of its content.
+    // https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
+    minWidth: 0,
+    [theme.breakpoints.up('lg')]: {
+      paddingLeft: '60px',
+      paddingRight: '60px'
+    },
+    variants: [{
+      props: ({
+        disableToc
+      }) => disableToc,
+      style: {
+        // 105ch ≈ 930px
+        maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`
+      }
+    }, {
+      props: ({
+        disableToc
+      }) => !disableToc,
+      style: {
+        // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
+        fontFamily: 'Arial',
+        // 105ch ≈ 930px
+        maxWidth: '105ch'
+      }
+    }, {
+      props: ({
+        disableAd,
+        hasTabs
+      }) => !disableAd && hasTabs,
+      style: {
+        '&& .component-tabs .MuiTabs-root': {
+          // 40px matches MarkdownElement h2 margin-top.
+          marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px + 40px)`,
+          [theme.breakpoints.up('sm')]: {
+            marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px + 40px)`
+          }
+        },
+        '&& .component-tabs.ad .MuiTabs-root': {
+          marginBottom: 0
+        }
+      }
+    }, {
+      props: ({
+        disableAd,
+        hasTabs
+      }) => !disableAd && !hasTabs,
+      style: {
+        '&& .description': {
+          marginBottom: theme.spacing(AD_MARGIN_BOTTOM),
+          paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px)`,
+          [theme.breakpoints.up('sm')]: {
+            paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px)`
+          }
+        },
+        '&& .description.ad': {
+          paddingBottom: 0,
+          marginBottom: 0
+        }
+      }
+    }]
+  };
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+
+const ToolbarRoot = styled('div', {
+  name: 'MuiToolbar',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
+  }
+})(({
+  theme,
+  ownerState
+}) => ownerState.variant === 'regular' && theme.mixins.toolbar, ({
+  theme,
+  ownerState
+}) => ownerState.variant !== 'regular' && theme.mixins.toolbar2, ({
+  theme,
+  ownerState,
+  disabled
+}) => ownerState.variant === 'regular' && disabled && theme.mixins.toolbar3, ({
+  theme,
+  ownerState,
+  disabled
+}) => ownerState.variant !== 'regular' && !disabled && theme.mixins.toolbar4, ({
+  theme
+}) => theme.vars && theme.mixins.toolbar5);

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

@@ -0,0 +1,52 @@
+"use strict";
+
+const ToolbarRoot = styled('div', {
+  name: 'MuiToolbar',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
+  }
+})(({
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'regular'
+    },
+    style: theme.mixins.toolbar
+  }]
+}), ({
+  theme
+}) => ({
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'regular',
+    style: theme.mixins.toolbar2
+  }]
+}), ({
+  theme
+}) => ({
+  variants: [{
+    props: ({
+      disabled,
+      ownerState
+    }) => ownerState.variant === 'regular' && disabled,
+    style: theme.mixins.toolbar3
+  }]
+}), ({
+  theme
+}) => ({
+  variants: [{
+    props: ({
+      disabled,
+      ownerState
+    }) => ownerState.variant !== 'regular' && !disabled,
+    style: theme.mixins.toolbar4
+  }]
+}), ({
+  theme
+}) => theme.vars && theme.mixins.toolbar5);

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const Component = styled('div')(({
+  theme,
+  ownerState
+}) => {
+  var _palette;
+  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  return (0, _extends2.default)({
+    overflow: 'visible',
+    // Explicitly set the default value to solve a bug on IE11.
+    color: (theme.vars || theme).palette.action.active,
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shortest
+    })
+  }, !ownerState.disableRipple && {
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }, ownerState.edge === 'start' && {
+    marginLeft: ownerState.size === 'small' ? -3 : -12
+  }, ownerState.edge === 'end' && {
+    marginRight: ownerState.size === 'small' ? -3 : -12
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (0, _extends2.default)({
+    color: palette == null ? void 0 : palette.main
+  }, !ownerState.disableRipple && {
+    '&:hover': (0, _extends2.default)({}, palette && {
+      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+    }, {
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    })
+  }));
+});