From 8681cef23c59311b6a325848cd6a4aa2bb6d6612 Mon Sep 17 00:00:00 2001 From: Vicky Enalen Date: Tue, 13 Mar 2018 12:45:34 -0700 Subject: [PATCH 01/11] Added function type to Wizard Step --- docs/components/WizardView.jsx | 8 ++++++++ package.json | 2 +- src/Wizard/Wizard.jsx | 9 +++++++-- src/Wizard/WizardStep.jsx | 1 - 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/components/WizardView.jsx b/docs/components/WizardView.jsx index 8c47ba6d5..e3392bfed 100644 --- a/docs/components/WizardView.jsx +++ b/docs/components/WizardView.jsx @@ -198,6 +198,14 @@ export default class WizardView extends PureComponent { + "backwards/fowards through the wizard.", optional: true, }, + { + name: "nextButtonValue", + type: "String, React Node, or Function", + description: "Text to display on next buttons in form. Function can be used to dynamically change " + + "the button text based on wizardstate", + defaultValue: "Next", + optional: true, + }, ]} className={cssClass.PROPS} title="step" diff --git a/package.json b/package.json index 6464039a7..d1b1fa7ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clever-components", - "version": "0.28.6", + "version": "0.28.7", "description": "A library of helpful React components and less styles", "repository": { "type": "git", diff --git a/src/Wizard/Wizard.jsx b/src/Wizard/Wizard.jsx index e62fe824c..d0f294800 100644 --- a/src/Wizard/Wizard.jsx +++ b/src/Wizard/Wizard.jsx @@ -226,7 +226,6 @@ export class Wizard extends React.Component { help={curStep.help ? curStep.help : help} validate={curStep.validate} prevButtonValue={curStep.prevButtonValue} - nextButtonValue={curStep.nextButtonValue} />
@@ -276,6 +280,7 @@ Wizard.propTypes = { PropTypes.func, PropTypes.instanceOf(React.Component), ]).isRequired, + nextButtonValue: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]), validate: PropTypes.func.isRequired, canContinue: PropTypes.func, help: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), diff --git a/src/Wizard/WizardStep.jsx b/src/Wizard/WizardStep.jsx index dfbaed32a..bb9fb592c 100644 --- a/src/Wizard/WizardStep.jsx +++ b/src/Wizard/WizardStep.jsx @@ -116,7 +116,6 @@ WizardStep.propTypes = { help: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), Component: PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(React.Component)]).isRequired, componentProps: PropTypes.object, - nextButtonValue: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), prevButtonValue: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), // internal facing From aa82fa1838110d79409026bae8d532d60e781c47 Mon Sep 17 00:00:00 2001 From: Vicky Enalen Date: Tue, 13 Mar 2018 14:25:07 -0700 Subject: [PATCH 02/11] Remove prev step from WizardStep --- src/Wizard/Wizard.jsx | 1 - src/Wizard/WizardStep.jsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/Wizard/Wizard.jsx b/src/Wizard/Wizard.jsx index d0f294800..3b6e2fec5 100644 --- a/src/Wizard/Wizard.jsx +++ b/src/Wizard/Wizard.jsx @@ -225,7 +225,6 @@ export class Wizard extends React.Component { currentStep={this.state.currentStep} help={curStep.help ? curStep.help : help} validate={curStep.validate} - prevButtonValue={curStep.prevButtonValue} />
Date: Tue, 13 Mar 2018 14:54:23 -0700 Subject: [PATCH 03/11] Wizard step button as function --- docs/bundle.js | 8369 ++++++++++++++++++++++++++---------------------- 1 file changed, 4482 insertions(+), 3887 deletions(-) diff --git a/docs/bundle.js b/docs/bundle.js index 8b77ef657..284867dab 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -58,167 +58,167 @@ var _AlertBoxView2 = _interopRequireDefault(_AlertBoxView); - var _ButtonView = __webpack_require__(1187); + var _ButtonView = __webpack_require__(1191); var _ButtonView2 = _interopRequireDefault(_ButtonView); - var _ColorsView = __webpack_require__(1190); + var _ColorsView = __webpack_require__(1194); var _ColorsView2 = _interopRequireDefault(_ColorsView); - var _ConfirmationButtonView = __webpack_require__(1193); + var _ConfirmationButtonView = __webpack_require__(1197); var _ConfirmationButtonView2 = _interopRequireDefault(_ConfirmationButtonView); - var _CopyableInputView = __webpack_require__(1194); + var _CopyableInputView = __webpack_require__(1198); var _CopyableInputView2 = _interopRequireDefault(_CopyableInputView); - var _CountView = __webpack_require__(1197); + var _CountView = __webpack_require__(1201); var _CountView2 = _interopRequireDefault(_CountView); - var _DateInputView = __webpack_require__(1200); + var _DateInputView = __webpack_require__(1204); var _DateInputView2 = _interopRequireDefault(_DateInputView); - var _DatePickerView = __webpack_require__(1203); + var _DatePickerView = __webpack_require__(1207); var _DatePickerView2 = _interopRequireDefault(_DatePickerView); - var _DollarAmountView = __webpack_require__(1204); + var _DollarAmountView = __webpack_require__(1208); var _DollarAmountView2 = _interopRequireDefault(_DollarAmountView); - var _DropdownButtonView = __webpack_require__(1207); + var _DropdownButtonView = __webpack_require__(1211); var _DropdownButtonView2 = _interopRequireDefault(_DropdownButtonView); - var _FileInputView = __webpack_require__(1211); + var _FileInputView = __webpack_require__(1215); var _FileInputView2 = _interopRequireDefault(_FileInputView); - var _FlexBoxView = __webpack_require__(1212); + var _FlexBoxView = __webpack_require__(1216); var _FlexBoxView2 = _interopRequireDefault(_FlexBoxView); - var _GettingStartedView = __webpack_require__(1218); + var _GettingStartedView = __webpack_require__(1222); var _GettingStartedView2 = _interopRequireDefault(_GettingStartedView); - var _GoalsLogoView = __webpack_require__(1219); + var _GoalsLogoView = __webpack_require__(1223); var _GoalsLogoView2 = _interopRequireDefault(_GoalsLogoView); - var _GridView = __webpack_require__(1222); + var _GridView = __webpack_require__(1226); var _GridView2 = _interopRequireDefault(_GridView); - var _IconView = __webpack_require__(1225); + var _IconView = __webpack_require__(1229); var _IconView2 = _interopRequireDefault(_IconView); - var _InfoPanelView = __webpack_require__(1228); + var _InfoPanelView = __webpack_require__(1232); var _InfoPanelView2 = _interopRequireDefault(_InfoPanelView); - var _IntroView = __webpack_require__(1231); + var _IntroView = __webpack_require__(1235); var _IntroView2 = _interopRequireDefault(_IntroView); - var _LabelView = __webpack_require__(1232); + var _LabelView = __webpack_require__(1236); var _LabelView2 = _interopRequireDefault(_LabelView); - var _Layout = __webpack_require__(1238); + var _Layout = __webpack_require__(1242); var _Layout2 = _interopRequireDefault(_Layout); - var _LayoutCompoundForm = __webpack_require__(1253); + var _LayoutCompoundForm = __webpack_require__(1257); var _LayoutCompoundForm2 = _interopRequireDefault(_LayoutCompoundForm); - var _LeftNavView = __webpack_require__(1256); + var _LeftNavView = __webpack_require__(1260); var _LeftNavView2 = _interopRequireDefault(_LeftNavView); - var _LessStyleGuideView = __webpack_require__(1260); + var _LessStyleGuideView = __webpack_require__(1264); var _LessStyleGuideView2 = _interopRequireDefault(_LessStyleGuideView); - var _ListView = __webpack_require__(1261); + var _ListView = __webpack_require__(1265); var _ListView2 = _interopRequireDefault(_ListView); - var _ModalButtonView = __webpack_require__(1264); + var _ModalButtonView = __webpack_require__(1268); var _ModalButtonView2 = _interopRequireDefault(_ModalButtonView); - var _ModalView = __webpack_require__(1265); + var _ModalView = __webpack_require__(1269); var _ModalView2 = _interopRequireDefault(_ModalView); - var _NumberView = __webpack_require__(1266); + var _NumberView = __webpack_require__(1270); var _NumberView2 = _interopRequireDefault(_NumberView); - var _PageLayoutView = __webpack_require__(1269); + var _PageLayoutView = __webpack_require__(1273); var _PageLayoutView2 = _interopRequireDefault(_PageLayoutView); - var _ProgressBarView = __webpack_require__(1270); + var _ProgressBarView = __webpack_require__(1274); var _ProgressBarView2 = _interopRequireDefault(_ProgressBarView); - var _RichTextView = __webpack_require__(1273); + var _RichTextView = __webpack_require__(1277); var _RichTextView2 = _interopRequireDefault(_RichTextView); - var _SegmentedControlView = __webpack_require__(1274); + var _SegmentedControlView = __webpack_require__(1278); var _SegmentedControlView2 = _interopRequireDefault(_SegmentedControlView); - var _SelectView = __webpack_require__(1275); + var _SelectView = __webpack_require__(1279); var _SelectView2 = _interopRequireDefault(_SelectView); - var _SizingView = __webpack_require__(1278); + var _SizingView = __webpack_require__(1282); var _SizingView2 = _interopRequireDefault(_SizingView); - var _SpacingView = __webpack_require__(1281); + var _SpacingView = __webpack_require__(1285); var _SpacingView2 = _interopRequireDefault(_SpacingView); - var _TabBarView = __webpack_require__(1282); + var _TabBarView = __webpack_require__(1286); var _TabBarView2 = _interopRequireDefault(_TabBarView); - var _TableView = __webpack_require__(1288); + var _TableView = __webpack_require__(1292); var _TableView2 = _interopRequireDefault(_TableView); - var _TextAreaView = __webpack_require__(1291); + var _TextAreaView = __webpack_require__(1295); var _TextAreaView2 = _interopRequireDefault(_TextAreaView); - var _TextInputView = __webpack_require__(1292); + var _TextInputView = __webpack_require__(1296); var _TextInputView2 = _interopRequireDefault(_TextInputView); - var _TooltipView = __webpack_require__(1295); + var _TooltipView = __webpack_require__(1299); var _TooltipView2 = _interopRequireDefault(_TooltipView); - var _TypographyView = __webpack_require__(1298); + var _TypographyView = __webpack_require__(1302); var _TypographyView2 = _interopRequireDefault(_TypographyView); - var _UITextView = __webpack_require__(1299); + var _UITextView = __webpack_require__(1303); var _UITextView2 = _interopRequireDefault(_UITextView); - var _WizardView = __webpack_require__(1302); + var _WizardView = __webpack_require__(1306); var _WizardView2 = _interopRequireDefault(_WizardView); @@ -1086,11 +1086,9 @@ /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -1536,12 +1534,10 @@ /***/ (function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2014-2015, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2014-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -1609,11 +1605,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * */ @@ -2189,11 +2183,9 @@ /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -3026,11 +3018,9 @@ /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks static-only */ @@ -3111,11 +3101,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -6730,11 +6718,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -8830,11 +8816,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -8866,11 +8850,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -10633,11 +10615,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -10722,11 +10702,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -10854,11 +10832,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -12069,11 +12045,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -12464,11 +12438,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -12510,11 +12482,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -12629,11 +12599,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -12674,11 +12642,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -12709,11 +12675,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * * @typechecks static-only @@ -16280,11 +16244,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks * @@ -18075,11 +18037,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -18155,11 +18115,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -18850,11 +18808,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * */ @@ -18894,11 +18850,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -18923,11 +18877,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -18952,11 +18904,9 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * * @typechecks */ @@ -21966,12 +21916,10 @@ /***/ (function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ if (process.env.NODE_ENV !== 'production') { @@ -22003,12 +21951,10 @@ /***/ (function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -22016,6 +21962,7 @@ var emptyFunction = __webpack_require__(48); var invariant = __webpack_require__(44); var warning = __webpack_require__(47); + var assign = __webpack_require__(40); var ReactPropTypesSecret = __webpack_require__(213); var checkPropTypes = __webpack_require__(214); @@ -22114,7 +22061,8 @@ objectOf: createObjectOfTypeChecker, oneOf: createEnumTypeChecker, oneOfType: createUnionTypeChecker, - shape: createShapeTypeChecker + shape: createShapeTypeChecker, + exact: createStrictShapeTypeChecker, }; /** @@ -22329,7 +22277,7 @@ if (typeof checker !== 'function') { warning( false, - 'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' + + 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + 'received %s at index %s.', getPostfixForTypeWarning(checker), i @@ -22383,6 +22331,36 @@ return createChainableTypeChecker(validate); } + function createStrictShapeTypeChecker(shapeTypes) { + function validate(props, propName, componentName, location, propFullName) { + var propValue = props[propName]; + var propType = getPropType(propValue); + if (propType !== 'object') { + return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); + } + // We need to check all keys in case some are required but missing from + // props. + var allKeys = assign({}, props[propName], shapeTypes); + for (var key in allKeys) { + var checker = shapeTypes[key]; + if (!checker) { + return new PropTypeError( + 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + + '\nBad object: ' + JSON.stringify(props[propName], null, ' ') + + '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ') + ); + } + var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); + if (error) { + return error; + } + } + return null; + } + + return createChainableTypeChecker(validate); + } + function isNode(propValue) { switch (typeof propValue) { case 'number': @@ -22522,12 +22500,10 @@ /***/ (function(module, exports) { /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -22542,12 +22518,10 @@ /***/ (function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -22581,7 +22555,7 @@ try { // This is intentionally an invariant that gets caught. It's the same // behavior as without this statement except with a better message. - invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', componentName || 'React class', location, typeSpecName); + invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'the `prop-types` package, but received `%s`.', componentName || 'React class', location, typeSpecName, typeof typeSpecs[typeSpecName]); error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret); } catch (ex) { error = ex; @@ -22610,12 +22584,10 @@ /***/ (function(module, exports, __webpack_require__) { /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -22660,7 +22632,8 @@ objectOf: getShim, oneOf: getShim, oneOfType: getShim, - shape: getShim + shape: getShim, + exact: getShim }; ReactPropTypes.checkPropTypes = emptyFunction; @@ -23035,14 +23008,13 @@ // PRIVATE: For client-side rehydration of server match. matchContext: _propTypes.object - }; - /** - * A is a high-level API for automatically setting up - * a router that renders a with all the props - * it needs each time the URL changes. - */ - var Router = (0, _createReactClass2.default)({ + /** + * A is a high-level API for automatically setting up + * a router that renders a with all the props + * it needs each time the URL changes. + */ + };var Router = (0, _createReactClass2.default)({ displayName: 'Router', propTypes: propTypes, @@ -23166,12 +23138,10 @@ /***/ (function(module, exports, __webpack_require__) { /** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -23202,12 +23172,10 @@ /***/ (function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** - * Copyright 2013-present, Facebook, Inc. - * All rights reserved. + * Copyright (c) 2013-present, Facebook, Inc. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. * */ @@ -28373,11 +28341,11 @@ var _src = __webpack_require__(273); - var _Example = __webpack_require__(1168); + var _Example = __webpack_require__(1172); var _Example2 = _interopRequireDefault(_Example); - var _PropDocumentation = __webpack_require__(1184); + var _PropDocumentation = __webpack_require__(1188); var _PropDocumentation2 = _interopRequireDefault(_PropDocumentation); @@ -28554,7 +28522,7 @@ var _src = __webpack_require__(273); - __webpack_require__(1166); + __webpack_require__(1170); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -28816,7 +28784,7 @@ } }); - var _Table = __webpack_require__(345); + var _Table = __webpack_require__(347); Object.defineProperty(exports, "Table", { enumerable: true, @@ -28825,7 +28793,7 @@ } }); - var _Grid = __webpack_require__(365); + var _Grid = __webpack_require__(367); Object.defineProperty(exports, "Grid", { enumerable: true, @@ -28834,7 +28802,7 @@ } }); - var _Icon = __webpack_require__(371); + var _Icon = __webpack_require__(373); Object.defineProperty(exports, "Icon", { enumerable: true, @@ -28843,7 +28811,7 @@ } }); - var _LeftNav = __webpack_require__(442); + var _LeftNav = __webpack_require__(444); Object.defineProperty(exports, "LeftNav", { enumerable: true, @@ -28852,7 +28820,7 @@ } }); - var _Wizard = __webpack_require__(599); + var _Wizard = __webpack_require__(601); Object.defineProperty(exports, "Wizard", { enumerable: true, @@ -28861,7 +28829,7 @@ } }); - var _ProgressBar = __webpack_require__(612); + var _ProgressBar = __webpack_require__(614); Object.defineProperty(exports, "ProgressBar", { enumerable: true, @@ -28870,7 +28838,7 @@ } }); - var _TextArea = __webpack_require__(615); + var _TextArea = __webpack_require__(617); Object.defineProperty(exports, "TextArea", { enumerable: true, @@ -28879,7 +28847,7 @@ } }); - var _Label = __webpack_require__(623); + var _Label = __webpack_require__(625); Object.defineProperty(exports, "Label", { enumerable: true, @@ -28888,7 +28856,7 @@ } }); - var _FileInput = __webpack_require__(627); + var _FileInput = __webpack_require__(629); Object.defineProperty(exports, "FileInput", { enumerable: true, @@ -28897,7 +28865,7 @@ } }); - var _InfoPanel = __webpack_require__(631); + var _InfoPanel = __webpack_require__(633); Object.keys(_InfoPanel).forEach(function (key) { if (key === "default" || key === "__esModule") return; @@ -28909,49 +28877,49 @@ }); }); - __webpack_require__(645); + __webpack_require__(647); - var _AlertBox = __webpack_require__(984); + var _AlertBox = __webpack_require__(987); var _AlertBox2 = _interopRequireDefault(_AlertBox); - var _Count = __webpack_require__(988); + var _Count = __webpack_require__(991); var _Count2 = _interopRequireDefault(_Count); - var _DateInput = __webpack_require__(994); + var _DateInput = __webpack_require__(997); var _DateInput2 = _interopRequireDefault(_DateInput); - var _RichText = __webpack_require__(1128); + var _RichText = __webpack_require__(1132); var _RichText2 = _interopRequireDefault(_RichText); - var _DatePicker = __webpack_require__(1137); + var _DatePicker = __webpack_require__(1141); var _DatePicker2 = _interopRequireDefault(_DatePicker); - var _DollarAmount = __webpack_require__(1142); + var _DollarAmount = __webpack_require__(1146); var _DollarAmount2 = _interopRequireDefault(_DollarAmount); - var _DropdownButton = __webpack_require__(1144); + var _DropdownButton = __webpack_require__(1148); var _DropdownButton2 = _interopRequireDefault(_DropdownButton); - var _List = __webpack_require__(1155); + var _List = __webpack_require__(1159); var _List2 = _interopRequireDefault(_List); - var _Number = __webpack_require__(990); + var _Number = __webpack_require__(993); var _Number2 = _interopRequireDefault(_Number); - var _Tooltip = __webpack_require__(464); + var _Tooltip = __webpack_require__(466); var _Tooltip2 = _interopRequireDefault(_Tooltip); - var _GoalsLogo = __webpack_require__(1162); + var _GoalsLogo = __webpack_require__(1166); var _GoalsLogo2 = _interopRequireDefault(_GoalsLogo); @@ -47325,9 +47293,12 @@ function focusTrap(element, userOptions) { var tabbableNodes = []; + var firstTabbableNode = null; + var lastTabbableNode = null; var nodeFocusedBeforeActivation = null; var active = false; var paused = false; + var tabEvent = null; var container = (typeof element === 'string') ? document.querySelector(element) @@ -47505,6 +47476,10 @@ e.stopImmediatePropagation(); // Checking for a blur method here resolves a Firefox issue (#15) if (typeof e.target.blur === 'function') e.target.blur(); + + if (tabEvent) { + readjustFocus(tabEvent); + } } function checkKey(e) { @@ -47518,11 +47493,14 @@ } function handleTab(e) { - e.preventDefault(); updateTabbableNodes(); + + if (e.target.hasAttribute('tabindex') && Number(e.target.getAttribute('tabindex')) < 0) { + return tabEvent = e; + } + + e.preventDefault(); var currentFocusIndex = tabbableNodes.indexOf(e.target); - var lastTabbableNode = tabbableNodes[tabbableNodes.length - 1]; - var firstTabbableNode = tabbableNodes[0]; if (e.shiftKey) { if (e.target === firstTabbableNode || tabbableNodes.indexOf(e.target) === -1) { @@ -47538,6 +47516,14 @@ function updateTabbableNodes() { tabbableNodes = tabbable(container); + firstTabbableNode = tabbableNodes[0]; + lastTabbableNode = tabbableNodes[tabbableNodes.length - 1]; + } + + function readjustFocus(e) { + if (e.shiftKey) return tryFocus(lastTabbableNode); + + tryFocus(firstTabbableNode); } } @@ -47547,6 +47533,8 @@ function tryFocus(node) { if (!node || !node.focus) return; + if (node === document.activeElement) return; + node.focus(); if (node.tagName.toLowerCase() === 'input') { node.select(); @@ -47563,7 +47551,7 @@ module.exports = function(el, options) { options = options || {}; - var elementDocument = el.ownerDocument; + var elementDocument = el.ownerDocument || el; var basicTabbables = []; var orderedTabbables = []; @@ -47580,7 +47568,7 @@ '[tabindex]', ]; - var candidates = el.querySelectorAll(candidateSelectors); + var candidates = el.querySelectorAll(candidateSelectors.join(',')); if (options.includeContainer) { var matches = Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; @@ -49154,10 +49142,10 @@ var _classnames2 = _interopRequireDefault(_classnames); - __webpack_require__(341); - __webpack_require__(343); + __webpack_require__(345); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function isLabelHidden(placeholder, value) { @@ -49337,40 +49325,66 @@ Object.defineProperty(exports, "__esModule", { value: true }); - exports.Value = exports.Creatable = exports.AsyncCreatable = exports.Async = undefined; + exports.defaultFilterOptions = exports.defaultClearRenderer = exports.defaultArrowRenderer = exports.defaultMenuRenderer = exports.Option = exports.Value = exports.Creatable = exports.AsyncCreatable = exports.Async = undefined; var _Select = __webpack_require__(329); var _Select2 = _interopRequireDefault(_Select); - var _Async = __webpack_require__(338); + var _Async = __webpack_require__(340); var _Async2 = _interopRequireDefault(_Async); - var _AsyncCreatable = __webpack_require__(339); + var _AsyncCreatable = __webpack_require__(341); var _AsyncCreatable2 = _interopRequireDefault(_AsyncCreatable); - var _Creatable = __webpack_require__(340); + var _Creatable = __webpack_require__(342); var _Creatable2 = _interopRequireDefault(_Creatable); - var _Value = __webpack_require__(337); + var _Value = __webpack_require__(339); var _Value2 = _interopRequireDefault(_Value); + var _Option = __webpack_require__(337); + + var _Option2 = _interopRequireDefault(_Option); + + var _defaultMenuRenderer = __webpack_require__(336); + + var _defaultMenuRenderer2 = _interopRequireDefault(_defaultMenuRenderer); + + var _defaultArrowRenderer = __webpack_require__(331); + + var _defaultArrowRenderer2 = _interopRequireDefault(_defaultArrowRenderer); + + var _defaultClearRenderer = __webpack_require__(332); + + var _defaultClearRenderer2 = _interopRequireDefault(_defaultClearRenderer); + + var _defaultFilterOptions = __webpack_require__(333); + + var _defaultFilterOptions2 = _interopRequireDefault(_defaultFilterOptions); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } _Select2.default.Async = _Async2.default; _Select2.default.AsyncCreatable = _AsyncCreatable2.default; _Select2.default.Creatable = _Creatable2.default; _Select2.default.Value = _Value2.default; + _Select2.default.Option = _Option2.default; exports.default = _Select2.default; exports.Async = _Async2.default; exports.AsyncCreatable = _AsyncCreatable2.default; exports.Creatable = _Creatable2.default; exports.Value = _Value2.default; + exports.Option = _Option2.default; + exports.defaultMenuRenderer = _defaultMenuRenderer2.default; + exports.defaultArrowRenderer = _defaultArrowRenderer2.default; + exports.defaultClearRenderer = _defaultClearRenderer2.default; + exports.defaultFilterOptions = _defaultFilterOptions2.default; /***/ }), /* 329 */ @@ -49384,21 +49398,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; - var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - var _react = __webpack_require__(37); - - var _react2 = _interopRequireDefault(_react); - - var _propTypes = __webpack_require__(211); - - var _propTypes2 = _interopRequireDefault(_propTypes); - - var _reactDom = __webpack_require__(70); + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/react-select + */ - var _reactDom2 = _interopRequireDefault(_reactDom); var _reactInputAutosize = __webpack_require__(330); @@ -49408,27 +49415,37 @@ var _classnames2 = _interopRequireDefault(_classnames); + var _propTypes = __webpack_require__(211); + + var _propTypes2 = _interopRequireDefault(_propTypes); + + var _react = __webpack_require__(37); + + var _react2 = _interopRequireDefault(_react); + + var _reactDom = __webpack_require__(70); + var _defaultArrowRenderer = __webpack_require__(331); var _defaultArrowRenderer2 = _interopRequireDefault(_defaultArrowRenderer); - var _defaultFilterOptions = __webpack_require__(332); + var _defaultClearRenderer = __webpack_require__(332); - var _defaultFilterOptions2 = _interopRequireDefault(_defaultFilterOptions); + var _defaultClearRenderer2 = _interopRequireDefault(_defaultClearRenderer); - var _defaultMenuRenderer = __webpack_require__(334); + var _defaultFilterOptions = __webpack_require__(333); - var _defaultMenuRenderer2 = _interopRequireDefault(_defaultMenuRenderer); + var _defaultFilterOptions2 = _interopRequireDefault(_defaultFilterOptions); - var _defaultClearRenderer = __webpack_require__(335); + var _defaultMenuRenderer = __webpack_require__(336); - var _defaultClearRenderer2 = _interopRequireDefault(_defaultClearRenderer); + var _defaultMenuRenderer2 = _interopRequireDefault(_defaultMenuRenderer); - var _Option = __webpack_require__(336); + var _Option = __webpack_require__(337); var _Option2 = _interopRequireDefault(_Option); - var _Value = __webpack_require__(337); + var _Value = __webpack_require__(339); var _Value2 = _interopRequireDefault(_Value); @@ -49442,21 +49459,65 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*! - Copyright (c) 2017 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/react-select - */ - + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var stringifyValue = function stringifyValue(value) { return typeof value === 'string' ? value : value !== null && JSON.stringify(value) || ''; }; var stringOrNode = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]); + var stringOrNumber = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]); var instanceId = 1; + var shouldShowValue = function shouldShowValue(state, props) { + var inputValue = state.inputValue, + isPseudoFocused = state.isPseudoFocused, + isFocused = state.isFocused; + var onSelectResetsInput = props.onSelectResetsInput; + + + if (!inputValue) return true; + + if (!onSelectResetsInput) { + return !(!isFocused && isPseudoFocused || isFocused && !isPseudoFocused); + } + + return false; + }; + + var shouldShowPlaceholder = function shouldShowPlaceholder(state, props, isOpen) { + var inputValue = state.inputValue, + isPseudoFocused = state.isPseudoFocused, + isFocused = state.isFocused; + var onSelectResetsInput = props.onSelectResetsInput; + + + return !inputValue || !onSelectResetsInput && !isOpen && !isPseudoFocused && !isFocused; + }; + + /** + * Retrieve a value from the given options and valueKey + * @param {String|Number|Array} value - the selected value(s) + * @param {Object} props - the Select component's props (or nextProps) + */ + var expandValue = function expandValue(value, props) { + var valueType = typeof value === 'undefined' ? 'undefined' : _typeof(value); + if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value; + var options = props.options, + valueKey = props.valueKey; + + if (!options) return; + for (var i = 0; i < options.length; i++) { + if (String(options[i][valueKey]) === String(value)) return options[i]; + } + }; + + var handleRequired = function handleRequired(value, multi) { + if (!value) return true; + return multi ? value.length === 0 : Object.keys(value).length === 0; + }; + var Select = function (_React$Component) { _inherits(Select, _React$Component); @@ -49465,7 +49526,7 @@ var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props)); - ['clearValue', 'focusOption', 'handleInputBlur', 'handleInputChange', 'handleInputFocus', 'handleInputValueChange', 'handleKeyDown', 'handleMenuScroll', 'handleMouseDown', 'handleMouseDownOnArrow', 'handleMouseDownOnMenu', 'handleRequired', 'handleTouchOutside', 'handleTouchMove', 'handleTouchStart', 'handleTouchEnd', 'handleTouchEndClearValue', 'handleValueClick', 'getOptionLabel', 'onOptionRef', 'removeValue', 'selectValue'].forEach(function (fn) { + ['clearValue', 'focusOption', 'getOptionLabel', 'handleInputBlur', 'handleInputChange', 'handleInputFocus', 'handleInputValueChange', 'handleKeyDown', 'handleMenuScroll', 'handleMouseDown', 'handleMouseDownOnArrow', 'handleMouseDownOnMenu', 'handleTouchEnd', 'handleTouchEndClearValue', 'handleTouchMove', 'handleTouchOutside', 'handleTouchStart', 'handleValueClick', 'onOptionRef', 'removeValue', 'selectValue'].forEach(function (fn) { return _this[fn] = _this[fn].bind(_this); }); @@ -49487,14 +49548,17 @@ if (this.props.required) { this.setState({ - required: this.handleRequired(valueArray[0], this.props.multi) + required: handleRequired(valueArray[0], this.props.multi) }); } } }, { key: 'componentDidMount', value: function componentDidMount() { - if (this.props.autofocus) { + if (typeof this.props.autofocus !== 'undefined' && typeof console !== 'undefined') { + console.warn('Warning: The autofocus prop has changed to autoFocus, support will be removed after react-select@1.0'); + } + if (this.props.autoFocus || this.props.autofocus) { this.focus(); } } @@ -49505,20 +49569,15 @@ if (nextProps.required) { this.setState({ - required: this.handleRequired(valueArray[0], nextProps.multi) + required: handleRequired(valueArray[0], nextProps.multi) }); } else if (this.props.required) { // Used to be required but it's not any more this.setState({ required: false }); } - } - }, { - key: 'componentWillUpdate', - value: function componentWillUpdate(nextProps, nextState) { - if (nextState.isOpen !== this.state.isOpen) { - this.toggleTouchOutsideEvent(nextState.isOpen); - var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose; - handler && handler(); + + if (this.state.inputValue && this.props.value !== nextProps.value && nextProps.onSelectResetsInput) { + this.setState({ inputValue: this.handleInputValueChange('') }); } } }, { @@ -49526,9 +49585,21 @@ value: function componentDidUpdate(prevProps, prevState) { // focus to the selected option if (this.menu && this.focused && this.state.isOpen && !this.hasScrolledToOption) { - var focusedOptionNode = _reactDom2.default.findDOMNode(this.focused); - var menuNode = _reactDom2.default.findDOMNode(this.menu); - menuNode.scrollTop = focusedOptionNode.offsetTop; + var focusedOptionNode = (0, _reactDom.findDOMNode)(this.focused); + var menuNode = (0, _reactDom.findDOMNode)(this.menu); + + var scrollTop = menuNode.scrollTop; + var scrollBottom = scrollTop + menuNode.offsetHeight; + var optionTop = focusedOptionNode.offsetTop; + var optionBottom = optionTop + focusedOptionNode.offsetHeight; + + if (scrollTop > optionTop || scrollBottom < optionBottom) { + menuNode.scrollTop = focusedOptionNode.offsetTop; + } + + // We still set hasScrolledToOption to true even if we didn't + // actually need to scroll, as we've still confirmed that the + // option is in view. this.hasScrolledToOption = true; } else if (!this.state.isOpen) { this.hasScrolledToOption = false; @@ -49536,8 +49607,8 @@ if (this._scrollToFocusedOptionOnUpdate && this.focused && this.menu) { this._scrollToFocusedOptionOnUpdate = false; - var focusedDOM = _reactDom2.default.findDOMNode(this.focused); - var menuDOM = _reactDom2.default.findDOMNode(this.menu); + var focusedDOM = (0, _reactDom.findDOMNode)(this.focused); + var menuDOM = (0, _reactDom.findDOMNode)(this.menu); var focusedRect = focusedDOM.getBoundingClientRect(); var menuRect = menuDOM.getBoundingClientRect(); if (focusedRect.bottom > menuRect.bottom) { @@ -49556,15 +49627,16 @@ this.setState({ isFocused: false }); // eslint-disable-line react/no-did-update-set-state this.closeMenu(); } + if (prevState.isOpen !== this.state.isOpen) { + this.toggleTouchOutsideEvent(this.state.isOpen); + var handler = this.state.isOpen ? this.props.onOpen : this.props.onClose; + handler && handler(); + } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { - if (!document.removeEventListener && document.detachEvent) { - document.detachEvent('ontouchstart', this.handleTouchOutside); - } else { - document.removeEventListener('touchstart', this.handleTouchOutside); - } + this.toggleTouchOutsideEvent(false); } }, { key: 'toggleTouchOutsideEvent', @@ -49605,13 +49677,13 @@ } }, { key: 'handleTouchMove', - value: function handleTouchMove(event) { + value: function handleTouchMove() { // Set a flag that the view is being dragged this.dragging = true; } }, { key: 'handleTouchStart', - value: function handleTouchStart(event) { + value: function handleTouchStart() { // Set a flag that the view is not being dragged this.dragging = false; } @@ -49645,16 +49717,25 @@ } if (event.target.tagName === 'INPUT') { + if (!this.state.isFocused) { + this._openAfterFocus = this.props.openOnClick; + this.focus(); + } else if (!this.state.isOpen) { + this.setState({ + isOpen: true, + isPseudoFocused: false + }); + } + return; } // prevent default event handlers - event.stopPropagation(); event.preventDefault(); // for the non-searchable select, toggle the menu if (!this.props.searchable) { - // TODO: This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open. + // This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open. this.focus(); return this.setState({ isOpen: !this.state.isOpen @@ -49668,6 +49749,8 @@ this.focus(); var input = this.input; + var toOpen = true; + if (typeof input.getInput === 'function') { // Get the actual DOM input if the ref is an component input = input.getInput(); @@ -49676,15 +49759,22 @@ // clears the value so that the cursor will be at the end of input when the component re-renders input.value = ''; + if (this._focusAfterClear) { + toOpen = false; + this._focusAfterClear = false; + } + // if the input is focused, ensure the menu is open this.setState({ - isOpen: true, - isPseudoFocused: false + isOpen: toOpen, + isPseudoFocused: false, + focusedOption: null }); } else { // otherwise, focus the input and open the menu this._openAfterFocus = this.props.openOnClick; this.focus(); + this.setState({ focusedOption: null }); } } }, { @@ -49695,15 +49785,19 @@ if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) { return; } - // If the menu isn't open, let the event bubble to the main handleMouseDown - if (!this.state.isOpen) { - return; + + if (this.state.isOpen) { + // prevent default event handlers + event.stopPropagation(); + event.preventDefault(); + // close the menu + this.closeMenu(); + } else { + // If the menu isn't open, let the event bubble to the main handleMouseDown + this.setState({ + isOpen: true + }); } - // prevent default event handlers - event.stopPropagation(); - event.preventDefault(); - // close the menu - this.closeMenu(); } }, { key: 'handleMouseDownOnMenu', @@ -49713,6 +49807,7 @@ if (this.props.disabled || event.type === 'mousedown' && event.button !== 0) { return; } + event.stopPropagation(); event.preventDefault(); @@ -49724,9 +49819,9 @@ value: function closeMenu() { if (this.props.onCloseResetsInput) { this.setState({ + inputValue: this.handleInputValueChange(''), isOpen: false, - isPseudoFocused: this.state.isFocused && !this.props.multi, - inputValue: this.handleInputValueChange('') + isPseudoFocused: this.state.isFocused && !this.props.multi }); } else { this.setState({ @@ -49740,14 +49835,20 @@ key: 'handleInputFocus', value: function handleInputFocus(event) { if (this.props.disabled) return; - var isOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus; + + var toOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus; + toOpen = this._focusAfterClear ? false : toOpen; //if focus happens after clear values, don't open dropdown yet. + if (this.props.onFocus) { this.props.onFocus(event); } + this.setState({ isFocused: true, - isOpen: isOpen + isOpen: !!toOpen }); + + this._focusAfterClear = false; this._openAfterFocus = false; } }, { @@ -49782,9 +49883,22 @@ } this.setState({ + inputValue: newInputValue, isOpen: true, - isPseudoFocused: false, - inputValue: newInputValue + isPseudoFocused: false + }); + } + }, { + key: 'setInputValue', + value: function setInputValue(newValue) { + if (this.props.onInputChange) { + var nextState = this.props.onInputChange(newValue); + if (nextState != null && (typeof nextState === 'undefined' ? 'undefined' : _typeof(nextState)) !== 'object') { + newValue = '' + nextState; + } + } + this.setState({ + inputValue: newValue }); } }, { @@ -49818,22 +49932,28 @@ event.preventDefault(); this.popValue(); } - return; + break; case 9: // tab if (event.shiftKey || !this.state.isOpen || !this.props.tabSelectsValue) { - return; + break; } + event.preventDefault(); this.selectFocusedOption(); - return; + break; case 13: // enter - if (!this.state.isOpen) return; + event.preventDefault(); event.stopPropagation(); - this.selectFocusedOption(); + if (this.state.isOpen) { + this.selectFocusedOption(); + } else { + this.focusNextOption(); + } break; case 27: // escape + event.preventDefault(); if (this.state.isOpen) { this.closeMenu(); event.stopPropagation(); @@ -49842,47 +49962,63 @@ event.stopPropagation(); } break; + case 32: + // space + if (this.props.searchable) { + break; + } + event.preventDefault(); + if (!this.state.isOpen) { + this.focusNextOption(); + break; + } + event.stopPropagation(); + this.selectFocusedOption(); + break; case 38: // up + event.preventDefault(); this.focusPreviousOption(); break; case 40: // down + event.preventDefault(); this.focusNextOption(); break; case 33: // page up + event.preventDefault(); this.focusPageUpOption(); break; case 34: // page down + event.preventDefault(); this.focusPageDownOption(); break; case 35: // end key if (event.shiftKey) { - return; + break; } + event.preventDefault(); this.focusEndOption(); break; case 36: // home key if (event.shiftKey) { - return; + break; } + event.preventDefault(); this.focusStartOption(); break; case 46: - // backspace + // delete if (!this.state.inputValue && this.props.deleteRemoves) { event.preventDefault(); this.popValue(); } - return; - default: - return; + break; } - event.preventDefault(); } }, { key: 'handleValueClick', @@ -49900,12 +50036,6 @@ this.props.onMenuScrollToBottom(); } } - }, { - key: 'handleRequired', - value: function handleRequired(value, multi) { - if (!value) return true; - return multi ? value.length === 0 : Object.keys(value).length === 0; - } }, { key: 'getOptionLabel', value: function getOptionLabel(op) { @@ -49914,100 +50044,89 @@ /** * Turns a value into an array from the given options - * @param {String|Number|Array} value - the value of the select input - * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration + * @param {String|Number|Array} value - the value of the select input + * @param {Object} nextProps - optionally specify the nextProps so the returned array uses the latest configuration * @returns {Array} the value of the select represented in an array */ }, { key: 'getValueArray', - value: function getValueArray(value, nextProps) { - var _this2 = this; + value: function getValueArray(value) { + var nextProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined; /** support optionally passing in the `nextProps` so `componentWillReceiveProps` updates will function as expected */ var props = (typeof nextProps === 'undefined' ? 'undefined' : _typeof(nextProps)) === 'object' ? nextProps : this.props; if (props.multi) { - if (typeof value === 'string') value = value.split(props.delimiter); + if (typeof value === 'string') { + value = value.split(props.delimiter); + } if (!Array.isArray(value)) { if (value === null || value === undefined) return []; value = [value]; } return value.map(function (value) { - return _this2.expandValue(value, props); + return expandValue(value, props); }).filter(function (i) { return i; }); } - var expandedValue = this.expandValue(value, props); + var expandedValue = expandValue(value, props); return expandedValue ? [expandedValue] : []; } - - /** - * Retrieve a value from the given options and valueKey - * @param {String|Number|Array} value - the selected value(s) - * @param {Object} props - the Select component's props (or nextProps) - */ - - }, { - key: 'expandValue', - value: function expandValue(value, props) { - var valueType = typeof value === 'undefined' ? 'undefined' : _typeof(value); - if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value; - var options = props.options, - valueKey = props.valueKey; - - if (!options) return; - for (var i = 0; i < options.length; i++) { - if (options[i][valueKey] === value) return options[i]; - } - } }, { key: 'setValue', value: function setValue(value) { - var _this3 = this; + var _this2 = this; if (this.props.autoBlur) { this.blurInput(); } if (this.props.required) { - var required = this.handleRequired(value, this.props.multi); + var required = handleRequired(value, this.props.multi); this.setState({ required: required }); } + if (this.props.simpleValue && value) { + value = this.props.multi ? value.map(function (i) { + return i[_this2.props.valueKey]; + }).join(this.props.delimiter) : value[this.props.valueKey]; + } if (this.props.onChange) { - if (this.props.simpleValue && value) { - value = this.props.multi ? value.map(function (i) { - return i[_this3.props.valueKey]; - }).join(this.props.delimiter) : value[this.props.valueKey]; - } this.props.onChange(value); } } }, { key: 'selectValue', value: function selectValue(value) { - var _this4 = this; + var _this3 = this; // NOTE: we actually add/set the value in a callback to make sure the // input value is empty to avoid styling issues in Chrome if (this.props.closeOnSelect) { this.hasScrolledToOption = false; } + var updatedValue = this.props.onSelectResetsInput ? '' : this.state.inputValue; if (this.props.multi) { - var updatedValue = this.props.onSelectResetsInput ? '' : this.state.inputValue; this.setState({ focusedIndex: null, inputValue: this.handleInputValueChange(updatedValue), isOpen: !this.props.closeOnSelect }, function () { - _this4.addValue(value); + var valueArray = _this3.getValueArray(_this3.props.value); + if (valueArray.some(function (i) { + return i[_this3.props.valueKey] === value[_this3.props.valueKey]; + })) { + _this3.removeValue(value); + } else { + _this3.addValue(value); + } }); } else { this.setState({ - inputValue: this.handleInputValueChange(''), + inputValue: this.handleInputValueChange(updatedValue), isOpen: !this.props.closeOnSelect, isPseudoFocused: this.state.isFocused }, function () { - _this4.setValue(value); + _this3.setValue(value); }); } } @@ -50039,9 +50158,11 @@ }, { key: 'removeValue', value: function removeValue(value) { + var _this4 = this; + var valueArray = this.getValueArray(this.props.value); this.setValue(valueArray.filter(function (i) { - return i !== value; + return i[_this4.props.valueKey] !== value[_this4.props.valueKey]; })); this.focus(); } @@ -50053,13 +50174,16 @@ if (event && event.type === 'mousedown' && event.button !== 0) { return; } - event.stopPropagation(); + event.preventDefault(); + this.setValue(this.getResetValue()); this.setState({ - isOpen: false, - inputValue: this.handleInputValueChange('') + inputValue: this.handleInputValueChange(''), + isOpen: false }, this.focus); + + this._focusAfterClear = true; } }, { key: 'getResetValue', @@ -50119,11 +50243,14 @@ }); this._scrollToFocusedOptionOnUpdate = true; if (!this.state.isOpen) { - this.setState({ - isOpen: true, - inputValue: '', - focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null) - }); + var newState = { + focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null), + isOpen: true + }; + if (this.props.onSelectResetsInput) { + newState.inputValue = ''; + } + this.setState(newState); return; } if (!options.length) return; @@ -50154,11 +50281,11 @@ focusedIndex = potentialIndex; } } else if (dir === 'page_down') { - var potentialIndex = focusedIndex + this.props.pageSize; - if (potentialIndex > options.length - 1) { + var _potentialIndex = focusedIndex + this.props.pageSize; + if (_potentialIndex > options.length - 1) { focusedIndex = options.length - 1; } else { - focusedIndex = potentialIndex; + focusedIndex = _potentialIndex; } } @@ -50176,11 +50303,6 @@ value: function getFocusedOption() { return this._focusedOption; } - }, { - key: 'getInputValue', - value: function getInputValue() { - return this.state.inputValue; - } }, { key: 'selectFocusedOption', value: function selectFocusedOption() { @@ -50206,7 +50328,8 @@ var renderLabel = this.props.valueRenderer || this.getOptionLabel; var ValueComponent = this.props.valueComponent; if (!valueArray.length) { - return !this.state.inputValue ? _react2.default.createElement( + var showPlaceholder = shouldShowPlaceholder(this.state, this.props, isOpen); + return showPlaceholder ? _react2.default.createElement( 'div', { className: 'Select-placeholder' }, this.props.placeholder @@ -50218,12 +50341,13 @@ return _react2.default.createElement( ValueComponent, { + disabled: _this5.props.disabled || value.clearableValue === false, id: _this5._instancePrefix + '-value-' + i, instancePrefix: _this5._instancePrefix, - disabled: _this5.props.disabled || value.clearableValue === false, key: 'value-' + i + '-' + value[_this5.props.valueKey], onClick: onClick, onRemove: _this5.removeValue, + placeholder: _this5.props.placeholder, value: value }, renderLabel(value, i), @@ -50234,15 +50358,16 @@ ) ); }); - } else if (!this.state.inputValue) { + } else if (shouldShowValue(this.state, this.props)) { if (isOpen) onClick = null; return _react2.default.createElement( ValueComponent, { - id: this._instancePrefix + '-value-item', disabled: this.props.disabled, + id: this._instancePrefix + '-value-item', instancePrefix: this._instancePrefix, onClick: onClick, + placeholder: this.props.placeholder, value: valueArray[0] }, renderLabel(valueArray[0]) @@ -50256,29 +50381,35 @@ _this6 = this; var className = (0, _classnames2.default)('Select-input', this.props.inputProps.className); - var isOpen = !!this.state.isOpen; + var isOpen = this.state.isOpen; var ariaOwns = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, this._instancePrefix + '-list', isOpen), _defineProperty(_classNames, this._instancePrefix + '-backspace-remove-message', this.props.multi && !this.props.disabled && this.state.isFocused && !this.state.inputValue), _classNames)); + var value = this.state.inputValue; + if (value && !this.props.onSelectResetsInput && !this.state.isFocused) { + // it hides input value when it is not focused and was not reset on select + value = ''; + } + var inputProps = _extends({}, this.props.inputProps, { - role: 'combobox', - 'aria-expanded': '' + isOpen, - 'aria-owns': ariaOwns, - 'aria-haspopup': '' + isOpen, 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value', 'aria-describedby': this.props['aria-describedby'], - 'aria-labelledby': this.props['aria-labelledby'], + 'aria-expanded': '' + isOpen, + 'aria-haspopup': '' + isOpen, 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'], + 'aria-owns': ariaOwns, className: className, - tabIndex: this.props.tabIndex, onBlur: this.handleInputBlur, onChange: this.handleInputChange, onFocus: this.handleInputFocus, ref: function ref(_ref) { return _this6.input = _ref; }, + role: 'combobox', required: this.state.required, - value: this.state.inputValue + tabIndex: this.props.tabIndex, + value: value }); if (this.props.inputRenderer) { @@ -50286,51 +50417,55 @@ } if (this.props.disabled || !this.props.searchable) { - var _props$inputProps = this.props.inputProps, - inputClassName = _props$inputProps.inputClassName, - divProps = _objectWithoutProperties(_props$inputProps, ['inputClassName']); + var divProps = _objectWithoutProperties(this.props.inputProps, []); var _ariaOwns = (0, _classnames2.default)(_defineProperty({}, this._instancePrefix + '-list', isOpen)); - return _react2.default.createElement('div', _extends({}, divProps, { - role: 'combobox', 'aria-expanded': isOpen, 'aria-owns': _ariaOwns, 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value', + 'aria-disabled': '' + this.props.disabled, + 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'], className: className, - tabIndex: this.props.tabIndex || 0, onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, ref: function ref(_ref2) { return _this6.input = _ref2; }, - 'aria-readonly': '' + !!this.props.disabled, - style: { border: 0, width: 1, display: 'inline-block' } })); + role: 'combobox', + style: { border: 0, width: 1, display: 'inline-block' }, + tabIndex: this.props.tabIndex || 0 + })); } if (this.props.autosize) { - return _react2.default.createElement(_reactInputAutosize2.default, _extends({}, inputProps, { minWidth: '5' })); + return _react2.default.createElement(_reactInputAutosize2.default, _extends({ id: this.props.id }, inputProps, { minWidth: '5' })); } return _react2.default.createElement( 'div', - { className: className }, - _react2.default.createElement('input', inputProps) + { className: className, key: 'input-wrap', style: { display: 'inline-block' } }, + _react2.default.createElement('input', _extends({ id: this.props.id }, inputProps)) ); } }, { key: 'renderClear', value: function renderClear() { - if (!this.props.clearable || this.props.value === undefined || this.props.value === null || this.props.multi && !this.props.value.length || this.props.disabled || this.props.isLoading) return; + var valueArray = this.getValueArray(this.props.value); + if (!this.props.clearable || !valueArray.length || this.props.disabled || this.props.isLoading) return; + var ariaLabel = this.props.multi ? this.props.clearAllText : this.props.clearValueText; var clear = this.props.clearRenderer(); return _react2.default.createElement( 'span', - { className: 'Select-clear-zone', title: this.props.multi ? this.props.clearAllText : this.props.clearValueText, - 'aria-label': this.props.multi ? this.props.clearAllText : this.props.clearValueText, + { + 'aria-label': ariaLabel, + className: 'Select-clear-zone', onMouseDown: this.clearValue, - onTouchStart: this.handleTouchStart, + onTouchEnd: this.handleTouchEndClearValue, onTouchMove: this.handleTouchMove, - onTouchEnd: this.handleTouchEndClearValue + onTouchStart: this.handleTouchStart, + title: ariaLabel }, clear ); @@ -50338,10 +50473,16 @@ }, { key: 'renderArrow', value: function renderArrow() { + if (!this.props.arrowRenderer) return; + var onMouseDown = this.handleMouseDownOnArrow; var isOpen = this.state.isOpen; var arrow = this.props.arrowRenderer({ onMouseDown: onMouseDown, isOpen: isOpen }); + if (!arrow) { + return null; + } + return _react2.default.createElement( 'span', { @@ -50367,6 +50508,7 @@ labelKey: this.props.labelKey, matchPos: this.props.matchPos, matchProp: this.props.matchProp, + trimFilter: this.props.trimFilter, valueKey: this.props.valueKey }); } else { @@ -50387,18 +50529,20 @@ return this.props.menuRenderer({ focusedOption: focusedOption, focusOption: this.focusOption, + inputValue: this.state.inputValue, instancePrefix: this._instancePrefix, labelKey: this.props.labelKey, onFocus: this.focusOption, + onOptionRef: this.onOptionRef, onSelect: this.selectValue, optionClassName: this.props.optionClassName, optionComponent: this.props.optionComponent, optionRenderer: this.props.optionRenderer || this.getOptionLabel, options: options, + removeValue: this.removeValue, selectValue: this.selectValue, valueArray: valueArray, - valueKey: this.props.valueKey, - onOptionRef: this.onOptionRef + valueKey: this.props.valueKey }); } else if (this.props.noResultsText) { return _react2.default.createElement( @@ -50421,21 +50565,24 @@ return stringifyValue(i[_this7.props.valueKey]); }).join(this.props.delimiter); return _react2.default.createElement('input', { - type: 'hidden', + disabled: this.props.disabled, + name: this.props.name, ref: function ref(_ref3) { return _this7.value = _ref3; }, - name: this.props.name, - value: value, - disabled: this.props.disabled }); + type: 'hidden', + value: value + }); } return valueArray.map(function (item, index) { - return _react2.default.createElement('input', { key: 'hidden.' + index, - type: 'hidden', - ref: 'value' + index, + return _react2.default.createElement('input', { + disabled: _this7.props.disabled, + key: 'hidden.' + index, name: _this7.props.name, - value: stringifyValue(item[_this7.props.valueKey]), - disabled: _this7.props.disabled }); + ref: 'value' + index, + type: 'hidden', + value: stringifyValue(item[_this7.props.valueKey]) + }); }); } }, { @@ -50482,12 +50629,18 @@ }, className: 'Select-menu-outer', style: this.props.menuContainerStyle }, _react2.default.createElement( 'div', - { ref: function ref(_ref4) { + { + className: 'Select-menu', + id: this._instancePrefix + '-list', + onMouseDown: this.handleMouseDownOnMenu, + onScroll: this.handleMenuScroll, + ref: function ref(_ref4) { return _this8.menu = _ref4; - }, role: 'listbox', tabIndex: -1, className: 'Select-menu', id: this._instancePrefix + '-list', + }, + role: 'listbox', style: this.props.menuStyle, - onScroll: this.handleMenuScroll, - onMouseDown: this.handleMouseDownOnMenu }, + tabIndex: -1 + }, menu ) ); @@ -50498,7 +50651,7 @@ var _this9 = this; var valueArray = this.getValueArray(this.props.value); - var options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null); + var options = this._visibleOptions = this.filterOptions(this.props.multi && this.props.removeSelected ? valueArray : null); var isOpen = this.state.isOpen; if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false; var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]); @@ -50510,8 +50663,7 @@ focusedOption = this._focusedOption = null; } var className = (0, _classnames2.default)('Select', this.props.className, { - 'Select--multi': this.props.multi, - 'Select--single': !this.props.multi, + 'has-value': valueArray.length, 'is-clearable': this.props.clearable, 'is-disabled': this.props.disabled, 'is-focused': this.state.isFocused, @@ -50519,7 +50671,9 @@ 'is-open': isOpen, 'is-pseudo-focused': this.state.isPseudoFocused, 'is-searchable': this.props.searchable, - 'has-value': valueArray.length + 'Select--multi': this.props.multi, + 'Select--rtl': this.props.rtl, + 'Select--single': !this.props.multi }); var removeMessage = null; @@ -50545,12 +50699,12 @@ return _this9.control = _ref6; }, className: 'Select-control', - style: this.props.style, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onTouchEnd: this.handleTouchEnd, + onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, - onTouchMove: this.handleTouchMove + style: this.props.style }, _react2.default.createElement( 'span', @@ -50563,7 +50717,7 @@ this.renderClear(), this.renderArrow() ), - isOpen ? this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption) : null + isOpen ? this.renderOuter(options, valueArray, focusedOption) : null ); } }]); @@ -50571,31 +50725,30 @@ return Select; }(_react2.default.Component); - ; - Select.propTypes = { - '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) - addLabelText: _propTypes2.default.string, // placeholder displayed when you want to add a label on a multi-value input - arrowRenderer: _propTypes2.default.func, // Create drop-down caret element + '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 the 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 + autoFocus: _propTypes2.default.bool, // autofocus the component on mount + autofocus: _propTypes2.default.bool, // deprecated; use autoFocus instead 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 + 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: _propTypes2.default.func, // create clearable x element clearValueText: stringOrNode, // title for the "clear" control clearable: _propTypes2.default.bool, // should it be possible to reset value closeOnSelect: _propTypes2.default.bool, // whether to close the menu when a value is selected - deleteRemoves: _propTypes2.default.bool, // whether backspace removes an item if there is no text input + deleteRemoves: _propTypes2.default.bool, // whether delete 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]) + id: _propTypes2.default.string, // html id to set on the input element for accessibility or tests 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 @@ -50633,14 +50786,17 @@ options: _propTypes2.default.array, // array of options pageSize: _propTypes2.default.number, // number of entries to page when using page up/down keys placeholder: stringOrNode, // field placeholder, displayed when there's no value + removeSelected: _propTypes2.default.bool, // whether the selected option is removed from the dropdown on multi selects required: _propTypes2.default.bool, // applies HTML5 required attribute when needed resetValue: _propTypes2.default.any, // value to use when you clear the control + rtl: _propTypes2.default.bool, // set to true in order to use react-select in right-to-left direction scrollMenuIntoView: _propTypes2.default.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged searchable: _propTypes2.default.bool, // whether to enable searching feature or not simpleValue: _propTypes2.default.bool, // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false style: _propTypes2.default.object, // optional style to apply to the control - tabIndex: _propTypes2.default.string, // optional tab index of the control + tabIndex: stringOrNumber, // optional tab index of the control tabSelectsValue: _propTypes2.default.bool, // whether to treat tabbing out while focused to be value selection + trimFilter: _propTypes2.default.bool, // whether to trim whitespace around filter value value: _propTypes2.default.any, // initial field value valueComponent: _propTypes2.default.func, // value component to render valueKey: _propTypes2.default.string, // path of the label value in option objects @@ -50649,7 +50805,6 @@ }; Select.defaultProps = { - addLabelText: 'Add "{label}"?', arrowRenderer: _defaultArrowRenderer2.default, autosize: true, backspaceRemoves: true, @@ -50677,17 +50832,20 @@ multi: false, noResultsText: 'No results found', onBlurResetsInput: true, - onSelectResetsInput: true, onCloseResetsInput: true, + onSelectResetsInput: true, openOnClick: true, optionComponent: _Option2.default, pageSize: 5, placeholder: 'Select...', + removeSelected: true, required: false, + rtl: false, scrollMenuIntoView: true, searchable: true, simpleValue: false, tabSelectsValue: true, + trimFilter: true, valueComponent: _Value2.default, valueKey: 'value' }; @@ -50736,6 +50894,32 @@ whiteSpace: 'pre' }; + var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth']; + + var cleanInputProps = function cleanInputProps(inputProps) { + INPUT_PROPS_BLACKLIST.forEach(function (field) { + return delete inputProps[field]; + }); + return inputProps; + }; + + var copyStyles = function copyStyles(styles, node) { + node.style.fontSize = styles.fontSize; + node.style.fontFamily = styles.fontFamily; + node.style.fontWeight = styles.fontWeight; + node.style.fontStyle = styles.fontStyle; + node.style.letterSpacing = styles.letterSpacing; + node.style.textTransform = styles.textTransform; + }; + + var isIE = typeof window !== 'undefined' && window.navigator ? /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent) : false; + + var generateId = function generateId() { + // we only need an auto-generated ID for stylesheet injection, which is only + // used for IE. so if the browser is not IE, this should return undefined. + return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined; + }; + var AutosizeInput = function (_Component) { _inherits(AutosizeInput, _Component); @@ -50761,7 +50945,7 @@ _this.state = { inputWidth: props.minWidth, - inputId: '_' + Math.random().toString(36).substr(2, 12) + inputId: props.id || generateId() }; return _this; } @@ -50773,6 +50957,15 @@ this.copyInputStyles(); this.updateInputWidth(); } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var id = nextProps.id; + + if (id !== this.props.id) { + this.setState({ inputId: id || generateId() }); + } + } }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps, prevState) { @@ -50794,25 +50987,13 @@ if (!this.mounted || !window.getComputedStyle) { return; } - var inputStyle = this.input && window.getComputedStyle(this.input); - if (!inputStyle) { + var inputStyles = this.input && window.getComputedStyle(this.input); + if (!inputStyles) { return; } - var widthNode = this.sizer; - widthNode.style.fontSize = inputStyle.fontSize; - widthNode.style.fontFamily = inputStyle.fontFamily; - widthNode.style.fontWeight = inputStyle.fontWeight; - widthNode.style.fontStyle = inputStyle.fontStyle; - widthNode.style.letterSpacing = inputStyle.letterSpacing; - widthNode.style.textTransform = inputStyle.textTransform; - if (this.props.placeholder) { - var placeholderNode = this.placeHolderSizer; - placeholderNode.style.fontSize = inputStyle.fontSize; - placeholderNode.style.fontFamily = inputStyle.fontFamily; - placeholderNode.style.fontWeight = inputStyle.fontWeight; - placeholderNode.style.fontStyle = inputStyle.fontStyle; - placeholderNode.style.letterSpacing = inputStyle.letterSpacing; - placeholderNode.style.textTransform = inputStyle.textTransform; + copyStyles(inputStyles, this.sizer); + if (this.placeHolderSizer) { + copyStyles(inputStyles, this.placeHolderSizer); } } }, { @@ -50827,6 +51008,9 @@ } else { newInputWidth = this.sizer.scrollWidth + 2; } + // add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI + var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0; + newInputWidth += extraWidth; if (newInputWidth < this.props.minWidth) { newInputWidth = this.props.minWidth; } @@ -50856,6 +51040,18 @@ value: function select() { this.input.select(); } + }, { + key: 'renderStyles', + value: function renderStyles() { + // this method injects styles to hide IE's clear indicator, which messes + // with input size detection. the stylesheet is only injected when the + // browser is IE, and can also be disabled by the `injectStyles` prop. + var injectStyles = this.props.injectStyles; + + return isIE && injectStyles ? _react2.default.createElement('style', { dangerouslySetInnerHTML: { + __html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}' + } }) : null; + } }, { key: 'render', value: function render() { @@ -50868,28 +51064,24 @@ var wrapperStyle = _extends({}, this.props.style); if (!wrapperStyle.display) wrapperStyle.display = 'inline-block'; - var inputStyle = _extends({}, this.props.inputStyle); - inputStyle.width = this.state.inputWidth + 'px'; - inputStyle.boxSizing = 'content-box'; + + var inputStyle = _extends({ + boxSizing: 'content-box', + width: this.state.inputWidth + 'px' + }, this.props.inputStyle); var inputProps = _objectWithoutProperties(this.props, []); + cleanInputProps(inputProps); inputProps.className = this.props.inputClassName; + inputProps.id = this.state.inputId; inputProps.style = inputStyle; - // ensure props meant for `AutosizeInput` don't end up on the `input` - delete inputProps.inputClassName; - delete inputProps.inputStyle; - delete inputProps.minWidth; - delete inputProps.onAutosize; - delete inputProps.placeholderIsMinWidth; - delete inputProps.inputRef; + return _react2.default.createElement( 'div', { className: this.props.className, style: wrapperStyle }, - _react2.default.createElement('style', { dangerouslySetInnerHTML: { - __html: ['input#' + this.state.id + '::-ms-clear {display: none;}'].join('\n') - } }), - _react2.default.createElement('input', _extends({ id: this.state.id }, inputProps, { ref: this.inputRef })), + this.renderStyles(), + _react2.default.createElement('input', _extends({}, inputProps, { ref: this.inputRef })), _react2.default.createElement( 'div', { ref: this.sizerRef, style: sizerStyle }, @@ -50907,25 +51099,28 @@ return AutosizeInput; }(_react.Component); - ; - AutosizeInput.propTypes = { className: _propTypes2.default.string, // className for the outer element defaultValue: _propTypes2.default.any, // default field value + extraWidth: _propTypes2.default.oneOfType([// additional width for input element + _propTypes2.default.number, _propTypes2.default.string]), + id: _propTypes2.default.string, // id to use for the input, can be set for consistent snapshots + injectStyles: _propTypes2.default.bool, // inject the custom stylesheet to hide clear UI, defaults to true inputClassName: _propTypes2.default.string, // className for the input element inputRef: _propTypes2.default.func, // ref callback for the input element inputStyle: _propTypes2.default.object, // css styles for the input element minWidth: _propTypes2.default.oneOfType([// minimum width for input element _propTypes2.default.number, _propTypes2.default.string]), onAutosize: _propTypes2.default.func, // onAutosize handler: function(newWidth) {} - onChange: _propTypes2.default.func, // onChange handler: function(newValue) {} + onChange: _propTypes2.default.func, // onChange handler: function(event) {} placeholder: _propTypes2.default.string, // placeholder text placeholderIsMinWidth: _propTypes2.default.bool, // don't collapse size to less than the placeholder style: _propTypes2.default.object, // css styles for the outer element value: _propTypes2.default.any // field value }; AutosizeInput.defaultProps = { - minWidth: 1 + minWidth: 1, + injectStyles: true }; exports.default = AutosizeInput; @@ -50939,7 +51134,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); - exports.default = arrowRenderer; var _react = __webpack_require__(37); @@ -50951,7 +51145,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - function arrowRenderer(_ref) { + var arrowRenderer = function arrowRenderer(_ref) { var onMouseDown = _ref.onMouseDown; return _react2.default.createElement('span', { @@ -50964,6 +51158,8 @@ onMouseDown: _propTypes2.default.func }; + exports.default = arrowRenderer; + /***/ }), /* 332 */ /***/ (function(module, exports, __webpack_require__) { @@ -50974,15 +51170,46 @@ value: true }); - var _stripDiacritics = __webpack_require__(333); + var _react = __webpack_require__(37); + + var _react2 = _interopRequireDefault(_react); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + var clearRenderer = function clearRenderer() { + return _react2.default.createElement('span', { + className: 'Select-clear', + dangerouslySetInnerHTML: { __html: '×' } + }); + }; + + exports.default = clearRenderer; + +/***/ }), +/* 333 */ +/***/ (function(module, exports, __webpack_require__) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _stripDiacritics = __webpack_require__(334); var _stripDiacritics2 = _interopRequireDefault(_stripDiacritics); + var _trim = __webpack_require__(335); + + var _trim2 = _interopRequireDefault(_trim); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - function filterOptions(options, filterValue, excludeOptions, props) { - var _this = this; + var isValid = function isValid(value) { + return typeof value !== 'undefined' && value !== null && value !== ''; + }; + var filterOptions = function filterOptions(options, filterValue, excludeOptions, props) { if (props.ignoreAccents) { filterValue = (0, _stripDiacritics2.default)(filterValue); } @@ -50991,32 +51218,49 @@ filterValue = filterValue.toLowerCase(); } + if (props.trimFilter) { + filterValue = (0, _trim2.default)(filterValue); + } + if (excludeOptions) excludeOptions = excludeOptions.map(function (i) { return i[props.valueKey]; }); return options.filter(function (option) { if (excludeOptions && excludeOptions.indexOf(option[props.valueKey]) > -1) return false; - if (props.filterOption) return props.filterOption.call(_this, option, filterValue); + if (props.filterOption) return props.filterOption.call(undefined, option, filterValue); if (!filterValue) return true; - var valueTest = String(option[props.valueKey]); - var labelTest = String(option[props.labelKey]); + + var value = option[props.valueKey]; + var label = option[props.labelKey]; + var hasValue = isValid(value); + var hasLabel = isValid(label); + + if (!hasValue && !hasLabel) { + return false; + } + + var valueTest = hasValue ? String(value) : null; + var labelTest = hasLabel ? String(label) : null; + if (props.ignoreAccents) { - if (props.matchProp !== 'label') valueTest = (0, _stripDiacritics2.default)(valueTest); - if (props.matchProp !== 'value') labelTest = (0, _stripDiacritics2.default)(labelTest); + if (valueTest && props.matchProp !== 'label') valueTest = (0, _stripDiacritics2.default)(valueTest); + if (labelTest && props.matchProp !== 'value') labelTest = (0, _stripDiacritics2.default)(labelTest); } + if (props.ignoreCase) { - if (props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); - if (props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); + if (valueTest && props.matchProp !== 'label') valueTest = valueTest.toLowerCase(); + if (labelTest && props.matchProp !== 'value') labelTest = labelTest.toLowerCase(); } - return props.matchPos === 'start' ? props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; + + return props.matchPos === 'start' ? valueTest && props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || labelTest && props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : valueTest && props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || labelTest && props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0; }); - } + }; exports.default = filterOptions; /***/ }), -/* 333 */ +/* 334 */ /***/ (function(module, exports) { 'use strict'; @@ -51024,18 +51268,34 @@ Object.defineProperty(exports, "__esModule", { value: true }); - exports.default = stripDiacritics; var map = [{ 'base': 'A', 'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g }, { 'base': 'AA', 'letters': /[\uA732]/g }, { 'base': 'AE', 'letters': /[\u00C6\u01FC\u01E2]/g }, { 'base': 'AO', 'letters': /[\uA734]/g }, { 'base': 'AU', 'letters': /[\uA736]/g }, { 'base': 'AV', 'letters': /[\uA738\uA73A]/g }, { 'base': 'AY', 'letters': /[\uA73C]/g }, { 'base': 'B', 'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g }, { 'base': 'C', 'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g }, { 'base': 'D', 'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g }, { 'base': 'DZ', 'letters': /[\u01F1\u01C4]/g }, { 'base': 'Dz', 'letters': /[\u01F2\u01C5]/g }, { 'base': 'E', 'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g }, { 'base': 'F', 'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g }, { 'base': 'G', 'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g }, { 'base': 'H', 'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g }, { 'base': 'I', 'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g }, { 'base': 'J', 'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g }, { 'base': 'K', 'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g }, { 'base': 'L', 'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g }, { 'base': 'LJ', 'letters': /[\u01C7]/g }, { 'base': 'Lj', 'letters': /[\u01C8]/g }, { 'base': 'M', 'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g }, { 'base': 'N', 'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g }, { 'base': 'NJ', 'letters': /[\u01CA]/g }, { 'base': 'Nj', 'letters': /[\u01CB]/g }, { 'base': 'O', 'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g }, { 'base': 'OI', 'letters': /[\u01A2]/g }, { 'base': 'OO', 'letters': /[\uA74E]/g }, { 'base': 'OU', 'letters': /[\u0222]/g }, { 'base': 'P', 'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g }, { 'base': 'Q', 'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g }, { 'base': 'R', 'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g }, { 'base': 'S', 'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g }, { 'base': 'T', 'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g }, { 'base': 'TZ', 'letters': /[\uA728]/g }, { 'base': 'U', 'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g }, { 'base': 'V', 'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g }, { 'base': 'VY', 'letters': /[\uA760]/g }, { 'base': 'W', 'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g }, { 'base': 'X', 'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g }, { 'base': 'Y', 'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g }, { 'base': 'Z', 'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g }, { 'base': 'a', 'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g }, { 'base': 'aa', 'letters': /[\uA733]/g }, { 'base': 'ae', 'letters': /[\u00E6\u01FD\u01E3]/g }, { 'base': 'ao', 'letters': /[\uA735]/g }, { 'base': 'au', 'letters': /[\uA737]/g }, { 'base': 'av', 'letters': /[\uA739\uA73B]/g }, { 'base': 'ay', 'letters': /[\uA73D]/g }, { 'base': 'b', 'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g }, { 'base': 'c', 'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g }, { 'base': 'd', 'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g }, { 'base': 'dz', 'letters': /[\u01F3\u01C6]/g }, { 'base': 'e', 'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g }, { 'base': 'f', 'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g }, { 'base': 'g', 'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g }, { 'base': 'h', 'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g }, { 'base': 'hv', 'letters': /[\u0195]/g }, { 'base': 'i', 'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g }, { 'base': 'j', 'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g }, { 'base': 'k', 'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g }, { 'base': 'l', 'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g }, { 'base': 'lj', 'letters': /[\u01C9]/g }, { 'base': 'm', 'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g }, { 'base': 'n', 'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g }, { 'base': 'nj', 'letters': /[\u01CC]/g }, { 'base': 'o', 'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g }, { 'base': 'oi', 'letters': /[\u01A3]/g }, { 'base': 'ou', 'letters': /[\u0223]/g }, { 'base': 'oo', 'letters': /[\uA74F]/g }, { 'base': 'p', 'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g }, { 'base': 'q', 'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g }, { 'base': 'r', 'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g }, { 'base': 's', 'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g }, { 'base': 't', 'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g }, { 'base': 'tz', 'letters': /[\uA729]/g }, { 'base': 'u', 'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g }, { 'base': 'v', 'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g }, { 'base': 'vy', 'letters': /[\uA761]/g }, { 'base': 'w', 'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g }, { 'base': 'x', 'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g }, { 'base': 'y', 'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g }, { 'base': 'z', 'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g }]; - function stripDiacritics(str) { + var stripDiacritics = function stripDiacritics(str) { for (var i = 0; i < map.length; i++) { str = str.replace(map[i].letters, map[i].base); } return str; }; + exports.default = stripDiacritics; + /***/ }), -/* 334 */ +/* 335 */ +/***/ (function(module, exports) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + var trim = function trim(str) { + return str.replace(/^\s+|\s+$/g, ''); + }; + + exports.default = trim; + +/***/ }), +/* 336 */ /***/ (function(module, exports, __webpack_require__) { 'use strict'; @@ -51048,30 +51308,39 @@ var _classnames2 = _interopRequireDefault(_classnames); + var _propTypes = __webpack_require__(211); + + var _propTypes2 = _interopRequireDefault(_propTypes); + var _react = __webpack_require__(37); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - function menuRenderer(_ref) { + var menuRenderer = function menuRenderer(_ref) { var focusedOption = _ref.focusedOption, + focusOption = _ref.focusOption, + inputValue = _ref.inputValue, instancePrefix = _ref.instancePrefix, - labelKey = _ref.labelKey, onFocus = _ref.onFocus, + onOptionRef = _ref.onOptionRef, onSelect = _ref.onSelect, optionClassName = _ref.optionClassName, optionComponent = _ref.optionComponent, optionRenderer = _ref.optionRenderer, options = _ref.options, + removeValue = _ref.removeValue, + selectValue = _ref.selectValue, valueArray = _ref.valueArray, - valueKey = _ref.valueKey, - onOptionRef = _ref.onOptionRef; + valueKey = _ref.valueKey; var Option = optionComponent; return options.map(function (option, i) { - var isSelected = valueArray && valueArray.indexOf(option) > -1; + var isSelected = valueArray && valueArray.some(function (x) { + return x[valueKey] === option[valueKey]; + }); var isFocused = option === focusedOption; var optionClass = (0, _classnames2.default)(optionClassName, { 'Select-option': true, @@ -51084,6 +51353,8 @@ Option, { className: optionClass, + focusOption: focusOption, + inputValue: inputValue, instancePrefix: instancePrefix, isDisabled: option.disabled, isFocused: isFocused, @@ -51095,17 +51366,37 @@ optionIndex: i, ref: function ref(_ref2) { onOptionRef(_ref2, isFocused); - } + }, + removeValue: removeValue, + selectValue: selectValue }, - optionRenderer(option, i) + optionRenderer(option, i, inputValue) ); }); - } + }; + + menuRenderer.propTypes = { + focusOption: _propTypes2.default.func, + focusedOption: _propTypes2.default.object, + inputValue: _propTypes2.default.string, + instancePrefix: _propTypes2.default.string, + onFocus: _propTypes2.default.func, + onOptionRef: _propTypes2.default.func, + onSelect: _propTypes2.default.func, + optionClassName: _propTypes2.default.string, + optionComponent: _propTypes2.default.func, + optionRenderer: _propTypes2.default.func, + options: _propTypes2.default.array, + removeValue: _propTypes2.default.func, + selectValue: _propTypes2.default.func, + valueArray: _propTypes2.default.array, + valueKey: _propTypes2.default.string + }; exports.default = menuRenderer; /***/ }), -/* 335 */ +/* 337 */ /***/ (function(module, exports, __webpack_require__) { 'use strict'; @@ -51113,44 +51404,24 @@ Object.defineProperty(exports, "__esModule", { value: true }); - exports.default = clearRenderer; - - var _react = __webpack_require__(37); - - var _react2 = _interopRequireDefault(_react); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - function clearRenderer() { - return _react2.default.createElement('span', { - className: 'Select-clear', - dangerouslySetInnerHTML: { __html: '×' } - }); - }; + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -/***/ }), -/* 336 */ -/***/ (function(module, exports, __webpack_require__) { + var _classnames = __webpack_require__(272); - 'use strict'; + var _classnames2 = _interopRequireDefault(_classnames); - Object.defineProperty(exports, "__esModule", { - value: true - }); + var _propTypes = __webpack_require__(211); - var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + var _propTypes2 = _interopRequireDefault(_propTypes); var _react = __webpack_require__(37); var _react2 = _interopRequireDefault(_react); - var _propTypes = __webpack_require__(211); - - var _propTypes2 = _interopRequireDefault(_propTypes); + var _blockEvent = __webpack_require__(338); - var _classnames = __webpack_require__(272); - - var _classnames2 = _interopRequireDefault(_classnames); + var _blockEvent2 = _interopRequireDefault(_blockEvent); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -51179,20 +51450,6 @@ } _createClass(Option, [{ - key: 'blockEvent', - value: function blockEvent(event) { - event.preventDefault(); - event.stopPropagation(); - if (event.target.tagName !== 'A' || !('href' in event.target)) { - return; - } - if (event.target.target) { - window.open(event.target.href, event.target.target); - } else { - window.location.href = event.target.href; - } - } - }, { key: 'handleMouseDown', value: function handleMouseDown(event) { event.preventDefault(); @@ -51220,13 +51477,13 @@ } }, { key: 'handleTouchMove', - value: function handleTouchMove(event) { + value: function handleTouchMove() { // Set a flag that the view is being dragged this.dragging = true; } }, { key: 'handleTouchStart', - value: function handleTouchStart(event) { + value: function handleTouchStart() { // Set a flag that the view is not being dragged this.dragging = false; } @@ -51250,14 +51507,15 @@ return option.disabled ? _react2.default.createElement( 'div', { className: className, - onMouseDown: this.blockEvent, - onClick: this.blockEvent }, + onMouseDown: _blockEvent2.default, + onClick: _blockEvent2.default }, this.props.children ) : _react2.default.createElement( 'div', { className: className, style: option.style, role: 'option', + 'aria-label': option.label, onMouseDown: this.handleMouseDown, onMouseEnter: this.handleMouseEnter, onMouseMove: this.handleMouseMove, @@ -51274,8 +51532,6 @@ return Option; }(_react2.default.Component); - ; - Option.propTypes = { children: _propTypes2.default.node, className: _propTypes2.default.string, // className (based on mouse position) @@ -51293,7 +51549,30 @@ exports.default = Option; /***/ }), -/* 337 */ +/* 338 */ +/***/ (function(module, exports) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + exports.default = function (event) { + event.preventDefault(); + event.stopPropagation(); + if (event.target.tagName !== 'A' || !('href' in event.target)) { + return; + } + if (event.target.target) { + window.open(event.target.href, event.target.target); + } else { + window.location.href = event.target.href; + } + }; + +/***/ }), +/* 339 */ /***/ (function(module, exports, __webpack_require__) { 'use strict'; @@ -51304,17 +51583,17 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - var _react = __webpack_require__(37); + var _classnames = __webpack_require__(272); - var _react2 = _interopRequireDefault(_react); + var _classnames2 = _interopRequireDefault(_classnames); var _propTypes = __webpack_require__(211); var _propTypes2 = _interopRequireDefault(_propTypes); - var _classnames = __webpack_require__(272); + var _react = __webpack_require__(37); - var _classnames2 = _interopRequireDefault(_classnames); + var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -51374,13 +51653,13 @@ } }, { key: 'handleTouchMove', - value: function handleTouchMove(event) { + value: function handleTouchMove() { // Set a flag that the view is being dragged this.dragging = true; } }, { key: 'handleTouchStart', - value: function handleTouchStart(event) { + value: function handleTouchStart() { // Set a flag that the view is not being dragged this.dragging = false; } @@ -51431,8 +51710,6 @@ return Value; }(_react2.default.Component); - ; - Value.propTypes = { children: _propTypes2.default.node, disabled: _propTypes2.default.bool, // disabled prop passed to ReactSelect @@ -51445,7 +51722,7 @@ exports.default = Value; /***/ }), -/* 338 */ +/* 340 */ /***/ (function(module, exports, __webpack_require__) { 'use strict'; @@ -51456,21 +51733,23 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - - var _react = __webpack_require__(37); + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; - var _react2 = _interopRequireDefault(_react); + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _propTypes = __webpack_require__(211); var _propTypes2 = _interopRequireDefault(_propTypes); + var _react = __webpack_require__(37); + + var _react2 = _interopRequireDefault(_react); + var _Select = __webpack_require__(329); var _Select2 = _interopRequireDefault(_Select); - var _stripDiacritics = __webpack_require__(333); + var _stripDiacritics = __webpack_require__(334); var _stripDiacritics2 = _interopRequireDefault(_stripDiacritics); @@ -51506,6 +51785,10 @@ var defaultCache = {}; + var defaultChildren = function defaultChildren(props) { + return _react2.default.createElement(_Select2.default, props); + }; + var defaultProps = { autoload: true, cache: defaultCache, @@ -51571,7 +51854,10 @@ var cache = this._cache; if (cache && Object.prototype.hasOwnProperty.call(cache, inputValue)) { + this._callback = null; + this.setState({ + isLoading: false, options: cache[inputValue] }); @@ -51579,14 +51865,14 @@ } var callback = function callback(error, data) { - if (callback === _this2._callback) { - _this2._callback = null; + var options = data && data.options || []; - var options = data && data.options || []; + if (cache) { + cache[inputValue] = options; + } - if (cache) { - cache[inputValue] = options; - } + if (callback === _this2._callback) { + _this2._callback = null; _this2.setState({ isLoading: false, @@ -51621,7 +51907,17 @@ ignoreCase = _props.ignoreCase, onInputChange = _props.onInputChange; - var transformedInputValue = inputValue; + var newInputValue = inputValue; + + if (onInputChange) { + var value = onInputChange(newInputValue); + // Note: != used deliberately here to catch undefined and null + if (value != null && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== 'object') { + newInputValue = '' + value; + } + } + + var transformedInputValue = newInputValue; if (ignoreAccents) { transformedInputValue = (0, _stripDiacritics2.default)(transformedInputValue); @@ -51631,15 +51927,11 @@ transformedInputValue = transformedInputValue.toLowerCase(); } - if (onInputChange) { - onInputChange(transformedInputValue); - } - - this.setState({ inputValue: inputValue }); + this.setState({ inputValue: newInputValue }); this.loadOptions(transformedInputValue); - // Return the original input value to avoid modifying the user's view of the input while typing. - return inputValue; + // Return new input value, but without applying toLowerCase() to avoid modifying the user's view case of the input while typing. + return newInputValue; } }, { key: 'noResultsText', @@ -51674,10 +51966,7 @@ var _props3 = this.props, children = _props3.children, loadingPlaceholder = _props3.loadingPlaceholder, - multi = _props3.multi, - onChange = _props3.onChange, - placeholder = _props3.placeholder, - value = _props3.value; + placeholder = _props3.placeholder; var _state2 = this.state, isLoading = _state2.isLoading, options = _state2.options; @@ -51708,12 +51997,8 @@ Async.propTypes = propTypes; Async.defaultProps = defaultProps; - function defaultChildren(props) { - return _react2.default.createElement(_Select2.default, props); - } - /***/ }), -/* 339 */ +/* 341 */ /***/ (function(module, exports, __webpack_require__) { 'use strict'; @@ -51726,40 +52011,36 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - var _react = __webpack_require__(37); + var _propTypes = __webpack_require__(211); - var _react2 = _interopRequireDefault(_react); + var _propTypes2 = _interopRequireDefault(_propTypes); - var _Select = __webpack_require__(329); + var _react = __webpack_require__(37); - var _Select2 = _interopRequireDefault(_Select); + var _react2 = _interopRequireDefault(_react); - var _Async = __webpack_require__(338); + var _Async = __webpack_require__(340); var _Async2 = _interopRequireDefault(_Async); - var _Creatable = __webpack_require__(340); + var _Creatable = __webpack_require__(342); var _Creatable2 = _interopRequireDefault(_Creatable); + var _Select = __webpack_require__(329); + + var _Select2 = _interopRequireDefault(_Select); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - function reduce(obj) { - var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - - return Object.keys(obj).reduce(function (props, key) { - var value = obj[key]; - if (value !== undefined) props[key] = value; - return props; - }, props); - } - var AsyncCreatableSelect = function (_React$Component) { _inherits(AsyncCreatableSelect, _React$Component); @@ -51782,20 +52063,24 @@ return _react2.default.createElement( _Async2.default, this.props, - function (asyncProps) { + function (_ref) { + var ref = _ref.ref, + asyncProps = _objectWithoutProperties(_ref, ['ref']); + + var asyncRef = ref; return _react2.default.createElement( _Creatable2.default, - _this2.props, - function (creatableProps) { - return _react2.default.createElement(_Select2.default, _extends({}, reduce(asyncProps, reduce(creatableProps, {})), { - onInputChange: function onInputChange(input) { - creatableProps.onInputChange(input); - return asyncProps.onInputChange(input); - }, - ref: function ref(_ref) { - _this2.select = _ref; - creatableProps.ref(_ref); - asyncProps.ref(_ref); + asyncProps, + function (_ref2) { + var ref = _ref2.ref, + creatableProps = _objectWithoutProperties(_ref2, ['ref']); + + var creatableRef = ref; + return _this2.props.children(_extends({}, creatableProps, { + ref: function ref(select) { + creatableRef(select); + asyncRef(select); + _this2.select = select; } })); } @@ -51808,12 +52093,22 @@ return AsyncCreatableSelect; }(_react2.default.Component); - ; + var defaultChildren = function defaultChildren(props) { + return _react2.default.createElement(_Select2.default, props); + }; + + AsyncCreatableSelect.propTypes = { + children: _propTypes2.default.func.isRequired // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element + }; + + AsyncCreatableSelect.defaultProps = { + children: defaultChildren + }; exports.default = AsyncCreatableSelect; /***/ }), -/* 340 */ +/* 342 */ /***/ (function(module, exports, __webpack_require__) { 'use strict'; @@ -51826,26 +52121,26 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - var _react = __webpack_require__(37); - - var _react2 = _interopRequireDefault(_react); - var _propTypes = __webpack_require__(211); var _propTypes2 = _interopRequireDefault(_propTypes); - var _Select = __webpack_require__(329); + var _react = __webpack_require__(37); - var _Select2 = _interopRequireDefault(_Select); + var _react2 = _interopRequireDefault(_react); - var _defaultFilterOptions = __webpack_require__(332); + var _defaultFilterOptions = __webpack_require__(333); var _defaultFilterOptions2 = _interopRequireDefault(_defaultFilterOptions); - var _defaultMenuRenderer = __webpack_require__(334); + var _defaultMenuRenderer = __webpack_require__(336); var _defaultMenuRenderer2 = _interopRequireDefault(_defaultMenuRenderer); + var _Select = __webpack_require__(329); + + var _Select2 = _interopRequireDefault(_Select); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } @@ -51880,13 +52175,12 @@ newOptionCreator = _props.newOptionCreator, onNewOptionClick = _props.onNewOptionClick, _props$options = _props.options, - options = _props$options === undefined ? [] : _props$options, - shouldKeyDownEventCreateNewOption = _props.shouldKeyDownEventCreateNewOption; + options = _props$options === undefined ? [] : _props$options; if (isValidNewOption({ label: this.inputValue })) { var option = newOptionCreator({ label: this.inputValue, labelKey: this.labelKey, valueKey: this.valueKey }); - var _isOptionUnique = this.isOptionUnique({ option: option }); + var _isOptionUnique = this.isOptionUnique({ option: option, options: options }); // Don't add the same option twice. if (_isOptionUnique) { @@ -51906,7 +52200,6 @@ var _props2 = this.props, filterOptions = _props2.filterOptions, isValidNewOption = _props2.isValidNewOption, - options = _props2.options, promptTextCreator = _props2.promptTextCreator; // TRICKY Check currently selected options as well. @@ -51957,7 +52250,7 @@ var isOptionUnique = this.props.isOptionUnique; - options = options || this.select.filterOptions(); + options = options || this.props.options; return isOptionUnique({ labelKey: this.labelKey, @@ -51982,13 +52275,15 @@ value: function onInputChange(input) { var onInputChange = this.props.onInputChange; + // This value may be needed in between Select mounts (when this.select is null) + + this.inputValue = input; if (onInputChange) { - onInputChange(input); + this.inputValue = onInputChange(input); } - // This value may be needed in between Select mounts (when this.select is null) - this.inputValue = input; + return this.inputValue; } }, { key: 'onInputKeyDown', @@ -52010,7 +52305,7 @@ } }, { key: 'onOptionSelect', - value: function onOptionSelect(option, event) { + value: function onOptionSelect(option) { if (option === this._createPlaceholderOption) { this.createNewOption(); } else { @@ -52028,9 +52323,8 @@ var _this2 = this; var _props4 = this.props, - newOptionCreator = _props4.newOptionCreator, - shouldKeyDownEventCreateNewOption = _props4.shouldKeyDownEventCreateNewOption, - restProps = _objectWithoutProperties(_props4, ['newOptionCreator', 'shouldKeyDownEventCreateNewOption']); + refProp = _props4.ref, + restProps = _objectWithoutProperties(_props4, ['ref']); var children = this.props.children; @@ -52056,6 +52350,9 @@ _this2.labelKey = _ref2.props.labelKey; _this2.valueKey = _ref2.props.valueKey; } + if (refProp) { + refProp(_ref2); + } } }); @@ -52066,30 +52363,31 @@ return CreatableSelect; }(_react2.default.Component); - ; - - function defaultChildren(props) { + var defaultChildren = function defaultChildren(props) { return _react2.default.createElement(_Select2.default, props); }; - function isOptionUnique(_ref3) { + var isOptionUnique = function isOptionUnique(_ref3) { var option = _ref3.option, options = _ref3.options, labelKey = _ref3.labelKey, valueKey = _ref3.valueKey; + if (!options || !options.length) { + return true; + } + return options.filter(function (existingOption) { return existingOption[labelKey] === option[labelKey] || existingOption[valueKey] === option[valueKey]; }).length === 0; }; - function isValidNewOption(_ref4) { + var isValidNewOption = function isValidNewOption(_ref4) { var label = _ref4.label; - return !!label; }; - function newOptionCreator(_ref5) { + var newOptionCreator = function newOptionCreator(_ref5) { var label = _ref5.label, labelKey = _ref5.labelKey, valueKey = _ref5.valueKey; @@ -52098,14 +52396,15 @@ option[valueKey] = label; option[labelKey] = label; option.className = 'Select-create-option-placeholder'; + return option; }; - function promptTextCreator(label) { + var promptTextCreator = function promptTextCreator(label) { return 'Create option "' + label + '"'; - } + }; - function shouldKeyDownEventCreateNewOption(_ref6) { + var shouldKeyDownEventCreateNewOption = function shouldKeyDownEventCreateNewOption(_ref6) { var keyCode = _ref6.keyCode; switch (keyCode) { @@ -52114,9 +52413,9 @@ case 188: // COMMA return true; + default: + return false; } - - return false; }; // Default prop methods @@ -52177,6 +52476,8 @@ // (filterText: string): string promptTextCreator: _propTypes2.default.func, + ref: _propTypes2.default.func, + // Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. shouldKeyDownEventCreateNewOption: _propTypes2.default.func }; @@ -52184,13 +52485,13 @@ exports.default = CreatableSelect; /***/ }), -/* 341 */ +/* 343 */ /***/ (function(module, exports, __webpack_require__) { // style-loader: Adds some css to the DOM by adding a