Completely updated React, fixed #11, (hopefully)

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';