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',
+ },
+ },
+});