[POC] Slots using render props

docs/pages/experiments/base/render-props.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Menu } from '@mui/base/Menu';
+import { MenuItem } from '@mui/base/MenuItem';
+import { MenuButton, MenuButtonRootSlotProps } from '@mui/base/MenuButton';
+import { Dropdown } from '@mui/base/Dropdown';
+import IconButton from '@mui/joy/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import { CssVarsProvider } from '@mui/joy';
+
+function WithRenderProp() {
+  return (
+    <Dropdown>
+      <MenuButton
+        renderRoot={(props) => (
+          <IconButton data-testid="hamburger-menu" {...props}>
+            <MenuIcon />
+          </IconButton>
+        )}
+      />
+      <Menu>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>My account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
+
+function WithSlotsAndSlotProps() {
+  return (
+    <Dropdown>
+      <MenuButton
+        slots={{
+          root: IconButton,
+        }}
+        slotProps={{
+          root: {
+            'data-testid': 'hamburger-menu',
+          } as any, // data attributes are not accepted by slotProps
+        }}
+      >
+        <MenuIcon />
+      </MenuButton>
+      <Menu>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>My account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
+
+const MenuIconButton = React.forwardRef(function MenuIconButton(
+  props: MenuButtonRootSlotProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <IconButton data-testid="hamburger-menu" {...props} ref={ref}>
+      {props.children}
+    </IconButton>
+  );
+});
+
+function WithSlots() {
+  return (
+    <Dropdown>
+      <MenuButton
+        slots={{
+          root: MenuIconButton,
+        }}
+      >
+        <MenuIcon />
+      </MenuButton>
+      <Menu>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>My account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
+
+export default function RenderProps() {
+  return (
+    <CssVarsProvider>
+      <WithRenderProp />
+      <WithSlotsAndSlotProps />
+      <WithSlots />
+    </CssVarsProvider>
+  );
+}

packages/mui-base/src/MenuButton/MenuButton.tsx

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { MenuButtonOwnerState, MenuButtonProps } from './MenuButton.types';
-import { useSlotProps } from '../utils';
+import { MenuButtonOwnerState, MenuButtonProps, MenuButtonRootSlotProps } from './MenuButton.types';
+import { useSlotProps, WithOptionalOwnerState } from '../utils';
 import { useMenuButton } from '../useMenuButton';
 import { unstable_composeClasses as composeClasses } from '../composeClasses';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
@@ -39,6 +39,7 @@ const MenuButton = React.forwardRef(function MenuButton(
     slots = {},
     slotProps = {},
     focusableWhenDisabled = false,
+    renderRoot,
     ...other
   } = props;
 
@@ -59,20 +60,28 @@ const MenuButton = React.forwardRef(function MenuButton(
   const classes = useUtilityClasses(ownerState);
 
   const Root = slots.root || 'button';
-  const rootProps = useSlotProps({
+  const rootProps: WithOptionalOwnerState<MenuButtonRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
     externalForwardedProps: other,
     externalSlotProps: slotProps.root,
     additionalProps: {
       ref: forwardedRef,
       type: 'button',
+      children,
     },
     ownerState,
     className: classes.root,
   });
 
-  return <Root {...rootProps}>{children}</Root>;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { ownerState: _, ...otherRootProps } = rootProps;
+
+  return renderRoot ? (
+    renderRoot(otherRootProps, ownerState)
+  ) : (
+    <Root {...rootProps}>{children}</Root>
+  );
 });
 
 MenuButton.propTypes /* remove-proptypes */ = {

packages/mui-base/src/MenuButton/MenuButton.types.ts

@@ -1,3 +1,4 @@
+import { UseMenuButtonRootSlotProps } from '../useMenuButton';
 import { SlotComponentProps } from '../utils/types';
 
 export interface MenuButtonRootSlotPropsOverrides {}
@@ -35,6 +36,11 @@ export interface MenuButtonProps {
   slotProps?: {
     root?: SlotComponentProps<'button', MenuButtonRootSlotPropsOverrides, MenuButtonOwnerState>;
   };
+
+  renderRoot?: (
+    props: Omit<MenuButtonRootSlotProps, 'ownerState'>,
+    ownerState: MenuButtonOwnerState,
+  ) => React.JSX.Element;
 }
 
 export interface MenuButtonSlots {
@@ -50,3 +56,8 @@ export type MenuButtonOwnerState = MenuButtonProps & {
   focusableWhenDisabled: boolean;
   open: boolean;
 };
+
+export type MenuButtonRootSlotProps = UseMenuButtonRootSlotProps & {
+  ownerState: MenuButtonOwnerState;
+  children?: React.ReactNode;
+};

packages/mui-base/src/useMenuButton/useMenuButton.types.ts

@@ -15,7 +15,8 @@ export interface UseMenuButtonParameters {
   rootRef?: React.Ref<HTMLElement>;
 }
 
-type UseMenuButtonRootSlotProps<ExternalProps = {}> = ExternalProps & UseMenuButtonRootSlotOwnProps;
+export type UseMenuButtonRootSlotProps<ExternalProps = {}> = ExternalProps &
+  UseMenuButtonRootSlotOwnProps;
 
 interface UseMenuButtonRootSlotOwnProps {
   'aria-haspopup': 'menu';