[docs][Menu][joy] Explain how to control the open state (#38355)

Signed-off-by: Michał Dudak <[email protected]>
Co-authored-by: Sam Sycamore <[email protected]>

docs/data/joy/components/menu/ControlledDropdown.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Dropdown from '@mui/joy/Dropdown';
+import Menu from '@mui/joy/Menu';
+import MenuButton from '@mui/joy/MenuButton';
+import MenuItem from '@mui/joy/MenuItem';
+
+export default function ControlledDropdown() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback((event, isOpen) => {
+    setOpen(isOpen);
+  }, []);
+
+  return (
+    <Dropdown open={open} onOpenChange={handleOpenChange}>
+      <MenuButton>Dashboard...</MenuButton>
+      <Menu>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>My account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}

docs/data/joy/components/menu/ControlledDropdown.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Dropdown from '@mui/joy/Dropdown';
+import Menu from '@mui/joy/Menu';
+import MenuButton from '@mui/joy/MenuButton';
+import MenuItem from '@mui/joy/MenuItem';
+
+export default function ControlledDropdown() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback(
+    (event: React.SyntheticEvent | null, isOpen: boolean) => {
+      setOpen(isOpen);
+    },
+    [],
+  );
+
+  return (
+    <Dropdown open={open} onOpenChange={handleOpenChange}>
+      <MenuButton>Dashboard...</MenuButton>
+      <Menu>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>My account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}

docs/data/joy/components/menu/ControlledDropdown.tsx.preview

@@ -0,0 +1,8 @@
+<Dropdown open={open} onOpenChange={handleOpenChange}>
+  <MenuButton>Dashboard...</MenuButton>
+  <Menu>
+    <MenuItem>Profile</MenuItem>
+    <MenuItem>My account</MenuItem>
+    <MenuItem>Logout</MenuItem>
+  </Menu>
+</Dropdown>

docs/data/joy/components/menu/menu.md

@@ -98,6 +98,13 @@ For example, this is how you'd go for displaying the menu on the bottom-end of t
 
 {{"demo": "GroupMenu.js"}}
 
+### Controlling the open state
+
+By default, the open/close state of the menu is managed internally by the Dropdown component.
+To control it programmatically from the outside, apply the Dropdown's `open` and `onOpenChange` props as shown below:
+
+{{"demo": "ControlledDropdown.js"}}
+
 ### `MenuList` composition
 
 To get full control of the DOM structure, use the `MenuList` component.