[POC] MenuButton - Option 2 implementation

mui · Jan 3, 2023 · 70f5b6a · 70f5b6a
1 parent d17b252
commit 70f5b6a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/docs/pages/experiments/base/menu.tsx b/docs/pages/experiments/base/menu.tsx
@@ -140,20 +140,22 @@ export default function UnstyledMenuIntroduction() {
     <Page>
       <MenuButtonUnstyled
         slots={{ root: MenuButton }}
-        label="My account"
         open={isOpen}
         onOpenChange={handleOpenChange}
+        popup={
+          <MenuUnstyled
+            slots={{ root: Popper, listbox: StyledListbox }}
+            slotProps={{ root: { placement: 'bottom-start' }, listbox: { id: 'simple-menu' } }}
+          >
+            <StyledMenuItem onClick={createHandleMenuClick('Profile')}>Profile</StyledMenuItem>
+            <StyledMenuItem onClick={createHandleMenuClick('My account')}>
+              Language settings
+            </StyledMenuItem>
+            <StyledMenuItem onClick={createHandleMenuClick('Log out')}>Log out</StyledMenuItem>
+          </MenuUnstyled>
+        }
       >
-        <MenuUnstyled
-          slots={{ root: Popper, listbox: StyledListbox }}
-          slotProps={{ root: { placement: 'bottom-start' }, listbox: { id: 'simple-menu' } }}
-        >
-          <StyledMenuItem onClick={createHandleMenuClick('Profile')}>Profile</StyledMenuItem>
-          <StyledMenuItem onClick={createHandleMenuClick('My account')}>
-            Language settings
-          </StyledMenuItem>
-          <StyledMenuItem onClick={createHandleMenuClick('Log out')}>Log out</StyledMenuItem>
-        </MenuUnstyled>
+        My account
       </MenuButtonUnstyled>
     </Page>
   );

diff --git a/packages/mui-base/src/MenuUnstyled/MenuButtonUnstyled.tsx b/packages/mui-base/src/MenuUnstyled/MenuButtonUnstyled.tsx
@@ -7,14 +7,14 @@ import { useSlotProps } from '../utils';
 
 export interface MenuButtonProps {
   className?: string;
-  label?: string;
   open?: boolean;
   onOpenChange?: (
     event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
     open: boolean,
   ) => void;
   defaultOpen?: boolean;
   children?: React.ReactNode;
+  popup?: React.ReactNode;
   slots?: {
     root?: React.ElementType;
   };
@@ -36,10 +36,10 @@ const MenuButton = React.forwardRef(function MenuButton(
 ) {
   const {
     children,
-    label,
     open: openProp,
     defaultOpen,
     onOpenChange,
+    popup,
     slots = {},
     slotProps = {},
     ...other
@@ -102,8 +102,8 @@ const MenuButton = React.forwardRef(function MenuButton(
 
   return (
     <MenuTriggerContext.Provider value={contextValue}>
-      <Root {...rootProps}>{label}</Root>
-      {children}
+      <Root {...rootProps}>{children}</Root>
+      {popup}
     </MenuTriggerContext.Provider>
   );
 });