diff --git a/dist/react-select.css b/dist/react-select.css index aad32e1355..3ed14bad19 100644 --- a/dist/react-select.css +++ b/dist/react-select.css @@ -16,16 +16,64 @@ -moz-box-sizing: border-box; box-sizing: border-box; } +.Select.is-disabled .Select-arrow-zone { + cursor: default; + pointer-events: none; + opacity: 0.35; +} .Select.is-disabled > .Select-control { background-color: #f9f9f9; } .Select.is-disabled > .Select-control:hover { box-shadow: none; } -.Select.is-disabled .Select-arrow-zone { - cursor: default; - pointer-events: none; - opacity: 0.35; +.Select.is-open > .Select-control { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + background: #fff; + border-color: #b3b3b3 #ccc #d9d9d9; +} +.Select.is-open > .Select-control .Select-arrow { + top: -2px; + border-color: transparent transparent #999; + border-width: 0 5px 5px; +} +.Select.is-searchable.is-open > .Select-control { + cursor: text; +} +.Select.is-searchable.is-focused:not(.is-open) > .Select-control { + cursor: text; +} +.Select.is-focused:not(.is-open) > .Select-control { + border-color: #007eff; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1); +} +.Select.has-value.is-clearable.Select--single > .Select-control .Select-value { + padding-right: 42px; +} +.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { + color: #333; +} +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { + cursor: pointer; + text-decoration: none; +} +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { + color: #007eff; + outline: none; + text-decoration: underline; +} +.Select.has-value.is-pseudo-focused .Select-input { + opacity: 0; +} +.Select.is-open .Select-arrow, +.Select .Select-arrow-zone:hover > .Select-arrow { + border-top-color: #666; } .Select-control { background-color: #fff; @@ -49,27 +97,6 @@ .Select-control .Select-input:focus { outline: none; } -.is-searchable.is-open > .Select-control { - cursor: text; -} -.is-open > .Select-control { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - background: #fff; - border-color: #b3b3b3 #ccc #d9d9d9; -} -.is-open > .Select-control .Select-arrow { - top: -2px; - border-color: transparent transparent #999; - border-width: 0 5px 5px; -} -.is-searchable.is-focused:not(.is-open) > .Select-control { - cursor: text; -} -.is-focused:not(.is-open) > .Select-control { - border-color: #007eff; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1); -} .Select-placeholder, .Select--single > .Select-control .Select-value { bottom: 0; @@ -86,26 +113,6 @@ text-overflow: ellipsis; white-space: nowrap; } -.has-value.is-clearable.Select--single > .Select-control .Select-value { - padding-right: 42px; -} -.has-value.Select--single > .Select-control .Select-value .Select-value-label, -.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { - color: #333; -} -.has-value.Select--single > .Select-control .Select-value a.Select-value-label, -.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { - cursor: pointer; - text-decoration: none; -} -.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, -.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, -.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, -.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { - color: #007eff; - outline: none; - text-decoration: underline; -} .Select-input { height: 34px; padding-left: 10px; @@ -201,10 +208,6 @@ width: 0; position: relative; } -.is-open .Select-arrow, -.Select-arrow-zone:hover > .Select-arrow { - border-top-color: #666; -} .Select--multi .Select-multi-value-wrapper { display: inline-block; } diff --git a/dist/react-select.es.js b/dist/react-select.es.js index 7389a566bc..4a439f9bf2 100644 --- a/dist/react-select.es.js +++ b/dist/react-select.es.js @@ -114,7 +114,6 @@ function clearRenderer() { }); } -var babelHelpers = {}; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { @@ -345,28 +344,6 @@ var possibleConstructorReturn = function (self, call) { return call && (typeof call === "object" || typeof call === "function") ? call : self; }; - - - - - - - - - - - - - - - - - - - - -babelHelpers; - var Option = function (_React$Component) { inherits(Option, _React$Component); @@ -472,6 +449,7 @@ var Option = function (_React$Component) { onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, id: instancePrefix + '-option-' + optionIndex, + 'aria-label': this.props.children, title: option.title }, this.props.children ); @@ -663,7 +641,10 @@ var Select$1 = function (_React$Component) { }, { key: 'componentDidMount', value: function componentDidMount() { - if (this.props.autofocus) { + if (typeof this.props.autofocus !== 'undefined' && typeof console !== 'undefined') { + console.warn('Warning: The autofocus prop will be deprecated in react-select1.0.0 in favor of autoFocus to match React\'s autoFocus prop'); + } + if (this.props.autoFocus || this.props.autofocus) { this.focus(); } } @@ -1377,7 +1358,7 @@ var Select$1 = function (_React$Component) { if (!valueArray.length) { return !this.state.inputValue ? React.createElement( 'div', - { className: 'Select-placeholder' }, + { className: 'Select-placeholder', tabIndex: -1 }, this.props.placeholder ) : null; } @@ -1483,7 +1464,7 @@ var Select$1 = function (_React$Component) { } return React.createElement( 'div', - { className: className }, + { className: className, key: 'input-wrap' }, React.createElement('input', inputProps) ); } @@ -1671,6 +1652,7 @@ var Select$1 = function (_React$Component) { var options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null); var isOpen = this.state.isOpen; if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false; + isOpen = this.props.isAlwaysOpen ? true : isOpen; var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]); var focusedOption = null; @@ -1749,7 +1731,8 @@ Select$1.propTypes = { addLabelText: PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input arrowRenderer: PropTypes.func, // Create drop-down caret element autoBlur: PropTypes.bool, // automatically blur the component when an option is selected - autofocus: PropTypes.bool, // autofocus the component on mount + autofocus: PropTypes.bool, // deprecated; use autoFocus instead + autoFocus: PropTypes.bool, // autofocus the component on mount autosize: PropTypes.bool, // whether to enable autosizing or not backspaceRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input backspaceToRemoveMessage: PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label @@ -1770,6 +1753,7 @@ Select$1.propTypes = { inputProps: PropTypes.object, // custom attributes for the Input inputRenderer: PropTypes.func, // returns a custom input component instanceId: PropTypes.string, // set the components instanceId + isAlwaysOpen: PropTypes.bool, // set the menu to be always open isLoading: PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded) joinValues: PropTypes.bool, // joins multiple values into a single form field with the delimiter (legacy mode) labelKey: PropTypes.string, // path of the label value in option objects @@ -1858,7 +1842,8 @@ Select$1.defaultProps = { simpleValue: false, tabSelectsValue: true, valueComponent: Value, - valueKey: 'value' + valueKey: 'value', + isAlwaysOpen: false }; var propTypes = { @@ -1950,6 +1935,8 @@ var Async = function (_Component) { var cache = this._cache; if (cache && Object.prototype.hasOwnProperty.call(cache, inputValue)) { + this._callback = null; + this.setState({ options: cache[inputValue] }); @@ -1958,14 +1945,14 @@ var Async = function (_Component) { } var callback = function callback(error, data) { - if (callback === _this2._callback) { - _this2._callback = null; + var options = data && data.options || []; - var options = data && data.options || []; + if (cache) { + cache[inputValue] = options; + } - if (cache) { - cache[inputValue] = options; - } + if (callback === _this2._callback) { + _this2._callback = null; _this2.setState({ isLoading: false, @@ -2122,8 +2109,8 @@ var CreatableSelect = function (_React$Component) { if (onNewOptionClick) { onNewOptionClick(option); } else { + this.inputValue = ''; options.unshift(option); - this.select.selectValue(option); } } @@ -2215,7 +2202,6 @@ var CreatableSelect = function (_React$Component) { if (onInputChange) { onInputChange(input); } - // This value may be needed in between Select mounts (when this.select is null) this.inputValue = input; } @@ -2408,16 +2394,6 @@ CreatableSelect.propTypes = { shouldKeyDownEventCreateNewOption: PropTypes.func }; -function reduce(obj) { - var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - return Object.keys(obj).reduce(function (props, key) { - var value = obj[key]; - if (value !== undefined) props[key] = value; - return props; - }, props); -} - var AsyncCreatableSelect = function (_React$Component) { inherits(AsyncCreatableSelect, _React$Component); @@ -2444,7 +2420,7 @@ var AsyncCreatableSelect = function (_React$Component) { CreatableSelect, _this2.props, function (creatableProps) { - return React.createElement(Select$1, _extends({}, reduce(asyncProps, reduce(creatableProps, {})), { + return React.createElement(Select$1, _extends({}, asyncProps, creatableProps, { onInputChange: function onInputChange(input) { creatableProps.onInputChange(input); return asyncProps.onInputChange(input); diff --git a/dist/react-select.js b/dist/react-select.js index c837ecb83d..7bd529d224 100644 --- a/dist/react-select.js +++ b/dist/react-select.js @@ -1,2333 +1,2461 @@ -(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 -1) return false; + if (props.filterOption) return props.filterOption.call(_this, option, filterValue); + if (!filterValue) return true; + var valueTest = String(option[props.valueKey]); + var labelTest = String(option[props.labelKey]); + if (props.ignoreAccents) { + if (props.matchProp !== 'label') valueTest = stripDiacritics(valueTest); + if (props.matchProp !== 'value') labelTest = stripDiacritics(labelTest); + } + if (props.ignoreCase) { + if (props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); + if (props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + } + return props.matchPos === 'start' ? props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; + }); +} -function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +function menuRenderer(_ref) { + var focusedOption = _ref.focusedOption, + instancePrefix = _ref.instancePrefix, + labelKey = _ref.labelKey, + onFocus = _ref.onFocus, + onSelect = _ref.onSelect, + optionClassName = _ref.optionClassName, + optionComponent = _ref.optionComponent, + optionRenderer = _ref.optionRenderer, + options = _ref.options, + valueArray = _ref.valueArray, + valueKey = _ref.valueKey, + onOptionRef = _ref.onOptionRef; -var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); + var Option = optionComponent; -var _react2 = _interopRequireDefault(_react); + return options.map(function (option, i) { + var isSelected = valueArray && valueArray.indexOf(option) > -1; + var isFocused = option === focusedOption; + var optionClass = classNames(optionClassName, { + 'Select-option': true, + 'is-selected': isSelected, + 'is-focused': isFocused, + 'is-disabled': option.disabled + }); -var _propTypes = require('prop-types'); + return React__default.createElement( + Option, + { + className: optionClass, + instancePrefix: instancePrefix, + isDisabled: option.disabled, + isFocused: isFocused, + isSelected: isSelected, + key: 'option-' + i + '-' + option[valueKey], + onFocus: onFocus, + onSelect: onSelect, + option: option, + optionIndex: i, + ref: function ref(_ref2) { + onOptionRef(_ref2, isFocused); + } + }, + optionRenderer(option, i) + ); + }); +} -var _propTypes2 = _interopRequireDefault(_propTypes); +function clearRenderer() { + return React__default.createElement('span', { + className: 'Select-clear', + dangerouslySetInnerHTML: { __html: '×' } + }); +} -var _Select = require('./Select'); +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { + return typeof obj; +} : function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; +}; -var _Select2 = _interopRequireDefault(_Select); -var _utilsStripDiacritics = require('./utils/stripDiacritics'); -var _utilsStripDiacritics2 = _interopRequireDefault(_utilsStripDiacritics); -var propTypes = { - autoload: _propTypes2['default'].bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true - cache: _propTypes2['default'].any, // object to use to cache results; set to null/false to disable caching - children: _propTypes2['default'].func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element - ignoreAccents: _propTypes2['default'].bool, // strip diacritics when filtering; defaults to true - ignoreCase: _propTypes2['default'].bool, // perform case-insensitive filtering; defaults to true - loadingPlaceholder: _propTypes2['default'].oneOfType([// replaces the placeholder while options are loading - _propTypes2['default'].string, _propTypes2['default'].node]), - loadOptions: _propTypes2['default'].func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise - multi: _propTypes2['default'].bool, // multi-value input - options: _propTypes2['default'].array.isRequired, // array of options - placeholder: _propTypes2['default'].oneOfType([// field placeholder, displayed when there's no value (shared with Select) - _propTypes2['default'].string, _propTypes2['default'].node]), - noResultsText: _propTypes2['default'].oneOfType([// field noResultsText, displayed when no options come back from the server - _propTypes2['default'].string, _propTypes2['default'].node]), - onChange: _propTypes2['default'].func, // onChange handler: function (newValue) {} - searchPromptText: _propTypes2['default'].oneOfType([// label to prompt for search input - _propTypes2['default'].string, _propTypes2['default'].node]), - onInputChange: _propTypes2['default'].func, // optional for keeping track of what is being typed - value: _propTypes2['default'].any }; - -// initial field value -var defaultCache = {}; -var defaultProps = { - autoload: true, - cache: defaultCache, - children: defaultChildren, - ignoreAccents: true, - ignoreCase: true, - loadingPlaceholder: 'Loading...', - options: [], - searchPromptText: 'Type to search' +var asyncGenerator = function () { + function AwaitValue(value) { + this.value = value; + } + + function AsyncGenerator(gen) { + var front, back; + + function send(key, arg) { + return new Promise(function (resolve, reject) { + var request = { + key: key, + arg: arg, + resolve: resolve, + reject: reject, + next: null + }; + + if (back) { + back = back.next = request; + } else { + front = back = request; + resume(key, arg); + } + }); + } + + function resume(key, arg) { + try { + var result = gen[key](arg); + var value = result.value; + + if (value instanceof AwaitValue) { + Promise.resolve(value.value).then(function (arg) { + resume("next", arg); + }, function (arg) { + resume("throw", arg); + }); + } else { + settle(result.done ? "return" : "normal", result.value); + } + } catch (err) { + settle("throw", err); + } + } + + function settle(type, value) { + switch (type) { + case "return": + front.resolve({ + value: value, + done: true + }); + break; + + case "throw": + front.reject(value); + break; + + default: + front.resolve({ + value: value, + done: false + }); + break; + } + + front = front.next; + + if (front) { + resume(front.key, front.arg); + } else { + back = null; + } + } + + this._invoke = send; + + if (typeof gen.return !== "function") { + this.return = undefined; + } + } + + if (typeof Symbol === "function" && Symbol.asyncIterator) { + AsyncGenerator.prototype[Symbol.asyncIterator] = function () { + return this; + }; + } + + AsyncGenerator.prototype.next = function (arg) { + return this._invoke("next", arg); + }; + + AsyncGenerator.prototype.throw = function (arg) { + return this._invoke("throw", arg); + }; + + AsyncGenerator.prototype.return = function (arg) { + return this._invoke("return", arg); + }; + + return { + wrap: function (fn) { + return function () { + return new AsyncGenerator(fn.apply(this, arguments)); + }; + }, + await: function (value) { + return new AwaitValue(value); + } + }; +}(); + + + + + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } }; -var Async = (function (_Component) { - _inherits(Async, _Component); +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + + + + + +var defineProperty = function (obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +}; - function Async(props, context) { - _classCallCheck(this, Async); +var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - _get(Object.getPrototypeOf(Async.prototype), 'constructor', this).call(this, props, context); + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } - this._cache = props.cache === defaultCache ? {} : props.cache; + return target; +}; - this.state = { - isLoading: false, - options: props.options - }; - this._onInputChange = this._onInputChange.bind(this); - } - _createClass(Async, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var autoload = this.props.autoload; +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } - if (autoload) { - this.loadOptions(''); - } - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (nextProps.options !== this.props.options) { - this.setState({ - options: nextProps.options - }); - } - } - }, { - key: 'clearOptions', - value: function clearOptions() { - this.setState({ options: [] }); - } - }, { - key: 'loadOptions', - value: function loadOptions(inputValue) { - var _this = this; + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; - var loadOptions = this.props.loadOptions; - var cache = this._cache; - if (cache && cache.hasOwnProperty(inputValue)) { - this.setState({ - options: cache[inputValue] - }); - return; - } - var callback = function callback(error, data) { - if (callback === _this._callback) { - _this._callback = null; - var options = data && data.options || []; - if (cache) { - cache[inputValue] = options; - } - _this.setState({ - isLoading: false, - options: options - }); - } - }; - // Ignore all but the most recent request - this._callback = callback; +var objectWithoutProperties = function (obj, keys) { + var target = {}; - var promise = loadOptions(inputValue, callback); - if (promise) { - promise.then(function (data) { - return callback(null, data); - }, function (error) { - return callback(error); - }); - } + for (var i in obj) { + if (keys.indexOf(i) >= 0) continue; + if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; + target[i] = obj[i]; + } - if (this._callback && !this.state.isLoading) { - this.setState({ - isLoading: true - }); - } + return target; +}; - return inputValue; - } - }, { - key: '_onInputChange', - value: function _onInputChange(inputValue) { - var _props = this.props; - var ignoreAccents = _props.ignoreAccents; - var ignoreCase = _props.ignoreCase; - var onInputChange = _props.onInputChange; +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } - if (ignoreAccents) { - inputValue = (0, _utilsStripDiacritics2['default'])(inputValue); - } + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; - if (ignoreCase) { - inputValue = inputValue.toLowerCase(); - } +var Option = function (_React$Component) { + inherits(Option, _React$Component); - if (onInputChange) { - onInputChange(inputValue); + function Option(props) { + classCallCheck(this, Option); + + var _this = possibleConstructorReturn(this, (Option.__proto__ || Object.getPrototypeOf(Option)).call(this, props)); + + _this.handleMouseDown = _this.handleMouseDown.bind(_this); + _this.handleMouseEnter = _this.handleMouseEnter.bind(_this); + _this.handleMouseMove = _this.handleMouseMove.bind(_this); + _this.handleTouchStart = _this.handleTouchStart.bind(_this); + _this.handleTouchEnd = _this.handleTouchEnd.bind(_this); + _this.handleTouchMove = _this.handleTouchMove.bind(_this); + _this.onFocus = _this.onFocus.bind(_this); + return _this; + } + + createClass(Option, [{ + key: 'blockEvent', + value: function blockEvent(event) { + event.preventDefault(); + event.stopPropagation(); + if (event.target.tagName !== 'A' || !('href' in event.target)) { + return; + } + if (event.target.target) { + window.open(event.target.href, event.target.target); + } else { + window.location.href = event.target.href; } + } + }, { + key: 'handleMouseDown', + value: function handleMouseDown(event) { + event.preventDefault(); + event.stopPropagation(); + this.props.onSelect(this.props.option, event); + } + }, { + key: 'handleMouseEnter', + value: function handleMouseEnter(event) { + this.onFocus(event); + } + }, { + key: 'handleMouseMove', + value: function handleMouseMove(event) { + this.onFocus(event); + } + }, { + key: 'handleTouchEnd', + value: function handleTouchEnd(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; - return this.loadOptions(inputValue); + this.handleMouseDown(event); + } + }, { + key: 'handleTouchMove', + value: function handleTouchMove(event) { + // Set a flag that the view is being dragged + this.dragging = true; + } + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + // Set a flag that the view is not being dragged + this.dragging = false; } }, { - key: 'inputValue', - value: function inputValue() { - if (this.select) { - return this.select.state.inputValue; + key: 'onFocus', + value: function onFocus(event) { + if (!this.props.isFocused) { + this.props.onFocus(this.props.option, event); } - return ''; } }, { - key: 'noResultsText', - value: function noResultsText() { - var _props2 = this.props; - var loadingPlaceholder = _props2.loadingPlaceholder; - var noResultsText = _props2.noResultsText; - var searchPromptText = _props2.searchPromptText; - var isLoading = this.state.isLoading; + key: 'render', + value: function render() { + var _props = this.props, + option = _props.option, + instancePrefix = _props.instancePrefix, + optionIndex = _props.optionIndex; - var inputValue = this.inputValue(); + var className = classNames(this.props.className, option.className); - if (isLoading) { - return loadingPlaceholder; + return option.disabled ? React__default.createElement( + 'div', + { className: className, + onMouseDown: this.blockEvent, + onClick: this.blockEvent }, + this.props.children + ) : React__default.createElement( + 'div', + { className: className, + style: option.style, + role: 'option', + onMouseDown: this.handleMouseDown, + onMouseEnter: this.handleMouseEnter, + onMouseMove: this.handleMouseMove, + onTouchStart: this.handleTouchStart, + onTouchMove: this.handleTouchMove, + onTouchEnd: this.handleTouchEnd, + id: instancePrefix + '-option-' + optionIndex, + 'aria-label': this.props.children, + title: option.title }, + this.props.children + ); + } + }]); + return Option; +}(React__default.Component); + + + +Option.propTypes = { + children: PropTypes.node, + className: PropTypes.string, // className (based on mouse position) + instancePrefix: PropTypes.string.isRequired, // unique prefix for the ids (used for aria) + isDisabled: PropTypes.bool, // the option is disabled + isFocused: PropTypes.bool, // the option is focused + isSelected: PropTypes.bool, // the option is selected + onFocus: PropTypes.func, // method to handle mouseEnter on option element + onSelect: PropTypes.func, // method to handle click on option element + onUnfocus: PropTypes.func, // method to handle mouseLeave on option element + option: PropTypes.object.isRequired, // object that is base for that option + optionIndex: PropTypes.number // index of the option, used to generate unique ids for aria +}; + +var Value = function (_React$Component) { + inherits(Value, _React$Component); + + function Value(props) { + classCallCheck(this, Value); + + var _this = possibleConstructorReturn(this, (Value.__proto__ || Object.getPrototypeOf(Value)).call(this, props)); + + _this.handleMouseDown = _this.handleMouseDown.bind(_this); + _this.onRemove = _this.onRemove.bind(_this); + _this.handleTouchEndRemove = _this.handleTouchEndRemove.bind(_this); + _this.handleTouchMove = _this.handleTouchMove.bind(_this); + _this.handleTouchStart = _this.handleTouchStart.bind(_this); + return _this; + } + + createClass(Value, [{ + key: 'handleMouseDown', + value: function handleMouseDown(event) { + if (event.type === 'mousedown' && event.button !== 0) { + return; } - if (inputValue && noResultsText) { - return noResultsText; + if (this.props.onClick) { + event.stopPropagation(); + this.props.onClick(this.props.value, event); + return; + } + if (this.props.value.href) { + event.stopPropagation(); } - return searchPromptText; } }, { - key: 'focus', - value: function focus() { - this.select.focus(); + key: 'onRemove', + value: function onRemove(event) { + event.preventDefault(); + event.stopPropagation(); + this.props.onRemove(this.props.value); + } + }, { + key: 'handleTouchEndRemove', + value: function handleTouchEndRemove(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; + + // Fire the mouse events + this.onRemove(event); + } + }, { + key: 'handleTouchMove', + value: function handleTouchMove(event) { + // Set a flag that the view is being dragged + this.dragging = true; + } + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + // Set a flag that the view is not being dragged + this.dragging = false; + } + }, { + key: 'renderRemoveIcon', + value: function renderRemoveIcon() { + if (this.props.disabled || !this.props.onRemove) return; + return React__default.createElement( + 'span', + { className: 'Select-value-icon', + 'aria-hidden': 'true', + onMouseDown: this.onRemove, + onTouchEnd: this.handleTouchEndRemove, + onTouchStart: this.handleTouchStart, + onTouchMove: this.handleTouchMove }, + '\xD7' + ); + } + }, { + key: 'renderLabel', + value: function renderLabel() { + var className = 'Select-value-label'; + return this.props.onClick || this.props.value.href ? React__default.createElement( + 'a', + { className: className, href: this.props.value.href, target: this.props.value.target, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown }, + this.props.children + ) : React__default.createElement( + 'span', + { className: className, role: 'option', 'aria-selected': 'true', id: this.props.id }, + this.props.children + ); } }, { key: 'render', value: function render() { - var _this2 = this; - - var _props3 = this.props; - var children = _props3.children; - var loadingPlaceholder = _props3.loadingPlaceholder; - var placeholder = _props3.placeholder; - var _state = this.state; - var isLoading = _state.isLoading; - var options = _state.options; - - var props = { - noResultsText: this.noResultsText(), - placeholder: isLoading ? loadingPlaceholder : placeholder, - options: isLoading && loadingPlaceholder ? [] : options, - ref: function ref(_ref) { - return _this2.select = _ref; + return React__default.createElement( + 'div', + { className: classNames('Select-value', this.props.value.className), + style: this.props.value.style, + title: this.props.value.title }, - onChange: function onChange(newValues) { - if (_this2.props.multi && _this2.props.value && newValues.length > _this2.props.value.length) { - _this2.clearOptions(); - } - _this2.props.onChange(newValues); - } - }; - - return children(_extends({}, this.props, props, { - isLoading: isLoading, - onInputChange: this._onInputChange - })); + this.renderRemoveIcon(), + this.renderLabel() + ); } }]); + return Value; +}(React__default.Component); - return Async; -})(_react.Component); -exports['default'] = Async; -Async.propTypes = propTypes; -Async.defaultProps = defaultProps; +Value.propTypes = { + children: PropTypes.node, + disabled: PropTypes.bool, // disabled prop passed to ReactSelect + id: PropTypes.string, // Unique id for the value - used for aria + onClick: PropTypes.func, // method to handle click on value label + onRemove: PropTypes.func, // method to handle removal of the value + value: PropTypes.object.isRequired // the option object for this value +}; -function defaultChildren(props) { - return _react2['default'].createElement(_Select2['default'], props); -} -module.exports = exports['default']; +/*! + Copyright (c) 2017 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/react-select +*/ +var stringifyValue = function stringifyValue(value) { + return typeof value === 'string' ? value : value !== null && JSON.stringify(value) || ''; +}; -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":5,"./utils/stripDiacritics":11,"prop-types":undefined}],2:[function(require,module,exports){ -(function (global){ -'use strict'; +var stringOrNode = PropTypes.oneOfType([PropTypes.string, PropTypes.node]); -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; +var instanceId = 1; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } +var Select$1 = function (_React$Component) { + inherits(Select, _React$Component); -var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); + function Select(props) { + classCallCheck(this, Select); -var _react2 = _interopRequireDefault(_react); + var _this = possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props)); -var _createReactClass = require('create-react-class'); - -var _createReactClass2 = _interopRequireDefault(_createReactClass); - -var _Select = require('./Select'); - -var _Select2 = _interopRequireDefault(_Select); - -var AsyncCreatable = (0, _createReactClass2['default'])({ - displayName: 'AsyncCreatableSelect', - - focus: function focus() { - this.select.focus(); - }, - - render: function render() { - var _this = this; + ['clearValue', 'focusOption', 'handleInputBlur', 'handleInputChange', 'handleInputFocus', 'handleInputValueChange', 'handleKeyDown', 'handleMenuScroll', 'handleMouseDown', 'handleMouseDownOnArrow', 'handleMouseDownOnMenu', 'handleRequired', 'handleTouchOutside', 'handleTouchMove', 'handleTouchStart', 'handleTouchEnd', 'handleTouchEndClearValue', 'handleValueClick', 'getOptionLabel', 'onOptionRef', 'removeValue', 'selectValue'].forEach(function (fn) { + return _this[fn] = _this[fn].bind(_this); + }); - return _react2['default'].createElement( - _Select2['default'].Async, - this.props, - function (asyncProps) { - return _react2['default'].createElement( - _Select2['default'].Creatable, - _this.props, - function (creatableProps) { - return _react2['default'].createElement(_Select2['default'], _extends({}, asyncProps, creatableProps, { - onInputChange: function (input) { - creatableProps.onInputChange(input); - return asyncProps.onInputChange(input); - }, - ref: function (ref) { - _this.select = ref; - creatableProps.ref(ref); - asyncProps.ref(ref); - } - })); - } - ); - } - ); + _this.state = { + inputValue: '', + isFocused: false, + isOpen: false, + isPseudoFocused: false, + required: false + }; + return _this; } -}); - -module.exports = AsyncCreatable; - -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":5,"create-react-class":undefined}],3:[function(require,module,exports){ -(function (global){ -'use strict'; - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } - -var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); - -var _react2 = _interopRequireDefault(_react); - -var _createReactClass = require('create-react-class'); - -var _createReactClass2 = _interopRequireDefault(_createReactClass); - -var _propTypes = require('prop-types'); -var _propTypes2 = _interopRequireDefault(_propTypes); + createClass(Select, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this._instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId) + '-'; + var valueArray = this.getValueArray(this.props.value); -var _Select = require('./Select'); - -var _Select2 = _interopRequireDefault(_Select); - -var _utilsDefaultFilterOptions = require('./utils/defaultFilterOptions'); - -var _utilsDefaultFilterOptions2 = _interopRequireDefault(_utilsDefaultFilterOptions); - -var _utilsDefaultMenuRenderer = require('./utils/defaultMenuRenderer'); - -var _utilsDefaultMenuRenderer2 = _interopRequireDefault(_utilsDefaultMenuRenderer); - -var Creatable = (0, _createReactClass2['default'])({ - displayName: 'CreatableSelect', - - propTypes: { - // Child function responsible for creating the inner Select component - // This component can be used to compose HOCs (eg Creatable and Async) - // (props: Object): PropTypes.element - children: _propTypes2['default'].func, - - // See Select.propTypes.filterOptions - filterOptions: _propTypes2['default'].any, - - // Searches for any matching option within the set of options. - // This function prevents duplicate options from being created. - // ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean - isOptionUnique: _propTypes2['default'].func, - - // Determines if the current input text represents a valid option. - // ({ label: string }): boolean - isValidNewOption: _propTypes2['default'].func, - - // See Select.propTypes.menuRenderer - menuRenderer: _propTypes2['default'].any, - - // Factory to create new option. - // ({ label: string, labelKey: string, valueKey: string }): Object - newOptionCreator: _propTypes2['default'].func, - - // input change handler: function (inputValue) {} - onInputChange: _propTypes2['default'].func, - - // input keyDown handler: function (event) {} - onInputKeyDown: _propTypes2['default'].func, - - // new option click handler: function (option) {} - onNewOptionClick: _propTypes2['default'].func, - - // new option click handler: function (option) {} - onNewOptionClick: _react2['default'].PropTypes.func, - - // See Select.propTypes.options - options: _propTypes2['default'].array, - - // Creates prompt/placeholder option text. - // (filterText: string): string - promptTextCreator: _propTypes2['default'].func, - - // Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. - shouldKeyDownEventCreateNewOption: _propTypes2['default'].func - }, + if (this.props.required) { + this.setState({ + required: this.handleRequired(valueArray[0], this.props.multi) + }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + if (typeof this.props.autofocus !== 'undefined' && typeof console !== 'undefined') { + console.warn('Warning: The autofocus prop will be deprecated in react-select1.0.0 in favor of autoFocus to match React\'s autoFocus prop'); + } + if (this.props.autoFocus || this.props.autofocus) { + this.focus(); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var valueArray = this.getValueArray(nextProps.value, nextProps); - // Default prop methods - statics: { - isOptionUnique: isOptionUnique, - isValidNewOption: isValidNewOption, - newOptionCreator: newOptionCreator, - promptTextCreator: promptTextCreator, - shouldKeyDownEventCreateNewOption: shouldKeyDownEventCreateNewOption - }, + if (nextProps.required) { + this.setState({ + required: this.handleRequired(valueArray[0], nextProps.multi) + }); + } else if (this.props.required) { + // Used to be required but it's not any more + this.setState({ required: false }); + } + } + }, { + key: 'componentWillUpdate', + value: function componentWillUpdate(nextProps, nextState) { + if (nextState.isOpen !== this.state.isOpen) { + this.toggleTouchOutsideEvent(nextState.isOpen); + var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose; + handler && handler(); + } + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps, prevState) { + // focus to the selected option + if (this.menu && this.focused && this.state.isOpen && !this.hasScrolledToOption) { + var focusedOptionNode = ReactDOM.findDOMNode(this.focused); + var menuNode = ReactDOM.findDOMNode(this.menu); + menuNode.scrollTop = focusedOptionNode.offsetTop; + this.hasScrolledToOption = true; + } else if (!this.state.isOpen) { + this.hasScrolledToOption = false; + } - getDefaultProps: function getDefaultProps() { - return { - filterOptions: _utilsDefaultFilterOptions2['default'], - isOptionUnique: isOptionUnique, - isValidNewOption: isValidNewOption, - menuRenderer: _utilsDefaultMenuRenderer2['default'], - newOptionCreator: newOptionCreator, - promptTextCreator: promptTextCreator, - shouldKeyDownEventCreateNewOption: shouldKeyDownEventCreateNewOption - }; - }, - - createNewOption: function createNewOption() { - var _props = this.props; - var isValidNewOption = _props.isValidNewOption; - var newOptionCreator = _props.newOptionCreator; - var onNewOptionClick = _props.onNewOptionClick; - var _props$options = _props.options; - var options = _props$options === undefined ? [] : _props$options; - var shouldKeyDownEventCreateNewOption = _props.shouldKeyDownEventCreateNewOption; - - if (isValidNewOption({ label: this.inputValue })) { - var option = newOptionCreator({ label: this.inputValue, labelKey: this.labelKey, valueKey: this.valueKey }); - var _isOptionUnique = this.isOptionUnique({ option: option }); - - // Don't add the same option twice. - if (_isOptionUnique) { - if (onNewOptionClick) { - onNewOptionClick(option); + if (this._scrollToFocusedOptionOnUpdate && this.focused && this.menu) { + this._scrollToFocusedOptionOnUpdate = false; + var focusedDOM = ReactDOM.findDOMNode(this.focused); + var menuDOM = ReactDOM.findDOMNode(this.menu); + var focusedRect = focusedDOM.getBoundingClientRect(); + var menuRect = menuDOM.getBoundingClientRect(); + if (focusedRect.bottom > menuRect.bottom) { + menuDOM.scrollTop = focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight; + } else if (focusedRect.top < menuRect.top) { + menuDOM.scrollTop = focusedDOM.offsetTop; + } + } + if (this.props.scrollMenuIntoView && this.menuContainer) { + var menuContainerRect = this.menuContainer.getBoundingClientRect(); + if (window.innerHeight < menuContainerRect.bottom + this.props.menuBuffer) { + window.scrollBy(0, menuContainerRect.bottom + this.props.menuBuffer - window.innerHeight); + } + } + if (prevProps.disabled !== this.props.disabled) { + this.setState({ isFocused: false }); // eslint-disable-line react/no-did-update-set-state + this.closeMenu(); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + if (!document.removeEventListener && document.detachEvent) { + document.detachEvent('ontouchstart', this.handleTouchOutside); + } else { + document.removeEventListener('touchstart', this.handleTouchOutside); + } + } + }, { + key: 'toggleTouchOutsideEvent', + value: function toggleTouchOutsideEvent(enabled) { + if (enabled) { + if (!document.addEventListener && document.attachEvent) { + document.attachEvent('ontouchstart', this.handleTouchOutside); + } else { + document.addEventListener('touchstart', this.handleTouchOutside); + } + } else { + if (!document.removeEventListener && document.detachEvent) { + document.detachEvent('ontouchstart', this.handleTouchOutside); } else { - this.inputValue = ''; - options.unshift(option); - this.select.selectValue(option); + document.removeEventListener('touchstart', this.handleTouchOutside); } } } - }, - - filterOptions: function filterOptions() { - var _props2 = this.props; - var filterOptions = _props2.filterOptions; - var isValidNewOption = _props2.isValidNewOption; - var options = _props2.options; - var promptTextCreator = _props2.promptTextCreator; - - // TRICKY Check currently selected options as well. - // Don't display a create-prompt for a value that's selected. - // This covers async edge-cases where a newly-created Option isn't yet in the async-loaded array. - var excludeOptions = arguments[2] || []; - - var filteredOptions = filterOptions.apply(undefined, arguments) || []; + }, { + key: 'handleTouchOutside', + value: function handleTouchOutside(event) { + // handle touch outside on ios to dismiss menu + if (this.wrapper && !this.wrapper.contains(event.target)) { + this.closeMenu(); + } + } + }, { + key: 'focus', + value: function focus() { + if (!this.input) return; + this.input.focus(); + } + }, { + key: 'blurInput', + value: function blurInput() { + if (!this.input) return; + this.input.blur(); + } + }, { + key: 'handleTouchMove', + value: function handleTouchMove(event) { + // Set a flag that the view is being dragged + this.dragging = true; + } + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + // Set a flag that the view is not being dragged + this.dragging = false; + } + }, { + key: 'handleTouchEnd', + value: function handleTouchEnd(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; - if (isValidNewOption({ label: this.inputValue })) { - var _newOptionCreator = this.props.newOptionCreator; + // Fire the mouse events + this.handleMouseDown(event); + } + }, { + key: 'handleTouchEndClearValue', + value: function handleTouchEndClearValue(event) { + // Check if the view is being dragged, In this case + // we don't want to fire the click event (because the user only wants to scroll) + if (this.dragging) return; - var option = _newOptionCreator({ - label: this.inputValue, - labelKey: this.labelKey, - valueKey: this.valueKey - }); + // Clear the value + this.clearValue(event); + } + }, { + key: 'handleMouseDown', + value: function handleMouseDown(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; + } - // TRICKY Compare to all options (not just filtered options) in case option has already been selected). - // For multi-selects, this would remove it from the filtered list. - var _isOptionUnique2 = this.isOptionUnique({ - option: option, - options: excludeOptions.concat(filteredOptions) - }); + if (event.target.tagName === 'INPUT') { + return; + } - if (_isOptionUnique2) { - var _prompt = promptTextCreator(this.inputValue); + // prevent default event handlers + event.stopPropagation(); + event.preventDefault(); - this._createPlaceholderOption = _newOptionCreator({ - label: _prompt, - labelKey: this.labelKey, - valueKey: this.valueKey + // for the non-searchable select, toggle the menu + if (!this.props.searchable) { + // TODO: This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open. + this.focus(); + return this.setState({ + isOpen: !this.state.isOpen }); - - filteredOptions.unshift(this._createPlaceholderOption); } - } - - return filteredOptions; - }, - isOptionUnique: function isOptionUnique(_ref2) { - var option = _ref2.option; - var options = _ref2.options; - var isOptionUnique = this.props.isOptionUnique; - - options = options || this.select.filterOptions(); - - return isOptionUnique({ - labelKey: this.labelKey, - option: option, - options: options, - valueKey: this.valueKey - }); - }, + if (this.state.isFocused) { + // On iOS, we can get into a state where we think the input is focused but it isn't really, + // since iOS ignores programmatic calls to input.focus() that weren't triggered by a click event. + // Call focus() again here to be safe. + this.focus(); - menuRenderer: function menuRenderer(params) { - var menuRenderer = this.props.menuRenderer; - - return menuRenderer(_extends({}, params, { - onSelect: this.onOptionSelect, - selectValue: this.onOptionSelect - })); - }, + var input = this.input; + if (typeof input.getInput === 'function') { + // Get the actual DOM input if the ref is an component + input = input.getInput(); + } - onInputChange: function onInputChange(input) { - var onInputChange = this.props.onInputChange; + // clears the value so that the cursor will be at the end of input when the component re-renders + input.value = ''; - if (onInputChange) { - onInputChange(input); + // if the input is focused, ensure the menu is open + this.setState({ + isOpen: true, + isPseudoFocused: false + }); + } else { + // otherwise, focus the input and open the menu + this._openAfterFocus = this.props.openOnClick; + this.focus(); + } } - // This value may be needed in between Select mounts (when this.select is null) - this.inputValue = input; - }, - - onInputKeyDown: function onInputKeyDown(event) { - var _props3 = this.props; - var shouldKeyDownEventCreateNewOption = _props3.shouldKeyDownEventCreateNewOption; - var onInputKeyDown = _props3.onInputKeyDown; - - var focusedOption = this.select.getFocusedOption(); - - if (focusedOption && focusedOption === this._createPlaceholderOption && shouldKeyDownEventCreateNewOption({ keyCode: event.keyCode })) { - this.createNewOption(); - - // Prevent decorated Select from doing anything additional with this keyDown event + }, { + key: 'handleMouseDownOnArrow', + value: 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 the menu isn't open, let the event bubble to the main handleMouseDown + if (!this.state.isOpen) { + return; + } + // prevent default event handlers + event.stopPropagation(); event.preventDefault(); - } else if (onInputKeyDown) { - onInputKeyDown(event); + // close the menu + this.closeMenu(); } - }, + }, { + key: 'handleMouseDownOnMenu', + value: 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(); - onOptionSelect: function onOptionSelect(option, event) { - if (option === this._createPlaceholderOption) { - this.createNewOption(); - } else { - this.select.selectValue(option); + this._openAfterFocus = true; + this.focus(); } - }, - - focus: function focus() { - this.select.focus(); - }, - - render: function render() { - var _this = this; - - var _props4 = this.props; - var newOptionCreator = _props4.newOptionCreator; - var shouldKeyDownEventCreateNewOption = _props4.shouldKeyDownEventCreateNewOption; - - var restProps = _objectWithoutProperties(_props4, ['newOptionCreator', 'shouldKeyDownEventCreateNewOption']); - - var children = this.props.children; + }, { + key: 'closeMenu', + value: function closeMenu() { + if (this.props.onCloseResetsInput) { + this.setState({ + isOpen: false, + isPseudoFocused: this.state.isFocused && !this.props.multi, + inputValue: this.handleInputValueChange('') + }); + } else { + this.setState({ + isOpen: false, + isPseudoFocused: this.state.isFocused && !this.props.multi + }); + } + this.hasScrolledToOption = false; + } + }, { + key: 'handleInputFocus', + value: function handleInputFocus(event) { + if (this.props.disabled) return; + var isOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus; + if (this.props.onFocus) { + this.props.onFocus(event); + } + this.setState({ + isFocused: true, + isOpen: isOpen + }); + this._openAfterFocus = false; + } + }, { + key: 'handleInputBlur', + value: function handleInputBlur(event) { + // The check for menu.contains(activeElement) is necessary to prevent IE11's scrollbar from closing the menu in certain contexts. + if (this.menu && (this.menu === document.activeElement || this.menu.contains(document.activeElement))) { + this.focus(); + return; + } - // We can't use destructuring default values to set the children, - // because it won't apply work if `children` is null. A falsy check is - // more reliable in real world use-cases. - if (!children) { - children = defaultChildren; + if (this.props.onBlur) { + this.props.onBlur(event); + } + var onBlurredState = { + isFocused: false, + isOpen: false, + isPseudoFocused: false + }; + if (this.props.onBlurResetsInput) { + onBlurredState.inputValue = this.handleInputValueChange(''); + } + this.setState(onBlurredState); } + }, { + key: 'handleInputChange', + value: function handleInputChange(event) { + var newInputValue = event.target.value; - var props = _extends({}, restProps, { - allowCreate: true, - filterOptions: this.filterOptions, - menuRenderer: this.menuRenderer, - onInputChange: this.onInputChange, - onInputKeyDown: this.onInputKeyDown, - ref: function ref(_ref) { - _this.select = _ref; + if (this.state.inputValue !== event.target.value) { + newInputValue = this.handleInputValueChange(newInputValue); + } - // These values may be needed in between Select mounts (when this.select is null) - if (_ref) { - _this.labelKey = _ref.props.labelKey; - _this.valueKey = _ref.props.valueKey; + this.setState({ + isOpen: true, + isPseudoFocused: false, + inputValue: newInputValue + }); + } + }, { + key: 'handleInputValueChange', + value: function handleInputValueChange(newValue) { + if (this.props.onInputChange) { + var nextState = this.props.onInputChange(newValue); + // Note: != used deliberately here to catch undefined and null + if (nextState != null && (typeof nextState === 'undefined' ? 'undefined' : _typeof(nextState)) !== 'object') { + newValue = '' + nextState; } } - }); - - return children(props); - } -}); - -function defaultChildren(props) { - return _react2['default'].createElement(_Select2['default'], props); -}; - -function isOptionUnique(_ref3) { - var option = _ref3.option; - var options = _ref3.options; - var labelKey = _ref3.labelKey; - var valueKey = _ref3.valueKey; - - return options.filter(function (existingOption) { - return existingOption[labelKey] === option[labelKey] || existingOption[valueKey] === option[valueKey]; - }).length === 0; -}; - -function isValidNewOption(_ref4) { - var label = _ref4.label; - - return !!label; -}; - -function newOptionCreator(_ref5) { - var label = _ref5.label; - var labelKey = _ref5.labelKey; - var valueKey = _ref5.valueKey; - - var option = {}; - option[valueKey] = label; - option[labelKey] = label; - option.className = 'Select-create-option-placeholder'; - return option; -}; - -function promptTextCreator(label) { - return 'Create option "' + label + '"'; -} - -function shouldKeyDownEventCreateNewOption(_ref6) { - var keyCode = _ref6.keyCode; - - switch (keyCode) { - case 9: // TAB - case 13: // ENTER - case 188: - // COMMA - return true; - } - - return false; -}; - -module.exports = Creatable; - -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":5,"./utils/defaultFilterOptions":9,"./utils/defaultMenuRenderer":10,"create-react-class":undefined,"prop-types":undefined}],4:[function(require,module,exports){ -(function (global){ -'use strict'; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); - -var _react2 = _interopRequireDefault(_react); - -var _createReactClass = require('create-react-class'); - -var _createReactClass2 = _interopRequireDefault(_createReactClass); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _classnames = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); - -var _classnames2 = _interopRequireDefault(_classnames); - -var Option = (0, _createReactClass2['default'])({ - propTypes: { - children: _propTypes2['default'].node, - className: _propTypes2['default'].string, // className (based on mouse position) - instancePrefix: _propTypes2['default'].string.isRequired, // unique prefix for the ids (used for aria) - isDisabled: _propTypes2['default'].bool, // the option is disabled - isFocused: _propTypes2['default'].bool, // the option is focused - isSelected: _propTypes2['default'].bool, // the option is selected - onFocus: _propTypes2['default'].func, // method to handle mouseEnter on option element - onSelect: _propTypes2['default'].func, // method to handle click on option element - onUnfocus: _propTypes2['default'].func, // method to handle mouseLeave on option element - option: _propTypes2['default'].object.isRequired, // object that is base for that option - optionIndex: _propTypes2['default'].number }, - // index of the option, used to generate unique ids for aria - blockEvent: function blockEvent(event) { - event.preventDefault(); - event.stopPropagation(); - if (event.target.tagName !== 'A' || !('href' in event.target)) { - return; - } - if (event.target.target) { - window.open(event.target.href, event.target.target); - } else { - window.location.href = event.target.href; - } - }, - - handleMouseDown: function handleMouseDown(event) { - event.preventDefault(); - event.stopPropagation(); - this.props.onSelect(this.props.option, event); - }, - - handleMouseEnter: function handleMouseEnter(event) { - this.onFocus(event); - }, - - handleMouseMove: function handleMouseMove(event) { - this.onFocus(event); - }, - - handleTouchEnd: function handleTouchEnd(event) { - // Check if the view is being dragged, In this case - // we don't want to fire the click event (because the user only wants to scroll) - if (this.dragging) return; - - this.handleMouseDown(event); - }, - - handleTouchMove: function handleTouchMove(event) { - // Set a flag that the view is being dragged - this.dragging = true; - }, - - handleTouchStart: function handleTouchStart(event) { - // Set a flag that the view is not being dragged - this.dragging = false; - }, - - onFocus: function onFocus(event) { - if (!this.props.isFocused) { - this.props.onFocus(this.props.option, event); - } - }, - render: function render() { - var _props = this.props; - var option = _props.option; - var instancePrefix = _props.instancePrefix; - var optionIndex = _props.optionIndex; - - var className = (0, _classnames2['default'])(this.props.className, option.className); - - return option.disabled ? _react2['default'].createElement( - 'div', - { className: className, - onMouseDown: this.blockEvent, - onClick: this.blockEvent }, - this.props.children - ) : _react2['default'].createElement( - 'div', - { className: className, - style: option.style, - role: 'option', - onMouseDown: this.handleMouseDown, - onMouseEnter: this.handleMouseEnter, - onMouseMove: this.handleMouseMove, - onTouchStart: this.handleTouchStart, - onTouchMove: this.handleTouchMove, - onTouchEnd: this.handleTouchEnd, - id: instancePrefix + '-option-' + optionIndex, - title: option.title }, - this.props.children - ); - } -}); - -module.exports = Option; - -}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"create-react-class":undefined,"prop-types":undefined}],5:[function(require,module,exports){ -(function (global){ -/*! - Copyright (c) 2016 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/react-select -*/ - -'use strict'; - -Object.defineProperty(exports, '__esModule', { - value: true -}); - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - -var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null); - -var _react2 = _interopRequireDefault(_react); - -var _createReactClass = require('create-react-class'); - -var _createReactClass2 = _interopRequireDefault(_createReactClass); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null); - -var _reactDom2 = _interopRequireDefault(_reactDom); - -var _reactInputAutosize = (typeof window !== "undefined" ? window['AutosizeInput'] : typeof global !== "undefined" ? global['AutosizeInput'] : null); - -var _reactInputAutosize2 = _interopRequireDefault(_reactInputAutosize); - -var _classnames = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); - -var _classnames2 = _interopRequireDefault(_classnames); - -var _utilsDefaultArrowRenderer = require('./utils/defaultArrowRenderer'); - -var _utilsDefaultArrowRenderer2 = _interopRequireDefault(_utilsDefaultArrowRenderer); - -var _utilsDefaultFilterOptions = require('./utils/defaultFilterOptions'); - -var _utilsDefaultFilterOptions2 = _interopRequireDefault(_utilsDefaultFilterOptions); - -var _utilsDefaultMenuRenderer = require('./utils/defaultMenuRenderer'); - -var _utilsDefaultMenuRenderer2 = _interopRequireDefault(_utilsDefaultMenuRenderer); - -var _utilsDefaultClearRenderer = require('./utils/defaultClearRenderer'); - -var _utilsDefaultClearRenderer2 = _interopRequireDefault(_utilsDefaultClearRenderer); - -var _Async = require('./Async'); - -var _Async2 = _interopRequireDefault(_Async); - -var _AsyncCreatable = require('./AsyncCreatable'); + return newValue; + } + }, { + key: 'handleKeyDown', + value: function handleKeyDown(event) { + if (this.props.disabled) return; -var _AsyncCreatable2 = _interopRequireDefault(_AsyncCreatable); + if (typeof this.props.onInputKeyDown === 'function') { + this.props.onInputKeyDown(event); + if (event.defaultPrevented) { + return; + } + } -var _Creatable = require('./Creatable'); + switch (event.keyCode) { + case 8: + // backspace + if (!this.state.inputValue && this.props.backspaceRemoves) { + event.preventDefault(); + this.popValue(); + } + return; + case 9: + // tab + if (event.shiftKey || !this.state.isOpen || !this.props.tabSelectsValue) { + return; + } + this.selectFocusedOption(); + return; + case 13: + // enter + if (!this.state.isOpen) return; + event.stopPropagation(); + this.selectFocusedOption(); + break; + case 27: + // escape + if (this.state.isOpen) { + this.closeMenu(); + event.stopPropagation(); + } else if (this.props.clearable && this.props.escapeClearsValue) { + this.clearValue(event); + event.stopPropagation(); + } + break; + case 38: + // up + this.focusPreviousOption(); + break; + case 40: + // down + this.focusNextOption(); + break; + case 33: + // page up + this.focusPageUpOption(); + break; + case 34: + // page down + this.focusPageDownOption(); + break; + case 35: + // end key + if (event.shiftKey) { + return; + } + this.focusEndOption(); + break; + case 36: + // home key + if (event.shiftKey) { + return; + } + this.focusStartOption(); + break; + case 46: + // backspace + if (!this.state.inputValue && this.props.deleteRemoves) { + event.preventDefault(); + this.popValue(); + } + return; + default: + return; + } + event.preventDefault(); + } + }, { + key: 'handleValueClick', + value: function handleValueClick(option, event) { + if (!this.props.onValueClick) return; + this.props.onValueClick(option, event); + } + }, { + key: 'handleMenuScroll', + value: function handleMenuScroll(event) { + if (!this.props.onMenuScrollToBottom) return; + var target = event.target; -var _Creatable2 = _interopRequireDefault(_Creatable); + if (target.scrollHeight > target.offsetHeight && target.scrollHeight - target.offsetHeight - target.scrollTop <= 0) { + this.props.onMenuScrollToBottom(); + } + } + }, { + key: 'handleRequired', + value: function handleRequired(value, multi) { + if (!value) return true; + return multi ? value.length === 0 : Object.keys(value).length === 0; + } + }, { + key: 'getOptionLabel', + value: function getOptionLabel(op) { + return op[this.props.labelKey]; + } -var _Option = require('./Option'); + /** + * Turns a value into an array from the given options + * @param {String|Number|Array} value - the value of the select input + * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration + * @returns {Array} the value of the select represented in an array + */ -var _Option2 = _interopRequireDefault(_Option); + }, { + key: 'getValueArray', + value: function getValueArray(value, nextProps) { + var _this2 = this; -var _Value = require('./Value'); + /** support optionally passing in the `nextProps` so `componentWillReceiveProps` updates will function as expected */ + var props = (typeof nextProps === 'undefined' ? 'undefined' : _typeof(nextProps)) === 'object' ? nextProps : this.props; + if (props.multi) { + if (typeof value === 'string') value = value.split(props.delimiter); + if (!Array.isArray(value)) { + if (value === null || value === undefined) return []; + value = [value]; + } + return value.map(function (value) { + return _this2.expandValue(value, props); + }).filter(function (i) { + return i; + }); + } + var expandedValue = this.expandValue(value, props); + return expandedValue ? [expandedValue] : []; + } -var _Value2 = _interopRequireDefault(_Value); + /** + * Retrieve a value from the given options and valueKey + * @param {String|Number|Array} value - the selected value(s) + * @param {Object} props - the Select component's props (or nextProps) + */ -function stringifyValue(value) { - var valueType = typeof value; - if (valueType === 'string') { - return value; - } else if (valueType === 'object') { - return JSON.stringify(value); - } else if (valueType === 'number' || valueType === 'boolean') { - return String(value); - } else { - return ''; - } -} + }, { + key: 'expandValue', + value: function expandValue(value, props) { + var valueType = typeof value === 'undefined' ? 'undefined' : _typeof(value); + if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value; + var options = props.options, + valueKey = props.valueKey; + + if (!options) return; + for (var i = 0; i < options.length; i++) { + if (options[i][valueKey] === value) return options[i]; + } + } + }, { + key: 'setValue', + value: function setValue(value) { + var _this3 = this; -var stringOrNode = _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].node]); + if (this.props.autoBlur) { + this.blurInput(); + } + if (this.props.required) { + var required = this.handleRequired(value, this.props.multi); + this.setState({ required: required }); + } + if (this.props.onChange) { + if (this.props.simpleValue && value) { + value = this.props.multi ? value.map(function (i) { + return i[_this3.props.valueKey]; + }).join(this.props.delimiter) : value[this.props.valueKey]; + } + this.props.onChange(value); + } + } + }, { + key: 'selectValue', + value: function selectValue(value) { + var _this4 = this; + + // NOTE: we actually add/set the value in a callback to make sure the + // input value is empty to avoid styling issues in Chrome + if (this.props.closeOnSelect) { + this.hasScrolledToOption = false; + } + if (this.props.multi) { + var updatedValue = this.props.onSelectResetsInput ? '' : this.state.inputValue; + this.setState({ + focusedIndex: null, + inputValue: this.handleInputValueChange(updatedValue), + isOpen: !this.props.closeOnSelect + }, function () { + _this4.addValue(value); + }); + } else { + this.setState({ + inputValue: this.handleInputValueChange(''), + isOpen: !this.props.closeOnSelect, + isPseudoFocused: this.state.isFocused + }, function () { + _this4.setValue(value); + }); + } + } + }, { + key: 'addValue', + value: function addValue(value) { + var valueArray = this.getValueArray(this.props.value); + var visibleOptions = this._visibleOptions.filter(function (val) { + return !val.disabled; + }); + var lastValueIndex = visibleOptions.indexOf(value); + this.setValue(valueArray.concat(value)); + if (visibleOptions.length - 1 === lastValueIndex) { + // the last option was selected; focus the second-last one + this.focusOption(visibleOptions[lastValueIndex - 1]); + } else if (visibleOptions.length > lastValueIndex) { + // focus the option below the selected one + this.focusOption(visibleOptions[lastValueIndex + 1]); + } + } + }, { + key: 'popValue', + value: function popValue() { + var valueArray = this.getValueArray(this.props.value); + if (!valueArray.length) return; + if (valueArray[valueArray.length - 1].clearableValue === false) return; + this.setValue(this.props.multi ? valueArray.slice(0, valueArray.length - 1) : null); + } + }, { + key: 'removeValue', + value: function removeValue(value) { + var valueArray = this.getValueArray(this.props.value); + this.setValue(valueArray.filter(function (i) { + return i !== value; + })); + this.focus(); + } + }, { + key: 'clearValue', + value: function clearValue(event) { + // if the event was triggered by a mousedown and not the primary + // button, ignore it. + if (event && event.type === 'mousedown' && event.button !== 0) { + return; + } + event.stopPropagation(); + event.preventDefault(); + this.setValue(this.getResetValue()); + this.setState({ + isOpen: false, + inputValue: this.handleInputValueChange('') + }, this.focus); + } + }, { + key: 'getResetValue', + value: function getResetValue() { + if (this.props.resetValue !== undefined) { + return this.props.resetValue; + } else if (this.props.multi) { + return []; + } else { + return null; + } + } + }, { + key: 'focusOption', + value: function focusOption(option) { + this.setState({ + focusedOption: option + }); + } + }, { + key: 'focusNextOption', + value: function focusNextOption() { + this.focusAdjacentOption('next'); + } + }, { + key: 'focusPreviousOption', + value: function focusPreviousOption() { + this.focusAdjacentOption('previous'); + } + }, { + key: 'focusPageUpOption', + value: function focusPageUpOption() { + this.focusAdjacentOption('page_up'); + } + }, { + key: 'focusPageDownOption', + value: function focusPageDownOption() { + this.focusAdjacentOption('page_down'); + } + }, { + key: 'focusStartOption', + value: function focusStartOption() { + this.focusAdjacentOption('start'); + } + }, { + key: 'focusEndOption', + value: function focusEndOption() { + this.focusAdjacentOption('end'); + } + }, { + key: 'focusAdjacentOption', + value: function focusAdjacentOption(dir) { + var options = this._visibleOptions.map(function (option, index) { + return { option: option, index: index }; + }).filter(function (option) { + return !option.option.disabled; + }); + this._scrollToFocusedOptionOnUpdate = true; + if (!this.state.isOpen) { + this.setState({ + isOpen: true, + inputValue: '', + focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null) + }); + return; + } + if (!options.length) return; + var focusedIndex = -1; + for (var i = 0; i < options.length; i++) { + if (this._focusedOption === options[i].option) { + focusedIndex = i; + break; + } + } + if (dir === 'next' && focusedIndex !== -1) { + focusedIndex = (focusedIndex + 1) % options.length; + } else if (dir === 'previous') { + if (focusedIndex > 0) { + focusedIndex = focusedIndex - 1; + } else { + focusedIndex = options.length - 1; + } + } else if (dir === 'start') { + focusedIndex = 0; + } else if (dir === 'end') { + focusedIndex = options.length - 1; + } else if (dir === 'page_up') { + var potentialIndex = focusedIndex - this.props.pageSize; + if (potentialIndex < 0) { + focusedIndex = 0; + } else { + focusedIndex = potentialIndex; + } + } else if (dir === 'page_down') { + var potentialIndex = focusedIndex + this.props.pageSize; + if (potentialIndex > options.length - 1) { + focusedIndex = options.length - 1; + } else { + focusedIndex = potentialIndex; + } + } -var instanceId = 1; + if (focusedIndex === -1) { + focusedIndex = 0; + } -var Select = (0, _createReactClass2['default'])({ - - displayName: 'Select', - - propTypes: { - addLabelText: _propTypes2['default'].string, // placeholder displayed when you want to add a label on a multi-value input - 'aria-describedby': _propTypes2['default'].string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) - 'aria-label': _propTypes2['default'].string, // Aria label (for assistive tech) - 'aria-labelledby': _propTypes2['default'].string, // HTML ID of an element that should be used as the label (for assistive tech) - arrowRenderer: _propTypes2['default'].func, // Create drop-down caret element - autoBlur: _propTypes2['default'].bool, // automatically blur the component when an option is selected - autofocus: _propTypes2['default'].bool, // autofocus the component on mount - autosize: _propTypes2['default'].bool, // whether to enable autosizing or not - backspaceRemoves: _propTypes2['default'].bool, // whether backspace removes an item if there is no text input - backspaceToRemoveMessage: _propTypes2['default'].string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label - className: _propTypes2['default'].string, // className for the outer element - clearAllText: stringOrNode, // title for the "clear" control when multi: true - clearRenderer: _propTypes2['default'].func, // create clearable x element - clearValueText: stringOrNode, // title for the "clear" control - clearable: _propTypes2['default'].bool, // should it be possible to reset value - deleteRemoves: _propTypes2['default'].bool, // whether backspace removes an item if there is no text input - delimiter: _propTypes2['default'].string, // delimiter to use to join multiple values for the hidden field value - disabled: _propTypes2['default'].bool, // whether the Select is disabled or not - escapeClearsValue: _propTypes2['default'].bool, // whether escape clears the value when the menu is closed - filterOption: _propTypes2['default'].func, // method to filter a single option (option, filterString) - filterOptions: _propTypes2['default'].any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values]) - ignoreAccents: _propTypes2['default'].bool, // whether to strip diacritics when filtering - ignoreCase: _propTypes2['default'].bool, // whether to perform case-insensitive filtering - inputProps: _propTypes2['default'].object, // custom attributes for the Input - inputRenderer: _propTypes2['default'].func, // returns a custom input component - instanceId: _propTypes2['default'].string, // set the components instanceId - isAlwaysOpen: _propTypes2['default'].bool, // never close the select - isLoading: _propTypes2['default'].bool, // whether the Select is loading externally or not (such as options being loaded) - joinValues: _propTypes2['default'].bool, // joins multiple values into a single form field with the delimiter (legacy mode) - labelKey: _propTypes2['default'].string, // path of the label value in option objects - matchPos: _propTypes2['default'].string, // (any|start) match the start or entire string when filtering - matchProp: _propTypes2['default'].string, // (any|label|value) which option property to filter on - menuBuffer: _propTypes2['default'].number, // optional buffer (in px) between the bottom of the viewport and the bottom of the menu - menuContainerStyle: _propTypes2['default'].object, // optional style to apply to the menu container - menuRenderer: _propTypes2['default'].func, // renders a custom menu with options - menuStyle: _propTypes2['default'].object, // optional style to apply to the menu - multi: _propTypes2['default'].bool, // multi-value input - name: _propTypes2['default'].string, // generates a hidden tag with this field name for html forms - noResultsText: stringOrNode, // placeholder displayed when there are no matching search results - onBlur: _propTypes2['default'].func, // onBlur handler: function (event) {} - onBlurResetsInput: _propTypes2['default'].bool, // whether input is cleared on blur - onChange: _propTypes2['default'].func, // onChange handler: function (newValue) {} - onClose: _propTypes2['default'].func, // fires when the menu is closed - onCloseResetsInput: _propTypes2['default'].bool, // whether input is cleared when menu is closed through the arrow - onFocus: _propTypes2['default'].func, // onFocus handler: function (event) {} - onInputChange: _propTypes2['default'].func, // onInputChange handler: function (inputValue) {} - onInputKeyDown: _propTypes2['default'].func, // input keyDown handler: function (event) {} - onMenuScrollToBottom: _propTypes2['default'].func, // fires when the menu is scrolled to the bottom; can be used to paginate options - onOpen: _propTypes2['default'].func, // fires when the menu is opened - onValueClick: _propTypes2['default'].func, // onClick handler for value labels: function (value, event) {} - openAfterFocus: _propTypes2['default'].bool, // boolean to enable opening dropdown when focused - openOnFocus: _propTypes2['default'].bool, // always open options menu on focus - optionClassName: _propTypes2['default'].string, // additional class(es) to apply to the