break dependency cycle between Select.js and Async.js

package.json

@@ -2,7 +2,7 @@
   "name": "react-select",
   "version": "1.0.0-rc.4",
   "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,6 +1,8 @@
 import React from 'react';
 import createClass from 'create-react-class';
 import Select from './Select';
+import Async from './Async';
+import Creatable from './Creatable';
 
 function reduce(obj, props = {}){
   return Object.keys(obj)
@@ -20,9 +22,9 @@ const AsyncCreatable = createClass({
 
 	render () {
 		return (
-			<Select.Async {...this.props}>
+			<Async {...this.props}>
 				{(asyncProps) => (
-					<Select.Creatable {...this.props}>
+					<Creatable {...this.props}>
 						{(creatableProps) => (
 							<Select
 								{...reduce(asyncProps, reduce(creatableProps, {}))}
@@ -37,9 +39,9 @@ const AsyncCreatable = createClass({
 								}}
 							/>
 						)}
-					</Select.Creatable>
+					</Creatable>
 				)}
-			</Select.Async>
+			</Async>
 		);
 	}
 });

src/Select.js

@@ -119,8 +119,6 @@ const Select = createClass({
 		wrapperStyle: PropTypes.object,       // optional style to apply to the component wrapper
 	},
 
-	statics: { Async, AsyncCreatable, Creatable },
-
 	getDefaultProps () {
 		return {
 			addLabelText: 'Add "{label}"?',

src/index.js

@@ -0,0 +1,13 @@
+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,15 +20,15 @@ var ReactDOM = require('react-dom');
 var TestUtils = require('react-addons-test-utils');
 var sinon = require('sinon');
 
-var Select = require('../src/Select');
+var Async = require('../src/Async');
 
 describe('Async', () => {
 	let asyncInstance, asyncNode, filterInputNode, loadOptions;
 
 	function createControl (props = {}) {
 		loadOptions = props.loadOptions || sinon.stub();
 		asyncInstance = TestUtils.renderIntoDocument(
-			<Select.Async
+			<Async
 				autoload={false}
 				openOnFocus
 				{...props}

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 AsyncCreatable = require('../src/AsyncCreatable');
 
 describe('AsyncCreatable', () => {
 	let creatableInstance, creatableNode, filterInputNode, loadOptions, renderer;
@@ -29,7 +29,7 @@ describe('AsyncCreatable', () => {
 	function createControl (props = {}) {
 		props.loadOptions = props.loadOptions || loadOptions;
 		creatableInstance = TestUtils.renderIntoDocument(
-			<Select.AsyncCreatable {...props} />
+			<AsyncCreatable {...props} />
 		);
 		creatableNode = ReactDOM.findDOMNode(creatableInstance);
 		findAndFocusInputControl();

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 Creatable = require('../src/Creatable');
 
 describe('Creatable', () => {
 	let creatableInstance, creatableNode, filterInputNode, innserSelectInstance, renderer;
@@ -33,7 +33,7 @@ describe('Creatable', () => {
 	function createControl (props = {}) {
 		props.options = props.options || defaultOptions;
 		creatableInstance = TestUtils.renderIntoDocument(
-			<Select.Creatable {...props} />
+			<Creatable {...props} />
 		);
 		creatableNode = ReactDOM.findDOMNode(creatableInstance);
 		innserSelectInstance = creatableInstance.select;
@@ -65,15 +65,15 @@ describe('Creatable', () => {
 	it('should add a placeholder "create..." prompt when filter text is entered that does not match any existing options', () => {
 		createControl();
 		typeSearchText('foo');
-		expect(creatableNode.querySelector('.Select-create-option-placeholder'), 'to have text', Select.Creatable.promptTextCreator('foo'));
+		expect(creatableNode.querySelector('.Select-create-option-placeholder'), 'to have text', Creatable.promptTextCreator('foo'));
 	});
 
 	it('should not show a "create..." prompt if current filter text is an exact match for an existing option', () => {
 		createControl({
 			isOptionUnique: () => false
 		});
 		typeSearchText('existing');
-		expect(creatableNode.querySelector('.Select-menu-outer').textContent, 'not to equal', Select.Creatable.promptTextCreator('existing'));
+		expect(creatableNode.querySelector('.Select-menu-outer').textContent, 'not to equal', Creatable.promptTextCreator('existing'));
 	});
 
 	it('should filter the "create..." prompt using both filtered options and currently-selected options', () => {
@@ -114,7 +114,7 @@ describe('Creatable', () => {
 			isValidNewOption: () => false
 		});
 		typeSearchText('invalid');
-		expect(creatableNode.querySelector('.Select-menu-outer').textContent, 'not to equal', Select.Creatable.promptTextCreator('invalid'));
+		expect(creatableNode.querySelector('.Select-menu-outer').textContent, 'not to equal', Creatable.promptTextCreator('invalid'));
 	});
 
 	it('should create (and auto-select) a new option when placeholder option is clicked', () => {
@@ -187,7 +187,7 @@ describe('Creatable', () => {
 		};
 
 		function test (option) {
-			return Select.Creatable.isOptionUnique({
+			return Creatable.isOptionUnique({
 				labelKey: 'label',
 				option,
 				options,
@@ -203,7 +203,7 @@ describe('Creatable', () => {
 
 	it('default :isValidNewOption function should just ensure a non-empty string is provided', () => {
 		function test (label) {
-			return Select.Creatable.isValidNewOption({ label });
+			return Creatable.isValidNewOption({ label });
 		};
 
 		expect(test(''), 'to be', false);
@@ -212,7 +212,7 @@ describe('Creatable', () => {
 	});
 
 	it('default :newOptionCreator function should create an option with a :label and :value equal to the label string', () => {
-		const option = Select.Creatable.newOptionCreator({
+		const option = Creatable.newOptionCreator({
 			label: 'foo',
 			labelKey: 'label',
 			valueKey: 'value'
@@ -224,7 +224,7 @@ describe('Creatable', () => {
 
 	it('default :shouldKeyDownEventCreateNewOption function should accept TAB, ENTER, and comma keys', () => {
 		function test (keyCode) {
-			return Select.Creatable.shouldKeyDownEventCreateNewOption({ keyCode });
+			return Creatable.shouldKeyDownEventCreateNewOption({ keyCode });
 		};
 
 		expect(test(9), 'to be', true);