Merge pull request JedWatson#25 from HubSpot/update-to-upstream-beta-…

…13-patch

Update to latest upstream master

ISSUE_TEMPLATE.md

@@ -0,0 +1,9 @@
+### Thanks for using react-select!
+
+If you are reporting an error please include a test case that demonstrates the issue you're reporting!
+This is very helpful to maintainers in order to help us see the issue you're seeing.
+
+Here is a Plunker you can fork that has react-select loaded and supports JSX syntax:
+https://plnkr.co/edit/HTmtER9AMNcPoWhXV707?p=preview
+
+You may also find the [online Babel tool](https://babeljs.io/repl/) quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.

README.md

@@ -37,11 +37,25 @@ The easiest way to use React-Select is to install it from NPM and include it in
 npm install react-select-plus --save
 ```
 
-You can also use the standalone build by including `dist/react-select.js` and `dist/react-select.css` in your page. If you use this, make sure you have already included the following dependencies:
+At this point you can import react-select and its styles in your application as follows:
 
-* [React](http://facebook.github.io/react/)
-* [classNames](http://jedwatson.github.io/classnames/)
-* [react-input-autosize](https://github.com/JedWatson/react-input-autosize)
+```js
+import Select from 'react-select-plus';
+
+// Be sure to include styles at some point, probably during your bootstrapping
+import 'react-select/dist/react-select-plus.css';
+```
+
+You can also use the standalone build by including `react-select-plus.js` and `react-select-plus.css` in your page. (If you do this though you'll also need to include the dependencies.) For example:
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
+<script src="https://npmcdn.com/classnames/index.js"></script>
+<script src="https://npmcdn.com/react-input-autosize/dist/react-input-autosize.js"></script>
+<script src="https://npmcdn.com/react-select-plus/dist/react-select-plus.js"></script>
+
+<link rel="stylesheet" href="https://npmcdn.com/react-select-plus/dist/react-select-plus.css">
+```
 
 
 ## Usage
@@ -52,7 +66,7 @@ Options should be provided as an `Array` of `Object`s, each with a `value` and `
 
 The `value` property of each option should be set to either a string or a number.
 
-When the value is changed, `onChange(newValue, [selectedOptions])` will fire.
+When the value is changed, `onChange(selectedValueOrValues)` will fire.
 
 ```javascript
 var Select = require('react-select-plus');
@@ -82,8 +96,7 @@ You can enable multi-value selection by setting `multi={true}`. In this mode:
 * The selected values are submitted in multiple `<input type="hidden">` fields, use `joinValues` to submit joined values in a single field instead
 * The values of the selected items are joined using the `delimiter` prop to create the input value when `joinValues` is true
 * A simple value, if provided, will be split using the `delimiter` prop
-* The `onChange` event provides an array of the selected options as the second argument
-* The first argument to `onChange` is always a string, regardless of whether the values of the selected options are numbers or strings
+* The `onChange` event provides an array of selected options _or_ a comma-separated string of values (eg `"1,2,3"`) if `simpleValue` is true
 * By default, only options in the `options` array can be selected. Setting `allowCreate` to true allows new options to be created if they do not already exist.
 * By default, selected options can be cleared. To disable the possibility of clearing a particular option, add `clearableValue: false` to that option:
 ```javascript
@@ -204,6 +217,12 @@ For multi-select inputs, when providing a custom `filterOptions` method, remembe
 
 The `menuRenderer` property can be used to override the default drop-down list of options.
 This should be done when the list is large (hundreds or thousands of items) for faster rendering.
+Windowing libraries like [`react-virtualized`](https://github.com/bvaughn/react-virtualized) can then be used to more efficiently render the drop-down menu like so.
+The easiest way to do this is with the [`react-virtualized-select`](https://github.com/bvaughn/react-virtualized-select/) HOC.
+This component decorates a `Select` and uses the react-virtualized `VirtualScroll` component to render options.
+Demo and documentation for this component are available [here](https://bvaughn.github.io/react-virtualized-select/).
+
+You can also specify your own custom renderer.
 The custom `menuRenderer` property accepts the following named parameters:
 
 | Parameter | Type | Description |
@@ -215,37 +234,6 @@ The custom `menuRenderer` property accepts the following named parameters:
 | selectValue | `Function` | Callback to select a new option; receives the option as a parameter. |
 | valueArray | `Array<Object>` | Array of currently selected options. |
 
-Windowing libraries like [`react-virtualized`](https://github.com/bvaughn/react-virtualized) can then be used to more efficiently render the drop-down menu like so:
-
-```js
-menuRenderer({ focusedOption, focusOption, labelKey, options, selectValue, valueArray }) {
-  const focusedOptionIndex = options.indexOf(focusedOption);
-  const option = options[index];
-  const isFocusedOption = option === focusedOption;
-
-  return (
-    <VirtualScroll
-      ref="VirtualScroll"
-      height={200}
-      rowHeight={35}
-      rowRenderer={(index) => (
-        <div
-          onMouseOver={() => focusOption(option)}
-          onClick={() => selectValue(option)}
-        >
-          {option[labelKey]}
-        </div>
-      )}
-      rowsCount={options.length}
-      scrollToIndex={focusedOptionIndex}
-      width={200}
-    />
-  )
-}
-```
-
-Check out the demo site for a more complete example of this.
-
 ### Updating input values with onInputChange
 
 You can manipulate the input using the onInputChange and returning a new value.
@@ -270,6 +258,7 @@ function cleanInput(inputValue) {
 	addLabelText	|	string	|	'Add "{label}"?'	|	text to display when `allowCreate` is true
 	allowCreate	|	bool	|	false		|	allow new options to be created in multi mode (displays an "Add \<option> ?" item when a value not already in the `options` array is entered)
 	autoBlur	|	bool | false | Blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices
+	autofocus       |       bool    |      undefined        |  autofocus the component on mount
 	autoload 	|	bool	|	true		|	whether to auto-load the default async options set
 	autosize  | bool | true  | If enabled, the input will expand as the length of its value increases
 	backspaceRemoves 	|	bool	|	true	|	whether pressing backspace removes the last item when there is no input value
@@ -313,11 +302,11 @@ function cleanInput(inputValue) {
 	scrollMenuIntoView |	bool	|	true		|	whether the viewport will shift to display the entire menu when engaged
 	searchable 	|	bool	|	true		|	whether to enable searching feature or not
 	searchingText	|	string	|	'Searching...'	|	message to display whilst options are loading via asyncOptions, or when `isLoading` is true
-	searchPromptText |	string	|	'Type to search'	|	label to prompt for search input
+	searchPromptText |	string\|node	|	'Type to search'	|	label to prompt for search input
 	tabSelectsValue	|	bool	|	true	|	whether to select the currently focused value when the `[tab]` key is pressed
 	value 		|	any	|	undefined	|	initial field value
 	valueKey	|	string	|	'value'		|	the option property to use for the value
-	valueRenderer	|	func	|	undefined	|	function which returns a custom way to render the value selected
+	valueRenderer	|	func	|	undefined	|	function which returns a custom way to render the value selected `function (option) {}`
 
 ### Methods
 

dist/react-select-plus.css

@@ -32,6 +32,8 @@
   color: #333;
   cursor: default;
   display: table;
+  border-spacing: 0;
+  border-collapse: separate;
   height: 36px;
   outline: none;
   overflow: hidden;
@@ -77,19 +79,19 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.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 {
+.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 {
+.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 {
+.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;
@@ -192,6 +194,17 @@
 .Select-arrow-zone:hover > .Select-arrow {
   border-top-color: #666;
 }
+.Select--multi .Select-multi-value-wrapper {
+  display: inline-block;
+}
+.Select .Select-aria-only {
+  display: inline-block;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+}
 @-webkit-keyframes Select-animation-fadeIn {
   from {
     opacity: 0;
@@ -289,6 +302,8 @@
   /* Fallback color for IE 8 */
   background-color: rgba(0, 126, 255, 0.08);
   border-radius: 2px;
+  border: 1px solid #c2e0ff;
+  /* Fallback color for IE 8 */
   border: 1px solid rgba(0, 126, 255, 0.24);
   color: #007eff;
   display: inline-block;