marmelab · andrico1234 · Nov 27, 2020 · Nov 30, 2020 · Dec 16, 2020 · Dec 16, 2020
diff --git a/cypress/integration/navigation.js b/cypress/integration/navigation.js
@@ -0,0 +1,32 @@
+import listPageFactory from '../support/ListPage';
+
+describe('Navigation', () => {
+    const ListPage = listPageFactory('/#/posts');
+
+    describe('Sidebar', () => {
+        it('should have tabbable menu items', () => {
+            ListPage.navigate();
+
+            ListPage.waitUntilVisible();
+
+            cy.get('body').tab().tab().tab().tab();
+
+            cy.get(`${ListPage.elements.menuItems}:first-child`).should(
+                'have.class',
+                'Mui-focusVisible'
+            );
+        });
+    });
+
+    describe('Skip Navigation Button', () => {
+        it('should appear when a user immediately tabs on the homepage', () => {
+            ListPage.navigate();
+
+            ListPage.waitUntilVisible();
+
+            cy.get('body').tab();
+
+            cy.get(ListPage.elements.skipNavButton).should('exist');
+        });
+    });
+});
diff --git a/cypress/package.json b/cypress/package.json
@@ -9,6 +9,7 @@
     "devDependencies": {
         "@cypress/webpack-preprocessor": "^5.4.5",
         "cypress": "^5.1.0",
+        "cypress-plugin-tab": "^1.0.5",
         "cypress-skip-and-only-ui": "^1.2.7"
     }
 }
diff --git a/cypress/support/ListPage.js b/cypress/support/ListPage.js
@@ -5,7 +5,7 @@ export default url => ({
         displayedRecords: '.displayed-records',
         filter: name => `.filter-field[data-source='${name}'] input`,
         filterMenuItems: `.new-filter-item`,
-        menuItems: `[role=menuitem`,
+        menuItems: `[role=menuitem]`,
         filterMenuItem: source => `.new-filter-item[data-key="${source}"]`,
         hideFilterButton: source =>
             `.filter-field[data-source="${source}"] .hide-filter`,
@@ -31,6 +31,7 @@ export default url => ({
         title: '#react-admin-title',
         headroomUnfixed: '.headroom--unfixed',
         headroomUnpinned: '.headroom--unpinned',
+        skipNavButton: '.skip-nav-button',
     },
 
     navigate() {

diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -1 +1,2 @@
 require('cypress-skip-and-only-ui/support');
+require('cypress-plugin-tab');
diff --git a/docs/List.md b/docs/List.md
@@ -27,6 +27,7 @@ Here are all the props accepted by the `<List>` component:
 * [`pagination`](#pagination)
 * [`aside`](#aside-component)
 * [`empty`](#empty-page)
+- [`syncWithLocation`](#synchronize-with-url)
 
 Here is the minimal code necessary to display a list of posts:
 
@@ -721,6 +722,29 @@ const PostList = props => (
 
 The default value for the `component` prop is `Card`.
 
+## Synchronize With URL
+
+When a List based component (eg: `PostList`) is passed to the `list` prop of a `<Resource>`, it will automatically synchronize its parameters with the browser URL (using react-router location). However, when used anywhere outside of a `<Resource>`, it won't synchronize, which can be useful when you have multiple lists on a single page for example.
+
+In order to enable the synchronization with the URL, you can set the `syncWithLocation` prop. For example, adding a `List` to an `Edit` page:
+
+```jsx
+const TagsEdit = (props) => (
+    <>
+        <Edit {...props}>
+            // ...
+        </Edit>
+        <ResourceProviderContext resource="posts">
+            <List syncWithLocation basePath="/posts" filter={{ tags: [id]}}>
+                <Datagri>
+                    <TextField source="title" />
+                </Datagrid>
+            </List>
+        </ResourceProviderContext>
+    </>
+)
+```
+
 ### CSS API
 
 The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:

diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -46,7 +46,7 @@
     "devDependencies": {
         "@types/fetch-mock": "^7.3.2",
         "@types/classnames": "^2.2.9",
-        "@types/jest": "^24.0.23",
+        "@types/jest": "^26.0.19",
         "@types/node": "^12.12.14",
         "@types/query-string": "5.1.0",
         "@types/react": "^16.9.13",

diff --git a/examples/demo/src/layout/themes.ts b/examples/demo/src/layout/themes.ts
@@ -15,6 +15,32 @@ export const darkTheme = {
                 backgroundColor: '#616161e6',
             },
         },
+        MuiButtonBase: {
+            root: {
+                '&:hover:active::after': {
+                    // recreate a static ripple color
+                    // use the currentColor to make it work both for outlined and contained buttons
+                    // but to dim the background without dimming the text,
+                    // put another element on top with a limited opacity
+                    content: '""',
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    backgroundColor: 'currentColor',
+                    opacity: 0.3,
+                    borderRadius: 'inherit',
+                },
+            },
+        },
+    },
+    props: {
+        MuiButtonBase: {
+            // disable ripple for perf reasons
+            disableRipple: true,
+        },
     },
 };
 
@@ -62,6 +88,26 @@ export const lightTheme = {
                 boxShadow: 'none',
             },
         },
+        MuiButtonBase: {
+            root: {
+                '&:hover:active::after': {
+                    // recreate a static ripple color
+                    // use the currentColor to make it work both for outlined and contained buttons
+                    // but to dim the background without dimming the text,
+                    // put another element on top with a limited opacity
+                    content: '""',
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    backgroundColor: 'currentColor',
+                    opacity: 0.3,
+                    borderRadius: 'inherit',
+                },
+            },
+        },
         MuiAppBar: {
             colorSecondary: {
                 color: '#808080',
@@ -85,4 +131,10 @@ export const lightTheme = {
             },
         },
     },
+    props: {
+        MuiButtonBase: {
+            // disable ripple for perf reasons
+            disableRipple: true,
+        },
+    },
 };
diff --git a/examples/simple/src/tags/TagEdit.js b/examples/simple/src/tags/TagEdit.js
@@ -1,14 +1,43 @@
 /* eslint react/jsx-key: off */
 import * as React from 'react';
-import { Edit, SimpleForm, TextField, TextInput, required } from 'react-admin';
+import {
+    Edit,
+    SimpleForm,
+    TextField,
+    TextInput,
+    required,
+    List,
+    Datagrid,
+    ResourceContextProvider,
+    EditButton,
+} from 'react-admin';
 
 const TagEdit = props => (
-    <Edit {...props}>
-        <SimpleForm redirect="list">
-            <TextField source="id" />
-            <TextInput source="name" validate={[required()]} />
-        </SimpleForm>
-    </Edit>
+    <>
+        <Edit {...props}>
+            <SimpleForm redirect="list">
+                <TextField source="id" />
+                <TextInput source="name" validate={[required()]} />
+            </SimpleForm>
+        </Edit>
+        <ResourceContextProvider resource="posts">
+            <List
+                hasCreate={false}
+                hasShow
+                hasEdit
+                hasList
+                basePath="/posts"
+                resource="posts"
+                filter={{ tags: [props.id] }}
+                title=" "
+            >
+                <Datagrid>
+                    <TextField source="id" />
+                    <TextField source="title" />
+                    <EditButton />
+                </Datagrid>
+            </List>
+        </ResourceContextProvider>
+    </>
 );
-
 export default TagEdit;
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
         }
     },
     "devDependencies": {
-        "@types/jest": "^24.0.13",
+        "@types/jest": "^26.0.19",
         "@types/react": "^16.9.0",
         "@types/react-redux": "^7.1.1",
         "@typescript-eslint/eslint-plugin": "^3.10.1",
@@ -63,14 +63,14 @@
         "express": "~4.16.3",
         "full-icu": "~1.3.1",
         "husky": "^2.3.0",
-        "jest": "^24.7.0",
+        "jest": "^26.6.3",
         "lerna": "~2.9.1",
         "lint-staged": "^8.1.7",
         "lolex": "~2.3.2",
         "mutationobserver-shim": "^0.3.3",
         "prettier": "~2.1.1",
         "raf": "~3.4.1",
-        "ts-jest": "^24.0.0",
+        "ts-jest": "^26.4.4",
         "wait-on": "^3.2.0",
         "whatwg-fetch": "^3.0.0"
     },
@@ -82,4 +82,4 @@
     "dependencies": {
         "typescript": "^4.0.2"
     }
-}
+}
diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json
@@ -65,7 +65,7 @@
         "redux-saga": "^1.0.0"
     },
     "dependencies": {
-        "@testing-library/react": "^8.0.7",
+        "@testing-library/react": "^11.2.2",
         "classnames": "~2.2.5",
         "date-fns": "^1.29.0",
         "eventemitter3": "^3.0.0",

diff --git a/packages/ra-core/src/actions/notificationActions.ts b/packages/ra-core/src/actions/notificationActions.ts
@@ -1,6 +1,6 @@
 export const SHOW_NOTIFICATION = 'RA/SHOW_NOTIFICATION';
 
-export type NotificationType = 'info' | 'warning' | 'error';
+export type NotificationType = 'success' | 'info' | 'warning' | 'error';
 
 interface NotificationOptions {
     // The duration in milliseconds the notification is shown

diff --git a/packages/ra-core/src/auth/Authenticated.spec.tsx b/packages/ra-core/src/auth/Authenticated.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { cleanup, wait } from '@testing-library/react';
+import { wait } from '@testing-library/react';
 
 import Authenticated from './Authenticated';
 import AuthContext from './AuthContext';
@@ -10,8 +10,6 @@ import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 
 describe('<Authenticated>', () => {
-    afterEach(cleanup);
-
     const Foo = () => <div>Foo</div>;
 
     it('should render its child by default', async () => {

diff --git a/packages/ra-core/src/auth/useAuthState.spec.tsx b/packages/ra-core/src/auth/useAuthState.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { cleanup, wait } from '@testing-library/react';
+import { wait } from '@testing-library/react';
 
 import useAuthState from './useAuthState';
 import AuthContext from './AuthContext';
@@ -20,8 +20,6 @@ const stateInpector = state => (
 );
 
 describe('useAuthState', () => {
-    afterEach(cleanup);
-
     it('should return a loading state on mount', () => {
         const { queryByText } = renderWithRedux(
             <UseAuth>{stateInpector}</UseAuth>

diff --git a/packages/ra-core/src/auth/useAuthenticated.spec.tsx b/packages/ra-core/src/auth/useAuthenticated.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { cleanup, wait } from '@testing-library/react';
+import { wait } from '@testing-library/react';
 
 import Authenticated from './Authenticated';
 import AuthContext from './AuthContext';
@@ -10,8 +10,6 @@ import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 
 describe('useAuthenticated', () => {
-    afterEach(cleanup);
-
     const Foo = () => <div>Foo</div>;
 
     it('should call authProvider on mount', () => {

diff --git a/packages/ra-core/src/auth/useCheckAuth.spec.tsx b/packages/ra-core/src/auth/useCheckAuth.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import expect from 'expect';
-import { render, cleanup, wait } from '@testing-library/react';
+import { render, wait } from '@testing-library/react';
 
 import useCheckAuth from './useCheckAuth';
 import AuthContext from './AuthContext';
@@ -60,7 +60,6 @@ describe('useCheckAuth', () => {
     afterEach(() => {
         logout.mockClear();
         notify.mockClear();
-        cleanup();
     });
 
     it('should not logout if has credentials', async () => {

diff --git a/packages/ra-core/src/auth/useLogoutIfAccessDenied.spec.tsx b/packages/ra-core/src/auth/useLogoutIfAccessDenied.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import expect from 'expect';
-import { render, cleanup, wait } from '@testing-library/react';
+import { render, wait } from '@testing-library/react';
 
 import useLogoutIfAccessDenied from './useLogoutIfAccessDenied';
 import AuthContext from './AuthContext';
@@ -55,7 +55,6 @@ describe('useLogoutIfAccessDenied', () => {
     afterEach(() => {
         logout.mockClear();
         notify.mockClear();
-        cleanup();
     });
 
     it('should not logout if passed no error', async () => {

diff --git a/packages/ra-core/src/auth/usePermissions.spec.tsx b/packages/ra-core/src/auth/usePermissions.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { cleanup, wait } from '@testing-library/react';
+import { wait } from '@testing-library/react';
 
 import usePermissions from './usePermissions';
 import AuthContext from './AuthContext';
@@ -21,8 +21,6 @@ const stateInpector = state => (
 );
 
 describe('usePermissions', () => {
-    afterEach(cleanup);
-
     it('should return a loading state on mount', () => {
         const { queryByText } = renderWithRedux(
             <UsePermissions>{stateInpector}</UsePermissions>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		require('cypress-skip-and-only-ui/support');
		require('cypress-plugin-tab');