Merge branch 'master' into next

Author: fzaninotto

.github/CONTRIBUTING.md

@@ -16,7 +16,7 @@ For code issues please include:
 * React-admin version
 * React version
 * Browser version
-* A code example or link to a repo, gist or running site. (hint: fork [this sandbox](https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple) to create a reproducible version of your bug)
+* A code example or link to a repo, gist or running site. (hint: fork [this sandbox](https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple) to create a reproducible version of your bug)
 
 For visual or layout problems, images or animated gifs can help explain your issue.
 It's even better with a live reproduction test case.

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -21,11 +21,9 @@ about: Something isn't working as expected. Please tell us!
 **Related code:**
 <!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means: -->
 
-* Preferably, a CodeSandbox forked from 
-  - https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple (v4)
-  - https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
-* A StackBlitz forked from 
+* Preferably, a sandbox forked from 
   - https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple (v4)
+  - https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
 * A link to a GitHub repo with the minimal codebase to reproduce the issue
 
 

.github/release.yml

@@ -0,0 +1,14 @@
+changelog:
+  categories:
+    - title: Breaking Changes
+      labels:
+        - "breaking change"
+    - title: Fixes
+      labels:
+        - "fix"
+    - title: Documentation
+      labels:
+        - "documentation"
+    - title: TypeScript
+      labels:
+        - "TypeScript"

CHANGELOG.md

@@ -22,7 +22,7 @@ A frontend Framework for building data-driven applications running in the browse
 
 * ☂️ **Opt-In Types**: Develop either in TypeScript or JavaScript
 
-* 👨‍👩‍👧‍👦 Powered by [MUI](https://mui.com/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/), [react-query](https://react-query-v3.tanstack.com/), [TypeScript](https://www.typescriptlang.org/) and a few more
+* 👨‍👩‍👧‍👦 Powered by [Material UI](https://mui.com/material-ui/getting-started/overview/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/), [react-query](https://react-query-v3.tanstack.com/), [TypeScript](https://www.typescriptlang.org/) and a few more
 
 ## Installation
 
@@ -58,7 +58,7 @@ render(
 );
 ```
 
-The `<Resource>` component is a configuration component that allows you to define sub components for each of the admin view: `list`, `edit`, and `create`. These components use MUI and custom components from react-admin:
+The `<Resource>` component is a configuration component that allows you to define sub components for each of the admin view: `list`, `edit`, and `create`. These components use Material UI and custom components from react-admin:
 
 ```jsx
 // in posts.js
@@ -130,11 +130,11 @@ React-admin is designed as a library of loosely coupled React components and hoo
 
 There are several examples inside the `examples` folder:
 
-* `simple` ([CodeSandbox](https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple), [StackBlitz](https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple?file=src%2Findex.tsx)): a simple blog with posts, comments and users that we use for our e2e tests.
+* `simple` ([StackBlitz](https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple?file=src%2Findex.tsx)): a simple blog with posts, comments and users that we use for our e2e tests.
 * `e-commerce`: ([demo](https://marmelab.com/react-admin-demo/), [source](https://github.com/marmelab/react-admin/tree/master/examples/demo)) A fictional poster shop admin, serving as the official react-admin demo.
 * `CRM`: ([demo](https://marmelab.com/react-admin-crm/), [source](https://github.com/marmelab/react-admin/tree/master/examples/crm)) A customer relationship management application
 * `helpdesk`: ([demo](https://marmelab.com/react-admin-helpdesk/), [source](https://github.com/marmelab/react-admin-helpdesk)) A ticketing application with realtime locks and notifications
-* `tutorial` ([CodeSandbox](https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/tutorial)): the application built while following the [tutorial](https://marmelab.com/react-admin/Tutorial.html).
+* `tutorial` ([Stackblitz](https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/tutorial)): the application built while following the [tutorial](https://marmelab.com/react-admin/Tutorial.html).
 
 You can run those example applications by calling:
 
@@ -199,7 +199,7 @@ You can use Gitpod (an open source, online VS Code-like IDE) for working on issu
 
 ### Testing Your Changes In The Example Apps
 
-When developing, most of the time we use the **simple example** to do visual check. It's the same application that we use in CodeSandbox to reproduce errors (see https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple). The source is located under `examples/simple/`. Call `make run` to launch that example on port 8080 (http://localhost:8080). This command includes a `watch` on the react-admin source, so any of the changes you make to the react-admin packages triggers a live update of the simple example in your browser. 
+When developing, most of the time we use the **simple example** to do visual check. It's the same application that we use in Stackblitz to reproduce errors (see https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple). The source is located under `examples/simple/`. Call `make run` to launch that example on port 8080 (http://localhost:8080). This command includes a `watch` on the react-admin source, so any of the changes you make to the react-admin packages triggers a live update of the simple example in your browser. 
 
 However, the simple example is sometimes too limited. You can use the **demo example** (the source for https://marmelab.com/react-admin-demo/), which is more complete. The source is located under `examples/demo/`. Call `make run-demo` to launch the demo example with a REST dataProvider, or `make run-graphql-demo` to run it with a GraphQL dataProvider. Unfortunately, due to the fact that we use Create React App for this demo, these commands don't watch the changes made in the packages. You'll have to rebuild the react-admin packages after a change (using `make build`, or the more targeted `make build-ra-core`, `make build-ra-ui-materialui`, etc.) to see the effect in the demo app.
 

README.md

@@ -209,7 +209,7 @@ const App = () => (
 
 ## `dashboard`
 
-By default, the homepage of an admin app is the `list` of the first child `<Resource>`. But you can also specify a custom component instead. To fit in the general design, use MUI's `<Card>` component, and [react-admin's `<Title>` component](./Title.md) to set the title in the AppBar:
+By default, the homepage of an admin app is the `list` of the first child `<Resource>`. But you can also specify a custom component instead. To fit in the general design, use Material UI's `<Card>` component, and [react-admin's `<Title>` component](./Title.md) to set the title in the AppBar:
 
 ```jsx
 // in src/Dashboard.js
@@ -270,7 +270,7 @@ When users type URLs that don't match any of the children `<Resource>` component
 
 ![Not Found](./img/not-found.png)
 
-You can customize this page to use the component of your choice by passing it as the `catchAll` prop. To fit in the general design, use MUI's `<Card>` component, and [react-admin's `<Title>` component](./Title.md):
+You can customize this page to use the component of your choice by passing it as the `catchAll` prop. To fit in the general design, use Material UI's `<Card>` component, and [react-admin's `<Title>` component](./Title.md):
 
 ```jsx
 // in src/NotFound.js
@@ -342,7 +342,7 @@ export const MyMenu = () => {
 };
 ```
 
-**Tip**: `<Menu.Item>` must be used to avoid unwanted side effects in mobile views. It supports a custom text and icon (which must be a MUI `<SvgIcon>`).
+**Tip**: `<Menu.Item>` must be used to avoid unwanted side effects in mobile views. It supports a custom text and icon (which must be a Material UI `<SvgIcon>`).
 
 Then, pass it to the `<Admin>` component as the `menu` prop:
 
@@ -361,7 +361,7 @@ See the [Theming documentation](./Theming.md#using-a-custom-menu) for more detai
 
 ## `theme`
 
-MUI supports [theming](https://mui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom MUI theme by using the `theme` prop:
+Material UI supports [theming](https://mui.com/material-ui/customization/theming/). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom Material UI theme by using the `theme` prop:
 
 ```jsx
 import { defaultTheme } from 'react-admin';
@@ -450,7 +450,7 @@ You can also disable it completely along with the `/login` route by passing `fal
 
 See The [Authentication documentation](./Authentication.md#customizing-the-login-component) for more details.
 
-**Tip**: Before considering writing your own login page component, please take a look at how to change the default [background image](./Theming.md#using-a-custom-login-page) or the [MUI theme](#theme). See the [Authentication documentation](./Authentication.md#customizing-the-login-component) for more details.
+**Tip**: Before considering writing your own login page component, please take a look at how to change the default [background image](./Theming.md#using-a-custom-login-page) or the [Material UI theme](#theme). See the [Authentication documentation](./Authentication.md#customizing-the-login-component) for more details.
 
 ## `authCallbackPage`
 

docs/Admin.md

@@ -68,7 +68,7 @@ This article shows how you can customize many parts of the framework without rep
 
 ## Changing The Look And Feel Of React-Admin Without JSX
 
-This article shows how to customize react-admin look and feel using only the MUI theme.
+This article shows how to customize react-admin look and feel using only the Material UI theme.
 
 ![Screencast](https://marmelab.com/097bee867a1d1dc55dec5456732fe94a/screencast.gif)
 

docs/AdvancedTutorials.md

@@ -8,7 +8,7 @@ title: "The AppBar Component"
 The default react-admin layout renders a horizontal app bar at the top, which is rendered by the `<AppBar>` component.
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/AppBar.webm" type="video/webm">
+  <source src="./img/AppBar.webm" type="video/webm" />
   Your browser does not support the video tag.
 </video>
 
@@ -22,7 +22,7 @@ By default, the `<AppBar>` component displays:
 
 You can customize the App Bar by creating a custom component based on `<AppBar>`, with different props.
 
-**Tip**: Don't mix react-admin's `<AppBar>` component with [MUI's `<AppBar>` component](https://mui.com/material-ui/api/app-bar/). The first one leverages the second but adds some react-admin-specific features.
+**Tip**: Don't mix react-admin's `<AppBar>` component with [Material UI's `<AppBar>` component](https://mui.com/material-ui/api/app-bar/). The first one leverages the second but adds some react-admin-specific features.
 
 ## Usage
 
@@ -70,7 +70,7 @@ const App = () => (
 | `toolbar`           | Optional | `ReactElement` | -        | The content of the toolbar                          |
 | `userMenu`          | Optional | `ReactElement` | -        | The content of the dropdown user menu               |
 
-Additional props are passed to [the underlying MUI `<AppBar>` element](https://mui.com/material-ui/api/app-bar/).
+Additional props are passed to [the underlying Material UI `<AppBar>` element](https://mui.com/material-ui/api/app-bar/).
 
 ## `children`
 
@@ -121,7 +121,7 @@ const MyAppBar = () => (
 
 ## `color`
 
-React-admin's `<AppBar>` renders an MUI `<AppBar>`, which supports a `color` prop to set the app bar color depending on the theme. By default, the app bar color is set to the `secondary` theme color.
+React-admin's `<AppBar>` renders an Material UI `<AppBar>`, which supports a `color` prop to set the app bar color depending on the theme. By default, the app bar color is set to the `secondary` theme color.
 
 This means you can set the app bar color to 'default', 'inherit', 'primary', 'secondary', 'transparent', or any string.
 
@@ -162,7 +162,7 @@ This property accepts the following subclasses:
 | `& .RaAppBar-menuButton` | Applied to the hamburger icon |
 | `& .RaAppBar-title`      | Applied to the title portal   |
 
-To override the style of `<AppBar>` using the [MUI style overrides](https://mui.com/customization/theme-components/), use the `RaAppBar` key.
+To override the style of `<AppBar>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaAppBar` key.
 
 ## `toolbar`
 
@@ -216,7 +216,7 @@ export const MyAppBar = () => (
 If your app uses [authentication](./Authentication.md), the `<AppBar>` component displays a button to display the user menu on the right side. By default, the user menu only contains a logout button.
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/AppBar-user-menu.webm" type="video/webm">
+  <source src="./img/AppBar-user-menu.webm" type="video/webm"/>
   Your browser does not support the video tag.
 </video>
 
@@ -226,21 +226,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 Material UI 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 Material UI to manage the keyboard navigation
+            {...props}
+        >
             <ListItemIcon>
                 <SettingsIcon fontSize="small" />
             </ListItemIcon>
             <ListItemText>Customize</ListItemText>
         </MenuItem>
     );
-};
+});
 
 const MyAppBar = () => (
     <AppBar
@@ -384,7 +392,7 @@ export const MyAppbar = () => (
 
 ## Building Your Own AppBar
 
-If react-admin's `<AppBar>` component doesn't meet your needs, you can build your own component using MUI's `<AppBar>`. Here is an example:
+If react-admin's `<AppBar>` component doesn't meet your needs, you can build your own component using Material UI's `<AppBar>`. Here is an example:
 
 ```jsx
 // in src/MyAppBar.js
@@ -420,7 +428,7 @@ export const MyLayout = (props) => (
 By default, users can override the page title [in configurable mode](./Features.md#configurable-ui).
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/TitleConfigurable.webm" type="video/webm">
+  <source src="./img/TitleConfigurable.webm" type="video/webm"/>
   Your browser does not support the video tag.
 </video>
 

docs/AppBar.md

@@ -99,13 +99,17 @@ React-admin has two sets of users:
 
 For each feature, we design the User Experience (UX) and the Developer Experience (DX) carefully. 
 
-For the visual part, react-admin builds upon MUI, which is the implementation of the Material Design System. It's a great help to build usable, consistent user interfaces, but it's not enough. 
+For the visual part, react-admin builds upon Material UI, which is the implementation of the Material Design System. It's a great help to build usable, consistent user interfaces, but it's not enough. 
 
 We spend a great deal of time refining the UI to make it as intuitive as possible. We pay attention to small alignment glitches, screen flashes, and color inconsistencies. We iterate with every customer feedback, to remove visual and animation problems that occur in real-life applications.
 
 React-admin produces a user interface that is voluntarily bland by default because we want to emphasize content rather than chrome.
 
-![Sort Button](./img/sort-button.gif)
+<video controls autoplay muted loop>
+  <source src="./img/sort-button.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 As for the developer experience, react-admin is constantly evolving to find the sweet spot between an intuitive API, power user features, not too much magic, and just enough documentation. The core team are the first testers of react-admin, and pay attention to the productivity, debuggability, discoverability, performance, and robustness of all the hooks and components.
 
@@ -115,7 +119,7 @@ Many excellent open-source libraries already address partial requirements of B2B
 
 Rather than reinventing the wheel, react-admin uses the best tools in each category (in terms of features, developer experience, active maintenance, documentation, user base), and provides a glue around these libraries.
 
-In react-admin v4, these libraries are called react-query, react-router, react-hook-form, MUI, testing-library, date-fns, and lodash.
+In react-admin v4, these libraries are called react-query, react-router, react-hook-form, Material UI, testing-library, date-fns, and lodash.
 
 When a new requirement arises, the react-admin teams always looks for an existing solution, and prefers integrating it rather than redeveloping it.
 
@@ -172,7 +176,7 @@ const MyRefreshButton = () => {
 
 Before adding a new hook or a new prop to an existing component, we always check if there isn't a simple way to implement the feature in pure React. If it's the case, then we don't add the new prop. We prefer to keep the react-admin API, code, test, and documentation simple. This choice is crucial to keep the learning curve acceptable, and maintenance burden low.
 
-For instance, the `<SimpleShowLayout>` component displays Field elements in a column. How can you put two fields in a single column? We could add a specific syntax allowing to specify the number of elements per column and per line. This would complicate the usage and documentation for simple use cases. Besides, it's doable in pure React, without any change in the react-admin core, e.g. by leveraging MUI's `<Stack>` component:
+For instance, the `<SimpleShowLayout>` component displays Field elements in a column. How can you put two fields in a single column? We could add a specific syntax allowing to specify the number of elements per column and per line. This would complicate the usage and documentation for simple use cases. Besides, it's doable in pure React, without any change in the react-admin core, e.g. by leveraging Material UI's `<Stack>` component:
 
 ```jsx
 import * as React from 'react';
@@ -224,7 +228,7 @@ Every time we implemented child inspection, we regretted it afterward. We tend t
 React-admin is a *distribution* of several packages, each of which handles a specific feature. The packages are all located in the `packages/` directory. The most notable packages are:
 
 * `ra-core`: The core react-admin logic, without any UI.
-* `ra-ui-materialui`: The MUI skin for react-admin.
+* `ra-ui-materialui`: The Material UI skin for react-admin.
 * `ra-data-*`: Data providers for various data backends.
 * `ra-language-*`: Interface translations for various languages.
 * `react-admin`: the standard distribution of react-admin