[Menu] Deprecate *Props and complete slots, slotProps

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,12 +23,15 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+        "description": "{ 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": "{ paper?: elementType, root?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ list?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {
@@ -33,41 +41,54 @@
       },
       "additionalInfo": { "sx": true }
     },
+    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "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"
+    },
     {
-      "key": "list",
-      "className": "MuiMenu-list",
-      "description": "Styles applied to the List component via `MenuList`.",
-      "isGlobal": false
+      "name": "paper",
+      "description": "The component used for the paper.",
+      "default": "Paper",
+      "class": "MuiMenu-paper"
     },
     {
-      "key": "paper",
-      "className": "MuiMenu-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
+      "name": "transition",
+      "description": "The component used for the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Grow",
+      "class": null
     },
     {
-      "key": "root",
-      "className": "MuiMenu-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
+      "name": "list",
+      "description": "The component used for the list.",
+      "default": "MenuList",
+      "class": "MuiMenu-list"
     }
   ],
+  "classes": [],
   "spread": true,
   "themeDefaultProps": false,
   "muiName": "MuiMenu",

docs/translations/api-docs/menu/menu.json

@@ -31,6 +31,9 @@
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
+    "TransitionComponent": {
+      "description": "The component used for the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
+    },
     "transitionDuration": {
       "description": "The length of the transition in <code>ms</code>, or &#39;auto&#39;"
     },
@@ -41,15 +44,11 @@
       "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": {
+    "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. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -29,6 +29,7 @@ import transformTabClasses from '../tab-classes';
 import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformTooltipProps from '../tooltip-props';
 import transformTablePaginationProps from '../table-pagination-props';
+import transformMenuProps from '../menu-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -66,6 +67,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformToggleButtonGroupClasses(file, api, options);
   file.source = transformTooltipProps(file, api, options);
   file.source = transformTablePaginationProps(file, api, options);
+  file.source = transformMenuProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/menu-props/index.js

@@ -0,0 +1 @@
+export { default } from './menu-props';

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

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

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 }}
+/>;

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 }}
+/>;

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

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