make compatible with react 15.5

examples/src/components/Cities.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import Select from 'react-select-plus';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import { AutoSizer, VirtualScroll } from 'react-virtualized';
 
 const DATA = require('../data/cities');
 
 const OPTION_HEIGHT = 35;
 const MAX_OPTIONS_HEIGHT = 200;
 
-var CitiesField = React.createClass({
+var CitiesField = createClass({
 	displayName: 'CitiesField',
 	propTypes: {
-		label: React.PropTypes.string,
-		searchable: React.PropTypes.bool,
+		label: PropTypes.string,
+		searchable: PropTypes.bool,
 	},
 	getDefaultProps () {
 		return {

examples/src/components/GroupedOptionsField.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import Select from 'react-select-plus';
 
 var ops = [{
@@ -42,12 +44,12 @@ var ops = [{
 	value: 'white',
 }];
 
-var GroupedOptionsField = React.createClass({
+var GroupedOptionsField = createClass({
 	displayName: 'GroupedOptionsField',
 	propTypes: {
-		delimiter: React.PropTypes.string,
-		label: React.PropTypes.string,
-		multi: React.PropTypes.bool,
+		delimiter: PropTypes.string,
+		label: PropTypes.string,
+		multi: PropTypes.bool,
 	},
 
 	getInitialState () {

package.json

@@ -30,17 +30,17 @@
     "mocha": "^3.0.2",
     "react": "^15.0",
     "react-addons-shallow-compare": "^15.0",
-    "react-addons-test-utils": "^15.0",
     "react-component-gulp-tasks": "^0.7.7",
     "react-dom": "^15.0",
     "react-gravatar": "^2.4.5",
     "react-highlight-words": "^0.3.0",
+    "react-test-renderer": "^15.5.4",
     "react-virtualized": "^7.23.0",
     "react-virtualized-select": "^1.4.0",
     "sinon": "^1.17.5",
     "unexpected": "^10.17.0",
     "unexpected-dom": "^3.1.0",
-    "unexpected-react": "^3.2.4",
+    "unexpected-react": "^4.0.1",
     "unexpected-sinon": "^10.4.0"
   },
   "peerDependencies": {

src/Dropdown.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 
-const Dropdown = React.createClass({
+const Dropdown = createClass({
   propTypes: {
-    children: React.PropTypes.node,
+    children: PropTypes.node,
   },
   render () {
     // This component adds no markup

src/OptionGroup.js

@@ -1,12 +1,14 @@
 import React from 'react';
+import createClass from 'create-react-class';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const OptionGroup = React.createClass({
+const OptionGroup = createClass({
 	propTypes: {
-		children: React.PropTypes.any,
-		className: React.PropTypes.string,             // className (based on mouse position)
-		label: React.PropTypes.node,                   // the heading to show above the child options
-		option: React.PropTypes.object.isRequired,     // object that is base for that option group
+		children: PropTypes.any,
+		className: PropTypes.string,             // className (based on mouse position)
+		label: PropTypes.node,                   // the heading to show above the child options
+		option: PropTypes.object.isRequired,     // object that is base for that option group
 	},
 
 	blockEvent (event) {

src/Select.js

@@ -79,66 +79,66 @@ const Select = createClass({
 		clearAllText: stringOrNode,                 // title for the "clear" control when multi: true
 		clearRenderer: PropTypes.func,        // create clearable x element
 		clearValueText: stringOrNode,               // title for the "clear" control
-		clearable: React.PropTypes.bool,            // should it be possible to reset value
-		deleteRemoves: React.PropTypes.bool,        // whether backspace removes an item if there is no text input
-		delimiter: React.PropTypes.string,          // delimiter to use to join multiple values for the hidden field value
-		disabled: React.PropTypes.bool,             // whether the Select is disabled or not
-		dropdownComponent: React.PropTypes.func,    // dropdown component to render the menu in
-		escapeClearsValue: React.PropTypes.bool,    // whether escape clears the value when the menu is closed
-		filterOption: React.PropTypes.func,         // method to filter a single option (option, filterString)
-		filterOptions: React.PropTypes.any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
-		ignoreAccents: React.PropTypes.bool,        // whether to strip diacritics when filtering
-		ignoreCase: React.PropTypes.bool,           // whether to perform case-insensitive filtering
-		inputProps: React.PropTypes.object,         // custom attributes for the Input
-		inputRenderer: React.PropTypes.func,        // returns a custom input component
-		instanceId: React.PropTypes.string,         // set the components instanceId
-		isLoading: React.PropTypes.bool,            // whether the Select is loading externally or not (such as options being loaded)
-		isOpen: React.PropTypes.bool,               // whether the Select dropdown menu is open or not
-		joinValues: React.PropTypes.bool,           // joins multiple values into a single form field with the delimiter (legacy mode)
-		labelKey: React.PropTypes.string,           // path of the label value in option objects
-		matchPos: React.PropTypes.string,           // (any|start) match the start or entire string when filtering
-		matchProp: React.PropTypes.string,          // (any|label|value) which option property to filter on
-		menuBuffer: React.PropTypes.number,         // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
-		menuContainerStyle: React.PropTypes.object, // optional style to apply to the menu container
-		menuRenderer: React.PropTypes.func,         // renders a custom menu with options
-		menuStyle: React.PropTypes.object,          // optional style to apply to the menu
-		multi: React.PropTypes.bool,                // multi-value input
-		name: React.PropTypes.string,               // generates a hidden <input /> tag with this field name for html forms
+		clearable: PropTypes.bool,            // should it be possible to reset value
+		deleteRemoves: PropTypes.bool,        // whether backspace removes an item if there is no text input
+		delimiter: PropTypes.string,          // delimiter to use to join multiple values for the hidden field value
+		disabled: PropTypes.bool,             // whether the Select is disabled or not
+		dropdownComponent: PropTypes.func,    // dropdown component to render the menu in
+		escapeClearsValue: PropTypes.bool,    // whether escape clears the value when the menu is closed
+		filterOption: PropTypes.func,         // method to filter a single option (option, filterString)
+		filterOptions: PropTypes.any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
+		ignoreAccents: PropTypes.bool,        // whether to strip diacritics when filtering
+		ignoreCase: PropTypes.bool,           // whether to perform case-insensitive filtering
+		inputProps: PropTypes.object,         // custom attributes for the Input
+		inputRenderer: PropTypes.func,        // returns a custom input component
+		instanceId: PropTypes.string,         // set the components instanceId
+		isLoading: PropTypes.bool,            // whether the Select is loading externally or not (such as options being loaded)
+		isOpen: PropTypes.bool,               // whether the Select dropdown menu is open or not
+		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
+		matchPos: PropTypes.string,           // (any|start) match the start or entire string when filtering
+		matchProp: PropTypes.string,          // (any|label|value) which option property to filter on
+		menuBuffer: PropTypes.number,         // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
+		menuContainerStyle: PropTypes.object, // optional style to apply to the menu container
+		menuRenderer: PropTypes.func,         // renders a custom menu with options
+		menuStyle: PropTypes.object,          // optional style to apply to the menu
+		multi: PropTypes.bool,                // multi-value input
+		name: PropTypes.string,               // generates a hidden <input /> tag with this field name for html forms
 		noResultsText: stringOrNode,                // placeholder displayed when there are no matching search results
-		onBlur: React.PropTypes.func,               // onBlur handler: function (event) {}
-		onBlurResetsInput: React.PropTypes.bool,    // whether input is cleared on blur
-		onChange: React.PropTypes.func,             // onChange handler: function (newValue) {}
-		onClose: React.PropTypes.func,              // fires when the menu is closed
-		onCloseResetsInput: React.PropTypes.bool,		// whether input is cleared when menu is closed through the arrow
-		onFocus: React.PropTypes.func,              // onFocus handler: function (event) {}
-		onInputChange: React.PropTypes.func,        // onInputChange handler: function (inputValue) {}
-		onInputKeyDown: React.PropTypes.func,       // input keyDown handler: function (event) {}
-		onMenuScrollToBottom: React.PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options
-		onOpen: React.PropTypes.func,               // fires when the menu is opened
-		onValueClick: React.PropTypes.func,         // onClick handler for value labels: function (value, event) {}
-		openAfterFocus: React.PropTypes.bool,       // boolean to enable opening dropdown when focused
-		openOnFocus: React.PropTypes.bool,          // always open options menu on focus
-		optionClassName: React.PropTypes.string,    // additional class(es) to apply to the <Option /> elements
-		optionComponent: React.PropTypes.func,      // option component to render in dropdown
-		optionGroupComponent: React.PropTypes.func, // option group component to render in dropdown
-		optionRenderer: React.PropTypes.func,       // optionRenderer: function (option) {}
-		options: React.PropTypes.array,             // array of options
-		pageSize: React.PropTypes.number,           // number of entries to page when using page up/down keys
+		onBlur: PropTypes.func,               // onBlur handler: function (event) {}
+		onBlurResetsInput: PropTypes.bool,    // whether input is cleared on blur
+		onChange: PropTypes.func,             // onChange handler: function (newValue) {}
+		onClose: PropTypes.func,              // fires when the menu is closed
+		onCloseResetsInput: PropTypes.bool,		// whether input is cleared when menu is closed through the arrow
+		onFocus: PropTypes.func,              // onFocus handler: function (event) {}
+		onInputChange: PropTypes.func,        // onInputChange handler: function (inputValue) {}
+		onInputKeyDown: PropTypes.func,       // input keyDown handler: function (event) {}
+		onMenuScrollToBottom: PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options
+		onOpen: PropTypes.func,               // fires when the menu is opened
+		onValueClick: PropTypes.func,         // onClick handler for value labels: function (value, event) {}
+		openAfterFocus: PropTypes.bool,       // boolean to enable opening dropdown when focused
+		openOnFocus: PropTypes.bool,          // always open options menu on focus
+		optionClassName: PropTypes.string,    // additional class(es) to apply to the <Option /> elements
+		optionComponent: PropTypes.func,      // option component to render in dropdown
+		optionGroupComponent: PropTypes.func, // option group component to render in dropdown
+		optionRenderer: PropTypes.func,       // optionRenderer: function (option) {}
+		options: PropTypes.array,             // array of options
+		pageSize: PropTypes.number,           // number of entries to page when using page up/down keys
 		placeholder: stringOrNode,                  // field placeholder, displayed when there's no value
-		renderInvalidValues: React.PropTypes.bool,  // boolean to enable rendering values that do not match any options
-		required: React.PropTypes.bool,             // applies HTML5 required attribute when needed
-		resetValue: React.PropTypes.any,            // value to use when you clear the control
-		scrollMenuIntoView: React.PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
-		searchable: React.PropTypes.bool,           // whether to enable searching feature or not
-		simpleValue: React.PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
-		style: React.PropTypes.object,              // optional style to apply to the control
-		tabIndex: React.PropTypes.string,           // optional tab index of the control
-		tabSelectsValue: React.PropTypes.bool,      // whether to treat tabbing out while focused to be value selection
-		value: React.PropTypes.any,                 // initial field value
-		valueComponent: React.PropTypes.func,       // value component to render
-		valueKey: React.PropTypes.string,           // path of the label value in option objects
-		valueRenderer: React.PropTypes.func,        // valueRenderer: function (option) {}
-		wrapperStyle: React.PropTypes.object,       // optional style to apply to the component wrapper
+		renderInvalidValues: PropTypes.bool,  // boolean to enable rendering values that do not match any options
+		required: PropTypes.bool,             // applies HTML5 required attribute when needed
+		resetValue: PropTypes.any,            // value to use when you clear the control
+		scrollMenuIntoView: PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
+		searchable: PropTypes.bool,           // whether to enable searching feature or not
+		simpleValue: PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
+		style: PropTypes.object,              // optional style to apply to the control
+		tabIndex: PropTypes.string,           // optional tab index of the control
+		tabSelectsValue: PropTypes.bool,      // whether to treat tabbing out while focused to be value selection
+		value: PropTypes.any,                 // initial field value
+		valueComponent: PropTypes.func,       // value component to render
+		valueKey: PropTypes.string,           // path of the label value in option objects
+		valueRenderer: PropTypes.func,        // valueRenderer: function (option) {}
+		wrapperStyle: PropTypes.object,       // optional style to apply to the component wrapper
 	},
 
 	statics: { Async, AsyncCreatable, Creatable },

test/Async-test.js

@@ -17,7 +17,7 @@ var expect = unexpected
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var TestUtils = require('react-addons-test-utils');
+var TestUtils = require('react-dom/test-utils');
 var sinon = require('sinon');
 
 var Select = require('../src/Select');

test/AsyncCreatable-test.js

@@ -14,7 +14,7 @@ var expect = unexpected
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var TestUtils = require('react-addons-test-utils');
+var TestUtils = require('react-dom/test-utils');
 var sinon = require('sinon');
 var Select = require('../src/Select');
 

test/Creatable-test.js

@@ -15,7 +15,7 @@ var expect = unexpected
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var TestUtils = require('react-addons-test-utils');
+var TestUtils = require('react-dom/test-utils');
 var Select = require('../src/Select');
 
 describe('Creatable', () => {

test/Select-test.js

@@ -20,7 +20,7 @@ jsdomHelper();
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var TestUtils = require('react-addons-test-utils');
+var TestUtils = require('react-dom/test-utils');
 
 var Select = require('../src/Select');
 var Value = require('../src/Value');

test/Value-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 TestUtils = require('react-dom/test-utils');
 
 var OPTION = { label: 'TEST-LABEL', value: 'TEST-VALUE' };