[docs][base-ui] Fix Menu Hooks demo (#38479)

mui · Aug 17, 2023 · 8f2f732 · 8f2f732
1 parent 361c788
commit 8f2f732
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 42 deletions.
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
@@ -11,14 +11,16 @@ import { useMenuButton } from '@mui/base/useMenuButton';
 const Menu = React.forwardRef(function Menu(props, ref) {
   const { children, ...other } = props;
 
-  const { contextValue, getListboxProps } = useMenu({
+  const { open, triggerElement, contextValue, getListboxProps } = useMenu({
     listboxRef: ref,
   });
 
   return (
-    <ul className="menu-root" {...other} {...getListboxProps()}>
-      <MenuProvider value={contextValue}>{children}</MenuProvider>
-    </ul>
+    <Popper open={open} anchorEl={triggerElement}>
+      <ul className="menu-root" {...other} {...getListboxProps()}>
+        <MenuProvider value={contextValue}>{children}</MenuProvider>
+      </ul>
+    </Popper>
   );
 });
 
@@ -62,8 +64,7 @@ const MenuButton = React.forwardRef(function MenuButton(props, forwardedRef) {
 });
 
 export default function UseMenu() {
-  const { contextValue: dropdownContextValue, open } = useDropdown();
-  const buttonRef = React.useRef(null);
+  const { contextValue: dropdownContextValue } = useDropdown();
 
   const createHandleMenuClick = (menuItem) => {
     return () => {
@@ -75,16 +76,14 @@ export default function UseMenu() {
     <React.Fragment>
       <GlobalStyles styles={styles} />
       <DropdownContext.Provider value={dropdownContextValue}>
-        <MenuButton ref={buttonRef}>Theme</MenuButton>
-        <Popper open={open} anchorEl={buttonRef.current}>
-          <Menu id="hooks-menu">
-            <MenuItem onClick={createHandleMenuClick('OS Default')}>
-              OS default
-            </MenuItem>
-            <MenuItem onClick={createHandleMenuClick('Light')}>Light</MenuItem>
-            <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
-          </Menu>
-        </Popper>
+        <MenuButton>Theme</MenuButton>
+        <Menu id="hooks-menu">
+          <MenuItem onClick={createHandleMenuClick('OS Default')}>
+            OS default
+          </MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Light')}>Light</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
+        </Menu>
       </DropdownContext.Provider>
     </React.Fragment>
   );

diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
@@ -13,14 +13,16 @@ const Menu = React.forwardRef(function Menu(
 ) {
   const { children, ...other } = props;
 
-  const { contextValue, getListboxProps } = useMenu({
+  const { open, triggerElement, contextValue, getListboxProps } = useMenu({
     listboxRef: ref,
   });
 
   return (
-    <ul className="menu-root" {...other} {...getListboxProps()}>
-      <MenuProvider value={contextValue}>{children}</MenuProvider>
-    </ul>
+    <Popper open={open} anchorEl={triggerElement}>
+      <ul className="menu-root" {...other} {...getListboxProps()}>
+        <MenuProvider value={contextValue}>{children}</MenuProvider>
+      </ul>
+    </Popper>
   );
 });
 
@@ -61,8 +63,7 @@ const MenuButton = React.forwardRef(function MenuButton(
 });
 
 export default function UseMenu() {
-  const { contextValue: dropdownContextValue, open } = useDropdown();
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const { contextValue: dropdownContextValue } = useDropdown();
 
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
@@ -74,16 +75,14 @@ export default function UseMenu() {
     <React.Fragment>
       <GlobalStyles styles={styles} />
       <DropdownContext.Provider value={dropdownContextValue}>
-        <MenuButton ref={buttonRef}>Theme</MenuButton>
-        <Popper open={open} anchorEl={buttonRef.current}>
-          <Menu id="hooks-menu">
-            <MenuItem onClick={createHandleMenuClick('OS Default')}>
-              OS default
-            </MenuItem>
-            <MenuItem onClick={createHandleMenuClick('Light')}>Light</MenuItem>
-            <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
-          </Menu>
-        </Popper>
+        <MenuButton>Theme</MenuButton>
+        <Menu id="hooks-menu">
+          <MenuItem onClick={createHandleMenuClick('OS Default')}>
+            OS default
+          </MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Light')}>Light</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
+        </Menu>
       </DropdownContext.Provider>
     </React.Fragment>
   );

diff --git a/docs/data/base/components/menu/UseMenu.tsx.preview b/docs/data/base/components/menu/UseMenu.tsx.preview
@@ -1,15 +1,13 @@
 <React.Fragment>
   <GlobalStyles styles={styles} />
   <DropdownContext.Provider value={dropdownContextValue}>
-    <MenuButton ref={buttonRef}>Theme</MenuButton>
-    <Popper open={open} anchorEl={buttonRef.current}>
-      <Menu id="hooks-menu">
-        <MenuItem onClick={createHandleMenuClick('OS Default')}>
-          OS default
-        </MenuItem>
-        <MenuItem onClick={createHandleMenuClick('Light')}>Light</MenuItem>
-        <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
-      </Menu>
-    </Popper>
+    <MenuButton>Theme</MenuButton>
+    <Menu id="hooks-menu">
+      <MenuItem onClick={createHandleMenuClick('OS Default')}>
+        OS default
+      </MenuItem>
+      <MenuItem onClick={createHandleMenuClick('Light')}>Light</MenuItem>
+      <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
+    </Menu>
   </DropdownContext.Provider>
 </React.Fragment>