Remove mouse enter/leave polyfill and add native event

fixtures/dom/src/components/Header.js

@@ -51,6 +51,7 @@ class Header extends React.Component {
                 <option value="/">Select a Fixture</option>
                 <option value="/range-inputs">Range Inputs</option>
                 <option value="/text-inputs">Text Inputs</option>
+                <option value="/mouse-events">Mouse Events</option>
                 <option value="/number-inputs">Number Input</option>
                 <option value="/password-inputs">Password Input</option>
                 <option value="/selects">Selects</option>

fixtures/dom/src/components/fixtures/index.js

@@ -4,6 +4,7 @@ import TextInputFixtures from './text-inputs';
 import SelectFixtures from './selects';
 import TextAreaFixtures from './textareas';
 import InputChangeEvents from './input-change-events';
+import MouseEventsFixtures from './mouse-events';
 import NumberInputFixtures from './number-inputs';
 import PasswordInputFixtures from './password-inputs';
 import ButtonFixtures from './buttons';
@@ -25,6 +26,8 @@ function FixturesPage() {
       return <TextAreaFixtures />;
     case '/input-change-events':
       return <InputChangeEvents />;
+    case '/mouse-events':
+      return <MouseEventsFixtures />;
     case '/number-inputs':
       return <NumberInputFixtures />;
     case '/password-inputs':

fixtures/dom/src/components/fixtures/mouse-events/index.js

@@ -0,0 +1,104 @@
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+const Rectangle = ({style, nodeRef, ...props}) => (
+  <div
+    {...props}
+    ref={nodeRef}
+    style={{border: '1px solid black', padding: 40, ...style}}
+  />
+);
+
+var portalContainer = document.createElement('div');
+document.body.appendChild(portalContainer)
+
+
+class MouseEventsFixtures extends React.Component {
+  state = {log: [], box: null };
+
+  log = msg => {
+    this.setState(({log}) => ({
+      log: log.concat(msg),
+    }));
+  };
+  clearLog = () => {
+    this.setState({log: []});
+  };
+
+  componentDidMount() {
+    this.getDimensions()
+  }
+  componentDidUpdate() {
+    this.getDimensions()
+  }
+
+  getDimensions() {
+    if (!this.state.box && this.node) {
+      const { left, bottom } = this.node.getBoundingClientRect()
+      this.setState({
+        box: { left: left + 10, top: bottom - 10 },
+      })
+    } else if (this.state.box && !this.node) {
+      this.setState({ box: null })
+    }
+  }
+
+  render() {
+    const { box } = this.state;
+
+    let getLogger = prefix => e => this.log(`${prefix}: ${e.type}`);
+    let outerLogger = getLogger('outer');
+    let innerLogger = getLogger('inner');
+
+    return (
+      <div>
+        <div className="container">
+          <p>
+            Mouse the mouse between the two rectangles. The console should
+            only log for a given box when the mouse crosses into the box the first
+            time and again when the mouse exits the
+            {' '}
+            <em>outer</em>
+            {' '}
+            bounds of each box.
+          </p>
+          <Rectangle onMouseEnter={outerLogger} onMouseLeave={outerLogger}>
+            <Rectangle onMouseEnter={innerLogger} onMouseLeave={innerLogger} />
+          </Rectangle>
+
+          <p>
+            Moving from the outer rectangle to the inner blue Portal should not trigger a
+            mouseleave on the outer rectangle.
+          </p>
+          <Rectangle
+            onMouseEnter={outerLogger}
+            onMouseLeave={outerLogger}
+            nodeRef={n => this.node = n}
+          >
+
+            {ReactDOM.unstable_createPortal(
+              <div
+                style={{ position: 'fixed', border: '1px solid blue', padding: 10, ...box }}
+                onMouseEnter={innerLogger}
+                onMouseLeave={innerLogger}
+              >
+                portal
+              </div>,
+              portalContainer,
+            )}
+          </Rectangle>
+        </div>
+
+
+        <div className="container">
+          <h4>Console: <button onClick={this.clearLog}>clear</button></h4>
+          <pre className="output">
+            {this.state.log.join('\n')}
+          </pre>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = MouseEventsFixtures;

scripts/rollup/results.json

@@ -25,36 +25,36 @@
       "gzip": 6601
     },
     "react-dom.development.js (UMD_DEV)": {
-      "size": 624799,
-      "gzip": 142849
+      "size": 621341,
+      "gzip": 141972
     },
     "react-dom.production.min.js (UMD_PROD)": {
-      "size": 125896,
-      "gzip": 40026
+      "size": 124686,
+      "gzip": 39686
     },
     "react-dom.development.js (NODE_DEV)": {
-      "size": 584197,
-      "gzip": 133211
+      "size": 580739,
+      "gzip": 132303
     },
     "react-dom.production.min.js (NODE_PROD)": {
-      "size": 122812,
-      "gzip": 38953
+      "size": 121602,
+      "gzip": 38641
     },
     "ReactDOMFiber-dev.js (FB_DEV)": {
-      "size": 583480,
-      "gzip": 133238
+      "size": 580022,
+      "gzip": 132331
     },
     "ReactDOMFiber-prod.js (FB_PROD)": {
-      "size": 426550,
-      "gzip": 96621
+      "size": 423122,
+      "gzip": 95727
     },
     "react-dom-test-utils.development.js (NODE_DEV)": {
-      "size": 54887,
-      "gzip": 14087
+      "size": 54949,
+      "gzip": 14101
     },
     "ReactTestUtils-dev.js (FB_DEV)": {
-      "size": 54766,
-      "gzip": 14049
+      "size": 54828,
+      "gzip": 14062
     },
     "ReactDOMServerStack-dev.js (FB_DEV)": {
       "size": 460810,
@@ -65,20 +65,20 @@
       "gzip": 81957
     },
     "react-dom-server.development.js (UMD_DEV)": {
-      "size": 120136,
-      "gzip": 30487
+      "size": 120897,
+      "gzip": 30672
     },
     "react-dom-server.production.min.js (UMD_PROD)": {
-      "size": 20342,
-      "gzip": 7828
+      "size": 20365,
+      "gzip": 7841
     },
     "react-dom-server.development.js (NODE_DEV)": {
-      "size": 89286,
-      "gzip": 23069
+      "size": 90047,
+      "gzip": 23257
     },
     "react-dom-server.production.min.js (NODE_PROD)": {
-      "size": 18848,
-      "gzip": 7292
+      "size": 18871,
+      "gzip": 7306
     },
     "ReactDOMServerStream-dev.js (FB_DEV)": {
       "size": 264750,
@@ -113,20 +113,20 @@
       "gzip": 45283
     },
     "ReactNativeStack-dev.js (RN_DEV)": {
-      "size": 186585,
-      "gzip": 36205
+      "size": 185834,
+      "gzip": 36032
     },
     "ReactNativeStack-prod.js (RN_PROD)": {
-      "size": 136231,
-      "gzip": 26184
+      "size": 135480,
+      "gzip": 25994
     },
     "ReactNativeFiber-dev.js (RN_DEV)": {
-      "size": 284554,
-      "gzip": 51697
+      "size": 283803,
+      "gzip": 51516
     },
     "ReactNativeFiber-prod.js (RN_PROD)": {
-      "size": 220157,
-      "gzip": 38484
+      "size": 219406,
+      "gzip": 38306
     },
     "react-test-renderer.development.js (NODE_DEV)": {
       "size": 281507,
@@ -181,20 +181,20 @@
       "gzip": 50920
     },
     "ReactDOMServer-dev.js (FB_DEV)": {
-      "size": 88798,
-      "gzip": 23020
+      "size": 89559,
+      "gzip": 23201
     },
     "ReactDOMServer-prod.js (FB_PROD)": {
-      "size": 49545,
-      "gzip": 13626
+      "size": 49640,
+      "gzip": 13644
     },
     "react-dom-node-stream.development.js (NODE_DEV)": {
-      "size": 90980,
-      "gzip": 23577
+      "size": 91741,
+      "gzip": 23757
     },
     "react-dom-node-stream.production.min.js (NODE_PROD)": {
-      "size": 19785,
-      "gzip": 7628
+      "size": 19808,
+      "gzip": 7646
     },
     "ReactDOMNodeStream-dev.js (FB_DEV)": {
       "size": 264918,
@@ -205,28 +205,28 @@
       "gzip": 50956
     },
     "react-dom-unstable-native-dependencies.development.js (UMD_DEV)": {
-      "size": 84047,
-      "gzip": 21057
+      "size": 82995,
+      "gzip": 20767
     },
     "react-dom-unstable-native-dependencies.production.min.js (UMD_PROD)": {
-      "size": 18315,
-      "gzip": 5967
+      "size": 17990,
+      "gzip": 5856
     },
     "react-dom-unstable-native-dependencies.development.js (NODE_DEV)": {
-      "size": 77475,
-      "gzip": 19101
+      "size": 76423,
+      "gzip": 18804
     },
     "react-dom-unstable-native-dependencies.production.min.js (NODE_PROD)": {
-      "size": 16588,
-      "gzip": 5332
+      "size": 16262,
+      "gzip": 5227
     },
     "ReactDOMUnstableNativeDependencies-dev.js (FB_DEV)": {
-      "size": 77189,
-      "gzip": 19061
+      "size": 76137,
+      "gzip": 18768
     },
     "ReactDOMUnstableNativeDependencies-prod.js (FB_PROD)": {
-      "size": 65908,
-      "gzip": 15704
+      "size": 64892,
+      "gzip": 15400
     }
   }
 }