Merge pull request #8837 from smeng9/master

[Doc] fix examples of custom UserMenu items across the docs to support keyboard navigation
marmelab · Apr 24, 2023 · dbb8ba3 · dbb8ba3
2 parents 0572a66 + c3c1ccb
commit dbb8ba3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 15 deletions.
diff --git a/docs/AppBar.md b/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

diff --git a/docs/Authentication.md b/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>

diff --git a/docs/ContainerLayout.md b/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}

diff --git a/docs/Theming.md b/docs/Theming.md
@@ -591,7 +591,7 @@ 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();

diff --git a/docs/useLogout.md b/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>

diff --git a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx
@@ -8,6 +8,7 @@ import {
     ListItemText,
     TextField,
     Skeleton,
+    MenuItemProps,
 } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { QueryClientProvider, QueryClient } from 'react-query';
@@ -197,17 +198,26 @@ export const UserMenuCustom = () => (
     </Wrapper>
 );
 
-const SettingsMenuItem = () => {
-    const { onClose } = useUserMenu();
-    return (
-        <MenuItem onClick={onClose}>
-            <ListItemIcon>
-                <SettingsIcon fontSize="small" />
-            </ListItemIcon>
-            <ListItemText>Customize</ListItemText>
-        </MenuItem>
-    );
-};
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
+const SettingsMenuItem: React.FC<MenuItemProps> = 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}
+                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>
+        );
+    }
+);
 
 export const UserMenuElements = () => (
     <Wrapper>