Update to Material-UI v4 and fix lint issues

.prettierrc

@@ -2,7 +2,7 @@
   "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "all",
-  "parser": "babylon",
+  "parser": "babel",
   "semi": true,
   "jsxBracketSameLine": false
 }

package.json

@@ -14,10 +14,10 @@
     "material-ui"
   ],
   "peerDependencies": {
-    "@material-ui/core": "^3.0.0",
-    "@material-ui/icons": "^3.0.0",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0"
+    "@material-ui/core": "^4.0.0",
+    "@material-ui/icons": "^4.0.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",
@@ -26,8 +26,8 @@
     "react-virtualized": "^9.20.1"
   },
   "devDependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "^4.0.0",
+    "@material-ui/icons": "^4.0.0",
     "@storybook/addon-actions": "^3.4.10",
     "@storybook/react": "^3.4.10",
     "babel-cli": "^6.26.0",
@@ -42,10 +42,13 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.11.1",
+    "fetch-mock": "7.3.9",
     "gh-pages": "^1.2.0",
     "prettier": "^1.14.2",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-fetch-component": "7.0.1",
+    "starwars-names": "1.6.0"
   },
   "scripts": {
     "build": "NODE_ENV=production babel src -d dist",
@@ -55,4 +58,4 @@
     "preversion": "yarn build",
     "postpublish": "yarn build-docs && yarn deploy-docs"
   }
-}
+}

src/Input.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import PropTypes from 'prop-types';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -19,106 +19,117 @@ const variantComponent = {
   outlined: OutlinedInput,
 };
 
-class Input extends Component {
-  constructor(props) {
-    super(props);
-    this.labelRef = React.createRef();
-  }
+function handleClearSelection(innerInputRef, inputProps) {
+  const { downshiftProps, focusOnClear } = inputProps;
+  downshiftProps.clearSelection();
 
-  componentDidMount() {
-    if (this.props.variant === 'outlined') {
-      this.labelNode = ReactDOM.findDOMNode(this.labelRef.current);
-      this.forceUpdate();
-    }
+  if (focusOnClear) {
+    innerInputRef.focus();
   }
+}
 
-  handleClearSelection = e => {
-    const { downshiftProps, focusOnClear } = this.props;
-    downshiftProps.clearSelection();
-
-    if (focusOnClear) {
-      this.input.focus();
-    }
-  };
+function handleToggleMenu(innerInputRef, inputProps) {
+  const {
+    downshiftProps: { isOpen, openMenu, closeMenu },
+  } = inputProps;
 
-  handleToggleMenu = e => {
-    const {
-      downshiftProps: { isOpen, openMenu, closeMenu },
-    } = this.props;
+  if (!isOpen) {
+    innerInputRef.focus();
+    openMenu();
+  } else {
+    closeMenu();
+  }
+}
 
-    if (!isOpen) {
-      this.input.focus();
-      openMenu();
-    } else {
-      closeMenu();
-    }
-  };
+const Input = props => {
+  const labelRef = React.useRef(null);
+  const [innerInputRef, setInnerInputRef] = React.useState(null);
+  const [labelWidth, setLabelWidth] = React.useState(0);
+  React.useEffect(() => {
+    setLabelWidth(labelRef.current ? labelRef.current.offsetWidth : 0);
+  }, []);
 
-  render() {
-    const { inputRef, getInputProps, loading, downshiftProps, variant } = this.props;
-    const { label, labelProps, disabled, required, error, helperText, ...inputProps } = getInputProps
-      ? getInputProps({
-          ...downshiftProps,
-          inputRef: this.input,
-          handleClearSelection: this.handleClearSelection,
-          handleToggleMenu: this.handleToggleMenu,
-        })
-      : {};
+  const { inputRef, getInputProps, loading, downshiftProps, variant } = props;
+  const { label, disabled, required, error, helperText, ...inputProps } = getInputProps
+    ? getInputProps({
+        ...downshiftProps,
+        inputRef: innerInputRef,
+        handleClearSelection: () => handleClearSelection(innerInputRef, props),
+        handleToggleMenu: () => handleToggleMenu(innerInputRef, props),
+      })
+    : {};
 
-    const shrink = downshiftProps.isOpen || downshiftProps.inputValue || inputProps.startAdornment ? true : undefined;
-    const InputMore = {};
-    if (variant === 'outlined') {
-      if (typeof shrink !== 'undefined') {
-        InputMore.notched = shrink;
-      }
-      InputMore.labelWidth = (this.labelNode && this.labelNode.offsetWidth) || 0;
+  const shrink = downshiftProps.isOpen || downshiftProps.inputValue || inputProps.startAdornment ? true : undefined;
+  const InputMore = {};
+  if (variant === 'outlined') {
+    if (typeof shrink !== 'undefined') {
+      InputMore.notched = shrink;
     }
-    const InputComponent = variantComponent[variant];
+    InputMore.labelWidth = labelWidth;
+  }
+  const InputComponent = variantComponent[variant];
 
-    return (
-      <FormControl disabled={disabled} required={required} error={error} fullWidth>
-        {label && (
-          <InputLabel ref={this.labelRef} variant={variant} shrink={shrink} {...downshiftProps.getLabelProps()}>
-            {label}
-          </InputLabel>
-        )}
-        <InputComponent
-          inputRef={input => {
-            this.input = input;
-            inputRef && inputRef(input);
-          }}
-          endAdornment={
-            !disabled && (
-              <InputAdornment position="end">
-                {!!downshiftProps.selectedItem && (
-                  <IconButton onClick={this.handleClearSelection} aria-label="Clear selection">
-                    <Clear />
-                  </IconButton>
-                )}
-                <IconButton onClick={this.handleToggleMenu} aria-label="Toggle menu open">
-                  {downshiftProps.isOpen ? <ArrowDropUp /> : <ArrowDropDown />}
+  return (
+    <FormControl disabled={disabled} required={required} error={error} fullWidth>
+      {label && (
+        <InputLabel ref={labelRef} variant={variant} shrink={shrink} {...downshiftProps.getLabelProps()}>
+          {label}
+        </InputLabel>
+      )}
+      <InputComponent
+        inputRef={input => {
+          setInnerInputRef(input);
+          inputRef && inputRef(input);
+        }}
+        endAdornment={
+          !disabled && (
+            <InputAdornment position="end">
+              {!!downshiftProps.selectedItem && (
+                <IconButton onClick={() => handleClearSelection(innerInputRef, props)} aria-label="Clear selection">
+                  <Clear />
                 </IconButton>
-              </InputAdornment>
-            )
-          }
-          onFocus={downshiftProps.openMenu}
-          {...InputMore}
-          {...downshiftProps.getInputProps(inputProps)}
+              )}
+              <IconButton onClick={() => handleToggleMenu(innerInputRef, props)} aria-label="Toggle menu open">
+                {downshiftProps.isOpen ? <ArrowDropUp /> : <ArrowDropDown />}
+              </IconButton>
+            </InputAdornment>
+          )
+        }
+        onFocus={downshiftProps.openMenu}
+        {...InputMore}
+        {...downshiftProps.getInputProps(inputProps)}
+      />
+      {loading && (
+        <LinearProgress
+          style={{
+            position: 'relative',
+            bottom: 2,
+            height: 2,
+            marginBottom: -2,
+          }}
         />
-        {loading && (
-          <LinearProgress
-            style={{
-              position: 'relative',
-              bottom: 2,
-              height: 2,
-              marginBottom: -2,
-            }}
-          />
-        )}
-        {helperText && <FormHelperText>{helperText}</FormHelperText>}
-      </FormControl>
-    );
-  }
-}
+      )}
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+Input.propTypes = {
+  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  downshiftProps: PropTypes.object,
+  focusOnClear: PropTypes.bool,
+  inputRef: PropTypes.func,
+  getInputProps: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  variant: 'standard',
+  downshiftProps: {},
+  focusOnClear: false,
+  inputRef: null,
+  getInputProps: () => ({}),
+  loading: false,
+};
 
 export default Input;

src/Menu.js

@@ -86,7 +86,7 @@ class MuiVirtualList extends Component {
     return (
       <VirtualList
         width={width}
-        {...downshiftProps.highlightedIndex != null && { scrollToIndex: downshiftProps.highlightedIndex }}
+        {...(downshiftProps.highlightedIndex != null && { scrollToIndex: downshiftProps.highlightedIndex })}
         height={height}
         rowCount={getRowCount(items, includeFooter)}
         rowHeight={rowHeight}
@@ -160,7 +160,7 @@ class MuiVirtualList extends Component {
           }
           onRowsRendered && onRowsRendered(args);
         }}
-        {...useCellMeasurer && { deferredMeasurementCache: this.cache }}
+        {...(useCellMeasurer && { deferredMeasurementCache: this.cache })}
         ref={el => {
           this.list = el;
           if (registerChild) {
@@ -174,7 +174,7 @@ class MuiVirtualList extends Component {
 }
 
 function Menu({ getInfiniteLoaderProps, inputRef, ...props }) {
-  return props.downshiftProps.isOpen ? (
+  return props.downshiftProps.isOpen && inputRef ? (
     <AutoSizer>
       {({ width }) => (
         <Popper
@@ -188,7 +188,7 @@ function Menu({ getInfiniteLoaderProps, inputRef, ...props }) {
           }}
         >
           <div {...props.downshiftProps.getMenuProps({}, { suppressRefError: true })}>
-            <Paper style={{ width }}>
+            <Paper elevation={2} style={{ width }}>
               {getInfiniteLoaderProps ? (
                 <InfiniteLoader {...getInfiniteLoaderProps({ downshiftProps: props.downshiftProps })}>
                   {({ onRowsRendered, registerChild }) => (