[experiment] Menu RFC playground

packages-internal/core-docs/package.json

@@ -53,7 +53,7 @@
     "next": "15.5.20"
   },
   "peerDependencies": {
-    "@base-ui/react": "^1",
+    "@base-ui/react": "^1.5.0",
     "@docsearch/react": "catalog:docs",
     "@emotion/cache": "catalog:docs",
     "@emotion/react": "catalog:docs",

packages/mui-material/package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
+    "@base-ui/react": "^1.6.0",
     "@mui/core-downloads-tracker": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",

packages/mui-material/src/Menu/Menu.js

@@ -12,6 +12,7 @@ import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getMenuUtilityClass } from './menuClasses';
 import useSlot from '../utils/useSlot';
+import { menuListStyles, menuPaperStyles } from './menuStyles';
 
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -44,22 +45,12 @@ const MenuRoot = styled(Popover, {
 export const MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
-})({
-  // specZ: The maximum height of a simple menu should be one or more rows less than the view
-  // height. This ensures a tappable area outside of the simple menu with which to dismiss
-  // the menu.
-  maxHeight: 'calc(100% - 96px)',
-  // Add iOS momentum scrolling for iOS < 13.0
-  WebkitOverflowScrolling: 'touch',
-});
+})(menuPaperStyles);
 
 const MenuMenuList = styled(MenuList, {
   name: 'MuiMenu',
   slot: 'List',
-})({
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0,
-});
+})(menuListStyles);
 
 const Menu = React.forwardRef(function Menu(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiMenu' });

packages/mui-material/src/Menu/menuStyles.js

@@ -0,0 +1,15 @@
+/** @type {import('@mui/system').CSSInterpolation} */
+export const menuPaperStyles = {
+  // specZ: The maximum height of a simple menu should be one or more rows less than the view
+  // height. This ensures a tappable area outside of the simple menu with which to dismiss
+  // the menu.
+  maxHeight: 'calc(100% - 96px)',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+};
+
+/** @type {import('@mui/system').CSSInterpolation} */
+export const menuListStyles = {
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+};

packages/mui-material/src/MenuItem/MenuItem.js

@@ -14,23 +14,12 @@ import focusWithVisible from '../utils/focusWithVisible';
 import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import { useRovingTabIndexItem } from '../utils/useRovingTabIndex';
-import { dividerClasses } from '../Divider';
-import { listItemIconClasses } from '../ListItemIcon';
-import { listItemTextClasses } from '../ListItemText';
 import { useMenuListContext } from '../MenuList/MenuListContext';
 import { useSelectFocusSource } from '../Select/utils';
 import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
+import { getMenuItemRootStyles, menuItemOverridesResolver } from './menuItemStyles';
 
-export const overridesResolver = (props, styles) => {
-  const { ownerState } = props;
-
-  return [
-    styles.root,
-    ownerState.dense && styles.dense,
-    ownerState.divider && styles.divider,
-    !ownerState.disableGutters && styles.gutters,
-  ];
-};
+export const overridesResolver = menuItemOverridesResolver;
 
 const useUtilityClasses = (ownerState) => {
   const { disabled, dense, divider, disableGutters, selected, classes } = ownerState;
@@ -58,113 +47,7 @@ const MenuItemRoot = styled(ButtonBase, {
   name: 'MuiMenuItem',
   slot: 'Root',
   overridesResolver,
-})(
-  memoTheme(({ theme }) => ({
-    ...theme.typography.body1,
-    display: 'flex',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    position: 'relative',
-    textDecoration: 'none',
-    minHeight: 48,
-    paddingTop: 6,
-    paddingBottom: 6,
-    boxSizing: 'border-box',
-    whiteSpace: 'nowrap',
-    '&:hover': {
-      textDecoration: 'none',
-      backgroundColor: (theme.vars || theme).palette.action.hover,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
-    [`&.${menuItemClasses.selected}`]: {
-      backgroundColor: theme.alpha(
-        (theme.vars || theme).palette.primary.main,
-        (theme.vars || theme).palette.action.selectedOpacity,
-      ),
-      [`&.${menuItemClasses.focusVisible}`]: {
-        backgroundColor: theme.alpha(
-          (theme.vars || theme).palette.primary.main,
-          `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`,
-        ),
-      },
-    },
-    [`&.${menuItemClasses.selected}:hover`]: {
-      backgroundColor: theme.alpha(
-        (theme.vars || theme).palette.primary.main,
-        `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`,
-      ),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.alpha(
-          (theme.vars || theme).palette.primary.main,
-          (theme.vars || theme).palette.action.selectedOpacity,
-        ),
-      },
-    },
-    [`&.${menuItemClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus,
-    },
-    [`&.${menuItemClasses.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity,
-    },
-    [`& + .${dividerClasses.root}`]: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-    },
-    [`& + .${dividerClasses.inset}`]: {
-      marginLeft: 52,
-    },
-    [`& .${listItemTextClasses.root}`]: {
-      marginTop: 0,
-      marginBottom: 0,
-    },
-    [`& .${listItemTextClasses.inset}`]: {
-      paddingLeft: 36,
-    },
-    [`& .${listItemIconClasses.root}`]: {
-      minWidth: 36,
-    },
-    variants: [
-      {
-        props: ({ ownerState }) => !ownerState.disableGutters,
-        style: {
-          paddingLeft: 16,
-          paddingRight: 16,
-        },
-      },
-      {
-        props: ({ ownerState }) => ownerState.divider,
-        style: {
-          borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-          backgroundClip: 'padding-box',
-        },
-      },
-      {
-        props: ({ ownerState }) => !ownerState.dense,
-        style: {
-          [theme.breakpoints.up('sm')]: {
-            minHeight: 'auto',
-          },
-        },
-      },
-      {
-        props: ({ ownerState }) => ownerState.dense,
-        style: {
-          minHeight: 32, // https://m2.material.io/components/menus#specs > Dense
-          paddingTop: 4,
-          paddingBottom: 4,
-          ...theme.typography.body2,
-          [`& .${listItemIconClasses.root} svg`]: {
-            fontSize: '1.25rem',
-          },
-        },
-      },
-    ],
-  })),
-);
+})(memoTheme(({ theme }) => getMenuItemRootStyles(theme, menuItemClasses)));
 
 const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiMenuItem' });

packages/mui-material/src/MenuItem/menuItemStyles.js

@@ -0,0 +1,137 @@
+import { dividerClasses } from '../Divider';
+import { listItemIconClasses } from '../ListItemIcon';
+import { listItemTextClasses } from '../ListItemText';
+
+export const menuItemOverridesResolver = (props, styles) => {
+  const { ownerState } = props;
+
+  return [
+    styles.root,
+    ownerState.dense && styles.dense,
+    ownerState.divider && styles.divider,
+    !ownerState.disableGutters && styles.gutters,
+  ];
+};
+
+export function getMenuItemRootStyles(theme, classes, options = {}) {
+  const focusVisibleClass = options.focusVisibleClass ?? classes.focusVisible;
+  const disabledPointerEvents = options.disabledPointerEvents ?? false;
+
+  return {
+    ...theme.typography.body1,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    position: 'relative',
+    textDecoration: 'none',
+    minHeight: 48,
+    paddingTop: 6,
+    paddingBottom: 6,
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+      textDecoration: 'none',
+      backgroundColor: (theme.vars || theme).palette.action.hover,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+    [`&.${classes.selected}`]: {
+      backgroundColor: theme.alpha(
+        (theme.vars || theme).palette.primary.main,
+        (theme.vars || theme).palette.action.selectedOpacity,
+      ),
+      ...(focusVisibleClass && {
+        [`&.${focusVisibleClass}`]: {
+          backgroundColor: theme.alpha(
+            (theme.vars || theme).palette.primary.main,
+            `${(theme.vars || theme).palette.action.selectedOpacity} + ${
+              (theme.vars || theme).palette.action.focusOpacity
+            }`,
+          ),
+        },
+      }),
+    },
+    [`&.${classes.selected}:hover`]: {
+      backgroundColor: theme.alpha(
+        (theme.vars || theme).palette.primary.main,
+        `${(theme.vars || theme).palette.action.selectedOpacity} + ${
+          (theme.vars || theme).palette.action.hoverOpacity
+        }`,
+      ),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.alpha(
+          (theme.vars || theme).palette.primary.main,
+          (theme.vars || theme).palette.action.selectedOpacity,
+        ),
+      },
+    },
+    ...(focusVisibleClass && {
+      [`&.${focusVisibleClass}`]: {
+        backgroundColor: (theme.vars || theme).palette.action.focus,
+      },
+    }),
+    [`&.${classes.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      ...(disabledPointerEvents && {
+        pointerEvents: 'none',
+        cursor: 'default',
+      }),
+    },
+    [`& + .${dividerClasses.root}`]: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    [`& + .${dividerClasses.inset}`]: {
+      marginLeft: 52,
+    },
+    [`& .${listItemTextClasses.root}`]: {
+      marginTop: 0,
+      marginBottom: 0,
+    },
+    [`& .${listItemTextClasses.inset}`]: {
+      paddingLeft: 36,
+    },
+    [`& .${listItemIconClasses.root}`]: {
+      minWidth: 36,
+    },
+    variants: [
+      {
+        props: ({ ownerState }) => !ownerState.disableGutters,
+        style: {
+          paddingLeft: 16,
+          paddingRight: 16,
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.divider,
+        style: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+          backgroundClip: 'padding-box',
+        },
+      },
+      {
+        props: ({ ownerState }) => !ownerState.dense,
+        style: {
+          [theme.breakpoints.up('sm')]: {
+            minHeight: 'auto',
+          },
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.dense,
+        style: {
+          minHeight: 32, // https://m2.material.io/components/menus#specs > Dense
+          paddingTop: 4,
+          paddingBottom: 4,
+          ...theme.typography.body2,
+          [`& .${listItemIconClasses.root} svg`]: {
+            fontSize: '1.25rem',
+          },
+        },
+      },
+    ],
+  };
+}