Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/ButtonBase/ButtonBase.d.ts

@@ -1,23 +1,21 @@
 import * as React from 'react';
-import { StandardProps, Replace } from '..';
+import { StandardProps } from '..';
 
-export interface ButtonBaseProps extends StandardProps<
-  Replace<React.AnchorHTMLAttributes<HTMLAnchorElement>, React.ButtonHTMLAttributes<HTMLButtonElement>>,
-  ButtonBaseClassKey
-> {
+export interface ButtonBaseProps
+  extends StandardProps<
+      React.AnchorHTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>,
+      ButtonBaseClassKey
+    > {
+  buttonRef?: React.Ref<any>;
   centerRipple?: boolean;
-  component?: React.ReactType;
+  component?: React.ReactType<ButtonBaseProps>;
   disableRipple?: boolean;
   focusRipple?: boolean;
   keyboardFocusedClassName?: string;
   onKeyboardFocus?: React.FocusEventHandler<any>;
-  rootRef?: React.Ref<any>;
 }
 
-export type ButtonBaseClassKey =
-  | 'root'
-  | 'disabled'
-  ;
+export type ButtonBaseClassKey = 'root' | 'disabled';
 
 declare const ButtonBase: React.ComponentType<ButtonBaseProps>;
 

goTorrentWebUI/node_modules/material-ui/ButtonBase/ButtonBase.js

@@ -41,6 +41,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactDom = require('react-dom');
 
 var _classnames = require('classnames');
@@ -51,6 +55,10 @@ var _keycode = require('keycode');
 
 var _keycode2 = _interopRequireDefault(_keycode);
 
+var _ownerWindow = require('dom-helpers/ownerWindow');
+
+var _ownerWindow2 = _interopRequireDefault(_ownerWindow);
+
 var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -67,171 +75,43 @@ var _createRippleHandler2 = _interopRequireDefault(_createRippleHandler);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any; //  weak
-
-var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
-
-var styles = exports.styles = function styles(theme) {
-  return {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-      // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
-      backgroundColor: 'transparent', // Reset default value
-      outline: 'none',
-      border: 0,
-      borderRadius: 0,
-      cursor: 'pointer',
-      userSelect: 'none',
-      appearance: 'none',
-      textDecoration: 'none',
-      // So we take precedent over the style of a native <a /> element.
-      color: 'inherit',
-      '&::-moz-focus-inner': {
-        borderStyle: 'none' // Remove Firefox dotted outline.
-      }
-    },
-    disabled: {
-      pointerEvents: 'none', // Disable link interactions
-      cursor: 'default'
+var styles = exports.styles = {
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    backgroundColor: 'transparent', // Reset default value
+    outline: 'none',
+    border: 0,
+    margin: 0, // Remove the margin in Safari
+    borderRadius: 0,
+    padding: 0, // Remove the padding in Firefox
+    cursor: 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    '-moz-appearance': 'none', // Reset
+    '-webkit-appearance': 'none', // Reset
+    textDecoration: 'none',
+    // So we take precedent over the style of a native <a /> element.
+    color: 'inherit',
+    '&::-moz-focus-inner': {
+      borderStyle: 'none' // Remove Firefox dotted outline.
     }
-  };
+  },
+  disabled: {
+    pointerEvents: 'none', // Disable link interactions
+    cursor: 'default'
+  }
 };
 
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * If `true`, the ripples will be centered.
-   * They won't start at the cursor interaction position.
-   */
-  centerRipple: require('prop-types').bool,
-
-  /**
-   * The content of the component.
-   */
-  children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   * The default value is a `button`.
-   */
-  component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
-
-  /**
-   * If `true`, the base button will be disabled.
-   */
-  disabled: require('prop-types').bool,
-
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple: require('prop-types').bool,
-
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * `disableRipple` must also be `false`.
-   */
-  focusRipple: require('prop-types').bool,
-
-  /**
-   * The CSS class applied while the component is keyboard focused.
-   */
-  keyboardFocusedClassName: require('prop-types').string,
-
-  /**
-   * @ignore
-   */
-  onBlur: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onClick: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onFocus: require('prop-types').func,
-
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onKeyboardFocus: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onKeyDown: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onKeyUp: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onMouseDown: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onMouseLeave: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onMouseUp: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onTouchEnd: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onTouchMove: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onTouchStart: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  role: require('prop-types').string,
-
-  /**
-   * Use that property to pass a ref callback to the root component.
-   */
-  rootRef: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  tabIndex: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').string]),
-
-  /**
-   * @ignore
-   */
-  type: require('prop-types').string.isRequired
-};
+/**
+ * `ButtonBase` contains as few styles as possible.
+ * It aims to be a simple building block for creating a button.
+ * It contains a load of style reset and some focus/ripple logic.
+ */
 
 var ButtonBase = function (_React$Component) {
   (0, _inherits3.default)(ButtonBase, _React$Component);
@@ -256,7 +136,9 @@ var ButtonBase = function (_React$Component) {
       if (_this.props.onKeyboardFocus) {
         _this.props.onKeyboardFocus(event);
       }
-    }, _this.ripple = null, _this.keyDown = false, _this.button = null, _this.keyboardFocusTimeout = null, _this.keyboardFocusCheckTime = 30, _this.keyboardFocusMaxCheckTimes = 5, _this.handleKeyDown = function (event) {
+    }, _this.onRippleRef = function (node) {
+      _this.ripple = node;
+    }, _this.ripple = null, _this.keyDown = false, _this.button = null, _this.keyboardFocusTimeout = null, _this.keyboardFocusCheckTime = 50, _this.keyboardFocusMaxCheckTimes = 5, _this.handleKeyDown = function (event) {
       var _this$props = _this.props,
           component = _this$props.component,
           focusRipple = _this$props.focusRipple,
@@ -266,7 +148,7 @@ var ButtonBase = function (_React$Component) {
       var key = (0, _keycode2.default)(event);
 
       // Check if key is already down to avoid repeats being counted as multiple activations
-      if (focusRipple && !_this.keyDown && _this.state.keyboardFocused && key === 'space') {
+      if (focusRipple && !_this.keyDown && _this.state.keyboardFocused && _this.ripple && key === 'space') {
         _this.keyDown = true;
         event.persist();
         _this.ripple.stop(event, function () {
@@ -279,12 +161,14 @@ var ButtonBase = function (_React$Component) {
       }
 
       // Keyboard accessibility for non interactive elements
-      if (event.target === _this.button && onClick && component && component !== 'a' && component !== 'button' && (key === 'space' || key === 'enter')) {
+      if (event.target === event.currentTarget && component && component !== 'button' && (key === 'space' || key === 'enter')) {
         event.preventDefault();
-        onClick(event);
+        if (onClick) {
+          onClick(event);
+        }
       }
     }, _this.handleKeyUp = function (event) {
-      if (_this.props.focusRipple && (0, _keycode2.default)(event) === 'space' && _this.state.keyboardFocused) {
+      if (_this.props.focusRipple && (0, _keycode2.default)(event) === 'space' && _this.ripple && _this.state.keyboardFocused) {
         _this.keyDown = false;
         event.persist();
         _this.ripple.stop(event, function () {
@@ -319,8 +203,9 @@ var ButtonBase = function (_React$Component) {
       }
 
       event.persist();
-      var keyboardFocusCallback = _this.onKeyboardFocusHandler.bind(_this, event);
-      (0, _keyboardFocus.detectKeyboardFocus)(_this, _this.button, keyboardFocusCallback);
+      (0, _keyboardFocus.detectKeyboardFocus)(_this, _this.button, function () {
+        _this.onKeyboardFocusHandler(event);
+      });
 
       if (_this.props.onFocus) {
         _this.props.onFocus(event);
@@ -332,7 +217,18 @@ var ButtonBase = function (_React$Component) {
     key: 'componentDidMount',
     value: function componentDidMount() {
       this.button = (0, _reactDom.findDOMNode)(this);
-      (0, _keyboardFocus.listenForFocusKeys)();
+      (0, _keyboardFocus.listenForFocusKeys)((0, _ownerWindow2.default)(this.button));
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      // The blur won't fire when the disabled state is set on a focused input.
+      // We need to book keep the focused state manually.
+      if (!this.props.disabled && nextProps.disabled && this.state.keyboardFocused) {
+        this.setState({
+          keyboardFocused: false
+        });
+      }
     }
   }, {
     key: 'componentWillUpdate',
@@ -348,28 +244,13 @@ var ButtonBase = function (_React$Component) {
       clearTimeout(this.keyboardFocusTimeout);
     } // Used to help track keyboard activation keyDown
 
-  }, {
-    key: 'renderRipple',
-    value: function renderRipple() {
-      var _this2 = this;
-
-      if (!this.props.disableRipple && !this.props.disabled) {
-        return _react2.default.createElement(_TouchRipple2.default, {
-          innerRef: function innerRef(node) {
-            _this2.ripple = node;
-          },
-          center: this.props.centerRipple
-        });
-      }
-
-      return null;
-    }
   }, {
     key: 'render',
     value: function render() {
       var _classNames;
 
       var _props = this.props,
+          buttonRef = _props.buttonRef,
           centerRipple = _props.centerRipple,
           children = _props.children,
           classes = _props.classes,
@@ -390,10 +271,9 @@ var ButtonBase = function (_React$Component) {
           onTouchEnd = _props.onTouchEnd,
           onTouchMove = _props.onTouchMove,
           onTouchStart = _props.onTouchStart,
-          rootRef = _props.rootRef,
           tabIndex = _props.tabIndex,
           type = _props.type,
-          other = (0, _objectWithoutProperties3.default)(_props, ['centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'keyboardFocusedClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'rootRef', 'tabIndex', 'type']);
+          other = (0, _objectWithoutProperties3.default)(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'keyboardFocusedClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'type']);
 
 
       var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, keyboardFocusedClassName || '', this.state.keyboardFocused), _classNames), classNameProp);
@@ -412,11 +292,9 @@ var ButtonBase = function (_React$Component) {
 
       if (ComponentProp === 'button') {
         buttonProps.type = type || 'button';
-      }
-
-      if (ComponentProp !== 'a') {
-        buttonProps.role = buttonProps.role || 'button';
         buttonProps.disabled = disabled;
+      } else {
+        buttonProps.role = 'button';
       }
 
       return _react2.default.createElement(
@@ -432,24 +310,132 @@ var ButtonBase = function (_React$Component) {
           onTouchEnd: this.handleTouchEnd,
           onTouchMove: this.handleTouchMove,
           onTouchStart: this.handleTouchStart,
-          tabIndex: disabled ? -1 : tabIndex,
-          className: className
-        }, buttonProps, other, {
-          ref: rootRef
-        }),
+          tabIndex: disabled ? '-1' : tabIndex,
+          className: className,
+          ref: buttonRef
+        }, buttonProps, other),
         children,
-        this.renderRipple()
+        !disableRipple && !disabled ? _react2.default.createElement(_TouchRipple2.default, { innerRef: this.onRippleRef, center: centerRipple }) : null
       );
     }
   }]);
   return ButtonBase;
 }(_react2.default.Component);
 
+ButtonBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Use that property to pass a ref callback to the native button component.
+   */
+  buttonRef: _propTypes2.default.func,
+  /**
+   * If `true`, the ripples will be centered.
+   * They won't start at the cursor interaction position.
+   */
+  centerRipple: _propTypes2.default.bool,
+  /**
+   * The content of the component.
+   */
+  children: _propTypes2.default.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * If `true`, the base button will be disabled.
+   */
+  disabled: _propTypes2.default.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: _propTypes2.default.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * `disableRipple` must also be `false`.
+   */
+  focusRipple: _propTypes2.default.bool,
+  /**
+   * The CSS class applied while the component is keyboard focused.
+   */
+  keyboardFocusedClassName: _propTypes2.default.string,
+  /**
+   * @ignore
+   */
+  onBlur: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onFocus: _propTypes2.default.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onKeyboardFocus: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  role: _propTypes2.default.string,
+  /**
+   * @ignore
+   */
+  tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+  /**
+   * @ignore
+   */
+  type: _propTypes2.default.string
+} : {};
+
 ButtonBase.defaultProps = {
   centerRipple: false,
-  focusRipple: false,
   disableRipple: false,
-  tabIndex: 0,
+  focusRipple: false,
+  tabIndex: '0',
   type: 'button'
 };
+
 exports.default = (0, _withStyles2.default)(styles, { name: 'MuiButtonBase' })(ButtonBase);

goTorrentWebUI/node_modules/material-ui/ButtonBase/ButtonBase.js.flow

@@ -1,30 +1,33 @@
-// @flow weak
-
 import React from 'react';
-import type { ElementType, Node } from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import keycode from 'keycode';
+import ownerWindow from 'dom-helpers/ownerWindow';
 import withStyles from '../styles/withStyles';
 import { listenForFocusKeys, detectKeyboardFocus, focusKeyPressed } from '../utils/keyboardFocus';
 import TouchRipple from './TouchRipple';
 import createRippleHandler from './createRippleHandler';
 
-export const styles = (theme: Object) => ({
+export const styles = {
   root: {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     position: 'relative',
     // Remove grey highlight
-    WebkitTapHighlightColor: theme.palette.common.transparent,
+    WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent', // Reset default value
     outline: 'none',
     border: 0,
+    margin: 0, // Remove the margin in Safari
     borderRadius: 0,
+    padding: 0, // Remove the padding in Firefox
     cursor: 'pointer',
     userSelect: 'none',
-    appearance: 'none',
+    verticalAlign: 'middle',
+    '-moz-appearance': 'none', // Reset
+    '-webkit-appearance': 'none', // Reset
     textDecoration: 'none',
     // So we take precedent over the style of a native <a /> element.
     color: 'inherit',
@@ -36,140 +39,31 @@ export const styles = (theme: Object) => ({
     pointerEvents: 'none', // Disable link interactions
     cursor: 'default',
   },
-});
-
-type ProvidedProps = {
-  classes: Object,
 };
 
-export type Props = {
-  /**
-   * If `true`, the ripples will be centered.
-   * They won't start at the cursor interaction position.
-   */
-  centerRipple?: boolean,
-  /**
-   * The content of the component.
-   */
-  children?: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   * The default value is a `button`.
-   */
-  component?: ElementType,
-  /**
-   * If `true`, the base button will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple?: boolean,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * `disableRipple` must also be `false`.
-   */
-  focusRipple?: boolean,
-  /**
-   * The CSS class applied while the component is keyboard focused.
-   */
-  keyboardFocusedClassName?: string,
-  /**
-   * @ignore
-   */
-  onBlur?: Function,
-  /**
-   * @ignore
-   */
-  onClick?: Function,
-  /**
-   * @ignore
-   */
-  onFocus?: Function,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onKeyboardFocus?: (event: SyntheticEvent<>) => void,
-  /**
-   * @ignore
-   */
-  onKeyDown?: Function,
-  /**
-   * @ignore
-   */
-  onKeyUp?: Function,
-  /**
-   * @ignore
-   */
-  onMouseDown?: Function,
-  /**
-   * @ignore
-   */
-  onMouseLeave?: Function,
-  /**
-   * @ignore
-   */
-  onMouseUp?: Function,
-  /**
-   * @ignore
-   */
-  onTouchEnd?: Function,
-  /**
-   * @ignore
-   */
-  onTouchMove?: Function,
-  /**
-   * @ignore
-   */
-  onTouchStart?: Function,
-  /**
-   * @ignore
-   */
-  role?: string,
-  /**
-   * Use that property to pass a ref callback to the root component.
-   */
-  rootRef?: Function,
-  /**
-   * @ignore
-   */
-  tabIndex?: number | string,
-  /**
-   * @ignore
-   */
-  type: string,
-};
-
-type State = {
-  keyboardFocused: boolean,
-};
-
-class ButtonBase extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    centerRipple: false,
-    focusRipple: false,
-    disableRipple: false,
-    tabIndex: 0,
-    type: 'button',
-  };
-
+/**
+ * `ButtonBase` contains as few styles as possible.
+ * It aims to be a simple building block for creating a button.
+ * It contains a load of style reset and some focus/ripple logic.
+ */
+class ButtonBase extends React.Component {
   state = {
     keyboardFocused: false,
   };
 
   componentDidMount() {
     this.button = findDOMNode(this);
-    listenForFocusKeys();
+    listenForFocusKeys(ownerWindow(this.button));
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // The blur won't fire when the disabled state is set on a focused input.
+    // We need to book keep the focused state manually.
+    if (!this.props.disabled && nextProps.disabled && this.state.keyboardFocused) {
+      this.setState({
+        keyboardFocused: false,
+      });
+    }
   }
 
   componentWillUpdate(nextProps, nextState) {
@@ -197,11 +91,15 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
+  onRippleRef = node => {
+    this.ripple = node;
+  };
+
   ripple = null;
   keyDown = false; // Used to help track keyboard activation keyDown
   button = null;
   keyboardFocusTimeout = null;
-  keyboardFocusCheckTime = 30;
+  keyboardFocusCheckTime = 50;
   keyboardFocusMaxCheckTimes = 5;
 
   handleKeyDown = event => {
@@ -209,7 +107,13 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
     const key = keycode(event);
 
     // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !this.keyDown && this.state.keyboardFocused && key === 'space') {
+    if (
+      focusRipple &&
+      !this.keyDown &&
+      this.state.keyboardFocused &&
+      this.ripple &&
+      key === 'space'
+    ) {
       this.keyDown = true;
       event.persist();
       this.ripple.stop(event, () => {
@@ -223,20 +127,25 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
 
     // Keyboard accessibility for non interactive elements
     if (
-      event.target === this.button &&
-      onClick &&
+      event.target === event.currentTarget &&
       component &&
-      component !== 'a' &&
       component !== 'button' &&
       (key === 'space' || key === 'enter')
     ) {
       event.preventDefault();
-      onClick(event);
+      if (onClick) {
+        onClick(event);
+      }
     }
   };
 
   handleKeyUp = event => {
-    if (this.props.focusRipple && keycode(event) === 'space' && this.state.keyboardFocused) {
+    if (
+      this.props.focusRipple &&
+      keycode(event) === 'space' &&
+      this.ripple &&
+      this.state.keyboardFocused
+    ) {
       this.keyDown = false;
       event.persist();
       this.ripple.stop(event, () => this.ripple.pulsate(event));
@@ -285,31 +194,18 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
     }
 
     event.persist();
-    const keyboardFocusCallback = this.onKeyboardFocusHandler.bind(this, event);
-    detectKeyboardFocus(this, this.button, keyboardFocusCallback);
+    detectKeyboardFocus(this, this.button, () => {
+      this.onKeyboardFocusHandler(event);
+    });
 
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
   };
 
-  renderRipple() {
-    if (!this.props.disableRipple && !this.props.disabled) {
-      return (
-        <TouchRipple
-          innerRef={node => {
-            this.ripple = node;
-          }}
-          center={this.props.centerRipple}
-        />
-      );
-    }
-
-    return null;
-  }
-
   render() {
     const {
+      buttonRef,
       centerRipple,
       children,
       classes,
@@ -330,7 +226,6 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
       onTouchEnd,
       onTouchMove,
       onTouchStart,
-      rootRef,
       tabIndex,
       type,
       ...other
@@ -359,11 +254,9 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
 
     if (ComponentProp === 'button') {
       buttonProps.type = type || 'button';
-    }
-
-    if (ComponentProp !== 'a') {
-      buttonProps.role = buttonProps.role || 'button';
       buttonProps.disabled = disabled;
+    } else {
+      buttonProps.role = 'button';
     }
 
     return (
@@ -378,17 +271,135 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
         onTouchEnd={this.handleTouchEnd}
         onTouchMove={this.handleTouchMove}
         onTouchStart={this.handleTouchStart}
-        tabIndex={disabled ? -1 : tabIndex}
+        tabIndex={disabled ? '-1' : tabIndex}
         className={className}
+        ref={buttonRef}
         {...buttonProps}
         {...other}
-        ref={rootRef}
       >
         {children}
-        {this.renderRipple()}
+        {!disableRipple && !disabled ? (
+          <TouchRipple innerRef={this.onRippleRef} center={centerRipple} />
+        ) : null}
       </ComponentProp>
     );
   }
 }
 
+ButtonBase.propTypes = {
+  /**
+   * Use that property to pass a ref callback to the native button component.
+   */
+  buttonRef: PropTypes.func,
+  /**
+   * If `true`, the ripples will be centered.
+   * They won't start at the cursor interaction position.
+   */
+  centerRipple: PropTypes.bool,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the base button will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * `disableRipple` must also be `false`.
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * The CSS class applied while the component is keyboard focused.
+   */
+  keyboardFocusedClassName: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onKeyboardFocus: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: PropTypes.func,
+  /**
+   * @ignore
+   */
+  role: PropTypes.string,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.string,
+};
+
+ButtonBase.defaultProps = {
+  centerRipple: false,
+  disableRipple: false,
+  focusRipple: false,
+  tabIndex: '0',
+  type: 'button',
+};
+
 export default withStyles(styles, { name: 'MuiButtonBase' })(ButtonBase);

goTorrentWebUI/node_modules/material-ui/ButtonBase/Ripple.js

@@ -40,6 +40,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -50,38 +54,6 @@ var _Transition2 = _interopRequireDefault(_Transition);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
-   */
-  pulsate: require('prop-types').bool,
-
-  /**
-   * Diameter of the ripple.
-   */
-  rippleSize: require('prop-types').number.isRequired,
-
-  /**
-   * Horizontal position of the ripple center.
-   */
-  rippleX: require('prop-types').number.isRequired,
-
-  /**
-   * Vertical position of the ripple center.
-   */
-  rippleY: require('prop-types').number.isRequired
-}; //  weak
-
 /**
  * @ignore - internal component.
  */
@@ -102,18 +74,6 @@ var Ripple = function (_React$Component) {
     return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Ripple.__proto__ || (0, _getPrototypeOf2.default)(Ripple)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       rippleVisible: false,
       rippleLeaving: false
-    }, _this.getRippleStyles = function (props) {
-      var rippleSize = props.rippleSize,
-          rippleX = props.rippleX,
-          rippleY = props.rippleY;
-
-
-      return {
-        width: rippleSize,
-        height: rippleSize,
-        top: -(rippleSize / 2) + rippleY,
-        left: -(rippleSize / 2) + rippleX
-      };
     }, _this.handleEnter = function () {
       _this.setState({
         rippleVisible: true
@@ -147,13 +107,20 @@ var Ripple = function (_React$Component) {
 
       var rippleClassName = (0, _classnames2.default)(classes.ripple, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.rippleVisible, rippleVisible), (0, _defineProperty3.default)(_classNames2, classes.rippleFast, pulsate), _classNames2));
 
+      var rippleStyles = {
+        width: rippleSize,
+        height: rippleSize,
+        top: -(rippleSize / 2) + rippleY,
+        left: -(rippleSize / 2) + rippleX
+      };
+
       return _react2.default.createElement(
         _Transition2.default,
         (0, _extends3.default)({ onEnter: this.handleEnter, onExit: this.handleExit }, other),
         _react2.default.createElement(
           'span',
           { className: className },
-          _react2.default.createElement('span', { className: rippleClassName, style: this.getRippleStyles(this.props) })
+          _react2.default.createElement('span', { className: rippleClassName, style: rippleStyles })
         )
       );
     }
@@ -161,7 +128,35 @@ var Ripple = function (_React$Component) {
   return Ripple;
 }(_react2.default.Component);
 
+Ripple.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: _propTypes2.default.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: _propTypes2.default.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: _propTypes2.default.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: _propTypes2.default.number
+} : {};
+
 Ripple.defaultProps = {
   pulsate: false
 };
+
 exports.default = Ripple;

goTorrentWebUI/node_modules/material-ui/ButtonBase/Ripple.js.flow

@@ -1,66 +1,17 @@
-// @flow weak
-
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Transition from 'react-transition-group/Transition';
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
-   */
-  pulsate?: boolean,
-  /**
-   * Diameter of the ripple.
-   */
-  rippleSize: number,
-  /**
-   * Horizontal position of the ripple center.
-   */
-  rippleX: number,
-  /**
-   * Vertical position of the ripple center.
-   */
-  rippleY: number,
-};
-
-type State = { rippleVisible: boolean, rippleLeaving: boolean };
-
 /**
  * @ignore - internal component.
  */
-class Ripple extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    pulsate: false,
-  };
-
+class Ripple extends React.Component {
   state = {
     rippleVisible: false,
     rippleLeaving: false,
   };
 
-  getRippleStyles = props => {
-    const { rippleSize, rippleX, rippleY } = props;
-
-    return {
-      width: rippleSize,
-      height: rippleSize,
-      top: -(rippleSize / 2) + rippleY,
-      left: -(rippleSize / 2) + rippleX,
-    };
-  };
-
   handleEnter = () => {
     this.setState({
       rippleVisible: true,
@@ -99,14 +50,52 @@ class Ripple extends React.Component<ProvidedProps & Props, State> {
       [classes.rippleFast]: pulsate,
     });
 
+    const rippleStyles = {
+      width: rippleSize,
+      height: rippleSize,
+      top: -(rippleSize / 2) + rippleY,
+      left: -(rippleSize / 2) + rippleX,
+    };
+
     return (
       <Transition onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
         <span className={className}>
-          <span className={rippleClassName} style={this.getRippleStyles(this.props)} />
+          <span className={rippleClassName} style={rippleStyles} />
         </span>
       </Transition>
     );
   }
 }
 
+Ripple.propTypes = {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: PropTypes.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: PropTypes.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: PropTypes.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: PropTypes.number,
+};
+
+Ripple.defaultProps = {
+  pulsate: false,
+};
+
 export default Ripple;

goTorrentWebUI/node_modules/material-ui/ButtonBase/TouchRipple.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import { StandardProps } from '..';
+
+export interface TouchRippleProps
+  extends StandardProps<TransitionGroup.TransitionGroupProps, TouchRippleClassKey> {
+  center?: boolean;
+}
+
+export type TouchRippleClassKey =
+  | 'root'
+  | 'wrapper'
+  | 'wrapperLeaving'
+  | 'wrapperPulsating'
+  | 'ripple'
+  | 'rippleVisible'
+  | 'rippleFast';
+
+declare const TouchRipple: React.ComponentType<TouchRippleProps>;
+
+export default TouchRipple;

goTorrentWebUI/node_modules/material-ui/ButtonBase/TouchRipple.js

@@ -41,6 +41,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactDom = require('react-dom');
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
@@ -63,8 +67,6 @@ var _Ripple2 = _interopRequireDefault(_Ripple);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-//  weak
-
 var DURATION = 550;
 var DELAY_RIPPLE = exports.DELAY_RIPPLE = 80;
 
@@ -96,10 +98,7 @@ var styles = exports.styles = function styles(theme) {
       display: 'block',
       width: '100%',
       height: '100%',
-      animation: 'mui-ripple-pulsate 1500ms ' + theme.transitions.easing.easeInOut + ' 200ms infinite',
-      rippleVisible: {
-        opacity: 0.2
-      }
+      animation: 'mui-ripple-pulsate 2500ms ' + theme.transitions.easing.easeInOut + ' 200ms infinite'
     },
     '@keyframes mui-ripple-enter': {
       '0%': {
@@ -122,7 +121,7 @@ var styles = exports.styles = function styles(theme) {
         transform: 'scale(1)'
       },
       '50%': {
-        transform: 'scale(0.9)'
+        transform: 'scale(0.92)'
       },
       '100%': {
         transform: 'scale(1)'
@@ -149,27 +148,10 @@ var styles = exports.styles = function styles(theme) {
   };
 };
 
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * If `true`, the ripple starts at the center of the component
-   * rather than at the point of interaction.
-   */
-  center: require('prop-types').bool,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string
-};
-
 /**
  * @ignore - internal component.
  */
+
 var TouchRipple = function (_React$Component) {
   (0, _inherits3.default)(TouchRipple, _React$Component);
 
@@ -211,8 +193,7 @@ var TouchRipple = function (_React$Component) {
       }
 
       var element = fakeElement ? null : _reactDom2.default.findDOMNode(_this);
-      var rect = element ? // $FlowFixMe
-      element.getBoundingClientRect() : {
+      var rect = element ? element.getBoundingClientRect() : {
         width: 0,
         height: 0,
         left: 0,
@@ -242,12 +223,8 @@ var TouchRipple = function (_React$Component) {
           rippleSize += 1;
         }
       } else {
-        var sizeX = Math.max(
-        // $FlowFixMe
-        Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
-        var sizeY = Math.max(
-        // $FlowFixMe
-        Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+        var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+        var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
         rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
       }
 
@@ -274,7 +251,7 @@ var TouchRipple = function (_React$Component) {
 
       var ripples = _this.state.ripples;
 
-      // Add a ripple to the ripples array
+      // Add a ripple to the ripples array.
       ripples = [].concat((0, _toConsumableArray3.default)(ripples), [_react2.default.createElement(_Ripple2.default, {
         key: _this.state.nextKey,
         classes: _this.props.classes,
@@ -357,7 +334,24 @@ var TouchRipple = function (_React$Component) {
   return TouchRipple;
 }(_react2.default.Component);
 
+TouchRipple.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: _propTypes2.default.bool,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string
+} : {};
+
 TouchRipple.defaultProps = {
   center: false
 };
+
 exports.default = (0, _withStyles2.default)(styles, { flip: false, name: 'MuiTouchRipple' })(TouchRipple);

goTorrentWebUI/node_modules/material-ui/ButtonBase/TouchRipple.js.flow

@@ -1,6 +1,5 @@
-// @flow weak
-
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import TransitionGroup from 'react-transition-group/TransitionGroup';
 import classNames from 'classnames';
@@ -10,7 +9,7 @@ import Ripple from './Ripple';
 const DURATION = 550;
 export const DELAY_RIPPLE = 80;
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     display: 'block',
     position: 'absolute',
@@ -37,10 +36,7 @@ export const styles = (theme: Object) => ({
     display: 'block',
     width: '100%',
     height: '100%',
-    animation: `mui-ripple-pulsate 1500ms ${theme.transitions.easing.easeInOut} 200ms infinite`,
-    rippleVisible: {
-      opacity: 0.2,
-    },
+    animation: `mui-ripple-pulsate 2500ms ${theme.transitions.easing.easeInOut} 200ms infinite`,
   },
   '@keyframes mui-ripple-enter': {
     '0%': {
@@ -63,7 +59,7 @@ export const styles = (theme: Object) => ({
       transform: 'scale(1)',
     },
     '50%': {
-      transform: 'scale(0.9)',
+      transform: 'scale(0.92)',
     },
     '100%': {
       transform: 'scale(1)',
@@ -89,36 +85,10 @@ export const styles = (theme: Object) => ({
   },
 });
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * If `true`, the ripple starts at the center of the component
-   * rather than at the point of interaction.
-   */
-  center?: boolean,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-};
-
-type State = { nextKey: number, ripples: Array<*> };
-
 /**
  * @ignore - internal component.
  */
-class TouchRipple extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    center: false,
-  };
-
+class TouchRipple extends React.Component {
   state = {
     nextKey: 0,
     ripples: [],
@@ -158,8 +128,7 @@ class TouchRipple extends React.Component<ProvidedProps & Props, State> {
 
     const element = fakeElement ? null : ReactDOM.findDOMNode(this);
     const rect = element
-      ? // $FlowFixMe
-        element.getBoundingClientRect()
+      ? element.getBoundingClientRect()
       : {
           width: 0,
           height: 0,
@@ -195,21 +164,9 @@ class TouchRipple extends React.Component<ProvidedProps & Props, State> {
       }
     } else {
       const sizeX =
-        Math.max(
-          // $FlowFixMe
-          Math.abs((element ? element.clientWidth : 0) - rippleX),
-          rippleX,
-        ) *
-          2 +
-        2;
+        Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
       const sizeY =
-        Math.max(
-          // $FlowFixMe
-          Math.abs((element ? element.clientHeight : 0) - rippleY),
-          rippleY,
-        ) *
-          2 +
-        2;
+        Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
       rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
     }
 
@@ -233,7 +190,7 @@ class TouchRipple extends React.Component<ProvidedProps & Props, State> {
     const { pulsate, rippleX, rippleY, rippleSize, cb } = params;
     let ripples = this.state.ripples;
 
-    // Add a ripple to the ripples array
+    // Add a ripple to the ripples array.
     ripples = [
       ...ripples,
       <Ripple
@@ -304,4 +261,24 @@ class TouchRipple extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
+TouchRipple.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: PropTypes.bool,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+};
+
+TouchRipple.defaultProps = {
+  center: false,
+};
+
 export default withStyles(styles, { flip: false, name: 'MuiTouchRipple' })(TouchRipple);

goTorrentWebUI/node_modules/material-ui/ButtonBase/createRippleHandler.js.flow

@@ -1,7 +1,5 @@
-// @flow
-
-function createRippleHandler(instance: Object, eventName: string, action: string, cb: ?Function) {
-  return function handleEvent(event: SyntheticUIEvent<>) {
+function createRippleHandler(instance, eventName, action, cb) {
+  return function handleEvent(event) {
     if (cb) {
       cb.call(instance, event);
     }

goTorrentWebUI/node_modules/material-ui/ButtonBase/index.js.flow

@@ -1,3 +1 @@
-// @flow
-
 export { default } from './ButtonBase';