react-select - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

dist/react-select.js

@@ -10,3 +10,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Select = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
     Input = (typeof window !== "undefined" ? window.AutosizeInput : typeof global !== "undefined" ? global.AutosizeInput : null),
-    classes = require("classnames"),
+    classes = (typeof window !== "undefined" ? window.classnames : typeof global !== "undefined" ? global.classnames : null),
     Value = require("./Value");
@@ -37,2 +37,4 @@
 		onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
+		onFocus: React.PropTypes.func, // onFocus handler: function(event) {}
+		onBlur: React.PropTypes.func, // onBlur handler: function(event) {}
 		className: React.PropTypes.string, // className for the outer element
@@ -43,2 +45,3 @@ filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
 		matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on
+		inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
 
@@ -55,3 +58,3 @@ /*
 
-	getDefaultProps: function () {
+	getDefaultProps: function getDefaultProps() {
 		return {
@@ -76,2 +79,3 @@ value: undefined,
 			matchProp: "any",
+			inputProps: {},
 
@@ -82,3 +86,3 @@ onOptionLabelClick: undefined
 
-	getInitialState: function () {
+	getInitialState: function getInitialState() {
 		return {
@@ -101,3 +105,3 @@ /*
 
-	componentWillMount: function () {
+	componentWillMount: function componentWillMount() {
 		this._optionsCache = {};
@@ -112,3 +116,3 @@ this._optionsFilterString = "";
 
-	componentWillUnmount: function () {
+	componentWillUnmount: function componentWillUnmount() {
 		clearTimeout(this._blurTimeout);
@@ -118,3 +122,3 @@ clearTimeout(this._focusTimeout);
 
-	componentWillReceiveProps: function (newProps) {
+	componentWillReceiveProps: function componentWillReceiveProps(newProps) {
 		if (newProps.value !== this.state.value) {
@@ -131,3 +135,3 @@ this.setState(this.getStateFromValue(newProps.value, newProps.options));
 
-	componentDidUpdate: function () {
+	componentDidUpdate: function componentDidUpdate() {
 		if (this._focusAfterUpdate) {
@@ -157,3 +161,4 @@ clearTimeout(this._blurTimeout);
 
-	getStateFromValue: function (value, options) {
+	getStateFromValue: function getStateFromValue(value, options) {
+
 		if (!options) {
@@ -181,3 +186,4 @@ options = this.state.options;
 
-	initValuesArray: function (values, options) {
+	initValuesArray: function initValuesArray(values, options) {
+
 		if (!Array.isArray(values)) {
@@ -196,3 +202,3 @@ if ("string" === typeof values) {
 
-	setValue: function (value) {
+	setValue: function setValue(value) {
 		this._focusAfterUpdate = true;
@@ -205,3 +211,3 @@ var newState = this.getStateFromValue(value);
 
-	selectValue: function (value) {
+	selectValue: function selectValue(value) {
 		if (!this.props.multi) {
@@ -214,15 +220,15 @@ this.setValue(value);
 
-	addValue: function (value) {
+	addValue: function addValue(value) {
 		this.setValue(this.state.values.concat(value));
 	},
 
-	popValue: function () {
+	popValue: function popValue() {
 		this.setValue(_.initial(this.state.values));
 	},
 
-	removeValue: function (value) {
+	removeValue: function removeValue(value) {
 		this.setValue(_.without(this.state.values, value));
 	},
 
-	clearValue: function (event) {
+	clearValue: function clearValue(event) {
 		// if the event was triggered by a mousedown and not the primary
@@ -236,7 +242,7 @@ // button, ignore it.
 
-	resetValue: function () {
+	resetValue: function resetValue() {
 		this.setValue(this.state.value);
 	},
 
-	getInputNode: function () {
+	getInputNode: function getInputNode() {
 		var input = this.refs.input;
@@ -246,3 +252,3 @@ return this.props.searchable ? input : input.getDOMNode();
 
-	fireChangeEvent: function (newState) {
+	fireChangeEvent: function fireChangeEvent(newState) {
 		if (newState.value !== this.state.value && this.props.onChange) {
@@ -253,3 +259,3 @@ this.props.onChange(newState.value, newState.values);
 
-	handleMouseDown: function (event) {
+	handleMouseDown: function handleMouseDown(event) {
 		// if the event was triggered by a mousedown and not the primary
@@ -273,3 +279,3 @@ // button, or if the component is disabled, ignore it.
 
-	handleInputFocus: function () {
+	handleInputFocus: function handleInputFocus(event) {
 		this.setState({
@@ -280,5 +286,9 @@ isFocused: true,
 		this._openAfterFocus = false;
+
+		if (this.props.onFocus) {
+			this.props.onFocus(event);
+		}
 	},
 
-	handleInputBlur: function (event) {
+	handleInputBlur: function handleInputBlur(event) {
 		this._blurTimeout = setTimeout((function () {
@@ -291,8 +301,13 @@ if (this._focusAfterUpdate) return;
 		}).bind(this), 50);
+
+		if (this.props.onBlur) {
+			this.props.onBlur(event);
+		}
 	},
 
-	handleKeyDown: function (event) {
-		if (this.state.disabled) return;
+	handleKeyDown: function handleKeyDown(event) {
 
-		switch (event.keyCode) {
+		if (this.state.disabled) {
+			return;
+		}switch (event.keyCode) {
 
@@ -346,3 +361,4 @@ case 8:
 
-	handleInputChange: function (event) {
+	handleInputChange: function handleInputChange(event) {
+
 		// assign an internal variable because we need to use
@@ -372,7 +388,10 @@ // the latest value before setState() has completed.
 
-	autoloadAsyncOptions: function () {
+	autoloadAsyncOptions: function autoloadAsyncOptions() {
 		this.loadAsyncOptions("", {}, function () {});
 	},
 
-	loadAsyncOptions: function (input, state) {
+	loadAsyncOptions: function loadAsyncOptions(input, state) {
+
+		var thisRequestId = this._currentRequestId = requestId++;
+
 		for (var i = 0; i <= input.length; i++) {
@@ -390,5 +409,4 @@ var cacheKey = input.slice(0, i);
 
-		var thisRequestId = this._currentRequestId = requestId++;
+		this.props.asyncOptions(input, (function (err, data) {
 
-		this.props.asyncOptions(input, (function (err, data) {
 			this._optionsCache[input] = data;
@@ -407,3 +425,3 @@
 
-	filterOptions: function (options, values) {
+	filterOptions: function filterOptions(options, values) {
 		if (!this.props.searchable) {
@@ -420,6 +438,10 @@ return options;
 		} else {
-			var filterOption = function (op) {
-				if (this.props.multi && _.contains(exclude, op.value)) return false;
-				if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
-				return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && op.value.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && op.label.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
+			var filterOption = function filterOption(op) {
+				if (this.props.multi && _.contains(exclude, op.value)) {
+					return false;
+				}if (this.props.filterOption) {
+					return this.props.filterOption.call(this, op, filterValue);
+				}var valueTest = String(op.value),
+				    labelTest = String(op.label);
+				return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && valueTest.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && labelTest.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && valueTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && labelTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
 			};
@@ -430,7 +452,7 @@ return _.filter(options, filterOption, this);
 
-	selectFocusedOption: function () {
+	selectFocusedOption: function selectFocusedOption() {
 		return this.selectValue(this.state.focusedOption);
 	},
 
-	focusOption: function (op) {
+	focusOption: function focusOption(op) {
 		this.setState({
@@ -441,11 +463,11 @@ focusedOption: op
 
-	focusNextOption: function () {
+	focusNextOption: function focusNextOption() {
 		this.focusAdjacentOption("next");
 	},
 
-	focusPreviousOption: function () {
+	focusPreviousOption: function focusPreviousOption() {
 		this.focusAdjacentOption("previous");
 	},
 
-	focusAdjacentOption: function (dir) {
+	focusAdjacentOption: function focusAdjacentOption(dir) {
 		this._focusedOptionReveal = true;
@@ -494,3 +516,3 @@
 
-	unfocusOption: function (op) {
+	unfocusOption: function unfocusOption(op) {
 		if (this.state.focusedOption === op) {
@@ -503,3 +525,4 @@ this.setState({
 
-	buildMenu: function () {
+	buildMenu: function buildMenu() {
+
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
@@ -535,3 +558,3 @@
 
-	handleOptionLabelClick: function (value, event) {
+	handleOptionLabelClick: function handleOptionLabelClick(value, event) {
 		var handler = this.props.onOptionLabelClick;
@@ -544,3 +567,4 @@
 
-	render: function () {
+	render: function render() {
+
 		var selectClass = classes("Select", this.props.className, {
@@ -580,9 +604,26 @@ "is-multi": this.props.multi,
 		var clear = this.props.clearable && this.state.value && !this.props.disabled ? React.createElement("span", { className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: "&times;" } }) : null;
-		var menu = this.state.isOpen ? React.createElement(
-			"div",
-			{ ref: "menu", onMouseDown: this.handleMouseDown, className: "Select-menu" },
-			this.buildMenu()
-		) : null;
 
-		var commonProps = {
+		var menu;
+		var menuProps;
+		if (this.state.isOpen) {
+			menuProps = {
+				ref: "menu",
+				className: "Select-menu"
+			};
+			if (this.props.multi) {
+				menuProps.onMouseDown = this.handleMouseDown;
+			}
+			menu = React.createElement(
+				"div",
+				{ className: "Select-menu-outer" },
+				React.createElement(
+					"div",
+					menuProps,
+					this.buildMenu()
+				)
+			);
+		}
+
+		var input;
+		var inputProps = _.extend({
 			ref: "input",
@@ -593,11 +634,10 @@ className: "Select-input",
 			onBlur: this.handleInputBlur
-		};
-		var input;
+		}, this.props.inputProps);
 
 		if (this.props.searchable && !this.props.disabled) {
-			input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: "5" }, commonProps));
+			input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: "5" }, inputProps));
 		} else {
 			input = React.createElement(
 				"div",
-				commonProps,
+				inputProps,
 				" "
@@ -629,33 +669,3 @@ );
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./Value":3,"classnames":2}],2:[function(require,module,exports){
-function classNames() {
-	var args = arguments;
-	var classes = [];
-
-	for (var i = 0; i < args.length; i++) {
-		var arg = args[i];
-		if (!arg) {
-			continue;
-		}
-
-		if ('string' === typeof arg || 'number' === typeof arg) {
-			classes.push(arg);
-		} else if ('object' === typeof arg) {
-			for (var key in arg) {
-				if (!arg.hasOwnProperty(key) || !arg[key]) {
-					continue;
-				}
-				classes.push(key);
-			}
-		}
-	}
-	return classes.join(' ');
-}
-
-// safely export classNames in case the script is included directly on a page
-if (typeof module !== 'undefined' && module.exports) {
-	module.exports = classNames;
-}
-
-},{}],3:[function(require,module,exports){
+},{"./Value":2}],2:[function(require,module,exports){
 (function (global){
@@ -675,7 +685,7 @@ "use strict";
 
-	blockEvent: function (event) {
+	blockEvent: function blockEvent(event) {
 		event.stopPropagation();
 	},
 
-	render: function () {
+	render: function render() {
 		var label = this.props.label;
@@ -682,0 +692,0 @@

dist/react-select.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Select=e()}}(function(){return function e(t,s,i){function o(a,l){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!l&&r)return r(a,!0);if(n)return n(a,!0);var p=new Error("Cannot find module '"+a+"'");throw p.code="MODULE_NOT_FOUND",p}var u=s[a]={exports:{}};t[a][0].call(u.exports,function(e){var s=t[a][1][e];return o(s?s:e)},u,u.exports,e,t,s,i)}return s[a].exports}for(var n="function"==typeof require&&require,a=0;a<i.length;a++)o(i[a]);return o}({1:[function(e,t){(function(s){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},o="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,n="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,a="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,l=e("classnames"),r=e("./Value"),p=0,u=n.createClass({displayName:"Select",propTypes:{value:n.PropTypes.any,multi:n.PropTypes.bool,disabled:n.PropTypes.bool,options:n.PropTypes.array,delimiter:n.PropTypes.string,asyncOptions:n.PropTypes.func,autoload:n.PropTypes.bool,placeholder:n.PropTypes.string,noResultsText:n.PropTypes.string,clearable:n.PropTypes.bool,clearValueText:n.PropTypes.string,clearAllText:n.PropTypes.string,searchable:n.PropTypes.bool,searchPromptText:n.PropTypes.string,name:n.PropTypes.string,onChange:n.PropTypes.func,className:n.PropTypes.string,filterOption:n.PropTypes.func,filterOptions:n.PropTypes.func,matchPos:n.PropTypes.string,matchProp:n.PropTypes.string,onOptionLabelClick:n.PropTypes.func},getDefaultProps:function(){return{value:void 0,options:[],disabled:!1,delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchable:!0,searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any",onOptionLabelClick:void 0}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout)},componentWillReceiveProps:function(e){e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options)),JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.getInputNode().focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var e=this.refs.focused.getDOMNode(),t=this.refs.menu.getDOMNode(),s=e.getBoundingClientRect(),i=t.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(t.scrollTop=e.offsetTop+e.clientHeight-t.offsetHeight)}this._focusedOptionReveal=!1}},getStateFromValue:function(e,t){t||(t=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(e,t),i=this.filterOptions(t,s);return{value:s.map(function(e){return e.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){return"string"==typeof e?e=o.findWhere(t,{value:e})||{value:e,label:e}:e}.bind(this))},setValue:function(e){this._focusAfterUpdate=!0;var t=this.getStateFromValue(e);t.isOpen=!1,this.fireChangeEvent(t),this.setState(t)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e)},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(o.initial(this.state.values))},removeValue:function(e){this.setValue(o.without(this.state.values,e))},clearValue:function(e){e&&"mousedown"==e.type&&0!==e.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},getInputNode:function(){var e=this.refs.input;return this.props.searchable?e:e.getDOMNode()},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){this.props.disabled||"mousedown"==e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.state.isFocused?this.setState({isOpen:!0}):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleInputFocus:function(){this.setState({isFocused:!0,isOpen:this.state.isOpen||this._openAfterFocus}),this._openAfterFocus=!1},handleInputBlur:function(){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isOpen:!1,isFocused:!1})}.bind(this),50)},handleKeyDown:function(e){if(!this.state.disabled){switch(e.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(e.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}e.preventDefault()}},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:e.target.value}),this.loadAsyncOptions(e.target.value,{isLoading:!1,isOpen:!0});else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:o.contains(t,this.state.focusedOption)?this.state.focusedOption:t[0]})}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(e,t){for(var s=0;s<=e.length;s++){var i=e.slice(0,s);if(this._optionsCache[i]&&(e===i||this._optionsCache[i].complete)){var n=this._optionsCache[i].options;return void this.setState(o.extend({options:n,filteredOptions:this.filterOptions(n)},t))}}var a=this._currentRequestId=p++;this.props.asyncOptions(e,function(s,i){this._optionsCache[e]=i,a===this._currentRequestId&&this.setState(o.extend({options:i.options,filteredOptions:this.filterOptions(i.options)},t))}.bind(this))},filterOptions:function(e,t){if(!this.props.searchable)return e;var s=this._optionsFilterString,i=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,i);var n=function(e){return this.props.multi&&o.contains(i,e.value)?!1:this.props.filterOption?this.props.filterOption.call(this,e,s):s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&e.value.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&e.label.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&e.value.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&e.label.toLowerCase().substr(0,s.length)===s};return o.filter(e,n,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]});if(t.length){for(var s=-1,i=0;i<t.length;i++)if(this.state.focusedOption===t[i]){s=i;break}var o=t[0];"next"===e&&s>-1&&s<t.length-1?o=t[s+1]:"previous"===e&&(o=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:o})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=o.map(this.state.filteredOptions,function(t){var s=e===t.value,i=l({"Select-option":!0,"is-focused":s}),o=s?"focused":null,a=this.focusOption.bind(this,t),r=this.unfocusOption.bind(this,t),p=this.selectValue.bind(this,t);return n.createElement("div",{ref:o,key:"option-"+t.value,className:i,onMouseEnter:a,onMouseLeave:r,onMouseDown:p,onClick:p},t.label)},this);return t.length?t:n.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){var s=this.props.onOptionLabelClick;s&&s(e,t)},render:function(){var e=l("Select",this.props.className,{"is-multi":this.props.multi,"is-searchable":this.props.searchable,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];this.props.multi&&this.state.values.forEach(function(e){var s=o.extend({key:e.value,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e)},e);t.push(n.createElement(r,s))},this),!this.props.disabled&&(this.state.inputValue||this.props.multi&&t.length)||t.push(n.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,p=this.state.isLoading?n.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,u=this.props.clearable&&this.state.value&&!this.props.disabled?n.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null,c=this.state.isOpen?n.createElement("div",{ref:"menu",onMouseDown:this.handleMouseDown,className:"Select-menu"},this.buildMenu()):null,h={ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};return s=this.props.searchable&&!this.props.disabled?n.createElement(a,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},h)):n.createElement("div",h," "),n.createElement("div",{ref:"wrapper",className:e},n.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),n.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,s,n.createElement("span",{className:"Select-arrow"}),p,u),c)}});t.exports=u}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":3,classnames:2}],2:[function(e,t){function s(){for(var e=arguments,t=[],s=0;s<e.length;s++){var i=e[s];if(i)if("string"==typeof i||"number"==typeof i)t.push(i);else if("object"==typeof i)for(var o in i)i.hasOwnProperty(o)&&i[o]&&t.push(o)}return t.join(" ")}"undefined"!=typeof t&&t.exports&&(t.exports=s)},{}],3:[function(e,t){(function(e){"use strict";var s=("undefined"!=typeof window?window._:"undefined"!=typeof e?e._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null),i=s.createClass({displayName:"Value",propTypes:{label:s.PropTypes.string.isRequired},blockEvent:function(e){e.stopPropagation()},render:function(){var e=this.props.label;return this.props.optionLabelClick&&(e=s.createElement("a",{className:"Select-item-label__a",onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick},e)),s.createElement("div",{className:"Select-item"},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Select=e()}}(function(){return function e(t,s,i){function o(a,l){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!l&&r)return r(a,!0);if(n)return n(a,!0);var p=new Error("Cannot find module '"+a+"'");throw p.code="MODULE_NOT_FOUND",p}var u=s[a]={exports:{}};t[a][0].call(u.exports,function(e){var s=t[a][1][e];return o(s?s:e)},u,u.exports,e,t,s,i)}return s[a].exports}for(var n="function"==typeof require&&require,a=0;a<i.length;a++)o(i[a]);return o}({1:[function(e,t){(function(s){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},o="undefined"!=typeof window?window._:"undefined"!=typeof s?s._:null,n="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,a="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,l="undefined"!=typeof window?window.classnames:"undefined"!=typeof s?s.classnames:null,r=e("./Value"),p=0,u=n.createClass({displayName:"Select",propTypes:{value:n.PropTypes.any,multi:n.PropTypes.bool,disabled:n.PropTypes.bool,options:n.PropTypes.array,delimiter:n.PropTypes.string,asyncOptions:n.PropTypes.func,autoload:n.PropTypes.bool,placeholder:n.PropTypes.string,noResultsText:n.PropTypes.string,clearable:n.PropTypes.bool,clearValueText:n.PropTypes.string,clearAllText:n.PropTypes.string,searchable:n.PropTypes.bool,searchPromptText:n.PropTypes.string,name:n.PropTypes.string,onChange:n.PropTypes.func,onFocus:n.PropTypes.func,onBlur:n.PropTypes.func,className:n.PropTypes.string,filterOption:n.PropTypes.func,filterOptions:n.PropTypes.func,matchPos:n.PropTypes.string,matchProp:n.PropTypes.string,inputProps:n.PropTypes.object,onOptionLabelClick:n.PropTypes.func},getDefaultProps:function(){return{value:void 0,options:[],disabled:!1,delimiter:",",asyncOptions:void 0,autoload:!0,placeholder:"Select...",noResultsText:"No results found",clearable:!0,clearValueText:"Clear value",clearAllText:"Clear all",searchable:!0,searchPromptText:"Type to search",name:void 0,onChange:void 0,className:void 0,matchPos:"any",matchProp:"any",inputProps:{},onOptionLabelClick:void 0}},getInitialState:function(){return{options:this.props.options,isFocused:!1,isOpen:!1,isLoading:!1}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="",this.setState(this.getStateFromValue(this.props.value)),this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout)},componentWillReceiveProps:function(e){e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options)),JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})},componentDidUpdate:function(){if(this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){this.getInputNode().focus(),this._focusAfterUpdate=!1}.bind(this),50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var e=this.refs.focused.getDOMNode(),t=this.refs.menu.getDOMNode(),s=e.getBoundingClientRect(),i=t.getBoundingClientRect();(s.bottom>i.bottom||s.top<i.top)&&(t.scrollTop=e.offsetTop+e.clientHeight-t.offsetHeight)}this._focusedOptionReveal=!1}},getStateFromValue:function(e,t){t||(t=this.state.options),this._optionsFilterString="";var s=this.initValuesArray(e,t),i=this.filterOptions(t,s);return{value:s.map(function(e){return e.value}).join(this.props.delimiter),values:s,inputValue:"",filteredOptions:i,placeholder:!this.props.multi&&s.length?s[0].label:this.props.placeholder,focusedOption:!this.props.multi&&s.length?s[0]:i[0]}},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){return"string"==typeof e?e=o.findWhere(t,{value:e})||{value:e,label:e}:e}.bind(this))},setValue:function(e){this._focusAfterUpdate=!0;var t=this.getStateFromValue(e);t.isOpen=!1,this.fireChangeEvent(t),this.setState(t)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e)},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(o.initial(this.state.values))},removeValue:function(e){this.setValue(o.without(this.state.values,e))},clearValue:function(e){e&&"mousedown"==e.type&&0!==e.button||this.setValue(null)},resetValue:function(){this.setValue(this.state.value)},getInputNode:function(){var e=this.refs.input;return this.props.searchable?e:e.getDOMNode()},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){this.props.disabled||"mousedown"==e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.state.isFocused?this.setState({isOpen:!0}):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleInputFocus:function(e){this.setState({isFocused:!0,isOpen:this.state.isOpen||this._openAfterFocus}),this._openAfterFocus=!1,this.props.onFocus&&this.props.onFocus(e)},handleInputBlur:function(e){this._blurTimeout=setTimeout(function(){this._focusAfterUpdate||this.setState({isOpen:!1,isFocused:!1})}.bind(this),50),this.props.onBlur&&this.props.onBlur(e)},handleKeyDown:function(e){if(!this.state.disabled){switch(e.keyCode){case 8:return void(this.state.inputValue||this.popValue());case 9:if(e.shiftKey||!this.state.isOpen||!this.state.focusedOption)return;this.selectFocusedOption();break;case 13:this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;default:return}e.preventDefault()}},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.asyncOptions)this.setState({isLoading:!0,inputValue:e.target.value}),this.loadAsyncOptions(e.target.value,{isLoading:!1,isOpen:!0});else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:o.contains(t,this.state.focusedOption)?this.state.focusedOption:t[0]})}},autoloadAsyncOptions:function(){this.loadAsyncOptions("",{},function(){})},loadAsyncOptions:function(e,t){for(var s=this._currentRequestId=p++,i=0;i<=e.length;i++){var n=e.slice(0,i);if(this._optionsCache[n]&&(e===n||this._optionsCache[n].complete)){var a=this._optionsCache[n].options;return void this.setState(o.extend({options:a,filteredOptions:this.filterOptions(a)},t))}}this.props.asyncOptions(e,function(i,n){this._optionsCache[e]=n,s===this._currentRequestId&&this.setState(o.extend({options:n.options,filteredOptions:this.filterOptions(n.options)},t))}.bind(this))},filterOptions:function(e,t){if(!this.props.searchable)return e;var s=this._optionsFilterString,i=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,i);var n=function(e){if(this.props.multi&&o.contains(i,e.value))return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),n=String(e.label);return s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.toLowerCase().indexOf(s.toLowerCase())>=0||"value"!==this.props.matchProp&&n.toLowerCase().indexOf(s.toLowerCase())>=0:"label"!==this.props.matchProp&&t.toLowerCase().substr(0,s.length)===s||"value"!==this.props.matchProp&&n.toLowerCase().substr(0,s.length)===s};return o.filter(e,n,this)},selectFocusedOption:function(){return this.selectValue(this.state.focusedOption)},focusOption:function(e){this.setState({focusedOption:e})},focusNextOption:function(){this.focusAdjacentOption("next")},focusPreviousOption:function(){this.focusAdjacentOption("previous")},focusAdjacentOption:function(e){this._focusedOptionReveal=!0;var t=this.state.filteredOptions;if(!this.state.isOpen)return void this.setState({isOpen:!0,inputValue:"",focusedOption:this.state.focusedOption||t["next"===e?0:t.length-1]});if(t.length){for(var s=-1,i=0;i<t.length;i++)if(this.state.focusedOption===t[i]){s=i;break}var o=t[0];"next"===e&&s>-1&&s<t.length-1?o=t[s+1]:"previous"===e&&(o=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:o})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this.state.focusedOption?this.state.focusedOption.value:null,t=o.map(this.state.filteredOptions,function(t){var s=e===t.value,i=l({"Select-option":!0,"is-focused":s}),o=s?"focused":null,a=this.focusOption.bind(this,t),r=this.unfocusOption.bind(this,t),p=this.selectValue.bind(this,t);return n.createElement("div",{ref:o,key:"option-"+t.value,className:i,onMouseEnter:a,onMouseLeave:r,onMouseDown:p,onClick:p},t.label)},this);return t.length?t:n.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){var s=this.props.onOptionLabelClick;s&&s(e,t)},render:function(){var e=l("Select",this.props.className,{"is-multi":this.props.multi,"is-searchable":this.props.searchable,"is-open":this.state.isOpen,"is-focused":this.state.isFocused,"is-loading":this.state.isLoading,"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];this.props.multi&&this.state.values.forEach(function(e){var s=o.extend({key:e.value,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e)},e);t.push(n.createElement(r,s))},this),!this.props.disabled&&(this.state.inputValue||this.props.multi&&t.length)||t.push(n.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,p,u=this.state.isLoading?n.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,c=this.props.clearable&&this.state.value&&!this.props.disabled?n.createElement("span",{className:"Select-clear",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null;this.state.isOpen&&(p={ref:"menu",className:"Select-menu"},this.props.multi&&(p.onMouseDown=this.handleMouseDown),s=n.createElement("div",{className:"Select-menu-outer"},n.createElement("div",p,this.buildMenu())));var h,d=o.extend({ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur},this.props.inputProps);return h=this.props.searchable&&!this.props.disabled?n.createElement(a,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},d)):n.createElement("div",d," "),n.createElement("div",{ref:"wrapper",className:e},n.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),n.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,h,n.createElement("span",{className:"Select-arrow"}),u,c),s)}});t.exports=u}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":2}],2:[function(e,t){(function(e){"use strict";var s=("undefined"!=typeof window?window._:"undefined"!=typeof e?e._:null,"undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null),i=s.createClass({displayName:"Value",propTypes:{label:s.PropTypes.string.isRequired},blockEvent:function(e){e.stopPropagation()},render:function(){var e=this.props.label;return this.props.optionLabelClick&&(e=s.createElement("a",{className:"Select-item-label__a",onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick},e)),s.createElement("div",{className:"Select-item"},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.props.onRemove,onTouchEnd:this.props.onRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

gulpfile.js

@@ -1,173 +0,25 @@
-var browserify = require('browserify'),
-	shim = require('browserify-shim'),
-	chalk = require('chalk'),
-	del = require('del'),
-	gulp = require('gulp'),
-	to5 = require('gulp-6to5'),
-	bump = require('gulp-bump'),
-	connect = require('gulp-connect'),
-	deploy = require("gulp-gh-pages"),
-	git = require("gulp-git"),
-	less = require('gulp-less'),
-	rename = require('gulp-rename'),
-	streamify = require('gulp-streamify'),
-	uglify = require('gulp-uglify'),
-	gutil = require('gulp-util'),
-	merge = require('merge-stream'),
-	to5ify = require('6to5ify'),
-	source = require('vinyl-source-stream'),
-	watchify = require('watchify');
+var gulp = require('gulp'),
+    initGulpTasks = require('react-component-gulp-tasks');
 
+var taskConfig = {
 
-/**
- * Constants
- */
+	component: {
+		name: 'Select',
+		less: 'less/default.less'
+	},
 
-var SRC_PATH = 'src';
-var LIB_PATH = 'lib';
-var DIST_PATH = 'dist';
-
-var PACKAGE_FILE = 'Select.js';
-var PACKAGE_NAME = 'react-select';
-var COMPONENT_NAME = 'Select';
-
-var DEPENDENCIES = [
-	'react',
-	'react-input-autosize',
-	'lodash'
-];
-
-var EXAMPLE_SRC_PATH = 'examples/src';
-var EXAMPLE_DIST_PATH = 'examples/dist';
-
-var EXAMPLE_APP = 'app.js';
-var EXAMPLE_LESS = 'example.less';
-var EXAMPLE_FILES = [
-	'.gitignore',
-	'index.html',
-	'standalone.html'
-];
-
-
-/**
- * Bundle helpers
- */
-
-function doBundle(target, name, dest) {
-	return target.bundle()
-		.on('error', function(e) {
-			gutil.log('Browserify Error', e);
-		})
-		.pipe(source(name))
-		.pipe(gulp.dest(dest))
-		.pipe(connect.reload());
-}
-
-function watchBundle(target, name, dest) {
-	return watchify(target)
-		.on('update', function (scriptIds) {
-			scriptIds = scriptIds
-				.filter(function(i) { return i.substr(0,2) !== './' })
-				.map(function(i) { return chalk.blue(i.replace(__dirname, '')) });
-			if (scriptIds.length > 1) {
-				gutil.log(scriptIds.length + ' Scripts updated:\n* ' + scriptIds.join('\n* ') + '\nrebuilding...');
-			} else {
-				gutil.log(scriptIds[0] + ' updated, rebuilding...');
-			}
-			doBundle(target, name, dest);
-		})
-		.on('time', function (time) {
-			gutil.log(chalk.green(name + ' built in ' + (Math.round(time / 10) / 100) + 's'));
-		});
-}
-
-
-/**
- * Prepare task for examples
- */
-
-gulp.task('prepare:examples', function(done) {
-	del([EXAMPLE_DIST_PATH], done);
-});
-
-
-/**
- * Build example files
- */
-
-function buildExampleFiles() {
-	return gulp.src(EXAMPLE_FILES.map(function(i) { return EXAMPLE_SRC_PATH + '/' + i }))
-		.pipe(gulp.dest(EXAMPLE_DIST_PATH))
-		.pipe(connect.reload());
-}
-
-gulp.task('dev:build:example:files', buildExampleFiles);
-gulp.task('build:example:files', ['prepare:examples'], buildExampleFiles);
-
-
-/**
- * Build example css from less
- */
-
-function buildExampleCSS() {
-	return gulp.src(EXAMPLE_SRC_PATH + '/' + EXAMPLE_LESS)
-		.pipe(less())
-		.pipe(gulp.dest(EXAMPLE_DIST_PATH))
-		.pipe(connect.reload());
-}
-
-gulp.task('dev:build:example:styles', buildExampleCSS);
-gulp.task('build:example:styles', ['prepare:examples'], buildExampleCSS);
-
-
-/**
- * Build example scripts
- * 
- * Returns a gulp task with watchify when in development mode
- */
-
-function buildExampleScripts(dev) {
-	
-	var dest = EXAMPLE_DIST_PATH;
-	
-	var opts = dev ? watchify.args : {};
-	opts.debug = dev ? true : false;
-	opts.hasExports = true;
-	
-	return function() {
-		
-		var common = browserify(opts)
-				.transform(to5ify),
-			bundle = browserify(opts)
-				.require('./' + SRC_PATH + '/' + PACKAGE_FILE, { expose: PACKAGE_NAME })
-				.transform(to5ify),
-			example = browserify(opts)
-				.exclude(PACKAGE_NAME)
-				.add('./' + EXAMPLE_SRC_PATH + '/' + EXAMPLE_APP)
-				.transform(to5ify),
-			standalone = browserify('./' + SRC_PATH + '/' + PACKAGE_FILE, { standalone: COMPONENT_NAME })
-				.transform(to5ify)
-				.transform(shim);
-		
-		DEPENDENCIES.forEach(function(pkg) {
-			common.require(pkg);
-			bundle.exclude(pkg);
-			example.exclude(pkg);
-			standalone.exclude(pkg);
-		});
-		
-		if (dev) {
-			watchBundle(common, 'common.js', dest);
-			watchBundle(bundle, 'bundle.js', dest);
-			watchBundle(example, 'app.js', dest);
-			watchBundle(standalone, 'standalone.js', dest);
-		}
-		
-		return merge(
-			doBundle(common, 'common.js', dest),
-			doBundle(bundle, 'bundle.js', dest),
-			doBundle(example, 'app.js', dest),
-			doBundle(standalone, 'standalone.js', dest)
-		);
-		
+	example: {
+		src: 'examples/src',
+		dist: 'examples/dist',
+		files: [
+			'index.html',
+			'standalone.html',
+			'.gitignore'
+		],
+		scripts: [
+			'app.js'
+		],
+		less: [
+			'example.less'
+		]
 	}
@@ -177,167 +29,2 @@
 
-gulp.task('dev:build:example:scripts', buildExampleScripts(true));
-gulp.task('build:example:scripts', ['prepare:examples'], buildExampleScripts());
-
-
-/**
- * Build examples
- */
-
-gulp.task('build:examples', [
-	'build:example:files',
-	'build:example:styles',
-	'build:example:scripts'
-]);
-
-gulp.task('watch:examples', [
-	'dev:build:example:files',
-	'dev:build:example:styles',
-	'dev:build:example:scripts'
-], function() {
-	gulp.watch(EXAMPLE_FILES.map(function(i) { return EXAMPLE_SRC_PATH + '/' + i }), ['dev:build:example:files']);
-	gulp.watch([EXAMPLE_SRC_PATH + '/' + EXAMPLE_LESS], ['dev:build:example:styles']);
-});
-
-
-/**
- * Serve task for local development
- */
-
-gulp.task('dev:server', function() {
-	connect.server({
-		root: EXAMPLE_DIST_PATH,
-		port: 8000,
-		livereload: true
-	});
-});
-
-
-/**
- * Development task
- */
-
-gulp.task('dev', [
-	'dev:server',
-	'watch:examples'
-]);
-
-
-/**
- * Build lib
- */
-
-gulp.task('prepare:lib', function(done) {
-	del([LIB_PATH], done);
-});
-
-gulp.task('build:lib', ['prepare:lib'], function(done) {
-	return gulp.src(SRC_PATH + '/**/*.js')
-		.pipe(to5())
-		.pipe(gulp.dest(LIB_PATH));
-});
-
-
-/**
- * Build dist
- */
-
-gulp.task('prepare:dist', function(done) {
-	del([DIST_PATH], done);
-});
-
-gulp.task('build:styles', ['prepare:dist'], function() {
-	return gulp.src('less/default.less')
-		.pipe(less())
-		.pipe(gulp.dest('dist'));
-});
-
-gulp.task('build:scripts', ['prepare:dist'], function() {
-	
-	var standalone = browserify('./' + SRC_PATH + '/' + PACKAGE_FILE, {
-			standalone: COMPONENT_NAME
-		})
-		.transform(to5ify)
-		.transform(shim);
-	
-	DEPENDENCIES.forEach(function(pkg) {
-		standalone.exclude(pkg);
-	});
-	
-	return standalone.bundle()
-		.on('error', function(e) {
-			gutil.log('Browserify Error', e);
-		})
-		.pipe(source(PACKAGE_NAME + '.js'))
-		.pipe(gulp.dest(DIST_PATH))
-		.pipe(rename(PACKAGE_NAME + '.min.js'))
-		.pipe(streamify(uglify()))
-		.pipe(gulp.dest(DIST_PATH));
-	
-});
-
-gulp.task('build', [
-	'build:styles',
-	'build:scripts',
-	'build:examples',
-	'build:lib'
-]);
-
-
-/**
- * Version bump tasks
- */
-
-function getBumpTask(type) {
-	return function() {
-		return gulp.src(['./package.json', './bower.json'])
-			.pipe(bump({ type: type }))
-			.pipe(gulp.dest('./'));
-	};
-}
-
-gulp.task('bump', getBumpTask('patch'));
-gulp.task('bump:minor', getBumpTask('minor'));
-gulp.task('bump:major', getBumpTask('major'));
-
-
-/**
- * Git tag task
- * (version *must* be bumped first)
- */
-
-gulp.task('publish:tag', function(done) {
-	var pkg = require('./package.json');
-	var v = 'v' + pkg.version;
-	var message = 'Release ' + v;
-
-	git.tag(v, message, function (err) {
-		if (err) throw err;
-		git.push('origin', v, function (err) {
-			if (err) throw err;
-			done();
-		});
-	});
-});
-
-
-/**
- * npm publish task
- * (version *must* be bumped first)
- */
-
-gulp.task('publish:npm', function(done) {
-	require('child_process')
-		.spawn('npm', ['publish'], { stdio: 'inherit' })
-		.on('close', done);
-});
-
-
-/**
- * Deploy tasks
- */
-
-gulp.task('publish:examples', ['build:examples'], function() {
-	return gulp.src(EXAMPLE_DIST_PATH + '/**/*').pipe(deploy());
-});
-
-gulp.task('release', ['publish:tag', 'publish:npm', 'publish:examples']);
+initGulpTasks(gulp, taskConfig);

HISTORY.md

 # React-Select
 
+## v0.3.5 / 2015-03-09
+
+* improved; less/no repaint on scroll for preformance wins, thanks [jsmunich](https://github.com/jsmunich)
+* added; `onBlur` and `onFocus` event handlers, thanks [Jonas Budelmann](https://github.com/cloudkite)
+* added; support for `inputProps` prop, passed to the `<input>` component, thanks [Yann Plantevin](https://github.com/YannPl)
+* changed; now using [react-component-gulp-tasks](https://github.com/JedWatson/react-component-gulp-tasks) for build
+* fixed; issue w/ remote callbacks overriding cached options, thanks [Corey McMahon](https://github.com/coreymcmahon)
+* fixed; if not `this.props.multi`, menu doesn't need handleMouseDown, thanks [wenbing](https://github.com/wenbing)
+
 ## v0.3.4 / 2015-02-23
@@ -4,0 +13,0 @@

lib/Select.js

@@ -34,2 +34,4 @@ "use strict";
 		onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
+		onFocus: React.PropTypes.func, // onFocus handler: function(event) {}
+		onBlur: React.PropTypes.func, // onBlur handler: function(event) {}
 		className: React.PropTypes.string, // className for the outer element
@@ -40,2 +42,3 @@ filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
 		matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on
+		inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
 
@@ -52,3 +55,3 @@ /*
 
-	getDefaultProps: function () {
+	getDefaultProps: function getDefaultProps() {
 		return {
@@ -73,2 +76,3 @@ value: undefined,
 			matchProp: "any",
+			inputProps: {},
 
@@ -79,3 +83,3 @@ onOptionLabelClick: undefined
 
-	getInitialState: function () {
+	getInitialState: function getInitialState() {
 		return {
@@ -98,3 +102,3 @@ /*
 
-	componentWillMount: function () {
+	componentWillMount: function componentWillMount() {
 		this._optionsCache = {};
@@ -109,3 +113,3 @@ this._optionsFilterString = "";
 
-	componentWillUnmount: function () {
+	componentWillUnmount: function componentWillUnmount() {
 		clearTimeout(this._blurTimeout);
@@ -115,3 +119,3 @@ clearTimeout(this._focusTimeout);
 
-	componentWillReceiveProps: function (newProps) {
+	componentWillReceiveProps: function componentWillReceiveProps(newProps) {
 		if (newProps.value !== this.state.value) {
@@ -128,3 +132,3 @@ this.setState(this.getStateFromValue(newProps.value, newProps.options));
 
-	componentDidUpdate: function () {
+	componentDidUpdate: function componentDidUpdate() {
 		if (this._focusAfterUpdate) {
@@ -154,3 +158,4 @@ clearTimeout(this._blurTimeout);
 
-	getStateFromValue: function (value, options) {
+	getStateFromValue: function getStateFromValue(value, options) {
+
 		if (!options) {
@@ -178,3 +183,4 @@ options = this.state.options;
 
-	initValuesArray: function (values, options) {
+	initValuesArray: function initValuesArray(values, options) {
+
 		if (!Array.isArray(values)) {
@@ -193,3 +199,3 @@ if ("string" === typeof values) {
 
-	setValue: function (value) {
+	setValue: function setValue(value) {
 		this._focusAfterUpdate = true;
@@ -202,3 +208,3 @@ var newState = this.getStateFromValue(value);
 
-	selectValue: function (value) {
+	selectValue: function selectValue(value) {
 		if (!this.props.multi) {
@@ -211,15 +217,15 @@ this.setValue(value);
 
-	addValue: function (value) {
+	addValue: function addValue(value) {
 		this.setValue(this.state.values.concat(value));
 	},
 
-	popValue: function () {
+	popValue: function popValue() {
 		this.setValue(_.initial(this.state.values));
 	},
 
-	removeValue: function (value) {
+	removeValue: function removeValue(value) {
 		this.setValue(_.without(this.state.values, value));
 	},
 
-	clearValue: function (event) {
+	clearValue: function clearValue(event) {
 		// if the event was triggered by a mousedown and not the primary
@@ -233,7 +239,7 @@ // button, ignore it.
 
-	resetValue: function () {
+	resetValue: function resetValue() {
 		this.setValue(this.state.value);
 	},
 
-	getInputNode: function () {
+	getInputNode: function getInputNode() {
 		var input = this.refs.input;
@@ -243,3 +249,3 @@ return this.props.searchable ? input : input.getDOMNode();
 
-	fireChangeEvent: function (newState) {
+	fireChangeEvent: function fireChangeEvent(newState) {
 		if (newState.value !== this.state.value && this.props.onChange) {
@@ -250,3 +256,3 @@ this.props.onChange(newState.value, newState.values);
 
-	handleMouseDown: function (event) {
+	handleMouseDown: function handleMouseDown(event) {
 		// if the event was triggered by a mousedown and not the primary
@@ -270,3 +276,3 @@ // button, or if the component is disabled, ignore it.
 
-	handleInputFocus: function () {
+	handleInputFocus: function handleInputFocus(event) {
 		this.setState({
@@ -277,5 +283,9 @@ isFocused: true,
 		this._openAfterFocus = false;
+
+		if (this.props.onFocus) {
+			this.props.onFocus(event);
+		}
 	},
 
-	handleInputBlur: function (event) {
+	handleInputBlur: function handleInputBlur(event) {
 		this._blurTimeout = setTimeout((function () {
@@ -288,8 +298,13 @@ if (this._focusAfterUpdate) return;
 		}).bind(this), 50);
+
+		if (this.props.onBlur) {
+			this.props.onBlur(event);
+		}
 	},
 
-	handleKeyDown: function (event) {
-		if (this.state.disabled) return;
+	handleKeyDown: function handleKeyDown(event) {
 
-		switch (event.keyCode) {
+		if (this.state.disabled) {
+			return;
+		}switch (event.keyCode) {
 
@@ -343,3 +358,4 @@ case 8:
 
-	handleInputChange: function (event) {
+	handleInputChange: function handleInputChange(event) {
+
 		// assign an internal variable because we need to use
@@ -369,7 +385,10 @@ // the latest value before setState() has completed.
 
-	autoloadAsyncOptions: function () {
+	autoloadAsyncOptions: function autoloadAsyncOptions() {
 		this.loadAsyncOptions("", {}, function () {});
 	},
 
-	loadAsyncOptions: function (input, state) {
+	loadAsyncOptions: function loadAsyncOptions(input, state) {
+
+		var thisRequestId = this._currentRequestId = requestId++;
+
 		for (var i = 0; i <= input.length; i++) {
@@ -387,5 +406,4 @@ var cacheKey = input.slice(0, i);
 
-		var thisRequestId = this._currentRequestId = requestId++;
+		this.props.asyncOptions(input, (function (err, data) {
 
-		this.props.asyncOptions(input, (function (err, data) {
 			this._optionsCache[input] = data;
@@ -404,3 +422,3 @@
 
-	filterOptions: function (options, values) {
+	filterOptions: function filterOptions(options, values) {
 		if (!this.props.searchable) {
@@ -417,6 +435,10 @@ return options;
 		} else {
-			var filterOption = function (op) {
-				if (this.props.multi && _.contains(exclude, op.value)) return false;
-				if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
-				return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && op.value.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && op.label.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
+			var filterOption = function filterOption(op) {
+				if (this.props.multi && _.contains(exclude, op.value)) {
+					return false;
+				}if (this.props.filterOption) {
+					return this.props.filterOption.call(this, op, filterValue);
+				}var valueTest = String(op.value),
+				    labelTest = String(op.label);
+				return !filterValue || this.props.matchPos === "start" ? this.props.matchProp !== "label" && valueTest.toLowerCase().substr(0, filterValue.length) === filterValue || this.props.matchProp !== "value" && labelTest.toLowerCase().substr(0, filterValue.length) === filterValue : this.props.matchProp !== "label" && valueTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0 || this.props.matchProp !== "value" && labelTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0;
 			};
@@ -427,7 +449,7 @@ return _.filter(options, filterOption, this);
 
-	selectFocusedOption: function () {
+	selectFocusedOption: function selectFocusedOption() {
 		return this.selectValue(this.state.focusedOption);
 	},
 
-	focusOption: function (op) {
+	focusOption: function focusOption(op) {
 		this.setState({
@@ -438,11 +460,11 @@ focusedOption: op
 
-	focusNextOption: function () {
+	focusNextOption: function focusNextOption() {
 		this.focusAdjacentOption("next");
 	},
 
-	focusPreviousOption: function () {
+	focusPreviousOption: function focusPreviousOption() {
 		this.focusAdjacentOption("previous");
 	},
 
-	focusAdjacentOption: function (dir) {
+	focusAdjacentOption: function focusAdjacentOption(dir) {
 		this._focusedOptionReveal = true;
@@ -491,3 +513,3 @@
 
-	unfocusOption: function (op) {
+	unfocusOption: function unfocusOption(op) {
 		if (this.state.focusedOption === op) {
@@ -500,3 +522,4 @@ this.setState({
 
-	buildMenu: function () {
+	buildMenu: function buildMenu() {
+
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
@@ -532,3 +555,3 @@
 
-	handleOptionLabelClick: function (value, event) {
+	handleOptionLabelClick: function handleOptionLabelClick(value, event) {
 		var handler = this.props.onOptionLabelClick;
@@ -541,3 +564,4 @@
 
-	render: function () {
+	render: function render() {
+
 		var selectClass = classes("Select", this.props.className, {
@@ -577,9 +601,26 @@ "is-multi": this.props.multi,
 		var clear = this.props.clearable && this.state.value && !this.props.disabled ? React.createElement("span", { className: "Select-clear", title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, "aria-label": this.props.multi ? this.props.clearAllText : this.props.clearValueText, onMouseDown: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: "&times;" } }) : null;
-		var menu = this.state.isOpen ? React.createElement(
-			"div",
-			{ ref: "menu", onMouseDown: this.handleMouseDown, className: "Select-menu" },
-			this.buildMenu()
-		) : null;
 
-		var commonProps = {
+		var menu;
+		var menuProps;
+		if (this.state.isOpen) {
+			menuProps = {
+				ref: "menu",
+				className: "Select-menu"
+			};
+			if (this.props.multi) {
+				menuProps.onMouseDown = this.handleMouseDown;
+			}
+			menu = React.createElement(
+				"div",
+				{ className: "Select-menu-outer" },
+				React.createElement(
+					"div",
+					menuProps,
+					this.buildMenu()
+				)
+			);
+		}
+
+		var input;
+		var inputProps = _.extend({
 			ref: "input",
@@ -590,11 +631,10 @@ className: "Select-input",
 			onBlur: this.handleInputBlur
-		};
-		var input;
+		}, this.props.inputProps);
 
 		if (this.props.searchable && !this.props.disabled) {
-			input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: "5" }, commonProps));
+			input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: "5" }, inputProps));
 		} else {
 			input = React.createElement(
 				"div",
-				commonProps,
+				inputProps,
 				" "
@@ -601,0 +641,0 @@ );

lib/Value.js

@@ -14,7 +14,7 @@ "use strict";
 
-	blockEvent: function (event) {
+	blockEvent: function blockEvent(event) {
 		event.stopPropagation();
 	},
 
-	render: function () {
+	render: function render() {
 		var label = this.props.label;
@@ -21,0 +21,0 @@

package.json

 {
   "name": "react-select",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "A Select control built with and for ReactJS",
@@ -14,3 +14,3 @@ "main": "lib/Select.js",
     "classnames": "^1.1.4",
-    "lodash": "^3.3.0",
+    "lodash": "^3.3.1",
     "react": "^0.12.2",
@@ -20,23 +20,6 @@ "react-input-autosize": "^0.3.1"
   "devDependencies": {
-    "6to5ify": "^4.1.1",
-    "browserify": "^9.0.3",
-    "browserify-shim": "^3.8.3",
-    "chalk": "^0.5.1",
-    "del": "^1.1.1",
-    "gulp": "^3.8.11",
-    "gulp-6to5": "^3.0.0",
-    "gulp-bump": "^0.1.13",
-    "gulp-connect": "^2.2.0",
-    "gulp-gh-pages": "^0.4.0",
-    "gulp-git": "^1.0.0",
-    "gulp-less": "^3.0.1",
-    "gulp-rename": "^1.2.0",
-    "gulp-streamify": "^0.0.5",
-    "gulp-uglify": "^1.1.0",
-    "gulp-util": "^3.0.3",
-    "merge-stream": "^0.1.7",
-    "vinyl-source-stream": "^1.0.0",
-    "watchify": "^2.4.0"
+    "react-component-gulp-tasks": "^0.4.0"
   },
   "browserify-shim": {
+    "classnames": "global:classnames",
     "react": "global:React",
@@ -43,0 +26,0 @@ "react-input-autosize": "global:AutosizeInput",

src/Select.js

@@ -30,2 +30,4 @@ var _ = require('lodash'),
 		onChange: React.PropTypes.func,            // onChange handler: function(newValue) {}
+		onFocus: React.PropTypes.func,             // onFocus handler: function(event) {}
+		onBlur: React.PropTypes.func,              // onBlur handler: function(event) {}
 		className: React.PropTypes.string,         // className for the outer element
@@ -35,3 +37,4 @@ filterOption: React.PropTypes.func,        // method to filter a single option: function(option, filterString)
 		matchPos: React.PropTypes.string,          // (any|start) match the start or entire string when filtering
-		matchProp: React.PropTypes.string,          // (any|label|value) which option property to filter on
+		matchProp: React.PropTypes.string,         // (any|label|value) which option property to filter on
+		inputProps: React.PropTypes.object,        // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
 
@@ -68,2 +71,3 @@ /*
 			matchProp: 'any',
+			inputProps: {},
 
@@ -255,3 +259,3 @@ onOptionLabelClick: undefined
 
-	handleInputFocus: function() {
+	handleInputFocus: function(event) {
 		this.setState({
@@ -262,2 +266,6 @@ isFocused: true,
 		this._openAfterFocus = false;
+		
+		if (this.props.onFocus) {
+			this.props.onFocus(event);
+		}
 	},
@@ -273,2 +281,6 @@
 		}.bind(this), 50);
+		
+		if (this.props.onBlur) {
+			this.props.onBlur(event);
+		}
 	},
@@ -357,2 +369,4 @@
 
+		var thisRequestId = this._currentRequestId = requestId++;
+
 		for (var i = 0; i <= input.length; i++) {
@@ -370,4 +384,2 @@ var cacheKey = input.slice(0, i);
 
-		var thisRequestId = this._currentRequestId = requestId++;
-
 		this.props.asyncOptions(input, function(err, data) {
@@ -405,8 +417,9 @@
 				if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
+				var valueTest = String(op.value), labelTest = String(op.label);
 				return !filterValue || (this.props.matchPos === 'start') ? (
-					(this.props.matchProp !== 'label' && op.value.toLowerCase().substr(0, filterValue.length) === filterValue) ||
-					(this.props.matchProp !== 'value' && op.label.toLowerCase().substr(0, filterValue.length) === filterValue)
+					(this.props.matchProp !== 'label' && valueTest.toLowerCase().substr(0, filterValue.length) === filterValue) ||
+					(this.props.matchProp !== 'value' && labelTest.toLowerCase().substr(0, filterValue.length) === filterValue)
 				) : (
-					(this.props.matchProp !== 'label' && op.value.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0) ||
-					(this.props.matchProp !== 'value' && op.label.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0)
+					(this.props.matchProp !== 'label' && valueTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0) ||
+					(this.props.matchProp !== 'value' && labelTest.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0)
 				);
@@ -559,5 +572,22 @@ };
 		var clear = this.props.clearable && this.state.value && !this.props.disabled ? <span className="Select-clear" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText} aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText} onMouseDown={this.clearValue} onClick={this.clearValue} dangerouslySetInnerHTML={{ __html: '&times;' }} /> : null;
-		var menu = this.state.isOpen ? <div ref="menu" onMouseDown={this.handleMouseDown} className="Select-menu">{this.buildMenu()}</div> : null;
 
-		var commonProps = {
+		var menu;
+		var menuProps;
+		if (this.state.isOpen) {
+			menuProps = {
+				ref: "menu",
+				className: "Select-menu"
+			};
+			if (this.props.multi) {
+				menuProps.onMouseDown = this.handleMouseDown;
+			}
+			menu = (
+				<div className="Select-menu-outer">
+					<div {...menuProps}>{this.buildMenu()}</div>
+				</div>
+			);
+		}
+
+		var input;
+		var inputProps = _.extend({
 			ref: 'input',
@@ -568,9 +598,8 @@ className: 'Select-input',
 			onBlur: this.handleInputBlur
-		};
-		var input;
-
+		}, this.props.inputProps);
+		
 		if (this.props.searchable && !this.props.disabled) {
-			input = <Input value={this.state.inputValue} onChange={this.handleInputChange} minWidth="5" {...commonProps} />;
+			input = <Input value={this.state.inputValue} onChange={this.handleInputChange} minWidth="5" {...inputProps} />;
 		} else {
-			input = <div {...commonProps}>&nbsp;</div>;
+			input = <div {...inputProps}>&nbsp;</div>;
 		}
@@ -577,0 +606,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

1

decreased by-94.74%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

111239

decreased by-2.77%

Lines of code

2170

decreased by-7.7%

Dependency changes

• Updatedlodash@^3.3.1