Revert "[Tooltip] Update react-popper (#11862)"

This reverts commit 984094f.
mui · Jun 19, 2018 · 41f885a · 41f885a
1 parent 74a9827
commit 41f885a
Show file tree

Hide file tree

Showing 10 changed files with 228 additions and 272 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '96.3 KB',
+    limit: '95.0 KB',
   },
   {
     name: 'The main bundle of the docs',

diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Manager, Reference, Popper } from 'react-popper';
+import { Manager, Target, Popper } from 'react-popper';
 import Button from '@material-ui/core/Button';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Collapse from '@material-ui/core/Collapse';
@@ -55,90 +55,72 @@ class MenuListComposition extends React.Component {
           </MenuList>
         </Paper>
         <Manager>
-          <Reference>
-            {({ ref }) => (
-              <div
-                ref={node => {
-                  this.target1 = node;
-                }}
+          <Target>
+            <div
+              ref={node => {
+                this.target1 = node;
+              }}
+            >
+              <Button
+                aria-owns={open ? 'menu-list-grow' : null}
+                aria-haspopup="true"
+                onClick={this.handleToggle}
               >
-                <Button
-                  buttonRef={ref}
-                  aria-owns={open ? 'menu-list-grow' : null}
-                  aria-haspopup="true"
-                  onClick={this.handleToggle}
-                >
-                  Toggle Menu Grow
-                </Button>
-              </div>
-            )}
-          </Reference>
+                Toggle Menu Grow
+              </Button>
+            </div>
+          </Target>
           <Popper
             placement="bottom-start"
             eventsEnabled={open}
             className={classNames({ [classes.popperClose]: !open })}
           >
-            {({ ref, style }) => (
-              <div ref={ref} style={style}>
-                <ClickAwayListener onClickAway={this.handleClose}>
-                  <Grow in={open} id="menu-list-grow" style={{ transformOrigin: '0 0 0' }}>
-                    <Paper>
-                      <MenuList role="menu">
-                        <MenuItem onClick={this.handleClose}>Profile</MenuItem>
-                        <MenuItem onClick={this.handleClose}>My account</MenuItem>
-                        <MenuItem onClick={this.handleClose}>Logout</MenuItem>
-                      </MenuList>
-                    </Paper>
-                  </Grow>
-                </ClickAwayListener>
-              </div>
-            )}
+            <ClickAwayListener onClickAway={this.handleClose}>
+              <Grow in={open} id="menu-list-grow" style={{ transformOrigin: '0 0 0' }}>
+                <Paper>
+                  <MenuList role="menu">
+                    <MenuItem onClick={this.handleClose}>Profile</MenuItem>
+                    <MenuItem onClick={this.handleClose}>My account</MenuItem>
+                    <MenuItem onClick={this.handleClose}>Logout</MenuItem>
+                  </MenuList>
+                </Paper>
+              </Grow>
+            </ClickAwayListener>
           </Popper>
         </Manager>
         <Manager>
-          <Reference>
-            {({ ref }) => (
-              <div
-                ref={node => {
-                  this.target2 = node;
-                }}
+          <Target>
+            <div
+              ref={node => {
+                this.target2 = node;
+              }}
+            >
+              <Button
+                aria-owns={open ? 'menu-list-collapse' : null}
+                aria-haspopup="true"
+                onClick={this.handleToggle}
               >
-                <Button
-                  buttonRef={ref}
-                  aria-owns={open ? 'menu-list-collapse' : null}
-                  aria-haspopup="true"
-                  onClick={this.handleToggle}
-                >
-                  Toggle Menu Collapse
-                </Button>
-              </div>
-            )}
-          </Reference>
+                Toggle Menu Collapse
+              </Button>
+            </div>
+          </Target>
           <Portal>
             <Popper
               placement="bottom"
               eventsEnabled={open}
               className={classNames({ [classes.popperClose]: !open })}
             >
-              {({ ref, style }) => (
-                <div ref={ref} style={style}>
-                  <ClickAwayListener onClickAway={this.handleClose}>
-                    <Collapse
-                      in={open}
-                      id="menu-list-collapse"
-                      style={{ transformOrigin: '0 0 0' }}
-                    >
-                      <Paper style={{ margin: 3 }}>
-                        <MenuList role="menu">
-                          <MenuItem onClick={this.handleClose}>Profile</MenuItem>
-                          <MenuItem onClick={this.handleClose}>My account</MenuItem>
-                          <MenuItem onClick={this.handleClose}>Logout</MenuItem>
-                        </MenuList>
-                      </Paper>
-                    </Collapse>
-                  </ClickAwayListener>
-                </div>
-              )}
+              <ClickAwayListener onClickAway={this.handleClose}>
+                <Collapse in={open} id="menu-list-collapse" style={{ transformOrigin: '0 0 0' }}>
+                  <Paper style={{ margin: 3 }}>
+                    <MenuList role="menu">
+                      <MenuItem onClick={this.handleClose}>Profile</MenuItem>
+                      <MenuItem onClick={this.handleClose}>My account</MenuItem>
+                      <MenuItem onClick={this.handleClose}>Logout</MenuItem>
+                    </MenuList>
+                  </Paper>
+                </Collapse>
+              </ClickAwayListener>
             </Popper>
           </Portal>
         </Manager>

diff --git a/docs/src/pages/utils/popovers/MouseOverPopover.js b/docs/src/pages/utils/popovers/MouseOverPopover.js
@@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
-import { Manager, Reference, Popper } from 'react-popper';
+import { Manager, Target, Popper } from 'react-popper';
 
 const styles = theme => ({
   paper: {
@@ -74,39 +74,31 @@ class MouseOverPopover extends React.Component {
           <Typography>I use Popover.</Typography>
         </Popover>
         <Manager>
-          <Reference>
-            {({ ref }) => (
-              <div ref={ref}>
-                <Typography
-                  aria-describedby="react-popper-tooltip"
-                  onMouseOver={this.handlePopperOpen}
-                  onMouseOut={this.handlePopperClose}
-                >
-                  Hover with react-popper.
-                </Typography>
-              </div>
-            )}
-          </Reference>
+          <Target>
+            <Typography
+              aria-describedby="react-popper-tooltip"
+              onMouseOver={this.handlePopperOpen}
+              onMouseOut={this.handlePopperClose}
+            >
+              Hover with react-popper.
+            </Typography>
+          </Target>
           <Popper
             placement="bottom-start"
             eventsEnabled={popperOpen}
             className={!popperOpen ? classes.popperClose : ''}
           >
-            {({ ref, style }) => (
-              <div ref={ref} style={style}>
-                <Grow in={popperOpen} style={{ transformOrigin: '0 0 0' }}>
-                  <Paper
-                    id="react-popper-tooltip"
-                    className={classes.paper}
-                    role="tooltip"
-                    aria-hidden={!popperOpen}
-                    elevation={8}
-                  >
-                    <Typography>I use react-popper.</Typography>
-                  </Paper>
-                </Grow>
-              </div>
-            )}
+            <Grow in={popperOpen} style={{ transformOrigin: '0 0 0' }}>
+              <Paper
+                id="react-popper-tooltip"
+                className={classes.paper}
+                role="tooltip"
+                aria-hidden={!popperOpen}
+                elevation={8}
+              >
+                <Typography>I use react-popper.</Typography>
+              </Paper>
+            </Grow>
           </Popper>
         </Manager>
       </div>

diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "doctrine": "^2.0.0",
     "downshift": "^1.22.1",
     "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "npm:enzyme-react-adapter-future",
+    "enzyme-adapter-react-16": "^1.1.0",
     "eslint": "^4.11.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-import-resolver-webpack": "^0.10.0",

diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -56,9 +56,9 @@
     "prop-types": "^15.6.0",
     "react-event-listener": "^0.6.0",
     "react-jss": "^8.1.0",
-    "react-popper": "^1.0.0",
+    "react-popper": "^0.10.0",
     "react-transition-group": "^2.2.1",
-    "recompose": "^0.27.0",
+    "recompose": "^0.26.0 || ^0.27.0",
     "scroll": "^2.0.3",
     "warning": "^4.0.1"
   },

diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PopperProps } from 'react-popper';
+import { IPopperProps } from 'react-popper';
 import { StandardProps } from '..';
 
 export interface TooltipProps
@@ -43,6 +43,10 @@ export type TooltipClassKey =
   | 'tooltipPlacementTop'
   | 'tooltipPlacementBottom';
 
+interface PopperProps extends IPopperProps {
+  PopperClassName: string;
+}
+
 declare const Tooltip: React.ComponentType<TooltipProps>;
 
 export default Tooltip;
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -6,7 +6,7 @@ import EventListener from 'react-event-listener';
 import debounce from 'debounce';
 import warning from 'warning';
 import classNames from 'classnames';
-import { Manager, Popper, Reference } from 'react-popper';
+import { Manager, Popper, Target } from 'react-popper';
 import { capitalize } from '../utils/helpers';
 import RootRef from '../RootRef';
 import Portal from '../Portal';
@@ -137,13 +137,13 @@ class Tooltip extends React.Component {
   touchTimer = null;
   closeTimer = null;
   isControlled = null;
-  scheduleUpdate = null;
+  popper = null;
   children = null;
   ignoreNonTouchEvents = false;
 
   handleResize = debounce(() => {
-    if (this.scheduleUpdate) {
-      this.scheduleUpdate();
+    if (this.popper) {
+      this.popper._popper.scheduleUpdate();
     }
   }, 166); // Corresponds to 10 frames at 60 Hz.
 
@@ -314,39 +314,41 @@ class Tooltip extends React.Component {
     );
 
     return (
-      <Manager {...other}>
+      <Manager tag={false} {...other}>
         <EventListener target="window" onResize={this.handleResize} />
-        <Reference>
-          {({ ref }) => (
+        <Target>
+          {({ targetProps }) => (
             <RootRef
               rootRef={node => {
                 this.children = node;
-                ref(this.children);
+                targetProps.ref(this.children);
               }}
             >
               {React.cloneElement(children, childrenProps)}
             </RootRef>
           )}
-        </Reference>
+        </Target>
         <Portal>
           <Popper
             placement={placement}
             eventsEnabled={open}
             className={classNames(classes.popper, { [classes.open]: open }, PopperClassName)}
+            ref={node => {
+              this.popper = node;
+            }}
             {...PopperProps}
           >
-            {popperProps => {
-              this.scheduleUpdate = popperProps.scheduleUpdate;
-              const actualPlacement = popperProps.placement
-                ? popperProps.placement.split('-')[0]
-                : null;
+            {({ popperProps, restProps }) => {
+              const actualPlacement = (popperProps['data-placement'] || placement).split('-')[0];
               return (
                 <div
-                  ref={popperProps.ref}
+                  {...popperProps}
+                  {...restProps}
                   style={{
                     ...popperProps.style,
                     top: popperProps.style.top || 0,
                     left: popperProps.style.left || 0,
+                    ...restProps.style,
                   }}
                 >
                   <div
@@ -355,13 +357,9 @@ class Tooltip extends React.Component {
                     aria-hidden={!open}
                     className={classNames(
                       classes.tooltip,
-                      {
-                        [classes.open]: open,
-                        [classes.touch]: this.ignoreNonTouchEvents,
-                      },
-                      popperProps.placement
-                        ? classes[`tooltipPlacement${capitalize(actualPlacement)}`]
-                        : null,
+                      { [classes.open]: open },
+                      { [classes.touch]: this.ignoreNonTouchEvents },
+                      classes[`tooltipPlacement${capitalize(actualPlacement)}`],
                     )}
                   >
                     {title}