[codemod] Fix handling of computed paragraph props

packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js

@@ -11,6 +11,8 @@ import { Typography as MyTypography } from '@mui/material';
 <MyTypography paragraph className="my-class" />;
 <Typography paragraph={false} className="my-class" />;
 <MyTypography paragraph={false} className="my-class" />;
+<Typography paragraph={true} className="my-class" />;
+<MyTypography paragraph={true} className="my-class" />;
 <Typography paragraph={paragraph} className="my-class" />;
 <MyTypography paragraph={paragraph} className="my-class" />;
 <Typography paragraph sx={{ marginBottom: "32px" }} />;

packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js

@@ -25,6 +25,12 @@ import { Typography as MyTypography } from '@mui/material';
 <MyTypography className="my-class" sx={{
   marginBottom: "16px"
 }} />;
+<Typography className="my-class" sx={paragraph ? {
+  marginBottom: "16px"
+} : undefined} />;
+<MyTypography className="my-class" sx={paragraph ? {
+  marginBottom: "16px"
+} : undefined} />;
 <Typography sx={{ marginBottom: "32px" }} />;
 <MyTypography sx={{ marginBottom: "32px" }} />;
 <Typography sx={{ mb: "32px" }} />;

packages/mui-codemod/src/deprecations/typography-props/typography-props.js

@@ -29,22 +29,33 @@ export default function transformer(file, api, options) {
       },
     );
 
-    const isParagraphPropTruthy = paragraphProp.value?.expression.value !== false;
+    const isParagraphPropPresent = paragraphProp.value?.expression.value !== false;
 
-    if (!isParagraphPropTruthy) {
+    if (!isParagraphPropPresent) {
       return;
     }
 
+    const isParagraphPropTrue =
+      paragraphProp.value == null || paragraphProp.value.expression.value === true;
+    const paragraphExpression = (expression) =>
+      isParagraphPropTrue
+        ? expression
+        : j.conditionalExpression(
+            paragraphProp.value.expression,
+            expression,
+            j.identifier('undefined'),
+          );
+
     const sxIndex = elementPath.node.openingElement.attributes.findIndex(
       (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx',
     );
     if (sxIndex === -1) {
       appendAttribute(j, {
         target: elementPath.node,
         attributeName: 'sx',
-        expression: j.objectExpression([
-          j.objectProperty(j.identifier('marginBottom'), j.literal('16px')),
-        ]),
+        expression: paragraphExpression(
+          j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))]),
+        ),
       });
     } else {
       const hasMarginBottom = elementPath.node.openingElement.attributes[
@@ -57,7 +68,7 @@ export default function transformer(file, api, options) {
         assignObject(j, {
           target: elementPath.node.openingElement.attributes[sxIndex],
           key: 'marginBottom',
-          expression: j.literal('16px'),
+          expression: paragraphExpression(j.literal('16px')),
         });
       }
     }