react-select - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

.publish/app.js

 require=(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){
-/*
-Note: ESLint is currently misreporting unused / undeclared variables for JSX.
-These errors can be ignored until the bug has been fixed.
- */
+/* eslint react/prop-types: 0 */
 
 'use strict';
 
-var React = require('react'),
-    Select = require('react-select');
+var React = require('react');
+var Select = require('react-select');
 
 var STATES = require('./data/states');
+var id = 0;
 
@@ -46,2 +44,4 @@ function logChange(value) {
 			country: 'AU',
+			disabled: false,
+			id: ++id,
 			selectValue: 'new-south-wales'
@@ -66,2 +66,5 @@ };
 	},
+	toggleDisabled: function toggleDisabled(e) {
+		this.setState({ disabled: e.target.checked });
+	},
 	render: function render() {
@@ -77,3 +80,3 @@ var ops = STATES[this.state.country];
 			),
-			React.createElement(Select, { ref: 'stateSelect', options: ops, value: this.state.selectValue, onChange: this.updateValue, searchable: this.props.searchable }),
+			React.createElement(Select, { ref: 'stateSelect', options: ops, disabled: this.state.disabled, value: this.state.selectValue, onChange: this.updateValue, searchable: this.props.searchable }),
 			React.createElement(
@@ -98,2 +101,9 @@ 'div',
 					'Focus Select'
+				),
+				'  ',
+				React.createElement('input', { type: 'checkbox', checked: this.state.disabled, id: 'disable-states-' + this.state.id, onChange: this.toggleDisabled }),
+				React.createElement(
+					'label',
+					{ htmlFor: 'disable-states-' + this.state.id },
+					'Disable'
 				)
@@ -110,3 +120,2 @@ )
 		input = input.toLowerCase();
-
 		var rtn = {
@@ -116,3 +125,2 @@ options: [{ label: 'One', value: 'one' }, { label: 'Two', value: 'two' }, { label: 'Three', value: 'three' }],
 		};
-
 		if (input.slice(0, 1) === 'a') {
@@ -155,13 +163,40 @@ if (input.slice(0, 2) === 'ab') {
 
+	getInitialState: function getInitialState() {
+		return {
+			disabled: false,
+			value: []
+		};
+	},
+	handleSelectChange: function handleSelectChange(value, values) {
+		logChange('New value:', value, 'Values:', values);
+		this.setState({ value: value });
+	},
+	toggleDisabled: function toggleDisabled(e) {
+		this.setState({ 'disabled': e.target.checked });
+	},
 	render: function render() {
 		var ops = [{ label: 'Chocolate', value: 'chocolate' }, { label: 'Vanilla', value: 'vanilla' }, { label: 'Strawberry', value: 'strawberry' }, { label: 'Caramel', value: 'caramel' }, { label: 'Cookies and Cream', value: 'cookiescream' }, { label: 'Peppermint', value: 'peppermint' }];
 		return React.createElement(
-			'div',
+			'span',
 			null,
 			React.createElement(
-				'label',
+				'div',
 				null,
-				this.props.label
+				React.createElement(
+					'label',
+					null,
+					this.props.label
+				),
+				React.createElement(Select, { multi: true, disabled: this.state.disabled, value: this.state.value, placeholder: 'Select your favourite(s)', options: ops, onChange: this.handleSelectChange })
 			),
-			React.createElement(Select, { multi: true, placeholder: 'Select your favourite(s)', options: ops, onChange: logChange })
+			React.createElement(
+				'div',
+				null,
+				React.createElement('input', { type: 'checkbox', checked: this.state.disabled, id: 'disable-multiselect', onChange: this.toggleDisabled }),
+				React.createElement(
+					'label',
+					{ htmlFor: 'disable-multiselect' },
+					'Disable'
+				)
+			)
 		);
@@ -177,3 +212,2 @@ }
 	},
-
 	render: function render() {
@@ -200,2 +234,76 @@ var ops = [{ label: 'Chocolate', value: 'chocolate' }, { label: 'Vanilla', value: 'vanilla' }, { label: 'Strawberry', value: 'strawberry' }, { label: 'Caramel', value: 'caramel' }, { label: 'Cookies and Cream', value: 'cookiescream' }, { label: 'Peppermint', value: 'peppermint' }];
 
+var SelectedValuesFieldCreate = React.createClass({
+	displayName: 'SelectedValuesFieldCreate',
+
+	onLabelClick: function onLabelClick(data, event) {
+		console.log(data, event);
+	},
+	render: function render() {
+		var ops = [{ label: 'First Option', value: 'first' }, { label: 'Second Option', value: 'second' }, { label: 'Third Option', value: 'third' }];
+		return React.createElement(
+			'div',
+			null,
+			React.createElement(
+				'label',
+				null,
+				this.props.label
+			),
+			React.createElement(Select, {
+				value: 'first',
+				delimiter: ',',
+				multi: true,
+				allowCreate: true,
+				placeholder: 'Select your favourite(s)',
+				options: ops,
+				onChange: logChange })
+		);
+	}
+});
+
+var CustomRenderField = React.createClass({
+	displayName: 'CustomRenderField',
+
+	onLabelClick: function onLabelClick(data, event) {
+		console.log(data, event);
+	},
+	renderOption: function renderOption(option) {
+		return React.createElement(
+			'span',
+			{ style: { color: option.hex } },
+			option.label,
+			' (',
+			option.hex,
+			')'
+		);
+	},
+	renderValue: function renderValue(option) {
+		return React.createElement(
+			'strong',
+			{ style: { color: option.hex } },
+			option.label
+		);
+	},
+	render: function render() {
+		var ops = [{ label: 'Red', value: 'red', hex: '#EC6230' }, { label: 'Green', value: 'green', hex: '#4ED84E' }, { label: 'Blue', value: 'blue', hex: '#6D97E2' }];
+		return React.createElement(
+			'div',
+			null,
+			React.createElement(
+				'label',
+				null,
+				this.props.label
+			),
+			React.createElement(Select, {
+				delimiter: ',',
+				multi: true,
+				allowCreate: true,
+				placeholder: 'Select your favourite(s)',
+				options: ops,
+				optionRenderer: this.renderOption,
+				valueRenderer: this.renderValue,
+				onChange: logChange })
+		);
+	}
+});
+
 React.render(React.createElement(
@@ -208,2 +316,4 @@ 'div',
 	React.createElement(SelectedValuesField, { label: 'Clickable labels (labels as links):' }),
+	React.createElement(SelectedValuesFieldCreate, { label: 'Option Creation (tags mode):' }),
+	React.createElement(CustomRenderField, { label: 'Custom rendering for options and values:' }),
 	React.createElement(RemoteSelectField, { label: 'Remote Options:' })
@@ -210,0 +320,0 @@ ), document.getElementById('example'));

.publish/bundle.js

@@ -6,3 +6,3 @@ require=(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){
 
-var Option = React.createClass({
+var Value = React.createClass({
 
@@ -12,3 +12,8 @@ displayName: 'Value',
 	propTypes: {
-		label: React.PropTypes.string.isRequired
+		disabled: React.PropTypes.bool,
+		onOptionLabelClick: React.PropTypes.func,
+		onRemove: React.PropTypes.func,
+		option: React.PropTypes.object.isRequired,
+		optionLabelClick: React.PropTypes.bool,
+		renderer: React.PropTypes.func
 	},
@@ -20,4 +25,13 @@
 
+	handleOnRemove: function handleOnRemove(event) {
+		if (!this.props.disabled) {
+			this.props.onRemove(event);
+		}
+	},
+
 	render: function render() {
-		var label = this.props.label;
+		var label = this.props.option.label;
+		if (this.props.renderer) {
+			label = this.props.renderer(this.props.option);
+		}
 
@@ -42,4 +56,4 @@ if (this.props.optionLabelClick) {
 					onMouseDown: this.blockEvent,
-					onClick: this.props.onRemove,
-					onTouchEnd: this.props.onRemove },
+					onClick: this.handleOnRemove,
+					onTouchEnd: this.handleOnRemove },
 				'×'
@@ -57,5 +71,9 @@ ),
 
-module.exports = Option;
+module.exports = Value;
 
 },{"react":undefined}],"react-select":[function(require,module,exports){
+/* disable some rules until we refactor more completely; fixing them now would
+   cause conflicts with some open PRs unnecessarily. */
+/* eslint react/jsx-sort-prop-types: 0, react/sort-comp: 0, react/prop-types: 0 */
+
 'use strict';
@@ -77,35 +95,31 @@
 	propTypes: {
-		value: React.PropTypes.any, // initial field value
-		multi: React.PropTypes.bool, // multi-value input
-		disabled: React.PropTypes.bool, // whether the Select is disabled or not
-		options: React.PropTypes.array, // array of options
-		delimiter: React.PropTypes.string, // delimiter to use to join multiple values
+		allowCreate: React.PropTypes.bool, // wether to allow creation of new entries
 		asyncOptions: React.PropTypes.func, // function to call to get options
 		autoload: React.PropTypes.bool, // whether to auto-load the default async options set
-		placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
-		noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
+		className: React.PropTypes.string, // className for the outer element
 		clearable: React.PropTypes.bool, // should it be possible to reset value
+		clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
 		clearValueText: React.PropTypes.string, // title for the "clear" control
-		clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
-		searchable: React.PropTypes.bool, // whether to enable searching feature or not
-		searchPromptText: React.PropTypes.string, // label to prompt for search input
-		name: React.PropTypes.string, // field name, for hidden <input /> tag
-		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
+		delimiter: React.PropTypes.string, // delimiter to use to join multiple values
+		disabled: React.PropTypes.bool, // whether the Select is disabled or not
 		filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
 		filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
+		ignoreCase: React.PropTypes.bool, // whether to perform case-insensitive filtering
+		inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
 		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
-		inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
-
-		/*
-  * Allow user to make option label clickable. When this handler is defined we should
-  * wrap label into <a>label</a> tag.
-  *
-  * onOptionLabelClick handler: function (value, event) {}
-  *
-  */
-		onOptionLabelClick: React.PropTypes.func
+		multi: React.PropTypes.bool, // multi-value input
+		name: React.PropTypes.string, // field name, for hidden <input /> tag
+		noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
+		onBlur: React.PropTypes.func, // onBlur handler: function(event) {}
+		onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
+		onFocus: React.PropTypes.func, // onFocus handler: function(event) {}
+		onOptionLabelClick: React.PropTypes.func, // onCLick handler for value labels: function (value, event) {}
+		optionRenderer: React.PropTypes.func, // optionRenderer: function(option) {}
+		options: React.PropTypes.array, // array of options
+		placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
+		searchable: React.PropTypes.bool, // whether to enable searching feature or not
+		searchPromptText: React.PropTypes.string, // label to prompt for search input
+		value: React.PropTypes.any, // initial field value
+		valueRenderer: React.PropTypes.func // valueRenderer: function(option) {}
 	},
@@ -115,23 +129,24 @@
 		return {
-			value: undefined,
-			options: undefined,
-			disabled: false,
-			delimiter: ',',
+			allowCreate: false,
 			asyncOptions: undefined,
 			autoload: true,
-			placeholder: 'Select...',
-			noResultsText: 'No results found',
+			className: undefined,
 			clearable: true,
+			clearAllText: 'Clear all',
 			clearValueText: 'Clear value',
-			clearAllText: 'Clear all',
+			delimiter: ',',
+			disabled: false,
+			ignoreCase: true,
+			inputProps: {},
+			matchPos: 'any',
+			matchProp: 'any',
+			name: undefined,
+			noResultsText: 'No results found',
+			onChange: undefined,
+			onOptionLabelClick: undefined,
+			options: undefined,
+			placeholder: 'Select...',
 			searchable: true,
 			searchPromptText: 'Type to search',
-			name: undefined,
-			onChange: undefined,
-			className: undefined,
-			matchPos: 'any',
-			matchProp: 'any',
-			inputProps: {},
-
-			onOptionLabelClick: undefined
+			value: undefined
 		};
@@ -151,6 +166,6 @@ },
    */
-			options: this.props.options,
 			isFocused: false,
+			isLoading: false,
 			isOpen: false,
-			isLoading: false
+			options: this.props.options
 		};
@@ -162,8 +177,3 @@ },
 		this._optionsFilterString = '';
-		this.setState(this.getStateFromValue(this.props.value));
 
-		if (this.props.asyncOptions && this.props.autoload) {
-			this.autoloadAsyncOptions();
-		}
-
 		var self = this;
@@ -189,8 +199,23 @@ this._closeMenuIfClickedOutside = function (event) {
 		this._bindCloseMenuIfClickedOutside = function () {
-			document.addEventListener('click', self._closeMenuIfClickedOutside);
+			if (!document.addEventListener && document.attachEvent) {
+				document.attachEvent('onclick', this._closeMenuIfClickedOutside);
+			} else {
+				document.addEventListener('click', this._closeMenuIfClickedOutside);
+			}
 		};
 
 		this._unbindCloseMenuIfClickedOutside = function () {
-			document.removeEventListener('click', self._closeMenuIfClickedOutside);
+			if (!document.removeEventListener && document.detachEvent) {
+				document.detachEvent('onclick', this._closeMenuIfClickedOutside);
+			} else {
+				document.removeEventListener('click', this._closeMenuIfClickedOutside);
+			}
 		};
+
+		this.setState(this.getStateFromValue(this.props.value), function () {
+			//Executes after state change is done. Fixes issue #201
+			if (this.props.asyncOptions && this.props.autoload) {
+				this.autoloadAsyncOptions();
+			}
+		});
 	},
@@ -286,3 +311,3 @@
 			if (typeof values === 'string') {
-				values = values.split(this.props.delimiter);
+				values = values === '' ? [] : values.split(this.props.delimiter);
 			} else {
@@ -346,2 +371,4 @@ values = values ? [values] : [];
 		}
+		event.stopPropagation();
+		event.preventDefault();
 		this.setValue(null);
@@ -384,2 +411,20 @@ },
 
+	handleMouseDownOnArrow: function handleMouseDownOnArrow(event) {
+		// if the event was triggered by a mousedown and not the primary
+		// button, or if the component is disabled, ignore it.
+		if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) {
+			return;
+		}
+		// If not focused, handleMouseDown will handle it
+		if (!this.state.isOpen) {
+			return;
+		}
+
+		event.stopPropagation();
+		event.preventDefault();
+		this.setState({
+			isOpen: false
+		}, this._unbindCloseMenuIfClickedOutside);
+	},
+
 	handleInputFocus: function handleInputFocus(event) {
@@ -442,2 +487,4 @@ var newIsOpen = this.state.isOpen || this._openAfterFocus;
 				// enter
+				if (!this.state.isOpen) return;
+
 				this.selectFocusedOption();
@@ -465,2 +512,13 @@ break;
 
+			case 188:
+				// ,
+				if (this.props.allowCreate) {
+					event.preventDefault();
+					event.stopPropagation();
+					this.selectFocusedOption();
+				} else {
+					return;
+				}
+				break;
+
 			default:
@@ -511,3 +569,3 @@ return;
 		var self = this;
-		this.loadAsyncOptions('', {}, function () {
+		this.loadAsyncOptions(this.props.value || '', {}, function () {
 			// update with fetched but don't focus
@@ -538,3 +596,3 @@ self.setValue(self.props.value, false);
 				this.setState(newState);
-				if (callback) callback({});
+				if (callback) callback.call(this, {});
 				return;
@@ -568,3 +626,3 @@ }
 
-			if (callback) callback({});
+			if (callback) callback.call(self, {});
 		});
@@ -590,3 +648,8 @@ },
 				    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;
+				if (this.props.ignoreCase) {
+					valueTest = valueTest.toLowerCase();
+					labelTest = labelTest.toLowerCase();
+					filterValue = filterValue.toLowerCase();
+				}
+				return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
 			};
@@ -598,2 +661,5 @@ return (options || []).filter(filterOption, this);
 	selectFocusedOption: function selectFocusedOption() {
+		if (this.props.allowCreate && !this.state.focusedOption) {
+			return this.selectValue(this.state.inputValue);
+		}
 		return this.selectValue(this.state.focusedOption);
@@ -670,2 +736,5 @@ },
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
+		var renderLabel = this.props.optionRenderer || function (op) {
+			return op.label;
+		};
 
@@ -675,5 +744,15 @@ if (this.state.filteredOptions.length > 0) {
 		}
+		// Add the current value to the filtered options in last resort
+		if (this.props.allowCreate && this.state.inputValue.trim()) {
+			var inputValue = this.state.inputValue;
+			this.state.filteredOptions.unshift({
+				value: inputValue,
+				label: inputValue,
+				create: true
+			});
+		}
 
 		var ops = Object.keys(this.state.filteredOptions).map(function (key) {
 			var op = this.state.filteredOptions[key];
+			var isSelected = this.state.value == op.value;
 			var isFocused = focusedValue === op.value;
@@ -683,2 +762,3 @@
 				'Select-option': true,
+				'is-selected': isSelected,
 				'is-focused': isFocused,
@@ -693,16 +773,13 @@ 'is-disabled': op.disabled
 			var mouseDown = this.selectValue.bind(this, op);
+			var renderedLabel = renderLabel(op);
 
-			if (op.disabled) {
-				return React.createElement(
-					'div',
-					{ ref: ref, key: 'option-' + op.value, className: optionClass },
-					op.label
-				);
-			} else {
-				return React.createElement(
-					'div',
-					{ ref: ref, key: 'option-' + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
-					op.label
-				);
-			}
+			return op.disabled ? React.createElement(
+				'div',
+				{ ref: ref, key: 'option-' + op.value, className: optionClass },
+				renderedLabel
+			) : React.createElement(
+				'div',
+				{ ref: ref, key: 'option-' + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
+				op.create ? 'Add ' + op.label + ' ?' : renderedLabel
+			);
 		}, this);
@@ -718,6 +795,4 @@
 	handleOptionLabelClick: function handleOptionLabelClick(value, event) {
-		var handler = this.props.onOptionLabelClick;
-
-		if (handler) {
-			handler(value, event);
+		if (this.props.onOptionLabelClick) {
+			this.props.onOptionLabelClick(value, event);
 		}
@@ -741,18 +816,14 @@ },
 			this.state.values.forEach(function (val) {
-				var props = {
+				value.push(React.createElement(Value, {
 					key: val.value,
+					option: val,
+					renderer: this.props.valueRenderer,
 					optionLabelClick: !!this.props.onOptionLabelClick,
 					onOptionLabelClick: this.handleOptionLabelClick.bind(this, val),
-					onRemove: this.removeValue.bind(this, val)
-				};
-				for (var key in val) {
-					if (val.hasOwnProperty(key)) {
-						props[key] = val[key];
-					}
-				}
-				value.push(React.createElement(Value, props));
+					onRemove: this.removeValue.bind(this, val),
+					disabled: this.props.disabled }));
 			}, this);
 		}
 
-		if (this.props.disabled || !this.state.inputValue && (!this.props.multi || !value.length)) {
+		if (!this.state.inputValue && (!this.props.multi || !value.length)) {
 			value.push(React.createElement(
@@ -803,8 +874,16 @@ 'div',
 
-		if (this.props.searchable && !this.props.disabled) {
-			input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: '5' }, inputProps));
-		} else {
+		if (!this.props.disabled) {
+			if (this.props.searchable) {
+				input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: '5' }, inputProps));
+			} else {
+				input = React.createElement(
+					'div',
+					inputProps,
+					' '
+				);
+			}
+		} else if (!this.props.multi || !this.state.values.length) {
 			input = React.createElement(
 				'div',
-				inputProps,
+				{ className: 'Select-input' },
 				' '
@@ -823,3 +902,4 @@ );
 				input,
-				React.createElement('span', { className: 'Select-arrow' }),
+				React.createElement('span', { className: 'Select-arrow-zone', onMouseDown: this.handleMouseDownOnArrow }),
+				React.createElement('span', { className: 'Select-arrow', onMouseDown: this.handleMouseDownOnArrow }),
 				loading,
@@ -826,0 +906,0 @@ clear

.publish/standalone.js

 (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){
-(function (global){
+/* disable some rules until we refactor more completely; fixing them now would
+   cause conflicts with some open PRs unnecessarily. */
+/* eslint react/jsx-sort-prop-types: 0, react/sort-comp: 0, react/prop-types: 0 */
+
 'use strict';
@@ -7,5 +10,5 @@
 
-var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
-var Input = (typeof window !== "undefined" ? window.AutosizeInput : typeof global !== "undefined" ? global.AutosizeInput : null);
-var classes = (typeof window !== "undefined" ? window.classNames : typeof global !== "undefined" ? global.classNames : null);
+var React = (window.React);
+var Input = (window.AutosizeInput);
+var classes = (window.classNames);
 var Value = require('./Value');
@@ -20,35 +23,31 @@
 	propTypes: {
-		value: React.PropTypes.any, // initial field value
-		multi: React.PropTypes.bool, // multi-value input
-		disabled: React.PropTypes.bool, // whether the Select is disabled or not
-		options: React.PropTypes.array, // array of options
-		delimiter: React.PropTypes.string, // delimiter to use to join multiple values
+		allowCreate: React.PropTypes.bool, // wether to allow creation of new entries
 		asyncOptions: React.PropTypes.func, // function to call to get options
 		autoload: React.PropTypes.bool, // whether to auto-load the default async options set
-		placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
-		noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
+		className: React.PropTypes.string, // className for the outer element
 		clearable: React.PropTypes.bool, // should it be possible to reset value
+		clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
 		clearValueText: React.PropTypes.string, // title for the "clear" control
-		clearAllText: React.PropTypes.string, // title for the "clear" control when multi: true
-		searchable: React.PropTypes.bool, // whether to enable searching feature or not
-		searchPromptText: React.PropTypes.string, // label to prompt for search input
-		name: React.PropTypes.string, // field name, for hidden <input /> tag
-		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
+		delimiter: React.PropTypes.string, // delimiter to use to join multiple values
+		disabled: React.PropTypes.bool, // whether the Select is disabled or not
 		filterOption: React.PropTypes.func, // method to filter a single option: function(option, filterString)
 		filterOptions: React.PropTypes.func, // method to filter the options array: function([options], filterString, [values])
+		ignoreCase: React.PropTypes.bool, // whether to perform case-insensitive filtering
+		inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
 		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
-		inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
-
-		/*
-  * Allow user to make option label clickable. When this handler is defined we should
-  * wrap label into <a>label</a> tag.
-  *
-  * onOptionLabelClick handler: function (value, event) {}
-  *
-  */
-		onOptionLabelClick: React.PropTypes.func
+		multi: React.PropTypes.bool, // multi-value input
+		name: React.PropTypes.string, // field name, for hidden <input /> tag
+		noResultsText: React.PropTypes.string, // placeholder displayed when there are no matching search results
+		onBlur: React.PropTypes.func, // onBlur handler: function(event) {}
+		onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
+		onFocus: React.PropTypes.func, // onFocus handler: function(event) {}
+		onOptionLabelClick: React.PropTypes.func, // onCLick handler for value labels: function (value, event) {}
+		optionRenderer: React.PropTypes.func, // optionRenderer: function(option) {}
+		options: React.PropTypes.array, // array of options
+		placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value
+		searchable: React.PropTypes.bool, // whether to enable searching feature or not
+		searchPromptText: React.PropTypes.string, // label to prompt for search input
+		value: React.PropTypes.any, // initial field value
+		valueRenderer: React.PropTypes.func // valueRenderer: function(option) {}
 	},
@@ -58,23 +57,24 @@
 		return {
-			value: undefined,
-			options: undefined,
-			disabled: false,
-			delimiter: ',',
+			allowCreate: false,
 			asyncOptions: undefined,
 			autoload: true,
-			placeholder: 'Select...',
-			noResultsText: 'No results found',
+			className: undefined,
 			clearable: true,
+			clearAllText: 'Clear all',
 			clearValueText: 'Clear value',
-			clearAllText: 'Clear all',
+			delimiter: ',',
+			disabled: false,
+			ignoreCase: true,
+			inputProps: {},
+			matchPos: 'any',
+			matchProp: 'any',
+			name: undefined,
+			noResultsText: 'No results found',
+			onChange: undefined,
+			onOptionLabelClick: undefined,
+			options: undefined,
+			placeholder: 'Select...',
 			searchable: true,
 			searchPromptText: 'Type to search',
-			name: undefined,
-			onChange: undefined,
-			className: undefined,
-			matchPos: 'any',
-			matchProp: 'any',
-			inputProps: {},
-
-			onOptionLabelClick: undefined
+			value: undefined
 		};
@@ -94,6 +94,6 @@ },
    */
-			options: this.props.options,
 			isFocused: false,
+			isLoading: false,
 			isOpen: false,
-			isLoading: false
+			options: this.props.options
 		};
@@ -105,8 +105,3 @@ },
 		this._optionsFilterString = '';
-		this.setState(this.getStateFromValue(this.props.value));
 
-		if (this.props.asyncOptions && this.props.autoload) {
-			this.autoloadAsyncOptions();
-		}
-
 		var self = this;
@@ -132,8 +127,23 @@ this._closeMenuIfClickedOutside = function (event) {
 		this._bindCloseMenuIfClickedOutside = function () {
-			document.addEventListener('click', self._closeMenuIfClickedOutside);
+			if (!document.addEventListener && document.attachEvent) {
+				document.attachEvent('onclick', this._closeMenuIfClickedOutside);
+			} else {
+				document.addEventListener('click', this._closeMenuIfClickedOutside);
+			}
 		};
 
 		this._unbindCloseMenuIfClickedOutside = function () {
-			document.removeEventListener('click', self._closeMenuIfClickedOutside);
+			if (!document.removeEventListener && document.detachEvent) {
+				document.detachEvent('onclick', this._closeMenuIfClickedOutside);
+			} else {
+				document.removeEventListener('click', this._closeMenuIfClickedOutside);
+			}
 		};
+
+		this.setState(this.getStateFromValue(this.props.value), function () {
+			//Executes after state change is done. Fixes issue #201
+			if (this.props.asyncOptions && this.props.autoload) {
+				this.autoloadAsyncOptions();
+			}
+		});
 	},
@@ -229,3 +239,3 @@
 			if (typeof values === 'string') {
-				values = values.split(this.props.delimiter);
+				values = values === '' ? [] : values.split(this.props.delimiter);
 			} else {
@@ -289,2 +299,4 @@ values = values ? [values] : [];
 		}
+		event.stopPropagation();
+		event.preventDefault();
 		this.setValue(null);
@@ -327,2 +339,20 @@ },
 
+	handleMouseDownOnArrow: function handleMouseDownOnArrow(event) {
+		// if the event was triggered by a mousedown and not the primary
+		// button, or if the component is disabled, ignore it.
+		if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) {
+			return;
+		}
+		// If not focused, handleMouseDown will handle it
+		if (!this.state.isOpen) {
+			return;
+		}
+
+		event.stopPropagation();
+		event.preventDefault();
+		this.setState({
+			isOpen: false
+		}, this._unbindCloseMenuIfClickedOutside);
+	},
+
 	handleInputFocus: function handleInputFocus(event) {
@@ -385,2 +415,4 @@ var newIsOpen = this.state.isOpen || this._openAfterFocus;
 				// enter
+				if (!this.state.isOpen) return;
+
 				this.selectFocusedOption();
@@ -408,2 +440,13 @@ break;
 
+			case 188:
+				// ,
+				if (this.props.allowCreate) {
+					event.preventDefault();
+					event.stopPropagation();
+					this.selectFocusedOption();
+				} else {
+					return;
+				}
+				break;
+
 			default:
@@ -454,3 +497,3 @@ return;
 		var self = this;
-		this.loadAsyncOptions('', {}, function () {
+		this.loadAsyncOptions(this.props.value || '', {}, function () {
 			// update with fetched but don't focus
@@ -481,3 +524,3 @@ self.setValue(self.props.value, false);
 				this.setState(newState);
-				if (callback) callback({});
+				if (callback) callback.call(this, {});
 				return;
@@ -511,3 +554,3 @@ }
 
-			if (callback) callback({});
+			if (callback) callback.call(self, {});
 		});
@@ -533,3 +576,8 @@ },
 				    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;
+				if (this.props.ignoreCase) {
+					valueTest = valueTest.toLowerCase();
+					labelTest = labelTest.toLowerCase();
+					filterValue = filterValue.toLowerCase();
+				}
+				return !filterValue || this.props.matchPos === 'start' ? this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
 			};
@@ -541,2 +589,5 @@ return (options || []).filter(filterOption, this);
 	selectFocusedOption: function selectFocusedOption() {
+		if (this.props.allowCreate && !this.state.focusedOption) {
+			return this.selectValue(this.state.inputValue);
+		}
 		return this.selectValue(this.state.focusedOption);
@@ -613,2 +664,5 @@ },
 		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
+		var renderLabel = this.props.optionRenderer || function (op) {
+			return op.label;
+		};
 
@@ -618,5 +672,15 @@ if (this.state.filteredOptions.length > 0) {
 		}
+		// Add the current value to the filtered options in last resort
+		if (this.props.allowCreate && this.state.inputValue.trim()) {
+			var inputValue = this.state.inputValue;
+			this.state.filteredOptions.unshift({
+				value: inputValue,
+				label: inputValue,
+				create: true
+			});
+		}
 
 		var ops = Object.keys(this.state.filteredOptions).map(function (key) {
 			var op = this.state.filteredOptions[key];
+			var isSelected = this.state.value == op.value;
 			var isFocused = focusedValue === op.value;
@@ -626,2 +690,3 @@
 				'Select-option': true,
+				'is-selected': isSelected,
 				'is-focused': isFocused,
@@ -636,16 +701,13 @@ 'is-disabled': op.disabled
 			var mouseDown = this.selectValue.bind(this, op);
+			var renderedLabel = renderLabel(op);
 
-			if (op.disabled) {
-				return React.createElement(
-					'div',
-					{ ref: ref, key: 'option-' + op.value, className: optionClass },
-					op.label
-				);
-			} else {
-				return React.createElement(
-					'div',
-					{ ref: ref, key: 'option-' + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
-					op.label
-				);
-			}
+			return op.disabled ? React.createElement(
+				'div',
+				{ ref: ref, key: 'option-' + op.value, className: optionClass },
+				renderedLabel
+			) : React.createElement(
+				'div',
+				{ ref: ref, key: 'option-' + op.value, className: optionClass, onMouseEnter: mouseEnter, onMouseLeave: mouseLeave, onMouseDown: mouseDown, onClick: mouseDown },
+				op.create ? 'Add ' + op.label + ' ?' : renderedLabel
+			);
 		}, this);
@@ -661,6 +723,4 @@
 	handleOptionLabelClick: function handleOptionLabelClick(value, event) {
-		var handler = this.props.onOptionLabelClick;
-
-		if (handler) {
-			handler(value, event);
+		if (this.props.onOptionLabelClick) {
+			this.props.onOptionLabelClick(value, event);
 		}
@@ -684,18 +744,14 @@ },
 			this.state.values.forEach(function (val) {
-				var props = {
+				value.push(React.createElement(Value, {
 					key: val.value,
+					option: val,
+					renderer: this.props.valueRenderer,
 					optionLabelClick: !!this.props.onOptionLabelClick,
 					onOptionLabelClick: this.handleOptionLabelClick.bind(this, val),
-					onRemove: this.removeValue.bind(this, val)
-				};
-				for (var key in val) {
-					if (val.hasOwnProperty(key)) {
-						props[key] = val[key];
-					}
-				}
-				value.push(React.createElement(Value, props));
+					onRemove: this.removeValue.bind(this, val),
+					disabled: this.props.disabled }));
 			}, this);
 		}
 
-		if (this.props.disabled || !this.state.inputValue && (!this.props.multi || !value.length)) {
+		if (!this.state.inputValue && (!this.props.multi || !value.length)) {
 			value.push(React.createElement(
@@ -746,8 +802,16 @@ 'div',
 
-		if (this.props.searchable && !this.props.disabled) {
-			input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: '5' }, inputProps));
-		} else {
+		if (!this.props.disabled) {
+			if (this.props.searchable) {
+				input = React.createElement(Input, _extends({ value: this.state.inputValue, onChange: this.handleInputChange, minWidth: '5' }, inputProps));
+			} else {
+				input = React.createElement(
+					'div',
+					inputProps,
+					' '
+				);
+			}
+		} else if (!this.props.multi || !this.state.values.length) {
 			input = React.createElement(
 				'div',
-				inputProps,
+				{ className: 'Select-input' },
 				' '
@@ -766,3 +830,4 @@ );
 				input,
-				React.createElement('span', { className: 'Select-arrow' }),
+				React.createElement('span', { className: 'Select-arrow-zone', onMouseDown: this.handleMouseDownOnArrow }),
+				React.createElement('span', { className: 'Select-arrow', onMouseDown: this.handleMouseDownOnArrow }),
 				loading,
@@ -779,10 +844,8 @@ clear
 
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./Value":2}],2:[function(require,module,exports){
-(function (global){
 'use strict';
 
-var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
+var React = (window.React);
 
-var Option = React.createClass({
+var Value = React.createClass({
 
@@ -792,3 +855,8 @@ displayName: 'Value',
 	propTypes: {
-		label: React.PropTypes.string.isRequired
+		disabled: React.PropTypes.bool,
+		onOptionLabelClick: React.PropTypes.func,
+		onRemove: React.PropTypes.func,
+		option: React.PropTypes.object.isRequired,
+		optionLabelClick: React.PropTypes.bool,
+		renderer: React.PropTypes.func
 	},
@@ -800,4 +868,13 @@
 
+	handleOnRemove: function handleOnRemove(event) {
+		if (!this.props.disabled) {
+			this.props.onRemove(event);
+		}
+	},
+
 	render: function render() {
-		var label = this.props.label;
+		var label = this.props.option.label;
+		if (this.props.renderer) {
+			label = this.props.renderer(this.props.option);
+		}
 
@@ -822,4 +899,4 @@ if (this.props.optionLabelClick) {
 					onMouseDown: this.blockEvent,
-					onClick: this.props.onRemove,
-					onTouchEnd: this.props.onRemove },
+					onClick: this.handleOnRemove,
+					onTouchEnd: this.handleOnRemove },
 				'×'
@@ -837,6 +914,5 @@ ),
 
-module.exports = Option;
+module.exports = Value;
 
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}]},{},[1])(1)
 });

dist/react-select.js

 (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){
+(function (global){
 /* disable some rules until we refactor more completely; fixing them now would
@@ -10,5 +11,5 @@ cause conflicts with some open PRs unnecessarily. */
 
-var React = (window.React);
-var Input = (window.AutosizeInput);
-var classes = (window.classNames);
+var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
+var Input = (typeof window !== "undefined" ? window.AutosizeInput : typeof global !== "undefined" ? global.AutosizeInput : null);
+var classes = (typeof window !== "undefined" ? window.classNames : typeof global !== "undefined" ? global.classNames : null);
 var Value = require('./Value');
@@ -137,9 +138,8 @@
 		};
+	},
 
-		this.setState(this.getStateFromValue(this.props.value), function () {
-			//Executes after state change is done. Fixes issue #201
-			if (this.props.asyncOptions && this.props.autoload) {
-				this.autoloadAsyncOptions();
-			}
-		});
+	componentDidMount: function componentDidMount() {
+		if (this.props.asyncOptions && this.props.autoload) {
+			this.autoloadAsyncOptions();
+		}
 	},
@@ -669,3 +669,3 @@
 			var op = this.state.filteredOptions[key];
-			var isSelected = this.state.value == op.value;
+			var isSelected = this.state.value === op.value;
 			var isFocused = focusedValue === op.value;
@@ -823,6 +823,8 @@
 
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./Value":2}],2:[function(require,module,exports){
+(function (global){
 'use strict';
 
-var React = (window.React);
+var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
 
@@ -892,3 +894,4 @@ var Value = React.createClass({
 
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}]},{},[1])(1)
 });

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,r){if(!s[a]){if(!t[a]){var l="function"==typeof require&&require;if(!r&&l)return l(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,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=window.React,n=window.AutosizeInput,a=window.classNames,r=e("./Value"),l=0,p=o.createClass({displayName:"Select",propTypes:{allowCreate:o.PropTypes.bool,asyncOptions:o.PropTypes.func,autoload:o.PropTypes.bool,className:o.PropTypes.string,clearable:o.PropTypes.bool,clearAllText:o.PropTypes.string,clearValueText:o.PropTypes.string,delimiter:o.PropTypes.string,disabled:o.PropTypes.bool,filterOption:o.PropTypes.func,filterOptions:o.PropTypes.func,ignoreCase:o.PropTypes.bool,inputProps:o.PropTypes.object,matchPos:o.PropTypes.string,matchProp:o.PropTypes.string,multi:o.PropTypes.bool,name:o.PropTypes.string,noResultsText:o.PropTypes.string,onBlur:o.PropTypes.func,onChange:o.PropTypes.func,onFocus:o.PropTypes.func,onOptionLabelClick:o.PropTypes.func,optionRenderer:o.PropTypes.func,options:o.PropTypes.array,placeholder:o.PropTypes.string,searchable:o.PropTypes.bool,searchPromptText:o.PropTypes.string,value:o.PropTypes.any,valueRenderer:o.PropTypes.func},getDefaultProps:function(){return{allowCreate:!1,asyncOptions:void 0,autoload:!0,className:void 0,clearable:!0,clearAllText:"Clear all",clearValueText:"Clear value",delimiter:",",disabled:!1,ignoreCase:!0,inputProps:{},matchPos:"any",matchProp:"any",name:void 0,noResultsText:"No results found",onChange:void 0,onOptionLabelClick:void 0,options:void 0,placeholder:"Select...",searchable:!0,searchPromptText:"Type to search",value:void 0}},getInitialState:function(){return{isFocused:!1,isLoading:!1,isOpen:!1,options:this.props.options}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="";var e=this;this._closeMenuIfClickedOutside=function(t){if(e.state.isOpen){var s=e.refs.selectMenuContainer.getDOMNode(),i=e.refs.control.getDOMNode(),o=e.clickedOutsideElement(s,t),n=e.clickedOutsideElement(i,t);o&&n&&e.setState({isOpen:!1},e._unbindCloseMenuIfClickedOutside)}},this._bindCloseMenuIfClickedOutside=function(){!document.addEventListener&&document.attachEvent?document.attachEvent("onclick",this._closeMenuIfClickedOutside):document.addEventListener("click",this._closeMenuIfClickedOutside)},this._unbindCloseMenuIfClickedOutside=function(){!document.removeEventListener&&document.detachEvent?document.detachEvent("onclick",this._closeMenuIfClickedOutside):document.removeEventListener("click",this._closeMenuIfClickedOutside)},this.setState(this.getStateFromValue(this.props.value),function(){this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()})},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout),this.state.isOpen&&this._unbindCloseMenuIfClickedOutside()},componentWillReceiveProps:function(e){JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)}),e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options))},componentDidUpdate:function(){var e=this;if(!this.props.disabled&&this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){e.getInputNode().focus(),e._focusAfterUpdate=!1},50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var t=this.refs.focused.getDOMNode(),s=this.refs.menu.getDOMNode(),i=t.getBoundingClientRect(),o=s.getBoundingClientRect();(i.bottom>o.bottom||i.top<o.top)&&(s.scrollTop=t.offsetTop+t.clientHeight-s.offsetHeight)}this._focusedOptionReveal=!1}},focus:function(){this.getInputNode().focus()},clickedOutsideElement:function(e,t){for(var s=t.target?t.target:t.srcElement;null!=s;){if(s===e)return!1;s=s.offsetParent}return!0},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?[]:e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){if("string"==typeof e){for(var s in t)if(t.hasOwnProperty(s)&&t[s]&&t[s].value===e)return t[s];return{value:e,label:e}}return e})},setValue:function(e,t){(t||void 0===t)&&(this._focusAfterUpdate=!0);var s=this.getStateFromValue(e);s.isOpen=!1,this.fireChangeEvent(s),this.setState(s)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e),this._unbindCloseMenuIfClickedOutside()},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(this.state.values.slice(0,this.state.values.length-1))},removeValue:function(e){this.setValue(this.state.values.filter(function(t){return t!==e}))},clearValue:function(e){e&&"mousedown"===e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.setValue(null))},resetValue:function(){this.setValue(""===this.state.value?null: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._bindCloseMenuIfClickedOutside):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleMouseDownOnArrow:function(e){this.props.disabled||"mousedown"===e.type&&0!==e.button||this.state.isOpen&&(e.stopPropagation(),e.preventDefault(),this.setState({isOpen:!1},this._unbindCloseMenuIfClickedOutside))},handleInputFocus:function(e){var t=this.state.isOpen||this._openAfterFocus;this.setState({isFocused:!0,isOpen:t},function(){t?this._bindCloseMenuIfClickedOutside():this._unbindCloseMenuIfClickedOutside()}),this._openAfterFocus=!1,this.props.onFocus&&this.props.onFocus(e)},handleInputBlur:function(e){var t=this;this._blurTimeout=setTimeout(function(){t._focusAfterUpdate||t.setState({isFocused:!1})},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:if(!this.state.isOpen)return;this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;case 188:if(!this.props.allowCreate)return;e.preventDefault(),e.stopPropagation(),this.selectFocusedOption();break;default:return}e.preventDefault()}},_getNewFocusedOption:function(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t]===this.state.focusedOption)return e[t];return e[0]},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},this._bindCloseMenuIfClickedOutside);else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:this._getNewFocusedOption(t)},this._bindCloseMenuIfClickedOutside)}},autoloadAsyncOptions:function(){var e=this;this.loadAsyncOptions(this.props.value||"",{},function(){e.setValue(e.props.value,!1)})},loadAsyncOptions:function(e,t,s){for(var i=this._currentRequestId=l++,o=0;o<=e.length;o++){var n=e.slice(0,o);if(this._optionsCache[n]&&(e===n||this._optionsCache[n].complete)){var a=this._optionsCache[n].options,r=this.filterOptions(a),p={options:a,filteredOptions:r,focusedOption:this._getNewFocusedOption(r)};for(var u in t)t.hasOwnProperty(u)&&(p[u]=t[u]);return this.setState(p),void(s&&s.call(this,{}))}}var c=this;this.props.asyncOptions(e,function(o,n){if(o)throw o;if(c._optionsCache[e]=n,i===c._currentRequestId){var a=c.filterOptions(n.options),r={options:n.options,filteredOptions:a,focusedOption:c._getNewFocusedOption(a)};for(var l in t)t.hasOwnProperty(l)&&(r[l]=t[l]);c.setState(r),s&&s.call(c,{})}})},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 o=function(e){if(this.props.multi&&i.indexOf(e.value)>-1)return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),o=String(e.label);return this.props.ignoreCase&&(t=t.toLowerCase(),o=o.toLowerCase(),s=s.toLowerCase()),s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.indexOf(s)>=0||"value"!==this.props.matchProp&&o.indexOf(s)>=0:"label"!==this.props.matchProp&&t.substr(0,s.length)===s||"value"!==this.props.matchProp&&o.substr(0,s.length)===s};return(e||[]).filter(o,this)},selectFocusedOption:function(){return this.selectValue(this.props.allowCreate&&!this.state.focusedOption?this.state.inputValue: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]},this._bindCloseMenuIfClickedOutside);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=this.props.optionRenderer||function(e){return e.label};if(this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e),this.props.allowCreate&&this.state.inputValue.trim()){var s=this.state.inputValue;this.state.filteredOptions.unshift({value:s,label:s,create:!0})}var i=Object.keys(this.state.filteredOptions).map(function(s){var i=this.state.filteredOptions[s],n=this.state.value==i.value,r=e===i.value,l=a({"Select-option":!0,"is-selected":n,"is-focused":r,"is-disabled":i.disabled}),p=r?"focused":null,u=this.focusOption.bind(this,i),c=this.unfocusOption.bind(this,i),h=this.selectValue.bind(this,i),d=t(i);return i.disabled?o.createElement("div",{ref:p,key:"option-"+i.value,className:l},d):o.createElement("div",{ref:p,key:"option-"+i.value,className:l,onMouseEnter:u,onMouseLeave:c,onMouseDown:h,onClick:h},i.create?"Add "+i.label+" ?":d)},this);return i.length?i:o.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},render:function(){var e=a("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){t.push(o.createElement(r,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e),disabled:this.props.disabled}))},this),this.state.inputValue||this.props.multi&&t.length||t.push(o.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,l,p=this.state.isLoading?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,u=this.props.clearable&&this.state.value&&!this.props.disabled?o.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&&(l={ref:"menu",className:"Select-menu"},this.props.multi&&(l.onMouseDown=this.handleMouseDown),s=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",l,this.buildMenu())));var c,h={ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var d in this.props.inputProps)this.props.inputProps.hasOwnProperty(d)&&(h[d]=this.props.inputProps[d]);return this.props.disabled?this.props.multi&&this.state.values.length||(c=o.createElement("div",{className:"Select-input"}," ")):c=this.props.searchable?o.createElement(n,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},h)):o.createElement("div",h," "),o.createElement("div",{ref:"wrapper",className:e},o.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),o.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,c,o.createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow}),o.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),p,u),s)}});t.exports=p},{"./Value":2}],2:[function(e,t,s){"use strict";var i=window.React,o=i.createClass({displayName:"Value",propTypes:{disabled:i.PropTypes.bool,onOptionLabelClick:i.PropTypes.func,onRemove:i.PropTypes.func,option:i.PropTypes.object.isRequired,optionLabelClick:i.PropTypes.bool,renderer:i.PropTypes.func},blockEvent:function(e){e.stopPropagation()},handleOnRemove:function(e){this.props.disabled||this.props.onRemove(e)},render:function(){var e=this.props.option.label;return this.props.renderer&&(e=this.props.renderer(this.props.option)),this.props.optionLabelClick&&(e=i.createElement("a",{className:"Select-item-label__a",onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick},e)),i.createElement("div",{className:"Select-item"},i.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),i.createElement("span",{className:"Select-item-label"},e))}});t.exports=o},{}]},{},[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,r){if(!s[a]){if(!t[a]){var l="function"==typeof require&&require;if(!r&&l)return l(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,s){(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.React:"undefined"!=typeof s?s.React:null,n="undefined"!=typeof window?window.AutosizeInput:"undefined"!=typeof s?s.AutosizeInput:null,a="undefined"!=typeof window?window.classNames:"undefined"!=typeof s?s.classNames:null,r=e("./Value"),l=0,p=o.createClass({displayName:"Select",propTypes:{allowCreate:o.PropTypes.bool,asyncOptions:o.PropTypes.func,autoload:o.PropTypes.bool,className:o.PropTypes.string,clearable:o.PropTypes.bool,clearAllText:o.PropTypes.string,clearValueText:o.PropTypes.string,delimiter:o.PropTypes.string,disabled:o.PropTypes.bool,filterOption:o.PropTypes.func,filterOptions:o.PropTypes.func,ignoreCase:o.PropTypes.bool,inputProps:o.PropTypes.object,matchPos:o.PropTypes.string,matchProp:o.PropTypes.string,multi:o.PropTypes.bool,name:o.PropTypes.string,noResultsText:o.PropTypes.string,onBlur:o.PropTypes.func,onChange:o.PropTypes.func,onFocus:o.PropTypes.func,onOptionLabelClick:o.PropTypes.func,optionRenderer:o.PropTypes.func,options:o.PropTypes.array,placeholder:o.PropTypes.string,searchable:o.PropTypes.bool,searchPromptText:o.PropTypes.string,value:o.PropTypes.any,valueRenderer:o.PropTypes.func},getDefaultProps:function(){return{allowCreate:!1,asyncOptions:void 0,autoload:!0,className:void 0,clearable:!0,clearAllText:"Clear all",clearValueText:"Clear value",delimiter:",",disabled:!1,ignoreCase:!0,inputProps:{},matchPos:"any",matchProp:"any",name:void 0,noResultsText:"No results found",onChange:void 0,onOptionLabelClick:void 0,options:void 0,placeholder:"Select...",searchable:!0,searchPromptText:"Type to search",value:void 0}},getInitialState:function(){return{isFocused:!1,isLoading:!1,isOpen:!1,options:this.props.options}},componentWillMount:function(){this._optionsCache={},this._optionsFilterString="";var e=this;this._closeMenuIfClickedOutside=function(t){if(e.state.isOpen){var s=e.refs.selectMenuContainer.getDOMNode(),i=e.refs.control.getDOMNode(),o=e.clickedOutsideElement(s,t),n=e.clickedOutsideElement(i,t);o&&n&&e.setState({isOpen:!1},e._unbindCloseMenuIfClickedOutside)}},this._bindCloseMenuIfClickedOutside=function(){!document.addEventListener&&document.attachEvent?document.attachEvent("onclick",this._closeMenuIfClickedOutside):document.addEventListener("click",this._closeMenuIfClickedOutside)},this._unbindCloseMenuIfClickedOutside=function(){!document.removeEventListener&&document.detachEvent?document.detachEvent("onclick",this._closeMenuIfClickedOutside):document.removeEventListener("click",this._closeMenuIfClickedOutside)}},componentDidMount:function(){this.props.asyncOptions&&this.props.autoload&&this.autoloadAsyncOptions()},componentWillUnmount:function(){clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout),this.state.isOpen&&this._unbindCloseMenuIfClickedOutside()},componentWillReceiveProps:function(e){JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)}),e.value!==this.state.value&&this.setState(this.getStateFromValue(e.value,e.options))},componentDidUpdate:function(){var e=this;if(!this.props.disabled&&this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),this._focusTimeout=setTimeout(function(){e.getInputNode().focus(),e._focusAfterUpdate=!1},50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var t=this.refs.focused.getDOMNode(),s=this.refs.menu.getDOMNode(),i=t.getBoundingClientRect(),o=s.getBoundingClientRect();(i.bottom>o.bottom||i.top<o.top)&&(s.scrollTop=t.offsetTop+t.clientHeight-s.offsetHeight)}this._focusedOptionReveal=!1}},focus:function(){this.getInputNode().focus()},clickedOutsideElement:function(e,t){for(var s=t.target?t.target:t.srcElement;null!=s;){if(s===e)return!1;s=s.offsetParent}return!0},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?[]:e.split(this.props.delimiter):e?[e]:[]),e.map(function(e){if("string"==typeof e){for(var s in t)if(t.hasOwnProperty(s)&&t[s]&&t[s].value===e)return t[s];return{value:e,label:e}}return e})},setValue:function(e,t){(t||void 0===t)&&(this._focusAfterUpdate=!0);var s=this.getStateFromValue(e);s.isOpen=!1,this.fireChangeEvent(s),this.setState(s)},selectValue:function(e){this.props.multi?e&&this.addValue(e):this.setValue(e),this._unbindCloseMenuIfClickedOutside()},addValue:function(e){this.setValue(this.state.values.concat(e))},popValue:function(){this.setValue(this.state.values.slice(0,this.state.values.length-1))},removeValue:function(e){this.setValue(this.state.values.filter(function(t){return t!==e}))},clearValue:function(e){e&&"mousedown"===e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault(),this.setValue(null))},resetValue:function(){this.setValue(""===this.state.value?null: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._bindCloseMenuIfClickedOutside):(this._openAfterFocus=!0,this.getInputNode().focus()))},handleMouseDownOnArrow:function(e){this.props.disabled||"mousedown"===e.type&&0!==e.button||this.state.isOpen&&(e.stopPropagation(),e.preventDefault(),this.setState({isOpen:!1},this._unbindCloseMenuIfClickedOutside))},handleInputFocus:function(e){var t=this.state.isOpen||this._openAfterFocus;this.setState({isFocused:!0,isOpen:t},function(){t?this._bindCloseMenuIfClickedOutside():this._unbindCloseMenuIfClickedOutside()}),this._openAfterFocus=!1,this.props.onFocus&&this.props.onFocus(e)},handleInputBlur:function(e){var t=this;this._blurTimeout=setTimeout(function(){t._focusAfterUpdate||t.setState({isFocused:!1})},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:if(!this.state.isOpen)return;this.selectFocusedOption();break;case 27:this.state.isOpen?this.resetValue():this.clearValue();break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;case 188:if(!this.props.allowCreate)return;e.preventDefault(),e.stopPropagation(),this.selectFocusedOption();break;default:return}e.preventDefault()}},_getNewFocusedOption:function(e){for(var t in e)if(e.hasOwnProperty(t)&&e[t]===this.state.focusedOption)return e[t];return e[0]},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},this._bindCloseMenuIfClickedOutside);else{var t=this.filterOptions(this.state.options);this.setState({isOpen:!0,inputValue:e.target.value,filteredOptions:t,focusedOption:this._getNewFocusedOption(t)},this._bindCloseMenuIfClickedOutside)}},autoloadAsyncOptions:function(){var e=this;this.loadAsyncOptions(this.props.value||"",{},function(){e.setValue(e.props.value,!1)})},loadAsyncOptions:function(e,t,s){for(var i=this._currentRequestId=l++,o=0;o<=e.length;o++){var n=e.slice(0,o);if(this._optionsCache[n]&&(e===n||this._optionsCache[n].complete)){var a=this._optionsCache[n].options,r=this.filterOptions(a),p={options:a,filteredOptions:r,focusedOption:this._getNewFocusedOption(r)};for(var u in t)t.hasOwnProperty(u)&&(p[u]=t[u]);return this.setState(p),void(s&&s.call(this,{}))}}var c=this;this.props.asyncOptions(e,function(o,n){if(o)throw o;if(c._optionsCache[e]=n,i===c._currentRequestId){var a=c.filterOptions(n.options),r={options:n.options,filteredOptions:a,focusedOption:c._getNewFocusedOption(a)};for(var l in t)t.hasOwnProperty(l)&&(r[l]=t[l]);c.setState(r),s&&s.call(c,{})}})},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 o=function(e){if(this.props.multi&&i.indexOf(e.value)>-1)return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e.value),o=String(e.label);return this.props.ignoreCase&&(t=t.toLowerCase(),o=o.toLowerCase(),s=s.toLowerCase()),s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.indexOf(s)>=0||"value"!==this.props.matchProp&&o.indexOf(s)>=0:"label"!==this.props.matchProp&&t.substr(0,s.length)===s||"value"!==this.props.matchProp&&o.substr(0,s.length)===s};return(e||[]).filter(o,this)},selectFocusedOption:function(){return this.selectValue(this.props.allowCreate&&!this.state.focusedOption?this.state.inputValue: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]},this._bindCloseMenuIfClickedOutside);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=this.props.optionRenderer||function(e){return e.label};if(this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e),this.props.allowCreate&&this.state.inputValue.trim()){var s=this.state.inputValue;this.state.filteredOptions.unshift({value:s,label:s,create:!0})}var i=Object.keys(this.state.filteredOptions).map(function(s){var i=this.state.filteredOptions[s],n=this.state.value===i.value,r=e===i.value,l=a({"Select-option":!0,"is-selected":n,"is-focused":r,"is-disabled":i.disabled}),p=r?"focused":null,u=this.focusOption.bind(this,i),c=this.unfocusOption.bind(this,i),h=this.selectValue.bind(this,i),d=t(i);return i.disabled?o.createElement("div",{ref:p,key:"option-"+i.value,className:l},d):o.createElement("div",{ref:p,key:"option-"+i.value,className:l,onMouseEnter:u,onMouseLeave:c,onMouseDown:h,onClick:h},i.create?"Add "+i.label+" ?":d)},this);return i.length?i:o.createElement("div",{className:"Select-noresults"},this.props.asyncOptions&&!this.state.inputValue?this.props.searchPromptText:this.props.noResultsText)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},render:function(){var e=a("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){t.push(o.createElement(r,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:this.handleOptionLabelClick.bind(this,e),onRemove:this.removeValue.bind(this,e),disabled:this.props.disabled}))},this),this.state.inputValue||this.props.multi&&t.length||t.push(o.createElement("div",{className:"Select-placeholder",key:"placeholder"},this.state.placeholder));var s,l,p=this.state.isLoading?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,u=this.props.clearable&&this.state.value&&!this.props.disabled?o.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&&(l={ref:"menu",className:"Select-menu"},this.props.multi&&(l.onMouseDown=this.handleMouseDown),s=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",l,this.buildMenu())));var c,h={ref:"input",className:"Select-input",tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var d in this.props.inputProps)this.props.inputProps.hasOwnProperty(d)&&(h[d]=this.props.inputProps[d]);return this.props.disabled?this.props.multi&&this.state.values.length||(c=o.createElement("div",{className:"Select-input"}," ")):c=this.props.searchable?o.createElement(n,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},h)):o.createElement("div",h," "),o.createElement("div",{ref:"wrapper",className:e},o.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),o.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,c,o.createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow}),o.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),p,u),s)}});t.exports=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Value":2}],2:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i=s.createClass({displayName:"Value",propTypes:{disabled:s.PropTypes.bool,onOptionLabelClick:s.PropTypes.func,onRemove:s.PropTypes.func,option:s.PropTypes.object.isRequired,optionLabelClick:s.PropTypes.bool,renderer:s.PropTypes.func},blockEvent:function(e){e.stopPropagation()},handleOnRemove:function(e){this.props.disabled||this.props.onRemove(e)},render:function(){var e=this.props.option.label;return this.props.renderer&&(e=this.props.renderer(this.props.option)),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.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),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)});

HISTORY.md

 # React-Select
 
+## v0.5.3 / 2015-07-05
+
+* fixed; autoload issues, thanks [Maxime Tyler](https://github.com/iam4x)
+* fixed; style incompatibilities with Foundation framework, thanks [Timothy Kempf](https://github.com/Fauntleroy)
+
 ## v0.5.2 / 2015-06-28
@@ -4,0 +9,0 @@

lib/Select.js

@@ -135,9 +135,8 @@ /* disable some rules until we refactor more completely; fixing them now would
 		};
+	},
 
-		this.setState(this.getStateFromValue(this.props.value), function () {
-			//Executes after state change is done. Fixes issue #201
-			if (this.props.asyncOptions && this.props.autoload) {
-				this.autoloadAsyncOptions();
-			}
-		});
+	componentDidMount: function componentDidMount() {
+		if (this.props.asyncOptions && this.props.autoload) {
+			this.autoloadAsyncOptions();
+		}
 	},
@@ -667,3 +666,3 @@
 			var op = this.state.filteredOptions[key];
-			var isSelected = this.state.value == op.value;
+			var isSelected = this.state.value === op.value;
 			var isFocused = focusedValue === op.value;
@@ -670,0 +669,0 @@

package.json

 {
   "name": "react-select",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A Select control built with and for ReactJS",
@@ -5,0 +5,0 @@ "main": "lib/Select.js",

src/Select.js

@@ -132,9 +132,8 @@ /* disable some rules until we refactor more completely; fixing them now would
 		};
+	},
 
-		this.setState(this.getStateFromValue(this.props.value), function(){
-			//Executes after state change is done. Fixes issue #201
-			if (this.props.asyncOptions && this.props.autoload) {
-				this.autoloadAsyncOptions();
-			}
-    });
+	componentDidMount: function() {
+		if (this.props.asyncOptions && this.props.autoload) {
+			this.autoloadAsyncOptions();
+		}
 	},
@@ -663,3 +662,3 @@
 			var op = this.state.filteredOptions[key];
-			var isSelected = this.state.value == op.value;
+			var isSelected = this.state.value === op.value;
 			var isFocused = focusedValue === op.value;
@@ -666,0 +665,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

857637

increased by1.26%

Lines of code

22897

increased by1.27%

No dependency changes