diff --git a/examples/src/components/Cities.js b/examples/src/components/Cities.js
index 5d075835..c77a6a82 100644
--- a/examples/src/components/Cities.js
+++ b/examples/src/components/Cities.js
@@ -1,5 +1,7 @@
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');
@@ -7,11 +9,11 @@ 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 {
diff --git a/examples/src/components/GroupedOptionsField.js b/examples/src/components/GroupedOptionsField.js
index 4ff1ef9f..151b1d3b 100644
--- a/examples/src/components/GroupedOptionsField.js
+++ b/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 () {
diff --git a/package.json b/package.json
index 5adcdb15..dad12f4e 100644
--- a/package.json
+++ b/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": {
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 89bba3cf..509939aa 100644
--- a/src/Dropdown.js
+++ b/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
diff --git a/src/OptionGroup.js b/src/OptionGroup.js
index baa9f534..3e8a591b 100644
--- a/src/OptionGroup.js
+++ b/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) {
diff --git a/src/Select.js b/src/Select.js
index 841cce4e..a844483a 100644
--- a/src/Select.js
+++ b/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 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 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 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 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 },
diff --git a/test/Async-test.js b/test/Async-test.js
index 8742e315..41f794b4 100644
--- a/test/Async-test.js
+++ b/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');
diff --git a/test/AsyncCreatable-test.js b/test/AsyncCreatable-test.js
index de1e8211..00b80a9b 100644
--- a/test/AsyncCreatable-test.js
+++ b/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');
diff --git a/test/Creatable-test.js b/test/Creatable-test.js
index 45014c10..cd49307c 100644
--- a/test/Creatable-test.js
+++ b/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', () => {
diff --git a/test/Select-test.js b/test/Select-test.js
index 85b7dda2..47b76237 100644
--- a/test/Select-test.js
+++ b/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');
diff --git a/test/Value-test.js b/test/Value-test.js
index e5b145a2..8f324a20 100644
--- a/test/Value-test.js
+++ b/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' };