Merge remote-tracking branch 'call_em_all_-_master/master'

* call_em_all_-_master/master:
  [showcase] added showcase of 'HoopHubs.com' (mui#7677)
  [PopOver] Fixed bug where PopOver renders relative to screen rather than layout container in React Fiber (mui#7663)

docs/src/app/components/pages/discover-more/Showcase.js

@@ -155,6 +155,12 @@ const appList = [
     img: 'images/showcase/brainbok-for-pmp-capm-certification.png',
     link: 'https://www.brainbok.com',
   },
+  {
+    title: 'HoopHubs篮圈 - 查CBA/NBA比赛数据，就上HoopHubs篮圈',
+    author: 'HoopHubs',
+    img: 'images/showcase/hoophubs-basketball-stats-tool.png',
+    link: 'http://www.hoophubs.com',
+  },
 ];
 
 const Showcase = () => (

src/Menu/Menu.spec.js

@@ -269,12 +269,12 @@ describe('<Menu />', () => {
         </Menu>
       );
 
-      wrapper.find('.item1').simulate('touchTap');
+      wrapper.find('.item1').simulate('click');
       assert.strictEqual(wrapper.state('focusIndex'), 0);
       document.body.dispatchEvent(new window.Event('mouseup', {bubbles: true}));
       assert.strictEqual(wrapper.state('focusIndex'), -1);
 
-      wrapper.find('.item2').simulate('touchTap');
+      wrapper.find('.item2').simulate('click');
       assert.strictEqual(wrapper.state('focusIndex'), 1);
       document.body.dispatchEvent(new window.Event('mouseup', {bubbles: true}));
       assert.strictEqual(wrapper.state('focusIndex'), 1);

src/Popover/Popover.js

@@ -144,6 +144,8 @@ class Popover extends Component {
     this.handleResize = throttle(this.setPlacement, 100);
     this.handleScroll = throttle(this.setPlacement.bind(this, true), 50);
 
+    this.popoverRefs = {};
+
     this.state = {
       open: props.open,
       closing: false,
@@ -156,7 +158,7 @@ class Popover extends Component {
   }
 
   componentDidMount() {
-    this.setPlacement();
+    this.placementTimeout = setTimeout(this.setPlacement);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -208,13 +210,19 @@ class Popover extends Component {
   }
 
   componentDidUpdate() {
-    this.setPlacement();
+    clearTimeout(this.placementTimeout);
+    this.placementTimeout = setTimeout(this.setPlacement);
   }
 
   componentWillUnmount() {
     this.handleResize.cancel();
     this.handleScroll.cancel();
 
+    if (this.placementTimeout) {
+      clearTimeout(this.placementTimeout);
+      this.placementTimeout = null;
+    }
+
     if (this.timeout) {
       clearTimeout(this.timeout);
       this.timeout = null;
@@ -342,11 +350,11 @@ class Popover extends Component {
       return;
     }
 
-    if (!this.refs.layer.getLayer()) {
+    if (!this.popoverRefs.layer.getLayer()) {
       return;
     }
 
-    const targetEl = this.refs.layer.getLayer().children[0];
+    const targetEl = this.popoverRefs.layer.getLayer().children[0];
     if (!targetEl) {
       return;
     }
@@ -493,7 +501,7 @@ class Popover extends Component {
           onKeyUp={this.handleKeyUp}
         />
         <RenderToLayer
-          ref="layer"
+          ref={(ref) => this.popoverRefs.layer = ref}
           open={this.state.open}
           componentClickAway={this.componentClickAway}
           useLayerForClickAway={this.props.useLayerForClickAway}

src/Popover/Popover.spec.js

@@ -31,9 +31,12 @@ describe('<Popover />', () => {
     it('should stop listening correctly', (done) => {
       const wrapper = mountWithContext(<Popover open={true} />);
 
-      wrapper.instance().handleScroll();
-      wrapper.instance().handleScroll();
-      wrapper.unmount();
+      // Ensure layering has been set up correctly before simulation
+      setTimeout(() => {
+        wrapper.instance().handleScroll();
+        wrapper.instance().handleScroll();
+        wrapper.unmount();
+      }, 10);
 
       setTimeout(() => {
          // Wait for the end of the throttle. Makes sure we don't crash.