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

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

@@ -0,0 +1,152 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+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
+}) => ({
+  ...(ownerState.variant === 'buffer' && {
+    backgroundColor: ownerState.color !== 'normal' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].light,
+    '&:hover': {
+      ...(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 {
+    expand,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    ...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
+}) => ({
+  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 {
+    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 && {
+      ...(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'
+    }
+  };
+});
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.dividers && styles.dividers];
+  }
+})(({
+  theme,
+  ownerState
+}) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  ...(ownerState.dividers ? {
+    padding: '16px 24px',
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  } : {
+    [`.${dialogTitleClasses.root} + &`]: {
+      paddingTop: 0
+    }
+  })
+}));

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

@@ -0,0 +1,244 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+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 {
+    expand,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    ...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
+        }
+      }
+    }]
+  };
+});
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.dividers && styles.dividers];
+  }
+})(({
+  theme
+}) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.dividers,
+    style: {
+      padding: '16px 24px',
+      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dividers,
+    style: {
+      [`.${dialogTitleClasses.root} + &`]: {
+        paddingTop: 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,48 @@
+"use strict";
+
+const Component = styled('div')(({
+  theme,
+  ownerState
+}) => {
+  var _palette;
+  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  return {
+    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' && {
+      color: palette == null ? void 0 : palette.main,
+      ...(!ownerState.disableRipple && {
+        '&:hover': {
+          // The codemod won't handle this case when the variable is not declared in the style argument.
+          // In this case, the `palette` create a new variable in the style argument.
+          ...(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'
+          }
+        }
+      })
+    })
+  };
+});

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

@@ -0,0 +1,86 @@
+"use strict";
+
+const Component = styled('div')(({
+  theme
+}) => {
+  var _palette;
+  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  return {
+    // Explicitly set the default value to solve a bug on IE11.
+    overflow: 'visible',
+    color: (theme.vars || theme).palette.action.active,
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shortest
+    }),
+    variants: [{
+      props: ({
+        ownerState
+      }) => !ownerState.disableRipple,
+      style: {
+        '&: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'
+          }
+        }
+      }
+    }, {
+      props: {
+        edge: 'start',
+        size: 'small'
+      },
+      style: {
+        marginLeft: -3
+      }
+    }, {
+      props: ({
+        edge,
+        ownerState
+      }) => edge === 'start' && ownerState.size !== 'small',
+      style: {
+        marginLeft: -12
+      }
+    }, {
+      props: {
+        edge: 'end',
+        size: 'small'
+      },
+      style: {
+        marginRight: -3
+      }
+    }, {
+      props: ({
+        edge,
+        ownerState
+      }) => edge === 'end' && ownerState.size !== 'small',
+      style: {
+        marginRight: -12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.color !== 'inherit' && ownerState.color !== 'default',
+      style: {
+        color: palette == null ? void 0 : palette.main
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.color !== 'inherit' && ownerState.color !== 'default' && !ownerState.disableRipple,
+      style: {
+        '&:hover': {
+          // The codemod won't handle this case when the variable is not declared in the style argument.
+          // In this case, the `palette` create a new variable in the style argument.
+          ...(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'
+          }
+        }
+      }
+    }]
+  };
+});

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

@@ -0,0 +1,36 @@
+"use strict";
+
+const IconRoot = styled('span')(({
+  theme,
+  ownerState
+}) => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  // Chrome fix for https://bugs.chromium.org/p/chromium/issues/detail?id=820541
+  // To remove at some point.
+  overflow: 'hidden',
+  display: 'inline-block',
+  // allow overflow hidden to take action
+  textAlign: 'center',
+  // support non-square icon
+  flexShrink: 0,
+  fontSize: {
+    inherit: 'inherit',
+    small: theme.typography.pxToRem(20),
+    medium: theme.typography.pxToRem(24),
+    large: theme.typography.pxToRem(36)
+  }[ownerState.fontSize],
+  // TODO v5 deprecate, v6 remove for sx
+  color: {
+    primary: (theme.vars || theme).palette.primary.main,
+    secondary: (theme.vars || theme).palette.secondary.main,
+    info: (theme.vars || theme).palette.info.main,
+    success: (theme.vars || theme).palette.success.main,
+    warning: (theme.vars || theme).palette.warning.main,
+    action: (theme.vars || theme).palette.action.active,
+    error: (theme.vars || theme).palette.error.main,
+    disabled: (theme.vars || theme).palette.action.disabled,
+    inherit: undefined
+  }[ownerState.color]
+}));