Completely updated React, fixed #11, (hopefully)

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

@@ -1,29 +1,24 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 import { InputProps } from '../Input';
-import { InputClassKey } from '../Input/Input';
+import { MenuProps } from '../Menu';
 
-export interface SelectProps extends StandardProps<
-  InputProps,
-  SelectClassKey,
-  'value'
-> {
+export interface SelectProps extends StandardProps<InputProps, SelectClassKey, 'value'> {
   autoWidth?: boolean;
   displayEmpty?: boolean;
   input?: React.ReactNode;
-  native?: boolean;
+  MenuProps?: Partial<MenuProps>;
   multiple?: boolean;
-  MenuProps?: Object;
-  renderValue?: Function;
+  native?: boolean;
+  onClose?: (event: React.ChangeEvent<{}>) => void;
+  onOpen?: (event: React.ChangeEvent<{}>) => void;
+  open?: boolean;
+  renderValue?: (value: SelectProps['value']) => React.ReactNode;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
   value?: Array<string | number> | string | number;
 }
 
-type SelectClassKey =
-  | InputClassKey
-  | 'select'
-  | 'selectMenu'
-  | 'icon'
-  ;
+export type SelectClassKey = 'root' | 'select' | 'selectMenu' | 'disabled' | 'icon';
 
 declare const Select: React.ComponentType<SelectProps>;
 

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

@@ -1,16 +1,12 @@
-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';
 // @inheritedComponent Input
 
 import React from 'react';
-
-import warning from 'warning';
+import PropTypes from 'prop-types';
 import SelectInput from './SelectInput';
 import withStyles from '../styles/withStyles';
 import Input from '../Input'; // Import to enforce the CSS injection order
-import { isMuiElement } from '../utils/reactHelpers';
 
 export const styles = theme => ({
   root: {
@@ -18,16 +14,14 @@ export const styles = theme => ({
     width: '100%'
   },
   select: {
-    '-moz-appearance': 'none', // Remove Firefox custom style
-    '-webkit-appearance': 'none', // Fix SSR issue
-    appearance: 'none', // Reset
+    '-moz-appearance': 'none', // Reset
+    '-webkit-appearance': 'none', // Reset
     // When interacting quickly, the text can end up selected.
     // Native select can't be selected either.
     userSelect: 'none',
-    padding: `0 ${theme.spacing.unit * 4}px 2px 0`,
-    width: 'auto',
+    paddingRight: theme.spacing.unit * 4,
+    width: `calc(100% - ${theme.spacing.unit * 4}px)`,
     minWidth: theme.spacing.unit * 2, // So it doesn't collapse.
-    height: `calc(1em + ${theme.spacing.unit * 2 - 2}px)`,
     cursor: 'pointer',
     '&:focus': {
       // Show that it's not an text input
@@ -45,20 +39,23 @@ export const styles = theme => ({
     }
   },
   selectMenu: {
+    width: 'auto', // Fix Safari textOverflow
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    lineHeight: `calc(1em + ${theme.spacing.unit * 2 - 2}px)`
+    minHeight: '1.1875em' // Reset (19px), match the native input line-height
   },
   disabled: {
     cursor: 'default'
   },
   icon: {
+    // We use a position absolute over a flexbox in order to forward the pointer events
+    // to the input.
     position: 'absolute',
     right: 0,
-    top: 4,
-    color: theme.palette.text.secondary,
-    'pointer-events': 'none' // Don't block pinter events on the select under the icon.
+    top: 'calc(50% - 12px)', // Center vertically
+    color: theme.palette.action.active,
+    'pointer-events': 'none' // Don't block pointer events on the select under the icon.
   }
 });
 
@@ -69,42 +66,128 @@ function Select(props) {
     classes,
     displayEmpty,
     input,
-    InputClasses,
-    native,
-    multiple,
+    inputProps,
     MenuProps,
-    renderValue
+    multiple,
+    native,
+    onClose,
+    onOpen,
+    open,
+    renderValue,
+    SelectDisplayProps
   } = props,
-        other = _objectWithoutProperties(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'input', 'InputClasses', 'native', 'multiple', 'MenuProps', 'renderValue']);
-
-  // Instead of `Element<typeof Input>` to have more flexibility.
-  warning(isMuiElement(input, ['Input']), ['Material-UI: you have provided an invalid value to the `input` property.', 'We expect an element instance of the `Input` component.'].join('\n'));
+        other = _objectWithoutProperties(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'input', 'inputProps', 'MenuProps', 'multiple', 'native', 'onClose', 'onOpen', 'open', 'renderValue', 'SelectDisplayProps']);
 
   return React.cloneElement(input, _extends({
     // Most of the logic is implemented in `SelectInput`.
     // The `Select` component is a simple API wrapper to expose something better to play with.
     inputComponent: SelectInput,
-    classes: InputClasses
-  }, other, {
-    inputProps: _extends({}, input ? input.props.inputProps : {}, {
+    inputProps: _extends({
       autoWidth,
       children,
       classes,
       displayEmpty,
-      native,
-      multiple,
       MenuProps,
-      renderValue
-    })
-  }));
+      multiple,
+      native,
+      onClose,
+      onOpen,
+      open,
+      renderValue,
+      SelectDisplayProps,
+      type: undefined }, inputProps, input ? input.props.inputProps : {})
+  }, other));
 }
 
+Select.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If true, the width of the popover will automatically be set according to the items inside the
+   * menu, otherwise it will be at least the width of the select input.
+   */
+  autoWidth: PropTypes.bool,
+  /**
+   * The option elements to populate the select with.
+   * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * If `true`, the selected item is displayed even if its value is empty.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  displayEmpty: PropTypes.bool,
+  /**
+   * An `Input` element; does not have to be a material-ui specific `Input`.
+   */
+  input: PropTypes.element,
+  /**
+   * Properties applied to the `input` element.
+   * When `native` is `true`, the properties are applied on the `select` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Properties applied to the `Menu` element.
+   */
+  MenuProps: PropTypes.object,
+  /**
+   * If true, `value` must be an array and the menu will support multiple selections.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  multiple: PropTypes.bool,
+  /**
+   * If `true`, the component will be using a native `select` element.
+   */
+  native: PropTypes.bool,
+  /**
+   * Callback function fired when a menu item is selected.
+   *
+   * @param {object} event The event source of the callback
+   * @param {object} child The react element that was selected
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Useful in controlled mode (see open).
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be opened.
+   * Useful in controlled mode (see open).
+   *
+   * @param {object} event The event source of the callback
+   */
+  onOpen: PropTypes.func,
+  /**
+   * Control `select` open state.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  open: PropTypes.bool,
+  /**
+   * Render the selected value.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  renderValue: PropTypes.func,
+  /**
+   * Properties applied to the clickable div element.
+   */
+  SelectDisplayProps: PropTypes.object,
+  /**
+   * The input value, required for a controlled component.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))])
+} : {};
+
 Select.defaultProps = {
   autoWidth: false,
   displayEmpty: false,
   input: React.createElement(Input, null),
-  native: false,
-  multiple: false
+  multiple: false,
+  native: false
 };
 
 Select.muiName = 'Select';

goTorrentWebUI/node_modules/material-ui/es/Select/SelectInput.d.ts

@@ -1,29 +1,31 @@
 import * as React from 'react';
 import { StandardProps } from '..';
+import { MenuProps } from '../Menu';
 
 export interface SelectInputProps extends StandardProps<{}, SelectInputClassKey> {
   autoWidth: boolean;
   disabled?: boolean;
-  native: boolean;
+  inputRef?: (
+    ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps['value'] },
+  ) => void;
+  MenuProps?: Partial<MenuProps>;
   multiple: boolean;
-  MenuProps?: Object;
   name?: string;
+  native: boolean;
   onBlur?: React.FocusEventHandler<any>;
-  onChange?: (event: React.ChangeEvent<{}>, child: React.ReactNode) => void,
+  onChange?: (event: React.ChangeEvent<{}>, child: React.ReactNode) => void;
+  onClose?: (event: React.ChangeEvent<{}>) => void;
   onFocus?: React.FocusEventHandler<any>;
+  onOpen?: (event: React.ChangeEvent<{}>) => void;
+  open?: boolean;
   readOnly?: boolean;
-  renderValue?: Function;
-  selectRef?: Function;
+  renderValue?: (value: SelectInputProps['value']) => React.ReactNode;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
+  tabIndex?: number;
   value?: string | number | Array<string | number>;
 }
 
-export type SelectInputClassKey =
-  | 'root'
-  | 'select'
-  | 'selectMenu'
-  | 'disabled'
-  | 'icon'
-  ;
+export type SelectInputClassKey = 'root' | 'select' | 'selectMenu' | 'disabled' | 'icon';
 
 declare const SelectInput: React.ComponentType<SelectInputProps>;
 

goTorrentWebUI/node_modules/material-ui/es/Select/SelectInput.js

@@ -1,15 +1,13 @@
-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 _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode';
 import warning from 'warning';
+import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Menu from '../Menu/Menu';
 import { isDirty } from '../Input/Input';
-import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
 
 /**
  * @ignore - internal component.
@@ -19,28 +17,36 @@ class SelectInput extends React.Component {
     var _temp;
 
     return _temp = super(...args), this.state = {
-      anchorEl: null,
       open: false
-    }, this.ignoreNextBlur = false, this.handleClick = event => {
+    }, this.ignoreNextBlur = false, this.displayNode = null, this.isControlled = this.props.open !== undefined, this.update = this.isControlled ? ({ event, open }) => {
+      if (open) {
+        this.props.onOpen(event);
+      } else {
+        this.props.onClose(event);
+      }
+    } : ({ open }) => this.setState({ open }), this.handleClick = event => {
       // Opening the menu is going to blur the. It will be focused back when closed.
       this.ignoreNextBlur = true;
-      this.setState({
+      this.update({
         open: true,
-        anchorEl: event.currentTarget
+        event
       });
-    }, this.handleRequestClose = () => {
-      this.setState({
-        open: false
+    }, this.handleClose = event => {
+      this.update({
+        open: false,
+        event
       });
     }, this.handleItemClick = child => event => {
       if (!this.props.multiple) {
-        this.setState({
-          open: false
+        this.update({
+          open: false,
+          event
         });
       }
 
-      if (this.props.onChange) {
-        const { onChange } = this.props;
+      const { onChange, name } = this.props;
+
+      if (onChange) {
         let value;
         let target;
 
@@ -61,7 +67,7 @@ class SelectInput extends React.Component {
         }
 
         event.persist();
-        event.target = _extends({}, target, { value });
+        event.target = _extends({}, target, { value, name });
 
         onChange(event, child);
       }
@@ -85,17 +91,17 @@ class SelectInput extends React.Component {
         event.preventDefault();
         // Opening the menu is going to blur the. It will be focused back when closed.
         this.ignoreNextBlur = true;
-        this.setState({
+        this.update({
           open: true,
-          anchorEl: event.currentTarget
+          event
         });
       }
     }, this.handleSelectRef = node => {
-      if (!this.props.selectRef) {
+      if (!this.props.inputRef) {
         return;
       }
 
-      this.props.selectRef({
+      this.props.inputRef({
         node,
         // By pass the native input as we expose a rich object (array).
         value: this.props.value
@@ -103,33 +109,50 @@ class SelectInput extends React.Component {
     }, _temp;
   }
 
+  componentDidMount() {
+    if (this.isControlled && this.props.open) {
+      // Focus the display node so the focus is restored on this element once
+      // the menu is closed.
+      this.displayNode.focus();
+      // Rerender with the resolve `displayNode` reference.
+      this.forceUpdate();
+    }
+  }
+
   render() {
     const _props = this.props,
           {
       autoWidth,
       children,
-      className: classNameProp,
       classes,
+      className: classNameProp,
       disabled,
       displayEmpty,
+      inputRef,
+      MenuProps = {},
+      multiple,
       name,
       native,
-      multiple,
-      MenuProps = {},
       onBlur,
       onChange,
+      onClose,
       onFocus,
+      onOpen,
+      open: openProp,
       readOnly,
       renderValue,
-      selectRef,
+      SelectDisplayProps,
+      tabIndex: tabIndexProp,
+      type = 'hidden',
       value
     } = _props,
-          other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'className', 'classes', 'disabled', 'displayEmpty', 'name', 'native', 'multiple', 'MenuProps', 'onBlur', 'onChange', 'onFocus', 'readOnly', 'renderValue', 'selectRef', 'value']);
+          other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'classes', 'className', 'disabled', 'displayEmpty', 'inputRef', 'MenuProps', 'multiple', 'name', 'native', 'onBlur', 'onChange', 'onClose', 'onFocus', 'onOpen', 'open', 'readOnly', 'renderValue', 'SelectDisplayProps', 'tabIndex', 'type', 'value']);
+    const open = this.isControlled && this.displayNode ? openProp : this.state.open;
 
     if (native) {
-      warning(multiple === false, 'Material-UI: you can not use the `native` and `multiple` properties ' + 'at the same time on a `Select` component.');
-      warning(!renderValue, 'Material-UI: the `renderValue` property is not used by the native implementation.');
-      warning(!displayEmpty, 'Material-UI: the `displayEmpty` property is not used by the native implementation.');
+      process.env.NODE_ENV !== "production" ? warning(multiple === false, 'Material-UI: you can not use the `native` and `multiple` properties ' + 'at the same time on a `Select` component.') : void 0;
+      process.env.NODE_ENV !== "production" ? warning(!renderValue, 'Material-UI: the `renderValue` property is not used by the native implementation.') : void 0;
+      process.env.NODE_ENV !== "production" ? warning(!displayEmpty, 'Material-UI: the `displayEmpty` property is not used by the native implementation.') : void 0;
 
       return React.createElement(
         'div',
@@ -146,10 +169,9 @@ class SelectInput extends React.Component {
             onChange: onChange,
             onFocus: onFocus,
             value: value,
-            readOnly: readOnly
-          }, other, {
-            ref: selectRef
-          }),
+            readOnly: readOnly,
+            ref: inputRef
+          }, other),
           children
         ),
         React.createElement(ArrowDropDownIcon, { className: classes.icon })
@@ -207,53 +229,63 @@ class SelectInput extends React.Component {
       display = multiple ? displayMultiple.join(', ') : displaySingle;
     }
 
-    const minimumMenuWidth = this.state.anchorEl != null && !autoWidth ? this.state.anchorEl.clientWidth : undefined;
+    const MenuMinWidth = this.displayNode && !autoWidth ? this.displayNode.clientWidth : undefined;
+
+    let tabIndex;
+    if (typeof tabIndexProp !== 'undefined') {
+      tabIndex = tabIndexProp;
+    } else {
+      tabIndex = disabled ? null : 0;
+    }
 
     return React.createElement(
       'div',
       { className: classes.root },
       React.createElement(
         'div',
-        {
+        _extends({
           className: classNames(classes.select, classes.selectMenu, {
             [classes.disabled]: disabled
           }, classNameProp),
-          'data-mui-test': 'SelectDisplay',
-          'aria-pressed': this.state.open ? 'true' : 'false',
-          tabIndex: disabled ? null : 0,
+          ref: node => {
+            this.displayNode = node;
+          },
+
+          'aria-pressed': open ? 'true' : 'false',
+          tabIndex: tabIndex,
           role: 'button',
-          'aria-owns': this.state.open ? `menu-${name || ''}` : null,
+          'aria-owns': open ? `menu-${name || ''}` : null,
           'aria-haspopup': 'true',
           onKeyDown: this.handleKeyDown,
           onBlur: this.handleBlur,
           onClick: disabled || readOnly ? null : this.handleClick,
           onFocus: onFocus
-        },
+        }, SelectDisplayProps),
+        React.createElement('span', { dangerouslySetInnerHTML: { __html: '&#8203' } }),
         display
       ),
       React.createElement('input', _extends({
         value: Array.isArray(value) ? value.join(',') : value,
         name: name,
-        readOnly: readOnly
-      }, other, {
+        readOnly: readOnly,
         ref: this.handleSelectRef,
-        type: 'hidden'
-      })),
+        type: type
+      }, other)),
       React.createElement(ArrowDropDownIcon, { className: classes.icon }),
       React.createElement(
         Menu,
         _extends({
           id: `menu-${name || ''}`,
-          anchorEl: this.state.anchorEl,
-          open: this.state.open,
-          onRequestClose: this.handleRequestClose
+          anchorEl: this.displayNode,
+          open: open,
+          onClose: this.handleClose
         }, MenuProps, {
-          MenuListProps: _extends({}, MenuProps.MenuListProps, {
+          MenuListProps: _extends({
             role: 'listbox'
-          }),
+          }, MenuProps.MenuListProps),
           PaperProps: _extends({}, MenuProps.PaperProps, {
             style: _extends({
-              minWidth: minimumMenuWidth
+              minWidth: MenuMinWidth
             }, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
           })
         }),
@@ -263,5 +295,114 @@ class SelectInput extends React.Component {
   }
 }
 
-SelectInput.muiName = 'SelectInput';
+SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If true, the width of the popover will automatically be set according to the items inside the
+   * menu, otherwise it will be at least the width of the select input.
+   */
+  autoWidth: PropTypes.bool,
+  /**
+   * The option elements to populate the select with.
+   * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The CSS class name of the select element.
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the select will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the selected item is displayed even if its value is empty.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  displayEmpty: PropTypes.bool,
+  /**
+   * Use that property to pass a ref callback to the native select element.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * Properties applied to the `Menu` element.
+   */
+  MenuProps: PropTypes.object,
+  /**
+   * If true, `value` must be an array and the menu will support multiple selections.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  multiple: PropTypes.bool,
+  /**
+   * Name attribute of the `select` or hidden `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * If `true`, the component will be using a native `select` element.
+   */
+  native: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback function fired when a menu item is selected.
+   *
+   * @param {object} event The event source of the callback
+   * @param {object} child The react element that was selected
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Useful in controlled mode (see open).
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be opened.
+   * Useful in controlled mode (see open).
+   *
+   * @param {object} event The event source of the callback
+   */
+  onOpen: PropTypes.func,
+  /**
+   * Control `select` open state.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  open: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * Render the selected value.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  renderValue: PropTypes.func,
+  /**
+   * Properties applied to the clickable div element.
+   */
+  SelectDisplayProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the component, required for a controlled component.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))])
+} : {};
+
 export default SelectInput;