Bugfix/remove circular refs (JedWatson#1855)

* Fix issue with Circular references.

Because Select was used in Async, AsyncCreatable, and Creatable and those components were ref in
Select, there was a circular dependency. It seems mostackage managers handled this ok, but this
may cause an issue with hoisting (e.g. rollup and webpack 3).# Please enter the commit message for your changes. Lines starting

* Add focus test back in to Async

* Make components static fields on Select instance

Author: agirton

gulpfile.js

@@ -4,7 +4,7 @@ var initGulpTasks = require('react-component-gulp-tasks');
 var taskConfig = {
 
 	component: {
-		name: 'Select',
+		name: 'index',
 		dependencies: [
 			'classnames',
 			'react-input-autosize',

package.json

@@ -2,7 +2,7 @@
   "name": "react-select",
   "version": "1.0.0-rc.5",
   "description": "A Select control built with and for ReactJS",
-  "main": "lib/Select.js",
+  "main": "lib/index.js",
   "style": "dist/react-select.min.css",
   "author": "Jed Watson",
   "license": "MIT",

src/AsyncCreatable.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Select from './Select';
+import Async from './Async';
+import Creatable from './Creatable';
 
 function reduce(obj, props = {}){
   return Object.keys(obj)
@@ -18,9 +20,9 @@ class AsyncCreatableSelect extends React.Component {
 
 	render () {
 		return (
-			<Select.Async {...this.props}>
+			<Async {...this.props}>
 				{(asyncProps) => (
-					<Select.Creatable {...this.props}>
+					<Creatable {...this.props}>
 						{(creatableProps) => (
 							<Select
 								{...reduce(asyncProps, reduce(creatableProps, {}))}
@@ -35,12 +37,11 @@ class AsyncCreatableSelect extends React.Component {
 								}}
 							/>
 						)}
-					</Select.Creatable>
+					</Creatable>
 				)}
-			</Select.Async>
+			</Async>
 		);
 	}
 };
 
 module.exports = AsyncCreatableSelect;
-

src/Select.js

@@ -15,9 +15,6 @@ import defaultFilterOptions from './utils/defaultFilterOptions';
 import defaultMenuRenderer from './utils/defaultMenuRenderer';
 import defaultClearRenderer from './utils/defaultClearRenderer';
 
-import Async from './Async';
-import AsyncCreatable from './AsyncCreatable';
-import Creatable from './Creatable';
 import Option from './Option';
 import Value from './Value';
 
@@ -1117,10 +1114,6 @@ Select.propTypes = {
     wrapperStyle: PropTypes.object,       // optional style to apply to the component wrapper
 };
 
-Select.Async = Async;
-Select.AsyncCreatable = AsyncCreatable;
-Select.Creatable = Creatable;
-
 Select.defaultProps = {
     addLabelText: 'Add "{label}"?',
     arrowRenderer: defaultArrowRenderer,

src/index.js

@@ -0,0 +1,15 @@
+import Select from './Select';
+import Async from './Async';
+import AsyncCreatable from './AsyncCreatable';
+import Creatable from './Creatable';
+
+Select.Async = Async;
+Select.AsyncCreatable = AsyncCreatable;
+Select.Creatable = Creatable;
+
+export default Select;
+export {
+	Async,
+	AsyncCreatable,
+	Creatable
+};

test/Async-test.js

@@ -20,7 +20,7 @@ var ReactDOM = require('react-dom');
 var TestUtils = require('react-addons-test-utils');
 var sinon = require('sinon');
 
-var Select = require('../src/Select');
+var Select = require('../src');
 
 describe('Async', () => {
 	let asyncInstance, asyncNode, filterInputNode, loadOptions;
@@ -31,8 +31,8 @@ describe('Async', () => {
 			<Select.Async
 				autoload={false}
 				openOnFocus
-				{...props}
 				loadOptions={loadOptions}
+				{...props}
 			/>
 		);
 		asyncNode = ReactDOM.findDOMNode(asyncInstance);
@@ -438,13 +438,13 @@ describe('Async', () => {
 	describe('.focus()', () => {
 		beforeEach(() => {
 			createControl({});
+			TestUtils.Simulate.blur(filterInputNode);
 		});
 
 		it('focuses the search input', () => {
-			var input = asyncNode.querySelector('input');
-			expect(input, 'not to equal', document.activeElement);
+			expect(filterInputNode, 'not to equal', document.activeElement);
 			asyncInstance.focus();
-			expect(input, 'to equal', document.activeElement);
+			expect(filterInputNode, 'to equal', document.activeElement);
 		});
 	});
 

test/AsyncCreatable-test.js

@@ -16,7 +16,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var TestUtils = require('react-addons-test-utils');
 var sinon = require('sinon');
-var Select = require('../src/Select');
+var Select = require('../src');
 
 describe('AsyncCreatable', () => {
 	let creatableInstance, creatableNode, filterInputNode, loadOptions, renderer;

test/Creatable-test.js

@@ -16,7 +16,7 @@ var expect = unexpected
 var React = require('react');
 var ReactDOM = require('react-dom');
 var TestUtils = require('react-addons-test-utils');
-var Select = require('../src/Select');
+var Select = require('../src');
 
 describe('Creatable', () => {
 	let creatableInstance, creatableNode, filterInputNode, innerSelectInstance, renderer;

test/Select-test.js

@@ -2479,7 +2479,7 @@ describe('Select', () => {
 				expect(spyFilterOption, 'was called with', defaultOptions[1], '');
 				expect(spyFilterOption, 'was called with', defaultOptions[2], '');
 				expect(spyFilterOption, 'was called with', defaultOptions[3], '');
-			});
+			}).timeout(5000);
 
 			describe('when entering text', () => {
 
@@ -2497,7 +2497,7 @@ describe('Select', () => {
 					expect(spyFilterOption, 'was called with', defaultOptions[1], 'xyz');
 					expect(spyFilterOption, 'was called with', defaultOptions[2], 'xyz');
 					expect(spyFilterOption, 'was called with', defaultOptions[3], 'xyz');
-				});
+				}).timeout(5000);
 
 				it('only shows the filtered option', () => {