Add support for keyboard shortcuts to <MenuItemLink>

docs/Menu.md

@@ -183,16 +183,35 @@ export const MyMenu = () => (
 );
 ```
 
-| Prop          | Required | Type                 | Default | Description                              |
-| ------------- | -------- | -------------------- | ------- | ---------------------------------------- |
-| `to`          | Required | `string | location`  | -       | The menu item's target. It is passed to a React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component. |
-| `primaryText` | Required | `ReactNode`          | -       | The menu content, displayed when the menu isn't minimized. |
-| `leftIcon`    | Optional | `ReactNode`          | -       | The menu icon |
+| Prop                             | Required | Type                 | Default              | Description                              |
+| -------------------------------- | -------- | -------------------- | -------------------- | ---------------------------------------- |
+| `to`                             | Required | `string | location`  | -                    | The menu item's target. It is passed to a React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component. | 
+| `primaryText`                    | Required | `ReactNode`          | -                    | The menu content, displayed when the menu isn't minimized. |
+| `keyboardShortcut`               | Optional | `string`  | -                    | The keyboard shortcut(s) to activate this menu item |
+| `keyboardShortcut Representation` | Optional | `ReactNode`          | `<KeyboardShortcut>` | A react node that displays the keyboard shortcut |
+| `leftIcon`                       | Optional | `ReactNode`          | -                    | The menu icon |
+| `sx`                             | Optional | `SxProp`             | -                    | Style overrides, powered by MUI System |
 
 Additional props are passed down to [the underling Material UI `<MenuItem>` component](https://mui.com/material-ui/api/menu-item/).
 
+### `to`
 
-The `primaryText` prop accepts a string, that react-admin passes through the [translation utility](./Translation.md). Alternately, you can set the menu item content using the `children`, e.g. to display a badge on top of the menu item:
+The menu item's target. It is passed to a React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component.
+
+```tsx
+// in src/MyMenu.js
+import { Menu } from 'react-admin';
+
+export const MyMenu = () => (
+    <Menu>
+        <Menu.Item to="/custom-route" primaryText="Miscellaneous" />
+    </Menu>
+);
+```
+
+### `primaryText`
+
+The menu content, displayed when the menu isn't minimized. It accepts a string, that react-admin passes through the [translation utility](./Translation.md). Alternately, you can set the menu item content using the `children`, e.g. to display a badge on top of the menu item:
 
 ```jsx
 import Badge from '@mui/material/Badge';
@@ -212,6 +231,50 @@ export const MyMenu = () => (
 
 Note that if you use the `children` prop, you'll have to translate the menu item content yourself using [`useTranslate`](./useTranslate.md). You'll also need to provide a `primaryText` either way, because it will be rendered in the tooltip when the side menu is collapsed.
 
+### `keyboardShortcut`
+
+The keyboard shortcut(s) to activate this menu item. Pass a string or an array of string that defines the supported keyboard shortcuts:
+
+```tsx
+export const MyMenu = () => (
+    <Menu>
+        <Menu.Item
+            to="/sales"
+            primaryText="Sales"
+            // G key then S key
+            keyboardShortcut="G>S"
+        />
+    </Menu>
+);
+```
+
+![A menu with keyboard shortcuts displayed](./img/menu-shortcuts.png)
+
+This leverages the [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook) library, checkout [their documentation](https://react-hotkeys-hook.vercel.app/docs/documentation/useHotkeys/basic-usage) for more examples.
+
+### `keyboardShortcutRepresentation`
+
+A React node that displays the keyboard shortcut. It defaults to `<KeyboardShortcut>`. You can customize it by providing your own:
+
+```tsx
+const CustomMenu = () => (
+    <Menu>
+        <Menu.Item
+            to="/sales"
+            primaryText="Sales"
+            keyboardShortcut="G>S"
+            // Render a simple textual representation of the shortcut
+            keyboardShortcutRepresentation="G then S"
+        />
+    </Menu>
+);
+```
+
+![A menu with keyboard shortcuts displayed](./img/menu-custom-shortcuts.png)
+
+
+### `leftIcon`
+
 The `letfIcon` prop allows setting the menu left icon.
 
 ```jsx
@@ -231,7 +294,16 @@ export const MyMenu = () => (
 );
 ```
 
-Additional props are passed down to [the underling Material UI `<MenuItem>` component](https://mui.com/material-ui/api/menu-item/).
+### `sx`
+
+You can use the `sx` prop to customize the style of the component.
+
+| Rule name                   | Description                                                         |
+|-----------------------------|---------------------------------------------------------------------|
+| `&.RaMenuItemLink-active`  | Applied to the underlying `MuiMenuItem`'s `activeClassName` prop    |
+| `& .RaMenuItemLink-icon`    | Applied to the `ListItemIcon` component when `leftIcon` prop is set |
+
+To override the style of all instances of `<MenuItemLink>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaMenuItemLink` key.
 
 **Tip**: The `<Menu.Item>` component makes use of the React Router [NavLink](https://reactrouter.com/docs/en/v6/components/nav-link) component, hence allowing to customize the active menu style. For instance, here is how to use a custom theme to show a left border for the active menu:
 
@@ -260,15 +332,6 @@ export const theme = {
 };
 ```
 
-You can use the `sx` prop to customize the style of the component.
-
-| Rule name                   | Description                                                         |
-|-----------------------------|---------------------------------------------------------------------|
-| `&.RaMenuItemLink-active`  | Applied to the underlying `MuiMenuItem`'s `activeClassName` prop    |
-| `& .RaMenuItemLink-icon`    | Applied to the `ListItemIcon` component when `leftIcon` prop is set |
-
-To override the style of all instances of `<MenuItemLink>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaMenuItemLink` key.
-
 ## `<Menu.DashboardItem>`
 
 The `<Menu.DashboardItem>` component displays a menu item for the dashboard.

examples/simple/src/Layout.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { AppBar, Layout, InspectorButton, TitlePortal } from 'react-admin';
+import {
+    AppBar,
+    Layout,
+    Menu,
+    InspectorButton,
+    TitlePortal,
+} from 'react-admin';
 import '../assets/app.css';
 
 const MyAppBar = () => (
@@ -10,9 +16,20 @@ const MyAppBar = () => (
     </AppBar>
 );
 
+const MyMenu = () => (
+    <Menu>
+        <Menu.ResourceItem name="posts" keyboardShortcut="g>p" />
+        <Menu.ResourceItem name="comments" keyboardShortcut="g>c" />
+        <Menu.ResourceItem name="tags" keyboardShortcut="g>t" />
+        <Menu.ResourceItem name="users" keyboardShortcut="g>u" />
+    </Menu>
+);
+
 export default ({ children }) => (
     <>
-        <Layout appBar={MyAppBar}>{children}</Layout>
+        <Layout appBar={MyAppBar} menu={MyMenu}>
+            {children}
+        </Layout>
         <ReactQueryDevtools
             initialIsOpen={false}
             buttonPosition="bottom-left"

jest.config.js

@@ -25,7 +25,7 @@ module.exports = {
         '/packages/create-react-admin/templates',
     ],
     transformIgnorePatterns: [
-        '[/\\\\]node_modules[/\\\\](?!(@hookform)/).+\\.(js|jsx|mjs|ts|tsx)$',
+        '[/\\\\]node_modules[/\\\\](?!(@hookform|react-hotkeys-hook)/).+\\.(js|jsx|mjs|ts|tsx)$',
     ],
     transform: {
         // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`

packages/ra-ui-materialui/package.json

@@ -79,6 +79,7 @@
         "query-string": "^7.1.3",
         "react-dropzone": "^14.2.3",
         "react-error-boundary": "^4.0.13",
+        "react-hotkeys-hook": "^5.1.0",
         "react-transition-group": "^4.4.5"
     },
     "gitHead": "587df4c27bfcec4a756df4f95e5fc14728dfc0d7"

packages/ra-ui-materialui/src/KeyboardShortcut.stories.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import {
+    createTheme,
+    List,
+    ListItem,
+    ListItemText,
+    Paper,
+    ThemeProvider,
+} from '@mui/material';
+import { KeyboardShortcut } from './KeyboardShortcut';
+import { defaultTheme } from './theme';
+
+export default {
+    title: 'ra-ui-materialui/KeyboardShortcut',
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <ThemeProvider theme={createTheme(defaultTheme)}>
+        <Paper sx={{ maxWidth: '60%', mx: 'auto', p: 2, mt: 2 }}>
+            {children}
+        </Paper>
+    </ThemeProvider>
+);
+
+export const Default = () => (
+    <Wrapper>
+        <List>
+            <ListItem
+                secondaryAction={<KeyboardShortcut keyboardShortcut="meta+K" />}
+            >
+                <ListItemText primary="meta and k" />
+            </ListItem>
+            <ListItem
+                secondaryAction={
+                    <KeyboardShortcut keyboardShortcut="shift+a" />
+                }
+            >
+                <ListItemText primary="shift and a" />
+            </ListItem>
+            <ListItem
+                secondaryAction={<KeyboardShortcut keyboardShortcut="mod+B" />}
+            >
+                <ListItemText primary="mod and b" />
+            </ListItem>
+            <ListItem
+                secondaryAction={<KeyboardShortcut keyboardShortcut="alt+F" />}
+            >
+                <ListItemText primary="alt and f" />
+            </ListItem>
+            <ListItem
+                secondaryAction={
+                    <KeyboardShortcut keyboardShortcut="escape+F" />
+                }
+            >
+                <ListItemText primary="escape and f" />
+            </ListItem>
+            <ListItem
+                secondaryAction={<KeyboardShortcut keyboardShortcut="esc+F" />}
+            >
+                <ListItemText primary="escape (written esc) and f" />
+            </ListItem>
+            <ListItem
+                secondaryAction={
+                    <KeyboardShortcut keyboardShortcut="shift+up" />
+                }
+            >
+                <ListItemText primary="shift and up" />
+            </ListItem>
+            <ListItem
+                secondaryAction={<KeyboardShortcut keyboardShortcut="ctrl+d" />}
+            >
+                <ListItemText primary="ctrl and d" />
+            </ListItem>
+            <ListItem
+                secondaryAction={
+                    <KeyboardShortcut keyboardShortcut="meta+K>X" />
+                }
+            >
+                <ListItemText primary="Meta and k then x" />
+            </ListItem>
+            <ListItem
+                secondaryAction={
+                    <KeyboardShortcut keyboardShortcut="space>a" />
+                }
+            >
+                <ListItemText primary="Space then a" />
+            </ListItem>
+            <ListItem
+                secondaryAction={<KeyboardShortcut keyboardShortcut="g>g" />}
+            >
+                <ListItemText primary="g then g" />
+            </ListItem>
+            <ListItem
+                secondaryAction={
+                    <KeyboardShortcut keyboardShortcut="ctrl+shift+a+c" />
+                }
+            >
+                <ListItemText primary="ctrl and shift and a and c" />
+            </ListItem>
+        </List>
+    </Wrapper>
+);