@mui/codemod 5.15.7 → 5.15.9

package/README.md

@@ -80,10 +80,10 @@ A combination of all deprecations.
 
 ```diff
  <Accordion
--    TransitionComponent={CustomTransition}
--    TransitionProps={{ unmountOnExit: true }}
-+    slots={{ transition: CustomTransition }}
-+    slotProps={{ transition: { unmountOnExit: true } }}
+-  TransitionComponent={CustomTransition}
+-  TransitionProps={{ unmountOnExit: true }}
++  slots={{ transition: CustomTransition }}
++  slotProps={{ transition: { unmountOnExit: true } }}
  />
 ```
 
@@ -91,6 +91,19 @@ A combination of all deprecations.
 npx @mui/codemod@latest deprecations/accordion-props <path>
 ```
 
+#### `divider-props`
+
+```diff
+ <Divider
+-  light
++  sx={{opacity: "0.6"}}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/divider-props <path>
+```
+
 ### v5.0.0
 
 #### `base-use-named-exports`
@@ -102,10 +115,10 @@ See https://github.com/mui/material-ui/issues/21862 for more context.
 This codemod updates the import and re-export statements.
 
 ```diff
--  import BaseButton from '@mui/base/Button';
-+  import { Button as BaseButton } from '@mui/base/Button';
--  export { default as BaseSlider } from '@mui/base/Slider';
-+  export { Slider as BaseSlider } from '@mui/base/Slider';
+-import BaseButton from '@mui/base/Button';
+-export { default as BaseSlider } from '@mui/base/Slider';
++import { Button as BaseButton } from '@mui/base/Button';
++export { Slider as BaseSlider } from '@mui/base/Slider';
 ```
 
 ```bash
@@ -117,8 +130,8 @@ npx @mui/codemod@latest v5.0.0/base-use-named-exports <path>
 The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
 
 ```diff
--  <Input component='a' href='url' />;
-+  <Input slots={{ root: 'a' }} href='url' />;
+-<Input component='a' href='url' />;
++<Input slots={{ root: 'a' }} href='url' />;
 ```
 
 ```bash
@@ -132,8 +145,8 @@ Remove `component` prop from all Base UI components by transferring its value i
 This change only affects Base UI components.
 
 ```diff
--  <Input component={CustomRoot} />
-+  <Input slots={{ root: CustomRoot }} />
+-<Input component={CustomRoot} />
++<Input slots={{ root: CustomRoot }} />
 ```
 
 ```bash
@@ -145,10 +158,10 @@ npx @mui/codemod@latest v5.0.0/base-remove-component-prop <path>
 Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components.
 
 ```diff
--  <List sx={{ py: 'var(--List-divider-gap)' }}>
-+  <List sx={{ py: 'var(--ListDivider-gap)' }}>
--  <Switch sx={{ '--Switch-track-width': '40px' }}>
-+  <Switch sx={{ '--Switch-trackWidth': '40px' }}>
+-<List sx={{ py: 'var(--List-divider-gap)' }}>
+-<Switch sx={{ '--Switch-track-width': '40px' }}>
++<List sx={{ py: 'var(--ListDivider-gap)' }}>
++<Switch sx={{ '--Switch-trackWidth': '40px' }}>
 ```
 
 ```bash
@@ -160,8 +173,8 @@ npx @mui/codemod@latest v5.0.0/rename-css-variables <path>
 Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks.
 
 ```diff
--  import { useBadge } from '@mui/base/BadgeUnstyled';
-+  import useBadge from '@mui/base/useBadge';
+-import { useBadge } from '@mui/base/BadgeUnstyled';
++import useBadge from '@mui/base/useBadge';
 ```
 
 ```bash
@@ -283,8 +296,8 @@ This change only affects Joy UI components.
 ```diff
  <Autocomplete
 -  components={{ listbox: CustomListbox }}
-+  slots={{ listbox: CustomListbox }}
 -  componentsProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
++  slots={{ listbox: CustomListbox }}
 +  slotProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
  />;
 ```
@@ -488,8 +501,8 @@ This change only affects Base UI components.
 ```diff
  <BadgeUnstyled
 -  components={{ Root, Badge: CustomBadge }}
-+  slots={{ root: Root, badge: CustomBadge }}
 -  componentsProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
++  slots={{ root: Root, badge: CustomBadge }}
 +  slotProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
  />;
 ```

package/node/deprecations/accordion-props/test-cases/actual.js

@@ -6,46 +6,36 @@ var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
 var _material = require("@mui/material");
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-  slots: {
-    transition: CustomTransition
-  },
-  slotProps: {
-    transition: {
-      unmountOnExit: true
-    }
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
   }
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
-  slots: {
-    transition: CustomTransition
-  },
-  slotProps: {
-    transition: transitionVars
-  }
+  TransitionComponent: CustomTransition,
+  TransitionProps: transitionVars
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  },
   slots: {
-    root: 'div',
-    transition: CustomTransition
+    root: 'div'
   },
   slotProps: {
     root: {
       className: 'foo'
-    },
-    transition: {
-      unmountOnExit: true
     }
   }
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
-  slots: (0, _extends2.default)({}, outerSlots, {
-    transition: CustomTransition
-  }),
-  slotProps: (0, _extends2.default)({}, outerSlotProps, {
-    transition: {
-      unmountOnExit: true
-    }
-  })
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slots: (0, _extends2.default)({}, outerSlots),
+  slotProps: (0, _extends2.default)({}, outerSlotProps)
 });
 // should skip non MUI components
 /*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAccordion, {

package/node/deprecations/divider-props/divider-props.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _findComponentJSX.default)(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 sxIndex = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'sx');
+    if (sxIndex === -1) {
+      (0, _appendAttribute.default)(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) {
+        (0, _assignObject.default)(j, {
+          target: elementPath.node.openingElement.attributes[sxIndex],
+          key: 'opacity',
+          expression: j.literal('0.6')
+        });
+      }
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'MuiDivider'
+    }
+  }).forEach(path => {
+    const defaultPropsObject = path.value.value.properties.find(key => key.key.name === 'defaultProps');
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => {
+      var _prop$key;
+      return !['light'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
+    });
+    const sxIndex = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'sx');
+    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')));
+      }
+    }
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/divider-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _dividerProps.default;
+  }
+});
+var _dividerProps = _interopRequireDefault(require("./divider-props"));

package/node/deprecations/divider-props/test-cases/actual.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: true,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: true,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: false,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: false,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: light,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: light,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: true,
+  sx: {
+    opacity: '0.7'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: true,
+  sx: {
+    bgcolor: 'black'
+  }
+});

package/node/deprecations/divider-props/test-cases/expected.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  sx: {
+    opacity: '0.7'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  sx: {
+    bgcolor: 'black',
+    opacity: "0.6"
+  }
+});

package/node/deprecations/divider-props/test-cases/theme.actual.js

@@ -0,0 +1,47 @@
+"use strict";
+
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: true
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: true,
+      className: 'my-class'
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light,
+      className: 'my-class'
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light,
+      className: 'my-class',
+      sx: {
+        opacity: '0.7'
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light,
+      className: 'my-class',
+      sx: {
+        bgcolor: 'black'
+      }
+    }
+  }
+});

package/node/deprecations/divider-props/test-cases/theme.expected.js

@@ -0,0 +1,52 @@
+"use strict";
+
+fn({
+  MuiDivider: {
+    defaultProps: {
+      sx: {
+        opacity: "0.6"
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        opacity: "0.6"
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        opacity: "0.6"
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        opacity: '0.7'
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        bgcolor: 'black',
+        opacity: "0.6"
+      }
+    }
+  }
+});

package/node/util/findComponentJSX.js

@@ -23,7 +23,7 @@ function findComponentJSX(j, options, callback) {
   // case 3: import { ComponentName as SomethingElse } from '@mui/material';
 
   const importName = new Set();
-  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^@mui/material/?(${componentName})?`))).forEach(path => {
+  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^@mui/material(/${componentName})?$`))).forEach(path => {
     path.node.specifiers.forEach(specifier => {
       if (specifier.type === 'ImportDefaultSpecifier') {
         importName.add(specifier.local.name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.15.7",
+  "version": "5.15.9",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",