[Doc] fix examples of custom UserMenu items across the docs to support keyboard navigation

docs/AppBar.md

@@ -238,21 +238,29 @@ The content of the user menu depends on the return value of `authProvider.getIde
 You can customize the user menu by passing a `userMenu` prop to the `<AppBar>` component.
 
 ```jsx
+import * as React from 'react';
 import { AppBar, UserMenu, useUserMenu } from 'react-admin';
 import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 
-const SettingsMenuItem = () => {
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
+const SettingsMenuItem = React.forwardRef((props, ref) => {
+    // We are not using MenuItemLink so we retrieve the onClose function from the UserContext
     const { onClose } = useUserMenu();
     return (
-        <MenuItem onClick={onClose}>
+        <MenuItem
+            onClick={onClose}
+            ref={ref}
+            {/* It's important to pass the props to allow MUI to manage the keyboard navigation */}
+            {...props}
+        >
             <ListItemIcon>
                 <SettingsIcon fontSize="small" />
             </ListItemIcon>
             <ListItemText>Customize</ListItemText>
         </MenuItem>
     );
-};
+});
 
 const MyAppBar = () => (
     <AppBar

docs/Authentication.md

@@ -342,13 +342,16 @@ import { useLogout } from 'react-admin';
 import MenuItem from '@mui/material/MenuItem';
 import ExitIcon from '@mui/icons-material/PowerSettingsNew';
 
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
 const MyLogoutButton = forwardRef((props, ref) => {
     const logout = useLogout();
     const handleClick = () => logout();
     return (
         <MenuItem
             onClick={handleClick}
             ref={ref}
+            {/* It's important to pass the props to allow MUI to manage the keyboard navigation */}
+            {...props}
         >
             <ExitIcon /> Logout
         </MenuItem>

docs/ContainerLayout.md

@@ -161,16 +161,19 @@ By default, the `<ContainerLayout>` shows a user menu with a single item (logout
 
 {% raw %}
 ```jsx
+import * as React from 'react';
 import { Logout, UserMenu, useUserMenu } from 'react-admin';
 import { MenuList, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { ContainerLayout } from '@react-admin/ra-navigation';
 
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
 const ConfigurationMenu = React.forwardRef((props, ref) => {
     const { onClose } = useUserMenu();
     return (
         <MenuItem
             ref={ref}
+            {/* It's important to pass the props to allow MUI to manage the keyboard navigation */}
             {...props}
             to="/configuration"
             onClick={onClose}

docs/Theming.md

@@ -576,7 +576,7 @@ const ConfigurationMenu = React.forwardRef((props, ref) => {
         <MenuItem
             ref={ref}
             component={Link}
-            // It's important to pass the props to allow MUI to manage the keyboard navigation
+            {/* It's important to pass the props to allow MUI to manage the keyboard navigation */}
             {...props}
             to="/configuration"
         >
@@ -591,15 +591,15 @@ const ConfigurationMenu = React.forwardRef((props, ref) => {
 });
 
 // It's important to pass the ref to allow MUI to manage the keyboard navigation
-const SwitchLanguage = forwardRef((props, ref) => {
+const SwitchLanguage = React.forwardRef((props, ref) => {
     const [locale, setLocale] = useLocaleState();
     // We are not using MenuItemLink so we retrieve the onClose function from the UserContext
     const { onClose } = useUserMenu();
 
     return (
         <MenuItem
             ref={ref}
-            // It's important to pass the props to allow MUI to manage the keyboard navigation
+            {/* It's important to pass the props to allow MUI to manage the keyboard navigation */}
             {...props}
             sx={{ color: 'text.secondary' }}
             onClick={event => {

docs/useLogout.md

@@ -15,13 +15,16 @@ import { AppBar, Layout, UserMenu, useLogout } from 'react-admin';
 import { MenuItem } from '@mui/material';
 import ExitIcon from '@mui/icons-material/PowerSettingsNew';
 
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
 const MyLogoutButton = forwardRef((props, ref) => {
     const logout = useLogout();
     const handleClick = () => logout();
     return (
         <MenuItem
             onClick={handleClick}
             ref={ref}
+            {/* It's important to pass the props to allow MUI to manage the keyboard navigation */}
+            {...props}
         >
             <ExitIcon /> Logout
         </MenuItem>