Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/Tooltip/Tooltip.d.ts

@@ -1,21 +1,19 @@
 import * as React from 'react';
+import { IPopperProps } from 'react-popper';
 import { StandardProps } from '..';
 
-export interface TooltipProps extends StandardProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  TooltipClassKey,
-  'title'
-> {
+export interface TooltipProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TooltipClassKey, 'title'> {
+  children: React.ReactElement<any>;
   disableTriggerFocus?: boolean;
   disableTriggerHover?: boolean;
   disableTriggerTouch?: boolean;
-  id?: string;
-  onRequestClose?: (event: React.ChangeEvent<{}>) => void;
-  onRequestOpen?: (event: React.ChangeEvent<{}>) => void;
-  open?: boolean;
-  title: React.ReactNode;
   enterDelay?: number;
+  id?: string;
   leaveDelay?: number;
+  onClose?: (event: React.ChangeEvent<{}>) => void;
+  onOpen?: (event: React.ChangeEvent<{}>) => void;
+  open?: boolean;
   placement?:
     | 'bottom-end'
     | 'bottom-start'
@@ -29,7 +27,8 @@ export interface TooltipProps extends StandardProps<
     | 'top-end'
     | 'top-start'
     | 'top';
-  PopperProps?: object;
+  PopperProps?: Partial<PopperProps>;
+  title: React.ReactNode;
 }
 
 export type TooltipClassKey =
@@ -41,8 +40,11 @@ export type TooltipClassKey =
   | 'tooltipRight'
   | 'tooltipTop'
   | 'tooltipBottom'
-  | 'tooltipOpen'
-  ;
+  | 'tooltipOpen';
+
+interface PopperProps extends IPopperProps {
+  PopperClassName: string;
+}
 
 declare const Tooltip: React.ComponentType<TooltipProps>;
 

goTorrentWebUI/node_modules/material-ui/es/Tooltip/Tooltip.js

@@ -1,28 +1,20 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 /* eslint-disable react/no-multi-comp, no-underscore-dangle */
-import React, { Children } from 'react';
 
+import React from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import EventListener from 'react-event-listener';
 import debounce from 'lodash/debounce';
 import warning from 'warning';
 import classNames from 'classnames';
 import { Manager, Target, Popper } from 'react-popper';
-import { capitalizeFirstLetter } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
+import RefHolder from '../internal/RefHolder';
 import common from '../colors/common';
-import grey from '../colors/grey';
 import withStyles from '../styles/withStyles';
 
-// Use a class component so we can get a reference.
-class TargetChildren extends React.Component {
-  render() {
-    return this.props.element;
-  }
-}
-
 export const styles = theme => ({
   root: {
     display: 'inline',
@@ -35,24 +27,23 @@ export const styles = theme => ({
     pointerEvents: 'none'
   },
   tooltip: {
-    background: grey[700],
+    backgroundColor: theme.palette.grey[700],
     borderRadius: 2,
-    color: common.fullWhite,
+    color: common.white,
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.pxToRem(14),
-    minHeight: theme.spacing.unit * 4,
-    lineHeight: '32px',
     opacity: 0,
-    padding: `0 ${theme.spacing.unit}px`,
     transform: 'scale(0)',
     transition: theme.transitions.create(['opacity', 'transform'], {
       duration: theme.transitions.duration.shortest
     }),
+    minHeight: 0,
+    padding: theme.spacing.unit,
+    fontSize: theme.typography.pxToRem(14),
+    lineHeight: `${theme.typography.round(16 / 14)}em`,
     [theme.breakpoints.up('sm')]: {
-      minHeight: 22,
-      lineHeight: '22px',
-      padding: `0 ${theme.spacing.unit}px`,
-      fontSize: theme.typography.pxToRem(10)
+      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
+      fontSize: theme.typography.pxToRem(10),
+      lineHeight: `${theme.typography.round(14 / 10)}em`
     }
   },
   tooltipLeft: {
@@ -114,16 +105,14 @@ class Tooltip extends React.Component {
       }
     }, 166), this.handleRequestOpen = event => {
       const { children } = this.props;
-      if (typeof children !== 'string') {
-        const childrenProps = Children.only(children).props;
+      const childrenProps = children.props;
 
-        if (event.type === 'focus' && childrenProps.onFocus) {
-          childrenProps.onFocus(event);
-        }
+      if (event.type === 'focus' && childrenProps.onFocus) {
+        childrenProps.onFocus(event);
+      }
 
-        if (event.type === 'mouseover' && childrenProps.onMouseOver) {
-          childrenProps.onMouseOver(event);
-        }
+      if (event.type === 'mouseover' && childrenProps.onMouseOver) {
+        childrenProps.onMouseOver(event);
       }
 
       if (this.ignoreNonTouchEvents && event.type !== 'touchstart') {
@@ -143,21 +132,19 @@ class Tooltip extends React.Component {
         this.setState({ open: true });
       }
 
-      if (this.props.onRequestOpen) {
-        this.props.onRequestOpen(event, true);
+      if (this.props.onOpen) {
+        this.props.onOpen(event, true);
       }
-    }, this.handleRequestClose = event => {
+    }, this.handleClose = event => {
       const { children } = this.props;
-      if (typeof children !== 'string') {
-        const childrenProps = Children.only(children).props;
+      const childrenProps = children.props;
 
-        if (event.type === 'blur' && childrenProps.onBlur) {
-          childrenProps.onBlur(event);
-        }
+      if (event.type === 'blur' && childrenProps.onBlur) {
+        childrenProps.onBlur(event);
+      }
 
-        if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
-          childrenProps.onMouseLeave(event);
-        }
+      if (event.type === 'mouseleave' && childrenProps.onMouseLeave) {
+        childrenProps.onMouseLeave(event);
       }
 
       clearTimeout(this.leaveTimer);
@@ -175,18 +162,16 @@ class Tooltip extends React.Component {
         this.setState({ open: false });
       }
 
-      if (this.props.onRequestClose) {
-        this.props.onRequestClose(event, false);
+      if (this.props.onClose) {
+        this.props.onClose(event, false);
       }
     }, this.handleTouchStart = event => {
       this.ignoreNonTouchEvents = true;
       const { children } = this.props;
-      if (typeof children !== 'string') {
-        const childrenProps = Children.only(children).props;
+      const childrenProps = children.props;
 
-        if (childrenProps.onTouchStart) {
-          childrenProps.onTouchStart(event);
-        }
+      if (childrenProps.onTouchStart) {
+        childrenProps.onTouchStart(event);
       }
 
       clearTimeout(this.touchTimer);
@@ -196,12 +181,10 @@ class Tooltip extends React.Component {
       }, 1e3);
     }, this.handleTouchEnd = event => {
       const { children } = this.props;
-      if (typeof children !== 'string') {
-        const childrenProps = Children.only(children).props;
+      const childrenProps = children.props;
 
-        if (childrenProps.onTouchEnd) {
-          childrenProps.onTouchEnd(event);
-        }
+      if (childrenProps.onTouchEnd) {
+        childrenProps.onTouchEnd(event);
       }
 
       clearTimeout(this.touchTimer);
@@ -216,7 +199,7 @@ class Tooltip extends React.Component {
   componentWillMount() {
     const { props } = this;
 
-    this.isControlled = props.open !== undefined;
+    this.isControlled = props.open != null;
 
     if (!this.isControlled) {
       // not controlled, use internal state
@@ -227,9 +210,7 @@ class Tooltip extends React.Component {
   }
 
   componentDidMount() {
-    warning(!this.children || !this.children.disabled ||
-    // $FlowFixMe
-    !this.children.tagName.toLowerCase() === 'button', ['Material-UI: you are providing a disabled button children to the Tooltip component.', 'A disabled element do not fire events.', 'But the Tooltip needs to listen to the children element events to display the title.', '', 'Place a `div` over top of the element.'].join('\n'));
+    process.env.NODE_ENV !== "production" ? warning(!this.children || !this.children.disabled || !this.children.tagName.toLowerCase() === 'button', ['Material-UI: you are providing a disabled button children to the Tooltip component.', 'A disabled element do not fire events.', 'But the Tooltip needs to listen to the children element events to display the title.', '', 'Place a `div` over top of the element.'].join('\n')) : void 0;
   }
 
   componentWillUnmount() {
@@ -250,21 +231,25 @@ class Tooltip extends React.Component {
       enterDelay,
       id,
       leaveDelay,
+      onClose,
+      onOpen,
       open: openProp,
-      onRequestClose,
-      onRequestOpen,
-      theme,
-      title,
       placement: rawPlacement,
-      PopperProps: { PopperClassName } = {}
+      PopperProps: { PopperClassName } = {},
+      theme,
+      title
     } = _props,
           PopperOther = _objectWithoutProperties(_props.PopperProps, ['PopperClassName']),
-          other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'disableTriggerFocus', 'disableTriggerHover', 'disableTriggerTouch', 'enterDelay', 'id', 'leaveDelay', 'open', 'onRequestClose', 'onRequestOpen', 'theme', 'title', 'placement', 'PopperProps']);
+          other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'disableTriggerFocus', 'disableTriggerHover', 'disableTriggerTouch', 'enterDelay', 'id', 'leaveDelay', 'onClose', 'onOpen', 'open', 'placement', 'PopperProps', 'theme', 'title']);
 
     const placement = theme.direction === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement;
-    const open = this.isControlled ? openProp : this.state.open;
+    let open = this.isControlled ? openProp : this.state.open;
     const childrenProps = {};
 
+    if (title === '') {
+      open = false;
+    }
+
     childrenProps['aria-describedby'] = id;
 
     if (!disableTriggerTouch) {
@@ -274,17 +259,15 @@ class Tooltip extends React.Component {
 
     if (!disableTriggerHover) {
       childrenProps.onMouseOver = this.handleRequestOpen;
-      childrenProps.onMouseLeave = this.handleRequestClose;
+      childrenProps.onMouseLeave = this.handleClose;
     }
 
     if (!disableTriggerFocus) {
       childrenProps.onFocus = this.handleRequestOpen;
-      childrenProps.onBlur = this.handleRequestClose;
+      childrenProps.onBlur = this.handleClose;
     }
 
-    if (typeof childrenProp !== 'string' && childrenProp.props) {
-      warning(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', `Remove this title property \`${childrenProp.props.title}\` or the Tooltip component.`].join('\n'));
-    }
+    process.env.NODE_ENV !== "production" ? warning(!childrenProp.props.title, ['Material-UI: you have been providing a `title` property to the child of <Tooltip />.', `Remove this title property \`${childrenProp.props.title}\` or the Tooltip component.`].join('\n')) : void 0;
 
     return React.createElement(
       EventListener,
@@ -295,13 +278,16 @@ class Tooltip extends React.Component {
         React.createElement(
           Target,
           null,
-          ({ targetProps }) => React.createElement(TargetChildren, {
-            element: typeof childrenProp !== 'string' ? React.cloneElement(childrenProp, childrenProps) : childrenProp,
-            ref: node => {
-              this.children = findDOMNode(node);
-              targetProps.ref(this.children);
-            }
-          })
+          ({ targetProps }) => React.createElement(
+            RefHolder,
+            {
+              ref: node => {
+                this.children = findDOMNode(node);
+                targetProps.ref(this.children);
+              }
+            },
+            React.cloneElement(childrenProp, childrenProps)
+          )
         ),
         React.createElement(
           Popper,
@@ -314,22 +300,106 @@ class Tooltip extends React.Component {
               this.popper = node;
             }
           }),
-          React.createElement(
-            'div',
-            {
-              id: id,
-              role: 'tooltip',
-              'aria-hidden': !open,
-              className: classNames(classes.tooltip, { [classes.tooltipOpen]: open }, classes[`tooltip${capitalizeFirstLetter(placement.split('-')[0])}`])
-            },
-            title
-          )
+          ({ popperProps, restProps }) => {
+            const actualPlacement = popperProps['data-placement'] || placement;
+            return React.createElement(
+              'div',
+              _extends({}, popperProps, restProps, {
+                style: _extends({}, popperProps.style, {
+                  top: popperProps.style.top || 0,
+                  left: popperProps.style.left || 0
+                }, restProps.style)
+              }),
+              React.createElement(
+                'div',
+                {
+                  id: id,
+                  role: 'tooltip',
+                  'aria-hidden': !open,
+                  className: classNames(classes.tooltip, { [classes.tooltipOpen]: open }, classes[`tooltip${capitalize(actualPlacement.split('-')[0])}`])
+                },
+                title
+              )
+            );
+          }
         )
       )
     );
   }
 }
 
+Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Tooltip reference element.
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Do not respond to focus events.
+   */
+  disableTriggerFocus: PropTypes.bool,
+  /**
+   * Do not respond to hover events.
+   */
+  disableTriggerHover: PropTypes.bool,
+  /**
+   * Do not respond to long press touch events.
+   */
+  disableTriggerTouch: PropTypes.bool,
+  /**
+   * The number of milliseconds to wait before showing the tooltip.
+   */
+  enterDelay: PropTypes.number,
+  /**
+   * The relationship between the tooltip and the wrapper component is not clear from the DOM.
+   * By providing this property, we can use aria-describedby to solve the accessibility issue.
+   */
+  id: PropTypes.string,
+  /**
+   * The number of milliseconds to wait before hidding the tooltip.
+   */
+  leaveDelay: PropTypes.number,
+  /**
+   * Callback fired when the tooltip requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired when the tooltip requests to be open.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onOpen: PropTypes.func,
+  /**
+   * If `true`, the tooltip is shown.
+   */
+  open: PropTypes.bool,
+  /**
+   * Tooltip placement
+   */
+  placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  /**
+   * Properties applied to the `Popper` element.
+   */
+  PopperProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * Tooltip title. Zero-length titles string are never displayed.
+   */
+  title: PropTypes.node.isRequired
+} : {};
+
 Tooltip.defaultProps = {
   disableTriggerFocus: false,
   disableTriggerHover: false,
@@ -338,4 +408,5 @@ Tooltip.defaultProps = {
   leaveDelay: 0,
   placement: 'bottom'
 };
+
 export default withStyles(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip);