downshift - npm Package Compare versions

Comparing version 1.0.0-rc.16 to 1.0.0-rc.17

dist/downshift.cjs.js

@@ -424,3 +424,2 @@ 'use strict';
 
-    _this.id = generateId('downshift');
     var state = _this.getState({
@@ -436,3 +435,2 @@ highlightedIndex: _this.props.defaultHighlightedIndex,
     _this.state = state;
-    _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);
     return _this;
@@ -443,2 +441,8 @@ }
   // so we're not going to document this yet
+  // nor are we going to test it.
+  // We will try to avoid breaking it, but
+  // we make no guarantees.
+  // If you need it, we recommend that you lock
+  // down your version of downshift (don't use a
+  // version range) to avoid surprise breakages.
 
@@ -471,3 +475,3 @@
       return Object.keys(stateToMerge).reduce(function (state, key) {
-        state[key] = _this2.isStateProp(key) ? _this2.props[key] : stateToMerge[key];
+        state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
         return state;
@@ -486,4 +490,4 @@ }, {});
   }, {
-    key: 'isStateProp',
-    value: function isStateProp(key) {
+    key: 'isControlledProp',
+    value: function isControlledProp(key) {
       return this.props[key] !== undefined;
@@ -534,2 +538,7 @@ }
         Object.keys(stateToSet).forEach(function (key) {
+          // onStateChangeArg should only have the state that is
+          // actually changing
+          if (state[key] !== stateToSet[key]) {
+            onStateChangeArg[key] = stateToSet[key];
+          }
           // the type is useful for the onStateChangeArg
@@ -544,10 +553,5 @@ // but we don't actually want to set it in internal state.
           }
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== stateToSet[key]) {
-            onStateChangeArg[key] = stateToSet[key];
-          }
           nextFullState[key] = stateToSet[key];
           // if it's coming from props, then we don't care to set it internally
-          if (!_this3.isStateProp(key)) {
+          if (!_this3.isControlledProp(key)) {
             nextState[key] = stateToSet[key];
@@ -593,3 +597,4 @@ }
           setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection;
+          clearSelection = this.clearSelection,
+          reset = this.reset;
 
@@ -605,2 +610,3 @@ return {
         // actions
+        reset: reset,
         openMenu: openMenu,
@@ -677,3 +683,3 @@ closeMenu: closeMenu,
         if ((event.target === _this4._rootNode || !_this4._rootNode.contains(event.target)) && _this4.getState().isOpen) {
-          _this4.reset(Downshift.stateChangeTypes.mouseUp);
+          _this4.reset({ type: Downshift.stateChangeTypes.mouseUp });
         }
@@ -693,4 +699,5 @@ };
     value: function componentDidUpdate(prevProps) {
-      if (this.isStateProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
+      if (this.isControlledProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
         this.internalSetState({
+          type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
@@ -777,3 +784,13 @@ });
 Downshift$1.stateChangeTypes = {
-  mouseUp: '__autocomplete_mouseup__'
+  mouseUp: '__autocomplete_mouseup__',
+  itemMouseEnter: '__autocomplete_item_mouseenter__',
+  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+  keyDownEscape: '__autocomplete_keydown_escape__',
+  keyDownEnter: '__autocomplete_keydown_enter__',
+  blurInput: '__autocomplete_blur_input__',
+  changeInput: '__autocomplete_change_input__',
+  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+  clickButton: '__autocomplete_click_button__',
+  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__'
 };
@@ -784,2 +801,4 @@
 
+  this.id = generateId('downshift');
+  this.root_handleClick = composeEventHandlers(this.props.onClick, this.root_handleClick);
   this.input = null;
@@ -795,4 +814,5 @@ this.items = [];
     var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this5.props.defaultHighlightedIndex;
+    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _this5.internalSetState({ highlightedIndex: highlightedIndex }, function () {
+    _this5.internalSetState(_extends({ highlightedIndex: highlightedIndex }, otherStateToSet), function () {
       var node = _this5.getItemNodeFromIndex(_this5.getState().highlightedIndex);
@@ -804,17 +824,23 @@ var rootNode = _this5._rootNode;
 
-  this.highlightIndex = function (index) {
-    _this5.openMenu(function () {
-      _this5.setHighlightedIndex(index);
-    });
+  this.openAndHighlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, _extends({ isOpen: true }, otherStateToSet));
   };
 
-  this.moveHighlightedIndex = function (amount) {
+  this.highlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, otherStateToSet);
+  };
+
+  this.moveHighlightedIndex = function (amount, otherStateToSet) {
     if (_this5.getState().isOpen) {
-      _this5.changeHighlightedIndex(amount);
+      _this5.changeHighlightedIndex(amount, otherStateToSet);
     } else {
-      _this5.highlightIndex();
+      _this5.openAndHighlightDefaultIndex(otherStateToSet);
     }
   };
 
-  this.changeHighlightedIndex = function (moveAmount) {
+  this.changeHighlightedIndex = function (moveAmount, otherStateToSet) {
     var itemsLastIndex = _this5.getItemCount() - 1;
@@ -838,6 +864,6 @@ if (itemsLastIndex < 0) {
     }
-    _this5.setHighlightedIndex(newIndex);
+    _this5.setHighlightedIndex(newIndex, otherStateToSet);
   };
 
-  this.clearSelection = function () {
+  this.clearSelection = function (cb) {
     _this5.internalSetState({
@@ -850,7 +876,8 @@ selectedItem: null,
       inputNode && inputNode.focus && inputNode.focus();
+      cbToCb(cb)();
     });
   };
 
-  this.selectItem = function (item) {
-    _this5.internalSetState({
+  this.selectItem = function (item, otherStateToSet, cb) {
+    _this5.internalSetState(_extends({
       isOpen: false,
@@ -860,6 +887,6 @@ highlightedIndex: null,
       inputValue: _this5.props.itemToString(item)
-    });
+    }, otherStateToSet), cbToCb(cb));
   };
 
-  this.selectItemAtIndex = function (itemIndex) {
+  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
     var item = _this5.items[itemIndex];
@@ -869,7 +896,7 @@ if (!item) {
     }
-    _this5.selectItem(item);
+    _this5.selectItem(item, otherStateToSet, cb);
   };
 
-  this.selectHighlightedItem = function () {
-    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex);
+  this.selectHighlightedItem = function (otherStateToSet, cb) {
+    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex, otherStateToSet, cb);
   };
@@ -913,3 +940,5 @@
       var amount = event.shiftKey ? 5 : 1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowDown
+      });
     },
@@ -919,3 +948,5 @@ ArrowUp: function ArrowUp(event) {
       var amount = event.shiftKey ? -5 : -1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowUp
+      });
     },
@@ -925,3 +956,5 @@ Enter: function Enter(event) {
       if (this.getState().isOpen) {
-        this.selectHighlightedItem();
+        this.selectHighlightedItem({
+          type: Downshift$1.stateChangeTypes.keyDownEnter
+        });
       }
@@ -931,3 +964,3 @@ },
       event.preventDefault();
-      this.reset();
+      this.reset({ type: Downshift$1.stateChangeTypes.keyDownEscape });
     }
@@ -938,3 +971,3 @@ };
       event.preventDefault();
-      this.toggleMenu();
+      this.toggleMenu({ type: Downshift$1.stateChangeTypes.keyDownSpaceButton });
     }
@@ -971,3 +1004,3 @@ });
     event.preventDefault();
-    _this5.toggleMenu();
+    _this5.toggleMenu({ type: Downshift$1.stateChangeTypes.clickButton });
   };
@@ -1030,3 +1063,7 @@
   this.input_handleChange = function (event) {
-    _this5.internalSetState({ isOpen: true, inputValue: event.target.value });
+    _this5.internalSetState({
+      type: Downshift$1.stateChangeTypes.changeInput,
+      isOpen: true,
+      inputValue: event.target.value
+    });
   };
@@ -1036,3 +1073,3 @@
     if (!_this5.isMouseDown) {
-      _this5.reset();
+      _this5.reset({ type: Downshift$1.stateChangeTypes.blurInput });
     }
@@ -1055,3 +1092,5 @@ };
       onMouseEnter: composeEventHandlers(onMouseEnter, function () {
-        _this5.setHighlightedIndex(index);
+        _this5.setHighlightedIndex(index, {
+          type: Downshift$1.stateChangeTypes.itemMouseEnter
+        });
       })
@@ -1061,23 +1100,24 @@ }, rest);
 
-  this.reset = function (type) {
+  this.reset = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref7) {
       var selectedItem = _ref7.selectedItem;
-      return {
-        type: type,
+      return _extends({
         isOpen: false,
         highlightedIndex: null,
         inputValue: _this5.props.itemToString(selectedItem)
-      };
-    });
+      }, otherStateToSet);
+    }, cbToCb(cb));
   };
 
-  this.toggleMenu = function (newState, cb) {
+  this.toggleMenu = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref8) {
       var isOpen = _ref8.isOpen;
 
-      var nextIsOpen = !isOpen;
-      if (typeof newState === 'boolean') {
-        nextIsOpen = newState;
-      }
-      return { isOpen: nextIsOpen };
+      return _extends({ isOpen: !isOpen }, otherStateToSet);
     }, function () {
@@ -1088,3 +1128,3 @@ var _getState5 = _this5.getState(),
       if (isOpen) {
-        _this5.setHighlightedIndex();
+        _this5.highlightDefaultIndex();
       }
@@ -1096,7 +1136,7 @@ cbToCb(cb)();
   this.openMenu = function (cb) {
-    _this5.toggleMenu(true, cb);
+    _this5.internalSetState({ isOpen: true }, cbToCb(cb));
   };
 
   this.closeMenu = function (cb) {
-    _this5.toggleMenu(false, cb);
+    _this5.internalSetState({ isOpen: false }, cbToCb(cb));
   };
@@ -1103,0 +1143,0 @@

dist/downshift.es.js

@@ -419,3 +419,2 @@ import React, { Component } from 'react';
 
-    _this.id = generateId('downshift');
     var state = _this.getState({
@@ -431,3 +430,2 @@ highlightedIndex: _this.props.defaultHighlightedIndex,
     _this.state = state;
-    _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);
     return _this;
@@ -438,2 +436,8 @@ }
   // so we're not going to document this yet
+  // nor are we going to test it.
+  // We will try to avoid breaking it, but
+  // we make no guarantees.
+  // If you need it, we recommend that you lock
+  // down your version of downshift (don't use a
+  // version range) to avoid surprise breakages.
 
@@ -466,3 +470,3 @@
       return Object.keys(stateToMerge).reduce(function (state, key) {
-        state[key] = _this2.isStateProp(key) ? _this2.props[key] : stateToMerge[key];
+        state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
         return state;
@@ -481,4 +485,4 @@ }, {});
   }, {
-    key: 'isStateProp',
-    value: function isStateProp(key) {
+    key: 'isControlledProp',
+    value: function isControlledProp(key) {
       return this.props[key] !== undefined;
@@ -529,2 +533,7 @@ }
         Object.keys(stateToSet).forEach(function (key) {
+          // onStateChangeArg should only have the state that is
+          // actually changing
+          if (state[key] !== stateToSet[key]) {
+            onStateChangeArg[key] = stateToSet[key];
+          }
           // the type is useful for the onStateChangeArg
@@ -539,10 +548,5 @@ // but we don't actually want to set it in internal state.
           }
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== stateToSet[key]) {
-            onStateChangeArg[key] = stateToSet[key];
-          }
           nextFullState[key] = stateToSet[key];
           // if it's coming from props, then we don't care to set it internally
-          if (!_this3.isStateProp(key)) {
+          if (!_this3.isControlledProp(key)) {
             nextState[key] = stateToSet[key];
@@ -588,3 +592,4 @@ }
           setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection;
+          clearSelection = this.clearSelection,
+          reset = this.reset;
 
@@ -600,2 +605,3 @@ return {
         // actions
+        reset: reset,
         openMenu: openMenu,
@@ -672,3 +678,3 @@ closeMenu: closeMenu,
         if ((event.target === _this4._rootNode || !_this4._rootNode.contains(event.target)) && _this4.getState().isOpen) {
-          _this4.reset(Downshift.stateChangeTypes.mouseUp);
+          _this4.reset({ type: Downshift.stateChangeTypes.mouseUp });
         }
@@ -688,4 +694,5 @@ };
     value: function componentDidUpdate(prevProps) {
-      if (this.isStateProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
+      if (this.isControlledProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
         this.internalSetState({
+          type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
@@ -772,3 +779,13 @@ });
 Downshift$1.stateChangeTypes = {
-  mouseUp: '__autocomplete_mouseup__'
+  mouseUp: '__autocomplete_mouseup__',
+  itemMouseEnter: '__autocomplete_item_mouseenter__',
+  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+  keyDownEscape: '__autocomplete_keydown_escape__',
+  keyDownEnter: '__autocomplete_keydown_enter__',
+  blurInput: '__autocomplete_blur_input__',
+  changeInput: '__autocomplete_change_input__',
+  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+  clickButton: '__autocomplete_click_button__',
+  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__'
 };
@@ -779,2 +796,4 @@
 
+  this.id = generateId('downshift');
+  this.root_handleClick = composeEventHandlers(this.props.onClick, this.root_handleClick);
   this.input = null;
@@ -790,4 +809,5 @@ this.items = [];
     var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this5.props.defaultHighlightedIndex;
+    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _this5.internalSetState({ highlightedIndex: highlightedIndex }, function () {
+    _this5.internalSetState(_extends({ highlightedIndex: highlightedIndex }, otherStateToSet), function () {
       var node = _this5.getItemNodeFromIndex(_this5.getState().highlightedIndex);
@@ -799,17 +819,23 @@ var rootNode = _this5._rootNode;
 
-  this.highlightIndex = function (index) {
-    _this5.openMenu(function () {
-      _this5.setHighlightedIndex(index);
-    });
+  this.openAndHighlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, _extends({ isOpen: true }, otherStateToSet));
   };
 
-  this.moveHighlightedIndex = function (amount) {
+  this.highlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, otherStateToSet);
+  };
+
+  this.moveHighlightedIndex = function (amount, otherStateToSet) {
     if (_this5.getState().isOpen) {
-      _this5.changeHighlightedIndex(amount);
+      _this5.changeHighlightedIndex(amount, otherStateToSet);
     } else {
-      _this5.highlightIndex();
+      _this5.openAndHighlightDefaultIndex(otherStateToSet);
     }
   };
 
-  this.changeHighlightedIndex = function (moveAmount) {
+  this.changeHighlightedIndex = function (moveAmount, otherStateToSet) {
     var itemsLastIndex = _this5.getItemCount() - 1;
@@ -833,6 +859,6 @@ if (itemsLastIndex < 0) {
     }
-    _this5.setHighlightedIndex(newIndex);
+    _this5.setHighlightedIndex(newIndex, otherStateToSet);
   };
 
-  this.clearSelection = function () {
+  this.clearSelection = function (cb) {
     _this5.internalSetState({
@@ -845,7 +871,8 @@ selectedItem: null,
       inputNode && inputNode.focus && inputNode.focus();
+      cbToCb(cb)();
     });
   };
 
-  this.selectItem = function (item) {
-    _this5.internalSetState({
+  this.selectItem = function (item, otherStateToSet, cb) {
+    _this5.internalSetState(_extends({
       isOpen: false,
@@ -855,6 +882,6 @@ highlightedIndex: null,
       inputValue: _this5.props.itemToString(item)
-    });
+    }, otherStateToSet), cbToCb(cb));
   };
 
-  this.selectItemAtIndex = function (itemIndex) {
+  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
     var item = _this5.items[itemIndex];
@@ -864,7 +891,7 @@ if (!item) {
     }
-    _this5.selectItem(item);
+    _this5.selectItem(item, otherStateToSet, cb);
   };
 
-  this.selectHighlightedItem = function () {
-    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex);
+  this.selectHighlightedItem = function (otherStateToSet, cb) {
+    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex, otherStateToSet, cb);
   };
@@ -908,3 +935,5 @@
       var amount = event.shiftKey ? 5 : 1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowDown
+      });
     },
@@ -914,3 +943,5 @@ ArrowUp: function ArrowUp(event) {
       var amount = event.shiftKey ? -5 : -1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowUp
+      });
     },
@@ -920,3 +951,5 @@ Enter: function Enter(event) {
       if (this.getState().isOpen) {
-        this.selectHighlightedItem();
+        this.selectHighlightedItem({
+          type: Downshift$1.stateChangeTypes.keyDownEnter
+        });
       }
@@ -926,3 +959,3 @@ },
       event.preventDefault();
-      this.reset();
+      this.reset({ type: Downshift$1.stateChangeTypes.keyDownEscape });
     }
@@ -933,3 +966,3 @@ };
       event.preventDefault();
-      this.toggleMenu();
+      this.toggleMenu({ type: Downshift$1.stateChangeTypes.keyDownSpaceButton });
     }
@@ -966,3 +999,3 @@ });
     event.preventDefault();
-    _this5.toggleMenu();
+    _this5.toggleMenu({ type: Downshift$1.stateChangeTypes.clickButton });
   };
@@ -1025,3 +1058,7 @@
   this.input_handleChange = function (event) {
-    _this5.internalSetState({ isOpen: true, inputValue: event.target.value });
+    _this5.internalSetState({
+      type: Downshift$1.stateChangeTypes.changeInput,
+      isOpen: true,
+      inputValue: event.target.value
+    });
   };
@@ -1031,3 +1068,3 @@
     if (!_this5.isMouseDown) {
-      _this5.reset();
+      _this5.reset({ type: Downshift$1.stateChangeTypes.blurInput });
     }
@@ -1050,3 +1087,5 @@ };
       onMouseEnter: composeEventHandlers(onMouseEnter, function () {
-        _this5.setHighlightedIndex(index);
+        _this5.setHighlightedIndex(index, {
+          type: Downshift$1.stateChangeTypes.itemMouseEnter
+        });
       })
@@ -1056,23 +1095,24 @@ }, rest);
 
-  this.reset = function (type) {
+  this.reset = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref7) {
       var selectedItem = _ref7.selectedItem;
-      return {
-        type: type,
+      return _extends({
         isOpen: false,
         highlightedIndex: null,
         inputValue: _this5.props.itemToString(selectedItem)
-      };
-    });
+      }, otherStateToSet);
+    }, cbToCb(cb));
   };
 
-  this.toggleMenu = function (newState, cb) {
+  this.toggleMenu = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref8) {
       var isOpen = _ref8.isOpen;
 
-      var nextIsOpen = !isOpen;
-      if (typeof newState === 'boolean') {
-        nextIsOpen = newState;
-      }
-      return { isOpen: nextIsOpen };
+      return _extends({ isOpen: !isOpen }, otherStateToSet);
     }, function () {
@@ -1083,3 +1123,3 @@ var _getState5 = _this5.getState(),
       if (isOpen) {
-        _this5.setHighlightedIndex();
+        _this5.highlightDefaultIndex();
       }
@@ -1091,7 +1131,7 @@ cbToCb(cb)();
   this.openMenu = function (cb) {
-    _this5.toggleMenu(true, cb);
+    _this5.internalSetState({ isOpen: true }, cbToCb(cb));
   };
 
   this.closeMenu = function (cb) {
-    _this5.toggleMenu(false, cb);
+    _this5.internalSetState({ isOpen: false }, cbToCb(cb));
   };
@@ -1098,0 +1138,0 @@

dist/downshift.preact.cjs.js

@@ -423,3 +423,2 @@ 'use strict';
 
-    _this.id = generateId('downshift');
     var state = _this.getState({
@@ -435,3 +434,2 @@ highlightedIndex: _this.props.defaultHighlightedIndex,
     _this.state = state;
-    _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);
     return _this;
@@ -442,2 +440,8 @@ }
   // so we're not going to document this yet
+  // nor are we going to test it.
+  // We will try to avoid breaking it, but
+  // we make no guarantees.
+  // If you need it, we recommend that you lock
+  // down your version of downshift (don't use a
+  // version range) to avoid surprise breakages.
 
@@ -470,3 +474,3 @@
       return Object.keys(stateToMerge).reduce(function (state, key) {
-        state[key] = _this2.isStateProp(key) ? _this2.props[key] : stateToMerge[key];
+        state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
         return state;
@@ -485,4 +489,4 @@ }, {});
   }, {
-    key: 'isStateProp',
-    value: function isStateProp(key) {
+    key: 'isControlledProp',
+    value: function isControlledProp(key) {
       return this.props[key] !== undefined;
@@ -533,2 +537,7 @@ }
         Object.keys(stateToSet).forEach(function (key) {
+          // onStateChangeArg should only have the state that is
+          // actually changing
+          if (state[key] !== stateToSet[key]) {
+            onStateChangeArg[key] = stateToSet[key];
+          }
           // the type is useful for the onStateChangeArg
@@ -543,10 +552,5 @@ // but we don't actually want to set it in internal state.
           }
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== stateToSet[key]) {
-            onStateChangeArg[key] = stateToSet[key];
-          }
           nextFullState[key] = stateToSet[key];
           // if it's coming from props, then we don't care to set it internally
-          if (!_this3.isStateProp(key)) {
+          if (!_this3.isControlledProp(key)) {
             nextState[key] = stateToSet[key];
@@ -592,3 +596,4 @@ }
           setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection;
+          clearSelection = this.clearSelection,
+          reset = this.reset;
 
@@ -604,2 +609,3 @@ return {
         // actions
+        reset: reset,
         openMenu: openMenu,
@@ -676,3 +682,3 @@ closeMenu: closeMenu,
         if ((event.target === _this4._rootNode || !_this4._rootNode.contains(event.target)) && _this4.getState().isOpen) {
-          _this4.reset(Downshift.stateChangeTypes.mouseUp);
+          _this4.reset({ type: Downshift.stateChangeTypes.mouseUp });
         }
@@ -692,4 +698,5 @@ };
     value: function componentDidUpdate(prevProps) {
-      if (this.isStateProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
+      if (this.isControlledProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
         this.internalSetState({
+          type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
@@ -755,3 +762,13 @@ });
 Downshift$1.stateChangeTypes = {
-  mouseUp: '__autocomplete_mouseup__'
+  mouseUp: '__autocomplete_mouseup__',
+  itemMouseEnter: '__autocomplete_item_mouseenter__',
+  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+  keyDownEscape: '__autocomplete_keydown_escape__',
+  keyDownEnter: '__autocomplete_keydown_enter__',
+  blurInput: '__autocomplete_blur_input__',
+  changeInput: '__autocomplete_change_input__',
+  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+  clickButton: '__autocomplete_click_button__',
+  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__'
 };
@@ -762,2 +779,4 @@
 
+  this.id = generateId('downshift');
+  this.root_handleClick = composeEventHandlers(this.props.onClick, this.root_handleClick);
   this.input = null;
@@ -773,4 +792,5 @@ this.items = [];
     var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this5.props.defaultHighlightedIndex;
+    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _this5.internalSetState({ highlightedIndex: highlightedIndex }, function () {
+    _this5.internalSetState(_extends({ highlightedIndex: highlightedIndex }, otherStateToSet), function () {
       var node = _this5.getItemNodeFromIndex(_this5.getState().highlightedIndex);
@@ -782,17 +802,23 @@ var rootNode = _this5._rootNode;
 
-  this.highlightIndex = function (index) {
-    _this5.openMenu(function () {
-      _this5.setHighlightedIndex(index);
-    });
+  this.openAndHighlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, _extends({ isOpen: true }, otherStateToSet));
   };
 
-  this.moveHighlightedIndex = function (amount) {
+  this.highlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, otherStateToSet);
+  };
+
+  this.moveHighlightedIndex = function (amount, otherStateToSet) {
     if (_this5.getState().isOpen) {
-      _this5.changeHighlightedIndex(amount);
+      _this5.changeHighlightedIndex(amount, otherStateToSet);
     } else {
-      _this5.highlightIndex();
+      _this5.openAndHighlightDefaultIndex(otherStateToSet);
     }
   };
 
-  this.changeHighlightedIndex = function (moveAmount) {
+  this.changeHighlightedIndex = function (moveAmount, otherStateToSet) {
     var itemsLastIndex = _this5.getItemCount() - 1;
@@ -816,6 +842,6 @@ if (itemsLastIndex < 0) {
     }
-    _this5.setHighlightedIndex(newIndex);
+    _this5.setHighlightedIndex(newIndex, otherStateToSet);
   };
 
-  this.clearSelection = function () {
+  this.clearSelection = function (cb) {
     _this5.internalSetState({
@@ -828,7 +854,8 @@ selectedItem: null,
       inputNode && inputNode.focus && inputNode.focus();
+      cbToCb(cb)();
     });
   };
 
-  this.selectItem = function (item) {
-    _this5.internalSetState({
+  this.selectItem = function (item, otherStateToSet, cb) {
+    _this5.internalSetState(_extends({
       isOpen: false,
@@ -838,6 +865,6 @@ highlightedIndex: null,
       inputValue: _this5.props.itemToString(item)
-    });
+    }, otherStateToSet), cbToCb(cb));
   };
 
-  this.selectItemAtIndex = function (itemIndex) {
+  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
     var item = _this5.items[itemIndex];
@@ -847,7 +874,7 @@ if (!item) {
     }
-    _this5.selectItem(item);
+    _this5.selectItem(item, otherStateToSet, cb);
   };
 
-  this.selectHighlightedItem = function () {
-    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex);
+  this.selectHighlightedItem = function (otherStateToSet, cb) {
+    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex, otherStateToSet, cb);
   };
@@ -891,3 +918,5 @@
       var amount = event.shiftKey ? 5 : 1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowDown
+      });
     },
@@ -897,3 +926,5 @@ ArrowUp: function ArrowUp(event) {
       var amount = event.shiftKey ? -5 : -1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowUp
+      });
     },
@@ -903,3 +934,5 @@ Enter: function Enter(event) {
       if (this.getState().isOpen) {
-        this.selectHighlightedItem();
+        this.selectHighlightedItem({
+          type: Downshift$1.stateChangeTypes.keyDownEnter
+        });
       }
@@ -909,3 +942,3 @@ },
       event.preventDefault();
-      this.reset();
+      this.reset({ type: Downshift$1.stateChangeTypes.keyDownEscape });
     }
@@ -916,3 +949,3 @@ };
       event.preventDefault();
-      this.toggleMenu();
+      this.toggleMenu({ type: Downshift$1.stateChangeTypes.keyDownSpaceButton });
     }
@@ -949,3 +982,3 @@ });
     event.preventDefault();
-    _this5.toggleMenu();
+    _this5.toggleMenu({ type: Downshift$1.stateChangeTypes.clickButton });
   };
@@ -1008,3 +1041,7 @@
   this.input_handleChange = function (event) {
-    _this5.internalSetState({ isOpen: true, inputValue: event.target.value });
+    _this5.internalSetState({
+      type: Downshift$1.stateChangeTypes.changeInput,
+      isOpen: true,
+      inputValue: event.target.value
+    });
   };
@@ -1014,3 +1051,3 @@
     if (!_this5.isMouseDown) {
-      _this5.reset();
+      _this5.reset({ type: Downshift$1.stateChangeTypes.blurInput });
     }
@@ -1033,3 +1070,5 @@ };
       onMouseEnter: composeEventHandlers(onMouseEnter, function () {
-        _this5.setHighlightedIndex(index);
+        _this5.setHighlightedIndex(index, {
+          type: Downshift$1.stateChangeTypes.itemMouseEnter
+        });
       })
@@ -1039,23 +1078,24 @@ }, rest);
 
-  this.reset = function (type) {
+  this.reset = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref7) {
       var selectedItem = _ref7.selectedItem;
-      return {
-        type: type,
+      return _extends({
         isOpen: false,
         highlightedIndex: null,
         inputValue: _this5.props.itemToString(selectedItem)
-      };
-    });
+      }, otherStateToSet);
+    }, cbToCb(cb));
   };
 
-  this.toggleMenu = function (newState, cb) {
+  this.toggleMenu = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref8) {
       var isOpen = _ref8.isOpen;
 
-      var nextIsOpen = !isOpen;
-      if (typeof newState === 'boolean') {
-        nextIsOpen = newState;
-      }
-      return { isOpen: nextIsOpen };
+      return _extends({ isOpen: !isOpen }, otherStateToSet);
     }, function () {
@@ -1066,3 +1106,3 @@ var _getState5 = _this5.getState(),
       if (isOpen) {
-        _this5.setHighlightedIndex();
+        _this5.highlightDefaultIndex();
       }
@@ -1074,7 +1114,7 @@ cbToCb(cb)();
   this.openMenu = function (cb) {
-    _this5.toggleMenu(true, cb);
+    _this5.internalSetState({ isOpen: true }, cbToCb(cb));
   };
 
   this.closeMenu = function (cb) {
-    _this5.toggleMenu(false, cb);
+    _this5.internalSetState({ isOpen: false }, cbToCb(cb));
   };
@@ -1081,0 +1121,0 @@

dist/downshift.preact.es.js

@@ -418,3 +418,2 @@ import React, { Component } from 'preact';
 
-    _this.id = generateId('downshift');
     var state = _this.getState({
@@ -430,3 +429,2 @@ highlightedIndex: _this.props.defaultHighlightedIndex,
     _this.state = state;
-    _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);
     return _this;
@@ -437,2 +435,8 @@ }
   // so we're not going to document this yet
+  // nor are we going to test it.
+  // We will try to avoid breaking it, but
+  // we make no guarantees.
+  // If you need it, we recommend that you lock
+  // down your version of downshift (don't use a
+  // version range) to avoid surprise breakages.
 
@@ -465,3 +469,3 @@
       return Object.keys(stateToMerge).reduce(function (state, key) {
-        state[key] = _this2.isStateProp(key) ? _this2.props[key] : stateToMerge[key];
+        state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
         return state;
@@ -480,4 +484,4 @@ }, {});
   }, {
-    key: 'isStateProp',
-    value: function isStateProp(key) {
+    key: 'isControlledProp',
+    value: function isControlledProp(key) {
       return this.props[key] !== undefined;
@@ -528,2 +532,7 @@ }
         Object.keys(stateToSet).forEach(function (key) {
+          // onStateChangeArg should only have the state that is
+          // actually changing
+          if (state[key] !== stateToSet[key]) {
+            onStateChangeArg[key] = stateToSet[key];
+          }
           // the type is useful for the onStateChangeArg
@@ -538,10 +547,5 @@ // but we don't actually want to set it in internal state.
           }
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== stateToSet[key]) {
-            onStateChangeArg[key] = stateToSet[key];
-          }
           nextFullState[key] = stateToSet[key];
           // if it's coming from props, then we don't care to set it internally
-          if (!_this3.isStateProp(key)) {
+          if (!_this3.isControlledProp(key)) {
             nextState[key] = stateToSet[key];
@@ -587,3 +591,4 @@ }
           setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection;
+          clearSelection = this.clearSelection,
+          reset = this.reset;
 
@@ -599,2 +604,3 @@ return {
         // actions
+        reset: reset,
         openMenu: openMenu,
@@ -671,3 +677,3 @@ closeMenu: closeMenu,
         if ((event.target === _this4._rootNode || !_this4._rootNode.contains(event.target)) && _this4.getState().isOpen) {
-          _this4.reset(Downshift.stateChangeTypes.mouseUp);
+          _this4.reset({ type: Downshift.stateChangeTypes.mouseUp });
         }
@@ -687,4 +693,5 @@ };
     value: function componentDidUpdate(prevProps) {
-      if (this.isStateProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
+      if (this.isControlledProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
         this.internalSetState({
+          type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
@@ -750,3 +757,13 @@ });
 Downshift$1.stateChangeTypes = {
-  mouseUp: '__autocomplete_mouseup__'
+  mouseUp: '__autocomplete_mouseup__',
+  itemMouseEnter: '__autocomplete_item_mouseenter__',
+  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+  keyDownEscape: '__autocomplete_keydown_escape__',
+  keyDownEnter: '__autocomplete_keydown_enter__',
+  blurInput: '__autocomplete_blur_input__',
+  changeInput: '__autocomplete_change_input__',
+  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+  clickButton: '__autocomplete_click_button__',
+  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__'
 };
@@ -757,2 +774,4 @@
 
+  this.id = generateId('downshift');
+  this.root_handleClick = composeEventHandlers(this.props.onClick, this.root_handleClick);
   this.input = null;
@@ -768,4 +787,5 @@ this.items = [];
     var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this5.props.defaultHighlightedIndex;
+    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _this5.internalSetState({ highlightedIndex: highlightedIndex }, function () {
+    _this5.internalSetState(_extends({ highlightedIndex: highlightedIndex }, otherStateToSet), function () {
       var node = _this5.getItemNodeFromIndex(_this5.getState().highlightedIndex);
@@ -777,17 +797,23 @@ var rootNode = _this5._rootNode;
 
-  this.highlightIndex = function (index) {
-    _this5.openMenu(function () {
-      _this5.setHighlightedIndex(index);
-    });
+  this.openAndHighlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, _extends({ isOpen: true }, otherStateToSet));
   };
 
-  this.moveHighlightedIndex = function (amount) {
+  this.highlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, otherStateToSet);
+  };
+
+  this.moveHighlightedIndex = function (amount, otherStateToSet) {
     if (_this5.getState().isOpen) {
-      _this5.changeHighlightedIndex(amount);
+      _this5.changeHighlightedIndex(amount, otherStateToSet);
     } else {
-      _this5.highlightIndex();
+      _this5.openAndHighlightDefaultIndex(otherStateToSet);
     }
   };
 
-  this.changeHighlightedIndex = function (moveAmount) {
+  this.changeHighlightedIndex = function (moveAmount, otherStateToSet) {
     var itemsLastIndex = _this5.getItemCount() - 1;
@@ -811,6 +837,6 @@ if (itemsLastIndex < 0) {
     }
-    _this5.setHighlightedIndex(newIndex);
+    _this5.setHighlightedIndex(newIndex, otherStateToSet);
   };
 
-  this.clearSelection = function () {
+  this.clearSelection = function (cb) {
     _this5.internalSetState({
@@ -823,7 +849,8 @@ selectedItem: null,
       inputNode && inputNode.focus && inputNode.focus();
+      cbToCb(cb)();
     });
   };
 
-  this.selectItem = function (item) {
-    _this5.internalSetState({
+  this.selectItem = function (item, otherStateToSet, cb) {
+    _this5.internalSetState(_extends({
       isOpen: false,
@@ -833,6 +860,6 @@ highlightedIndex: null,
       inputValue: _this5.props.itemToString(item)
-    });
+    }, otherStateToSet), cbToCb(cb));
   };
 
-  this.selectItemAtIndex = function (itemIndex) {
+  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
     var item = _this5.items[itemIndex];
@@ -842,7 +869,7 @@ if (!item) {
     }
-    _this5.selectItem(item);
+    _this5.selectItem(item, otherStateToSet, cb);
   };
 
-  this.selectHighlightedItem = function () {
-    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex);
+  this.selectHighlightedItem = function (otherStateToSet, cb) {
+    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex, otherStateToSet, cb);
   };
@@ -886,3 +913,5 @@
       var amount = event.shiftKey ? 5 : 1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowDown
+      });
     },
@@ -892,3 +921,5 @@ ArrowUp: function ArrowUp(event) {
       var amount = event.shiftKey ? -5 : -1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowUp
+      });
     },
@@ -898,3 +929,5 @@ Enter: function Enter(event) {
       if (this.getState().isOpen) {
-        this.selectHighlightedItem();
+        this.selectHighlightedItem({
+          type: Downshift$1.stateChangeTypes.keyDownEnter
+        });
       }
@@ -904,3 +937,3 @@ },
       event.preventDefault();
-      this.reset();
+      this.reset({ type: Downshift$1.stateChangeTypes.keyDownEscape });
     }
@@ -911,3 +944,3 @@ };
       event.preventDefault();
-      this.toggleMenu();
+      this.toggleMenu({ type: Downshift$1.stateChangeTypes.keyDownSpaceButton });
     }
@@ -944,3 +977,3 @@ });
     event.preventDefault();
-    _this5.toggleMenu();
+    _this5.toggleMenu({ type: Downshift$1.stateChangeTypes.clickButton });
   };
@@ -1003,3 +1036,7 @@
   this.input_handleChange = function (event) {
-    _this5.internalSetState({ isOpen: true, inputValue: event.target.value });
+    _this5.internalSetState({
+      type: Downshift$1.stateChangeTypes.changeInput,
+      isOpen: true,
+      inputValue: event.target.value
+    });
   };
@@ -1009,3 +1046,3 @@
     if (!_this5.isMouseDown) {
-      _this5.reset();
+      _this5.reset({ type: Downshift$1.stateChangeTypes.blurInput });
     }
@@ -1028,3 +1065,5 @@ };
       onMouseEnter: composeEventHandlers(onMouseEnter, function () {
-        _this5.setHighlightedIndex(index);
+        _this5.setHighlightedIndex(index, {
+          type: Downshift$1.stateChangeTypes.itemMouseEnter
+        });
       })
@@ -1034,23 +1073,24 @@ }, rest);
 
-  this.reset = function (type) {
+  this.reset = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref7) {
       var selectedItem = _ref7.selectedItem;
-      return {
-        type: type,
+      return _extends({
         isOpen: false,
         highlightedIndex: null,
         inputValue: _this5.props.itemToString(selectedItem)
-      };
-    });
+      }, otherStateToSet);
+    }, cbToCb(cb));
   };
 
-  this.toggleMenu = function (newState, cb) {
+  this.toggleMenu = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref8) {
       var isOpen = _ref8.isOpen;
 
-      var nextIsOpen = !isOpen;
-      if (typeof newState === 'boolean') {
-        nextIsOpen = newState;
-      }
-      return { isOpen: nextIsOpen };
+      return _extends({ isOpen: !isOpen }, otherStateToSet);
     }, function () {
@@ -1061,3 +1101,3 @@ var _getState5 = _this5.getState(),
       if (isOpen) {
-        _this5.setHighlightedIndex();
+        _this5.highlightDefaultIndex();
       }
@@ -1069,7 +1109,7 @@ cbToCb(cb)();
   this.openMenu = function (cb) {
-    _this5.toggleMenu(true, cb);
+    _this5.internalSetState({ isOpen: true }, cbToCb(cb));
   };
 
   this.closeMenu = function (cb) {
-    _this5.toggleMenu(false, cb);
+    _this5.internalSetState({ isOpen: false }, cbToCb(cb));
   };
@@ -1076,0 +1116,0 @@

dist/downshift.preact.umd.js

@@ -424,3 +424,2 @@ (function (global, factory) {
 
-    _this.id = generateId('downshift');
     var state = _this.getState({
@@ -436,3 +435,2 @@ highlightedIndex: _this.props.defaultHighlightedIndex,
     _this.state = state;
-    _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);
     return _this;
@@ -443,2 +441,8 @@ }
   // so we're not going to document this yet
+  // nor are we going to test it.
+  // We will try to avoid breaking it, but
+  // we make no guarantees.
+  // If you need it, we recommend that you lock
+  // down your version of downshift (don't use a
+  // version range) to avoid surprise breakages.
 
@@ -471,3 +475,3 @@
       return Object.keys(stateToMerge).reduce(function (state, key) {
-        state[key] = _this2.isStateProp(key) ? _this2.props[key] : stateToMerge[key];
+        state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
         return state;
@@ -486,4 +490,4 @@ }, {});
   }, {
-    key: 'isStateProp',
-    value: function isStateProp(key) {
+    key: 'isControlledProp',
+    value: function isControlledProp(key) {
       return this.props[key] !== undefined;
@@ -534,2 +538,7 @@ }
         Object.keys(stateToSet).forEach(function (key) {
+          // onStateChangeArg should only have the state that is
+          // actually changing
+          if (state[key] !== stateToSet[key]) {
+            onStateChangeArg[key] = stateToSet[key];
+          }
           // the type is useful for the onStateChangeArg
@@ -544,10 +553,5 @@ // but we don't actually want to set it in internal state.
           }
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== stateToSet[key]) {
-            onStateChangeArg[key] = stateToSet[key];
-          }
           nextFullState[key] = stateToSet[key];
           // if it's coming from props, then we don't care to set it internally
-          if (!_this3.isStateProp(key)) {
+          if (!_this3.isControlledProp(key)) {
             nextState[key] = stateToSet[key];
@@ -593,3 +597,4 @@ }
           setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection;
+          clearSelection = this.clearSelection,
+          reset = this.reset;
 
@@ -605,2 +610,3 @@ return {
         // actions
+        reset: reset,
         openMenu: openMenu,
@@ -677,3 +683,3 @@ closeMenu: closeMenu,
         if ((event.target === _this4._rootNode || !_this4._rootNode.contains(event.target)) && _this4.getState().isOpen) {
-          _this4.reset(Downshift.stateChangeTypes.mouseUp);
+          _this4.reset({ type: Downshift.stateChangeTypes.mouseUp });
         }
@@ -693,4 +699,5 @@ };
     value: function componentDidUpdate(prevProps) {
-      if (this.isStateProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
+      if (this.isControlledProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
         this.internalSetState({
+          type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
@@ -756,3 +763,13 @@ });
 Downshift$1.stateChangeTypes = {
-  mouseUp: '__autocomplete_mouseup__'
+  mouseUp: '__autocomplete_mouseup__',
+  itemMouseEnter: '__autocomplete_item_mouseenter__',
+  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+  keyDownEscape: '__autocomplete_keydown_escape__',
+  keyDownEnter: '__autocomplete_keydown_enter__',
+  blurInput: '__autocomplete_blur_input__',
+  changeInput: '__autocomplete_change_input__',
+  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+  clickButton: '__autocomplete_click_button__',
+  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__'
 };
@@ -763,2 +780,4 @@
 
+  this.id = generateId('downshift');
+  this.root_handleClick = composeEventHandlers(this.props.onClick, this.root_handleClick);
   this.input = null;
@@ -774,4 +793,5 @@ this.items = [];
     var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this5.props.defaultHighlightedIndex;
+    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _this5.internalSetState({ highlightedIndex: highlightedIndex }, function () {
+    _this5.internalSetState(_extends({ highlightedIndex: highlightedIndex }, otherStateToSet), function () {
       var node = _this5.getItemNodeFromIndex(_this5.getState().highlightedIndex);
@@ -783,17 +803,23 @@ var rootNode = _this5._rootNode;
 
-  this.highlightIndex = function (index) {
-    _this5.openMenu(function () {
-      _this5.setHighlightedIndex(index);
-    });
+  this.openAndHighlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, _extends({ isOpen: true }, otherStateToSet));
   };
 
-  this.moveHighlightedIndex = function (amount) {
+  this.highlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, otherStateToSet);
+  };
+
+  this.moveHighlightedIndex = function (amount, otherStateToSet) {
     if (_this5.getState().isOpen) {
-      _this5.changeHighlightedIndex(amount);
+      _this5.changeHighlightedIndex(amount, otherStateToSet);
     } else {
-      _this5.highlightIndex();
+      _this5.openAndHighlightDefaultIndex(otherStateToSet);
     }
   };
 
-  this.changeHighlightedIndex = function (moveAmount) {
+  this.changeHighlightedIndex = function (moveAmount, otherStateToSet) {
     var itemsLastIndex = _this5.getItemCount() - 1;
@@ -817,6 +843,6 @@ if (itemsLastIndex < 0) {
     }
-    _this5.setHighlightedIndex(newIndex);
+    _this5.setHighlightedIndex(newIndex, otherStateToSet);
   };
 
-  this.clearSelection = function () {
+  this.clearSelection = function (cb) {
     _this5.internalSetState({
@@ -829,7 +855,8 @@ selectedItem: null,
       inputNode && inputNode.focus && inputNode.focus();
+      cbToCb(cb)();
     });
   };
 
-  this.selectItem = function (item) {
-    _this5.internalSetState({
+  this.selectItem = function (item, otherStateToSet, cb) {
+    _this5.internalSetState(_extends({
       isOpen: false,
@@ -839,6 +866,6 @@ highlightedIndex: null,
       inputValue: _this5.props.itemToString(item)
-    });
+    }, otherStateToSet), cbToCb(cb));
   };
 
-  this.selectItemAtIndex = function (itemIndex) {
+  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
     var item = _this5.items[itemIndex];
@@ -848,7 +875,7 @@ if (!item) {
     }
-    _this5.selectItem(item);
+    _this5.selectItem(item, otherStateToSet, cb);
   };
 
-  this.selectHighlightedItem = function () {
-    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex);
+  this.selectHighlightedItem = function (otherStateToSet, cb) {
+    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex, otherStateToSet, cb);
   };
@@ -892,3 +919,5 @@
       var amount = event.shiftKey ? 5 : 1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowDown
+      });
     },
@@ -898,3 +927,5 @@ ArrowUp: function ArrowUp(event) {
       var amount = event.shiftKey ? -5 : -1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowUp
+      });
     },
@@ -904,3 +935,5 @@ Enter: function Enter(event) {
       if (this.getState().isOpen) {
-        this.selectHighlightedItem();
+        this.selectHighlightedItem({
+          type: Downshift$1.stateChangeTypes.keyDownEnter
+        });
       }
@@ -910,3 +943,3 @@ },
       event.preventDefault();
-      this.reset();
+      this.reset({ type: Downshift$1.stateChangeTypes.keyDownEscape });
     }
@@ -917,3 +950,3 @@ };
       event.preventDefault();
-      this.toggleMenu();
+      this.toggleMenu({ type: Downshift$1.stateChangeTypes.keyDownSpaceButton });
     }
@@ -950,3 +983,3 @@ });
     event.preventDefault();
-    _this5.toggleMenu();
+    _this5.toggleMenu({ type: Downshift$1.stateChangeTypes.clickButton });
   };
@@ -1009,3 +1042,7 @@
   this.input_handleChange = function (event) {
-    _this5.internalSetState({ isOpen: true, inputValue: event.target.value });
+    _this5.internalSetState({
+      type: Downshift$1.stateChangeTypes.changeInput,
+      isOpen: true,
+      inputValue: event.target.value
+    });
   };
@@ -1015,3 +1052,3 @@
     if (!_this5.isMouseDown) {
-      _this5.reset();
+      _this5.reset({ type: Downshift$1.stateChangeTypes.blurInput });
     }
@@ -1034,3 +1071,5 @@ };
       onMouseEnter: composeEventHandlers(onMouseEnter, function () {
-        _this5.setHighlightedIndex(index);
+        _this5.setHighlightedIndex(index, {
+          type: Downshift$1.stateChangeTypes.itemMouseEnter
+        });
       })
@@ -1040,23 +1079,24 @@ }, rest);
 
-  this.reset = function (type) {
+  this.reset = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref7) {
       var selectedItem = _ref7.selectedItem;
-      return {
-        type: type,
+      return _extends({
         isOpen: false,
         highlightedIndex: null,
         inputValue: _this5.props.itemToString(selectedItem)
-      };
-    });
+      }, otherStateToSet);
+    }, cbToCb(cb));
   };
 
-  this.toggleMenu = function (newState, cb) {
+  this.toggleMenu = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref8) {
       var isOpen = _ref8.isOpen;
 
-      var nextIsOpen = !isOpen;
-      if (typeof newState === 'boolean') {
-        nextIsOpen = newState;
-      }
-      return { isOpen: nextIsOpen };
+      return _extends({ isOpen: !isOpen }, otherStateToSet);
     }, function () {
@@ -1067,3 +1107,3 @@ var _getState5 = _this5.getState(),
       if (isOpen) {
-        _this5.setHighlightedIndex();
+        _this5.highlightDefaultIndex();
       }
@@ -1075,7 +1115,7 @@ cbToCb(cb)();
   this.openMenu = function (cb) {
-    _this5.toggleMenu(true, cb);
+    _this5.internalSetState({ isOpen: true }, cbToCb(cb));
   };
 
   this.closeMenu = function (cb) {
-    _this5.toggleMenu(false, cb);
+    _this5.internalSetState({ isOpen: false }, cbToCb(cb));
   };
@@ -1082,0 +1122,0 @@

dist/downshift.preact.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("preact")):"function"==typeof define&&define.amd?define(["preact"],t):e.Downshift=t(e.React)}(this,function(e){"use strict";function t(e){var t=_[_.length-1]===e;_=t?[].concat(O(_),[e]):[e],o().innerHTML=""+_.filter(Boolean).map(n).join("")}function n(e,t){return'<div style="display:'+(t===_.length-1?"block":"none")+';">'+e+"</div>"}function o(){return k||((k=document.createElement("div")).setAttribute("id","a11y-status-message"),k.setAttribute("role","status"),k.setAttribute("aria-live","assertive"),k.setAttribute("aria-relevant","additions text"),Object.assign(k.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(k),k)}function i(e){return"function"==typeof e?e:r}function r(){}function u(e,t,n){return null!==t&&t!==n.parentNode?e(t)?t:u(e,t.parentNode,n):null}function l(e,t){var n=H(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=parseInt(o.borderBottomWidth,10),l=i.top+r,s=e.getBoundingClientRect(),a=s.top+n.scrollTop-l;a<n.scrollTop?n.scrollTop=a:a+s.height+r+u>n.scrollTop+i.height&&(n.scrollTop=a+s.height-i.height+r+u)}}function s(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function a(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function d(e){return e+"-"+D++}function h(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}function p(e){return e===e&&"number"==typeof e}function c(e,t){return!(e=Array.isArray(e)?e[0]:e)&&t?t:e}function f(e){return e.nodeName?"string"==typeof e.nodeName:"string"==typeof e.type}function g(e){return e.props||e.attributes}function m(e,t){throw new Error('The property "'+t+'" is required in "'+e+'"')}function y(e,t){var n=t.refKey,o="ref"!==n,i=!f(e);if(i&&!o)throw new Error("downshift: You returned a non-DOM element. You must specify a refKey in getRootProps");if(!i&&o)throw new Error('downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "'+n+'"');if(!g(e).hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!g(e).hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var I="default"in e?e.default:e,v=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},w=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),b=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},x=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},P=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},C=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},O=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},k="undefined"==typeof document?null:document.getElementById("a11y-status-message"),_=[],D=1,H=u.bind(null,function(e){return e.scrollHeight>e.clientHeight}),M=function(e){function t(){var e;v(this,t);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=C(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));A.call(r),r.id=d("downshift");var u=r.getState({highlightedIndex:r.props.defaultHighlightedIndex,isOpen:r.props.defaultIsOpen,inputValue:r.props.defaultInputValue,selectedItem:r.props.defaultSelectedItem});return u.selectedItem&&(u.inputValue=r.props.itemToString(u.selectedItem)),r.state=u,r.root_handleClick=a(r.props.onClick,r.root_handleClick),r}return x(t,e),w(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(n,o){return n[o]=e.isStateProp(o)?e.props[o]:t[o],n},{})}},{key:"isStateProp",value:function(e){return void 0!==this.props[e]}},{key:"getItemCount",value:function(){return void 0===this.props.itemCount?this.items.length:this.props.itemCount}},{key:"internalSetState",value:function(e,t){var n=this,o=void 0,r={};return this.setState(function(t){t=n.getState(t);var i={},u={};return(e="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&e.selectedItem!==t.selectedItem&&(o=e.selectedItem),Object.keys(e).forEach(function(o){"type"!==o&&(t[o]!==e[o]&&(r[o]=e[o]),u[o]=e[o],n.isStateProp(o)||(i[o]=e[o]))}),i},function(){i(t)(),Object.keys(r).length&&n.props.onStateChange(r,n.getState()),void 0!==o&&n.props.onChange(o,n.getState())})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen,r=this.props.itemToString;return{getRootProps:this.getRootProps,getButtonProps:this.getButtonProps,getLabelProps:this.getLabelProps,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,itemToString:r,highlightedIndex:t,inputValue:n,isOpen:i,selectedItem:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1,n.target!==e._rootNode&&e._rootNode.contains(n.target)||!e.getState().isOpen||e.reset(t.stateChangeTypes.mouseUp)};window.addEventListener("mousedown",n),window.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,window.removeEventListener("mousedown",n),window.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(e){this.isStateProp("selectedItem")&&this.props.selectedItem!==e.selectedItem&&this.internalSetState({inputValue:this.props.itemToString(this.props.selectedItem)}),this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=c(this.props.children,r);this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=c(e(this.getControllerStateAndHelpers()));if(!t)return null;if(this.getRootProps.called)return y(t,this.getRootProps),t;if(f(t))return I.cloneElement(t,this.getRootProps(g(t)));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);M.defaultProps={defaultHighlightedIndex:null,defaultSelectedItem:null,defaultInputValue:"",defaultIsOpen:!1,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedItem,o=e.selectedItem,i=e.resultCount,r=e.previousResultCount,u=e.itemToString;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},itemToString:function(e){return null==e?"":String(e)},onStateChange:function(){},onChange:function(){}},M.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"};var A=function(){var e=this;this.input=null,this.items=[],this.previousResultCount=0,this.getItemNodeFromIndex=function(t){return document.getElementById(e.getItemId(t))},this.setHighlightedIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e.props.defaultHighlightedIndex;e.internalSetState({highlightedIndex:t},function(){l(e.getItemNodeFromIndex(e.getState().highlightedIndex),e._rootNode)})},this.highlightIndex=function(t){e.openMenu(function(){e.setHighlightedIndex(t)})},this.moveHighlightedIndex=function(t){e.getState().isOpen?e.changeHighlightedIndex(t):e.highlightIndex()},this.changeHighlightedIndex=function(t){var n=e.getItemCount()-1;if(!(n<0)){var o=e.getState().highlightedIndex;null===o&&(o=t>0?-1:n+1);var i=o+t;i<0?i=n:i>n&&(i=0),e.setHighlightedIndex(i)}},this.clearSelection=function(){e.internalSetState({selectedItem:null,inputValue:"",isOpen:!1},function(){var t=e._rootNode.querySelector("#"+e.inputId);t&&t.focus&&t.focus()})},this.selectItem=function(t){e.internalSetState({isOpen:!1,highlightedIndex:null,selectedItem:t,inputValue:e.props.itemToString(t)})},this.selectItemAtIndex=function(t){var n=e.items[t];n&&e.selectItem(n)},this.selectHighlightedItem=function(){return e.selectItemAtIndex(e.getState().highlightedIndex)},this.rootRef=function(t){return e._rootNode=t},this.getRootProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.refKey,i=void 0===o?"ref":o,r=n.onClick,u=P(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,S((t={},b(t,i,e.rootRef),b(t,"onClick",a(r,e.root_handleClick)),t),u)},this.root_handleClick=function(t){t.preventDefault();var n=u(function(t){return p(e.getItemIndexFromId(t.getAttribute("id")))},t.target,e._rootNode);n&&e.selectItemAtIndex(e.getItemIndexFromId(n.getAttribute("id")))},this.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t)},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t)},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem()},Escape:function(e){e.preventDefault(),this.reset()}},this.buttonKeyDownHandlers=S({},this.keyDownHandlers,{" ":function(e){e.preventDefault(),this.toggleMenu()}}),this.getButtonProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onClick,o=t.onKeyDown,i=P(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return S({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:a(n,e.button_handleClick),onKeyDown:a(o,e.button_handleKeyDown)},i)},this.button_handleKeyDown=function(t){e.buttonKeyDownHandlers[t.key]&&e.buttonKeyDownHandlers[t.key].call(e,t)},this.button_handleClick=function(t){t.preventDefault(),e.toggleMenu()},this.getLabelProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e.getLabelProps.called=!0,e.getInputProps.called&&t.htmlFor&&t.htmlFor!==e.inputId)throw new Error('downshift: You provided the htmlFor of "'+t.htmlFor+'" for your label, but the id of your input is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return e.inputId=h(e.inputId,t.htmlFor,d("downshift-input")),S({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.onKeyDown,i=n.onBlur,r=n.onChange,u=n.onInput,l=P(n,["onKeyDown","onBlur","onChange","onInput"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&l.id&&l.id!==e.inputId)throw new Error('downshift: You provided the id of "'+l.id+'" for your input, but the htmlFor of your label is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');e.inputId=h(e.inputId,l.id,d("downshift-input"));var s=e.getState(),p=s.inputValue,c=s.isOpen,f=s.highlightedIndex;return S((t={role:"combobox","aria-autocomplete":"list","aria-expanded":c,"aria-activedescendant":"number"==typeof f&&f>=0?e.getItemId(f):null,autoComplete:"off",value:p},b(t,"onInput",a(r,u,e.input_handleChange)),b(t,"onKeyDown",a(o,e.input_handleKeyDown)),b(t,"onBlur",a(i,e.input_handleBlur)),t),l,{id:e.inputId})},this.input_handleKeyDown=function(t){t.key&&e.keyDownHandlers[t.key]&&e.keyDownHandlers[t.key].call(e,t)},this.input_handleChange=function(t){e.internalSetState({isOpen:!0,inputValue:t.target.value})},this.input_handleBlur=function(){e.isMouseDown||e.reset()},this.getItemProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onMouseEnter,o=t.item,i=void 0===o?m("getItemProps","item"):o,r=t.index,u=void 0===r?m("getItemProps","index"):r,l=P(t,["onMouseEnter","item","index"]);return e.items[u]=i,S({id:e.getItemId(u),onMouseEnter:a(n,function(){e.setHighlightedIndex(u)})},l)},this.reset=function(t){e.internalSetState(function(n){var o=n.selectedItem;return{type:t,isOpen:!1,highlightedIndex:null,inputValue:e.props.itemToString(o)}})},this.toggleMenu=function(t,n){e.internalSetState(function(e){var n=!e.isOpen;return"boolean"==typeof t&&(n=t),{isOpen:n}},function(){e.getState().isOpen&&e.setHighlightedIndex(),i(n)()})},this.openMenu=function(t){e.toggleMenu(!0,t)},this.closeMenu=function(t){e.toggleMenu(!1,t)},this.updateStatus=s(function(){if(e._isMounted){var n=e.getState(),o=e.items[n.highlightedIndex]||{},i=e.getItemCount(),r=e.props.getA11yStatusMessage(S({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},n));e.previousResultCount=i,t(r)}},200)};return M.default=M,M});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("preact")):"function"==typeof define&&define.amd?define(["preact"],t):e.Downshift=t(e.React)}(this,function(e){"use strict";function t(e){var t=D[D.length-1]===e;D=t?[].concat(x(D),[e]):[e],o().innerHTML=""+D.filter(Boolean).map(n).join("")}function n(e,t){return'<div style="display:'+(t===D.length-1?"block":"none")+';">'+e+"</div>"}function o(){return P||((P=document.createElement("div")).setAttribute("id","a11y-status-message"),P.setAttribute("role","status"),P.setAttribute("aria-live","assertive"),P.setAttribute("aria-relevant","additions text"),Object.assign(P.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(P),P)}function i(e){return"function"==typeof e?e:r}function r(){}function u(e,t,n){return null!==t&&t!==n.parentNode?e(t)?t:u(e,t.parentNode,n):null}function l(e,t){var n=A(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=parseInt(o.borderBottomWidth,10),l=i.top+r,s=e.getBoundingClientRect(),a=s.top+n.scrollTop-l;a<n.scrollTop?n.scrollTop=a:a+s.height+r+u>n.scrollTop+i.height&&(n.scrollTop=a+s.height-i.height+r+u)}}function s(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function a(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function p(e){return e+"-"+O++}function d(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}function h(e){return e===e&&"number"==typeof e}function c(e,t){return!(e=Array.isArray(e)?e[0]:e)&&t?t:e}function g(e){return e.nodeName?"string"==typeof e.nodeName:"string"==typeof e.type}function f(e){return e.props||e.attributes}function m(e,t){throw new Error('The property "'+t+'" is required in "'+e+'"')}function y(e,t){var n=t.refKey,o="ref"!==n,i=!g(e);if(i&&!o)throw new Error("downshift: You returned a non-DOM element. You must specify a refKey in getRootProps");if(!i&&o)throw new Error('downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "'+n+'"');if(!f(e).hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!f(e).hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var v="default"in e?e.default:e,I=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},w=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),_=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},S=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},C=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},k=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},x=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},P="undefined"==typeof document?null:document.getElementById("a11y-status-message"),D=[],O=1,A=u.bind(null,function(e){return e.scrollHeight>e.clientHeight}),T=function(e){function t(){var e;I(this,t);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=k(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));H.call(r);var u=r.getState({highlightedIndex:r.props.defaultHighlightedIndex,isOpen:r.props.defaultIsOpen,inputValue:r.props.defaultInputValue,selectedItem:r.props.defaultSelectedItem});return u.selectedItem&&(u.inputValue=r.props.itemToString(u.selectedItem)),r.state=u,r}return S(t,e),w(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(n,o){return n[o]=e.isControlledProp(o)?e.props[o]:t[o],n},{})}},{key:"isControlledProp",value:function(e){return void 0!==this.props[e]}},{key:"getItemCount",value:function(){return void 0===this.props.itemCount?this.items.length:this.props.itemCount}},{key:"internalSetState",value:function(e,t){var n=this,o=void 0,r={};return this.setState(function(t){t=n.getState(t);var i={},u={};return(e="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&e.selectedItem!==t.selectedItem&&(o=e.selectedItem),Object.keys(e).forEach(function(o){t[o]!==e[o]&&(r[o]=e[o]),"type"!==o&&(u[o]=e[o],n.isControlledProp(o)||(i[o]=e[o]))}),i},function(){i(t)(),Object.keys(r).length&&n.props.onStateChange(r,n.getState()),void 0!==o&&n.props.onChange(o,n.getState())})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen,r=this.props.itemToString,u=this.getRootProps,l=this.getButtonProps,s=this.getLabelProps,a=this.getInputProps,p=this.getItemProps,d=this.openMenu,h=this.closeMenu,c=this.toggleMenu,g=this.selectItem,f=this.selectItemAtIndex,m=this.selectHighlightedItem,y=this.setHighlightedIndex,v=this.clearSelection;return{getRootProps:u,getButtonProps:l,getLabelProps:s,getInputProps:a,getItemProps:p,reset:this.reset,openMenu:d,closeMenu:h,toggleMenu:c,selectItem:g,selectItemAtIndex:f,selectHighlightedItem:m,setHighlightedIndex:y,clearSelection:v,itemToString:r,highlightedIndex:t,inputValue:n,isOpen:i,selectedItem:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1,n.target!==e._rootNode&&e._rootNode.contains(n.target)||!e.getState().isOpen||e.reset({type:t.stateChangeTypes.mouseUp})};window.addEventListener("mousedown",n),window.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,window.removeEventListener("mousedown",n),window.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(e){this.isControlledProp("selectedItem")&&this.props.selectedItem!==e.selectedItem&&this.internalSetState({type:t.stateChangeTypes.controlledPropUpdatedSelectedItem,inputValue:this.props.itemToString(this.props.selectedItem)}),this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=c(this.props.children,r);this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=c(e(this.getControllerStateAndHelpers()));if(!t)return null;if(this.getRootProps.called)return y(t,this.getRootProps),t;if(g(t))return v.cloneElement(t,this.getRootProps(f(t)));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);T.defaultProps={defaultHighlightedIndex:null,defaultSelectedItem:null,defaultInputValue:"",defaultIsOpen:!1,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedItem,o=e.selectedItem,i=e.resultCount,r=e.previousResultCount,u=e.itemToString;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},itemToString:function(e){return null==e?"":String(e)},onStateChange:function(){},onChange:function(){}},T.stateChangeTypes={mouseUp:"__autocomplete_mouseup__",itemMouseEnter:"__autocomplete_item_mouseenter__",keyDownArrowUp:"__autocomplete_keydown_arrow_up__",keyDownArrowDown:"__autocomplete_keydown_arrow_down__",keyDownEscape:"__autocomplete_keydown_escape__",keyDownEnter:"__autocomplete_keydown_enter__",blurInput:"__autocomplete_blur_input__",changeInput:"__autocomplete_change_input__",keyDownSpaceButton:"__autocomplete_keydown_space_button__",clickButton:"__autocomplete_click_button__",controlledPropUpdatedSelectedItem:"__autocomplete_controlled_prop_updated_selected_item__"};var H=function(){var e=this;this.id=p("downshift"),this.root_handleClick=a(this.props.onClick,this.root_handleClick),this.input=null,this.items=[],this.previousResultCount=0,this.getItemNodeFromIndex=function(t){return document.getElementById(e.getItemId(t))},this.setHighlightedIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e.props.defaultHighlightedIndex,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.internalSetState(b({highlightedIndex:t},n),function(){l(e.getItemNodeFromIndex(e.getState().highlightedIndex),e._rootNode)})},this.openAndHighlightDefaultIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};e.setHighlightedIndex(void 0,b({isOpen:!0},t))},this.highlightDefaultIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};e.setHighlightedIndex(void 0,t)},this.moveHighlightedIndex=function(t,n){e.getState().isOpen?e.changeHighlightedIndex(t,n):e.openAndHighlightDefaultIndex(n)},this.changeHighlightedIndex=function(t,n){var o=e.getItemCount()-1;if(!(o<0)){var i=e.getState().highlightedIndex;null===i&&(i=t>0?-1:o+1);var r=i+t;r<0?r=o:r>o&&(r=0),e.setHighlightedIndex(r,n)}},this.clearSelection=function(t){e.internalSetState({selectedItem:null,inputValue:"",isOpen:!1},function(){var n=e._rootNode.querySelector("#"+e.inputId);n&&n.focus&&n.focus(),i(t)()})},this.selectItem=function(t,n,o){e.internalSetState(b({isOpen:!1,highlightedIndex:null,selectedItem:t,inputValue:e.props.itemToString(t)},n),i(o))},this.selectItemAtIndex=function(t,n,o){var i=e.items[t];i&&e.selectItem(i,n,o)},this.selectHighlightedItem=function(t,n){return e.selectItemAtIndex(e.getState().highlightedIndex,t,n)},this.rootRef=function(t){return e._rootNode=t},this.getRootProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.refKey,i=void 0===o?"ref":o,r=n.onClick,u=C(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,b((t={},_(t,i,e.rootRef),_(t,"onClick",a(r,e.root_handleClick)),t),u)},this.root_handleClick=function(t){t.preventDefault();var n=u(function(t){return h(e.getItemIndexFromId(t.getAttribute("id")))},t.target,e._rootNode);n&&e.selectItemAtIndex(e.getItemIndexFromId(n.getAttribute("id")))},this.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t,{type:T.stateChangeTypes.keyDownArrowDown})},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t,{type:T.stateChangeTypes.keyDownArrowUp})},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem({type:T.stateChangeTypes.keyDownEnter})},Escape:function(e){e.preventDefault(),this.reset({type:T.stateChangeTypes.keyDownEscape})}},this.buttonKeyDownHandlers=b({},this.keyDownHandlers,{" ":function(e){e.preventDefault(),this.toggleMenu({type:T.stateChangeTypes.keyDownSpaceButton})}}),this.getButtonProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onClick,o=t.onKeyDown,i=C(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return b({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:a(n,e.button_handleClick),onKeyDown:a(o,e.button_handleKeyDown)},i)},this.button_handleKeyDown=function(t){e.buttonKeyDownHandlers[t.key]&&e.buttonKeyDownHandlers[t.key].call(e,t)},this.button_handleClick=function(t){t.preventDefault(),e.toggleMenu({type:T.stateChangeTypes.clickButton})},this.getLabelProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e.getLabelProps.called=!0,e.getInputProps.called&&t.htmlFor&&t.htmlFor!==e.inputId)throw new Error('downshift: You provided the htmlFor of "'+t.htmlFor+'" for your label, but the id of your input is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return e.inputId=d(e.inputId,t.htmlFor,p("downshift-input")),b({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.onKeyDown,i=n.onBlur,r=n.onChange,u=n.onInput,l=C(n,["onKeyDown","onBlur","onChange","onInput"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&l.id&&l.id!==e.inputId)throw new Error('downshift: You provided the id of "'+l.id+'" for your input, but the htmlFor of your label is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');e.inputId=d(e.inputId,l.id,p("downshift-input"));var s=e.getState(),h=s.inputValue,c=s.isOpen,g=s.highlightedIndex;return b((t={role:"combobox","aria-autocomplete":"list","aria-expanded":c,"aria-activedescendant":"number"==typeof g&&g>=0?e.getItemId(g):null,autoComplete:"off",value:h},_(t,"onInput",a(r,u,e.input_handleChange)),_(t,"onKeyDown",a(o,e.input_handleKeyDown)),_(t,"onBlur",a(i,e.input_handleBlur)),t),l,{id:e.inputId})},this.input_handleKeyDown=function(t){t.key&&e.keyDownHandlers[t.key]&&e.keyDownHandlers[t.key].call(e,t)},this.input_handleChange=function(t){e.internalSetState({type:T.stateChangeTypes.changeInput,isOpen:!0,inputValue:t.target.value})},this.input_handleBlur=function(){e.isMouseDown||e.reset({type:T.stateChangeTypes.blurInput})},this.getItemProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onMouseEnter,o=t.item,i=void 0===o?m("getItemProps","item"):o,r=t.index,u=void 0===r?m("getItemProps","index"):r,l=C(t,["onMouseEnter","item","index"]);return e.items[u]=i,b({id:e.getItemId(u),onMouseEnter:a(n,function(){e.setHighlightedIndex(u,{type:T.stateChangeTypes.itemMouseEnter})})},l)},this.reset=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments[1];e.internalSetState(function(n){var o=n.selectedItem;return b({isOpen:!1,highlightedIndex:null,inputValue:e.props.itemToString(o)},t)},i(n))},this.toggleMenu=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments[1];e.internalSetState(function(e){var n=e.isOpen;return b({isOpen:!n},t)},function(){e.getState().isOpen&&e.highlightDefaultIndex(),i(n)()})},this.openMenu=function(t){e.internalSetState({isOpen:!0},i(t))},this.closeMenu=function(t){e.internalSetState({isOpen:!1},i(t))},this.updateStatus=s(function(){if(e._isMounted){var n=e.getState(),o=e.items[n.highlightedIndex]||{},i=e.getItemCount(),r=e.props.getA11yStatusMessage(b({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},n));e.previousResultCount=i,t(r)}},200)};return T.default=T,T});
 //# sourceMappingURL=downshift.preact.umd.min.js.map

dist/downshift.umd.js

@@ -425,3 +425,2 @@ (function (global, factory) {
 
-    _this.id = generateId('downshift');
     var state = _this.getState({
@@ -437,3 +436,2 @@ highlightedIndex: _this.props.defaultHighlightedIndex,
     _this.state = state;
-    _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);
     return _this;
@@ -444,2 +442,8 @@ }
   // so we're not going to document this yet
+  // nor are we going to test it.
+  // We will try to avoid breaking it, but
+  // we make no guarantees.
+  // If you need it, we recommend that you lock
+  // down your version of downshift (don't use a
+  // version range) to avoid surprise breakages.
 
@@ -472,3 +476,3 @@
       return Object.keys(stateToMerge).reduce(function (state, key) {
-        state[key] = _this2.isStateProp(key) ? _this2.props[key] : stateToMerge[key];
+        state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
         return state;
@@ -487,4 +491,4 @@ }, {});
   }, {
-    key: 'isStateProp',
-    value: function isStateProp(key) {
+    key: 'isControlledProp',
+    value: function isControlledProp(key) {
       return this.props[key] !== undefined;
@@ -535,2 +539,7 @@ }
         Object.keys(stateToSet).forEach(function (key) {
+          // onStateChangeArg should only have the state that is
+          // actually changing
+          if (state[key] !== stateToSet[key]) {
+            onStateChangeArg[key] = stateToSet[key];
+          }
           // the type is useful for the onStateChangeArg
@@ -545,10 +554,5 @@ // but we don't actually want to set it in internal state.
           }
-          // onStateChangeArg should only have the state that is
-          // actually changing
-          if (state[key] !== stateToSet[key]) {
-            onStateChangeArg[key] = stateToSet[key];
-          }
           nextFullState[key] = stateToSet[key];
           // if it's coming from props, then we don't care to set it internally
-          if (!_this3.isStateProp(key)) {
+          if (!_this3.isControlledProp(key)) {
             nextState[key] = stateToSet[key];
@@ -594,3 +598,4 @@ }
           setHighlightedIndex = this.setHighlightedIndex,
-          clearSelection = this.clearSelection;
+          clearSelection = this.clearSelection,
+          reset = this.reset;
 
@@ -606,2 +611,3 @@ return {
         // actions
+        reset: reset,
         openMenu: openMenu,
@@ -678,3 +684,3 @@ closeMenu: closeMenu,
         if ((event.target === _this4._rootNode || !_this4._rootNode.contains(event.target)) && _this4.getState().isOpen) {
-          _this4.reset(Downshift.stateChangeTypes.mouseUp);
+          _this4.reset({ type: Downshift.stateChangeTypes.mouseUp });
         }
@@ -694,4 +700,5 @@ };
     value: function componentDidUpdate(prevProps) {
-      if (this.isStateProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
+      if (this.isControlledProp('selectedItem') && this.props.selectedItem !== prevProps.selectedItem) {
         this.internalSetState({
+          type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
@@ -778,3 +785,13 @@ });
 Downshift$1.stateChangeTypes = {
-  mouseUp: '__autocomplete_mouseup__'
+  mouseUp: '__autocomplete_mouseup__',
+  itemMouseEnter: '__autocomplete_item_mouseenter__',
+  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+  keyDownEscape: '__autocomplete_keydown_escape__',
+  keyDownEnter: '__autocomplete_keydown_enter__',
+  blurInput: '__autocomplete_blur_input__',
+  changeInput: '__autocomplete_change_input__',
+  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+  clickButton: '__autocomplete_click_button__',
+  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__'
 };
@@ -785,2 +802,4 @@
 
+  this.id = generateId('downshift');
+  this.root_handleClick = composeEventHandlers(this.props.onClick, this.root_handleClick);
   this.input = null;
@@ -796,4 +815,5 @@ this.items = [];
     var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this5.props.defaultHighlightedIndex;
+    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _this5.internalSetState({ highlightedIndex: highlightedIndex }, function () {
+    _this5.internalSetState(_extends({ highlightedIndex: highlightedIndex }, otherStateToSet), function () {
       var node = _this5.getItemNodeFromIndex(_this5.getState().highlightedIndex);
@@ -805,17 +825,23 @@ var rootNode = _this5._rootNode;
 
-  this.highlightIndex = function (index) {
-    _this5.openMenu(function () {
-      _this5.setHighlightedIndex(index);
-    });
+  this.openAndHighlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, _extends({ isOpen: true }, otherStateToSet));
   };
 
-  this.moveHighlightedIndex = function (amount) {
+  this.highlightDefaultIndex = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _this5.setHighlightedIndex(undefined, otherStateToSet);
+  };
+
+  this.moveHighlightedIndex = function (amount, otherStateToSet) {
     if (_this5.getState().isOpen) {
-      _this5.changeHighlightedIndex(amount);
+      _this5.changeHighlightedIndex(amount, otherStateToSet);
     } else {
-      _this5.highlightIndex();
+      _this5.openAndHighlightDefaultIndex(otherStateToSet);
     }
   };
 
-  this.changeHighlightedIndex = function (moveAmount) {
+  this.changeHighlightedIndex = function (moveAmount, otherStateToSet) {
     var itemsLastIndex = _this5.getItemCount() - 1;
@@ -839,6 +865,6 @@ if (itemsLastIndex < 0) {
     }
-    _this5.setHighlightedIndex(newIndex);
+    _this5.setHighlightedIndex(newIndex, otherStateToSet);
   };
 
-  this.clearSelection = function () {
+  this.clearSelection = function (cb) {
     _this5.internalSetState({
@@ -851,7 +877,8 @@ selectedItem: null,
       inputNode && inputNode.focus && inputNode.focus();
+      cbToCb(cb)();
     });
   };
 
-  this.selectItem = function (item) {
-    _this5.internalSetState({
+  this.selectItem = function (item, otherStateToSet, cb) {
+    _this5.internalSetState(_extends({
       isOpen: false,
@@ -861,6 +888,6 @@ highlightedIndex: null,
       inputValue: _this5.props.itemToString(item)
-    });
+    }, otherStateToSet), cbToCb(cb));
   };
 
-  this.selectItemAtIndex = function (itemIndex) {
+  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
     var item = _this5.items[itemIndex];
@@ -870,7 +897,7 @@ if (!item) {
     }
-    _this5.selectItem(item);
+    _this5.selectItem(item, otherStateToSet, cb);
   };
 
-  this.selectHighlightedItem = function () {
-    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex);
+  this.selectHighlightedItem = function (otherStateToSet, cb) {
+    return _this5.selectItemAtIndex(_this5.getState().highlightedIndex, otherStateToSet, cb);
   };
@@ -914,3 +941,5 @@
       var amount = event.shiftKey ? 5 : 1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowDown
+      });
     },
@@ -920,3 +949,5 @@ ArrowUp: function ArrowUp(event) {
       var amount = event.shiftKey ? -5 : -1;
-      this.moveHighlightedIndex(amount);
+      this.moveHighlightedIndex(amount, {
+        type: Downshift$1.stateChangeTypes.keyDownArrowUp
+      });
     },
@@ -926,3 +957,5 @@ Enter: function Enter(event) {
       if (this.getState().isOpen) {
-        this.selectHighlightedItem();
+        this.selectHighlightedItem({
+          type: Downshift$1.stateChangeTypes.keyDownEnter
+        });
       }
@@ -932,3 +965,3 @@ },
       event.preventDefault();
-      this.reset();
+      this.reset({ type: Downshift$1.stateChangeTypes.keyDownEscape });
     }
@@ -939,3 +972,3 @@ };
       event.preventDefault();
-      this.toggleMenu();
+      this.toggleMenu({ type: Downshift$1.stateChangeTypes.keyDownSpaceButton });
     }
@@ -972,3 +1005,3 @@ });
     event.preventDefault();
-    _this5.toggleMenu();
+    _this5.toggleMenu({ type: Downshift$1.stateChangeTypes.clickButton });
   };
@@ -1031,3 +1064,7 @@
   this.input_handleChange = function (event) {
-    _this5.internalSetState({ isOpen: true, inputValue: event.target.value });
+    _this5.internalSetState({
+      type: Downshift$1.stateChangeTypes.changeInput,
+      isOpen: true,
+      inputValue: event.target.value
+    });
   };
@@ -1037,3 +1074,3 @@
     if (!_this5.isMouseDown) {
-      _this5.reset();
+      _this5.reset({ type: Downshift$1.stateChangeTypes.blurInput });
     }
@@ -1056,3 +1093,5 @@ };
       onMouseEnter: composeEventHandlers(onMouseEnter, function () {
-        _this5.setHighlightedIndex(index);
+        _this5.setHighlightedIndex(index, {
+          type: Downshift$1.stateChangeTypes.itemMouseEnter
+        });
       })
@@ -1062,23 +1101,24 @@ }, rest);
 
-  this.reset = function (type) {
+  this.reset = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref7) {
       var selectedItem = _ref7.selectedItem;
-      return {
-        type: type,
+      return _extends({
         isOpen: false,
         highlightedIndex: null,
         inputValue: _this5.props.itemToString(selectedItem)
-      };
-    });
+      }, otherStateToSet);
+    }, cbToCb(cb));
   };
 
-  this.toggleMenu = function (newState, cb) {
+  this.toggleMenu = function () {
+    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var cb = arguments[1];
+
     _this5.internalSetState(function (_ref8) {
       var isOpen = _ref8.isOpen;
 
-      var nextIsOpen = !isOpen;
-      if (typeof newState === 'boolean') {
-        nextIsOpen = newState;
-      }
-      return { isOpen: nextIsOpen };
+      return _extends({ isOpen: !isOpen }, otherStateToSet);
     }, function () {
@@ -1089,3 +1129,3 @@ var _getState5 = _this5.getState(),
       if (isOpen) {
-        _this5.setHighlightedIndex();
+        _this5.highlightDefaultIndex();
       }
@@ -1097,7 +1137,7 @@ cbToCb(cb)();
   this.openMenu = function (cb) {
-    _this5.toggleMenu(true, cb);
+    _this5.internalSetState({ isOpen: true }, cbToCb(cb));
   };
 
   this.closeMenu = function (cb) {
-    _this5.toggleMenu(false, cb);
+    _this5.internalSetState({ isOpen: false }, cbToCb(cb));
   };
@@ -1104,0 +1144,0 @@

dist/downshift.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.Downshift=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){var t=D[D.length-1]===e;D=t?[].concat(k(D),[e]):[e],i().innerHTML=""+D.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===D.length-1?"block":"none")+';">'+e+"</div>"}function i(){return _||((_=document.createElement("div")).setAttribute("id","a11y-status-message"),_.setAttribute("role","status"),_.setAttribute("aria-live","assertive"),_.setAttribute("aria-relevant","additions text"),Object.assign(_.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(_),_)}function r(e){return"function"==typeof e?e:u}function u(){}function l(e,t,n){return null!==t&&t!==n.parentNode?e(t)?t:l(e,t.parentNode,n):null}function s(e,t){var n=M(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=parseInt(o.borderBottomWidth,10),l=i.top+r,s=e.getBoundingClientRect(),a=s.top+n.scrollTop-l;a<n.scrollTop?n.scrollTop=a:a+s.height+r+u>n.scrollTop+i.height&&(n.scrollTop=a+s.height-i.height+r+u)}}function a(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function d(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function h(e){return e+"-"+H++}function p(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}function c(e){return e===e&&"number"==typeof e}function f(e,t){return!(e=Array.isArray(e)?e[0]:e)&&t?t:e}function g(e){return e.nodeName?"string"==typeof e.nodeName:"string"==typeof e.type}function m(e){return e.props||e.attributes}function y(e,t){throw new Error('The property "'+t+'" is required in "'+e+'"')}function I(e,t){var n=t.refKey,o="ref"!==n,i=!g(e);if(i&&!o)throw new Error("downshift: You returned a non-DOM element. You must specify a refKey in getRootProps");if(!i&&o)throw new Error('downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "'+n+'"');if(!m(e).hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!m(e).hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var v="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t;var w=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},b=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),S=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},P=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},C=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},O=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},k=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},_="undefined"==typeof document?null:document.getElementById("a11y-status-message"),D=[],H=1,M=l.bind(null,function(e){return e.scrollHeight>e.clientHeight}),A=function(e){function t(){var e;w(this,t);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=O(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));T.call(r),r.id=h("downshift");var u=r.getState({highlightedIndex:r.props.defaultHighlightedIndex,isOpen:r.props.defaultIsOpen,inputValue:r.props.defaultInputValue,selectedItem:r.props.defaultSelectedItem});return u.selectedItem&&(u.inputValue=r.props.itemToString(u.selectedItem)),r.state=u,r.root_handleClick=d(r.props.onClick,r.root_handleClick),r}return P(t,e),b(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(n,o){return n[o]=e.isStateProp(o)?e.props[o]:t[o],n},{})}},{key:"isStateProp",value:function(e){return void 0!==this.props[e]}},{key:"getItemCount",value:function(){return void 0===this.props.itemCount?this.items.length:this.props.itemCount}},{key:"internalSetState",value:function(e,t){var n=this,o=void 0,i={};return this.setState(function(t){t=n.getState(t);var r={},u={};return(e="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&e.selectedItem!==t.selectedItem&&(o=e.selectedItem),Object.keys(e).forEach(function(o){"type"!==o&&(t[o]!==e[o]&&(i[o]=e[o]),u[o]=e[o],n.isStateProp(o)||(r[o]=e[o]))}),r},function(){r(t)(),Object.keys(i).length&&n.props.onStateChange(i,n.getState()),void 0!==o&&n.props.onChange(o,n.getState())})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen,r=this.props.itemToString;return{getRootProps:this.getRootProps,getButtonProps:this.getButtonProps,getLabelProps:this.getLabelProps,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,itemToString:r,highlightedIndex:t,inputValue:n,isOpen:i,selectedItem:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1,n.target!==e._rootNode&&e._rootNode.contains(n.target)||!e.getState().isOpen||e.reset(t.stateChangeTypes.mouseUp)};window.addEventListener("mousedown",n),window.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,window.removeEventListener("mousedown",n),window.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(e){this.isStateProp("selectedItem")&&this.props.selectedItem!==e.selectedItem&&this.internalSetState({inputValue:this.props.itemToString(this.props.selectedItem)}),this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=f(this.props.children,u);this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=f(e(this.getControllerStateAndHelpers()));if(!t)return null;if(this.getRootProps.called)return I(t,this.getRootProps),t;if(g(t))return v.cloneElement(t,this.getRootProps(m(t)));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);A.propTypes={children:t.func,defaultHighlightedIndex:t.number,defaultSelectedItem:t.any,defaultInputValue:t.string,defaultIsOpen:t.bool,getA11yStatusMessage:t.func,itemToString:t.func,onChange:t.func,onStateChange:t.func,onClick:t.func,itemCount:t.number,selectedItem:t.any,isOpen:t.bool,inputValue:t.string,highlightedIndex:t.number},A.defaultProps={defaultHighlightedIndex:null,defaultSelectedItem:null,defaultInputValue:"",defaultIsOpen:!1,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedItem,o=e.selectedItem,i=e.resultCount,r=e.previousResultCount,u=e.itemToString;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},itemToString:function(e){return null==e?"":String(e)},onStateChange:function(){},onChange:function(){}},A.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"};var T=function(){var e=this;this.input=null,this.items=[],this.previousResultCount=0,this.getItemNodeFromIndex=function(t){return document.getElementById(e.getItemId(t))},this.setHighlightedIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e.props.defaultHighlightedIndex;e.internalSetState({highlightedIndex:t},function(){s(e.getItemNodeFromIndex(e.getState().highlightedIndex),e._rootNode)})},this.highlightIndex=function(t){e.openMenu(function(){e.setHighlightedIndex(t)})},this.moveHighlightedIndex=function(t){e.getState().isOpen?e.changeHighlightedIndex(t):e.highlightIndex()},this.changeHighlightedIndex=function(t){var n=e.getItemCount()-1;if(!(n<0)){var o=e.getState().highlightedIndex;null===o&&(o=t>0?-1:n+1);var i=o+t;i<0?i=n:i>n&&(i=0),e.setHighlightedIndex(i)}},this.clearSelection=function(){e.internalSetState({selectedItem:null,inputValue:"",isOpen:!1},function(){var t=e._rootNode.querySelector("#"+e.inputId);t&&t.focus&&t.focus()})},this.selectItem=function(t){e.internalSetState({isOpen:!1,highlightedIndex:null,selectedItem:t,inputValue:e.props.itemToString(t)})},this.selectItemAtIndex=function(t){var n=e.items[t];n&&e.selectItem(n)},this.selectHighlightedItem=function(){return e.selectItemAtIndex(e.getState().highlightedIndex)},this.rootRef=function(t){return e._rootNode=t},this.getRootProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.refKey,i=void 0===o?"ref":o,r=n.onClick,u=C(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,x((t={},S(t,i,e.rootRef),S(t,"onClick",d(r,e.root_handleClick)),t),u)},this.root_handleClick=function(t){t.preventDefault();var n=l(function(t){return c(e.getItemIndexFromId(t.getAttribute("id")))},t.target,e._rootNode);n&&e.selectItemAtIndex(e.getItemIndexFromId(n.getAttribute("id")))},this.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t)},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t)},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem()},Escape:function(e){e.preventDefault(),this.reset()}},this.buttonKeyDownHandlers=x({},this.keyDownHandlers,{" ":function(e){e.preventDefault(),this.toggleMenu()}}),this.getButtonProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onClick,o=t.onKeyDown,i=C(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return x({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:d(n,e.button_handleClick),onKeyDown:d(o,e.button_handleKeyDown)},i)},this.button_handleKeyDown=function(t){e.buttonKeyDownHandlers[t.key]&&e.buttonKeyDownHandlers[t.key].call(e,t)},this.button_handleClick=function(t){t.preventDefault(),e.toggleMenu()},this.getLabelProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e.getLabelProps.called=!0,e.getInputProps.called&&t.htmlFor&&t.htmlFor!==e.inputId)throw new Error('downshift: You provided the htmlFor of "'+t.htmlFor+'" for your label, but the id of your input is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return e.inputId=p(e.inputId,t.htmlFor,h("downshift-input")),x({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.onKeyDown,i=n.onBlur,r=n.onChange,u=n.onInput,l=C(n,["onKeyDown","onBlur","onChange","onInput"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&l.id&&l.id!==e.inputId)throw new Error('downshift: You provided the id of "'+l.id+'" for your input, but the htmlFor of your label is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');e.inputId=p(e.inputId,l.id,h("downshift-input"));var s=e.getState(),a=s.inputValue,c=s.isOpen,f=s.highlightedIndex;return x((t={role:"combobox","aria-autocomplete":"list","aria-expanded":c,"aria-activedescendant":"number"==typeof f&&f>=0?e.getItemId(f):null,autoComplete:"off",value:a},S(t,"onChange",d(r,u,e.input_handleChange)),S(t,"onKeyDown",d(o,e.input_handleKeyDown)),S(t,"onBlur",d(i,e.input_handleBlur)),t),l,{id:e.inputId})},this.input_handleKeyDown=function(t){t.key&&e.keyDownHandlers[t.key]&&e.keyDownHandlers[t.key].call(e,t)},this.input_handleChange=function(t){e.internalSetState({isOpen:!0,inputValue:t.target.value})},this.input_handleBlur=function(){e.isMouseDown||e.reset()},this.getItemProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onMouseEnter,o=t.item,i=void 0===o?y("getItemProps","item"):o,r=t.index,u=void 0===r?y("getItemProps","index"):r,l=C(t,["onMouseEnter","item","index"]);return e.items[u]=i,x({id:e.getItemId(u),onMouseEnter:d(n,function(){e.setHighlightedIndex(u)})},l)},this.reset=function(t){e.internalSetState(function(n){var o=n.selectedItem;return{type:t,isOpen:!1,highlightedIndex:null,inputValue:e.props.itemToString(o)}})},this.toggleMenu=function(t,n){e.internalSetState(function(e){var n=!e.isOpen;return"boolean"==typeof t&&(n=t),{isOpen:n}},function(){e.getState().isOpen&&e.setHighlightedIndex(),r(n)()})},this.openMenu=function(t){e.toggleMenu(!0,t)},this.closeMenu=function(t){e.toggleMenu(!1,t)},this.updateStatus=a(function(){if(e._isMounted){var t=e.getState(),o=e.items[t.highlightedIndex]||{},i=e.getItemCount(),r=e.props.getA11yStatusMessage(x({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},t));e.previousResultCount=i,n(r)}},200)};return A.default=A,A});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.Downshift=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){var t=O[O.length-1]===e;O=t?[].concat(P(O),[e]):[e],i().innerHTML=""+O.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===O.length-1?"block":"none")+';">'+e+"</div>"}function i(){return D||((D=document.createElement("div")).setAttribute("id","a11y-status-message"),D.setAttribute("role","status"),D.setAttribute("aria-live","assertive"),D.setAttribute("aria-relevant","additions text"),Object.assign(D.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(D),D)}function r(e){return"function"==typeof e?e:u}function u(){}function l(e,t,n){return null!==t&&t!==n.parentNode?e(t)?t:l(e,t.parentNode,n):null}function s(e,t){var n=A(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=parseInt(o.borderBottomWidth,10),l=i.top+r,s=e.getBoundingClientRect(),a=s.top+n.scrollTop-l;a<n.scrollTop?n.scrollTop=a:a+s.height+r+u>n.scrollTop+i.height&&(n.scrollTop=a+s.height-i.height+r+u)}}function a(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function p(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function d(e){return e+"-"+T++}function h(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}function c(e){return e===e&&"number"==typeof e}function g(e,t){return!(e=Array.isArray(e)?e[0]:e)&&t?t:e}function f(e){return e.nodeName?"string"==typeof e.nodeName:"string"==typeof e.type}function m(e){return e.props||e.attributes}function y(e,t){throw new Error('The property "'+t+'" is required in "'+e+'"')}function I(e,t){var n=t.refKey,o="ref"!==n,i=!f(e);if(i&&!o)throw new Error("downshift: You returned a non-DOM element. You must specify a refKey in getRootProps");if(!i&&o)throw new Error('downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "'+n+'"');if(!m(e).hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!m(e).hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var v="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t;var w=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},_=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),b=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},C=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},k=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},x=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},P=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},D="undefined"==typeof document?null:document.getElementById("a11y-status-message"),O=[],T=1,A=l.bind(null,function(e){return e.scrollHeight>e.clientHeight}),H=function(e){function t(){var e;w(this,t);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=x(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));E.call(r);var u=r.getState({highlightedIndex:r.props.defaultHighlightedIndex,isOpen:r.props.defaultIsOpen,inputValue:r.props.defaultInputValue,selectedItem:r.props.defaultSelectedItem});return u.selectedItem&&(u.inputValue=r.props.itemToString(u.selectedItem)),r.state=u,r}return C(t,e),_(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(n,o){return n[o]=e.isControlledProp(o)?e.props[o]:t[o],n},{})}},{key:"isControlledProp",value:function(e){return void 0!==this.props[e]}},{key:"getItemCount",value:function(){return void 0===this.props.itemCount?this.items.length:this.props.itemCount}},{key:"internalSetState",value:function(e,t){var n=this,o=void 0,i={};return this.setState(function(t){t=n.getState(t);var r={},u={};return(e="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&e.selectedItem!==t.selectedItem&&(o=e.selectedItem),Object.keys(e).forEach(function(o){t[o]!==e[o]&&(i[o]=e[o]),"type"!==o&&(u[o]=e[o],n.isControlledProp(o)||(r[o]=e[o]))}),r},function(){r(t)(),Object.keys(i).length&&n.props.onStateChange(i,n.getState()),void 0!==o&&n.props.onChange(o,n.getState())})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen,r=this.props.itemToString,u=this.getRootProps,l=this.getButtonProps,s=this.getLabelProps,a=this.getInputProps,p=this.getItemProps,d=this.openMenu,h=this.closeMenu,c=this.toggleMenu,g=this.selectItem,f=this.selectItemAtIndex,m=this.selectHighlightedItem,y=this.setHighlightedIndex,I=this.clearSelection;return{getRootProps:u,getButtonProps:l,getLabelProps:s,getInputProps:a,getItemProps:p,reset:this.reset,openMenu:d,closeMenu:h,toggleMenu:c,selectItem:g,selectItemAtIndex:f,selectHighlightedItem:m,setHighlightedIndex:y,clearSelection:I,itemToString:r,highlightedIndex:t,inputValue:n,isOpen:i,selectedItem:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1,n.target!==e._rootNode&&e._rootNode.contains(n.target)||!e.getState().isOpen||e.reset({type:t.stateChangeTypes.mouseUp})};window.addEventListener("mousedown",n),window.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,window.removeEventListener("mousedown",n),window.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(e){this.isControlledProp("selectedItem")&&this.props.selectedItem!==e.selectedItem&&this.internalSetState({type:t.stateChangeTypes.controlledPropUpdatedSelectedItem,inputValue:this.props.itemToString(this.props.selectedItem)}),this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=g(this.props.children,u);this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=g(e(this.getControllerStateAndHelpers()));if(!t)return null;if(this.getRootProps.called)return I(t,this.getRootProps),t;if(f(t))return v.cloneElement(t,this.getRootProps(m(t)));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);H.propTypes={children:t.func,defaultHighlightedIndex:t.number,defaultSelectedItem:t.any,defaultInputValue:t.string,defaultIsOpen:t.bool,getA11yStatusMessage:t.func,itemToString:t.func,onChange:t.func,onStateChange:t.func,onClick:t.func,itemCount:t.number,selectedItem:t.any,isOpen:t.bool,inputValue:t.string,highlightedIndex:t.number},H.defaultProps={defaultHighlightedIndex:null,defaultSelectedItem:null,defaultInputValue:"",defaultIsOpen:!1,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedItem,o=e.selectedItem,i=e.resultCount,r=e.previousResultCount,u=e.itemToString;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},itemToString:function(e){return null==e?"":String(e)},onStateChange:function(){},onChange:function(){}},H.stateChangeTypes={mouseUp:"__autocomplete_mouseup__",itemMouseEnter:"__autocomplete_item_mouseenter__",keyDownArrowUp:"__autocomplete_keydown_arrow_up__",keyDownArrowDown:"__autocomplete_keydown_arrow_down__",keyDownEscape:"__autocomplete_keydown_escape__",keyDownEnter:"__autocomplete_keydown_enter__",blurInput:"__autocomplete_blur_input__",changeInput:"__autocomplete_change_input__",keyDownSpaceButton:"__autocomplete_keydown_space_button__",clickButton:"__autocomplete_click_button__",controlledPropUpdatedSelectedItem:"__autocomplete_controlled_prop_updated_selected_item__"};var E=function(){var e=this;this.id=d("downshift"),this.root_handleClick=p(this.props.onClick,this.root_handleClick),this.input=null,this.items=[],this.previousResultCount=0,this.getItemNodeFromIndex=function(t){return document.getElementById(e.getItemId(t))},this.setHighlightedIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e.props.defaultHighlightedIndex,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.internalSetState(S({highlightedIndex:t},n),function(){s(e.getItemNodeFromIndex(e.getState().highlightedIndex),e._rootNode)})},this.openAndHighlightDefaultIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};e.setHighlightedIndex(void 0,S({isOpen:!0},t))},this.highlightDefaultIndex=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};e.setHighlightedIndex(void 0,t)},this.moveHighlightedIndex=function(t,n){e.getState().isOpen?e.changeHighlightedIndex(t,n):e.openAndHighlightDefaultIndex(n)},this.changeHighlightedIndex=function(t,n){var o=e.getItemCount()-1;if(!(o<0)){var i=e.getState().highlightedIndex;null===i&&(i=t>0?-1:o+1);var r=i+t;r<0?r=o:r>o&&(r=0),e.setHighlightedIndex(r,n)}},this.clearSelection=function(t){e.internalSetState({selectedItem:null,inputValue:"",isOpen:!1},function(){var n=e._rootNode.querySelector("#"+e.inputId);n&&n.focus&&n.focus(),r(t)()})},this.selectItem=function(t,n,o){e.internalSetState(S({isOpen:!1,highlightedIndex:null,selectedItem:t,inputValue:e.props.itemToString(t)},n),r(o))},this.selectItemAtIndex=function(t,n,o){var i=e.items[t];i&&e.selectItem(i,n,o)},this.selectHighlightedItem=function(t,n){return e.selectItemAtIndex(e.getState().highlightedIndex,t,n)},this.rootRef=function(t){return e._rootNode=t},this.getRootProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.refKey,i=void 0===o?"ref":o,r=n.onClick,u=k(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,S((t={},b(t,i,e.rootRef),b(t,"onClick",p(r,e.root_handleClick)),t),u)},this.root_handleClick=function(t){t.preventDefault();var n=l(function(t){return c(e.getItemIndexFromId(t.getAttribute("id")))},t.target,e._rootNode);n&&e.selectItemAtIndex(e.getItemIndexFromId(n.getAttribute("id")))},this.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t,{type:H.stateChangeTypes.keyDownArrowDown})},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t,{type:H.stateChangeTypes.keyDownArrowUp})},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem({type:H.stateChangeTypes.keyDownEnter})},Escape:function(e){e.preventDefault(),this.reset({type:H.stateChangeTypes.keyDownEscape})}},this.buttonKeyDownHandlers=S({},this.keyDownHandlers,{" ":function(e){e.preventDefault(),this.toggleMenu({type:H.stateChangeTypes.keyDownSpaceButton})}}),this.getButtonProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onClick,o=t.onKeyDown,i=k(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return S({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:p(n,e.button_handleClick),onKeyDown:p(o,e.button_handleKeyDown)},i)},this.button_handleKeyDown=function(t){e.buttonKeyDownHandlers[t.key]&&e.buttonKeyDownHandlers[t.key].call(e,t)},this.button_handleClick=function(t){t.preventDefault(),e.toggleMenu({type:H.stateChangeTypes.clickButton})},this.getLabelProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e.getLabelProps.called=!0,e.getInputProps.called&&t.htmlFor&&t.htmlFor!==e.inputId)throw new Error('downshift: You provided the htmlFor of "'+t.htmlFor+'" for your label, but the id of your input is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return e.inputId=h(e.inputId,t.htmlFor,d("downshift-input")),S({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.onKeyDown,i=n.onBlur,r=n.onChange,u=n.onInput,l=k(n,["onKeyDown","onBlur","onChange","onInput"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&l.id&&l.id!==e.inputId)throw new Error('downshift: You provided the id of "'+l.id+'" for your input, but the htmlFor of your label is "'+e.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');e.inputId=h(e.inputId,l.id,d("downshift-input"));var s=e.getState(),a=s.inputValue,c=s.isOpen,g=s.highlightedIndex;return S((t={role:"combobox","aria-autocomplete":"list","aria-expanded":c,"aria-activedescendant":"number"==typeof g&&g>=0?e.getItemId(g):null,autoComplete:"off",value:a},b(t,"onChange",p(r,u,e.input_handleChange)),b(t,"onKeyDown",p(o,e.input_handleKeyDown)),b(t,"onBlur",p(i,e.input_handleBlur)),t),l,{id:e.inputId})},this.input_handleKeyDown=function(t){t.key&&e.keyDownHandlers[t.key]&&e.keyDownHandlers[t.key].call(e,t)},this.input_handleChange=function(t){e.internalSetState({type:H.stateChangeTypes.changeInput,isOpen:!0,inputValue:t.target.value})},this.input_handleBlur=function(){e.isMouseDown||e.reset({type:H.stateChangeTypes.blurInput})},this.getItemProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onMouseEnter,o=t.item,i=void 0===o?y("getItemProps","item"):o,r=t.index,u=void 0===r?y("getItemProps","index"):r,l=k(t,["onMouseEnter","item","index"]);return e.items[u]=i,S({id:e.getItemId(u),onMouseEnter:p(n,function(){e.setHighlightedIndex(u,{type:H.stateChangeTypes.itemMouseEnter})})},l)},this.reset=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments[1];e.internalSetState(function(n){var o=n.selectedItem;return S({isOpen:!1,highlightedIndex:null,inputValue:e.props.itemToString(o)},t)},r(n))},this.toggleMenu=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments[1];e.internalSetState(function(e){var n=e.isOpen;return S({isOpen:!n},t)},function(){e.getState().isOpen&&e.highlightDefaultIndex(),r(n)()})},this.openMenu=function(t){e.internalSetState({isOpen:!0},r(t))},this.closeMenu=function(t){e.internalSetState({isOpen:!1},r(t))},this.updateStatus=a(function(){if(e._isMounted){var t=e.getState(),o=e.items[t.highlightedIndex]||{},i=e.getItemCount(),r=e.props.getA11yStatusMessage(S({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},t));e.previousResultCount=i,n(r)}},200)};return H.default=H,H});
 //# sourceMappingURL=downshift.umd.min.js.map

package.json

 {
   "name": "downshift",
-  "version": "1.0.0-rc.16",
+  "version": "1.0.0-rc.17",
   "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",
@@ -5,0 +5,0 @@ "main": "dist/downshift.cjs.js",

README.md

@@ -328,3 +328,4 @@ <h1 align="center">
   call this `innerRef`. So you'd call: `getRootProps({refKey: 'innerRef'})`
-  and your composite component would forward like: `<div ref={props.innerRef} />`
+  and your composite component would forward like:
+  `<div ref={props.innerRef} />`
 
@@ -357,4 +358,5 @@ #### `getInputProps`
 
-This method should be applied to any menu items you render. You pass it an object
-and that object must contain `index` (number) and `item` (anything) properties.
+This method should be applied to any menu items you render. You pass it an
+object and that object must contain `index` (number) and `item` (anything)
+properties.
 
@@ -389,14 +391,18 @@ Required properties:
 
-| property                | type                       | description                                                                                                      |
-|-------------------------|----------------------------|------------------------------------------------------------------------------------------------------------------|
-| `clearSelection`        | `function()`               | clears the selection                                                                                             |
-| `closeMenu`             | `function()`               | closes the menu                                                                                                  |
-| `openMenu`              | `function()`               | opens the menu                                                                                                   |
-| `selectHighlightedItem` | `function()`               | selects the item that is currently highlighted                                                                   |
-| `selectItem`            | `function(item: any)`      | selects the given item                                                                                           |
-| `selectItemAtIndex`     | `function(index: number)`  | selects the item at the given index                                                                              |
-| `setHighlightedIndex`   | `function(index: number)`  | call to set a new highlighted index                                                                              |
-| `toggleMenu`            | `function(state: boolean)` | toggle the menu open state (if `state` is not provided, then it will be set to the inverse of the current state) |
-| `itemToString`          | `function(item: any)`      | this is the same as the `itemToString` prop and is provided just as a helper                                     |
+| property                | type                                                             | description                                                                  |
+|-------------------------|------------------------------------------------------------------|------------------------------------------------------------------------------|
+| `clearSelection`        | `function(cb: Function)`                                         | clears the selection                                                         |
+| `closeMenu`             | `function(cb: Function)`                                         | closes the menu                                                              |
+| `openMenu`              | `function(cb: Function)`                                         | opens the menu                                                               |
+| `selectHighlightedItem` | `function(otherStateToSet: object, cb: Function)`                | selects the item that is currently highlighted                               |
+| `selectItem`            | `function(item: any, otherStateToSet: object, cb: Function)`     | selects the given item                                                       |
+| `selectItemAtIndex`     | `function(index: number, otherStateToSet: object, cb: Function)` | selects the item at the given index                                          |
+| `setHighlightedIndex`   | `function(index: number, otherStateToSet: object, cb: Function)` | call to set a new highlighted index                                          |
+| `toggleMenu`            | `function(otherStateToSet: object, cb: Function)`                | toggle the menu open state                                                   |
+| `reset`                 | `function(otherStateToSet: object, cb: Function)`                | this resets downshift's state to a reasonable default                        |
+| `itemToString`          | `function(item: any)`                                            | this is the same as the `itemToString` prop and is provided just as a helper |
 
+> `otherStateToSet` refers to an object to set other internal state. It is
+> recommended to avoid abusing this, but is available if you need it.
+
 ### state
@@ -403,0 +409,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

480053

increased by6.93%

Lines of code

5958

increased by3.87%

Number of lines in readme file

527

increased by1.15%

No dependency changes