From efb793f3ec135a8a8f2124af1a682f83ef04732d Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Mon, 17 Apr 2023 15:28:46 +0800 Subject: [PATCH 1/9] update useLogout UserMenu --- docs/useLogout.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/useLogout.md b/docs/useLogout.md index 481a6427309..f2ccf34d575 100644 --- a/docs/useLogout.md +++ b/docs/useLogout.md @@ -15,6 +15,7 @@ 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(); @@ -22,6 +23,8 @@ const MyLogoutButton = forwardRef((props, ref) => { Logout From e7cbc62aafd057cded48376bde65756f0606bc0e Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Mon, 17 Apr 2023 15:36:21 +0800 Subject: [PATCH 2/9] Fix forwardRef for AppBar UserMenu --- docs/AppBar.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/AppBar.md b/docs/AppBar.md index 50d9dbafbe7..e948ce20822 100644 --- 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 `` 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 ( - + Customize ); -}; +}); const MyAppBar = () => ( Date: Mon, 17 Apr 2023 15:46:19 +0800 Subject: [PATCH 3/9] fix authentication usermenu --- docs/Authentication.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/Authentication.md b/docs/Authentication.md index 82f2ad5ad3e..4a7061e3845 100644 --- a/docs/Authentication.md +++ b/docs/Authentication.md @@ -342,6 +342,7 @@ 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(); @@ -349,6 +350,8 @@ const MyLogoutButton = forwardRef((props, ref) => { Logout From dbb25d7929799c394f5ef509eb6222c186c33e5d Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Mon, 17 Apr 2023 15:53:37 +0800 Subject: [PATCH 4/9] fix usermenu example on theming --- docs/Theming.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index 1938444956b..14504a78b1b 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -576,7 +576,7 @@ const ConfigurationMenu = React.forwardRef((props, ref) => { @@ -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(); @@ -599,7 +599,7 @@ const SwitchLanguage = forwardRef((props, ref) => { return ( { From a70d83eb61c1dcd3a2f955caf064369b57f900b7 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Mon, 17 Apr 2023 16:06:51 +0800 Subject: [PATCH 5/9] fix usermenu in containerlayout --- docs/ContainerLayout.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/ContainerLayout.md b/docs/ContainerLayout.md index 8795e05b843..4bf09eeb9ed 100644 --- a/docs/ContainerLayout.md +++ b/docs/ContainerLayout.md @@ -161,16 +161,19 @@ By default, the `` 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 ( Date: Thu, 20 Apr 2023 01:26:44 +0800 Subject: [PATCH 6/9] fix appbar stories --- docs/AppBar.md | 2 +- docs/Authentication.md | 2 +- docs/ContainerLayout.md | 2 +- docs/Theming.md | 2 +- docs/useLogout.md | 2 +- .../ra-ui-materialui/src/layout/AppBar.stories.tsx | 13 ++++++++++--- 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/docs/AppBar.md b/docs/AppBar.md index e948ce20822..b5964385adf 100644 --- a/docs/AppBar.md +++ b/docs/AppBar.md @@ -251,7 +251,7 @@ const SettingsMenuItem = React.forwardRef((props, ref) => { diff --git a/docs/Authentication.md b/docs/Authentication.md index 4a7061e3845..135456b9aa4 100644 --- a/docs/Authentication.md +++ b/docs/Authentication.md @@ -350,7 +350,7 @@ const MyLogoutButton = forwardRef((props, ref) => { Logout diff --git a/docs/ContainerLayout.md b/docs/ContainerLayout.md index 4bf09eeb9ed..934b669f24c 100644 --- a/docs/ContainerLayout.md +++ b/docs/ContainerLayout.md @@ -173,7 +173,7 @@ const ConfigurationMenu = React.forwardRef((props, ref) => { return ( { diff --git a/docs/useLogout.md b/docs/useLogout.md index f2ccf34d575..31aca550f4c 100644 --- a/docs/useLogout.md +++ b/docs/useLogout.md @@ -23,7 +23,7 @@ const MyLogoutButton = forwardRef((props, ref) => { Logout diff --git a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx index ddb4d5fb63c..f9658b60c99 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx +++ b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx @@ -197,17 +197,24 @@ export const UserMenuCustom = () => ( ); -const SettingsMenuItem = () => { +// It's important to pass the ref to allow MUI to manage the keyboard navigation +const SettingsMenuItem : React.FC = React.forwardRef((props, ref) => { + // We are not using MenuItemLink so we retrieve the onClose function from the UserContext const { onClose } = useUserMenu(); return ( - + Customize ); -}; +}); export const UserMenuElements = () => ( From 4a2b78e7a3bca2de60492f57750f17ee52e03261 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 20 Apr 2023 01:38:20 +0800 Subject: [PATCH 7/9] fix appbar stories --- .../src/layout/AppBar.stories.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx index f9658b60c99..cf049a3fc1b 100644 --- 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'; @@ -198,23 +199,25 @@ export const UserMenuCustom = () => ( ); // It's important to pass the ref to allow MUI to manage the keyboard navigation -const SettingsMenuItem : React.FC = React.forwardRef((props, ref) => { - // We are not using MenuItemLink so we retrieve the onClose function from the UserContext - const { onClose } = useUserMenu(); - return ( - - - - - Customize - - ); -}); +const SettingsMenuItem: React.FC = React.forwardRef( + (props, ref) => { + // We are not using MenuItemLink so we retrieve the onClose function from the UserContext + const { onClose } = useUserMenu(); + return ( + + + + + Customize + + ); + } +); export const UserMenuElements = () => ( From 88cdab2bee284c96c1b54e5612edcaee0cab438a Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 20 Apr 2023 01:54:31 +0800 Subject: [PATCH 8/9] fix theming.md --- docs/Theming.md | 2 +- .../src/layout/AppBar.stories.tsx | 37 +++++++++---------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index 9fcb9fb56a2..e05549c60a5 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -599,7 +599,7 @@ const SwitchLanguage = React.forwardRef((props, ref) => { return ( { diff --git a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx index cf049a3fc1b..d9058fab2ec 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx +++ b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx @@ -8,7 +8,6 @@ import { ListItemText, TextField, Skeleton, - MenuItemProps, } from '@mui/material'; import SettingsIcon from '@mui/icons-material/Settings'; import { QueryClientProvider, QueryClient } from 'react-query'; @@ -199,25 +198,23 @@ export const UserMenuCustom = () => ( ); // It's important to pass the ref to allow MUI to manage the keyboard navigation -const SettingsMenuItem: React.FC = React.forwardRef( - (props, ref) => { - // We are not using MenuItemLink so we retrieve the onClose function from the UserContext - const { onClose } = useUserMenu(); - return ( - - - - - Customize - - ); - } -); +const SettingsMenuItem = React.forwardRef((props, ref) => { + // We are not using MenuItemLink so we retrieve the onClose function from the UserContext + const { onClose } = useUserMenu(); + return ( + + + + + Customize + + ); +}); export const UserMenuElements = () => ( From c3c1ccbcb6b3aef4c1a3073d6b3d9a1bea6470f3 Mon Sep 17 00:00:00 2001 From: motion Date: Mon, 24 Apr 2023 11:49:46 +0800 Subject: [PATCH 9/9] make sure the stories no longer have typescript issue --- .../src/layout/AppBar.stories.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx index d9058fab2ec..cf049a3fc1b 100644 --- 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'; @@ -198,23 +199,25 @@ export const UserMenuCustom = () => ( ); // 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 ( - - - - - Customize - - ); -}); +const SettingsMenuItem: React.FC = React.forwardRef( + (props, ref) => { + // We are not using MenuItemLink so we retrieve the onClose function from the UserContext + const { onClose } = useUserMenu(); + return ( + + + + + Customize + + ); + } +); export const UserMenuElements = () => (