Merge pull request JedWatson#1 from medipass/revert-back

Revert back

CONTRIBUTING.md

@@ -44,11 +44,11 @@ report (under the generated `coverage` directory) to check that your changes are
 covered
 * Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
 (with regards to formatting, etc)
-* You can also run `npm run lint` and `npm run style` - our linter is a WIP
+* You can also run `npm run lint` - our linter is a WIP
 but please ensure there are not more violations than before your changes.
 * All new features and changes need documentation. We have three translations,
 please read our [Documentation Guidelines](https://github.com/keystonejs/keystone/wiki/Documentation-Translation-Guidelines).
 
 * _Make sure you revert your build before submitting a PR_ to reduce the chance
-of conflicts. `gulp build-scripts` is run after PRs are merged and before any
+of conflicts. `npm run build` is run after PRs are merged and before any
 releases are made.

README.md

@@ -12,7 +12,7 @@ A Select control built with and for [React](http://facebook.github.io/react/inde
 
 ## New version 1.0.0-rc
 
-I've nearly completed a major rewrite of this component (see issue [#568](https://github.com/JedWatson/react-select/issues/568) for details and progress). The new code has been merged into `master`, and `react-select@1.0.0-rc` has been published to npm and bower.
+I've nearly completed a major rewrite of this component (see issue [#568](https://github.com/JedWatson/react-select/issues/568) for details and progress). The new code has been merged into `master`, and `react-select@1.0.0-rc.10` has been published to npm and bower.
 
 1.0.0 has some breaking changes. The documentation is still being updated for the new API; notes on the changes can be found in [CHANGES.md](https://github.com/JedWatson/react-select/blob/master/CHANGES.md) and will be finalised into [HISTORY.md](https://github.com/JedWatson/react-select/blob/master/HISTORY.md) soon.
 
@@ -377,7 +377,7 @@ function onInputKeyDown(event) {
 | Property | Type | Default | Description |
 |:---|:---|:---|:---|
 | addLabelText | string | 'Add "{label}"?' | text to display when `allowCreate` is true |
-  arrowRenderer | func | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown, isOpen })` |
+| arrowRenderer | func | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown, isOpen })`. Won't render when set to `null`
 | 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 |

dist/react-select.es.js

@@ -1677,7 +1677,8 @@ var Select$1 = function (_React$Component) {
 						onScroll: this.handleMenuScroll,
 						onMouseDown: this.handleMouseDownOnMenu },
 					menu
-				)
+				),
+				this.props.outerMenuAddonComponent
 			);
 		}
 	}, {
@@ -1818,6 +1819,7 @@ Select$1.propTypes = {
 	optionComponent: PropTypes.func, // option component to render in dropdown
 	optionRenderer: PropTypes.func, // optionRenderer: function (option) {}
 	options: PropTypes.array, // array of options
+	outerMenuAddonComponent: PropTypes.object,
 	pageSize: PropTypes.number, // number of entries to page when using page up/down keys
 	placeholder: stringOrNode, // field placeholder, displayed when there's no value
 	required: PropTypes.bool, // applies HTML5 required attribute when needed
@@ -1876,7 +1878,8 @@ Select$1.defaultProps = {
 	simpleValue: false,
 	tabSelectsValue: true,
 	valueComponent: Value,
-	valueKey: 'value'
+	valueKey: 'value',
+	outerMenuAddonComponent: React.createElement('div', null)
 };
 
 var propTypes = {
@@ -1933,6 +1936,8 @@ var Async = function (_Component) {
 
 			var cache = _this._cache;
 
+			console.log('wtf');
+
 			_this.setState({ cacheKey: cacheKey });
 
 			if (cache && Object.prototype.hasOwnProperty.call(cache, '' + cacheKey + (inputValue ? '_' + inputValue : ''))) {

examples/src/components/BooleanSelect.js

@@ -24,7 +24,7 @@ var ValuesAsBooleansField = createClass({
 	render () {
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/BooleanSelect.js">(Source)</a></h3>
 				<Select
 					onChange={this.onChange}
 					options={this.state.options}

examples/src/components/Contributors.js

@@ -54,7 +54,7 @@ const Contributors = createClass({
 	render () {
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label}  <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/Contributors.js">(Source)</a></h3>
 				<Select.Async multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoContributor} valueKey="github" labelKey="name" loadOptions={this.getContributors} />
 				<div className="checkbox-list">
 					<label className="checkbox">

examples/src/components/Creatable.js

@@ -33,7 +33,7 @@ var CreatableDemo = createClass({
 		const { multi, multiValue, options, value } = this.state;
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/Creatable.js">(Source)</a></h3>
 				<Select.Creatable
 					multi={multi}
 					options={options}

examples/src/components/CustomComponents.js

@@ -94,7 +94,7 @@ const UsersField = createClass({
 
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/CustomComponents.js">(Source)</a></h3>
 				<Select
 					arrowRenderer={arrowRenderer}
 					onChange={this.setValue}

examples/src/components/CustomRender.js

@@ -40,7 +40,7 @@ var DisabledUpsellOptions = createClass({
 		];
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/CustomRender.js">(Source)</a></h3>
 				<Select
 					onInputChange={(inputValue) => this._inputValue = inputValue}
 					options={options}

examples/src/components/GithubUsers.js

@@ -64,7 +64,7 @@ const GithubUsers = createClass({
 
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/GithubUsers.js">(Source)</a></h3>
 				<AsyncComponent multi={this.state.multi} value={this.state.value} onChange={this.onChange} onValueClick={this.gotoUser} valueKey="id" labelKey="login" loadOptions={this.getUsers} backspaceRemoves={this.state.backspaceRemoves} />
 				<div className="checkbox-list">
 					<label className="checkbox">

examples/src/components/Multiselect.js

@@ -43,7 +43,7 @@ var MultiSelectField = createClass({
 		const options = crazy ? WHY_WOULD_YOU : FLAVOURS;
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/Multiselect.js">(Source)</a></h3>
 				<Select
 					closeOnSelect={!stayOpen}
 					disabled={disabled}

examples/src/components/NumericSelect.js

@@ -58,7 +58,7 @@ var ValuesAsNumbersField = createClass({
 		}
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/NumericSelect.js">(Source)</a></h3>
 				<Select
 					matchPos={this.state.matchPos}
 					matchProp={matchProp}

examples/src/components/States.js

@@ -52,8 +52,8 @@ var StatesField = createClass({
 		var options = STATES[this.state.country];
 		return (
 			<div className="section">
-				<h3 className="section-heading">{this.props.label}</h3>
-				<Select ref="stateSelect" autofocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
+				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/States.js">(Source)</a></h3>
+				<Select ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
 
 				<div style={{ marginTop: 14 }}>
 					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>

examples/src/components/Virtualized.js

@@ -18,7 +18,7 @@ var CitiesField = createClass({
 		var options = DATA.CITIES;
 		return (
 			<div className="section">
-				<h3 className="section-heading">Cities (Large Dataset)</h3>
+				<h3 className="section-heading">Cities (Large Dataset) <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/Virtualized.js">(Source)</a></h3>
 				<VirtualizedSelect ref="citySelect"
 					options={options}
 					simpleValue

less/control.less

@@ -244,7 +244,6 @@
 	text-align: center;
 	vertical-align: middle;
 	width: (@select-arrow-width * 5);
-	padding-right: @select-arrow-width;
 }
 
 .Select-arrow {
@@ -257,6 +256,10 @@
 	position: relative;
 }
 
+.Select-control > *:last-child {
+  padding-right: @select-right-padding;
+}
+
 .Select--multi .Select-multi-value-wrapper {
   display: inline-block;
 }

less/select.less

@@ -63,6 +63,8 @@
 @select-loading-color:              @select-text-color;
 @select-loading-color-bg:           @select-input-border-color;
 
+@select-right-padding:              5px;
+
 // multi-select item
 @select-item-font-size:             .9em;
 

lib/Async.js

@@ -92,6 +92,8 @@ var Async = function (_Component) {
 
 			var cache = _this._cache;
 
+			console.log('wtf');
+
 			_this.setState({ cacheKey: cacheKey });
 
 			if (cache && Object.prototype.hasOwnProperty.call(cache, '' + cacheKey + (inputValue ? '_' + inputValue : ''))) {

lib/Select.js

@@ -1111,7 +1111,8 @@ var Select = function (_React$Component) {
 						onScroll: this.handleMenuScroll,
 						onMouseDown: this.handleMouseDownOnMenu },
 					menu
-				)
+				),
+				this.props.outerMenuAddonComponent
 			);
 		}
 	}, {
@@ -1253,6 +1254,7 @@ Select.propTypes = {
 	optionComponent: _propTypes2.default.func, // option component to render in dropdown
 	optionRenderer: _propTypes2.default.func, // optionRenderer: function (option) {}
 	options: _propTypes2.default.array, // array of options
+	outerMenuAddonComponent: _propTypes2.default.object,
 	pageSize: _propTypes2.default.number, // number of entries to page when using page up/down keys
 	placeholder: stringOrNode, // field placeholder, displayed when there's no value
 	required: _propTypes2.default.bool, // applies HTML5 required attribute when needed
@@ -1311,7 +1313,8 @@ Select.defaultProps = {
 	simpleValue: false,
 	tabSelectsValue: true,
 	valueComponent: _Value2.default,
-	valueKey: 'value'
+	valueKey: 'value',
+	outerMenuAddonComponent: _react2.default.createElement('div', null)
 };
 
 exports.default = Select;

package.json

@@ -1,9 +1,10 @@
 {
   "name": "@medipass/react-select",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.10-2",
   "description": "A Select control built with and for ReactJS",
   "main": "lib/index.js",
   "jsnext:main": "dist/react-select.es.js",
+  "module": "dist/react-select.es.js",
   "style": "dist/react-select.min.css",
   "author": "Jed Watson",
   "license": "MIT",
@@ -24,6 +25,7 @@
     "babel-loader": "^7.1.1",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-istanbul": "^4.1.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -84,6 +86,10 @@
     "start": "webpack-dev-server --progress",
     "test": "NODE_ENV=test mocha --compilers js:babel-core/register"
   },
+  "files": [
+    "dist",
+    "lib"
+  ],
   "keywords": [
     "combobox",
     "form",

rollup.config.js

@@ -13,10 +13,16 @@ const globals = {
 	react: 'React',
 };
 const external = Object.keys(globals);
-const babelOptions = {
-	babelrc: false,
-	presets: [['es2015', { modules: false }], 'stage-0', 'react'],
-	plugins: ['external-helpers'],
+const babelOptions = (production) => {
+	let result = {
+		babelrc: false,
+		presets: [['es2015', { modules: false }], 'stage-0', 'react'],
+		plugins: ['external-helpers'],
+	};
+	if (production) {
+		result.plugins.push('transform-react-remove-prop-types');
+	};
+	return result;
 };
 
 export default [
@@ -27,7 +33,7 @@ export default [
 			format: 'es',
 		},
 		external: external,
-		plugins: [babel(babelOptions)],
+		plugins: [babel(babelOptions(false))],
 	},
 	{
 		input: 'src/index.umd.js',
@@ -38,7 +44,7 @@ export default [
 		},
 		globals: globals,
 		external: external,
-		plugins: [babel(babelOptions), resolve()],
+		plugins: [babel(babelOptions(false)), resolve()],
 	},
 	{
 		input: 'src/index.umd.js',
@@ -49,6 +55,6 @@ export default [
 		},
 		globals: globals,
 		external: external,
-		plugins: [babel(babelOptions), resolve(), uglify({}, minify)],
+		plugins: [babel(babelOptions(true)), resolve(), uglify({}, minify)],
 	},
 ];

src/Async.js

@@ -98,6 +98,8 @@ export default class Async extends Component {
 			cache &&
 			Object.prototype.hasOwnProperty.call(cache, `${cacheKey}${inputValue ? `_${inputValue}` : ''}`)
 		) {
+			this._callback = null;
+
 			this.setState({
 				options: cache[`${cacheKey}${inputValue ? `_${inputValue}` : ''}`].options,
 				page: cache[`${cacheKey}${inputValue ? `_${inputValue}` : ''}`].page,
@@ -112,28 +114,24 @@ export default class Async extends Component {
 		}
 
 		const callback = (error, data) => {
-			if (callback === this._callback) {
-				this._callback = null;
-
-				let options = data && data.options || [];
+			let options = data && data.options || [];
 
-				const hasReachedLastPage = pagination && options.length === 0;
+			const hasReachedLastPage = pagination && options.length === 0;
 
-				if(page > 1) {
-					options = this.state.currentOptions.concat(options);
-				}
-
-				if (cache) {
-					cache[`${cacheKey}${inputValue ? `_${inputValue}` : ''}`] = { page, options, hasReachedLastPage };
-				}
+			if(page > 1) {
+				options = this.state.currentOptions.concat(options);
+			}
 
-				this.setState({
-					isLoading: false,
-					isLoadingPage: false,
-					page,
-					options
-				});
+			if (cache) {
+				cache[`${cacheKey}${inputValue ? `_${inputValue}` : ''}`] = { page, options, hasReachedLastPage };
 			}
+
+			this.setState({
+				isLoading: false,
+				isLoadingPage: false,
+				page,
+				options
+			});
 		};
 
 		// Ignore all but the most recent request

src/Creatable.js

@@ -112,12 +112,14 @@ class CreatableSelect extends React.Component {
 	onInputChange (input) {
 		const { onInputChange } = this.props;
 
+		// This value may be needed in between Select mounts (when this.select is null)
+		this.inputValue = input;
+
 		if (onInputChange) {
-			onInputChange(input);
+			this.inputValue =  onInputChange(input);
 		}
 
-		// This value may be needed in between Select mounts (when this.select is null)
-		this.inputValue = input;
+		return this.inputValue;
 	}
 
 	onInputKeyDown (event) {

src/Option.js

@@ -91,6 +91,7 @@ class Option extends React.Component {
 			<div className={className}
 				style={option.style}
 				role="option"
+				aria-label={option.label}
 				onMouseDown={this.handleMouseDown}
 				onMouseEnter={this.handleMouseEnter}
 				onMouseMove={this.handleMouseMove}