downshift - npm Package Compare versions

Comparing version 1.0.0-rc.5 to 1.0.0-rc.6

dist/downshift.cjs.js

@@ -423,7 +423,7 @@ 'use strict';
     /**
-     * This determines whether a prop is a "state prop" meaning it is
+     * This determines whether a prop is a "controlled prop" meaning it is
      * state which is controlled by the outside of this component rather
      * than within this component.
      * @param {String} key the key to check
-     * @return {Boolean} whether it is a controlled state prop
+     * @return {Boolean} whether it is a controlled controlled prop
      */
@@ -456,11 +456,10 @@
     // 2. Controlled: it's external (this.props)
-    //    We will call this.props.onChange to update that state
+    //    We will call this.props.onStateChange to update that state
     //
-    // In addition, we'll always call this.props.onChange if the
-    // selectedItem is changed because that's important whether
-    // that property is controlled or not.
+    // In addition, we'll call this.props.onChange if the
+    // selectedItem is changed.
     value: function internalSetState(stateToSet, cb) {
       var _this3 = this;
 
-      var onChangeArg = {};
+      var onChangeArg = void 0;
       var onStateChangeArg = {};
@@ -478,4 +477,3 @@ return this.setState(function (state) {
         if (stateToSet.hasOwnProperty('selectedItem')) {
-          onChangeArg.selectedItem = stateToSet.selectedItem;
-          onChangeArg.previousItem = state.selectedItem;
+          onChangeArg = stateToSet.selectedItem;
         }
@@ -507,13 +505,10 @@ Object.keys(stateToSet).forEach(function (key) {
         cbToCb(cb)();
+
+        // only call the onStateChange and onChange callbacks if
+        // we have relevant information to pass them.
         if (Object.keys(onStateChangeArg).length) {
-          // We call this function whether we're controlled or not
-          // It's mostly useful if we're controlled, but it can
-          // definitely be useful for folks to know when something
-          // happens internally.
           _this3.props.onStateChange(onStateChangeArg, _this3.getState());
         }
-        if (Object.keys(onChangeArg).length) {
-          // if the selectedItem changed
-          // then let's call onChange!
-          _this3.props.onChange(onChangeArg);
+        if (onChangeArg) {
+          _this3.props.onChange(onChangeArg, _this3.getState());
         }
@@ -520,0 +515,0 @@ });

dist/downshift.es.js

@@ -418,7 +418,7 @@ import React, { Component } from 'react';
     /**
-     * This determines whether a prop is a "state prop" meaning it is
+     * This determines whether a prop is a "controlled prop" meaning it is
      * state which is controlled by the outside of this component rather
      * than within this component.
      * @param {String} key the key to check
-     * @return {Boolean} whether it is a controlled state prop
+     * @return {Boolean} whether it is a controlled controlled prop
      */
@@ -451,11 +451,10 @@
     // 2. Controlled: it's external (this.props)
-    //    We will call this.props.onChange to update that state
+    //    We will call this.props.onStateChange to update that state
     //
-    // In addition, we'll always call this.props.onChange if the
-    // selectedItem is changed because that's important whether
-    // that property is controlled or not.
+    // In addition, we'll call this.props.onChange if the
+    // selectedItem is changed.
     value: function internalSetState(stateToSet, cb) {
       var _this3 = this;
 
-      var onChangeArg = {};
+      var onChangeArg = void 0;
       var onStateChangeArg = {};
@@ -473,4 +472,3 @@ return this.setState(function (state) {
         if (stateToSet.hasOwnProperty('selectedItem')) {
-          onChangeArg.selectedItem = stateToSet.selectedItem;
-          onChangeArg.previousItem = state.selectedItem;
+          onChangeArg = stateToSet.selectedItem;
         }
@@ -502,13 +500,10 @@ Object.keys(stateToSet).forEach(function (key) {
         cbToCb(cb)();
+
+        // only call the onStateChange and onChange callbacks if
+        // we have relevant information to pass them.
         if (Object.keys(onStateChangeArg).length) {
-          // We call this function whether we're controlled or not
-          // It's mostly useful if we're controlled, but it can
-          // definitely be useful for folks to know when something
-          // happens internally.
           _this3.props.onStateChange(onStateChangeArg, _this3.getState());
         }
-        if (Object.keys(onChangeArg).length) {
-          // if the selectedItem changed
-          // then let's call onChange!
-          _this3.props.onChange(onChangeArg);
+        if (onChangeArg) {
+          _this3.props.onChange(onChangeArg, _this3.getState());
         }
@@ -515,0 +510,0 @@ });

dist/downshift.preact.cjs.js

@@ -449,7 +449,7 @@ 'use strict';
     /**
-     * This determines whether a prop is a "state prop" meaning it is
+     * This determines whether a prop is a "controlled prop" meaning it is
      * state which is controlled by the outside of this component rather
      * than within this component.
      * @param {String} key the key to check
-     * @return {Boolean} whether it is a controlled state prop
+     * @return {Boolean} whether it is a controlled controlled prop
      */
@@ -482,11 +482,10 @@
     // 2. Controlled: it's external (this.props)
-    //    We will call this.props.onChange to update that state
+    //    We will call this.props.onStateChange to update that state
     //
-    // In addition, we'll always call this.props.onChange if the
-    // selectedItem is changed because that's important whether
-    // that property is controlled or not.
+    // In addition, we'll call this.props.onChange if the
+    // selectedItem is changed.
     value: function internalSetState(stateToSet, cb) {
       var _this3 = this;
 
-      var onChangeArg = {};
+      var onChangeArg = void 0;
       var onStateChangeArg = {};
@@ -504,4 +503,3 @@ return this.setState(function (state) {
         if (stateToSet.hasOwnProperty('selectedItem')) {
-          onChangeArg.selectedItem = stateToSet.selectedItem;
-          onChangeArg.previousItem = state.selectedItem;
+          onChangeArg = stateToSet.selectedItem;
         }
@@ -533,13 +531,10 @@ Object.keys(stateToSet).forEach(function (key) {
         cbToCb(cb)();
+
+        // only call the onStateChange and onChange callbacks if
+        // we have relevant information to pass them.
         if (Object.keys(onStateChangeArg).length) {
-          // We call this function whether we're controlled or not
-          // It's mostly useful if we're controlled, but it can
-          // definitely be useful for folks to know when something
-          // happens internally.
           _this3.props.onStateChange(onStateChangeArg, _this3.getState());
         }
-        if (Object.keys(onChangeArg).length) {
-          // if the selectedItem changed
-          // then let's call onChange!
-          _this3.props.onChange(onChangeArg);
+        if (onChangeArg) {
+          _this3.props.onChange(onChangeArg, _this3.getState());
         }
@@ -546,0 +541,0 @@ });

dist/downshift.preact.es.js

@@ -448,7 +448,7 @@ import { Component } from 'preact';
     /**
-     * This determines whether a prop is a "state prop" meaning it is
+     * This determines whether a prop is a "controlled prop" meaning it is
      * state which is controlled by the outside of this component rather
      * than within this component.
      * @param {String} key the key to check
-     * @return {Boolean} whether it is a controlled state prop
+     * @return {Boolean} whether it is a controlled controlled prop
      */
@@ -481,11 +481,10 @@
     // 2. Controlled: it's external (this.props)
-    //    We will call this.props.onChange to update that state
+    //    We will call this.props.onStateChange to update that state
     //
-    // In addition, we'll always call this.props.onChange if the
-    // selectedItem is changed because that's important whether
-    // that property is controlled or not.
+    // In addition, we'll call this.props.onChange if the
+    // selectedItem is changed.
     value: function internalSetState(stateToSet, cb) {
       var _this3 = this;
 
-      var onChangeArg = {};
+      var onChangeArg = void 0;
       var onStateChangeArg = {};
@@ -503,4 +502,3 @@ return this.setState(function (state) {
         if (stateToSet.hasOwnProperty('selectedItem')) {
-          onChangeArg.selectedItem = stateToSet.selectedItem;
-          onChangeArg.previousItem = state.selectedItem;
+          onChangeArg = stateToSet.selectedItem;
         }
@@ -532,13 +530,10 @@ Object.keys(stateToSet).forEach(function (key) {
         cbToCb(cb)();
+
+        // only call the onStateChange and onChange callbacks if
+        // we have relevant information to pass them.
         if (Object.keys(onStateChangeArg).length) {
-          // We call this function whether we're controlled or not
-          // It's mostly useful if we're controlled, but it can
-          // definitely be useful for folks to know when something
-          // happens internally.
           _this3.props.onStateChange(onStateChangeArg, _this3.getState());
         }
-        if (Object.keys(onChangeArg).length) {
-          // if the selectedItem changed
-          // then let's call onChange!
-          _this3.props.onChange(onChangeArg);
+        if (onChangeArg) {
+          _this3.props.onChange(onChangeArg, _this3.getState());
         }
@@ -545,0 +540,0 @@ });

dist/downshift.preact.umd.js

@@ -452,7 +452,7 @@ (function (global, factory) {
     /**
-     * This determines whether a prop is a "state prop" meaning it is
+     * This determines whether a prop is a "controlled prop" meaning it is
      * state which is controlled by the outside of this component rather
      * than within this component.
      * @param {String} key the key to check
-     * @return {Boolean} whether it is a controlled state prop
+     * @return {Boolean} whether it is a controlled controlled prop
      */
@@ -485,11 +485,10 @@
     // 2. Controlled: it's external (this.props)
-    //    We will call this.props.onChange to update that state
+    //    We will call this.props.onStateChange to update that state
     //
-    // In addition, we'll always call this.props.onChange if the
-    // selectedItem is changed because that's important whether
-    // that property is controlled or not.
+    // In addition, we'll call this.props.onChange if the
+    // selectedItem is changed.
     value: function internalSetState(stateToSet, cb) {
       var _this3 = this;
 
-      var onChangeArg = {};
+      var onChangeArg = void 0;
       var onStateChangeArg = {};
@@ -507,4 +506,3 @@ return this.setState(function (state) {
         if (stateToSet.hasOwnProperty('selectedItem')) {
-          onChangeArg.selectedItem = stateToSet.selectedItem;
-          onChangeArg.previousItem = state.selectedItem;
+          onChangeArg = stateToSet.selectedItem;
         }
@@ -536,13 +534,10 @@ Object.keys(stateToSet).forEach(function (key) {
         cbToCb(cb)();
+
+        // only call the onStateChange and onChange callbacks if
+        // we have relevant information to pass them.
         if (Object.keys(onStateChangeArg).length) {
-          // We call this function whether we're controlled or not
-          // It's mostly useful if we're controlled, but it can
-          // definitely be useful for folks to know when something
-          // happens internally.
           _this3.props.onStateChange(onStateChangeArg, _this3.getState());
         }
-        if (Object.keys(onChangeArg).length) {
-          // if the selectedItem changed
-          // then let's call onChange!
-          _this3.props.onChange(onChangeArg);
+        if (onChangeArg) {
+          _this3.props.onChange(onChangeArg, _this3.getState());
         }
@@ -549,0 +544,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.preact)}(this,function(e){"use strict";function t(){}function n(e){var t=O[O.length-1]===e;O=t?[].concat(C(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 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 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=_(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=i.top+r,l=e.getBoundingClientRect(),s=l.top+n.scrollTop-u;s<n.scrollTop?n.scrollTop=s:s+l.height>n.scrollTop+i.height&&(n.scrollTop=s+l.height-i.height)}}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 h(){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+"-"+k++}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){var n=t.refKey,o="ref"!==n,i="string"!=typeof e.type;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(!e.props.hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!e.props.hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var g=e.default;g.Children={only:function(e){return e&&e[0]}},t.isRequired=t;var m={element:t,func:t,number:t,any:t,bool:t,string:t},y=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},I=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}}(),v=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},w=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)},S=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},C=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"),O=[],k=1,_=l.bind(null,function(e){return e.scrollHeight>e.clientHeight}),D=function(e){function t(){var e;y(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)));H.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=h(r.props.onClick,r.root_handleClick),r}return w(t,e),I(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={},i={};return this.setState(function(t){t=n.getState(t);var r={},u={};return(e="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&(o.selectedItem=e.selectedItem,o.previousItem=t.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()),Object.keys(o).length&&n.props.onChange(o)})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen;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,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=this.props.children;this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=e&&e(this.getControllerStateAndHelpers());if(!t)return null;var n=g.Children.only(t);if(this.getRootProps.called)return f(n,this.getRootProps),n;if("string"==typeof n.type)return g.cloneElement(n,this.getRootProps(n.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);D.propTypes={children:m.func,defaultHighlightedIndex:m.number,defaultSelectedItem:m.any,defaultInputValue:m.string,defaultIsOpen:m.bool,getA11yStatusMessage:m.func,itemToString:m.func,onChange:m.func,onStateChange:m.func,onClick:m.func,itemCount:m.number,selectedItem:m.any,isOpen:m.bool,inputValue:m.string,highlightedIndex:m.number},D.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(){}},D.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"};var H=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.changeHighlighedIndex(t):e.highlightIndex()},this.changeHighlighedIndex=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=S(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,b((t={},v(t,i,e.rootRef),v(t,"onClick",h(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=b({},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=S(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:h(n,e.button_handleClick),onKeyDown:h(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,d("downshift-input")),b({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onChange,o=t.onKeyDown,i=t.onBlur,r=S(t,["onChange","onKeyDown","onBlur"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&r.id&&r.id!==e.inputId)throw new Error('downshift: You provided the id of "'+r.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,r.id,d("downshift-input"));var u=e.getState(),l=u.inputValue,s=u.isOpen,a=u.highlightedIndex;return b({role:"combobox","aria-autocomplete":"list","aria-expanded":s,"aria-activedescendant":"number"==typeof a&&a>=0?e.getItemId(a):null,autoComplete:"off",value:l,onChange:h(n,e.input_handleChange),onKeyDown:h(o,e.input_handleKeyDown),onBlur:h(i,e.input_handleBlur)},r,{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=t.index,r=S(t,["onMouseEnter","item","index"]);return e.items[i]=o,b({id:e.getItemId(i),onMouseEnter:h(n,function(){e.setHighlightedIndex(i)})},r)},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(b({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},t));e.previousResultCount=i,n(r)}},200)};return D});
+!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.preact)}(this,function(e){"use strict";function t(){}function n(e){var t=O[O.length-1]===e;O=t?[].concat(C(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 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 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=_(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=i.top+r,l=e.getBoundingClientRect(),s=l.top+n.scrollTop-u;s<n.scrollTop?n.scrollTop=s:s+l.height>n.scrollTop+i.height&&(n.scrollTop=s+l.height-i.height)}}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 h(){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+"-"+k++}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){var n=t.refKey,o="ref"!==n,i="string"!=typeof e.type;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(!e.props.hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!e.props.hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var g=e.default;g.Children={only:function(e){return e&&e[0]}},t.isRequired=t;var m={element:t,func:t,number:t,any:t,bool:t,string:t},y=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},I=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}}(),v=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},w=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},b=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)},S=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},C=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"),O=[],k=1,_=l.bind(null,function(e){return e.scrollHeight>e.clientHeight}),D=function(e){function t(){var e;y(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)));H.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=h(r.props.onClick,r.root_handleClick),r}return b(t,e),I(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")&&(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()),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;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,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=this.props.children;this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=e&&e(this.getControllerStateAndHelpers());if(!t)return null;var n=g.Children.only(t);if(this.getRootProps.called)return f(n,this.getRootProps),n;if("string"==typeof n.type)return g.cloneElement(n,this.getRootProps(n.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);D.propTypes={children:m.func,defaultHighlightedIndex:m.number,defaultSelectedItem:m.any,defaultInputValue:m.string,defaultIsOpen:m.bool,getA11yStatusMessage:m.func,itemToString:m.func,onChange:m.func,onStateChange:m.func,onClick:m.func,itemCount:m.number,selectedItem:m.any,isOpen:m.bool,inputValue:m.string,highlightedIndex:m.number},D.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(){}},D.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"};var H=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.changeHighlighedIndex(t):e.highlightIndex()},this.changeHighlighedIndex=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=S(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,w((t={},v(t,i,e.rootRef),v(t,"onClick",h(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=w({},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=S(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return w({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:h(n,e.button_handleClick),onKeyDown:h(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,d("downshift-input")),w({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onChange,o=t.onKeyDown,i=t.onBlur,r=S(t,["onChange","onKeyDown","onBlur"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&r.id&&r.id!==e.inputId)throw new Error('downshift: You provided the id of "'+r.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,r.id,d("downshift-input"));var u=e.getState(),l=u.inputValue,s=u.isOpen,a=u.highlightedIndex;return w({role:"combobox","aria-autocomplete":"list","aria-expanded":s,"aria-activedescendant":"number"==typeof a&&a>=0?e.getItemId(a):null,autoComplete:"off",value:l,onChange:h(n,e.input_handleChange),onKeyDown:h(o,e.input_handleKeyDown),onBlur:h(i,e.input_handleBlur)},r,{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=t.index,r=S(t,["onMouseEnter","item","index"]);return e.items[i]=o,w({id:e.getItemId(i),onMouseEnter:h(n,function(){e.setHighlightedIndex(i)})},r)},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(w({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},t));e.previousResultCount=i,n(r)}},200)};return D});
 //# sourceMappingURL=downshift.preact.umd.min.js.map

dist/downshift.umd.js

@@ -424,7 +424,7 @@ (function (global, factory) {
     /**
-     * This determines whether a prop is a "state prop" meaning it is
+     * This determines whether a prop is a "controlled prop" meaning it is
      * state which is controlled by the outside of this component rather
      * than within this component.
      * @param {String} key the key to check
-     * @return {Boolean} whether it is a controlled state prop
+     * @return {Boolean} whether it is a controlled controlled prop
      */
@@ -457,11 +457,10 @@
     // 2. Controlled: it's external (this.props)
-    //    We will call this.props.onChange to update that state
+    //    We will call this.props.onStateChange to update that state
     //
-    // In addition, we'll always call this.props.onChange if the
-    // selectedItem is changed because that's important whether
-    // that property is controlled or not.
+    // In addition, we'll call this.props.onChange if the
+    // selectedItem is changed.
     value: function internalSetState(stateToSet, cb) {
       var _this3 = this;
 
-      var onChangeArg = {};
+      var onChangeArg = void 0;
       var onStateChangeArg = {};
@@ -479,4 +478,3 @@ return this.setState(function (state) {
         if (stateToSet.hasOwnProperty('selectedItem')) {
-          onChangeArg.selectedItem = stateToSet.selectedItem;
-          onChangeArg.previousItem = state.selectedItem;
+          onChangeArg = stateToSet.selectedItem;
         }
@@ -508,13 +506,10 @@ Object.keys(stateToSet).forEach(function (key) {
         cbToCb(cb)();
+
+        // only call the onStateChange and onChange callbacks if
+        // we have relevant information to pass them.
         if (Object.keys(onStateChangeArg).length) {
-          // We call this function whether we're controlled or not
-          // It's mostly useful if we're controlled, but it can
-          // definitely be useful for folks to know when something
-          // happens internally.
           _this3.props.onStateChange(onStateChangeArg, _this3.getState());
         }
-        if (Object.keys(onChangeArg).length) {
-          // if the selectedItem changed
-          // then let's call onChange!
-          _this3.props.onChange(onChangeArg);
+        if (onChangeArg) {
+          _this3.props.onChange(onChangeArg, _this3.getState());
         }
@@ -521,0 +516,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=P[P.length-1]===e;P=t?[].concat(x(P),[e]):[e],i().innerHTML=""+P.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===P.length-1?"block":"none")+';">'+e+"</div>"}function i(){return C||((C=document.createElement("div")).setAttribute("id","a11y-status-message"),C.setAttribute("role","status"),C.setAttribute("aria-live","assertive"),C.setAttribute("aria-relevant","additions text"),Object.assign(C.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(C),C)}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=k(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=i.top+r,l=e.getBoundingClientRect(),s=l.top+n.scrollTop-u;s<n.scrollTop?n.scrollTop=s:s+l.height>n.scrollTop+i.height&&(n.scrollTop=s+l.height-i.height)}}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 h(){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+"-"+O++}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){var n=t.refKey,o="ref"!==n,i="string"!=typeof e.type;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(!e.props.hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!e.props.hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var g="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t;var m=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},y=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}}(),I=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},v=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},w=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)},b=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},S=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)},C="undefined"==typeof document?null:document.getElementById("a11y-status-message"),P=[],O=1,k=l.bind(null,function(e){return e.scrollHeight>e.clientHeight}),_=function(e){function t(){var e;m(this,t);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=S(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));D.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=h(r.props.onClick,r.root_handleClick),r}return w(t,e),y(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={},i={};return this.setState(function(t){t=n.getState(t);var r={},u={};return(e="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&(o.selectedItem=e.selectedItem,o.previousItem=t.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()),Object.keys(o).length&&n.props.onChange(o)})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen;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,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=this.props.children;this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=e&&e(this.getControllerStateAndHelpers());if(!t)return null;var n=g.Children.only(t);if(this.getRootProps.called)return f(n,this.getRootProps),n;if("string"==typeof n.type)return g.cloneElement(n,this.getRootProps(n.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);_.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},_.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(){}},_.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"};var D=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.changeHighlighedIndex(t):e.highlightIndex()},this.changeHighlighedIndex=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=b(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,v((t={},I(t,i,e.rootRef),I(t,"onClick",h(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=v({},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=b(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return v({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:h(n,e.button_handleClick),onKeyDown:h(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,d("downshift-input")),v({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onChange,o=t.onKeyDown,i=t.onBlur,r=b(t,["onChange","onKeyDown","onBlur"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&r.id&&r.id!==e.inputId)throw new Error('downshift: You provided the id of "'+r.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,r.id,d("downshift-input"));var u=e.getState(),l=u.inputValue,s=u.isOpen,a=u.highlightedIndex;return v({role:"combobox","aria-autocomplete":"list","aria-expanded":s,"aria-activedescendant":"number"==typeof a&&a>=0?e.getItemId(a):null,autoComplete:"off",value:l,onChange:h(n,e.input_handleChange),onKeyDown:h(o,e.input_handleKeyDown),onBlur:h(i,e.input_handleBlur)},r,{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=t.index,r=b(t,["onMouseEnter","item","index"]);return e.items[i]=o,v({id:e.getItemId(i),onMouseEnter:h(n,function(){e.setHighlightedIndex(i)})},r)},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(v({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},t));e.previousResultCount=i,n(r)}},200)};return _});
+!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=P[P.length-1]===e;P=t?[].concat(x(P),[e]):[e],i().innerHTML=""+P.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===P.length-1?"block":"none")+';">'+e+"</div>"}function i(){return C||((C=document.createElement("div")).setAttribute("id","a11y-status-message"),C.setAttribute("role","status"),C.setAttribute("aria-live","assertive"),C.setAttribute("aria-relevant","additions text"),Object.assign(C.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(C),C)}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=k(e,t);if(null!==n){var o=getComputedStyle(n),i=n.getBoundingClientRect(),r=parseInt(o.borderTopWidth,10),u=i.top+r,l=e.getBoundingClientRect(),s=l.top+n.scrollTop-u;s<n.scrollTop?n.scrollTop=s:s+l.height>n.scrollTop+i.height&&(n.scrollTop=s+l.height-i.height)}}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 h(){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+"-"+O++}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){var n=t.refKey,o="ref"!==n,i="string"!=typeof e.type;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(!e.props.hasOwnProperty(n))throw new Error('downshift: You must apply the ref prop "'+n+'" from getRootProps onto your root element.');if(!e.props.hasOwnProperty("onClick"))throw new Error('downshift: You must apply the "onClick" prop from getRootProps onto your root element.')}var g="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t;var m=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},y=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}}(),I=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},v=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},w=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)},b=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},S=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)},C="undefined"==typeof document?null:document.getElementById("a11y-status-message"),P=[],O=1,k=l.bind(null,function(e){return e.scrollHeight>e.clientHeight}),_=function(e){function t(){var e;m(this,t);for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];var r=S(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o)));D.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=h(r.props.onClick,r.root_handleClick),r}return w(t,e),y(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")&&(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()),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;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,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=this.props.children;this.items=[],this.getRootProps.called=!1,this.getRootProps.refKey=void 0,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=e&&e(this.getControllerStateAndHelpers());if(!t)return null;var n=g.Children.only(t);if(this.getRootProps.called)return f(n,this.getRootProps),n;if("string"==typeof n.type)return g.cloneElement(n,this.getRootProps(n.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}}]),t}(e.Component);_.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},_.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(){}},_.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"};var D=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.changeHighlighedIndex(t):e.highlightIndex()},this.changeHighlighedIndex=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=b(n,["refKey","onClick"]);return e.getRootProps.called=!0,e.getRootProps.refKey=i,v((t={},I(t,i,e.rootRef),I(t,"onClick",h(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=v({},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=b(t,["onClick","onKeyDown"]),r=e.getState().isOpen;return v({role:"button","aria-label":r?"close menu":"open menu","aria-expanded":r,"aria-haspopup":!0,onClick:h(n,e.button_handleClick),onKeyDown:h(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,d("downshift-input")),v({},t,{htmlFor:e.inputId})},this.getInputProps=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.onChange,o=t.onKeyDown,i=t.onBlur,r=b(t,["onChange","onKeyDown","onBlur"]);if(e.getInputProps.called=!0,e.getLabelProps.called&&r.id&&r.id!==e.inputId)throw new Error('downshift: You provided the id of "'+r.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,r.id,d("downshift-input"));var u=e.getState(),l=u.inputValue,s=u.isOpen,a=u.highlightedIndex;return v({role:"combobox","aria-autocomplete":"list","aria-expanded":s,"aria-activedescendant":"number"==typeof a&&a>=0?e.getItemId(a):null,autoComplete:"off",value:l,onChange:h(n,e.input_handleChange),onKeyDown:h(o,e.input_handleKeyDown),onBlur:h(i,e.input_handleBlur)},r,{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=t.index,r=b(t,["onMouseEnter","item","index"]);return e.items[i]=o,v({id:e.getItemId(i),onMouseEnter:h(n,function(){e.setHighlightedIndex(i)})},r)},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(v({itemToString:e.props.itemToString,previousResultCount:e.previousResultCount,resultCount:i,highlightedItem:o},t));e.previousResultCount=i,n(r)}},200)};return _});
 //# sourceMappingURL=downshift.umd.min.js.map

package.json

 {
   "name": "downshift",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.6",
   "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

@@ -20,4 +20,8 @@ <h1 align="center">
 [![PRs Welcome][prs-badge]][prs]
+[![Chat][chat-badge]][chat]
 [![Code of Conduct][coc-badge]][coc]
 
+[![gzip size][gzip-badge]][unpkg-dist]
+[![size][size-badge]][unpkg-dist]
+[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
 [![Watch on GitHub][github-watch-badge]][github-watch]
@@ -119,3 +123,3 @@ [![Star on GitHub][github-star-badge]][github-star]
       items={['apple', 'orange', 'carrot']}
-      onChange={({selectedItem}) => console.log(selectedItem)}
+      onChange={selectedItem => console.log(selectedItem)}
     />
@@ -126,11 +130,10 @@ )
 
-Available components and relevant props:
+`downshift` is the only component. It doesn't render anything itself, it just
+calls the child function and renders that. Wrap everything in
+`<Downshift>{/* your function here! */}</Downshift>`.
 
-### Downshift
+## Props:
 
-This is the only component. It doesn't render anything itself, it just calls
-the child function and renders that. Wrap everything in this.
+### defaultSelectedItem
 
-#### defaultSelectedItem
-
 > `any` | defaults to `null`
@@ -140,3 +143,3 @@
 
-#### defaultHighlightedIndex
+### defaultHighlightedIndex
 
@@ -147,3 +150,3 @@ > `number`/`null` | defaults to `null`
 
-#### defaultInputValue
+### defaultInputValue
 
@@ -154,3 +157,3 @@ > `string` | defaults to `''`
 
-#### defaultIsOpen
+### defaultIsOpen
 
@@ -161,3 +164,3 @@ > `boolean` | defaults to `false`
 
-#### itemToString
+### itemToString
 
@@ -169,3 +172,3 @@ > `function(item: any)` | defaults to: `i => (i == null ? '' : String(i))`
 
-#### getA11yStatusMessage
+### getA11yStatusMessage
 
@@ -199,11 +202,13 @@ > `function({/* see below */})` | default messages provided in English
 
-#### onChange
+### onChange
 
-> `function({selectedItem, previousItem})` | optional, no useful default
+> `function(selectedItem: any, allState: object)` | optional, no useful default
 
-Called when the user selects an item
+Called when the user selects an item. Called with the item that was selected
+and the new state of `downshift`. (see `onStateChange` for more info on
+`allState`).
 
-#### onStateChange
+### onStateChange
 
-> `function(changes, allState)` | optional, no useful default
+> `function(changes: object, allState: object)` | optional, no useful default
 
@@ -223,3 +228,3 @@ This function is called anytime the internal state changes. This can be useful
 
-#### itemCount
+### itemCount
 
@@ -231,17 +236,17 @@ > `number` | optional, defaults the number of times you call getItemProps
 
-#### highlightedIndex
+### highlightedIndex
 
-> `number` | **state prop** (read more below)
+> `number` | **control prop** (read more about this in the "Control Props" section below)
 
 The index that should be highlighted
 
-#### inputValue
+### inputValue
 
-> `string` | **state prop** (read more below)
+> `string` | **control prop** (read more about this in the "Control Props" section below)
 
 The value the input should have
 
-#### isOpen
+### isOpen
 
-> `boolean` | **state prop** (read more below)
+> `boolean` | **control prop** (read more about this in the "Control Props" section below)
 
@@ -253,17 +258,44 @@ Whether the menu should be considered open or closed. Some aspects of the
 
-#### `selectedItem`
+### `selectedItem`
 
-> `any`/`Array(any)` | **state prop** (read more below)
+> `any`/`Array(any)` | **control prop** (read more about this in the "Control Props" section below)
 
 The currently selected item.
 
-#### children
+### children
 
 > `function({})` | *required*
 
-This is called with an object. The properties of this object can be split into
-three categories as indicated below:
+This is called with an object. Read more about the properties of this object
+in the section "Child Callback Function"
 
-##### prop getters
+## Control Props
 
+downshift manages its own state internally and calls your `onChange` and
+`onStateChange` handlers with any relevant changes. The state that downshift
+manages includes: `isOpen`, `selectedItem`, `inputValue`, and
+`highlightedIndex`. Your child callback function (read more below) can be used
+to manipulate this state from within the render function and can likely support
+many of your use cases.
+
+However, if more control is needed, you can pass any of these pieces of state as
+a prop (as indicated above) and that state becomes controlled. As soon as
+`this.props[statePropKey] !== undefined`, internally, `downshift` will determine
+its state based on your prop's value rather than its own internal state. You
+will be required to keep the state up to date (this is where `onStateChange`
+comes in really handy), but you can also control the state from anywhere, be
+that state from other components, `redux` (example wanted!), `react-router`
+(example wanted!), or anywhere else.
+
+## Child Callback Function
+
+This is where you render whatever you want to based on the state of `downshift`.
+The function is passed as the child prop:
+`<Downshift>{/* right here*/}</Downshift>`
+
+The properties of this object can be split into three categories as indicated
+below:
+
+### prop getters
+
 These functions are used to apply props to the elements that you render.
@@ -287,3 +319,3 @@ This gives you maximum flexibility to render what, when, and wherever you like.
 
-##### `getRootProps`
+#### `getRootProps`
 
@@ -303,3 +335,3 @@ Most of the time, you can just render a `div` yourself and `Downshift` will
 
-##### `getInputProps`
+#### `getInputProps`
 
@@ -313,3 +345,3 @@ This method should be applied to the `input` you render. It is recommended that
 
-##### `getLabelProps`
+#### `getLabelProps`
 
@@ -329,3 +361,3 @@ This method should be applied to the `label` you render. It is useful for
 
-##### `getItemProps`
+#### `getItemProps`
 
@@ -342,3 +374,3 @@ This method should be applied to any menu items you render. You pass it an object
 
-##### `getButtonProps`
+#### `getButtonProps`
 
@@ -358,4 +390,6 @@ Call this and apply the returned props to a `button`. It allows you to toggle
 
-##### actions
+### actions
 
+These are functions you can call to change the state of the downshift component.
+
 <!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
@@ -374,4 +408,8 @@
 
-##### state
+### state
 
+These are values that represent the current state of the downshift component.
+
+<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
+
 | property           | type              | description                                    |
@@ -392,2 +430,4 @@ |--------------------|-------------------|------------------------------------------------|
 - [Material UI (1.0.0-beta.4) Combobox Using Downshift](https://codesandbox.io/s/QMGq4kAY)
+- [Integration with `GenieJS`](https://codesandbox.io/s/jRLKrxwgl) ([learn more about `genie` here](https://github.com/kentcdodds/genie))
+- [Handling and displaying errors](https://codesandbox.io/s/zKE37vorr)
 
@@ -459,5 +499,10 @@ If you would like to add an example, follow these steps:
 [prs]: http://makeapullrequest.com
-[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
+[chat]: https://gitter.im/paypal/downshift
+[chat-badge]: https://img.shields.io/gitter/room/paypal/downshift.svg?style=flat-square
 [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
 [coc]: https://github.com/paypal/downshift/blob/master/other/CODE_OF_CONDUCT.md
+[gzip-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square
+[size-badge]: http://img.badgesize.io/https://unpkg.com/downshift/dist/downshift.umd.min.js?label=size&style=flat-square
+[unpkg-dist]: https://unpkg.com/downshift/dist/
+[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
 [github-watch-badge]: https://img.shields.io/github/watchers/paypal/downshift.svg?style=social
@@ -464,0 +509,0 @@ [github-watch]: https://github.com/paypal/downshift/watchers

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

Number of lines in readme file

502

increased by9.85%

Worsened metrics

Total package byte prevSize

424168

decreased by-0.23%

Lines of code

5540

decreased by-0.65%

No dependency changes