diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js index d392b496ea46c0..6133aacd611d3f 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js @@ -12,37 +12,43 @@ export default function transformer(file, api, options) { const printOptions = options.printOptions; findComponentJSX(j, { root, componentName: 'Divider' }, (elementPath) => { - elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( - (attr) => { - if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { - return false; - } - return true; - }, - ); + const hasLightProp = + elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light', + ) !== -1; - 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('opacity'), j.literal('0.6')), - ]), - }); - } else { - const opacityIndex = elementPath.node.openingElement.attributes[ - sxIndex - ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); + if (hasLightProp) { + elementPath.node.openingElement.attributes = + elementPath.node.openingElement.attributes.filter((attr) => { + if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { + return false; + } + return true; + }); - if (opacityIndex === -1) { - assignObject(j, { - target: elementPath.node.openingElement.attributes[sxIndex], - key: 'opacity', - expression: j.literal('0.6'), + 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('opacity'), j.literal('0.6')), + ]), }); + } else { + const opacityIndex = elementPath.node.openingElement.attributes[ + sxIndex + ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); + + if (opacityIndex === -1) { + assignObject(j, { + target: elementPath.node.openingElement.attributes[sxIndex], + key: 'opacity', + expression: j.literal('0.6'), + }); + } } } }); @@ -52,28 +58,35 @@ export default function transformer(file, api, options) { (key) => key.key.name === 'defaultProps', ); - defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter( - (prop) => !['light'].includes(prop?.key?.name), - ); - - const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx'); + const hasLightProp = + defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'light') !== -1; - if (sxIndex === -1) { - defaultPropsObject.value.properties.push( - j.objectProperty( - j.identifier('sx'), - j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))]), - ), + if (hasLightProp) { + defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter( + (prop) => !['light'].includes(prop?.key?.name), ); - } else { - const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex( - (key) => key.key.name === 'opacity', + + const sxIndex = defaultPropsObject.value.properties.findIndex( + (prop) => prop.key.name === 'sx', ); - if (opacityIndex === -1) { - defaultPropsObject.value.properties[sxIndex].value.properties.push( - j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + if (sxIndex === -1) { + defaultPropsObject.value.properties.push( + j.objectProperty( + j.identifier('sx'), + j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))]), + ), ); + } else { + const opacityIndex = defaultPropsObject.value.properties[ + sxIndex + ].value.properties.findIndex((key) => key.key.name === 'opacity'); + + if (opacityIndex === -1) { + defaultPropsObject.value.properties[sxIndex].value.properties.push( + j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + ); + } } } }); diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js index 92db3a700a543d..4c04e5109f5532 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/actual.js @@ -9,3 +9,4 @@ import { Divider as MyDivider } from '@mui/material'; ; ; ; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js index 634419b56eca5f..b04a2284ada8d2 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/expected.js @@ -25,3 +25,4 @@ import { Divider as MyDivider } from '@mui/material'; bgcolor: 'black', opacity: "0.6" }} />; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js index aaa23a349a3035..f7c53332dc4bac 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.actual.js @@ -45,3 +45,11 @@ fn({ }, }, }); + +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js index 454fa3139ffd9e..d5accf78bc0c35 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/theme.expected.js @@ -52,3 +52,11 @@ fn({ }, }, }); + +fn({ + MuiDivider: { + defaultProps: { + className: 'my-class', + }, + }, +});