Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

react-select

Package Overview
Dependencies
Maintainers
1
Versions
180
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-select - npm Package Compare versions

Comparing version 0.6.11 to 0.6.12

examples/src/components/CustomKeysField.js

12

.publish/bundle.js

@@ -215,2 +215,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){

inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
isLoading: React.PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering

@@ -256,2 +257,3 @@ matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on

inputProps: {},
isLoading: false,
matchPos: 'any',

@@ -917,3 +919,3 @@ matchProp: 'any',

var noResultsText, promptClass;
if (this.state.isLoading) {
if (this.isLoading()) {
promptClass = 'Select-searching';

@@ -943,2 +945,6 @@ noResultsText = this.props.searchingText;

isLoading: function isLoading() {
return this.props.isLoading || this.state.isLoading;
},
render: function render() {

@@ -950,3 +956,3 @@ var selectClass = classes('Select', this.props.className, {

'is-focused': this.state.isFocused,
'is-loading': this.state.isLoading,
'is-loading': this.isLoading(),
'is-disabled': this.props.disabled,

@@ -991,3 +997,3 @@ 'has-value': this.state.value

var loading = this.state.isLoading ? React.createElement('span', { className: 'Select-loading', 'aria-hidden': 'true' }) : null;
var loading = this.isLoading() ? React.createElement('span', { className: 'Select-loading', 'aria-hidden': 'true' }) : null;
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, onTouchEnd: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: '&times;' } }) : null;

@@ -994,0 +1000,0 @@

12

.publish/standalone.js

@@ -102,2 +102,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){

inputProps: React.PropTypes.object, // custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
isLoading: React.PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering

@@ -143,2 +144,3 @@ matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on

inputProps: {},
isLoading: false,
matchPos: 'any',

@@ -804,3 +806,3 @@ matchProp: 'any',

var noResultsText, promptClass;
if (this.state.isLoading) {
if (this.isLoading()) {
promptClass = 'Select-searching';

@@ -830,2 +832,6 @@ noResultsText = this.props.searchingText;

isLoading: function isLoading() {
return this.props.isLoading || this.state.isLoading;
},
render: function render() {

@@ -837,3 +843,3 @@ var selectClass = classes('Select', this.props.className, {

'is-focused': this.state.isFocused,
'is-loading': this.state.isLoading,
'is-loading': this.isLoading(),
'is-disabled': this.props.disabled,

@@ -878,3 +884,3 @@ 'has-value': this.state.value

var loading = this.state.isLoading ? React.createElement('span', { className: 'Select-loading', 'aria-hidden': 'true' }) : null;
var loading = this.isLoading() ? React.createElement('span', { className: 'Select-loading', 'aria-hidden': 'true' }) : null;
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, onTouchEnd: this.clearValue, onClick: this.clearValue, dangerouslySetInnerHTML: { __html: '&times;' } }) : null;

@@ -881,0 +887,0 @@

116

dist/react-select.js

@@ -98,7 +98,8 @@ (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){

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])
filterOption: React.PropTypes.func, // method to filter a single option (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'}
isLoading: React.PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
labelKey: React.PropTypes.string, // path of the label value in option objects
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering

@@ -110,9 +111,9 @@ matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on

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) {}
onInputChange: React.PropTypes.func, // onInputChange handler: function(inputValue) {}
onBlur: React.PropTypes.func, // onBlur handler: function (event) {}
onChange: React.PropTypes.func, // onChange handler: function (newValue) {}
onFocus: React.PropTypes.func, // onFocus handler: function (event) {}
onInputChange: React.PropTypes.func, // onInputChange handler: function (inputValue) {}
onOptionLabelClick: React.PropTypes.func, // onCLick handler for value labels: function (value, event) {}
optionComponent: React.PropTypes.func, // option component to render in dropdown
optionRenderer: React.PropTypes.func, // optionRenderer: function(option) {}
optionRenderer: React.PropTypes.func, // optionRenderer: function (option) {}
options: React.PropTypes.array, // array of options

@@ -126,3 +127,4 @@ placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value

valueComponent: React.PropTypes.func, // value component to render in multiple mode
valueRenderer: React.PropTypes.func // valueRenderer: function(option) {}
valueKey: React.PropTypes.string, // path of the label value in option objects
valueRenderer: React.PropTypes.func // valueRenderer: function (option) {}
},

@@ -147,2 +149,3 @@

isLoading: false,
labelKey: 'label',
matchPos: 'any',

@@ -164,3 +167,4 @@ matchProp: 'any',

value: undefined,
valueComponent: Value
valueComponent: Value,
valueKey: 'value'
};

@@ -211,5 +215,5 @@ },

if (!document.addEventListener && document.attachEvent) {
document.attachEvent('onclick', this._closeMenuIfClickedOutside);
document.attachEvent('onclick', _this._closeMenuIfClickedOutside);
} else {
document.addEventListener('click', this._closeMenuIfClickedOutside);
document.addEventListener('click', _this._closeMenuIfClickedOutside);
}

@@ -219,5 +223,5 @@ };

if (!document.removeEventListener && document.detachEvent) {
document.detachEvent('onclick', this._closeMenuIfClickedOutside);
document.detachEvent('onclick', _this._closeMenuIfClickedOutside);
} else {
document.removeEventListener('click', this._closeMenuIfClickedOutside);
document.removeEventListener('click', _this._closeMenuIfClickedOutside);
}

@@ -270,3 +274,5 @@ };

clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
this._focusTimeout = setTimeout(function () {
if (!_this3.isMounted()) return;
_this3.getInputNode().focus();

@@ -305,2 +311,4 @@ _this3._focusAfterUpdate = false;

getStateFromValue: function getStateFromValue(value, options, placeholder) {
var _this4 = this;
if (!options) {

@@ -323,7 +331,7 @@ options = this.state.options;

focusedOption = values[0];
valueForState = values[0].value;
valueForState = values[0][this.props.valueKey];
} else {
focusedOption = this.getFirstFocusableOption(filteredOptions);
valueForState = values.map(function (v) {
return v.value;
return v[_this4.props.valueKey];
}).join(this.props.delimiter);

@@ -337,3 +345,3 @@ }

filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : placeholder,
placeholder: !this.props.multi && values.length ? values[0][this.props.labelKey] : placeholder,
focusedOption: focusedOption

@@ -353,2 +361,4 @@ };

initValuesArray: function initValuesArray(values, options) {
var _this5 = this;
if (!Array.isArray(values)) {

@@ -364,3 +374,3 @@ if (typeof values === 'string') {

for (var key in options) {
if (options.hasOwnProperty(key) && options[key] && (options[key].value === val || typeof options[key].value === 'number' && options[key].value.toString() === val)) {
if (options.hasOwnProperty(key) && options[key] && (options[key][_this5.props.valueKey] === val || typeof options[key][_this5.props.valueKey] === 'number' && options[key][_this5.props.valueKey].toString() === val)) {
return options[key];

@@ -462,2 +472,12 @@ }

handleMouseDownOnMenu: function handleMouseDownOnMenu(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;
}
event.stopPropagation();
event.preventDefault();
},
handleMouseDownOnArrow: function handleMouseDownOnArrow(event) {

@@ -481,2 +501,4 @@ // if the event was triggered by a mousedown and not the primary

handleInputFocus: function handleInputFocus(event) {
var _this6 = this;
var newIsOpen = this.state.isOpen || this._openAfterFocus;

@@ -488,5 +510,5 @@ this.setState({

if (newIsOpen) {
this._bindCloseMenuIfClickedOutside();
_this6._bindCloseMenuIfClickedOutside();
} else {
this._unbindCloseMenuIfClickedOutside();
_this6._unbindCloseMenuIfClickedOutside();
}

@@ -501,7 +523,7 @@ });

handleInputBlur: function handleInputBlur(event) {
var _this4 = this;
var _this7 = this;
this._blurTimeout = setTimeout(function () {
if (_this4._focusAfterUpdate) return;
_this4.setState({
if (_this7._focusAfterUpdate || !_this7.isMounted()) return;
_this7.setState({
isFocused: false,

@@ -536,3 +558,2 @@ isOpen: false

if (!this.state.isOpen) return;
this.selectFocusedOption();

@@ -613,3 +634,3 @@ break;

autoloadAsyncOptions: function autoloadAsyncOptions() {
var _this5 = this;
var _this8 = this;

@@ -620,4 +641,4 @@ this.setState({

this.loadAsyncOptions(this.props.value || '', { isLoading: false }, function () {
// update with fetched but don't focus
_this5.setValue(_this5.props.value, false);
// update with new options but don't focus
_this8.setValue(_this8.props.value, false);
});

@@ -627,3 +648,3 @@ },

loadAsyncOptions: function loadAsyncOptions(input, state, callback) {
var _this6 = this;
var _this9 = this;

@@ -656,13 +677,13 @@ var thisRequestId = this._currentRequestId = requestId++;

if (err) throw err;
if (_this6.props.cacheAsyncResults) {
_this6._optionsCache[input] = data;
if (_this9.props.cacheAsyncResults) {
_this9._optionsCache[input] = data;
}
if (thisRequestId !== _this6._currentRequestId) {
if (thisRequestId !== _this9._currentRequestId) {
return;
}
var filteredOptions = _this6.filterOptions(data.options);
var filteredOptions = _this9.filterOptions(data.options);
var newState = {
options: data.options,
filteredOptions: filteredOptions,
focusedOption: _this6._getNewFocusedOption(filteredOptions)
focusedOption: _this9._getNewFocusedOption(filteredOptions)
};

@@ -674,4 +695,6 @@ for (var key in state) {

}
_this6.setState(newState);
if (callback) callback.call(_this6, newState);
_this9.setState(newState);
if (callback) {
callback.call(_this9, newState);
}
});

@@ -689,6 +712,6 @@ },

var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
if (this.props.multi && exclude.indexOf(op[this.props.valueKey]) > -1) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
var valueTest = String(op.value),
labelTest = String(op.label);
var valueTest = String(op[this.props.valueKey]);
var labelTest = String(op[this.props.labelKey]);
if (this.props.ignoreCase) {

@@ -776,5 +799,8 @@ valueTest = valueTest.toLowerCase();

buildMenu: function buildMenu() {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
var renderLabel = this.props.optionRenderer || function (op) {
return op.label;
var _this10 = this;
var focusedValue = this.state.focusedOption ? this.state.focusedOption[this.props.valueKey] : null;
var renderLabel = this.props.optionRenderer;
if (!renderLabel) renderLabel = function (op) {
return op[_this10.props.labelKey];
};

@@ -798,4 +824,4 @@ if (this.state.filteredOptions.length > 0) {

var op = options[key];
var isSelected = this.state.value === op.value;
var isFocused = focusedValue === op.value;
var isSelected = this.state.value === op[this.props.valueKey];
var isFocused = focusedValue === op[this.props.valueKey];
var optionClass = classes({

@@ -812,3 +838,3 @@ 'Select-option': true,

var optionResult = React.createElement(this.props.optionComponent, {
key: 'option-' + op.value,
key: 'option-' + op[this.props.valueKey],
className: optionClass,

@@ -915,3 +941,3 @@ renderFunc: renderLabel,

className: 'Select-menu',
onMouseDown: this.handleMouseDown
onMouseDown: this.handleMouseDownOnMenu
};

@@ -999,3 +1025,2 @@ menu = React.createElement(

render: function render() {
var classNames = classes('Select-placeholder', this.props.value && this.props.value.className);

@@ -1066,3 +1091,2 @@ return React.createElement(

if (this.props.optionLabelClick) {
label = React.createElement(

@@ -1069,0 +1093,0 @@ 'a',

2

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,p){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!p&&r)return r(a,!0);if(n)return n(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}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(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"Option",propTypes:{addLabelText:s.PropTypes.string,className:s.PropTypes.string,mouseDown:s.PropTypes.func,mouseEnter:s.PropTypes.func,mouseLeave:s.PropTypes.func,option:s.PropTypes.object.isRequired,renderFunc:s.PropTypes.func},blockEvent:function(e){e.preventDefault(),"A"===e.target.tagName&&"href"in e.target&&(e.target.target?window.open(e.target.href):window.location.href=e.target.href)},render:function(){var e=this.props.option,t=this.props.renderFunc(e),o=i(this.props.className,e.className);return e.disabled?s.createElement("div",{className:o,onMouseDown:this.blockEvent,onClick:this.blockEvent},t):s.createElement("div",{className:o,style:e.style,onMouseEnter:this.props.mouseEnter,onMouseLeave:this.props.mouseLeave,onMouseDown:this.props.mouseDown,onClick:this.props.mouseDown,title:e.title},e.create?this.props.addLabelText.replace("{label}",e.label):t)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[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,p=e("./Value"),r=e("./SingleValue"),l=e("./Option"),u=0,c=o.createClass({displayName:"Select",propTypes:{addLabelText:o.PropTypes.string,allowCreate:o.PropTypes.bool,asyncOptions:o.PropTypes.func,autoload:o.PropTypes.bool,backspaceRemoves:o.PropTypes.bool,cacheAsyncResults:o.PropTypes.bool,className:o.PropTypes.string,clearAllText:o.PropTypes.string,clearValueText:o.PropTypes.string,clearable:o.PropTypes.bool,delimiter:o.PropTypes.string,disabled:o.PropTypes.bool,filterOption:o.PropTypes.func,filterOptions:o.PropTypes.func,ignoreCase:o.PropTypes.bool,inputProps:o.PropTypes.object,isLoading:o.PropTypes.bool,matchPos:o.PropTypes.string,matchProp:o.PropTypes.string,multi:o.PropTypes.bool,name:o.PropTypes.string,newOptionCreator:o.PropTypes.func,noResultsText:o.PropTypes.string,onBlur:o.PropTypes.func,onChange:o.PropTypes.func,onFocus:o.PropTypes.func,onInputChange:o.PropTypes.func,onOptionLabelClick:o.PropTypes.func,optionComponent:o.PropTypes.func,optionRenderer:o.PropTypes.func,options:o.PropTypes.array,placeholder:o.PropTypes.string,searchable:o.PropTypes.bool,searchingText:o.PropTypes.string,searchPromptText:o.PropTypes.string,singleValueComponent:o.PropTypes.func,value:o.PropTypes.any,valueComponent:o.PropTypes.func,valueRenderer:o.PropTypes.func},getDefaultProps:function(){return{addLabelText:'Add "{label}"?',allowCreate:!1,asyncOptions:void 0,autoload:!0,backspaceRemoves:!0,cacheAsyncResults:!0,className:void 0,clearAllText:"Clear all",clearValueText:"Clear value",clearable:!0,delimiter:",",disabled:!1,ignoreCase:!0,inputProps:{},isLoading:!1,matchPos:"any",matchProp:"any",name:void 0,newOptionCreator:void 0,noResultsText:"No results found",onChange:void 0,onInputChange:void 0,onOptionLabelClick:void 0,optionComponent:l,options:void 0,placeholder:"Select...",searchable:!0,searchingText:"Searching...",searchPromptText:"Type to search",singleValueComponent:r,value:void 0,valueComponent:p}},getInitialState:function(){return{isFocused:!1,isLoading:!1,isOpen:!1,options:this.props.options}},componentWillMount:function(){var e=this;this._optionsCache={},this._optionsFilterString="",this._closeMenuIfClickedOutside=function(t){if(e.state.isOpen){var s=o.findDOMNode(e.refs.selectMenuContainer),i=o.findDOMNode(e.refs.control),n=e.clickedOutsideElement(s,t),a=e.clickedOutsideElement(i,t);n&&a&&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))},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){var t=this,s=!1;if(JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&(s=!0,this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})),e.value!==this.state.value||e.placeholder!==this.props.placeholder||s){var i=function(s){t.setState(t.getStateFromValue(e.value,s&&s.options||e.options,e.placeholder))};this.props.asyncOptions?this.loadAsyncOptions(e.value,{},i):i()}},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=o.findDOMNode(this.refs.focused),s=o.findDOMNode(this.refs.menu),i=t.getBoundingClientRect(),n=s.getBoundingClientRect();(i.bottom>n.bottom||i.top<n.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,s){t||(t=this.state.options),s||(s=this.props.placeholder),this._optionsFilterString="";var i,o=this.initValuesArray(e,t),n=this.filterOptions(t,o),a=null;return!this.props.multi&&o.length?(i=o[0],a=o[0].value):(i=this.getFirstFocusableOption(n),a=o.map(function(e){return e.value}).join(this.props.delimiter)),{value:a,values:o,inputValue:"",filteredOptions:n,placeholder:!this.props.multi&&o.length?o[0].label:s,focusedOption:i}},getFirstFocusableOption:function(e){for(var t=0;t<e.length;++t)if(!e[t].disabled)return e[t]},initValuesArray:function(e,t){return Array.isArray(e)||(e="string"==typeof e?""===e?[]:this.props.multi?e.split(this.props.delimiter):[e]:void 0!==e&&null!==e?[e]:[]),e.map(function(e){if("string"==typeof e||"number"==typeof e){for(var s in t)if(t.hasOwnProperty(s)&&t[s]&&(t[s].value===e||"number"==typeof t[s].value&&t[s].value.toString()===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:o.findDOMNode(e)},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){return this.props.disabled||"mousedown"===e.type&&0!==e.button?void 0:(e.stopPropagation(),e.preventDefault(),this.state.isOpen&&!this.props.searchable?void this.setState({isOpen:!1},this._unbindCloseMenuIfClickedOutside):void(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,isOpen:!1})},50),this.props.onBlur&&this.props.onBlur(e)},handleKeyDown:function(e){if(!this.props.disabled){switch(e.keyCode){case 8:return void(!this.state.inputValue&&this.props.backspaceRemoves&&(e.preventDefault(),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.props.clearable&&this.clearValue(e);break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;case 188:if(!this.props.allowCreate||!this.props.multi)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 this.getFirstFocusableOption(e)},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.onInputChange&&this.props.onInputChange(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.setState({isLoading:!0}),this.loadAsyncOptions(this.props.value||"",{isLoading:!1},function(){e.setValue(e.props.value,!1)})},loadAsyncOptions:function(e,t,s){var i=this,o=this._currentRequestId=u++;if(this.props.cacheAsyncResults)for(var n=0;n<=e.length;n++){var a=e.slice(0,n);if(this._optionsCache[a]&&(e===a||this._optionsCache[a].complete)){var p=this._optionsCache[a].options,r=this.filterOptions(p),l={options:p,filteredOptions:r,focusedOption:this._getNewFocusedOption(r)};for(var c in t)t.hasOwnProperty(c)&&(l[c]=t[c]);return this.setState(l),void(s&&s.call(this,l))}}this.props.asyncOptions(e,function(n,a){if(n)throw n;if(i.props.cacheAsyncResults&&(i._optionsCache[e]=a),o===i._currentRequestId){var p=i.filterOptions(a.options),r={options:a.options,filteredOptions:p,focusedOption:i._getNewFocusedOption(p)};for(var l in t)t.hasOwnProperty(l)&&(r[l]=t[l]);i.setState(r),s&&s.call(i,r)}})},filterOptions:function(e,t){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.props.allowCreate&&!this.state.focusedOption?this.selectValue(this.state.inputValue):this.state.focusedOption?this.selectValue(this.state.focusedOption):void 0},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.filter(function(e){return!e.disabled});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};this.state.filteredOptions.length>0&&(e=null==e?this.state.filteredOptions[0]:e);var s=this.state.filteredOptions;if(this.props.allowCreate&&this.state.inputValue.trim()){var i=this.state.inputValue;s=s.slice();var n=this.props.newOptionCreator?this.props.newOptionCreator(i):{value:i,label:i,create:!0};s.unshift(n)}var p=Object.keys(s).map(function(i){var n=s[i],p=this.state.value===n.value,r=e===n.value,l=a({"Select-option":!0,"is-selected":p,"is-focused":r,"is-disabled":n.disabled}),u=r?"focused":null,c=this.focusOption.bind(this,n),h=this.unfocusOption.bind(this,n),d=this.selectValue.bind(this,n),f=o.createElement(this.props.optionComponent,{key:"option-"+n.value,className:l,renderFunc:t,mouseEnter:c,mouseLeave:h,mouseDown:d,click:d,addLabelText:this.props.addLabelText,option:n,ref:u});return f},this);if(p.length)return p;var r,l;return this.isLoading()?(l="Select-searching",r=this.props.searchingText):this.state.inputValue||!this.props.asyncOptions?(l="Select-noresults",r=this.props.noResultsText):(l="Select-search-prompt",r=this.props.searchPromptText),o.createElement("div",{className:l},r)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},isLoading:function(){return this.props.isLoading||this.state.isLoading},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.isLoading(),"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];if(this.props.multi&&this.state.values.forEach(function(e){var s=this.handleOptionLabelClick.bind(this,e),i=this.removeValue.bind(this,e),n=o.createElement(this.props.valueComponent,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:s,onRemove:i,disabled:this.props.disabled});t.push(n)},this),!(this.state.inputValue||this.props.multi&&t.length)){var s=this.state.values[0]||null;if(this.props.valueRenderer&&this.state.values.length)t.push(o.createElement(p,{key:0,option:s,renderer:this.props.valueRenderer,disabled:this.props.disabled}));else{var r=o.createElement(this.props.singleValueComponent,{key:"placeholder",value:s,placeholder:this.state.placeholder});t.push(r)}}var l,u,c=this.isLoading()?o.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,h=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,onTouchEnd:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu",onMouseDown:this.handleMouseDown},l=o.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},o.createElement("div",u,this.buildMenu())));var d,f={ref:"input",className:"Select-input "+(this.props.inputProps.className||""),tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var v in this.props.inputProps)this.props.inputProps.hasOwnProperty(v)&&"className"!==v&&(f[v]=this.props.inputProps[v]);return this.props.disabled?this.props.multi&&this.state.values.length||(d=o.createElement("div",{className:"Select-input"}," ")):d=this.props.searchable?o.createElement(n,i({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},f)):o.createElement("div",f," "),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,d,o.createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow}),o.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),c,h),l)}});t.exports=c}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Option":1,"./SingleValue":3,"./Value":4}],3:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=s.createClass({displayName:"SingleValue",propTypes:{placeholder:s.PropTypes.string,value:s.PropTypes.object},render:function(){var e=i("Select-placeholder",this.props.value&&this.props.value.className);return s.createElement("div",{className:e,style:this.props.value&&this.props.value.style,title:this.props.value&&this.props.value.title},this.props.placeholder)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,o=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.onRemove||this.props.optionLabelClick?(this.props.optionLabelClick&&(e=s.createElement("a",{className:i("Select-item-label__a",this.props.option.className),onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick,style:this.props.option.style,title:this.props.option.title},e)),s.createElement("div",{className:i("Select-item",this.props.option.className),style:this.props.option.style,title:this.props.option.title},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))):s.createElement("div",{className:i("Select-value",this.props.option.className),style:this.props.option.style,title:this.props.option.title},e)}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[2])(2)});
!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,o){function i(a,p){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!p&&r)return r(a,!0);if(n)return n(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=s[a]={exports:{}};t[a][0].call(u.exports,function(e){var s=t[a][1][e];return i(s?s:e)},u,u.exports,e,t,s,o)}return s[a].exports}for(var n="function"==typeof require&&require,a=0;a<o.length;a++)i(o[a]);return i}({1:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,o="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,i=s.createClass({displayName:"Option",propTypes:{addLabelText:s.PropTypes.string,className:s.PropTypes.string,mouseDown:s.PropTypes.func,mouseEnter:s.PropTypes.func,mouseLeave:s.PropTypes.func,option:s.PropTypes.object.isRequired,renderFunc:s.PropTypes.func},blockEvent:function(e){e.preventDefault(),"A"===e.target.tagName&&"href"in e.target&&(e.target.target?window.open(e.target.href):window.location.href=e.target.href)},render:function(){var e=this.props.option,t=this.props.renderFunc(e),i=o(this.props.className,e.className);return e.disabled?s.createElement("div",{className:i,onMouseDown:this.blockEvent,onClick:this.blockEvent},t):s.createElement("div",{className:i,style:e.style,onMouseEnter:this.props.mouseEnter,onMouseLeave:this.props.mouseLeave,onMouseDown:this.props.mouseDown,onClick:this.props.mouseDown,title:e.title},e.create?this.props.addLabelText.replace("{label}",e.label):t)}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(e,t,s){(function(s){"use strict";var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o])}return e},i="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,p=e("./Value"),r=e("./SingleValue"),l=e("./Option"),u=0,c=i.createClass({displayName:"Select",propTypes:{addLabelText:i.PropTypes.string,allowCreate:i.PropTypes.bool,asyncOptions:i.PropTypes.func,autoload:i.PropTypes.bool,backspaceRemoves:i.PropTypes.bool,cacheAsyncResults:i.PropTypes.bool,className:i.PropTypes.string,clearAllText:i.PropTypes.string,clearValueText:i.PropTypes.string,clearable:i.PropTypes.bool,delimiter:i.PropTypes.string,disabled:i.PropTypes.bool,filterOption:i.PropTypes.func,filterOptions:i.PropTypes.func,ignoreCase:i.PropTypes.bool,inputProps:i.PropTypes.object,isLoading:i.PropTypes.bool,labelKey:i.PropTypes.string,matchPos:i.PropTypes.string,matchProp:i.PropTypes.string,multi:i.PropTypes.bool,name:i.PropTypes.string,newOptionCreator:i.PropTypes.func,noResultsText:i.PropTypes.string,onBlur:i.PropTypes.func,onChange:i.PropTypes.func,onFocus:i.PropTypes.func,onInputChange:i.PropTypes.func,onOptionLabelClick:i.PropTypes.func,optionComponent:i.PropTypes.func,optionRenderer:i.PropTypes.func,options:i.PropTypes.array,placeholder:i.PropTypes.string,searchable:i.PropTypes.bool,searchingText:i.PropTypes.string,searchPromptText:i.PropTypes.string,singleValueComponent:i.PropTypes.func,value:i.PropTypes.any,valueComponent:i.PropTypes.func,valueKey:i.PropTypes.string,valueRenderer:i.PropTypes.func},getDefaultProps:function(){return{addLabelText:'Add "{label}"?',allowCreate:!1,asyncOptions:void 0,autoload:!0,backspaceRemoves:!0,cacheAsyncResults:!0,className:void 0,clearAllText:"Clear all",clearValueText:"Clear value",clearable:!0,delimiter:",",disabled:!1,ignoreCase:!0,inputProps:{},isLoading:!1,labelKey:"label",matchPos:"any",matchProp:"any",name:void 0,newOptionCreator:void 0,noResultsText:"No results found",onChange:void 0,onInputChange:void 0,onOptionLabelClick:void 0,optionComponent:l,options:void 0,placeholder:"Select...",searchable:!0,searchingText:"Searching...",searchPromptText:"Type to search",singleValueComponent:r,value:void 0,valueComponent:p,valueKey:"value"}},getInitialState:function(){return{isFocused:!1,isLoading:!1,isOpen:!1,options:this.props.options}},componentWillMount:function(){var e=this;this._optionsCache={},this._optionsFilterString="",this._closeMenuIfClickedOutside=function(t){if(e.state.isOpen){var s=i.findDOMNode(e.refs.selectMenuContainer),o=i.findDOMNode(e.refs.control),n=e.clickedOutsideElement(s,t),a=e.clickedOutsideElement(o,t);n&&a&&e.setState({isOpen:!1},e._unbindCloseMenuIfClickedOutside)}},this._bindCloseMenuIfClickedOutside=function(){!document.addEventListener&&document.attachEvent?document.attachEvent("onclick",e._closeMenuIfClickedOutside):document.addEventListener("click",e._closeMenuIfClickedOutside)},this._unbindCloseMenuIfClickedOutside=function(){!document.removeEventListener&&document.detachEvent?document.detachEvent("onclick",e._closeMenuIfClickedOutside):document.removeEventListener("click",e._closeMenuIfClickedOutside)},this.setState(this.getStateFromValue(this.props.value))},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){var t=this,s=!1;if(JSON.stringify(e.options)!==JSON.stringify(this.props.options)&&(s=!0,this.setState({options:e.options,filteredOptions:this.filterOptions(e.options)})),e.value!==this.state.value||e.placeholder!==this.props.placeholder||s){var o=function(s){t.setState(t.getStateFromValue(e.value,s&&s.options||e.options,e.placeholder))};this.props.asyncOptions?this.loadAsyncOptions(e.value,{},o):o()}},componentDidUpdate:function(){var e=this;if(!this.props.disabled&&this._focusAfterUpdate&&(clearTimeout(this._blurTimeout),clearTimeout(this._focusTimeout),this._focusTimeout=setTimeout(function(){e.isMounted()&&(e.getInputNode().focus(),e._focusAfterUpdate=!1)},50)),this._focusedOptionReveal){if(this.refs.focused&&this.refs.menu){var t=i.findDOMNode(this.refs.focused),s=i.findDOMNode(this.refs.menu),o=t.getBoundingClientRect(),n=s.getBoundingClientRect();(o.bottom>n.bottom||o.top<n.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,s){var o=this;t||(t=this.state.options),s||(s=this.props.placeholder),this._optionsFilterString="";var i,n=this.initValuesArray(e,t),a=this.filterOptions(t,n),p=null;return!this.props.multi&&n.length?(i=n[0],p=n[0][this.props.valueKey]):(i=this.getFirstFocusableOption(a),p=n.map(function(e){return e[o.props.valueKey]}).join(this.props.delimiter)),{value:p,values:n,inputValue:"",filteredOptions:a,placeholder:!this.props.multi&&n.length?n[0][this.props.labelKey]:s,focusedOption:i}},getFirstFocusableOption:function(e){for(var t=0;t<e.length;++t)if(!e[t].disabled)return e[t]},initValuesArray:function(e,t){var s=this;return Array.isArray(e)||(e="string"==typeof e?""===e?[]:this.props.multi?e.split(this.props.delimiter):[e]:void 0!==e&&null!==e?[e]:[]),e.map(function(e){if("string"==typeof e||"number"==typeof e){for(var o in t)if(t.hasOwnProperty(o)&&t[o]&&(t[o][s.props.valueKey]===e||"number"==typeof t[o][s.props.valueKey]&&t[o][s.props.valueKey].toString()===e))return t[o];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:i.findDOMNode(e)},fireChangeEvent:function(e){e.value!==this.state.value&&this.props.onChange&&this.props.onChange(e.value,e.values)},handleMouseDown:function(e){return this.props.disabled||"mousedown"===e.type&&0!==e.button?void 0:(e.stopPropagation(),e.preventDefault(),this.state.isOpen&&!this.props.searchable?void this.setState({isOpen:!1},this._unbindCloseMenuIfClickedOutside):void(this.state.isFocused?this.setState({isOpen:!0},this._bindCloseMenuIfClickedOutside):(this._openAfterFocus=!0,this.getInputNode().focus())))},handleMouseDownOnMenu:function(e){this.props.disabled||"mousedown"===e.type&&0!==e.button||(e.stopPropagation(),e.preventDefault())},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,s=this.state.isOpen||this._openAfterFocus;this.setState({isFocused:!0,isOpen:s},function(){s?t._bindCloseMenuIfClickedOutside():t._unbindCloseMenuIfClickedOutside()}),this._openAfterFocus=!1,this.props.onFocus&&this.props.onFocus(e)},handleInputBlur:function(e){var t=this;this._blurTimeout=setTimeout(function(){!t._focusAfterUpdate&&t.isMounted()&&t.setState({isFocused:!1,isOpen:!1})},50),this.props.onBlur&&this.props.onBlur(e)},handleKeyDown:function(e){if(!this.props.disabled){switch(e.keyCode){case 8:return void(!this.state.inputValue&&this.props.backspaceRemoves&&(e.preventDefault(),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.props.clearable&&this.clearValue(e);break;case 38:this.focusPreviousOption();break;case 40:this.focusNextOption();break;case 188:if(!this.props.allowCreate||!this.props.multi)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 this.getFirstFocusableOption(e)},handleInputChange:function(e){if(this._optionsFilterString=e.target.value,this.props.onInputChange&&this.props.onInputChange(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.setState({isLoading:!0}),this.loadAsyncOptions(this.props.value||"",{isLoading:!1},function(){e.setValue(e.props.value,!1)})},loadAsyncOptions:function(e,t,s){var o=this,i=this._currentRequestId=u++;if(this.props.cacheAsyncResults)for(var n=0;n<=e.length;n++){var a=e.slice(0,n);if(this._optionsCache[a]&&(e===a||this._optionsCache[a].complete)){var p=this._optionsCache[a].options,r=this.filterOptions(p),l={options:p,filteredOptions:r,focusedOption:this._getNewFocusedOption(r)};for(var c in t)t.hasOwnProperty(c)&&(l[c]=t[c]);return this.setState(l),void(s&&s.call(this,l))}}this.props.asyncOptions(e,function(n,a){if(n)throw n;if(o.props.cacheAsyncResults&&(o._optionsCache[e]=a),i===o._currentRequestId){var p=o.filterOptions(a.options),r={options:a.options,filteredOptions:p,focusedOption:o._getNewFocusedOption(p)};for(var l in t)t.hasOwnProperty(l)&&(r[l]=t[l]);o.setState(r),s&&s.call(o,r)}})},filterOptions:function(e,t){var s=this._optionsFilterString,o=(t||this.state.values).map(function(e){return e.value});if(this.props.filterOptions)return this.props.filterOptions.call(this,e,s,o);var i=function(e){if(this.props.multi&&o.indexOf(e[this.props.valueKey])>-1)return!1;if(this.props.filterOption)return this.props.filterOption.call(this,e,s);var t=String(e[this.props.valueKey]),i=String(e[this.props.labelKey]);return this.props.ignoreCase&&(t=t.toLowerCase(),i=i.toLowerCase(),s=s.toLowerCase()),s&&"start"!==this.props.matchPos?"label"!==this.props.matchProp&&t.indexOf(s)>=0||"value"!==this.props.matchProp&&i.indexOf(s)>=0:"label"!==this.props.matchProp&&t.substr(0,s.length)===s||"value"!==this.props.matchProp&&i.substr(0,s.length)===s};return(e||[]).filter(i,this)},selectFocusedOption:function(){return this.props.allowCreate&&!this.state.focusedOption?this.selectValue(this.state.inputValue):this.state.focusedOption?this.selectValue(this.state.focusedOption):void 0},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.filter(function(e){return!e.disabled});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,o=0;o<t.length;o++)if(this.state.focusedOption===t[o]){s=o;break}var i=t[0];"next"===e&&s>-1&&s<t.length-1?i=t[s+1]:"previous"===e&&(i=s>0?t[s-1]:t[t.length-1]),this.setState({focusedOption:i})}},unfocusOption:function(e){this.state.focusedOption===e&&this.setState({focusedOption:null})},buildMenu:function(){var e=this,t=this.state.focusedOption?this.state.focusedOption[this.props.valueKey]:null,s=this.props.optionRenderer;s||(s=function(t){return t[e.props.labelKey]}),this.state.filteredOptions.length>0&&(t=null==t?this.state.filteredOptions[0]:t);var o=this.state.filteredOptions;if(this.props.allowCreate&&this.state.inputValue.trim()){var n=this.state.inputValue;o=o.slice();var p=this.props.newOptionCreator?this.props.newOptionCreator(n):{value:n,label:n,create:!0};o.unshift(p)}var r=Object.keys(o).map(function(e){var n=o[e],p=this.state.value===n[this.props.valueKey],r=t===n[this.props.valueKey],l=a({"Select-option":!0,"is-selected":p,"is-focused":r,"is-disabled":n.disabled}),u=r?"focused":null,c=this.focusOption.bind(this,n),h=this.unfocusOption.bind(this,n),d=this.selectValue.bind(this,n),f=i.createElement(this.props.optionComponent,{key:"option-"+n[this.props.valueKey],className:l,renderFunc:s,mouseEnter:c,mouseLeave:h,mouseDown:d,click:d,addLabelText:this.props.addLabelText,option:n,ref:u});return f},this);if(r.length)return r;var l,u;return this.isLoading()?(u="Select-searching",l=this.props.searchingText):this.state.inputValue||!this.props.asyncOptions?(u="Select-noresults",l=this.props.noResultsText):(u="Select-search-prompt",l=this.props.searchPromptText),i.createElement("div",{className:u},l)},handleOptionLabelClick:function(e,t){this.props.onOptionLabelClick&&this.props.onOptionLabelClick(e,t)},isLoading:function(){return this.props.isLoading||this.state.isLoading},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.isLoading(),"is-disabled":this.props.disabled,"has-value":this.state.value}),t=[];if(this.props.multi&&this.state.values.forEach(function(e){var s=this.handleOptionLabelClick.bind(this,e),o=this.removeValue.bind(this,e),n=i.createElement(this.props.valueComponent,{key:e.value,option:e,renderer:this.props.valueRenderer,optionLabelClick:!!this.props.onOptionLabelClick,onOptionLabelClick:s,onRemove:o,disabled:this.props.disabled});t.push(n)},this),!(this.state.inputValue||this.props.multi&&t.length)){var s=this.state.values[0]||null;if(this.props.valueRenderer&&this.state.values.length)t.push(i.createElement(p,{key:0,option:s,renderer:this.props.valueRenderer,disabled:this.props.disabled}));else{var r=i.createElement(this.props.singleValueComponent,{key:"placeholder",value:s,placeholder:this.state.placeholder});t.push(r)}}var l,u,c=this.isLoading()?i.createElement("span",{className:"Select-loading","aria-hidden":"true"}):null,h=this.props.clearable&&this.state.value&&!this.props.disabled?i.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,onTouchEnd:this.clearValue,onClick:this.clearValue,dangerouslySetInnerHTML:{__html:"&times;"}}):null;this.state.isOpen&&(u={ref:"menu",className:"Select-menu",onMouseDown:this.handleMouseDownOnMenu},l=i.createElement("div",{ref:"selectMenuContainer",className:"Select-menu-outer"},i.createElement("div",u,this.buildMenu())));var d,f={ref:"input",className:"Select-input "+(this.props.inputProps.className||""),tabIndex:this.props.tabIndex||0,onFocus:this.handleInputFocus,onBlur:this.handleInputBlur};for(var v in this.props.inputProps)this.props.inputProps.hasOwnProperty(v)&&"className"!==v&&(f[v]=this.props.inputProps[v]);return this.props.disabled?this.props.multi&&this.state.values.length||(d=i.createElement("div",{className:"Select-input"}," ")):d=this.props.searchable?i.createElement(n,o({value:this.state.inputValue,onChange:this.handleInputChange,minWidth:"5"},f)):i.createElement("div",f," "),i.createElement("div",{ref:"wrapper",className:e},i.createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:this.state.value,disabled:this.props.disabled}),i.createElement("div",{className:"Select-control",ref:"control",onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown,onTouchEnd:this.handleMouseDown},t,d,i.createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow}),i.createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}),c,h),l)}});t.exports=c}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Option":1,"./SingleValue":3,"./Value":4}],3:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,o="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames:null,i=s.createClass({displayName:"SingleValue",propTypes:{placeholder:s.PropTypes.string,value:s.PropTypes.object},render:function(){var e=o("Select-placeholder",this.props.value&&this.props.value.className);return s.createElement("div",{className:e,style:this.props.value&&this.props.value.style,title:this.props.value&&this.props.value.title},this.props.placeholder)}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,s){(function(e){"use strict";var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,o="undefined"!=typeof window?window.classNames:"undefined"!=typeof e?e.classNames: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.onRemove||this.props.optionLabelClick?(this.props.optionLabelClick&&(e=s.createElement("a",{className:o("Select-item-label__a",this.props.option.className),onMouseDown:this.blockEvent,onTouchEnd:this.props.onOptionLabelClick,onClick:this.props.onOptionLabelClick,style:this.props.option.style,title:this.props.option.title},e)),s.createElement("div",{className:o("Select-item",this.props.option.className),style:this.props.option.style,title:this.props.option.title},s.createElement("span",{className:"Select-item-icon",onMouseDown:this.blockEvent,onClick:this.handleOnRemove,onTouchEnd:this.handleOnRemove},"×"),s.createElement("span",{className:"Select-item-label"},e))):s.createElement("div",{className:o("Select-value",this.props.option.className),style:this.props.option.style,title:this.props.option.title},e)}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[2])(2)});

9

examples/src/app.js

@@ -6,3 +6,5 @@ /* eslint react/prop-types: 0 */

import CustomKeysField from './components/CustomKeysField';
import CustomRenderField from './components/CustomRenderField';
import DisabledUpsellOptions from './components/DisabledUpsellOptions';
import MultiSelectField from './components/MultiSelectField';

@@ -14,3 +16,2 @@ import RemoteSelectField from './components/RemoteSelectField';

import ValuesAsNumbersField from './components/ValuesAsNumbersField';
import DisabledUpsellOptions from './components/DisabledUpsellOptions';

@@ -34,9 +35,9 @@ var FLAVOURS = [

<StatesField label="States" searchable />
<MultiSelectField label="Multiselect"/>
<UsersField label="Users (custom options/value)" hint="This example uses Gravatar to render user's image besides the value and the options" />
<ValuesAsNumbersField label="Values as numbers" />
<MultiSelectField label="Multiselect"/>
<CustomKeysField label="Custom object keys for options" />
<SelectedValuesField label="Clickable labels (labels as links)" options={FLAVOURS} hint="Open the console to see click behaviour (data/event)" />
<SelectedValuesField label="Disabled option" options={FLAVOURS_WITH_DISABLED_OPTION} hint="You savage! Caramel is the best..." />
<DisabledUpsellOptions label="Disable option with an upsell link"/>
<DisabledUpsellOptions label="Disabled option with a link"/>
<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's not in the list, then hit enter" />

@@ -43,0 +44,0 @@ <CustomRenderField label="Custom render options/values" />

4

examples/src/components/CustomRenderField.js

@@ -34,3 +34,3 @@ import React from 'react';

multi={this.props.multi}
allowCreate={true}
allowCreate
placeholder="Select your favourite"

@@ -46,2 +46,2 @@ options={ops}

module.exports = CustomRenderField;
module.exports = CustomRenderField;

6

examples/src/components/MultiSelectField.js

@@ -38,4 +38,4 @@ import React from 'react';

<h3 className="section-heading">{this.props.label}</h3>
<Select multi={true} disabled={this.state.disabled} value={this.state.value} placeholder="Select your favourite(s)" options={ops} onChange={this.handleSelectChange} />
<Select multi disabled={this.state.disabled} value={this.state.value} placeholder="Select your favourite(s)" options={ops} onChange={this.handleSelectChange} />
<div className="checkbox-list">

@@ -52,2 +52,2 @@ <label className="checkbox">

module.exports = MultiSelectField;
module.exports = MultiSelectField;

4

examples/src/components/SelectedValuesField.js

@@ -33,3 +33,3 @@ import React from 'react';

value={this.props.options.slice(1,3)}
multi={true}
multi
placeholder="Select your favourite(s)"

@@ -44,2 +44,2 @@ options={this.props.options}

module.exports = SelectedValuesField;
module.exports = SelectedValuesField;

22

examples/src/components/ValuesAsNumbersField.js

@@ -13,3 +13,3 @@ import React from 'react';

},
getInitialState () {

@@ -31,3 +31,3 @@ return {

},
onChangeMatchStart(event) {

@@ -50,3 +50,3 @@ this.setState({

},
onChange(value, values) {

@@ -58,3 +58,3 @@ this.setState({

},
onChangeMulti(event) {

@@ -65,15 +65,15 @@ this.setState({

},
render () {
var matchProp = 'any';
if (this.state.matchLabel && !this.state.matchValue) {
matchProp = 'label';
}
if (!this.state.matchLabel && this.state.matchValue) {
matchProp = 'value';
}
return (

@@ -83,3 +83,3 @@ <div className="section">

<Select
searchable={true}
searchable
matchProp={matchProp}

@@ -115,2 +115,2 @@ matchPos={this.state.matchPos}

module.exports = ValuesAsNumbersField;
module.exports = ValuesAsNumbersField;

4

gulpfile.js

@@ -1,3 +0,3 @@

var gulp = require('gulp'),
initGulpTasks = require('react-component-gulp-tasks');
var gulp = require('gulp');
var initGulpTasks = require('react-component-gulp-tasks');

@@ -4,0 +4,0 @@ var taskConfig = {

7

HISTORY.md
# React-Select
## v0.6.12 / 2015-10-02
* added; `labelKey` and `valueKey` props, so you can now use different keys in `option` objects for the label and value
* fixed; additional `isMounted()` checks in timeouts
* fixed; componentDidUpdate timeout is reset correctly, see #208 and #434, thanks [Petr Gladkikh](https://github.com/PetrGlad)
* fixed; mousedown event on scrollbar in menu no longer hides it, thanks [Yishai Burt](https://github.com/burtyish)
## v0.6.11 / 2015-09-28

@@ -4,0 +11,0 @@

114

lib/Select.js

@@ -35,7 +35,8 @@ /* disable some rules until we refactor more completely; fixing them now would

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])
filterOption: React.PropTypes.func, // method to filter a single option (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'}
isLoading: React.PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
labelKey: React.PropTypes.string, // path of the label value in option objects
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering

@@ -47,9 +48,9 @@ matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on

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) {}
onInputChange: React.PropTypes.func, // onInputChange handler: function(inputValue) {}
onBlur: React.PropTypes.func, // onBlur handler: function (event) {}
onChange: React.PropTypes.func, // onChange handler: function (newValue) {}
onFocus: React.PropTypes.func, // onFocus handler: function (event) {}
onInputChange: React.PropTypes.func, // onInputChange handler: function (inputValue) {}
onOptionLabelClick: React.PropTypes.func, // onCLick handler for value labels: function (value, event) {}
optionComponent: React.PropTypes.func, // option component to render in dropdown
optionRenderer: React.PropTypes.func, // optionRenderer: function(option) {}
optionRenderer: React.PropTypes.func, // optionRenderer: function (option) {}
options: React.PropTypes.array, // array of options

@@ -63,3 +64,4 @@ placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value

valueComponent: React.PropTypes.func, // value component to render in multiple mode
valueRenderer: React.PropTypes.func // valueRenderer: function(option) {}
valueKey: React.PropTypes.string, // path of the label value in option objects
valueRenderer: React.PropTypes.func // valueRenderer: function (option) {}
},

@@ -84,2 +86,3 @@

isLoading: false,
labelKey: 'label',
matchPos: 'any',

@@ -101,3 +104,4 @@ matchProp: 'any',

value: undefined,
valueComponent: Value
valueComponent: Value,
valueKey: 'value'
};

@@ -148,5 +152,5 @@ },

if (!document.addEventListener && document.attachEvent) {
document.attachEvent('onclick', this._closeMenuIfClickedOutside);
document.attachEvent('onclick', _this._closeMenuIfClickedOutside);
} else {
document.addEventListener('click', this._closeMenuIfClickedOutside);
document.addEventListener('click', _this._closeMenuIfClickedOutside);
}

@@ -156,5 +160,5 @@ };

if (!document.removeEventListener && document.detachEvent) {
document.detachEvent('onclick', this._closeMenuIfClickedOutside);
document.detachEvent('onclick', _this._closeMenuIfClickedOutside);
} else {
document.removeEventListener('click', this._closeMenuIfClickedOutside);
document.removeEventListener('click', _this._closeMenuIfClickedOutside);
}

@@ -207,3 +211,5 @@ };

clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
this._focusTimeout = setTimeout(function () {
if (!_this3.isMounted()) return;
_this3.getInputNode().focus();

@@ -242,2 +248,4 @@ _this3._focusAfterUpdate = false;

getStateFromValue: function getStateFromValue(value, options, placeholder) {
var _this4 = this;
if (!options) {

@@ -260,7 +268,7 @@ options = this.state.options;

focusedOption = values[0];
valueForState = values[0].value;
valueForState = values[0][this.props.valueKey];
} else {
focusedOption = this.getFirstFocusableOption(filteredOptions);
valueForState = values.map(function (v) {
return v.value;
return v[_this4.props.valueKey];
}).join(this.props.delimiter);

@@ -274,3 +282,3 @@ }

filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : placeholder,
placeholder: !this.props.multi && values.length ? values[0][this.props.labelKey] : placeholder,
focusedOption: focusedOption

@@ -290,2 +298,4 @@ };

initValuesArray: function initValuesArray(values, options) {
var _this5 = this;
if (!Array.isArray(values)) {

@@ -301,3 +311,3 @@ if (typeof values === 'string') {

for (var key in options) {
if (options.hasOwnProperty(key) && options[key] && (options[key].value === val || typeof options[key].value === 'number' && options[key].value.toString() === val)) {
if (options.hasOwnProperty(key) && options[key] && (options[key][_this5.props.valueKey] === val || typeof options[key][_this5.props.valueKey] === 'number' && options[key][_this5.props.valueKey].toString() === val)) {
return options[key];

@@ -399,2 +409,12 @@ }

handleMouseDownOnMenu: function handleMouseDownOnMenu(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;
}
event.stopPropagation();
event.preventDefault();
},
handleMouseDownOnArrow: function handleMouseDownOnArrow(event) {

@@ -418,2 +438,4 @@ // if the event was triggered by a mousedown and not the primary

handleInputFocus: function handleInputFocus(event) {
var _this6 = this;
var newIsOpen = this.state.isOpen || this._openAfterFocus;

@@ -425,5 +447,5 @@ this.setState({

if (newIsOpen) {
this._bindCloseMenuIfClickedOutside();
_this6._bindCloseMenuIfClickedOutside();
} else {
this._unbindCloseMenuIfClickedOutside();
_this6._unbindCloseMenuIfClickedOutside();
}

@@ -438,7 +460,7 @@ });

handleInputBlur: function handleInputBlur(event) {
var _this4 = this;
var _this7 = this;
this._blurTimeout = setTimeout(function () {
if (_this4._focusAfterUpdate) return;
_this4.setState({
if (_this7._focusAfterUpdate || !_this7.isMounted()) return;
_this7.setState({
isFocused: false,

@@ -473,3 +495,2 @@ isOpen: false

if (!this.state.isOpen) return;
this.selectFocusedOption();

@@ -550,3 +571,3 @@ break;

autoloadAsyncOptions: function autoloadAsyncOptions() {
var _this5 = this;
var _this8 = this;

@@ -557,4 +578,4 @@ this.setState({

this.loadAsyncOptions(this.props.value || '', { isLoading: false }, function () {
// update with fetched but don't focus
_this5.setValue(_this5.props.value, false);
// update with new options but don't focus
_this8.setValue(_this8.props.value, false);
});

@@ -564,3 +585,3 @@ },

loadAsyncOptions: function loadAsyncOptions(input, state, callback) {
var _this6 = this;
var _this9 = this;

@@ -593,13 +614,13 @@ var thisRequestId = this._currentRequestId = requestId++;

if (err) throw err;
if (_this6.props.cacheAsyncResults) {
_this6._optionsCache[input] = data;
if (_this9.props.cacheAsyncResults) {
_this9._optionsCache[input] = data;
}
if (thisRequestId !== _this6._currentRequestId) {
if (thisRequestId !== _this9._currentRequestId) {
return;
}
var filteredOptions = _this6.filterOptions(data.options);
var filteredOptions = _this9.filterOptions(data.options);
var newState = {
options: data.options,
filteredOptions: filteredOptions,
focusedOption: _this6._getNewFocusedOption(filteredOptions)
focusedOption: _this9._getNewFocusedOption(filteredOptions)
};

@@ -611,4 +632,6 @@ for (var key in state) {

}
_this6.setState(newState);
if (callback) callback.call(_this6, newState);
_this9.setState(newState);
if (callback) {
callback.call(_this9, newState);
}
});

@@ -626,6 +649,6 @@ },

var filterOption = function filterOption(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
if (this.props.multi && exclude.indexOf(op[this.props.valueKey]) > -1) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
var valueTest = String(op.value),
labelTest = String(op.label);
var valueTest = String(op[this.props.valueKey]);
var labelTest = String(op[this.props.labelKey]);
if (this.props.ignoreCase) {

@@ -713,5 +736,8 @@ valueTest = valueTest.toLowerCase();

buildMenu: function buildMenu() {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
var renderLabel = this.props.optionRenderer || function (op) {
return op.label;
var _this10 = this;
var focusedValue = this.state.focusedOption ? this.state.focusedOption[this.props.valueKey] : null;
var renderLabel = this.props.optionRenderer;
if (!renderLabel) renderLabel = function (op) {
return op[_this10.props.labelKey];
};

@@ -735,4 +761,4 @@ if (this.state.filteredOptions.length > 0) {

var op = options[key];
var isSelected = this.state.value === op.value;
var isFocused = focusedValue === op.value;
var isSelected = this.state.value === op[this.props.valueKey];
var isFocused = focusedValue === op[this.props.valueKey];
var optionClass = classes({

@@ -749,3 +775,3 @@ 'Select-option': true,

var optionResult = React.createElement(this.props.optionComponent, {
key: 'option-' + op.value,
key: 'option-' + op[this.props.valueKey],
className: optionClass,

@@ -852,3 +878,3 @@ renderFunc: renderLabel,

className: 'Select-menu',
onMouseDown: this.handleMouseDown
onMouseDown: this.handleMouseDownOnMenu
};

@@ -855,0 +881,0 @@ menu = React.createElement(

1

lib/SingleValue.js

@@ -14,3 +14,2 @@ 'use strict';

render: function render() {
var classNames = classes('Select-placeholder', this.props.value && this.props.value.className);

@@ -17,0 +16,0 @@ return React.createElement(

1

lib/Value.js

@@ -48,3 +48,2 @@ 'use strict';

if (this.props.optionLabelClick) {
label = React.createElement(

@@ -51,0 +50,0 @@ 'a',

2

package.json
{
"name": "react-select",
"version": "0.6.11",
"version": "0.6.12",
"description": "A Select control built with and for ReactJS",

@@ -5,0 +5,0 @@ "main": "lib/Select.js",

9

README.md

@@ -173,2 +173,3 @@ [![Build Status](https://travis-ci.org/JedWatson/react-select.svg?branch=master)](https://travis-ci.org/JedWatson/react-select)

backspaceRemoves | bool | whether pressing backspace removes the last item when there is no input value
cacheAsyncResults | bool | enables the options cache for asyncOptions (default: `true`)
className | string | className for the outer element

@@ -179,3 +180,2 @@ clearable | bool | should it be possible to reset value

delimiter | string | delimiter to use to join multiple values
disableCache | bool | disables the options cache for asyncOptions
disabled | bool | whether the Select is disabled or not

@@ -186,2 +186,4 @@ filterOption | func | method to filter a single option: function(option, filterString)

inputProps | object | custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
isLoading | bool | whether the Select is loading externally or not (such as options being loaded)
labelKey | string | the option property to use for the label
matchPos | string | (any, start) match the start or entire string when filtering

@@ -191,2 +193,3 @@ matchProp | string | (any, label, value) which option property to filter on

name | string | field name, for hidden <input /> tag
newOptionCreator | func | factory to create new options when allowCreate set
noResultsText | string | placeholder displayed when there are no matching search results

@@ -196,2 +199,4 @@ onBlur | func | onBlur handler: function(event) {}

onFocus | func | onFocus handler: function(event) {}
onInputChange | func | onInputChange handler: function(inputValue) {}
onOptionLabelClick | func | onCLick handler for value labels: function (value, event) {}
optionRenderer | func | function which returns a custom way to render the options in the menu

@@ -201,4 +206,6 @@ options | array | array of options

searchable | bool | whether to enable searching feature or not
searchingText | string | message to display whilst options are loading via asyncOptions, or when isLoading prop is `true`
searchPromptText | string | label to prompt for search input
value | any | initial field value
valueKey | string | the option property to use for the value
valueRenderer | func | function which returns a custom way to render the value selected

@@ -205,0 +212,0 @@

16

src/Option.js

@@ -15,3 +15,3 @@ var React = require('react');

blockEvent: function(event) {
blockEvent (event) {
event.preventDefault();

@@ -29,3 +29,3 @@ if ((event.target.tagName !== 'A') || !('href' in event.target)) {

render: function() {
render () {
var obj = this.props.option;

@@ -43,8 +43,8 @@ var renderedLabel = this.props.renderFunc(obj);

<div className={optionClasses}
style={obj.style}
onMouseEnter={this.props.mouseEnter}
onMouseLeave={this.props.mouseLeave}
onMouseDown={this.props.mouseDown}
onClick={this.props.mouseDown}
title={obj.title}>
style={obj.style}
onMouseEnter={this.props.mouseEnter}
onMouseLeave={this.props.mouseLeave}
onMouseDown={this.props.mouseDown}
onClick={this.props.mouseDown}
title={obj.title}>
{ obj.create ? this.props.addLabelText.replace('{label}', obj.label) : renderedLabel }

@@ -51,0 +51,0 @@ </div>

171

src/Select.js

@@ -31,7 +31,8 @@ /* disable some rules until we refactor more completely; fixing them now would

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])
filterOption: React.PropTypes.func, // method to filter a single option (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'}
isLoading: React.PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
labelKey: React.PropTypes.string, // path of the label value in option objects
matchPos: React.PropTypes.string, // (any|start) match the start or entire string when filtering

@@ -43,9 +44,9 @@ matchProp: React.PropTypes.string, // (any|label|value) which option property to filter on

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) {}
onInputChange: React.PropTypes.func, // onInputChange handler: function(inputValue) {}
onBlur: React.PropTypes.func, // onBlur handler: function (event) {}
onChange: React.PropTypes.func, // onChange handler: function (newValue) {}
onFocus: React.PropTypes.func, // onFocus handler: function (event) {}
onInputChange: React.PropTypes.func, // onInputChange handler: function (inputValue) {}
onOptionLabelClick: React.PropTypes.func, // onCLick handler for value labels: function (value, event) {}
optionComponent: React.PropTypes.func, // option component to render in dropdown
optionRenderer: React.PropTypes.func, // optionRenderer: function(option) {}
optionRenderer: React.PropTypes.func, // optionRenderer: function (option) {}
options: React.PropTypes.array, // array of options

@@ -59,6 +60,7 @@ placeholder: React.PropTypes.string, // field placeholder, displayed when there's no value

valueComponent: React.PropTypes.func, // value component to render in multiple mode
valueRenderer: React.PropTypes.func // valueRenderer: function(option) {}
valueKey: React.PropTypes.string, // path of the label value in option objects
valueRenderer: React.PropTypes.func // valueRenderer: function (option) {}
},
getDefaultProps: function() {
getDefaultProps () {
return {

@@ -80,2 +82,3 @@ addLabelText: 'Add "{label}"?',

isLoading: false,
labelKey: 'label',
matchPos: 'any',

@@ -97,7 +100,8 @@ matchProp: 'any',

value: undefined,
valueComponent: Value
valueComponent: Value,
valueKey: 'value'
};
},
getInitialState: function() {
getInitialState () {
return {

@@ -120,3 +124,3 @@ /*

componentWillMount: function() {
componentWillMount () {
this._optionsCache = {};

@@ -141,3 +145,3 @@ this._optionsFilterString = '';

};
this._bindCloseMenuIfClickedOutside = function() {
this._bindCloseMenuIfClickedOutside = () => {
if (!document.addEventListener && document.attachEvent) {

@@ -149,3 +153,3 @@ document.attachEvent('onclick', this._closeMenuIfClickedOutside);

};
this._unbindCloseMenuIfClickedOutside = function() {
this._unbindCloseMenuIfClickedOutside = () => {
if (!document.removeEventListener && document.detachEvent) {

@@ -160,3 +164,3 @@ document.detachEvent('onclick', this._closeMenuIfClickedOutside);

componentDidMount: function() {
componentDidMount () {
if (this.props.asyncOptions && this.props.autoload) {

@@ -167,3 +171,3 @@ this.autoloadAsyncOptions();

componentWillUnmount: function() {
componentWillUnmount () {
clearTimeout(this._blurTimeout);

@@ -176,3 +180,3 @@ clearTimeout(this._focusTimeout);

componentWillReceiveProps: function(newProps) {
componentWillReceiveProps (newProps) {
var optionsChanged = false;

@@ -190,4 +194,4 @@ if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {

(newState && newState.options) || newProps.options,
newProps.placeholder)
);
newProps.placeholder
));
};

@@ -202,6 +206,8 @@ if (this.props.asyncOptions) {

componentDidUpdate: function() {
componentDidUpdate () {
if (!this.props.disabled && this._focusAfterUpdate) {
clearTimeout(this._blurTimeout);
clearTimeout(this._focusTimeout);
this._focusTimeout = setTimeout(() => {
if (!this.isMounted()) return;
this.getInputNode().focus();

@@ -226,7 +232,7 @@ this._focusAfterUpdate = false;

focus: function() {
focus () {
this.getInputNode().focus();
},
clickedOutsideElement: function(element, event) {
clickedOutsideElement (element, event) {
var eventTarget = (event.target) ? event.target : event.srcElement;

@@ -240,3 +246,3 @@ while (eventTarget != null) {

getStateFromValue: function(value, options, placeholder) {
getStateFromValue (value, options, placeholder) {
if (!options) {

@@ -259,6 +265,6 @@ options = this.state.options;

focusedOption = values[0];
valueForState = values[0].value;
valueForState = values[0][this.props.valueKey];
} else {
focusedOption = this.getFirstFocusableOption(filteredOptions);
valueForState = values.map(function(v) { return v.value; }).join(this.props.delimiter);
valueForState = values.map((v) => { return v[this.props.valueKey]; }).join(this.props.delimiter);
}

@@ -271,3 +277,3 @@

filteredOptions: filteredOptions,
placeholder: !this.props.multi && values.length ? values[0].label : placeholder,
placeholder: !this.props.multi && values.length ? values[0][this.props.labelKey] : placeholder,
focusedOption: focusedOption

@@ -277,3 +283,3 @@ };

getFirstFocusableOption: function (options) {
getFirstFocusableOption (options) {

@@ -287,3 +293,3 @@ for (var optionIndex = 0; optionIndex < options.length; ++optionIndex) {

initValuesArray: function(values, options) {
initValuesArray (values, options) {
if (!Array.isArray(values)) {

@@ -300,3 +306,3 @@ if (typeof values === 'string') {

}
return values.map(function(val) {
return values.map((val) => {
if (typeof val === 'string' || typeof val === 'number') {

@@ -306,5 +312,5 @@ for (var key in options) {

options[key] &&
(options[key].value === val ||
typeof options[key].value === 'number' &&
options[key].value.toString() === val
(options[key][this.props.valueKey] === val ||
typeof options[key][this.props.valueKey] === 'number' &&
options[key][this.props.valueKey].toString() === val
)) {

@@ -321,3 +327,3 @@ return options[key];

setValue: function(value, focusAfterUpdate) {
setValue (value, focusAfterUpdate) {
if (focusAfterUpdate || focusAfterUpdate === undefined) {

@@ -332,3 +338,3 @@ this._focusAfterUpdate = true;

selectValue: function(value) {
selectValue (value) {
if (!this.props.multi) {

@@ -342,11 +348,11 @@ this.setValue(value);

addValue: function(value) {
addValue (value) {
this.setValue(this.state.values.concat(value));
},
popValue: function() {
popValue () {
this.setValue(this.state.values.slice(0, this.state.values.length - 1));
},
removeValue: function(valueToRemove) {
removeValue (valueToRemove) {
this.setValue(this.state.values.filter(function(value) {

@@ -357,3 +363,3 @@ return value !== valueToRemove;

clearValue: function(event) {
clearValue (event) {
// if the event was triggered by a mousedown and not the primary

@@ -369,7 +375,7 @@ // button, ignore it.

resetValue: function() {
resetValue () {
this.setValue(this.state.value === '' ? null : this.state.value);
},
getInputNode: function () {
getInputNode () {
var input = this.refs.input;

@@ -379,3 +385,3 @@ return this.props.searchable ? input : React.findDOMNode(input);

fireChangeEvent: function(newState) {
fireChangeEvent (newState) {
if (newState.value !== this.state.value && this.props.onChange) {

@@ -386,3 +392,3 @@ this.props.onChange(newState.value, newState.values);

handleMouseDown: function(event) {
handleMouseDown (event) {
// if the event was triggered by a mousedown and not the primary

@@ -414,3 +420,3 @@ // button, or if the component is disabled, ignore it.

handleMouseDownOnArrow: function(event) {
handleMouseDownOnMenu (event) {
// if the event was triggered by a mousedown and not the primary

@@ -421,2 +427,12 @@ // button, or if the component is disabled, ignore it.

}
event.stopPropagation();
event.preventDefault();
},
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

@@ -433,3 +449,3 @@ if (!this.state.isOpen) {

handleInputFocus: function(event) {
handleInputFocus (event) {
var newIsOpen = this.state.isOpen || this._openAfterFocus;

@@ -439,4 +455,4 @@ this.setState({

isOpen: newIsOpen
}, function() {
if(newIsOpen) {
}, () => {
if (newIsOpen) {
this._bindCloseMenuIfClickedOutside();

@@ -454,5 +470,5 @@ }

handleInputBlur: function(event) {
handleInputBlur (event) {
this._blurTimeout = setTimeout(() => {
if (this._focusAfterUpdate) return;
if (this._focusAfterUpdate || !this.isMounted()) return;
this.setState({

@@ -468,3 +484,3 @@ isFocused: false,

handleKeyDown: function(event) {
handleKeyDown (event) {
if (this.props.disabled) return;

@@ -486,3 +502,2 @@ switch (event.keyCode) {

if (!this.state.isOpen) return;
this.selectFocusedOption();

@@ -519,3 +534,3 @@ break;

// If not, returns the first available option.
_getNewFocusedOption: function(filteredOptions) {
_getNewFocusedOption (filteredOptions) {
for (var key in filteredOptions) {

@@ -529,3 +544,3 @@ if (filteredOptions.hasOwnProperty(key) && filteredOptions[key] === this.state.focusedOption) {

handleInputChange: function(event) {
handleInputChange (event) {
// assign an internal variable because we need to use

@@ -559,3 +574,3 @@ // the latest value before setState() has completed.

autoloadAsyncOptions: function() {
autoloadAsyncOptions () {
this.setState({

@@ -565,3 +580,3 @@ isLoading: true

this.loadAsyncOptions((this.props.value || ''), { isLoading: false }, () => {
// update with fetched but don't focus
// update with new options but don't focus
this.setValue(this.props.value, false);

@@ -571,3 +586,3 @@ });

loadAsyncOptions: function(input, state, callback) {
loadAsyncOptions (input, state, callback) {
var thisRequestId = this._currentRequestId = requestId++;

@@ -617,7 +632,9 @@ if (this.props.cacheAsyncResults) {

this.setState(newState);
if (callback) callback.call(this, newState);
if (callback) {
callback.call(this, newState);
}
});
},
filterOptions: function(options, values) {
filterOptions (options, values) {
var filterValue = this._optionsFilterString;

@@ -631,5 +648,6 @@ var exclude = (values || this.state.values).map(function(i) {

var filterOption = function(op) {
if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
if (this.props.multi && exclude.indexOf(op[this.props.valueKey]) > -1) return false;
if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
var valueTest = String(op.value), labelTest = String(op.label);
var valueTest = String(op[this.props.valueKey]);
var labelTest = String(op[this.props.labelKey]);
if (this.props.ignoreCase) {

@@ -652,3 +670,3 @@ valueTest = valueTest.toLowerCase();

selectFocusedOption: function() {
selectFocusedOption () {
if (this.props.allowCreate && !this.state.focusedOption) {

@@ -663,3 +681,3 @@ return this.selectValue(this.state.inputValue);

focusOption: function(op) {
focusOption (op) {
this.setState({

@@ -670,11 +688,11 @@ focusedOption: op

focusNextOption: function() {
focusNextOption () {
this.focusAdjacentOption('next');
},
focusPreviousOption: function() {
focusPreviousOption () {
this.focusAdjacentOption('previous');
},
focusAdjacentOption: function(dir) {
focusAdjacentOption (dir) {
this._focusedOptionReveal = true;

@@ -717,3 +735,3 @@ var ops = this.state.filteredOptions.filter(function(op) {

unfocusOption: function(op) {
unfocusOption (op) {
if (this.state.focusedOption === op) {

@@ -726,7 +744,6 @@ this.setState({

buildMenu: function() {
var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
var renderLabel = this.props.optionRenderer || function(op) {
return op.label;
};
buildMenu () {
var focusedValue = this.state.focusedOption ? this.state.focusedOption[this.props.valueKey] : null;
var renderLabel = this.props.optionRenderer;
if (!renderLabel) renderLabel = (op) => op[this.props.labelKey];
if (this.state.filteredOptions.length > 0) {

@@ -749,4 +766,4 @@ focusedValue = focusedValue == null ? this.state.filteredOptions[0] : focusedValue;

var op = options[key];
var isSelected = this.state.value === op.value;
var isFocused = focusedValue === op.value;
var isSelected = this.state.value === op[this.props.valueKey];
var isFocused = focusedValue === op[this.props.valueKey];
var optionClass = classes({

@@ -763,3 +780,3 @@ 'Select-option': true,

var optionResult = React.createElement(this.props.optionComponent, {
key: 'option-' + op.value,
key: 'option-' + op[this.props.valueKey],
className: optionClass,

@@ -801,3 +818,3 @@ renderFunc: renderLabel,

handleOptionLabelClick: function (value, event) {
handleOptionLabelClick (value, event) {
if (this.props.onOptionLabelClick) {

@@ -808,7 +825,7 @@ this.props.onOptionLabelClick(value, event);

isLoading: function() {
isLoading () {
return this.props.isLoading || this.state.isLoading;
},
render: function() {
render () {
var selectClass = classes('Select', this.props.className, {

@@ -868,3 +885,3 @@ 'is-multi': this.props.multi,

className: 'Select-menu',
onMouseDown: this.handleMouseDown
onMouseDown: this.handleMouseDownOnMenu
};

@@ -871,0 +888,0 @@ menu = (

3

src/SingleValue.js

@@ -9,4 +9,3 @@ var React = require('react');

},
render: function() {
render () {
var classNames = classes('Select-placeholder', this.props.value && this.props.value.className);

@@ -13,0 +12,0 @@ return (

7

src/Value.js

@@ -17,7 +17,7 @@ var React = require('react');

blockEvent: function(event) {
blockEvent (event) {
event.stopPropagation();
},
handleOnRemove: function(event) {
handleOnRemove (event) {
if (!this.props.disabled) {

@@ -28,3 +28,3 @@ this.props.onRemove(event);

render: function() {
render () {
var label = this.props.option.label;

@@ -46,3 +46,2 @@ if (this.props.renderer) {

if (this.props.optionLabelClick) {
label = (

@@ -49,0 +48,0 @@ <a className={classes('Select-item-label__a', this.props.option.className)}

.eslintrc

Sorry, the diff of this file is not supported yet

examples/src/example.less

Sorry, the diff of this file is not supported yet

test/Select-test.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc