[docs] Add notistack in the related projects

BACKERS.md

@@ -97,7 +97,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 | Jolse Maginnis | asmeikal | David Auffret | Naresh Bhatia | Henk van Hest |
 | Avétis KAZARIAN | Withinpixels | SIM KIM SIA | Renaud Bompuis | Yaron Malin |
 | Arvanitis Panagiotis | Jesse Weigel | Bogdan Mihai Nicolae | Dung Tran | Kyle Pennell |
-| Kai Mit Pansen | Eric Nagy | Karens Grigorjancs | Mohamed Turco |
+| Kai Mit Pansen | Eric Nagy | Karens Grigorjancs | Mohamed Turco | Haroun Serang |
 
 via [OpenCollective](https://opencollective.com/material-ui)
 

docs/src/pages/demos/autocomplete/autocomplete.md

@@ -12,19 +12,28 @@ We encourage people relying on the solutions the React community has built.
 
 ## downshift
 
+![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars)
+![npm downloads](https://img.shields.io/npm/dm/downshift.svg)
+
 In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift).
 
 {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}}
 
 ## react-autosuggest
 
+![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars)
+![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg)
+
 In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest).
 It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
 
 {{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}}
 
 ## react-select
 
+![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars)
+![npm downloads](https://img.shields.io/npm/dm/react-select.svg)
+
 In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select).
 
 {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}}

docs/src/pages/discover-more/related-projects/related-projects.md

@@ -11,18 +11,20 @@ Feel free to submit a pull request to add more projects; we will accept them if
 - [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) A chart for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([custom license](https://js.devexpress.com/licensing/)).
 - [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([custom license](https://js.devexpress.com/licensing/)).
 - [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) A fuzzy-search component for React and Material-UI.
+- [material-ui-next-pickers](https://github.com/chingyawhao/material-ui-next-pickers) A datepicker or timepicker in Material UI Next or can be imported as a clock or calendar component.
 - [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) Components that implement Material Design date and time pickers for Material-UI.
 - [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker) A TimePicker for Material-UI.
-- [material-ui-next-pickers](https://github.com/chingyawhao/material-ui-next-pickers) A datepicker or timepicker in Material UI Next or can be imported as a clock or calendar component.
 - [mui-datatables](https://github.com/gregnb/mui-datatables) Responsive data tables for Material-UI with filtering, sorting, search and more.
 - [mui-downshift](https://github.com/techniq/mui-downshift) Thin layer over paypal's downshift to use Material-UI visual components.
+- [notistack](https://github.com/iamhosseindhv/notistack) Highly customisable notification snackbars that can be stacked on top of each other
 - [react-material-ui-typescript](https://github.com/goemen/react-material-ui-typescript) A boilerplate for React using Typescript, Material UI and Redux, React Router.
 - [react-media-material-ui](https://github.com/jcoreio/react-media-material-ui) Easily use breakpoints from your Material-UI theme with [react-media](https://github.com/ReactTraining/react-media).
 - [Wertarbyte](https://mui.wertarbyte.com/) Wertarbyte are using Material-UI for many of their projects. This is a collection of complementary components they have built.
 
 ## Complementary Projects
 
 - [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Online tool for creating Material-UI themes via Material Design Color Tool
+- [downshift](https://github.com/paypal/downshift) Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components
 - [react-admin](https://github.com/marmelab/react-admin) An admin framework combining material-ui with Redux, redux-form, redux-saga, and recompose
 - [react-autosuggest](https://github.com/moroshko/react-autosuggest) WAI-ARIA compliant React autosuggest component.
 - [react-final-form](https://github.com/final-form/react-final-form#material-ui-10) Subscription-based form state management for React.

packages/material-ui-docs/package.json

@@ -35,7 +35,7 @@
     "react-dom": "^16.3.0"
   },
   "dependencies": {
-    "marked": "^0.4.0",
+    "marked": "^0.5.0",
     "nprogress": "^0.2.0",
     "prismjs": "^1.8.4"
   },

packages/material-ui/src/ButtonBase/TouchRipple.test.js

@@ -4,6 +4,8 @@ import { assert } from 'chai';
 import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
 import TouchRipple, { DELAY_RIPPLE } from './TouchRipple';
 
+const cb = () => {};
+
 describe('<TouchRipple />', () => {
   let shallow;
   let mount;
@@ -41,6 +43,7 @@ describe('<TouchRipple />', () => {
         {
           fakeElement: true,
         },
+        cb,
       );
       wrapper.update();
       assert.strictEqual(wrapper.childAt(0).props().rippleSize, 1, 'should be odd');
@@ -53,13 +56,13 @@ describe('<TouchRipple />', () => {
 
     assert.strictEqual(wrapper.state().ripples.length, 0, 'should start with no ripples');
 
-    instance.start({ clientX: 0, clientY: 0 });
+    instance.start({ clientX: 0, clientY: 0 }, cb);
     assert.strictEqual(wrapper.state().ripples.length, 1, 'should create a ripple');
 
-    instance.start({ clientX: 0, clientY: 0 });
+    instance.start({ clientX: 0, clientY: 0 }, cb);
     assert.strictEqual(wrapper.state().ripples.length, 2, 'should create another ripple');
 
-    instance.start({ clientX: 0, clientY: 0 });
+    instance.start({ clientX: 0, clientY: 0 }, cb);
     assert.strictEqual(wrapper.state().ripples.length, 3, 'should create another ripple');
 
     instance.stop({ type: 'mouseup' });
@@ -82,6 +85,7 @@ describe('<TouchRipple />', () => {
           pulsate: true,
           fakeElement: true,
         },
+        cb,
       );
       assert.strictEqual(wrapper.state().ripples.length, 1);
     });
@@ -90,15 +94,15 @@ describe('<TouchRipple />', () => {
       const wrapper = shallow(<TouchRipple />);
       const instance = wrapper.instance();
       instance.ignoringMouseDown = true;
-      instance.start({ type: 'mousedown' });
+      instance.start({ type: 'mousedown' }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 0);
     });
 
     it('should set ignoringMouseDown to true', () => {
       const wrapper = shallow(<TouchRipple />);
       const instance = wrapper.instance();
       assert.strictEqual(instance.ignoringMouseDown, false);
-      instance.start({ type: 'touchstart' }, { fakeElement: true });
+      instance.start({ type: 'touchstart' }, { fakeElement: true }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 1);
       assert.strictEqual(instance.ignoringMouseDown, true);
     });
@@ -108,7 +112,7 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
       const clientX = 1;
       const clientY = 1;
-      instance.start({ clientX, clientY }, { fakeElement: true });
+      instance.start({ clientX, clientY }, { fakeElement: true }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 1);
       assert.strictEqual(wrapper.state().ripples[0].props.rippleX, clientX);
       assert.strictEqual(wrapper.state().ripples[0].props.rippleY, clientY);
@@ -131,14 +135,14 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
 
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true });
+      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 0);
 
       clock.tick(DELAY_RIPPLE);
       assert.strictEqual(wrapper.state().ripples.length, 1);
 
       clock.tick(DELAY_RIPPLE);
-      instance.stop({ type: 'touchend' });
+      instance.stop({ type: 'touchend' }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 0);
     });
 
@@ -147,12 +151,12 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
 
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true });
+      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 0);
 
       clock.tick(DELAY_RIPPLE / 2);
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.stop({ type: 'touchend', persist: () => {} });
+      instance.stop({ type: 'touchend', persist: () => {} }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 1);
 
       clock.tick(1);
@@ -164,7 +168,7 @@ describe('<TouchRipple />', () => {
       const instance = wrapper.instance();
 
       assert.strictEqual(wrapper.state().ripples.length, 0);
-      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true });
+      instance.start({ touches: [], clientX: 0, clientY: 0 }, { fakeElement: true }, cb);
       assert.strictEqual(wrapper.state().ripples.length, 0);
 
       clock.tick(DELAY_RIPPLE / 2);