downshift 3.4.4 → 3.4.8

package/dist/downshift.esm.js

@@ -403,1066 +403,1072 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
 
 var Downshift =
 /*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(Downshift, _Component);
+function () {
+  var Downshift =
+  /*#__PURE__*/
+  function (_Component) {
+    _inheritsLoose(Downshift, _Component);
+
+    function Downshift(_props) {
+      var _this = _Component.call(this, _props) || this;
+
+      _this.id = _this.props.id || "downshift-" + generateId();
+      _this.menuId = _this.props.menuId || _this.id + "-menu";
+      _this.labelId = _this.props.labelId || _this.id + "-label";
+      _this.inputId = _this.props.inputId || _this.id + "-input";
+
+      _this.getItemId = _this.props.getItemId || function (index) {
+        return _this.id + "-item-" + index;
+      };
 
-  function Downshift(_props) {
-    var _this = _Component.call(this, _props) || this;
+      _this.input = null;
+      _this.items = [];
+      _this.itemCount = null;
+      _this.previousResultCount = 0;
+      _this.timeoutIds = [];
 
-    _this.id = _this.props.id || "downshift-" + generateId();
-    _this.menuId = _this.props.menuId || _this.id + "-menu";
-    _this.labelId = _this.props.labelId || _this.id + "-label";
-    _this.inputId = _this.props.inputId || _this.id + "-input";
+      _this.internalSetTimeout = function (fn, time) {
+        var id = setTimeout(function () {
+          _this.timeoutIds = _this.timeoutIds.filter(function (i) {
+            return i !== id;
+          });
+          fn();
+        }, time);
 
-    _this.getItemId = _this.props.getItemId || function (index) {
-      return _this.id + "-item-" + index;
-    };
+        _this.timeoutIds.push(id);
+      };
 
-    _this.input = null;
-    _this.items = [];
-    _this.itemCount = null;
-    _this.previousResultCount = 0;
-    _this.timeoutIds = [];
+      _this.setItemCount = function (count) {
+        _this.itemCount = count;
+      };
 
-    _this.internalSetTimeout = function (fn, time) {
-      var id = setTimeout(function () {
-        _this.timeoutIds = _this.timeoutIds.filter(function (i) {
-          return i !== id;
-        });
-        fn();
-      }, time);
+      _this.unsetItemCount = function () {
+        _this.itemCount = null;
+      };
 
-      _this.timeoutIds.push(id);
-    };
+      _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
+        if (highlightedIndex === void 0) {
+          highlightedIndex = _this.props.defaultHighlightedIndex;
+        }
 
-    _this.setItemCount = function (count) {
-      _this.itemCount = count;
-    };
+        if (otherStateToSet === void 0) {
+          otherStateToSet = {};
+        }
 
-    _this.unsetItemCount = function () {
-      _this.itemCount = null;
-    };
+        otherStateToSet = pickState(otherStateToSet);
 
-    _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
-      if (highlightedIndex === void 0) {
-        highlightedIndex = _this.props.defaultHighlightedIndex;
-      }
+        _this.internalSetState(_extends({
+          highlightedIndex: highlightedIndex
+        }, otherStateToSet));
+      };
 
-      if (otherStateToSet === void 0) {
-        otherStateToSet = {};
-      }
+      _this.clearSelection = function (cb) {
+        _this.internalSetState({
+          selectedItem: null,
+          inputValue: '',
+          highlightedIndex: _this.props.defaultHighlightedIndex,
+          isOpen: _this.props.defaultIsOpen
+        }, cb);
+      };
 
-      otherStateToSet = pickState(otherStateToSet);
+      _this.selectItem = function (item, otherStateToSet, cb) {
+        otherStateToSet = pickState(otherStateToSet);
 
-      _this.internalSetState(_extends({
-        highlightedIndex: highlightedIndex
-      }, otherStateToSet));
-    };
+        _this.internalSetState(_extends({
+          isOpen: _this.props.defaultIsOpen,
+          highlightedIndex: _this.props.defaultHighlightedIndex,
+          selectedItem: item,
+          inputValue: _this.props.itemToString(item)
+        }, otherStateToSet), cb);
+      };
 
-    _this.clearSelection = function (cb) {
-      _this.internalSetState({
-        selectedItem: null,
-        inputValue: '',
-        highlightedIndex: _this.props.defaultHighlightedIndex,
-        isOpen: _this.props.defaultIsOpen
-      }, cb);
-    };
+      _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
+        var item = _this.items[itemIndex];
 
-    _this.selectItem = function (item, otherStateToSet, cb) {
-      otherStateToSet = pickState(otherStateToSet);
+        if (item == null) {
+          return;
+        }
 
-      _this.internalSetState(_extends({
-        isOpen: _this.props.defaultIsOpen,
-        highlightedIndex: _this.props.defaultHighlightedIndex,
-        selectedItem: item,
-        inputValue: _this.props.itemToString(item)
-      }, otherStateToSet), cb);
-    };
+        _this.selectItem(item, otherStateToSet, cb);
+      };
 
-    _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
-      var item = _this.items[itemIndex];
+      _this.selectHighlightedItem = function (otherStateToSet, cb) {
+        return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
+      };
 
-      if (item == null) {
-        return;
-      }
+      _this.internalSetState = function (stateToSet, cb) {
+        var isItemSelected, onChangeArg;
+        var onStateChangeArg = {};
+        var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
+        // so someone controlling the `inputValue` state gets notified of
+        // the input change as soon as possible. This avoids issues with
+        // preserving the cursor position.
+        // See https://github.com/downshift-js/downshift/issues/217 for more info.
+
+        if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
+          _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, stateToSet));
+        }
 
-      _this.selectItem(item, otherStateToSet, cb);
-    };
+        return _this.setState(function (state) {
+          state = _this.getState(state);
+          var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
 
-    _this.selectHighlightedItem = function (otherStateToSet, cb) {
-      return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
-    };
+          newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
+          // what was selected before
+          // used to determine if onSelect and onChange callbacks should be called
 
-    _this.internalSetState = function (stateToSet, cb) {
-      var isItemSelected, onChangeArg;
-      var onStateChangeArg = {};
-      var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
-      // so someone controlling the `inputValue` state gets notified of
-      // the input change as soon as possible. This avoids issues with
-      // preserving the cursor position.
-      // See https://github.com/downshift-js/downshift/issues/217 for more info.
-
-      if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
-        _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, stateToSet));
-      }
+          isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
 
-      return _this.setState(function (state) {
-        state = _this.getState(state);
-        var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
+          var nextState = {}; // this is just used to tell whether the state changed
 
-        newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
-        // what was selected before
-        // used to determine if onSelect and onChange callbacks should be called
+          var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state
+          // and we're trying to update that state. OR if the selection has changed and we're
+          // trying to update the selection
 
-        isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
+          if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
+            onChangeArg = newStateToSet.selectedItem;
+          }
 
-        var nextState = {}; // this is just used to tell whether the state changed
+          newStateToSet.type = newStateToSet.type || unknown;
+          Object.keys(newStateToSet).forEach(function (key) {
+            // onStateChangeArg should only have the state that is
+            // actually changing
+            if (state[key] !== newStateToSet[key]) {
+              onStateChangeArg[key] = newStateToSet[key];
+            } // the type is useful for the onStateChangeArg
+            // but we don't actually want to set it in internal state.
+            // this is an undocumented feature for now... Not all internalSetState
+            // calls support it and I'm not certain we want them to yet.
+            // But it enables users controlling the isOpen state to know when
+            // the isOpen state changes due to mouseup events which is quite handy.
+
+
+            if (key === 'type') {
+              return;
+            }
 
-        var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state
-        // and we're trying to update that state. OR if the selection has changed and we're
-        // trying to update the selection
+            nextFullState[key] = newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
 
-        if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
-          onChangeArg = newStateToSet.selectedItem;
-        }
+            if (!_this.isControlledProp(key)) {
+              nextState[key] = newStateToSet[key];
+            }
+          }); // if stateToSet is a function, then we weren't able to call onInputValueChange
+          // earlier, so we'll call it now that we know what the inputValue state will be.
 
-        newStateToSet.type = newStateToSet.type || unknown;
-        Object.keys(newStateToSet).forEach(function (key) {
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== newStateToSet[key]) {
-            onStateChangeArg[key] = newStateToSet[key];
-          } // the type is useful for the onStateChangeArg
-          // but we don't actually want to set it in internal state.
-          // this is an undocumented feature for now... Not all internalSetState
-          // calls support it and I'm not certain we want them to yet.
-          // But it enables users controlling the isOpen state to know when
-          // the isOpen state changes due to mouseup events which is quite handy.
-
-
-          if (key === 'type') {
-            return;
+          if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
+            _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, newStateToSet));
           }
 
-          nextFullState[key] = newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
+          return nextState;
+        }, function () {
+          // call the provided callback if it's a function
+          cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
+          // we have relevant information to pass them.
 
-          if (!_this.isControlledProp(key)) {
-            nextState[key] = newStateToSet[key];
-          }
-        }); // if stateToSet is a function, then we weren't able to call onInputValueChange
-        // earlier, so we'll call it now that we know what the inputValue state will be.
+          var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
 
-        if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
-          _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, newStateToSet));
-        }
+          if (hasMoreStateThanType) {
+            _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
+          }
 
-        return nextState;
-      }, function () {
-        // call the provided callback if it's a function
-        cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
-        // we have relevant information to pass them.
+          if (isItemSelected) {
+            _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
+          }
 
-        var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
+          if (onChangeArg !== undefined) {
+            _this.props.onChange(onChangeArg, _this.getStateAndHelpers());
+          } // this is currently undocumented and therefore subject to change
+          // We'll try to not break it, but just be warned.
 
-        if (hasMoreStateThanType) {
-          _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
-        }
 
-        if (isItemSelected) {
-          _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
-        }
+          _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
+        });
+      };
 
-        if (onChangeArg !== undefined) {
-          _this.props.onChange(onChangeArg, _this.getStateAndHelpers());
-        } // this is currently undocumented and therefore subject to change
-        // We'll try to not break it, but just be warned.
+      _this.rootRef = function (node) {
+        return _this._rootNode = node;
+      };
 
+      _this.getRootProps = function (_temp, _temp2) {
+        var _extends2;
 
-        _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
-      });
-    };
+        var _ref = _temp === void 0 ? {} : _temp,
+            _ref$refKey = _ref.refKey,
+            refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
+            ref = _ref.ref,
+            rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref"]);
 
-    _this.rootRef = function (node) {
-      return _this._rootNode = node;
-    };
+        var _ref2 = _temp2 === void 0 ? {} : _temp2,
+            _ref2$suppressRefErro = _ref2.suppressRefError,
+            suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
 
-    _this.getRootProps = function (_temp, _temp2) {
-      var _extends2;
+        // this is used in the render to know whether the user has called getRootProps.
+        // It uses that to know whether to apply the props automatically
+        _this.getRootProps.called = true;
+        _this.getRootProps.refKey = refKey;
+        _this.getRootProps.suppressRefError = suppressRefError;
 
-      var _ref = _temp === void 0 ? {} : _temp,
-          _ref$refKey = _ref.refKey,
-          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-          ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref"]);
+        var _this$getState = _this.getState(),
+            isOpen = _this$getState.isOpen;
 
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
-          _ref2$suppressRefErro = _ref2.suppressRefError,
-          suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
+        return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
+      };
 
-      // this is used in the render to know whether the user has called getRootProps.
-      // It uses that to know whether to apply the props automatically
-      _this.getRootProps.called = true;
-      _this.getRootProps.refKey = refKey;
-      _this.getRootProps.suppressRefError = suppressRefError;
+      _this.keyDownHandlers = {
+        ArrowDown: function ArrowDown(event) {
+          var _this2 = this;
 
-      var _this$getState = _this.getState(),
-          isOpen = _this$getState.isOpen;
+          event.preventDefault();
 
-      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
-    };
+          if (this.getState().isOpen) {
+            var amount = event.shiftKey ? 5 : 1;
+            this.moveHighlightedIndex(amount, {
+              type: keyDownArrowDown
+            });
+          } else {
+            this.internalSetState({
+              isOpen: true,
+              type: keyDownArrowDown
+            }, function () {
+              var itemCount = _this2.getItemCount();
+
+              if (itemCount > 0) {
+                _this2.setHighlightedIndex(getNextWrappingIndex(1, _this2.getState().highlightedIndex, itemCount), {
+                  type: keyDownArrowDown
+                });
+              }
+            });
+          }
+        },
+        ArrowUp: function ArrowUp(event) {
+          var _this3 = this;
 
-    _this.keyDownHandlers = {
-      ArrowDown: function ArrowDown(event) {
-        var _this2 = this;
+          event.preventDefault();
 
-        event.preventDefault();
+          if (this.getState().isOpen) {
+            var amount = event.shiftKey ? -5 : -1;
+            this.moveHighlightedIndex(amount, {
+              type: keyDownArrowUp
+            });
+          } else {
+            this.internalSetState({
+              isOpen: true,
+              type: keyDownArrowUp
+            }, function () {
+              var itemCount = _this3.getItemCount();
+
+              if (itemCount > 0) {
+                _this3.setHighlightedIndex(getNextWrappingIndex(-1, _this3.getState().highlightedIndex, itemCount), {
+                  type: keyDownArrowDown
+                });
+              }
+            });
+          }
+        },
+        Enter: function Enter(event) {
+          var _this$getState2 = this.getState(),
+              isOpen = _this$getState2.isOpen,
+              highlightedIndex = _this$getState2.highlightedIndex;
+
+          if (isOpen && highlightedIndex != null) {
+            event.preventDefault();
+            var item = this.items[highlightedIndex];
+            var itemNode = this.getItemNodeFromIndex(highlightedIndex);
+
+            if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
+              return;
+            }
 
-        if (this.getState().isOpen) {
-          var amount = event.shiftKey ? 5 : 1;
-          this.moveHighlightedIndex(amount, {
-            type: keyDownArrowDown
+            this.selectHighlightedItem({
+              type: keyDownEnter
+            });
+          }
+        },
+        Escape: function Escape(event) {
+          event.preventDefault();
+          this.reset({
+            type: keyDownEscape,
+            selectedItem: null,
+            inputValue: ''
           });
-        } else {
-          this.internalSetState({
-            isOpen: true,
-            type: keyDownArrowDown
-          }, function () {
-            var itemCount = _this2.getItemCount();
-
-            if (itemCount > 0) {
-              _this2.setHighlightedIndex(getNextWrappingIndex(1, _this2.getState().highlightedIndex, itemCount), {
-                type: keyDownArrowDown
-              });
-            }
+        }
+      };
+      _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
+        ' ': function _(event) {
+          event.preventDefault();
+          this.toggleMenu({
+            type: keyDownSpaceButton
           });
         }
-      },
-      ArrowUp: function ArrowUp(event) {
-        var _this3 = this;
-
-        event.preventDefault();
-
-        if (this.getState().isOpen) {
-          var amount = event.shiftKey ? -5 : -1;
-          this.moveHighlightedIndex(amount, {
-            type: keyDownArrowUp
+      });
+      _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
+        Home: function Home(event) {
+          this.highlightFirstOrLastIndex(event, true, {
+            type: keyDownHome
           });
-        } else {
-          this.internalSetState({
-            isOpen: true,
-            type: keyDownArrowUp
-          }, function () {
-            var itemCount = _this3.getItemCount();
-
-            if (itemCount > 0) {
-              _this3.setHighlightedIndex(getNextWrappingIndex(-1, _this3.getState().highlightedIndex, itemCount), {
-                type: keyDownArrowDown
-              });
-            }
+        },
+        End: function End(event) {
+          this.highlightFirstOrLastIndex(event, false, {
+            type: keyDownEnd
           });
         }
-      },
-      Enter: function Enter(event) {
-        var _this$getState2 = this.getState(),
-            isOpen = _this$getState2.isOpen,
-            highlightedIndex = _this$getState2.highlightedIndex;
-
-        if (isOpen && highlightedIndex != null) {
-          event.preventDefault();
-          var item = this.items[highlightedIndex];
-          var itemNode = this.getItemNodeFromIndex(highlightedIndex);
+      });
 
-          if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
-            return;
-          }
+      _this.getToggleButtonProps = function (_temp3) {
+        var _ref3 = _temp3 === void 0 ? {} : _temp3,
+            onClick = _ref3.onClick,
+            onPress = _ref3.onPress,
+            onKeyDown = _ref3.onKeyDown,
+            onKeyUp = _ref3.onKeyUp,
+            onBlur = _ref3.onBlur,
+            rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]);
+
+        var _this$getState3 = _this.getState(),
+            isOpen = _this$getState3.isOpen;
+
+        var enabledEventHandlers = {
+          onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
+          onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
+          onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
+          onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
+        };
+        var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
+        return _extends({
+          type: 'button',
+          role: 'button',
+          'aria-label': isOpen ? 'close menu' : 'open menu',
+          'aria-haspopup': true,
+          'data-toggle': true
+        }, eventHandlers, {}, rest);
+      };
 
-          this.selectHighlightedItem({
-            type: keyDownEnter
-          });
-        }
-      },
-      Escape: function Escape(event) {
-        event.preventDefault();
-        this.reset({
-          type: keyDownEscape,
-          selectedItem: null,
-          inputValue: ''
-        });
-      }
-    };
-    _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
-      ' ': function _(event) {
+      _this.buttonHandleKeyUp = function (event) {
+        // Prevent click event from emitting in Firefox
         event.preventDefault();
-        this.toggleMenu({
-          type: keyDownSpaceButton
-        });
-      }
-    });
-    _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
-      Home: function Home(event) {
-        this.highlightFirstOrLastIndex(event, true, {
-          type: keyDownHome
-        });
-      },
-      End: function End(event) {
-        this.highlightFirstOrLastIndex(event, false, {
-          type: keyDownEnd
-        });
-      }
-    });
-
-    _this.getToggleButtonProps = function (_temp3) {
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
-          onClick = _ref3.onClick,
-          onPress = _ref3.onPress,
-          onKeyDown = _ref3.onKeyDown,
-          onKeyUp = _ref3.onKeyUp,
-          onBlur = _ref3.onBlur,
-          rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]);
-
-      var _this$getState3 = _this.getState(),
-          isOpen = _this$getState3.isOpen;
-
-      var enabledEventHandlers = {
-        onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
-        onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
-        onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
-        onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
       };
-      var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
-      return _extends({
-        type: 'button',
-        role: 'button',
-        'aria-label': isOpen ? 'close menu' : 'open menu',
-        'aria-haspopup': true,
-        'data-toggle': true
-      }, eventHandlers, {}, rest);
-    };
-
-    _this.buttonHandleKeyUp = function (event) {
-      // Prevent click event from emitting in Firefox
-      event.preventDefault();
-    };
 
-    _this.buttonHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
+      _this.buttonHandleKeyDown = function (event) {
+        var key = normalizeArrowKey(event);
 
-      if (_this.buttonKeyDownHandlers[key]) {
-        _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
-      }
-    };
+        if (_this.buttonKeyDownHandlers[key]) {
+          _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+        }
+      };
 
-    _this.buttonHandleClick = function (event) {
-      event.preventDefault(); // handle odd case for Safari and Firefox which
-      // don't give the button the focus properly.
+      _this.buttonHandleClick = function (event) {
+        event.preventDefault(); // handle odd case for Safari and Firefox which
+        // don't give the button the focus properly.
 
-      /* istanbul ignore if (can't reasonably test this) */
+        /* istanbul ignore if (can't reasonably test this) */
 
-      if ( _this.props.environment.document.activeElement === _this.props.environment.document.body) {
-        event.target.focus();
-      } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
-      // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
-      // when building for production and should therefore have no impact on production code.
+        if ( _this.props.environment.document.activeElement === _this.props.environment.document.body) {
+          event.target.focus();
+        } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
+        // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
+        // when building for production and should therefore have no impact on production code.
 
 
-      if (process.env.NODE_ENV === 'test') {
-        _this.toggleMenu({
-          type: clickButton
-        });
-      } else {
-        // Ensure that toggle of menu occurs after the potential blur event in iOS
-        _this.internalSetTimeout(function () {
-          return _this.toggleMenu({
+        if (process.env.NODE_ENV === 'test') {
+          _this.toggleMenu({
             type: clickButton
           });
+        } else {
+          // Ensure that toggle of menu occurs after the potential blur event in iOS
+          _this.internalSetTimeout(function () {
+            return _this.toggleMenu({
+              type: clickButton
+            });
+          });
+        }
+      };
+
+      _this.buttonHandleBlur = function (event) {
+        var blurTarget = event.target; // Save blur target for comparison with activeElement later
+        // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
+
+        _this.internalSetTimeout(function () {
+          if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
+          ) {
+              _this.reset({
+                type: blurButton
+              });
+            }
         });
-      }
-    };
+      };
 
-    _this.buttonHandleBlur = function (event) {
-      var blurTarget = event.target; // Save blur target for comparison with activeElement later
-      // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
+      _this.getLabelProps = function (props) {
+        return _extends({
+          htmlFor: _this.inputId,
+          id: _this.labelId
+        }, props);
+      };
 
-      _this.internalSetTimeout(function () {
-        if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
-        ) {
-            _this.reset({
-              type: blurButton
-            });
-          }
-      });
-    };
+      _this.getInputProps = function (_temp4) {
+        var _ref4 = _temp4 === void 0 ? {} : _temp4,
+            onKeyDown = _ref4.onKeyDown,
+            onBlur = _ref4.onBlur,
+            onChange = _ref4.onChange,
+            onInput = _ref4.onInput,
+            onChangeText = _ref4.onChangeText,
+            rest = _objectWithoutPropertiesLoose(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]);
 
-    _this.getLabelProps = function (props) {
-      return _extends({
-        htmlFor: _this.inputId,
-        id: _this.labelId
-      }, props);
-    };
+        var onChangeKey;
+        var eventHandlers = {};
+        /* istanbul ignore next (preact) */
 
-    _this.getInputProps = function (_temp4) {
-      var _ref4 = _temp4 === void 0 ? {} : _temp4,
-          onKeyDown = _ref4.onKeyDown,
-          onBlur = _ref4.onBlur,
-          onChange = _ref4.onChange,
-          onInput = _ref4.onInput,
-          onChangeText = _ref4.onChangeText,
-          rest = _objectWithoutPropertiesLoose(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]);
+        onChangeKey = 'onChange';
 
-      var onChangeKey;
-      var eventHandlers = {};
-      /* istanbul ignore next (preact) */
+        var _this$getState4 = _this.getState(),
+            inputValue = _this$getState4.inputValue,
+            isOpen = _this$getState4.isOpen,
+            highlightedIndex = _this$getState4.highlightedIndex;
 
-      onChangeKey = 'onChange';
+        if (!rest.disabled) {
+          var _eventHandlers;
 
-      var _this$getState4 = _this.getState(),
-          inputValue = _this$getState4.inputValue,
-          isOpen = _this$getState4.isOpen,
-          highlightedIndex = _this$getState4.highlightedIndex;
+          eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
+        }
+        /* istanbul ignore if (react-native) */
 
-      if (!rest.disabled) {
-        var _eventHandlers;
 
-        eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
-      }
-      /* istanbul ignore if (react-native) */
+        return _extends({
+          'aria-autocomplete': 'list',
+          'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
+          'aria-controls': isOpen ? _this.menuId : null,
+          'aria-labelledby': _this.labelId,
+          // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+          // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
+          autoComplete: 'off',
+          value: inputValue,
+          id: _this.inputId
+        }, eventHandlers, {}, rest);
+      };
 
+      _this.inputHandleKeyDown = function (event) {
+        var key = normalizeArrowKey(event);
 
-      return _extends({
-        'aria-autocomplete': 'list',
-        'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
-        'aria-controls': isOpen ? _this.menuId : null,
-        'aria-labelledby': _this.labelId,
-        // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
-        // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
-        autoComplete: 'off',
-        value: inputValue,
-        id: _this.inputId
-      }, eventHandlers, {}, rest);
-    };
+        if (key && _this.inputKeyDownHandlers[key]) {
+          _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+        }
+      };
 
-    _this.inputHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
+      _this.inputHandleChange = function (event) {
+        _this.internalSetState({
+          type: changeInput,
+          isOpen: true,
+          inputValue: event.target.value,
+          highlightedIndex: _this.props.defaultHighlightedIndex
+        });
+      };
 
-      if (key && _this.inputKeyDownHandlers[key]) {
-        _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
-      }
-    };
+      _this.inputHandleBlur = function () {
+        // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
+        _this.internalSetTimeout(function () {
+          var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
 
-    _this.inputHandleChange = function (event) {
-      _this.internalSetState({
-        type: changeInput,
-        isOpen: true,
-        inputValue: event.target.value,
-        highlightedIndex: _this.props.defaultHighlightedIndex
-      });
-    };
+          if (!_this.isMouseDown && !downshiftButtonIsActive) {
+            _this.reset({
+              type: blurInput
+            });
+          }
+        });
+      };
 
-    _this.inputHandleBlur = function () {
-      // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
-      _this.internalSetTimeout(function () {
-        var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
+      _this.menuRef = function (node) {
+        _this._menuNode = node;
+      };
 
-        if (!_this.isMouseDown && !downshiftButtonIsActive) {
-          _this.reset({
-            type: blurInput
-          });
-        }
-      });
-    };
+      _this.getMenuProps = function (_temp5, _temp6) {
+        var _extends3;
 
-    _this.menuRef = function (node) {
-      _this._menuNode = node;
-    };
+        var _ref5 = _temp5 === void 0 ? {} : _temp5,
+            _ref5$refKey = _ref5.refKey,
+            refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
+            ref = _ref5.ref,
+            props = _objectWithoutPropertiesLoose(_ref5, ["refKey", "ref"]);
 
-    _this.getMenuProps = function (_temp5, _temp6) {
-      var _extends3;
+        var _ref6 = _temp6 === void 0 ? {} : _temp6,
+            _ref6$suppressRefErro = _ref6.suppressRefError,
+            suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
 
-      var _ref5 = _temp5 === void 0 ? {} : _temp5,
-          _ref5$refKey = _ref5.refKey,
-          refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-          ref = _ref5.ref,
-          props = _objectWithoutPropertiesLoose(_ref5, ["refKey", "ref"]);
+        _this.getMenuProps.called = true;
+        _this.getMenuProps.refKey = refKey;
+        _this.getMenuProps.suppressRefError = suppressRefError;
+        return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
+      };
 
-      var _ref6 = _temp6 === void 0 ? {} : _temp6,
-          _ref6$suppressRefErro = _ref6.suppressRefError,
-          suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
+      _this.getItemProps = function (_temp7) {
+        var _enabledEventHandlers;
+
+        var _ref7 = _temp7 === void 0 ? {} : _temp7,
+            onMouseMove = _ref7.onMouseMove,
+            onMouseDown = _ref7.onMouseDown,
+            onClick = _ref7.onClick,
+            onPress = _ref7.onPress,
+            index = _ref7.index,
+            _ref7$item = _ref7.item,
+            item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ?
+        /* istanbul ignore next */
+        undefined : requiredProp('getItemProps', 'item') : _ref7$item,
+            rest = _objectWithoutPropertiesLoose(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]);
+
+        if (index === undefined) {
+          _this.items.push(item);
+
+          index = _this.items.indexOf(item);
+        } else {
+          _this.items[index] = item;
+        }
 
-      _this.getMenuProps.called = true;
-      _this.getMenuProps.refKey = refKey;
-      _this.getMenuProps.suppressRefError = suppressRefError;
-      return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
-    };
+        var onSelectKey = 'onClick';
+        var customClickHandler = onClick;
+        var enabledEventHandlers = (_enabledEventHandlers = {
+          // onMouseMove is used over onMouseEnter here. onMouseMove
+          // is only triggered on actual mouse movement while onMouseEnter
+          // can fire on DOM changes, interrupting keyboard navigation
+          onMouseMove: callAllEventHandlers(onMouseMove, function () {
+            if (index === _this.getState().highlightedIndex) {
+              return;
+            }
 
-    _this.getItemProps = function (_temp7) {
-      var _enabledEventHandlers;
-
-      var _ref7 = _temp7 === void 0 ? {} : _temp7,
-          onMouseMove = _ref7.onMouseMove,
-          onMouseDown = _ref7.onMouseDown,
-          onClick = _ref7.onClick,
-          onPress = _ref7.onPress,
-          index = _ref7.index,
-          _ref7$item = _ref7.item,
-          item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ?
-      /* istanbul ignore next */
-      undefined : requiredProp('getItemProps', 'item') : _ref7$item,
-          rest = _objectWithoutPropertiesLoose(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]);
+            _this.setHighlightedIndex(index, {
+              type: itemMouseEnter
+            }); // We never want to manually scroll when changing state based
+            // on `onMouseMove` because we will be moving the element out
+            // from under the user which is currently scrolling/moving the
+            // cursor
+
+
+            _this.avoidScrolling = true;
+
+            _this.internalSetTimeout(function () {
+              return _this.avoidScrolling = false;
+            }, 250);
+          }),
+          onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
+            // This prevents the activeElement from being changed
+            // to the item so it can remain with the current activeElement
+            // which is a more common use case.
+            event.preventDefault();
+          })
+        }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
+          _this.selectItemAtIndex(index, {
+            type: clickItem
+          });
+        }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect
+        // of the activeElement if clicking on disabled items
+
+        var eventHandlers = rest.disabled ? {
+          onMouseDown: enabledEventHandlers.onMouseDown
+        } : enabledEventHandlers;
+        return _extends({
+          id: _this.getItemId(index),
+          role: 'option',
+          'aria-selected': _this.getState().highlightedIndex === index
+        }, eventHandlers, {}, rest);
+      };
 
-      if (index === undefined) {
-        _this.items.push(item);
+      _this.clearItems = function () {
+        _this.items = [];
+      };
 
-        index = _this.items.indexOf(item);
-      } else {
-        _this.items[index] = item;
-      }
+      _this.reset = function (otherStateToSet, cb) {
+        if (otherStateToSet === void 0) {
+          otherStateToSet = {};
+        }
 
-      var onSelectKey = 'onClick';
-      var customClickHandler = onClick;
-      var enabledEventHandlers = (_enabledEventHandlers = {
-        // onMouseMove is used over onMouseEnter here. onMouseMove
-        // is only triggered on actual mouse movement while onMouseEnter
-        // can fire on DOM changes, interrupting keyboard navigation
-        onMouseMove: callAllEventHandlers(onMouseMove, function () {
-          if (index === _this.getState().highlightedIndex) {
-            return;
-          }
+        otherStateToSet = pickState(otherStateToSet);
 
-          _this.setHighlightedIndex(index, {
-            type: itemMouseEnter
-          }); // We never want to manually scroll when changing state based
-          // on `onMouseMove` because we will be moving the element out
-          // from under the user which is currently scrolling/moving the
-          // cursor
+        _this.internalSetState(function (_ref8) {
+          var selectedItem = _ref8.selectedItem;
+          return _extends({
+            isOpen: _this.props.defaultIsOpen,
+            highlightedIndex: _this.props.defaultHighlightedIndex,
+            inputValue: _this.props.itemToString(selectedItem)
+          }, otherStateToSet);
+        }, cb);
+      };
 
+      _this.toggleMenu = function (otherStateToSet, cb) {
+        if (otherStateToSet === void 0) {
+          otherStateToSet = {};
+        }
 
-          _this.avoidScrolling = true;
+        otherStateToSet = pickState(otherStateToSet);
+
+        _this.internalSetState(function (_ref9) {
+          var isOpen = _ref9.isOpen;
+          return _extends({
+            isOpen: !isOpen
+          }, isOpen && {
+            highlightedIndex: _this.props.defaultHighlightedIndex
+          }, {}, otherStateToSet);
+        }, function () {
+          var _this$getState5 = _this.getState(),
+              isOpen = _this$getState5.isOpen,
+              highlightedIndex = _this$getState5.highlightedIndex;
+
+          if (isOpen) {
+            if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
+              _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
+            }
+          }
 
-          _this.internalSetTimeout(function () {
-            return _this.avoidScrolling = false;
-          }, 250);
-        }),
-        onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
-          // This prevents the activeElement from being changed
-          // to the item so it can remain with the current activeElement
-          // which is a more common use case.
-          event.preventDefault();
-        })
-      }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
-        _this.selectItemAtIndex(index, {
-          type: clickItem
+          cbToCb(cb)();
         });
-      }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect
-      // of the activeElement if clicking on disabled items
+      };
 
-      var eventHandlers = rest.disabled ? {
-        onMouseDown: enabledEventHandlers.onMouseDown
-      } : enabledEventHandlers;
-      return _extends({
-        id: _this.getItemId(index),
-        role: 'option',
-        'aria-selected': _this.getState().highlightedIndex === index
-      }, eventHandlers, {}, rest);
-    };
+      _this.openMenu = function (cb) {
+        _this.internalSetState({
+          isOpen: true
+        }, cb);
+      };
 
-    _this.clearItems = function () {
-      _this.items = [];
-    };
+      _this.closeMenu = function (cb) {
+        _this.internalSetState({
+          isOpen: false
+        }, cb);
+      };
 
-    _this.reset = function (otherStateToSet, cb) {
-      if (otherStateToSet === void 0) {
-        otherStateToSet = {};
+      _this.updateStatus = debounce(function () {
+        var state = _this.getState();
+
+        var item = _this.items[state.highlightedIndex];
+
+        var resultCount = _this.getItemCount();
+
+        var status = _this.props.getA11yStatusMessage(_extends({
+          itemToString: _this.props.itemToString,
+          previousResultCount: _this.previousResultCount,
+          resultCount: resultCount,
+          highlightedItem: item
+        }, state));
+
+        _this.previousResultCount = resultCount;
+        setStatus(status, _this.props.environment.document);
+      }, 200);
+
+      // fancy destructuring + defaults + aliases
+      // this basically says each value of state should either be set to
+      // the initial value or the default value if the initial value is not provided
+      var _this$props = _this.props,
+          defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
+          _this$props$initialHi = _this$props.initialHighlightedIndex,
+          _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
+          defaultIsOpen = _this$props.defaultIsOpen,
+          _this$props$initialIs = _this$props.initialIsOpen,
+          _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
+          _this$props$initialIn = _this$props.initialInputValue,
+          _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
+          _this$props$initialSe = _this$props.initialSelectedItem,
+          _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
+
+      var _state = _this.getState({
+        highlightedIndex: _highlightedIndex,
+        isOpen: _isOpen,
+        inputValue: _inputValue,
+        selectedItem: _selectedItem
+      });
+
+      if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
+        _state.inputValue = _this.props.itemToString(_state.selectedItem);
       }
 
-      otherStateToSet = pickState(otherStateToSet);
+      _this.state = _state;
+      return _this;
+    }
 
-      _this.internalSetState(function (_ref8) {
-        var selectedItem = _ref8.selectedItem;
-        return _extends({
-          isOpen: _this.props.defaultIsOpen,
-          highlightedIndex: _this.props.defaultHighlightedIndex,
-          inputValue: _this.props.itemToString(selectedItem)
-        }, otherStateToSet);
-      }, cb);
-    };
+    var _proto = Downshift.prototype;
 
-    _this.toggleMenu = function (otherStateToSet, cb) {
-      if (otherStateToSet === void 0) {
-        otherStateToSet = {};
+    /**
+     * Clear all running timeouts
+     */
+    _proto.internalClearTimeouts = function internalClearTimeouts() {
+      this.timeoutIds.forEach(function (id) {
+        clearTimeout(id);
+      });
+      this.timeoutIds = [];
+    }
+    /**
+     * Gets the state based on internal state or props
+     * If a state value is passed via props, then that
+     * is the value given, otherwise it's retrieved from
+     * stateToMerge
+     *
+     * This will perform a shallow merge of the given state object
+     * with the state coming from props
+     * (for the controlled component scenario)
+     * This is used in state updater functions so they're referencing
+     * the right state regardless of where it comes from.
+     *
+     * @param {Object} stateToMerge defaults to this.state
+     * @return {Object} the state
+     */
+    ;
+
+    _proto.getState = function getState(stateToMerge) {
+      var _this4 = this;
+
+      if (stateToMerge === void 0) {
+        stateToMerge = this.state;
       }
 
-      otherStateToSet = pickState(otherStateToSet);
+      return Object.keys(stateToMerge).reduce(function (state, key) {
+        state[key] = _this4.isControlledProp(key) ? _this4.props[key] : stateToMerge[key];
+        return state;
+      }, {});
+    }
+    /**
+     * This determines whether a prop is a "controlled prop" meaning it is
+     * state which is controlled by the outside of this component rather
+     * than within this component.
+     * @param {String} key the key to check
+     * @return {Boolean} whether it is a controlled controlled prop
+     */
+    ;
+
+    _proto.isControlledProp = function isControlledProp(key) {
+      return this.props[key] !== undefined;
+    };
 
-      _this.internalSetState(function (_ref9) {
-        var isOpen = _ref9.isOpen;
-        return _extends({
-          isOpen: !isOpen
-        }, isOpen && {
-          highlightedIndex: _this.props.defaultHighlightedIndex
-        }, {}, otherStateToSet);
-      }, function () {
-        var _this$getState5 = _this.getState(),
-            isOpen = _this$getState5.isOpen,
-            highlightedIndex = _this$getState5.highlightedIndex;
-
-        if (isOpen) {
-          if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
-            _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
-          }
-        }
+    _proto.getItemCount = function getItemCount() {
+      // things read better this way. They're in priority order:
+      // 1. `this.itemCount`
+      // 2. `this.props.itemCount`
+      // 3. `this.items.length`
+      var itemCount = this.items.length;
+
+      if (this.itemCount != null) {
+        itemCount = this.itemCount;
+      } else if (this.props.itemCount !== undefined) {
+        itemCount = this.props.itemCount;
+      }
 
-        cbToCb(cb)();
-      });
+      return itemCount;
     };
 
-    _this.openMenu = function (cb) {
-      _this.internalSetState({
-        isOpen: true
-      }, cb);
+    _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
+      return this.props.environment.document.getElementById(this.getItemId(index));
     };
 
-    _this.closeMenu = function (cb) {
-      _this.internalSetState({
-        isOpen: false
-      }, cb);
+    _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
+      /* istanbul ignore else (react-native) */
+      {
+        var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
+        this.props.scrollIntoView(node, this._menuNode);
+      }
     };
 
-    _this.updateStatus = debounce(function () {
-      var state = _this.getState();
-
-      var item = _this.items[state.highlightedIndex];
-
-      var resultCount = _this.getItemCount();
-
-      var status = _this.props.getA11yStatusMessage(_extends({
-        itemToString: _this.props.itemToString,
-        previousResultCount: _this.previousResultCount,
-        resultCount: resultCount,
-        highlightedItem: item
-      }, state));
-
-      _this.previousResultCount = resultCount;
-      setStatus(status, _this.props.environment.document);
-    }, 200);
-
-    // fancy destructuring + defaults + aliases
-    // this basically says each value of state should either be set to
-    // the initial value or the default value if the initial value is not provided
-    var _this$props = _this.props,
-        defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
-        _this$props$initialHi = _this$props.initialHighlightedIndex,
-        _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
-        defaultIsOpen = _this$props.defaultIsOpen,
-        _this$props$initialIs = _this$props.initialIsOpen,
-        _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
-        _this$props$initialIn = _this$props.initialInputValue,
-        _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
-        _this$props$initialSe = _this$props.initialSelectedItem,
-        _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
-
-    var _state = _this.getState({
-      highlightedIndex: _highlightedIndex,
-      isOpen: _isOpen,
-      inputValue: _inputValue,
-      selectedItem: _selectedItem
-    });
+    _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
+      var itemCount = this.getItemCount();
 
-    if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
-      _state.inputValue = _this.props.itemToString(_state.selectedItem);
-    }
+      if (itemCount > 0) {
+        var nextHighlightedIndex = getNextWrappingIndex(amount, this.getState().highlightedIndex, itemCount);
+        this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
+      }
+    };
 
-    _this.state = _state;
-    return _this;
-  }
+    _proto.highlightFirstOrLastIndex = function highlightFirstOrLastIndex(event, first, otherStateToSet) {
+      var itemsLastIndex = this.getItemCount() - 1;
 
-  var _proto = Downshift.prototype;
+      if (itemsLastIndex < 0 || !this.getState().isOpen) {
+        return;
+      }
 
-  /**
-   * Clear all running timeouts
-   */
-  _proto.internalClearTimeouts = function internalClearTimeouts() {
-    this.timeoutIds.forEach(function (id) {
-      clearTimeout(id);
-    });
-    this.timeoutIds = [];
-  }
-  /**
-   * Gets the state based on internal state or props
-   * If a state value is passed via props, then that
-   * is the value given, otherwise it's retrieved from
-   * stateToMerge
-   *
-   * This will perform a shallow merge of the given state object
-   * with the state coming from props
-   * (for the controlled component scenario)
-   * This is used in state updater functions so they're referencing
-   * the right state regardless of where it comes from.
-   *
-   * @param {Object} stateToMerge defaults to this.state
-   * @return {Object} the state
-   */
-  ;
-
-  _proto.getState = function getState(stateToMerge) {
-    var _this4 = this;
-
-    if (stateToMerge === void 0) {
-      stateToMerge = this.state;
-    }
+      event.preventDefault();
+      this.setHighlightedIndex(first ? 0 : itemsLastIndex, otherStateToSet);
+    };
 
-    return Object.keys(stateToMerge).reduce(function (state, key) {
-      state[key] = _this4.isControlledProp(key) ? _this4.props[key] : stateToMerge[key];
-      return state;
-    }, {});
-  }
-  /**
-   * This determines whether a prop is a "controlled prop" meaning it is
-   * state which is controlled by the outside of this component rather
-   * than within this component.
-   * @param {String} key the key to check
-   * @return {Boolean} whether it is a controlled controlled prop
-   */
-  ;
-
-  _proto.isControlledProp = function isControlledProp(key) {
-    return this.props[key] !== undefined;
-  };
+    _proto.getStateAndHelpers = function getStateAndHelpers() {
+      var _this$getState6 = this.getState(),
+          highlightedIndex = _this$getState6.highlightedIndex,
+          inputValue = _this$getState6.inputValue,
+          selectedItem = _this$getState6.selectedItem,
+          isOpen = _this$getState6.isOpen;
+
+      var itemToString = this.props.itemToString;
+      var id = this.id;
+      var getRootProps = this.getRootProps,
+          getToggleButtonProps = this.getToggleButtonProps,
+          getLabelProps = this.getLabelProps,
+          getMenuProps = this.getMenuProps,
+          getInputProps = this.getInputProps,
+          getItemProps = this.getItemProps,
+          openMenu = this.openMenu,
+          closeMenu = this.closeMenu,
+          toggleMenu = this.toggleMenu,
+          selectItem = this.selectItem,
+          selectItemAtIndex = this.selectItemAtIndex,
+          selectHighlightedItem = this.selectHighlightedItem,
+          setHighlightedIndex = this.setHighlightedIndex,
+          clearSelection = this.clearSelection,
+          clearItems = this.clearItems,
+          reset = this.reset,
+          setItemCount = this.setItemCount,
+          unsetItemCount = this.unsetItemCount,
+          setState = this.internalSetState;
+      return {
+        // prop getters
+        getRootProps: getRootProps,
+        getToggleButtonProps: getToggleButtonProps,
+        getLabelProps: getLabelProps,
+        getMenuProps: getMenuProps,
+        getInputProps: getInputProps,
+        getItemProps: getItemProps,
+        // actions
+        reset: reset,
+        openMenu: openMenu,
+        closeMenu: closeMenu,
+        toggleMenu: toggleMenu,
+        selectItem: selectItem,
+        selectItemAtIndex: selectItemAtIndex,
+        selectHighlightedItem: selectHighlightedItem,
+        setHighlightedIndex: setHighlightedIndex,
+        clearSelection: clearSelection,
+        clearItems: clearItems,
+        setItemCount: setItemCount,
+        unsetItemCount: unsetItemCount,
+        setState: setState,
+        // props
+        itemToString: itemToString,
+        // derived
+        id: id,
+        // state
+        highlightedIndex: highlightedIndex,
+        inputValue: inputValue,
+        isOpen: isOpen,
+        selectedItem: selectedItem
+      };
+    } //////////////////////////// ROOT
+    ;
 
-  _proto.getItemCount = function getItemCount() {
-    // things read better this way. They're in priority order:
-    // 1. `this.itemCount`
-    // 2. `this.props.itemCount`
-    // 3. `this.items.length`
-    var itemCount = this.items.length;
-
-    if (this.itemCount != null) {
-      itemCount = this.itemCount;
-    } else if (this.props.itemCount !== undefined) {
-      itemCount = this.props.itemCount;
-    }
+    _proto.componentDidMount = function componentDidMount() {
+      var _this5 = this;
 
-    return itemCount;
-  };
+      /* istanbul ignore if (react-native) */
+      if (process.env.NODE_ENV !== 'production' && !false && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
+        validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
+      }
+      /* istanbul ignore if (react-native) */
 
-  _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
-    return this.props.environment.document.getElementById(this.getItemId(index));
-  };
 
-  _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
-    /* istanbul ignore else (react-native) */
-    {
-      var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
-      this.props.scrollIntoView(node, this._menuNode);
-    }
-  };
+      {
+        var targetWithinDownshift = function (target, checkActiveElement) {
+          if (checkActiveElement === void 0) {
+            checkActiveElement = true;
+          }
 
-  _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
-    var itemCount = this.getItemCount();
+          var document = _this5.props.environment.document;
+          return [_this5._rootNode, _this5._menuNode].some(function (contextNode) {
+            return contextNode && (isOrContainsNode(contextNode, target) || checkActiveElement && isOrContainsNode(contextNode, document.activeElement));
+          });
+        }; // this.isMouseDown helps us track whether the mouse is currently held down.
+        // This is useful when the user clicks on an item in the list, but holds the mouse
+        // down long enough for the list to disappear (because the blur event fires on the input)
+        // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
+        // trigger hiding the menu.
 
-    if (itemCount > 0) {
-      var nextHighlightedIndex = getNextWrappingIndex(amount, this.getState().highlightedIndex, itemCount);
-      this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
-    }
-  };
 
-  _proto.highlightFirstOrLastIndex = function highlightFirstOrLastIndex(event, first, otherStateToSet) {
-    var itemsLastIndex = this.getItemCount() - 1;
+        var onMouseDown = function () {
+          _this5.isMouseDown = true;
+        };
 
-    if (itemsLastIndex < 0 || !this.getState().isOpen) {
-      return;
-    }
+        var onMouseUp = function (event) {
+          _this5.isMouseDown = false; // if the target element or the activeElement is within a downshift node
+          // then we don't want to reset downshift
 
-    event.preventDefault();
-    this.setHighlightedIndex(first ? 0 : itemsLastIndex, otherStateToSet);
-  };
+          var contextWithinDownshift = targetWithinDownshift(event.target);
 
-  _proto.getStateAndHelpers = function getStateAndHelpers() {
-    var _this$getState6 = this.getState(),
-        highlightedIndex = _this$getState6.highlightedIndex,
-        inputValue = _this$getState6.inputValue,
-        selectedItem = _this$getState6.selectedItem,
-        isOpen = _this$getState6.isOpen;
-
-    var itemToString = this.props.itemToString;
-    var id = this.id;
-    var getRootProps = this.getRootProps,
-        getToggleButtonProps = this.getToggleButtonProps,
-        getLabelProps = this.getLabelProps,
-        getMenuProps = this.getMenuProps,
-        getInputProps = this.getInputProps,
-        getItemProps = this.getItemProps,
-        openMenu = this.openMenu,
-        closeMenu = this.closeMenu,
-        toggleMenu = this.toggleMenu,
-        selectItem = this.selectItem,
-        selectItemAtIndex = this.selectItemAtIndex,
-        selectHighlightedItem = this.selectHighlightedItem,
-        setHighlightedIndex = this.setHighlightedIndex,
-        clearSelection = this.clearSelection,
-        clearItems = this.clearItems,
-        reset = this.reset,
-        setItemCount = this.setItemCount,
-        unsetItemCount = this.unsetItemCount,
-        setState = this.internalSetState;
-    return {
-      // prop getters
-      getRootProps: getRootProps,
-      getToggleButtonProps: getToggleButtonProps,
-      getLabelProps: getLabelProps,
-      getMenuProps: getMenuProps,
-      getInputProps: getInputProps,
-      getItemProps: getItemProps,
-      // actions
-      reset: reset,
-      openMenu: openMenu,
-      closeMenu: closeMenu,
-      toggleMenu: toggleMenu,
-      selectItem: selectItem,
-      selectItemAtIndex: selectItemAtIndex,
-      selectHighlightedItem: selectHighlightedItem,
-      setHighlightedIndex: setHighlightedIndex,
-      clearSelection: clearSelection,
-      clearItems: clearItems,
-      setItemCount: setItemCount,
-      unsetItemCount: unsetItemCount,
-      setState: setState,
-      // props
-      itemToString: itemToString,
-      // derived
-      id: id,
-      // state
-      highlightedIndex: highlightedIndex,
-      inputValue: inputValue,
-      isOpen: isOpen,
-      selectedItem: selectedItem
-    };
-  } //////////////////////////// ROOT
-  ;
+          if (!contextWithinDownshift && _this5.getState().isOpen) {
+            _this5.reset({
+              type: mouseUp
+            }, function () {
+              return _this5.props.onOuterClick(_this5.getStateAndHelpers());
+            });
+          }
+        }; // Touching an element in iOS gives focus and hover states, but touching out of
+        // the element will remove hover, and persist the focus state, resulting in the
+        // blur event not being triggered.
+        // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
+        // If the user taps outside of Downshift, the component should be reset,
+        // but not if the user is swiping
 
-  _proto.componentDidMount = function componentDidMount() {
-    var _this5 = this;
-
-    /* istanbul ignore if (react-native) */
-    if (process.env.NODE_ENV !== 'production' && !false && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
-      validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
-    }
-    /* istanbul ignore if (react-native) */
 
+        var onTouchStart = function () {
+          _this5.isTouchMove = false;
+        };
 
-    {
-      var targetWithinDownshift = function (target, checkActiveElement) {
-        if (checkActiveElement === void 0) {
-          checkActiveElement = true;
-        }
+        var onTouchMove = function () {
+          _this5.isTouchMove = true;
+        };
 
-        var document = _this5.props.environment.document;
-        return [_this5._rootNode, _this5._menuNode].some(function (contextNode) {
-          return contextNode && (isOrContainsNode(contextNode, target) || checkActiveElement && isOrContainsNode(contextNode, document.activeElement));
-        });
-      }; // this.isMouseDown helps us track whether the mouse is currently held down.
-      // This is useful when the user clicks on an item in the list, but holds the mouse
-      // down long enough for the list to disappear (because the blur event fires on the input)
-      // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
-      // trigger hiding the menu.
+        var onTouchEnd = function (event) {
+          var contextWithinDownshift = targetWithinDownshift(event.target, false);
 
+          if (!_this5.isTouchMove && !contextWithinDownshift && _this5.getState().isOpen) {
+            _this5.reset({
+              type: touchEnd
+            }, function () {
+              return _this5.props.onOuterClick(_this5.getStateAndHelpers());
+            });
+          }
+        };
 
-      var onMouseDown = function () {
-        _this5.isMouseDown = true;
-      };
+        var environment = this.props.environment;
+        environment.addEventListener('mousedown', onMouseDown);
+        environment.addEventListener('mouseup', onMouseUp);
+        environment.addEventListener('touchstart', onTouchStart);
+        environment.addEventListener('touchmove', onTouchMove);
+        environment.addEventListener('touchend', onTouchEnd);
 
-      var onMouseUp = function (event) {
-        _this5.isMouseDown = false; // if the target element or the activeElement is within a downshift node
-        // then we don't want to reset downshift
+        this.cleanup = function () {
+          _this5.internalClearTimeouts();
 
-        var contextWithinDownshift = targetWithinDownshift(event.target);
+          _this5.updateStatus.cancel();
 
-        if (!contextWithinDownshift && _this5.getState().isOpen) {
-          _this5.reset({
-            type: mouseUp
-          }, function () {
-            return _this5.props.onOuterClick(_this5.getStateAndHelpers());
-          });
-        }
-      }; // Touching an element in iOS gives focus and hover states, but touching out of
-      // the element will remove hover, and persist the focus state, resulting in the
-      // blur event not being triggered.
-      // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
-      // If the user taps outside of Downshift, the component should be reset,
-      // but not if the user is swiping
+          environment.removeEventListener('mousedown', onMouseDown);
+          environment.removeEventListener('mouseup', onMouseUp);
+          environment.removeEventListener('touchstart', onTouchStart);
+          environment.removeEventListener('touchmove', onTouchMove);
+          environment.removeEventListener('touchend', onTouchEnd);
+        };
+      }
+    };
 
+    _proto.shouldScroll = function shouldScroll(prevState, prevProps) {
+      var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
+          currentHighlightedIndex = _ref10.highlightedIndex;
 
-      var onTouchStart = function () {
-        _this5.isTouchMove = false;
-      };
+      var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
+          prevHighlightedIndex = _ref11.highlightedIndex;
 
-      var onTouchMove = function () {
-        _this5.isTouchMove = true;
-      };
+      var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
+      return scrollWhenOpen || currentHighlightedIndex !== prevHighlightedIndex;
+    };
 
-      var onTouchEnd = function (event) {
-        var contextWithinDownshift = targetWithinDownshift(event.target, false);
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+      if (process.env.NODE_ENV !== 'production') {
+        validateControlledUnchanged(prevProps, this.props);
+        /* istanbul ignore if (react-native) */
 
-        if (!_this5.isTouchMove && !contextWithinDownshift && _this5.getState().isOpen) {
-          _this5.reset({
-            type: touchEnd
-          }, function () {
-            return _this5.props.onOuterClick(_this5.getStateAndHelpers());
-          });
+        if ( this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
+          validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
         }
-      };
-
-      var environment = this.props.environment;
-      environment.addEventListener('mousedown', onMouseDown);
-      environment.addEventListener('mouseup', onMouseUp);
-      environment.addEventListener('touchstart', onTouchStart);
-      environment.addEventListener('touchmove', onTouchMove);
-      environment.addEventListener('touchend', onTouchEnd);
-
-      this.cleanup = function () {
-        _this5.internalClearTimeouts();
+      }
 
-        _this5.updateStatus.cancel();
+      if (this.isControlledProp('selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
+        this.internalSetState({
+          type: controlledPropUpdatedSelectedItem,
+          inputValue: this.props.itemToString(this.props.selectedItem)
+        });
+      }
 
-        environment.removeEventListener('mousedown', onMouseDown);
-        environment.removeEventListener('mouseup', onMouseUp);
-        environment.removeEventListener('touchstart', onTouchStart);
-        environment.removeEventListener('touchmove', onTouchMove);
-        environment.removeEventListener('touchend', onTouchEnd);
-      };
-    }
-  };
+      if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
+        this.scrollHighlightedItemIntoView();
+      }
+      /* istanbul ignore else (react-native) */
 
-  _proto.shouldScroll = function shouldScroll(prevState, prevProps) {
-    var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
-        currentHighlightedIndex = _ref10.highlightedIndex;
 
-    var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
-        prevHighlightedIndex = _ref11.highlightedIndex;
+      this.updateStatus();
+    };
 
-    var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
-    return scrollWhenOpen || currentHighlightedIndex !== prevHighlightedIndex;
-  };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      this.cleanup(); // avoids memory leak
+    };
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    if (process.env.NODE_ENV !== 'production') {
-      validateControlledUnchanged(prevProps, this.props);
-      /* istanbul ignore if (react-native) */
+    _proto.render = function render() {
+      var children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
+      // we clear this out each render and it will be populated again as
+      // getItemProps is called.
 
-      if ( this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
-        validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
-      }
-    }
+      this.clearItems(); // we reset this so we know whether the user calls getRootProps during
+      // this render. If they do then we don't need to do anything,
+      // if they don't then we need to clone the element they return and
+      // apply the props for them.
 
-    if (this.isControlledProp('selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
-      this.internalSetState({
-        type: controlledPropUpdatedSelectedItem,
-        inputValue: this.props.itemToString(this.props.selectedItem)
-      });
-    }
+      this.getRootProps.called = false;
+      this.getRootProps.refKey = undefined;
+      this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
 
-    if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
-      this.scrollHighlightedItemIntoView();
-    }
-    /* istanbul ignore else (react-native) */
+      this.getMenuProps.called = false;
+      this.getMenuProps.refKey = undefined;
+      this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
 
+      this.getLabelProps.called = false; // and something similar for getInputProps
 
-    this.updateStatus();
-  };
+      this.getInputProps.called = false;
+      var element = unwrapArray(children(this.getStateAndHelpers()));
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.cleanup(); // avoids memory leak
-  };
+      if (!element) {
+        return null;
+      }
 
-  _proto.render = function render() {
-    var children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
-    // we clear this out each render and it will be populated again as
-    // getItemProps is called.
+      if (this.getRootProps.called || this.props.suppressRefError) {
+        if (process.env.NODE_ENV !== 'production' && !this.getRootProps.suppressRefError && !this.props.suppressRefError) {
+          validateGetRootPropsCalledCorrectly(element, this.getRootProps);
+        }
 
-    this.clearItems(); // we reset this so we know whether the user calls getRootProps during
-    // this render. If they do then we don't need to do anything,
-    // if they don't then we need to clone the element they return and
-    // apply the props for them.
+        return element;
+      } else if (isDOMElement(element)) {
+        // they didn't apply the root props, but we can clone
+        // this and apply the props ourselves
+        return cloneElement(element, this.getRootProps(getElementProps(element)));
+      }
+      /* istanbul ignore else */
 
-    this.getRootProps.called = false;
-    this.getRootProps.refKey = undefined;
-    this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
 
-    this.getMenuProps.called = false;
-    this.getMenuProps.refKey = undefined;
-    this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
+      if (process.env.NODE_ENV !== 'production') {
+        // they didn't apply the root props, but they need to
+        // otherwise we can't query around the autocomplete
+        throw new Error('downshift: If you return a non-DOM element, you must apply the getRootProps function');
+      }
+      /* istanbul ignore next */
 
-    this.getLabelProps.called = false; // and something similar for getInputProps
 
-    this.getInputProps.called = false;
-    var element = unwrapArray(children(this.getStateAndHelpers()));
+      return undefined;
+    };
 
-    if (!element) {
-      return null;
-    }
+    return Downshift;
+  }(Component);
 
-    if (this.getRootProps.called || this.props.suppressRefError) {
-      if (process.env.NODE_ENV !== 'production' && !this.getRootProps.suppressRefError && !this.props.suppressRefError) {
-        validateGetRootPropsCalledCorrectly(element, this.getRootProps);
+  Downshift.defaultProps = {
+    defaultHighlightedIndex: null,
+    defaultIsOpen: false,
+    getA11yStatusMessage: getA11yStatusMessage,
+    itemToString: function itemToString(i) {
+      if (i == null) {
+        return '';
       }
 
-      return element;
-    } else if (isDOMElement(element)) {
-      // they didn't apply the root props, but we can clone
-      // this and apply the props ourselves
-      return cloneElement(element, this.getRootProps(getElementProps(element)));
-    }
-    /* istanbul ignore else */
-
-
-    if (process.env.NODE_ENV !== 'production') {
-      // they didn't apply the root props, but they need to
-      // otherwise we can't query around the autocomplete
-      throw new Error('downshift: If you return a non-DOM element, you must apply the getRootProps function');
-    }
-    /* istanbul ignore next */
-
+      if (process.env.NODE_ENV !== 'production' && isPlainObject(i) && !i.hasOwnProperty('toString')) {
+        // eslint-disable-next-line no-console
+        console.warn('downshift: An object was passed to the default implementation of `itemToString`. You should probably provide your own `itemToString` implementation. Please refer to the `itemToString` API documentation.', 'The object that was passed:', i);
+      }
 
-    return undefined;
+      return String(i);
+    },
+    onStateChange: noop,
+    onInputValueChange: noop,
+    onUserAction: noop,
+    onChange: noop,
+    onSelect: noop,
+    onOuterClick: noop,
+    selectedItemChanged: function selectedItemChanged(prevItem, item) {
+      return prevItem !== item;
+    },
+    environment: typeof window === 'undefined'
+    /* istanbul ignore next (ssr) */
+    ? {} : window,
+    stateReducer: function stateReducer(state, stateToSet) {
+      return stateToSet;
+    },
+    suppressRefError: false,
+    scrollIntoView: scrollIntoView
   };
-
+  Downshift.stateChangeTypes = stateChangeTypes;
   return Downshift;
-}(Component);
-
-Downshift.defaultProps = {
-  defaultHighlightedIndex: null,
-  defaultIsOpen: false,
-  getA11yStatusMessage: getA11yStatusMessage,
-  itemToString: function itemToString(i) {
-    if (i == null) {
-      return '';
-    }
+}();
 
-    if (process.env.NODE_ENV !== 'production' && isPlainObject(i) && !i.hasOwnProperty('toString')) {
-      // eslint-disable-next-line no-console
-      console.warn('downshift: An object was passed to the default implementation of `itemToString`. You should probably provide your own `itemToString` implementation. Please refer to the `itemToString` API documentation.', 'The object that was passed:', i);
-    }
-
-    return String(i);
-  },
-  onStateChange: noop,
-  onInputValueChange: noop,
-  onUserAction: noop,
-  onChange: noop,
-  onSelect: noop,
-  onOuterClick: noop,
-  selectedItemChanged: function selectedItemChanged(prevItem, item) {
-    return prevItem !== item;
-  },
-  environment: typeof window === 'undefined'
-  /* istanbul ignore next (ssr) */
-  ? {} : window,
-  stateReducer: function stateReducer(state, stateToSet) {
-    return stateToSet;
-  },
-  suppressRefError: false,
-  scrollIntoView: scrollIntoView
-};
-Downshift.stateChangeTypes = stateChangeTypes;
 process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   children: PropTypes.func,
   defaultHighlightedIndex: PropTypes.number,
@@ -2086,7 +2092,9 @@ function downshiftSelectReducer(state, action) {
 }
 /* eslint-enable complexity */
 
-var validatePropTypes = getPropTypesValidator(useSelect, propTypes);
+var validatePropTypes = process.env.NODE_ENV === 'production' ?
+/* istanbul ignore next */
+null : getPropTypesValidator(useSelect, propTypes);
 var defaultProps = {
   itemToString: itemToString,
   stateReducer: function stateReducer(s, a) {
@@ -2106,7 +2114,11 @@ function useSelect(userProps) {
     userProps = {};
   }
 
-  validatePropTypes(userProps); // Props defaults and destructuring.
+  /* istanbul ignore else */
+  if (process.env.NODE_ENV !== 'production') {
+    validatePropTypes(userProps);
+  } // Props defaults and destructuring.
+
 
   var props = _extends({}, defaultProps, {}, userProps);