react-autocomplete - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

build/lib/Autocomplete.js

@@ -78,4 +78,4 @@ 'use strict';
     if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
-      var itemNode = React.findDOMNode(this.refs['item-' + this.state.highlightedIndex]);
-      var menuNode = React.findDOMNode(this.refs.menu);
+      var itemNode = this.refs['item-' + this.state.highlightedIndex];
+      var menuNode = this.refs.menu;
       scrollIntoView(itemNode, menuNode, { onlyScrollIfNeeded: true });
@@ -148,3 +148,3 @@ }
         }, function () {
-          React.findDOMNode(_this2.refs.input).select();
+          _this2.refs.input.select();
         });
@@ -158,4 +158,4 @@ } else {
         }, function () {
-          //React.findDOMNode(this.refs.input).focus() // TODO: file issue
-          React.findDOMNode(_this2.refs.input).setSelectionRange(_this2.state.value.length, _this2.state.value.length);
+          //this.refs.input.focus() // TODO: file issue
+          _this2.refs.input.setSelectionRange(_this2.state.value.length, _this2.state.value.length);
           _this2.props.onSelect(_this2.state.value, item);
@@ -206,3 +206,3 @@ });
     if (itemValueDoesMatch) {
-      var node = React.findDOMNode(this.refs.input);
+      var node = this.refs.input;
       var setSelection = function setSelection() {
@@ -217,3 +217,3 @@ node.value = itemValue;
   setMenuPositions: function setMenuPositions() {
-    var node = React.findDOMNode(this.refs.input);
+    var node = this.refs.input;
     var rect = node.getBoundingClientRect();
@@ -244,3 +244,3 @@ var computedStyle = getComputedStyle(node);
       _this5.props.onSelect(_this5.state.value, item);
-      React.findDOMNode(_this5.refs.input).focus();
+      _this5.refs.input.focus();
       _this5.setIgnoreBlur(false);
@@ -281,13 +281,2 @@ });
 
-  getActiveItemValue: function getActiveItemValue() {
-    if (this.state.highlightedIndex === null) return '';else {
-      var item = this.props.items[this.state.highlightedIndex];
-      // items can match when we maybeAutoCompleteText, but then get replaced by the app
-      // for the next render? I think? TODO: file an issue (alab -> enter -> type 'a' for
-      // alabamaa and then an error would happen w/o this guard, pretty sure there's a
-      // better way)
-      return item ? this.props.getItemValue(item) : '';
-    }
-  },
-
   handleInputBlur: function handleInputBlur() {
@@ -326,3 +315,2 @@ if (this._ignoreBlur) return;
         'aria-autocomplete': 'both',
-        'aria-label': this.getActiveItemValue(),
         ref: 'input',
@@ -329,0 +317,0 @@ onFocus: this.handleInputFocus,

build/package.json

 {
   "name": "react-autocomplete",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Accessible, extensible, Autocomplete for React.js",
@@ -5,0 +5,0 @@ "main": "./build/lib/index.js",

build/README.md

@@ -8,2 +8,5 @@ React Autocomplete
 
+Trying to settle on the right API, and then focus hard on accessibility,
+there are a few missing bits right now.
+
 Stuff we need help with:
@@ -16,1 +19,2 @@
 
+

dist/react-autocomplete.js

@@ -150,4 +150,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
-	      var itemNode = React.findDOMNode(this.refs['item-' + this.state.highlightedIndex]);
-	      var menuNode = React.findDOMNode(this.refs.menu);
+	      var itemNode = this.refs['item-' + this.state.highlightedIndex];
+	      var menuNode = this.refs.menu;
 	      scrollIntoView(itemNode, menuNode, { onlyScrollIfNeeded: true });
@@ -220,3 +220,3 @@ }
 	        }, function () {
-	          React.findDOMNode(_this2.refs.input).select();
+	          _this2.refs.input.select();
 	        });
@@ -230,4 +230,4 @@ } else {
 	        }, function () {
-	          //React.findDOMNode(this.refs.input).focus() // TODO: file issue
-	          React.findDOMNode(_this2.refs.input).setSelectionRange(_this2.state.value.length, _this2.state.value.length);
+	          //this.refs.input.focus() // TODO: file issue
+	          _this2.refs.input.setSelectionRange(_this2.state.value.length, _this2.state.value.length);
 	          _this2.props.onSelect(_this2.state.value, item);
@@ -278,3 +278,3 @@ });
 	    if (itemValueDoesMatch) {
-	      var node = React.findDOMNode(this.refs.input);
+	      var node = this.refs.input;
 	      var setSelection = function setSelection() {
@@ -289,3 +289,3 @@ node.value = itemValue;
 	  setMenuPositions: function setMenuPositions() {
-	    var node = React.findDOMNode(this.refs.input);
+	    var node = this.refs.input;
 	    var rect = node.getBoundingClientRect();
@@ -316,3 +316,3 @@ var computedStyle = getComputedStyle(node);
 	      _this5.props.onSelect(_this5.state.value, item);
-	      React.findDOMNode(_this5.refs.input).focus();
+	      _this5.refs.input.focus();
 	      _this5.setIgnoreBlur(false);
@@ -353,13 +353,2 @@ });
 	
-	  getActiveItemValue: function getActiveItemValue() {
-	    if (this.state.highlightedIndex === null) return '';else {
-	      var item = this.props.items[this.state.highlightedIndex];
-	      // items can match when we maybeAutoCompleteText, but then get replaced by the app
-	      // for the next render? I think? TODO: file an issue (alab -> enter -> type 'a' for
-	      // alabamaa and then an error would happen w/o this guard, pretty sure there's a
-	      // better way)
-	      return item ? this.props.getItemValue(item) : '';
-	    }
-	  },
-	
 	  handleInputBlur: function handleInputBlur() {
@@ -395,3 +384,2 @@ if (this._ignoreBlur) return;
 	      'aria-autocomplete': 'both',
-	      'aria-label': this.getActiveItemValue(),
 	      ref: 'input',
@@ -398,0 +386,0 @@ onFocus: this.handleInputFocus,

dist/react-autocomplete.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.ReactAutocomplete=e(require("React")):t.ReactAutocomplete=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";t.exports=n(1)},function(t,e,n){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},i=n(2),r=n(3),l=[],s=i.createClass({displayName:"Autocomplete",propTypes:{initialValue:i.PropTypes.any,onChange:i.PropTypes.func,onSelect:i.PropTypes.func,shouldItemRender:i.PropTypes.func,renderItem:i.PropTypes.func.isRequired,menuStyle:i.PropTypes.object,inputProps:i.PropTypes.object},getDefaultProps:function(){return{inputProps:{},onChange:function(){},onSelect:function(t,e){},renderMenu:function(t,e,n){return i.createElement("div",{style:o({},n,this.menuStyle),children:t})},shouldItemRender:function(){return!0},menuStyle:{borderRadius:"3px",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.1)",background:"rgba(255, 255, 255, 0.9)",padding:"2px 0",fontSize:"90%",position:"fixed",overflow:"auto",maxHeight:"50%"}}},getInitialState:function(){return{value:this.props.initialValue||"",isOpen:!1,highlightedIndex:null}},componentWillMount:function(){this._ignoreBlur=!1,this._performAutoCompleteOnUpdate=!1,this._performAutoCompleteOnKeyUp=!1},componentWillReceiveProps:function(){this._performAutoCompleteOnUpdate=!0},componentDidUpdate:function(t,e){this.state.isOpen===!0&&e.isOpen===!1&&this.setMenuPositions(),this.state.isOpen&&this._performAutoCompleteOnUpdate&&(this._performAutoCompleteOnUpdate=!1,this.maybeAutoCompleteText()),this.maybeScrollItemIntoView()},maybeScrollItemIntoView:function(){if(this.state.isOpen===!0&&null!==this.state.highlightedIndex){var t=i.findDOMNode(this.refs["item-"+this.state.highlightedIndex]),e=i.findDOMNode(this.refs.menu);r(t,e,{onlyScrollIfNeeded:!0})}},handleKeyDown:function(t){this.keyDownHandlers[t.key]?this.keyDownHandlers[t.key].call(this,t):this.setState({highlightedIndex:null,isOpen:!0})},handleChange:function(t){var e=this;this._performAutoCompleteOnKeyUp=!0,this.setState({value:t.target.value},function(){e.props.onChange(t,e.state.value)})},handleKeyUp:function(){this._performAutoCompleteOnKeyUp&&(this._performAutoCompleteOnKeyUp=!1,this.maybeAutoCompleteText())},keyDownHandlers:{ArrowDown:function(){event.preventDefault();var t=this.state.highlightedIndex,e=null===t||t===this.getFilteredItems().length-1?0:t+1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:e,isOpen:!0})},ArrowUp:function(t){t.preventDefault();var e=this.state.highlightedIndex,n=0===e||null===e?this.getFilteredItems().length-1:e-1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:n,isOpen:!0})},Enter:function(t){var e=this;if(this.state.isOpen!==!1)if(null==this.state.highlightedIndex)this.setState({isOpen:!1},function(){i.findDOMNode(e.refs.input).select()});else{var n=this.getFilteredItems()[this.state.highlightedIndex];this.setState({value:this.props.getItemValue(n),isOpen:!1,highlightedIndex:null},function(){i.findDOMNode(e.refs.input).setSelectionRange(e.state.value.length,e.state.value.length),e.props.onSelect(e.state.value,n)})}},Escape:function(t){this.setState({highlightedIndex:null,isOpen:!1})}},getFilteredItems:function(){var t=this,e=this.props.items;return this.props.shouldItemRender&&(e=e.filter(function(e){return t.props.shouldItemRender(e,t.state.value)})),this.props.sortItems&&e.sort(function(e,n){return t.props.sortItems(e,n,t.state.value)}),e},maybeAutoCompleteText:function(){var t=this;if(""!==this.state.value){var e=this.state.highlightedIndex,n=this.getFilteredItems();if(0!==n.length){var o=null!==e?n[e]:n[0],r=this.props.getItemValue(o),l=0===r.toLowerCase().indexOf(this.state.value.toLowerCase());if(l){var s=i.findDOMNode(this.refs.input),u=function(){s.value=r,s.setSelectionRange(t.state.value.length,r.length)};null===e?this.setState({highlightedIndex:0},u):u()}}}},setMenuPositions:function(){var t=i.findDOMNode(this.refs.input),e=t.getBoundingClientRect(),n=getComputedStyle(t),o=parseInt(n.marginBottom,10),r=parseInt(n.marginLeft,10),l=parseInt(n.marginRight,10);this.setState({menuTop:e.bottom+o,menuLeft:e.left+r,menuWidth:e.width+r+l})},highlightItemFromMouse:function(t){this.setState({highlightedIndex:t})},selectItemFromMouse:function(t){var e=this;this.setState({value:this.props.getItemValue(t),isOpen:!1,highlightedIndex:null},function(){e.props.onSelect(e.state.value,t),i.findDOMNode(e.refs.input).focus(),e.setIgnoreBlur(!1)})},setIgnoreBlur:function(t){this._ignoreBlur=t},renderMenu:function(){var t=this,e=this.getFilteredItems().map(function(e,n){var o=t.props.renderItem(e,t.state.highlightedIndex===n,{cursor:"default"});return i.cloneElement(o,{onMouseDown:function(){return t.setIgnoreBlur(!0)},onMouseEnter:function(){return t.highlightItemFromMouse(n)},onClick:function(){return t.selectItemFromMouse(e)},ref:"item-"+n})}),n={left:this.state.menuLeft,top:this.state.menuTop,minWidth:this.state.menuWidth},o=this.props.renderMenu(e,this.state.value,n);return i.cloneElement(o,{ref:"menu"})},getActiveItemValue:function(){if(null===this.state.highlightedIndex)return"";var t=this.props.items[this.state.highlightedIndex];return t?this.props.getItemValue(t):""},handleInputBlur:function(){this._ignoreBlur||this.setState({isOpen:!1,highlightedIndex:null})},handleInputFocus:function(){this._ignoreBlur||this.setState({isOpen:!0})},handleInputClick:function(){this.state.isOpen===!1&&this.setState({isOpen:!0})},render:function(){var t=this;return this.props.debug&&l.push({id:l.length,state:this.state}),i.createElement("div",{style:{display:"inline-block"}},i.createElement("input",o({},this.props.inputProps,{role:"combobox","aria-autocomplete":"both","aria-label":this.getActiveItemValue(),ref:"input",onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:function(e){return t.handleChange(e)},onKeyDown:function(e){return t.handleKeyDown(e)},onKeyUp:function(e){return t.handleKeyUp(e)},onClick:this.handleInputClick,value:this.state.value})),this.state.isOpen&&this.renderMenu(),this.props.debug&&i.createElement("pre",{style:{marginLeft:300}},JSON.stringify(l.slice(l.length-5,l.length),null,2)))}});t.exports=s},function(e,n){e.exports=t},function(t,e,n){t.exports=n(4)},function(t,e,n){function o(t,e,n){n=n||{},9===e.nodeType&&(e=i.getWindow(e));var o=n.allowHorizontalScroll,r=n.onlyScrollIfNeeded,l=n.alignWithTop,s=n.alignWithLeft;o=void 0===o?!0:o;var u,p,a,f,h,d,c,g,m,v,y=i.isWindow(e),I=i.offset(t),w=i.outerHeight(t),x=i.outerWidth(t);y?(c=e,v=i.height(c),m=i.width(c),g={left:i.scrollLeft(c),top:i.scrollTop(c)},h={left:I.left-g.left,top:I.top-g.top},d={left:I.left+x-(g.left+m),top:I.top+w-(g.top+v)},f=g):(u=i.offset(e),p=e.clientHeight,a=e.clientWidth,f={left:e.scrollLeft,top:e.scrollTop},h={left:I.left-(u.left+(parseFloat(i.css(e,"borderLeftWidth"))||0)),top:I.top-(u.top+(parseFloat(i.css(e,"borderTopWidth"))||0))},d={left:I.left+x-(u.left+a+(parseFloat(i.css(e,"borderRightWidth"))||0)),top:I.top+w-(u.top+p+(parseFloat(i.css(e,"borderBottomWidth"))||0))}),h.top<0||d.top>0?l===!0?i.scrollTop(e,f.top+h.top):l===!1?i.scrollTop(e,f.top+d.top):h.top<0?i.scrollTop(e,f.top+h.top):i.scrollTop(e,f.top+d.top):r||(l=void 0===l?!0:!!l,l?i.scrollTop(e,f.top+h.top):i.scrollTop(e,f.top+d.top)),o&&(h.left<0||d.left>0?s===!0?i.scrollLeft(e,f.left+h.left):s===!1?i.scrollLeft(e,f.left+d.left):h.left<0?i.scrollLeft(e,f.left+h.left):i.scrollLeft(e,f.left+d.left):r||(s=void 0===s?!0:!!s,s?i.scrollLeft(e,f.left+h.left):i.scrollLeft(e,f.left+d.left)))}var i=n(5);t.exports=o},function(t,e){function n(t){var e,n,o,i=t.ownerDocument,r=i.body,l=i&&i.documentElement;return e=t.getBoundingClientRect(),n=e.left,o=e.top,n-=l.clientLeft||r.clientLeft||0,o-=l.clientTop||r.clientTop||0,{left:n,top:o}}function o(t,e){var n=t["page"+(e?"Y":"X")+"Offset"],o="scroll"+(e?"Top":"Left");if("number"!=typeof n){var i=t.document;n=i.documentElement[o],"number"!=typeof n&&(n=i.body[o])}return n}function i(t){return o(t)}function r(t){return o(t,!0)}function l(t){var e=n(t),o=t.ownerDocument,l=o.defaultView||o.parentWindow;return e.left+=i(l),e.top+=r(l),e}function s(t,e,n){var o="",i=t.ownerDocument;return(n=n||i.defaultView.getComputedStyle(t,null))&&(o=n.getPropertyValue(e)||n[e]),o}function u(t,e){var n=t[O]&&t[O][e];if(x.test(n)&&!b.test(e)){var o=t.style,i=o[T],r=t[S][T];t[S][T]=t[O][T],o[T]="fontSize"===e?"1em":n||0,n=o.pixelLeft+C,o[T]=i,t[S][T]=r}return""===n?"auto":n}function p(t,e){"static"===v(t,"position")&&(t.style.position="relative");var n,o,i=l(t),r={};for(o in e)n=parseFloat(v(t,o))||0,r[o]=n+e[o]-i[o];v(t,r)}function a(t,e){for(var n=0;n<t.length;n++)e(t[n])}function f(t){return"border-box"===I(t,"boxSizing")}function h(t,e,n){var o,i={},r=t.style;for(o in e)i[o]=r[o],r[o]=e[o];n.call(t);for(o in e)r[o]=i[o]}function d(t,e,n){var o,i,r,l=0;for(i=0;i<e.length;i++)if(o=e[i])for(r=0;r<n.length;r++){var s;s="border"===o?o+n[r]+"Width":o+n[r],l+=parseFloat(I(t,s))||0}return l}function c(t){return null!=t&&t==t.window}function g(t,e,n){if(c(t))return"width"===e?A.viewportWidth(t):A.viewportHeight(t);if(9===t.nodeType)return"width"===e?A.docWidth(t):A.docHeight(t);var o="width"===e?["Left","Right"]:["Top","Bottom"],i="width"===e?t.offsetWidth:t.offsetHeight,r=I(t),l=f(t,r),s=0;(null==i||0>=i)&&(i=void 0,s=I(t,e),(null==s||Number(s)<0)&&(s=t.style[e]||0),s=parseFloat(s)||0),void 0===n&&(n=l?M:L);var u=void 0!==i||l,p=i||s;return n===L?u?p-d(t,["border","padding"],o,r):s:u?p+(n===M?0:n===D?-d(t,["border"],o,r):d(t,["margin"],o,r)):s+d(t,W.slice(n),o,r)}function m(t){var e,n=arguments;return 0!==t.offsetWidth?e=g.apply(void 0,n):h(t,F,function(){e=g.apply(void 0,n)}),e}function v(t,e,n){if("object"!=typeof e)return"undefined"==typeof n?I(t,e):("number"==typeof n&&(n+="px"),void(t.style[e]=n));for(var o in e)v(t,o,e[o])}function y(t,e){for(var n in e)t[n]=e[n];return t}var I,w=/[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source,x=new RegExp("^("+w+")(?!px)[a-z%]+$","i"),b=/^(top|right|bottom|left)$/,O="currentStyle",S="runtimeStyle",T="left",C="px";"undefined"!=typeof window&&(I=window.getComputedStyle?s:u);var W=["margin","border","padding"],L=-1,D=2,M=1,R=0,A={};a(["Width","Height"],function(t){A["doc"+t]=function(e){var n=e.document;return Math.max(n.documentElement["scroll"+t],n.body["scroll"+t],A["viewport"+t](n))},A["viewport"+t]=function(e){var n="client"+t,o=e.document,i=o.body,r=o.documentElement,l=r[n];return"CSS1Compat"===o.compatMode&&l||i&&i[n]||l}});var F={position:"absolute",visibility:"hidden",display:"block"};a(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);A["outer"+e]=function(e,n){return e&&m(e,t,n?R:M)};var n="width"===t?["Left","Right"]:["Top","Bottom"];A[t]=function(e,o){if(void 0===o)return e&&m(e,t,L);if(e){var i=I(e),r=f(e);return r&&(o+=d(e,["padding","border"],n,i)),v(e,t,o)}}});var B=t.exports={getWindow:function(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow},offset:function(t,e){return"undefined"==typeof e?l(t):void p(t,e)},isWindow:c,each:a,css:v,clone:function(t){var e={};for(var n in t)e[n]=t[n];var o=t.overflow;if(o)for(n in t)e.overflow[n]=t.overflow[n];return e},mix:y,scrollLeft:function(t,e){if(c(t)){if(void 0===e)return i(t);window.scrollTo(e,r(t))}else{if(void 0===e)return t.scrollLeft;t.scrollLeft=e}},scrollTop:function(t,e){if(c(t)){if(void 0===e)return r(t);window.scrollTo(i(t),e)}else{if(void 0===e)return t.scrollTop;t.scrollTop=e}},merge:function(){for(var t={},e=0;e<arguments.length;e++)B.mix(t,arguments[e]);return t},viewportWidth:0,viewportHeight:0};y(B,A)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.ReactAutocomplete=e(require("React")):t.ReactAutocomplete=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";t.exports=n(1)},function(t,e,n){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},i=n(2),r=n(3),l=[],s=i.createClass({displayName:"Autocomplete",propTypes:{initialValue:i.PropTypes.any,onChange:i.PropTypes.func,onSelect:i.PropTypes.func,shouldItemRender:i.PropTypes.func,renderItem:i.PropTypes.func.isRequired,menuStyle:i.PropTypes.object,inputProps:i.PropTypes.object},getDefaultProps:function(){return{inputProps:{},onChange:function(){},onSelect:function(t,e){},renderMenu:function(t,e,n){return i.createElement("div",{style:o({},n,this.menuStyle),children:t})},shouldItemRender:function(){return!0},menuStyle:{borderRadius:"3px",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.1)",background:"rgba(255, 255, 255, 0.9)",padding:"2px 0",fontSize:"90%",position:"fixed",overflow:"auto",maxHeight:"50%"}}},getInitialState:function(){return{value:this.props.initialValue||"",isOpen:!1,highlightedIndex:null}},componentWillMount:function(){this._ignoreBlur=!1,this._performAutoCompleteOnUpdate=!1,this._performAutoCompleteOnKeyUp=!1},componentWillReceiveProps:function(){this._performAutoCompleteOnUpdate=!0},componentDidUpdate:function(t,e){this.state.isOpen===!0&&e.isOpen===!1&&this.setMenuPositions(),this.state.isOpen&&this._performAutoCompleteOnUpdate&&(this._performAutoCompleteOnUpdate=!1,this.maybeAutoCompleteText()),this.maybeScrollItemIntoView()},maybeScrollItemIntoView:function(){if(this.state.isOpen===!0&&null!==this.state.highlightedIndex){var t=this.refs["item-"+this.state.highlightedIndex],e=this.refs.menu;r(t,e,{onlyScrollIfNeeded:!0})}},handleKeyDown:function(t){this.keyDownHandlers[t.key]?this.keyDownHandlers[t.key].call(this,t):this.setState({highlightedIndex:null,isOpen:!0})},handleChange:function(t){var e=this;this._performAutoCompleteOnKeyUp=!0,this.setState({value:t.target.value},function(){e.props.onChange(t,e.state.value)})},handleKeyUp:function(){this._performAutoCompleteOnKeyUp&&(this._performAutoCompleteOnKeyUp=!1,this.maybeAutoCompleteText())},keyDownHandlers:{ArrowDown:function(){event.preventDefault();var t=this.state.highlightedIndex,e=null===t||t===this.getFilteredItems().length-1?0:t+1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:e,isOpen:!0})},ArrowUp:function(t){t.preventDefault();var e=this.state.highlightedIndex,n=0===e||null===e?this.getFilteredItems().length-1:e-1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:n,isOpen:!0})},Enter:function(t){var e=this;if(this.state.isOpen!==!1)if(null==this.state.highlightedIndex)this.setState({isOpen:!1},function(){e.refs.input.select()});else{var n=this.getFilteredItems()[this.state.highlightedIndex];this.setState({value:this.props.getItemValue(n),isOpen:!1,highlightedIndex:null},function(){e.refs.input.setSelectionRange(e.state.value.length,e.state.value.length),e.props.onSelect(e.state.value,n)})}},Escape:function(t){this.setState({highlightedIndex:null,isOpen:!1})}},getFilteredItems:function(){var t=this,e=this.props.items;return this.props.shouldItemRender&&(e=e.filter(function(e){return t.props.shouldItemRender(e,t.state.value)})),this.props.sortItems&&e.sort(function(e,n){return t.props.sortItems(e,n,t.state.value)}),e},maybeAutoCompleteText:function(){var t=this;if(""!==this.state.value){var e=this.state.highlightedIndex,n=this.getFilteredItems();if(0!==n.length){var o=null!==e?n[e]:n[0],i=this.props.getItemValue(o),r=0===i.toLowerCase().indexOf(this.state.value.toLowerCase());if(r){var l=this.refs.input,s=function(){l.value=i,l.setSelectionRange(t.state.value.length,i.length)};null===e?this.setState({highlightedIndex:0},s):s()}}}},setMenuPositions:function(){var t=this.refs.input,e=t.getBoundingClientRect(),n=getComputedStyle(t),o=parseInt(n.marginBottom,10),i=parseInt(n.marginLeft,10),r=parseInt(n.marginRight,10);this.setState({menuTop:e.bottom+o,menuLeft:e.left+i,menuWidth:e.width+i+r})},highlightItemFromMouse:function(t){this.setState({highlightedIndex:t})},selectItemFromMouse:function(t){var e=this;this.setState({value:this.props.getItemValue(t),isOpen:!1,highlightedIndex:null},function(){e.props.onSelect(e.state.value,t),e.refs.input.focus(),e.setIgnoreBlur(!1)})},setIgnoreBlur:function(t){this._ignoreBlur=t},renderMenu:function(){var t=this,e=this.getFilteredItems().map(function(e,n){var o=t.props.renderItem(e,t.state.highlightedIndex===n,{cursor:"default"});return i.cloneElement(o,{onMouseDown:function(){return t.setIgnoreBlur(!0)},onMouseEnter:function(){return t.highlightItemFromMouse(n)},onClick:function(){return t.selectItemFromMouse(e)},ref:"item-"+n})}),n={left:this.state.menuLeft,top:this.state.menuTop,minWidth:this.state.menuWidth},o=this.props.renderMenu(e,this.state.value,n);return i.cloneElement(o,{ref:"menu"})},handleInputBlur:function(){this._ignoreBlur||this.setState({isOpen:!1,highlightedIndex:null})},handleInputFocus:function(){this._ignoreBlur||this.setState({isOpen:!0})},handleInputClick:function(){this.state.isOpen===!1&&this.setState({isOpen:!0})},render:function(){var t=this;return this.props.debug&&l.push({id:l.length,state:this.state}),i.createElement("div",{style:{display:"inline-block"}},i.createElement("input",o({},this.props.inputProps,{role:"combobox","aria-autocomplete":"both",ref:"input",onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:function(e){return t.handleChange(e)},onKeyDown:function(e){return t.handleKeyDown(e)},onKeyUp:function(e){return t.handleKeyUp(e)},onClick:this.handleInputClick,value:this.state.value})),this.state.isOpen&&this.renderMenu(),this.props.debug&&i.createElement("pre",{style:{marginLeft:300}},JSON.stringify(l.slice(l.length-5,l.length),null,2)))}});t.exports=s},function(e,n){e.exports=t},function(t,e,n){t.exports=n(4)},function(t,e,n){function o(t,e,n){n=n||{},9===e.nodeType&&(e=i.getWindow(e));var o=n.allowHorizontalScroll,r=n.onlyScrollIfNeeded,l=n.alignWithTop,s=n.alignWithLeft;o=void 0===o?!0:o;var u,p,a,f,h,c,d,m,g,v,y=i.isWindow(e),w=i.offset(t),I=i.outerHeight(t),x=i.outerWidth(t);y?(d=e,v=i.height(d),g=i.width(d),m={left:i.scrollLeft(d),top:i.scrollTop(d)},h={left:w.left-m.left,top:w.top-m.top},c={left:w.left+x-(m.left+g),top:w.top+I-(m.top+v)},f=m):(u=i.offset(e),p=e.clientHeight,a=e.clientWidth,f={left:e.scrollLeft,top:e.scrollTop},h={left:w.left-(u.left+(parseFloat(i.css(e,"borderLeftWidth"))||0)),top:w.top-(u.top+(parseFloat(i.css(e,"borderTopWidth"))||0))},c={left:w.left+x-(u.left+a+(parseFloat(i.css(e,"borderRightWidth"))||0)),top:w.top+I-(u.top+p+(parseFloat(i.css(e,"borderBottomWidth"))||0))}),h.top<0||c.top>0?l===!0?i.scrollTop(e,f.top+h.top):l===!1?i.scrollTop(e,f.top+c.top):h.top<0?i.scrollTop(e,f.top+h.top):i.scrollTop(e,f.top+c.top):r||(l=void 0===l?!0:!!l,l?i.scrollTop(e,f.top+h.top):i.scrollTop(e,f.top+c.top)),o&&(h.left<0||c.left>0?s===!0?i.scrollLeft(e,f.left+h.left):s===!1?i.scrollLeft(e,f.left+c.left):h.left<0?i.scrollLeft(e,f.left+h.left):i.scrollLeft(e,f.left+c.left):r||(s=void 0===s?!0:!!s,s?i.scrollLeft(e,f.left+h.left):i.scrollLeft(e,f.left+c.left)))}var i=n(5);t.exports=o},function(t,e){function n(t){var e,n,o,i=t.ownerDocument,r=i.body,l=i&&i.documentElement;return e=t.getBoundingClientRect(),n=e.left,o=e.top,n-=l.clientLeft||r.clientLeft||0,o-=l.clientTop||r.clientTop||0,{left:n,top:o}}function o(t,e){var n=t["page"+(e?"Y":"X")+"Offset"],o="scroll"+(e?"Top":"Left");if("number"!=typeof n){var i=t.document;n=i.documentElement[o],"number"!=typeof n&&(n=i.body[o])}return n}function i(t){return o(t)}function r(t){return o(t,!0)}function l(t){var e=n(t),o=t.ownerDocument,l=o.defaultView||o.parentWindow;return e.left+=i(l),e.top+=r(l),e}function s(t,e,n){var o="",i=t.ownerDocument;return(n=n||i.defaultView.getComputedStyle(t,null))&&(o=n.getPropertyValue(e)||n[e]),o}function u(t,e){var n=t[S]&&t[S][e];if(x.test(n)&&!b.test(e)){var o=t.style,i=o[C],r=t[T][C];t[T][C]=t[S][C],o[C]="fontSize"===e?"1em":n||0,n=o.pixelLeft+O,o[C]=i,t[T][C]=r}return""===n?"auto":n}function p(t,e){"static"===v(t,"position")&&(t.style.position="relative");var n,o,i=l(t),r={};for(o in e)n=parseFloat(v(t,o))||0,r[o]=n+e[o]-i[o];v(t,r)}function a(t,e){for(var n=0;n<t.length;n++)e(t[n])}function f(t){return"border-box"===w(t,"boxSizing")}function h(t,e,n){var o,i={},r=t.style;for(o in e)i[o]=r[o],r[o]=e[o];n.call(t);for(o in e)r[o]=i[o]}function c(t,e,n){var o,i,r,l=0;for(i=0;i<e.length;i++)if(o=e[i])for(r=0;r<n.length;r++){var s;s="border"===o?o+n[r]+"Width":o+n[r],l+=parseFloat(w(t,s))||0}return l}function d(t){return null!=t&&t==t.window}function m(t,e,n){if(d(t))return"width"===e?B.viewportWidth(t):B.viewportHeight(t);if(9===t.nodeType)return"width"===e?B.docWidth(t):B.docHeight(t);var o="width"===e?["Left","Right"]:["Top","Bottom"],i="width"===e?t.offsetWidth:t.offsetHeight,r=w(t),l=f(t,r),s=0;(null==i||0>=i)&&(i=void 0,s=w(t,e),(null==s||Number(s)<0)&&(s=t.style[e]||0),s=parseFloat(s)||0),void 0===n&&(n=l?F:L);var u=void 0!==i||l,p=i||s;return n===L?u?p-c(t,["border","padding"],o,r):s:u?p+(n===F?0:n===R?-c(t,["border"],o,r):c(t,["margin"],o,r)):s+c(t,W.slice(n),o,r)}function g(t){var e,n=arguments;return 0!==t.offsetWidth?e=m.apply(void 0,n):h(t,D,function(){e=m.apply(void 0,n)}),e}function v(t,e,n){if("object"!=typeof e)return"undefined"==typeof n?w(t,e):("number"==typeof n&&(n+="px"),void(t.style[e]=n));for(var o in e)v(t,o,e[o])}function y(t,e){for(var n in e)t[n]=e[n];return t}var w,I=/[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source,x=new RegExp("^("+I+")(?!px)[a-z%]+$","i"),b=/^(top|right|bottom|left)$/,S="currentStyle",T="runtimeStyle",C="left",O="px";"undefined"!=typeof window&&(w=window.getComputedStyle?s:u);var W=["margin","border","padding"],L=-1,R=2,F=1,A=0,B={};a(["Width","Height"],function(t){B["doc"+t]=function(e){var n=e.document;return Math.max(n.documentElement["scroll"+t],n.body["scroll"+t],B["viewport"+t](n))},B["viewport"+t]=function(e){var n="client"+t,o=e.document,i=o.body,r=o.documentElement,l=r[n];return"CSS1Compat"===o.compatMode&&l||i&&i[n]||l}});var D={position:"absolute",visibility:"hidden",display:"block"};a(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);B["outer"+e]=function(e,n){return e&&g(e,t,n?A:F)};var n="width"===t?["Left","Right"]:["Top","Bottom"];B[t]=function(e,o){if(void 0===o)return e&&g(e,t,L);if(e){var i=w(e),r=f(e);return r&&(o+=c(e,["padding","border"],n,i)),v(e,t,o)}}});var P=t.exports={getWindow:function(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow},offset:function(t,e){return"undefined"==typeof e?l(t):void p(t,e)},isWindow:d,each:a,css:v,clone:function(t){var e={};for(var n in t)e[n]=t[n];var o=t.overflow;if(o)for(n in t)e.overflow[n]=t.overflow[n];return e},mix:y,scrollLeft:function(t,e){if(d(t)){if(void 0===e)return i(t);window.scrollTo(e,r(t))}else{if(void 0===e)return t.scrollLeft;t.scrollLeft=e}},scrollTop:function(t,e){if(d(t)){if(void 0===e)return r(t);window.scrollTo(i(t),e)}else{if(void 0===e)return t.scrollTop;t.scrollTop=e}},merge:function(){for(var t={},e=0;e<arguments.length;e++)P.mix(t,arguments[e]);return t},viewportWidth:0,viewportHeight:0};y(P,B)}])});
 //# sourceMappingURL=react-autocomplete.min.js.map

lib/Autocomplete.js

@@ -72,4 +72,4 @@ const React = require('react')
     if (this.state.isOpen === true && this.state.highlightedIndex !== null) {
-      var itemNode = React.findDOMNode(this.refs[`item-${this.state.highlightedIndex}`])
-      var menuNode = React.findDOMNode(this.refs.menu)
+      var itemNode = this.refs[`item-${this.state.highlightedIndex}`]
+      var menuNode = this.refs.menu
       scrollIntoView(itemNode, menuNode, { onlyScrollIfNeeded: true })
@@ -145,3 +145,3 @@ }
         }, () => {
-          React.findDOMNode(this.refs.input).select()
+          this.refs.input.select()
         })
@@ -156,4 +156,4 @@ }
         }, () => {
-          //React.findDOMNode(this.refs.input).focus() // TODO: file issue
-          React.findDOMNode(this.refs.input).setSelectionRange(
+          //this.refs.input.focus() // TODO: file issue
+          this.refs.input.setSelectionRange(
             this.state.value.length,
@@ -207,3 +207,3 @@ this.state.value.length
     if (itemValueDoesMatch) {
-      var node = React.findDOMNode(this.refs.input)
+      var node = this.refs.input
       var setSelection = () => {
@@ -221,3 +221,3 @@ node.value = itemValue
   setMenuPositions () {
-    var node = React.findDOMNode(this.refs.input)
+    var node = this.refs.input
     var rect = node.getBoundingClientRect()
@@ -246,3 +246,3 @@ var computedStyle = getComputedStyle(node)
       this.props.onSelect(this.state.value, item)
-      React.findDOMNode(this.refs.input).focus()
+      this.refs.input.focus()
       this.setIgnoreBlur(false)
@@ -279,15 +279,2 @@ })
 
-  getActiveItemValue () {
-    if (this.state.highlightedIndex === null)
-      return ''
-    else {
-      var item = this.props.items[this.state.highlightedIndex]
-      // items can match when we maybeAutoCompleteText, but then get replaced by the app
-      // for the next render? I think? TODO: file an issue (alab -> enter -> type 'a' for
-      // alabamaa and then an error would happen w/o this guard, pretty sure there's a
-      // better way)
-      return item ? this.props.getItemValue(item) : ''
-    }
-  },
-
   handleInputBlur () {
@@ -326,3 +313,2 @@ if (this._ignoreBlur)
           aria-autocomplete="both"
-          aria-label={this.getActiveItemValue()}
           ref="input"
@@ -329,0 +315,0 @@ onFocus={this.handleInputFocus}

package.json

 {
   "name": "react-autocomplete",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Accessible, extensible, Autocomplete for React.js",
@@ -25,3 +25,3 @@ "main": "./build/lib/index.js",
     "rackt-cli": "^0.4.0",
-    "react": "^0.13.3"
+    "react": "^0.14.0"
   },
@@ -38,2 +38,2 @@ "tags": [
   }
-}
+}

README.md

@@ -8,2 +8,5 @@ React Autocomplete
 
+Trying to settle on the right API, and then focus hard on accessibility,
+there are a few missing bits right now.
+
 Stuff we need help with:
@@ -16,1 +19,2 @@
 
+

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

19

increased by26.67%

Worsened metrics

Total package byte prevSize

189900

decreased by-2.76%

Lines of code

1490

decreased by-2.36%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes