From 549d20ac9d9b8afa346681148acbfced7b3fbfe3 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Mon, 15 May 2017 00:00:05 +1000 Subject: [PATCH] v1.0.0-rc.4 --- HISTORY.md | 8 + bower.json | 2 +- dist/react-select.js | 321 ++-- dist/react-select.min.js | 4 +- examples/dist/app.js | 172 ++- examples/dist/bundle.js | 321 ++-- examples/dist/common.js | 2907 ++++++++++++++++++++++++++--------- examples/dist/standalone.js | 321 ++-- lib/Async.js | 43 +- lib/AsyncCreatable.js | 11 +- lib/Creatable.js | 38 +- lib/Option.js | 34 +- lib/Select.js | 165 +- lib/Value.js | 22 +- package.json | 2 +- src/Select.js | 9 +- 16 files changed, 3071 insertions(+), 1309 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 5862bb2f37..6fecdaf70a 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,13 @@ # React-Select +## v1.0.0-rc.4 / 2017-05-14 + +* fixed; no more warning when using React 15.5, thanks [Adam Girton](https://github.com/agirton) +* fixed; issue comparing objects in `getFocusableOptionIndex`, thanks [rndm2](https://github.com/rndm2) +* fixed; missing .focus() method in `Creatable`, thanks [Anton Alexandrenok](https://github.com/the-spyke) +* added; support for `aria-describedby` attribute, thanks [Eric Lee](https://github.com/ericj17) +* added; `.is-clearable` className when clearable is true, thanks [Dan Diaz](https://github.com/dan-diaz) + ## v1.0.0-rc.3 / 2017-02-01 * added; `arrowRenderer` prop, thanks [Brian Vaughn](https://github.com/bvaughn) diff --git a/bower.json b/bower.json index 19cc369235..97ed501c5b 100644 --- a/bower.json +++ b/bower.json @@ -4,7 +4,7 @@ "dist/react-select.min.js", "dist/react-select.min.css" ], - "version": "1.0.0-beta14", + "version": "1.0.0-rc.4", "homepage": "https://github.com/JedWatson/react-select", "authors": [ "Jed Watson" diff --git a/dist/react-select.js b/dist/react-select.js index caad9d23f4..a5ad82f310 100644 --- a/dist/react-select.js +++ b/dist/react-select.js @@ -24,6 +24,10 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + var _Select = require('./Select'); var _Select2 = _interopRequireDefault(_Select); @@ -33,24 +37,25 @@ var _utilsStripDiacritics = require('./utils/stripDiacritics'); var _utilsStripDiacritics2 = _interopRequireDefault(_utilsStripDiacritics); var propTypes = { - autoload: _react2['default'].PropTypes.bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true - cache: _react2['default'].PropTypes.any, // object to use to cache results; set to null/false to disable caching - children: _react2['default'].PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element - ignoreAccents: _react2['default'].PropTypes.bool, // strip diacritics when filtering; defaults to true - ignoreCase: _react2['default'].PropTypes.bool, // perform case-insensitive filtering; defaults to true - loadingPlaceholder: _react2['default'].PropTypes.oneOfType([// replaces the placeholder while options are loading - _react2['default'].PropTypes.string, _react2['default'].PropTypes.node]), - loadOptions: _react2['default'].PropTypes.func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise - options: _react.PropTypes.array.isRequired, // array of options - placeholder: _react2['default'].PropTypes.oneOfType([// field placeholder, displayed when there's no value (shared with Select) - _react2['default'].PropTypes.string, _react2['default'].PropTypes.node]), - noResultsText: _react2['default'].PropTypes.oneOfType([// field noResultsText, displayed when no options come back from the server - _react2['default'].PropTypes.string, _react2['default'].PropTypes.node]), - onChange: _react2['default'].PropTypes.func, // onChange handler: function (newValue) {} - searchPromptText: _react2['default'].PropTypes.oneOfType([// label to prompt for search input - _react2['default'].PropTypes.string, _react2['default'].PropTypes.node]), - onInputChange: _react2['default'].PropTypes.func, // optional for keeping track of what is being typed - value: _react2['default'].PropTypes.any }; + autoload: _propTypes2['default'].bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true + cache: _propTypes2['default'].any, // object to use to cache results; set to null/false to disable caching + children: _propTypes2['default'].func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element + ignoreAccents: _propTypes2['default'].bool, // strip diacritics when filtering; defaults to true + ignoreCase: _propTypes2['default'].bool, // perform case-insensitive filtering; defaults to true + loadingPlaceholder: _propTypes2['default'].oneOfType([// replaces the placeholder while options are loading + _propTypes2['default'].string, _propTypes2['default'].node]), + loadOptions: _propTypes2['default'].func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise + multi: _propTypes2['default'].bool, // multi-value input + options: _propTypes2['default'].array.isRequired, // array of options + placeholder: _propTypes2['default'].oneOfType([// field placeholder, displayed when there's no value (shared with Select) + _propTypes2['default'].string, _propTypes2['default'].node]), + noResultsText: _propTypes2['default'].oneOfType([// field noResultsText, displayed when no options come back from the server + _propTypes2['default'].string, _propTypes2['default'].node]), + onChange: _propTypes2['default'].func, // onChange handler: function (newValue) {} + searchPromptText: _propTypes2['default'].oneOfType([// label to prompt for search input + _propTypes2['default'].string, _propTypes2['default'].node]), + onInputChange: _propTypes2['default'].func, // optional for keeping track of what is being typed + value: _propTypes2['default'].any }; // initial field value var defaultCache = {}; @@ -263,11 +268,11 @@ Async.defaultProps = defaultProps; function defaultChildren(props) { return _react2['default'].createElement(_Select2['default'], props); -}; +} module.exports = exports['default']; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":5,"./utils/stripDiacritics":11}],2:[function(require,module,exports){ +},{"./Select":5,"./utils/stripDiacritics":11,"prop-types":undefined}],2:[function(require,module,exports){ (function (global){ 'use strict'; @@ -279,6 +284,10 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); +var _createReactClass = require('create-react-class'); + +var _createReactClass2 = _interopRequireDefault(_createReactClass); + var _Select = require('./Select'); var _Select2 = _interopRequireDefault(_Select); @@ -293,9 +302,13 @@ function reduce(obj) { }, props); } -var AsyncCreatable = _react2['default'].createClass({ +var AsyncCreatable = (0, _createReactClass2['default'])({ displayName: 'AsyncCreatableSelect', + focus: function focus() { + this.select.focus(); + }, + render: function render() { var _this = this; @@ -313,6 +326,7 @@ var AsyncCreatable = _react2['default'].createClass({ return asyncProps.onInputChange(input); }, ref: function (ref) { + _this.select = ref; creatableProps.ref(ref); asyncProps.ref(ref); } @@ -327,7 +341,7 @@ var AsyncCreatable = _react2['default'].createClass({ module.exports = AsyncCreatable; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":5}],3:[function(require,module,exports){ +},{"./Select":5,"create-react-class":undefined}],3:[function(require,module,exports){ (function (global){ 'use strict'; @@ -341,6 +355,14 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); +var _createReactClass = require('create-react-class'); + +var _createReactClass2 = _interopRequireDefault(_createReactClass); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + var _Select = require('./Select'); var _Select2 = _interopRequireDefault(_Select); @@ -353,52 +375,52 @@ var _utilsDefaultMenuRenderer = require('./utils/defaultMenuRenderer'); var _utilsDefaultMenuRenderer2 = _interopRequireDefault(_utilsDefaultMenuRenderer); -var Creatable = _react2['default'].createClass({ +var Creatable = (0, _createReactClass2['default'])({ displayName: 'CreatableSelect', propTypes: { // Child function responsible for creating the inner Select component // This component can be used to compose HOCs (eg Creatable and Async) // (props: Object): PropTypes.element - children: _react2['default'].PropTypes.func, + children: _propTypes2['default'].func, // See Select.propTypes.filterOptions - filterOptions: _react2['default'].PropTypes.any, + filterOptions: _propTypes2['default'].any, // Searches for any matching option within the set of options. // This function prevents duplicate options from being created. // ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean - isOptionUnique: _react2['default'].PropTypes.func, + isOptionUnique: _propTypes2['default'].func, // Determines if the current input text represents a valid option. // ({ label: string }): boolean - isValidNewOption: _react2['default'].PropTypes.func, + isValidNewOption: _propTypes2['default'].func, // See Select.propTypes.menuRenderer - menuRenderer: _react2['default'].PropTypes.any, + menuRenderer: _propTypes2['default'].any, // Factory to create new option. // ({ label: string, labelKey: string, valueKey: string }): Object - newOptionCreator: _react2['default'].PropTypes.func, + newOptionCreator: _propTypes2['default'].func, // input change handler: function (inputValue) {} - onInputChange: _react2['default'].PropTypes.func, + onInputChange: _propTypes2['default'].func, // input keyDown handler: function (event) {} - onInputKeyDown: _react2['default'].PropTypes.func, + onInputKeyDown: _propTypes2['default'].func, // new option click handler: function (option) {} - onNewOptionClick: _react2['default'].PropTypes.func, + onNewOptionClick: _propTypes2['default'].func, // See Select.propTypes.options - options: _react2['default'].PropTypes.array, + options: _propTypes2['default'].array, // Creates prompt/placeholder option text. // (filterText: string): string - promptTextCreator: _react2['default'].PropTypes.func, + promptTextCreator: _propTypes2['default'].func, // Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. - shouldKeyDownEventCreateNewOption: _react2['default'].PropTypes.func + shouldKeyDownEventCreateNewOption: _propTypes2['default'].func }, // Default prop methods @@ -554,6 +576,10 @@ var Creatable = _react2['default'].createClass({ } }, + focus: function focus() { + this.select.focus(); + }, + render: function render() { var _this = this; @@ -647,7 +673,7 @@ function shouldKeyDownEventCreateNewOption(_ref6) { module.exports = Creatable; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{"./Select":5,"./utils/defaultFilterOptions":9,"./utils/defaultMenuRenderer":10}],4:[function(require,module,exports){ +},{"./Select":5,"./utils/defaultFilterOptions":9,"./utils/defaultMenuRenderer":10,"create-react-class":undefined,"prop-types":undefined}],4:[function(require,module,exports){ (function (global){ 'use strict'; @@ -657,25 +683,31 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); +var _createReactClass = require('create-react-class'); + +var _createReactClass2 = _interopRequireDefault(_createReactClass); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + var _classnames = (typeof window !== "undefined" ? window['classNames'] : typeof global !== "undefined" ? global['classNames'] : null); var _classnames2 = _interopRequireDefault(_classnames); -var Option = _react2['default'].createClass({ - displayName: 'Option', - +var Option = (0, _createReactClass2['default'])({ propTypes: { - children: _react2['default'].PropTypes.node, - className: _react2['default'].PropTypes.string, // className (based on mouse position) - instancePrefix: _react2['default'].PropTypes.string.isRequired, // unique prefix for the ids (used for aria) - isDisabled: _react2['default'].PropTypes.bool, // the option is disabled - isFocused: _react2['default'].PropTypes.bool, // the option is focused - isSelected: _react2['default'].PropTypes.bool, // the option is selected - onFocus: _react2['default'].PropTypes.func, // method to handle mouseEnter on option element - onSelect: _react2['default'].PropTypes.func, // method to handle click on option element - onUnfocus: _react2['default'].PropTypes.func, // method to handle mouseLeave on option element - option: _react2['default'].PropTypes.object.isRequired, // object that is base for that option - optionIndex: _react2['default'].PropTypes.number }, + children: _propTypes2['default'].node, + className: _propTypes2['default'].string, // className (based on mouse position) + instancePrefix: _propTypes2['default'].string.isRequired, // unique prefix for the ids (used for aria) + isDisabled: _propTypes2['default'].bool, // the option is disabled + isFocused: _propTypes2['default'].bool, // the option is focused + isSelected: _propTypes2['default'].bool, // the option is selected + onFocus: _propTypes2['default'].func, // method to handle mouseEnter on option element + onSelect: _propTypes2['default'].func, // method to handle click on option element + onUnfocus: _propTypes2['default'].func, // method to handle mouseLeave on option element + option: _propTypes2['default'].object.isRequired, // object that is base for that option + optionIndex: _propTypes2['default'].number }, // index of the option, used to generate unique ids for aria blockEvent: function blockEvent(event) { event.preventDefault(); @@ -762,7 +794,7 @@ var Option = _react2['default'].createClass({ module.exports = Option; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) -},{}],5:[function(require,module,exports){ +},{"create-react-class":undefined,"prop-types":undefined}],5:[function(require,module,exports){ (function (global){ /*! Copyright (c) 2016 Jed Watson. @@ -788,6 +820,14 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global != var _react2 = _interopRequireDefault(_react); +var _createReactClass = require('create-react-class'); + +var _createReactClass2 = _interopRequireDefault(_createReactClass); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null); var _reactDom2 = _interopRequireDefault(_reactDom); @@ -849,84 +889,85 @@ function stringifyValue(value) { } } -var stringOrNode = _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.node]); +var stringOrNode = _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].node]); var instanceId = 1; -var Select = _react2['default'].createClass({ +var Select = (0, _createReactClass2['default'])({ displayName: 'Select', propTypes: { - addLabelText: _react2['default'].PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input - 'aria-label': _react2['default'].PropTypes.string, // Aria label (for assistive tech) - 'aria-labelledby': _react2['default'].PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech) - arrowRenderer: _react2['default'].PropTypes.func, // Create drop-down caret element - autoBlur: _react2['default'].PropTypes.bool, // automatically blur the component when an option is selected - autofocus: _react2['default'].PropTypes.bool, // autofocus the component on mount - autosize: _react2['default'].PropTypes.bool, // whether to enable autosizing or not - backspaceRemoves: _react2['default'].PropTypes.bool, // whether backspace removes an item if there is no text input - backspaceToRemoveMessage: _react2['default'].PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label - className: _react2['default'].PropTypes.string, // className for the outer element + addLabelText: _propTypes2['default'].string, // placeholder displayed when you want to add a label on a multi-value input + 'aria-describedby': _propTypes2['default'].string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) + 'aria-label': _propTypes2['default'].string, // Aria label (for assistive tech) + 'aria-labelledby': _propTypes2['default'].string, // HTML ID of an element that should be used as the label (for assistive tech) + arrowRenderer: _propTypes2['default'].func, // Create drop-down caret element + autoBlur: _propTypes2['default'].bool, // automatically blur the component when an option is selected + autofocus: _propTypes2['default'].bool, // autofocus the component on mount + autosize: _propTypes2['default'].bool, // whether to enable autosizing or not + backspaceRemoves: _propTypes2['default'].bool, // whether backspace removes an item if there is no text input + backspaceToRemoveMessage: _propTypes2['default'].string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label + className: _propTypes2['default'].string, // className for the outer element clearAllText: stringOrNode, // title for the "clear" control when multi: true - clearRenderer: _react2['default'].PropTypes.func, // create clearable x element + clearRenderer: _propTypes2['default'].func, // create clearable x element clearValueText: stringOrNode, // title for the "clear" control - clearable: _react2['default'].PropTypes.bool, // should it be possible to reset value - deleteRemoves: _react2['default'].PropTypes.bool, // whether backspace removes an item if there is no text input - delimiter: _react2['default'].PropTypes.string, // delimiter to use to join multiple values for the hidden field value - disabled: _react2['default'].PropTypes.bool, // whether the Select is disabled or not - escapeClearsValue: _react2['default'].PropTypes.bool, // whether escape clears the value when the menu is closed - filterOption: _react2['default'].PropTypes.func, // method to filter a single option (option, filterString) - filterOptions: _react2['default'].PropTypes.any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values]) - ignoreAccents: _react2['default'].PropTypes.bool, // whether to strip diacritics when filtering - ignoreCase: _react2['default'].PropTypes.bool, // whether to perform case-insensitive filtering - inputProps: _react2['default'].PropTypes.object, // custom attributes for the Input - inputRenderer: _react2['default'].PropTypes.func, // returns a custom input component - instanceId: _react2['default'].PropTypes.string, // set the components instanceId - isLoading: _react2['default'].PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded) - joinValues: _react2['default'].PropTypes.bool, // joins multiple values into a single form field with the delimiter (legacy mode) - labelKey: _react2['default'].PropTypes.string, // path of the label value in option objects - matchPos: _react2['default'].PropTypes.string, // (any|start) match the start or entire string when filtering - matchProp: _react2['default'].PropTypes.string, // (any|label|value) which option property to filter on - menuBuffer: _react2['default'].PropTypes.number, // optional buffer (in px) between the bottom of the viewport and the bottom of the menu - menuContainerStyle: _react2['default'].PropTypes.object, // optional style to apply to the menu container - menuRenderer: _react2['default'].PropTypes.func, // renders a custom menu with options - menuStyle: _react2['default'].PropTypes.object, // optional style to apply to the menu - multi: _react2['default'].PropTypes.bool, // multi-value input - name: _react2['default'].PropTypes.string, // generates a hidden tag with this field name for html forms + clearable: _propTypes2['default'].bool, // should it be possible to reset value + deleteRemoves: _propTypes2['default'].bool, // whether backspace removes an item if there is no text input + delimiter: _propTypes2['default'].string, // delimiter to use to join multiple values for the hidden field value + disabled: _propTypes2['default'].bool, // whether the Select is disabled or not + escapeClearsValue: _propTypes2['default'].bool, // whether escape clears the value when the menu is closed + filterOption: _propTypes2['default'].func, // method to filter a single option (option, filterString) + filterOptions: _propTypes2['default'].any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values]) + ignoreAccents: _propTypes2['default'].bool, // whether to strip diacritics when filtering + ignoreCase: _propTypes2['default'].bool, // whether to perform case-insensitive filtering + inputProps: _propTypes2['default'].object, // custom attributes for the Input + inputRenderer: _propTypes2['default'].func, // returns a custom input component + instanceId: _propTypes2['default'].string, // set the components instanceId + isLoading: _propTypes2['default'].bool, // whether the Select is loading externally or not (such as options being loaded) + joinValues: _propTypes2['default'].bool, // joins multiple values into a single form field with the delimiter (legacy mode) + labelKey: _propTypes2['default'].string, // path of the label value in option objects + matchPos: _propTypes2['default'].string, // (any|start) match the start or entire string when filtering + matchProp: _propTypes2['default'].string, // (any|label|value) which option property to filter on + menuBuffer: _propTypes2['default'].number, // optional buffer (in px) between the bottom of the viewport and the bottom of the menu + menuContainerStyle: _propTypes2['default'].object, // optional style to apply to the menu container + menuRenderer: _propTypes2['default'].func, // renders a custom menu with options + menuStyle: _propTypes2['default'].object, // optional style to apply to the menu + multi: _propTypes2['default'].bool, // multi-value input + name: _propTypes2['default'].string, // generates a hidden tag with this field name for html forms noResultsText: stringOrNode, // placeholder displayed when there are no matching search results - onBlur: _react2['default'].PropTypes.func, // onBlur handler: function (event) {} - onBlurResetsInput: _react2['default'].PropTypes.bool, // whether input is cleared on blur - onChange: _react2['default'].PropTypes.func, // onChange handler: function (newValue) {} - onClose: _react2['default'].PropTypes.func, // fires when the menu is closed - onCloseResetsInput: _react2['default'].PropTypes.bool, // whether input is cleared when menu is closed through the arrow - onFocus: _react2['default'].PropTypes.func, // onFocus handler: function (event) {} - onInputChange: _react2['default'].PropTypes.func, // onInputChange handler: function (inputValue) {} - onInputKeyDown: _react2['default'].PropTypes.func, // input keyDown handler: function (event) {} - onMenuScrollToBottom: _react2['default'].PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options - onOpen: _react2['default'].PropTypes.func, // fires when the menu is opened - onValueClick: _react2['default'].PropTypes.func, // onClick handler for value labels: function (value, event) {} - openAfterFocus: _react2['default'].PropTypes.bool, // boolean to enable opening dropdown when focused - openOnFocus: _react2['default'].PropTypes.bool, // always open options menu on focus - optionClassName: _react2['default'].PropTypes.string, // additional class(es) to apply to the