Completely updated React, fixed #11, (hopefully)

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

@@ -1,30 +1,25 @@
-// @flow
 // @inheritedComponent Input
 
 import React from 'react';
-import type { ChildrenArray, Element } 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: Object) => ({
+export const styles = theme => ({
   root: {
     position: 'relative',
     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
@@ -43,133 +38,163 @@ export const styles = (theme: Object) => ({
     },
   },
   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.
   },
 });
 
-type ProvidedProps = {
-  classes: Object,
-  displayEmpty: boolean,
-  input: Element<any>,
-  native: boolean,
-  multiple: boolean,
-};
-
-export type Props = {
-  /**
-   * 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?: boolean,
-  /**
-   * The option elements to populate the select with.
-   * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
-   */
-  children: $ReadOnlyArray<ChildrenArray<*>>,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * 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?: boolean,
-  /**
-   * An `Input` element; does not have to be a material-ui specific `Input`.
-   */
-  input?: Element<any>,
-  /**
-   * `classes` property applied to the `Input` element.
-   */
-  InputClasses?: Object,
-  /**
-   * If `true`, the component will be using a native `select` element.
-   */
-  native?: boolean,
-  /**
-   * 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?: boolean,
-  /**
-   * Properties applied to the `Menu` element.
-   */
-  MenuProps?: Object,
-  /**
-   * Render the selected value.
-   * You can only use it when the `native` property is `false` (default).
-   */
-  renderValue?: Function,
-  /**
-   * The input value, required for a controlled component.
-   */
-  value?: $ReadOnlyArray<string | number> | string | number,
-};
-
-function Select(props: ProvidedProps & Props) {
+function Select(props) {
   const {
     autoWidth,
     children,
     classes,
     displayEmpty,
     input,
-    InputClasses,
-    native,
-    multiple,
+    inputProps,
     MenuProps,
+    multiple,
+    native,
+    onClose,
+    onOpen,
+    open,
     renderValue,
+    SelectDisplayProps,
     ...other
   } = props;
 
-  // 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'),
-  );
-
   return React.cloneElement(input, {
     // 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: {
-      ...(input ? input.props.inputProps : {}),
       autoWidth,
       children,
       classes,
       displayEmpty,
-      native,
-      multiple,
       MenuProps,
+      multiple,
+      native,
+      onClose,
+      onOpen,
+      open,
       renderValue,
+      SelectDisplayProps,
+      type: undefined, // We render a select. We can ignore the type provided by the `Input`.
+      ...inputProps,
+      ...(input ? input.props.inputProps : {}),
     },
+    ...other,
   });
 }
 
+Select.propTypes = {
+  /**
+   * 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: <Input />,
-  native: false,
   multiple: false,
+  native: false,
 };
 
 Select.muiName = 'Select';