[Menu] Deprecate *Props and complete slots, slotProps (#45369)

mui · Feb 21, 2025 · 698dd35 · 698dd35
1 parent 03e3b8f
commit 698dd35
Show file tree

Hide file tree

Showing 16 changed files with 575 additions and 53 deletions.
diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1587,6 +1587,36 @@ Here's how to migrate:
  }
 ```
 
+## Menu
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#menu-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/menu-props <path>
+```
+
+### MenuListProps
+
+The Menu's `MenuListProps` prop was deprecated in favor of `slotProps.list`:
+
+```diff
+ <Menu
+-  MenuListProps={menuListProps}
++  slotProps={{ list: menuListProps }}
+ >
+```
+
+### TransitionProps
+
+The Menu's `TransitionProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <Menu
+-  TransitionProps={transitionProps}
++  slotProps={{ transition: transitionProps }}
+ >
+```
+
 ## MobileStepper
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#mobile-stepper-props) below to migrate the code as described in the following sections:

diff --git a/docs/pages/material-ui/api/menu.json b/docs/pages/material-ui/api/menu.json
@@ -6,7 +6,12 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "disableAutoFocusItem": { "type": { "name": "bool" }, "default": "false" },
-    "MenuListProps": { "type": { "name": "object" }, "default": "{}" },
+    "MenuListProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.list</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "onClose": {
       "type": { "name": "func" },
       "signature": {
@@ -18,14 +23,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ backdrop?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, list?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+        "description": "{ backdrop?: elementType, list?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
       },
       "default": "{}"
     },
@@ -43,34 +48,52 @@
       },
       "default": "'auto'"
     },
-    "TransitionProps": { "type": { "name": "object" }, "default": "{}" },
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.transition</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "variant": {
       "type": { "name": "enum", "description": "'menu'<br>&#124;&nbsp;'selectedMenu'" },
       "default": "'selectedMenu'"
     }
   },
   "name": "Menu",
   "imports": ["import Menu from '@mui/material/Menu';", "import { Menu } from '@mui/material';"],
-  "classes": [
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component used for the popper.",
+      "default": "Modal",
+      "class": "MuiMenu-root"
+    },
+    {
+      "name": "paper",
+      "description": "The component used for the paper.",
+      "default": "Paper",
+      "class": "MuiMenu-paper"
+    },
     {
-      "key": "list",
-      "className": "MuiMenu-list",
-      "description": "Styles applied to the List component via `MenuList`.",
-      "isGlobal": false
+      "name": "list",
+      "description": "The component used for the list.",
+      "default": "MenuList",
+      "class": "MuiMenu-list"
     },
     {
-      "key": "paper",
-      "className": "MuiMenu-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
+      "name": "transition",
+      "description": "The component used for the transition slot.",
+      "default": "Grow",
+      "class": null
     },
     {
-      "key": "root",
-      "className": "MuiMenu-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
+      "name": "backdrop",
+      "description": "The component used for the backdrop slot.",
+      "default": "Backdrop",
+      "class": null
     }
   ],
+  "classes": [],
   "spread": true,
   "themeDefaultProps": false,
   "muiName": "MuiMenu",

diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json
@@ -41,15 +41,12 @@
       "description": "The variant to use. Use <code>menu</code> to prevent selected items from impacting the initial focus."
     }
   },
-  "classDescriptions": {
-    "list": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the List component via <code>MenuList</code>"
-    },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
-    "root": { "description": "Styles applied to the root element." }
+  "classDescriptions": {},
+  "slotDescriptions": {
+    "backdrop": "The component used for the backdrop slot.",
+    "list": "The component used for the list.",
+    "paper": "The component used for the paper.",
+    "root": "The component used for the popper.",
+    "transition": "The component used for the transition slot."
   }
 }
diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -40,6 +40,7 @@ import transformSnackbarProps from '../snackbar-props';
 import transformerTabsProps from '../tabs-props';
 import transformerTabsClasses from '../tabs-classes';
 import transformDrawerProps from '../drawer-props';
+import transformMenuProps from '../menu-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -88,6 +89,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformerTabsProps(file, api, options);
   file.source = transformerTabsClasses(file, api, options);
   file.source = transformDrawerProps(file, api, options);
+  file.source = transformMenuProps(file, api, options);
 
   return file.source;
 }
diff --git a/packages/mui-codemod/src/deprecations/menu-props/index.js b/packages/mui-codemod/src/deprecations/menu-props/index.js
@@ -0,0 +1 @@
+export { default } from './menu-props';
diff --git a/packages/mui-codemod/src/deprecations/menu-props/menu-props.js b/packages/mui-codemod/src/deprecations/menu-props/menu-props.js
@@ -0,0 +1,35 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Menu',
+    propName: 'MenuListProps',
+    slotName: 'list',
+  });
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Menu',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Menu',
+    propName: 'TransitionProps',
+    slotName: 'transition',
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/menu-props/menu-props.test.js b/packages/mui-codemod/src/deprecations/menu-props/menu-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './menu-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'menu-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/menu-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/menu-props/test-cases/actual.js
@@ -0,0 +1,48 @@
+import Menu from '@mui/material/Menu';
+import { Menu as MyMenu } from '@mui/material';
+
+<Menu
+  TransitionComponent={CustomTransition}
+  MenuListProps={{ disablePadding: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
+
+<Menu
+  TransitionComponent={CustomTransition}
+  MenuListProps={{ disablePadding: true }}
+  TransitionProps={{ timeout: 200 }}
+  slotProps={{
+    root: {
+      disablePortal: true,
+    },
+  }}
+/>;
+
+<Menu
+  TransitionComponent={CustomTransition}
+  MenuListProps={{ disablePadding: true }}
+  TransitionProps={{ timeout: 200 }}
+  slotProps={{
+    root: {
+      disablePortal: true,
+    },
+    list: {
+      disableListWrap: true,
+    },
+    transition: {
+      'aria-hidden': true,
+    },
+  }}
+/>;
+
+<MyMenu
+  TransitionComponent={CustomTransition}
+  MenuListProps={{ disablePadding: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
+
+<CustomMenu
+  TransitionComponent={CustomTransition}
+  MenuListProps={{ disablePadding: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/menu-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/menu-props/test-cases/expected.js
@@ -0,0 +1,63 @@
+import Menu from '@mui/material/Menu';
+import { Menu as MyMenu } from '@mui/material';
+
+<Menu
+  slotProps={{
+    list: { disablePadding: true },
+    transition: { timeout: 200 }
+  }}
+  slots={{
+    transition: CustomTransition
+  }} />;
+
+<Menu
+  slotProps={{
+    root: {
+      disablePortal: true,
+    },
+
+    list: { disablePadding: true },
+    transition: { timeout: 200 }
+  }}
+  slots={{
+    transition: CustomTransition
+  }} />;
+
+<Menu
+  slotProps={{
+    root: {
+      disablePortal: true,
+    },
+    list: {
+      ...{ disablePadding: true },
+
+      ...{
+        disableListWrap: true,
+      }
+    },
+    transition: {
+      ...{ timeout: 200 },
+
+      ...{
+        'aria-hidden': true,
+      }
+    },
+  }}
+  slots={{
+    transition: CustomTransition
+  }} />;
+
+<MyMenu
+  slotProps={{
+    list: { disablePadding: true },
+    transition: { timeout: 200 }
+  }}
+  slots={{
+    transition: CustomTransition
+  }} />;
+
+<CustomMenu
+  TransitionComponent={CustomTransition}
+  MenuListProps={{ disablePadding: true }}
+  TransitionProps={{ timeout: 200 }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/menu-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/menu-props/test-cases/theme.actual.js
@@ -0,0 +1,22 @@
+fn({
+  MuiMenu: {
+    defaultProps: {
+      MenuListProps: { disablePadding: true },
+      TransitionComponent: CustomTransition,
+      TransitionProps: { timeout: 200 },
+    },
+  },
+});
+
+fn({
+  MuiMenu: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      MenuListProps: { disablePadding: true },
+      TransitionProps: { timeout: 200 },
+      slotProps: {
+        root: { disablePortal: true },
+      },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/menu-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/menu-props/test-cases/theme.expected.js
@@ -0,0 +1,30 @@
+fn({
+  MuiMenu: {
+    defaultProps: {
+      slotProps: {
+        list: { disablePadding: true },
+        transition: { timeout: 200 }
+      },
+
+      slots: {
+        transition: CustomTransition
+      }
+    },
+  },
+});
+
+fn({
+  MuiMenu: {
+    defaultProps: {
+      slotProps: {
+        root: { disablePortal: true },
+        list: { disablePadding: true },
+        transition: { timeout: 200 }
+      },
+
+      slots: {
+        transition: CustomTransition
+      }
+    },
+  },
+});