'use strict'; function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } var React = require('react'); var React__default = _interopDefault(React); var memoizeOne = _interopDefault(require('memoize-one')); var core = require('@emotion/core'); var reactDom = require('react-dom'); var utils = require('./utils-896a48cb.browser.cjs.js'); var index = require('./index-30113876.browser.cjs.js'); var _css = _interopDefault(require('@emotion/css')); var diacritics = [{ 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 }]; var stripDiacritics = function stripDiacritics(str) { for (var i = 0; i < diacritics.length; i++) { str = str.replace(diacritics[i].letters, diacritics[i].base); } return str; }; function _extends() { _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; }; return _extends.apply(this, arguments); } var trimString = function trimString(str) { return str.replace(/^\s+|\s+$/g, ''); }; var defaultStringify = function defaultStringify(option) { return option.label + " " + option.value; }; var createFilter = function createFilter(config) { return function (option, rawInput) { var _ignoreCase$ignoreAcc = _extends({ ignoreCase: true, ignoreAccents: true, stringify: defaultStringify, trim: true, matchFrom: 'any' }, config), ignoreCase = _ignoreCase$ignoreAcc.ignoreCase, ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents, stringify = _ignoreCase$ignoreAcc.stringify, trim = _ignoreCase$ignoreAcc.trim, matchFrom = _ignoreCase$ignoreAcc.matchFrom; var input = trim ? trimString(rawInput) : rawInput; var candidate = trim ? trimString(stringify(option)) : stringify(option); if (ignoreCase) { input = input.toLowerCase(); candidate = candidate.toLowerCase(); } if (ignoreAccents) { input = stripDiacritics(input); candidate = stripDiacritics(candidate); } return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1; }; }; function _extends$1() { _extends$1 = 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; }; return _extends$1.apply(this, arguments); } var _ref = process.env.NODE_ENV === "production" ? { name: "1laao21-a11yText", styles: "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap;" } : { name: "1laao21-a11yText", styles: "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap;", map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkExMXlUZXh0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFNIiwiZmlsZSI6IkExMXlUZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQGZsb3dcbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsgdHlwZSBFbGVtZW50Q29uZmlnIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbi8vIEFzc2lzdGl2ZSB0ZXh0IHRvIGRlc2NyaWJlIHZpc3VhbCBlbGVtZW50cy4gSGlkZGVuIGZvciBzaWdodGVkIHVzZXJzLlxuY29uc3QgQTExeVRleHQgPSAocHJvcHM6IEVsZW1lbnRDb25maWc8J3NwYW4nPikgPT4gKFxuICAgIDxzcGFuXG4gICAgICBjc3M9e3tcbiAgICAgICAgbGFiZWw6ICdhMTF5VGV4dCcsXG4gICAgICAgIHpJbmRleDogOTk5OSxcbiAgICAgICAgYm9yZGVyOiAwLFxuICAgICAgICBjbGlwOiAncmVjdCgxcHgsIDFweCwgMXB4LCAxcHgpJyxcbiAgICAgICAgaGVpZ2h0OiAxLFxuICAgICAgICB3aWR0aDogMSxcbiAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgICB9fVxuICAgICAgey4uLnByb3BzfVxuICAgIC8+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBBMTF5VGV4dDtcbiJdfQ== */" }; var A11yText = function A11yText(props) { return core.jsx("span", _extends$1({ css: _ref }, props)); }; function _extends$2() { _extends$2 = 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; }; return _extends$2.apply(this, arguments); } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function DummyInput(_ref) { var inProp = _ref.in, out = _ref.out, onExited = _ref.onExited, appear = _ref.appear, enter = _ref.enter, exit = _ref.exit, innerRef = _ref.innerRef, emotion = _ref.emotion, props = _objectWithoutPropertiesLoose(_ref, ["in", "out", "onExited", "appear", "enter", "exit", "innerRef", "emotion"]); return core.jsx("input", _extends$2({ ref: innerRef }, props, { css: /*#__PURE__*/ _css({ label: 'dummyInput', // get rid of any default styles background: 0, border: 0, fontSize: 'inherit', outline: 0, padding: 0, // important! without `width` browsers won't allow focus width: 1, // remove cursor on desktop color: 'transparent', // remove cursor on mobile whilst maintaining "scroll into view" behaviour left: -100, opacity: 0, position: 'relative', transform: 'scale(0)' }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkR1bW15SW5wdXQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJNIiwiZmlsZSI6IkR1bW15SW5wdXQuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gRHVtbXlJbnB1dCh7XG4gIGluOiBpblByb3AsXG4gIG91dCxcbiAgb25FeGl0ZWQsXG4gIGFwcGVhcixcbiAgZW50ZXIsXG4gIGV4aXQsXG4gIGlubmVyUmVmLFxuICBlbW90aW9uLFxuICAuLi5wcm9wc1xufTogYW55KSB7XG4gIHJldHVybiAoXG4gICAgPGlucHV0XG4gICAgICByZWY9e2lubmVyUmVmfVxuICAgICAgey4uLnByb3BzfVxuICAgICAgY3NzPXt7XG4gICAgICAgIGxhYmVsOiAnZHVtbXlJbnB1dCcsXG4gICAgICAgIC8vIGdldCByaWQgb2YgYW55IGRlZmF1bHQgc3R5bGVzXG4gICAgICAgIGJhY2tncm91bmQ6IDAsXG4gICAgICAgIGJvcmRlcjogMCxcbiAgICAgICAgZm9udFNpemU6ICdpbmhlcml0JyxcbiAgICAgICAgb3V0bGluZTogMCxcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgLy8gaW1wb3J0YW50ISB3aXRob3V0IGB3aWR0aGAgYnJvd3NlcnMgd29uJ3QgYWxsb3cgZm9jdXNcbiAgICAgICAgd2lkdGg6IDEsXG5cbiAgICAgICAgLy8gcmVtb3ZlIGN1cnNvciBvbiBkZXNrdG9wXG4gICAgICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuXG4gICAgICAgIC8vIHJlbW92ZSBjdXJzb3Igb24gbW9iaWxlIHdoaWxzdCBtYWludGFpbmluZyBcInNjcm9sbCBpbnRvIHZpZXdcIiBiZWhhdmlvdXJcbiAgICAgICAgbGVmdDogLTEwMCxcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDApJyxcbiAgICAgIH19XG4gICAgLz5cbiAgKTtcbn1cbiJdfQ== */") })); } function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } var NodeResolver = /*#__PURE__*/ function (_Component) { _inheritsLoose(NodeResolver, _Component); function NodeResolver() { return _Component.apply(this, arguments) || this; } var _proto = NodeResolver.prototype; _proto.componentDidMount = function componentDidMount() { this.props.innerRef(reactDom.findDOMNode(this)); }; _proto.componentWillUnmount = function componentWillUnmount() { this.props.innerRef(null); }; _proto.render = function render() { return this.props.children; }; return NodeResolver; }(React.Component); var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position']; var LOCK_STYLES = { boxSizing: 'border-box', // account for possible declaration `width: 100%;` on body overflow: 'hidden', position: 'relative', height: '100%' }; function preventTouchMove(e) { e.preventDefault(); } function allowTouchMove(e) { e.stopPropagation(); } function preventInertiaScroll() { var top = this.scrollTop; var totalScroll = this.scrollHeight; var currentScroll = top + this.offsetHeight; if (top === 0) { this.scrollTop = 1; } else if (currentScroll === totalScroll) { this.scrollTop = top - 1; } } // `ontouchstart` check works on most browsers // `maxTouchPoints` works on IE10/11 and Surface function isTouchDevice() { return 'ontouchstart' in window || navigator.maxTouchPoints; } function _inheritsLoose$1(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } var canUseDOM = !!( window.document && window.document.createElement); var activeScrollLocks = 0; var ScrollLock = /*#__PURE__*/ function (_Component) { _inheritsLoose$1(ScrollLock, _Component); function ScrollLock() { var _this; for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _Component.call.apply(_Component, [this].concat(args)) || this; _this.originalStyles = {}; _this.listenerOptions = { capture: false, passive: false }; return _this; } var _proto = ScrollLock.prototype; _proto.componentDidMount = function componentDidMount() { var _this2 = this; if (!canUseDOM) return; var _this$props = this.props, accountForScrollbars = _this$props.accountForScrollbars, touchScrollTarget = _this$props.touchScrollTarget; var target = document.body; var targetStyle = target && target.style; if (accountForScrollbars) { // store any styles already applied to the body STYLE_KEYS.forEach(function (key) { var val = targetStyle && targetStyle[key]; _this2.originalStyles[key] = val; }); } // apply the lock styles and padding if this is the first scroll lock if (accountForScrollbars && activeScrollLocks < 1) { var currentPadding = parseInt(this.originalStyles.paddingRight, 10) || 0; var clientWidth = document.body ? document.body.clientWidth : 0; var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0; Object.keys(LOCK_STYLES).forEach(function (key) { var val = LOCK_STYLES[key]; if (targetStyle) { targetStyle[key] = val; } }); if (targetStyle) { targetStyle.paddingRight = adjustedPadding + "px"; } } // account for touch devices if (target && isTouchDevice()) { // Mobile Safari ignores { overflow: hidden } declaration on the body. target.addEventListener('touchmove', preventTouchMove, this.listenerOptions); // Allow scroll on provided target if (touchScrollTarget) { touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, this.listenerOptions); touchScrollTarget.addEventListener('touchmove', allowTouchMove, this.listenerOptions); } } // increment active scroll locks activeScrollLocks += 1; }; _proto.componentWillUnmount = function componentWillUnmount() { var _this3 = this; if (!canUseDOM) return; var _this$props2 = this.props, accountForScrollbars = _this$props2.accountForScrollbars, touchScrollTarget = _this$props2.touchScrollTarget; var target = document.body; var targetStyle = target && target.style; // safely decrement active scroll locks activeScrollLocks = Math.max(activeScrollLocks - 1, 0); // reapply original body styles, if any if (accountForScrollbars && activeScrollLocks < 1) { STYLE_KEYS.forEach(function (key) { var val = _this3.originalStyles[key]; if (targetStyle) { targetStyle[key] = val; } }); } // remove touch listeners if (target && isTouchDevice()) { target.removeEventListener('touchmove', preventTouchMove, this.listenerOptions); if (touchScrollTarget) { touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, this.listenerOptions); touchScrollTarget.removeEventListener('touchmove', allowTouchMove, this.listenerOptions); } } }; _proto.render = function render() { return null; }; return ScrollLock; }(React.Component); ScrollLock.defaultProps = { accountForScrollbars: true }; function _inheritsLoose$2(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } var _ref$1 = process.env.NODE_ENV === "production" ? { name: "1dsbpcp", styles: "position:fixed;left:0;bottom:0;right:0;top:0;" } : { name: "1dsbpcp", styles: "position:fixed;left:0;bottom:0;right:0;top:0;", map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNjcm9sbEJsb2NrLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEVSIsImZpbGUiOiJTY3JvbGxCbG9jay5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEBmbG93XG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IFB1cmVDb21wb25lbnQsIHR5cGUgRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IE5vZGVSZXNvbHZlciBmcm9tICcuL05vZGVSZXNvbHZlcic7XG5pbXBvcnQgU2Nyb2xsTG9jayBmcm9tICcuL1Njcm9sbExvY2svaW5kZXgnO1xuXG50eXBlIFByb3BzID0ge1xuICBjaGlsZHJlbjogRWxlbWVudDwqPixcbiAgaXNFbmFibGVkOiBib29sZWFuLFxufTtcbnR5cGUgU3RhdGUgPSB7XG4gIHRvdWNoU2Nyb2xsVGFyZ2V0OiBIVE1MRWxlbWVudCB8IG51bGwsXG59O1xuXG4vLyBOT1RFOlxuLy8gV2Ugc2hvdWxkbid0IG5lZWQgdGhpcyBhZnRlciB1cGRhdGluZyB0byBSZWFjdCB2MTYuMy4wLCB3aGljaCBpbnRyb2R1Y2VzOlxuLy8gLSBjcmVhdGVSZWYoKSBodHRwczovL3JlYWN0anMub3JnL2RvY3MvcmVhY3QtYXBpLmh0bWwjcmVhY3RjcmVhdGVyZWZcbi8vIC0gZm9yd2FyZFJlZigpIGh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9yZWFjdC1hcGkuaHRtbCNyZWFjdGZvcndhcmRyZWZcblxuZXhwb3J0IGRlZmF1bHQgY2xhc3MgU2Nyb2xsQmxvY2sgZXh0ZW5kcyBQdXJlQ29tcG9uZW50PFByb3BzLCBTdGF0ZT4ge1xuICBzdGF0ZSA9IHsgdG91Y2hTY3JvbGxUYXJnZXQ6IG51bGwgfTtcblxuICAvLyBtdXN0IGJlIGluIHN0YXRlIHRvIHRyaWdnZXIgYSByZS1yZW5kZXIsIG9ubHkgcnVucyBvbmNlIHBlciBpbnN0YW5jZVxuICBnZXRTY3JvbGxUYXJnZXQgPSAocmVmOiBIVE1MRWxlbWVudCkgPT4ge1xuICAgIGlmIChyZWYgPT09IHRoaXMuc3RhdGUudG91Y2hTY3JvbGxUYXJnZXQpIHJldHVybjtcbiAgICB0aGlzLnNldFN0YXRlKHsgdG91Y2hTY3JvbGxUYXJnZXQ6IHJlZiB9KTtcbiAgfTtcblxuICAvLyB0aGlzIHdpbGwgY2xvc2UgdGhlIG1lbnUgd2hlbiBhIHVzZXIgY2xpY2tzIG91dHNpZGVcbiAgYmx1clNlbGVjdElucHV0ID0gKCkgPT4ge1xuICAgIGlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50KSB7XG4gICAgICBkb2N1bWVudC5hY3RpdmVFbGVtZW50LmJsdXIoKTtcbiAgICB9XG4gIH07XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgY2hpbGRyZW4sIGlzRW5hYmxlZCB9ID0gdGhpcy5wcm9wcztcbiAgICBjb25zdCB7IHRvdWNoU2Nyb2xsVGFyZ2V0IH0gPSB0aGlzLnN0YXRlO1xuXG4gICAgLy8gYmFpbCBlYXJseSBpZiBub3QgZW5hYmxlZFxuICAgIGlmICghaXNFbmFibGVkKSByZXR1cm4gY2hpbGRyZW47XG5cbiAgICAvKlxuICAgICAqIERpdlxuICAgICAqIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuICAgICAqIGJsb2NrcyBzY3JvbGxpbmcgb24gbm9uLWJvZHkgZWxlbWVudHMgYmVoaW5kIHRoZSBtZW51XG5cbiAgICAgKiBOb2RlUmVzb2x2ZXJcbiAgICAgKiAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiAgICAgKiB3ZSBuZWVkIGEgcmVmZXJlbmNlIHRvIHRoZSBzY3JvbGxhYmxlIGVsZW1lbnQgdG8gXCJ1bmxvY2tcIiBzY3JvbGwgb25cbiAgICAgKiBtb2JpbGUgZGV2aWNlc1xuXG4gICAgICogU2Nyb2xsTG9ja1xuICAgICAqIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuICAgICAqIGFjdHVhbGx5IGRvZXMgdGhlIHNjcm9sbCBsb2NraW5nXG4gICAgICovXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXY+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBvbkNsaWNrPXt0aGlzLmJsdXJTZWxlY3RJbnB1dH1cbiAgICAgICAgICBjc3M9e3sgcG9zaXRpb246ICdmaXhlZCcsIGxlZnQ6IDAsIGJvdHRvbTogMCwgcmlnaHQ6IDAsIHRvcDogMCB9fVxuICAgICAgICAvPlxuICAgICAgICA8Tm9kZVJlc29sdmVyIGlubmVyUmVmPXt0aGlzLmdldFNjcm9sbFRhcmdldH0+e2NoaWxkcmVufTwvTm9kZVJlc29sdmVyPlxuICAgICAgICB7dG91Y2hTY3JvbGxUYXJnZXQgPyAoXG4gICAgICAgICAgPFNjcm9sbExvY2sgdG91Y2hTY3JvbGxUYXJnZXQ9e3RvdWNoU2Nyb2xsVGFyZ2V0fSAvPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbn1cbiJdfQ== */" }; // NOTE: // We shouldn't need this after updating to React v16.3.0, which introduces: // - createRef() https://reactjs.org/docs/react-api.html#reactcreateref // - forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref var ScrollBlock = /*#__PURE__*/ function (_PureComponent) { _inheritsLoose$2(ScrollBlock, _PureComponent); function ScrollBlock() { var _this; for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this; _this.state = { touchScrollTarget: null }; _this.getScrollTarget = function (ref) { if (ref === _this.state.touchScrollTarget) return; _this.setState({ touchScrollTarget: ref }); }; _this.blurSelectInput = function () { if (document.activeElement) { document.activeElement.blur(); } }; return _this; } var _proto = ScrollBlock.prototype; _proto.render = function render() { var _this$props = this.props, children = _this$props.children, isEnabled = _this$props.isEnabled; var touchScrollTarget = this.state.touchScrollTarget; // bail early if not enabled if (!isEnabled) return children; /* * Div * ------------------------------ * blocks scrolling on non-body elements behind the menu * NodeResolver * ------------------------------ * we need a reference to the scrollable element to "unlock" scroll on * mobile devices * ScrollLock * ------------------------------ * actually does the scroll locking */ return core.jsx("div", null, core.jsx("div", { onClick: this.blurSelectInput, css: _ref$1 }), core.jsx(NodeResolver, { innerRef: this.getScrollTarget }, children), touchScrollTarget ? core.jsx(ScrollLock, { touchScrollTarget: touchScrollTarget }) : null); }; return ScrollBlock; }(React.PureComponent); function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _inheritsLoose$3(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } var ScrollCaptor = /*#__PURE__*/ function (_Component) { _inheritsLoose$3(ScrollCaptor, _Component); function ScrollCaptor() { var _this; for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _Component.call.apply(_Component, [this].concat(args)) || this; _this.isBottom = false; _this.isTop = false; _this.scrollTarget = void 0; _this.touchStart = void 0; _this.cancelScroll = function (event) { event.preventDefault(); event.stopPropagation(); }; _this.handleEventDelta = function (event, delta) { var _this$props = _this.props, onBottomArrive = _this$props.onBottomArrive, onBottomLeave = _this$props.onBottomLeave, onTopArrive = _this$props.onTopArrive, onTopLeave = _this$props.onTopLeave; var _this$scrollTarget = _this.scrollTarget, scrollTop = _this$scrollTarget.scrollTop, scrollHeight = _this$scrollTarget.scrollHeight, clientHeight = _this$scrollTarget.clientHeight; var target = _this.scrollTarget; var isDeltaPositive = delta > 0; var availableScroll = scrollHeight - clientHeight - scrollTop; var shouldCancelScroll = false; // reset bottom/top flags if (availableScroll > delta && _this.isBottom) { if (onBottomLeave) onBottomLeave(event); _this.isBottom = false; } if (isDeltaPositive && _this.isTop) { if (onTopLeave) onTopLeave(event); _this.isTop = false; } // bottom limit if (isDeltaPositive && delta > availableScroll) { if (onBottomArrive && !_this.isBottom) { onBottomArrive(event); } target.scrollTop = scrollHeight; shouldCancelScroll = true; _this.isBottom = true; // top limit } else if (!isDeltaPositive && -delta > scrollTop) { if (onTopArrive && !_this.isTop) { onTopArrive(event); } target.scrollTop = 0; shouldCancelScroll = true; _this.isTop = true; } // cancel scroll if (shouldCancelScroll) { _this.cancelScroll(event); } }; _this.onWheel = function (event) { _this.handleEventDelta(event, event.deltaY); }; _this.onTouchStart = function (event) { // set touch start so we can calculate touchmove delta _this.touchStart = event.changedTouches[0].clientY; }; _this.onTouchMove = function (event) { var deltaY = _this.touchStart - event.changedTouches[0].clientY; _this.handleEventDelta(event, deltaY); }; _this.getScrollTarget = function (ref) { _this.scrollTarget = ref; }; return _this; } var _proto = ScrollCaptor.prototype; _proto.componentDidMount = function componentDidMount() { this.startListening(this.scrollTarget); }; _proto.componentWillUnmount = function componentWillUnmount() { this.stopListening(this.scrollTarget); }; _proto.startListening = function startListening(el) { // bail early if no element is available to attach to if (!el) return; // all the if statements are to appease Flow 😢 if (typeof el.addEventListener === 'function') { el.addEventListener('wheel', this.onWheel, false); } if (typeof el.addEventListener === 'function') { el.addEventListener('touchstart', this.onTouchStart, false); } if (typeof el.addEventListener === 'function') { el.addEventListener('touchmove', this.onTouchMove, false); } }; _proto.stopListening = function stopListening(el) { // all the if statements are to appease Flow 😢 if (typeof el.removeEventListener === 'function') { el.removeEventListener('wheel', this.onWheel, false); } if (typeof el.removeEventListener === 'function') { el.removeEventListener('touchstart', this.onTouchStart, false); } if (typeof el.removeEventListener === 'function') { el.removeEventListener('touchmove', this.onTouchMove, false); } }; _proto.render = function render() { return React__default.createElement(NodeResolver, { innerRef: this.getScrollTarget }, this.props.children); }; return ScrollCaptor; }(React.Component); function ScrollCaptorSwitch(_ref) { var _ref$isEnabled = _ref.isEnabled, isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled, props = _objectWithoutPropertiesLoose$1(_ref, ["isEnabled"]); return isEnabled ? React__default.createElement(ScrollCaptor, props) : props.children; } var instructionsAriaMessage = function instructionsAriaMessage(event, context) { if (context === void 0) { context = {}; } var _context = context, isSearchable = _context.isSearchable, isMulti = _context.isMulti, label = _context.label, isDisabled = _context.isDisabled; switch (event) { case 'menu': return "Use Up and Down to choose options" + (isDisabled ? '' : ', press Enter to select the currently focused option') + ", press Escape to exit the menu, press Tab to select the option and exit the menu."; case 'input': return (label ? label : 'Select') + " is focused " + (isSearchable ? ',type to refine list' : '') + ", press Down to open the menu, " + (isMulti ? ' press left to focus selected values' : ''); case 'value': return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value'; } }; var valueEventAriaMessage = function valueEventAriaMessage(event, context) { var value = context.value, isDisabled = context.isDisabled; if (!value) return; switch (event) { case 'deselect-option': case 'pop-value': case 'remove-value': return "option " + value + ", deselected."; case 'select-option': return isDisabled ? "option " + value + " is disabled. Select another option." : "option " + value + ", selected."; } }; var valueFocusAriaMessage = function valueFocusAriaMessage(_ref) { var focusedValue = _ref.focusedValue, getOptionLabel = _ref.getOptionLabel, selectValue = _ref.selectValue; return "value " + getOptionLabel(focusedValue) + " focused, " + (selectValue.indexOf(focusedValue) + 1) + " of " + selectValue.length + "."; }; var optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) { var focusedOption = _ref2.focusedOption, getOptionLabel = _ref2.getOptionLabel, options = _ref2.options; return "option " + getOptionLabel(focusedOption) + " focused" + (focusedOption.isDisabled ? ' disabled' : '') + ", " + (options.indexOf(focusedOption) + 1) + " of " + options.length + "."; }; var resultsAriaMessage = function resultsAriaMessage(_ref3) { var inputValue = _ref3.inputValue, screenReaderMessage = _ref3.screenReaderMessage; return "" + screenReaderMessage + (inputValue ? ' for search term ' + inputValue : '') + "."; }; var formatGroupLabel = function formatGroupLabel(group) { return group.label; }; var getOptionLabel = function getOptionLabel(option) { return option.label; }; var getOptionValue = function getOptionValue(option) { return option.value; }; var isOptionDisabled = function isOptionDisabled(option) { return !!option.isDisabled; }; function _extends$3() { _extends$3 = 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; }; return _extends$3.apply(this, arguments); } var defaultStyles = { clearIndicator: index.clearIndicatorCSS, container: index.containerCSS, control: index.css, dropdownIndicator: index.dropdownIndicatorCSS, group: index.groupCSS, groupHeading: index.groupHeadingCSS, indicatorsContainer: index.indicatorsContainerCSS, indicatorSeparator: index.indicatorSeparatorCSS, input: index.inputCSS, loadingIndicator: index.loadingIndicatorCSS, loadingMessage: index.loadingMessageCSS, menu: index.menuCSS, menuList: index.menuListCSS, menuPortal: index.menuPortalCSS, multiValue: index.multiValueCSS, multiValueLabel: index.multiValueLabelCSS, multiValueRemove: index.multiValueRemoveCSS, noOptionsMessage: index.noOptionsMessageCSS, option: index.optionCSS, placeholder: index.placeholderCSS, singleValue: index.css$1, valueContainer: index.valueContainerCSS }; // Merge Utility // Allows consumers to extend a base Select with additional styles function mergeStyles(source, target) { if (target === void 0) { target = {}; } // initialize with source styles var styles = _extends$3({}, source); // massage in target styles Object.keys(target).forEach(function (key) { if (source[key]) { styles[key] = function (rsCss, props) { return target[key](source[key](rsCss, props), props); }; } else { styles[key] = target[key]; } }); return styles; } var colors = { primary: '#2684FF', primary75: '#4C9AFF', primary50: '#B2D4FF', primary25: '#DEEBFF', danger: '#DE350B', dangerLight: '#FFBDAD', neutral0: 'hsl(0, 0%, 100%)', neutral5: 'hsl(0, 0%, 95%)', neutral10: 'hsl(0, 0%, 90%)', neutral20: 'hsl(0, 0%, 80%)', neutral30: 'hsl(0, 0%, 70%)', neutral40: 'hsl(0, 0%, 60%)', neutral50: 'hsl(0, 0%, 50%)', neutral60: 'hsl(0, 0%, 40%)', neutral70: 'hsl(0, 0%, 30%)', neutral80: 'hsl(0, 0%, 20%)', neutral90: 'hsl(0, 0%, 10%)' }; var borderRadius = 4; // Used to calculate consistent margin/padding on elements var baseUnit = 4; // The minimum height of the control var controlHeight = 38; // The amount of space between the control and menu */ var menuGutter = baseUnit * 2; var spacing = { baseUnit: baseUnit, controlHeight: controlHeight, menuGutter: menuGutter }; var defaultTheme = { borderRadius: borderRadius, colors: colors, spacing: spacing }; function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _extends$4() { _extends$4 = 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; }; return _extends$4.apply(this, arguments); } function _inheritsLoose$4(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } var defaultProps = { backspaceRemovesValue: true, blurInputOnSelect: utils.isTouchCapable(), captureMenuScroll: !utils.isTouchCapable(), closeMenuOnSelect: true, closeMenuOnScroll: false, components: {}, controlShouldRenderValue: true, escapeClearsValue: false, filterOption: createFilter(), formatGroupLabel: formatGroupLabel, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, isDisabled: false, isLoading: false, isMulti: false, isRtl: false, isSearchable: true, isOptionDisabled: isOptionDisabled, loadingMessage: function loadingMessage() { return 'Loading...'; }, maxMenuHeight: 300, minMenuHeight: 140, menuIsOpen: false, menuPlacement: 'bottom', menuPosition: 'absolute', menuShouldBlockScroll: false, menuShouldScrollIntoView: !utils.isMobileDevice(), noOptionsMessage: function noOptionsMessage() { return 'No options'; }, openMenuOnFocus: false, openMenuOnClick: true, options: [], pageSize: 5, placeholder: 'Select...', screenReaderStatus: function screenReaderStatus(_ref) { var count = _ref.count; return count + " result" + (count !== 1 ? 's' : '') + " available"; }, styles: {}, tabIndex: '0', tabSelectsValue: true }; var instanceId = 1; var Select = /*#__PURE__*/ function (_Component) { _inheritsLoose$4(Select, _Component); // Misc. Instance Properties // ------------------------------ // TODO // Refs // ------------------------------ // Lifecycle // ------------------------------ function Select(_props) { var _this; _this = _Component.call(this, _props) || this; _this.state = { ariaLiveSelection: '', ariaLiveContext: '', focusedOption: null, focusedValue: null, inputIsHidden: false, isFocused: false, menuOptions: { render: [], focusable: [] }, selectValue: [] }; _this.blockOptionHover = false; _this.isComposing = false; _this.clearFocusValueOnUpdate = false; _this.commonProps = void 0; _this.components = void 0; _this.hasGroups = false; _this.initialTouchX = 0; _this.initialTouchY = 0; _this.inputIsHiddenAfterUpdate = void 0; _this.instancePrefix = ''; _this.openAfterFocus = false; _this.scrollToFocusedOptionOnUpdate = false; _this.userIsDragging = void 0; _this.controlRef = null; _this.getControlRef = function (ref) { _this.controlRef = ref; }; _this.focusedOptionRef = null; _this.getFocusedOptionRef = function (ref) { _this.focusedOptionRef = ref; }; _this.menuListRef = null; _this.getMenuListRef = function (ref) { _this.menuListRef = ref; }; _this.inputRef = null; _this.getInputRef = function (ref) { _this.inputRef = ref; }; _this.cacheComponents = function (components) { _this.components = index.defaultComponents({ components: components }); }; _this.focus = _this.focusInput; _this.blur = _this.blurInput; _this.onChange = function (newValue, actionMeta) { var _this$props = _this.props, onChange = _this$props.onChange, name = _this$props.name; onChange(newValue, _extends$4({}, actionMeta, { name: name })); }; _this.setValue = function (newValue, action, option) { if (action === void 0) { action = 'set-value'; } var _this$props2 = _this.props, closeMenuOnSelect = _this$props2.closeMenuOnSelect, isMulti = _this$props2.isMulti; _this.onInputChange('', { action: 'set-value' }); if (closeMenuOnSelect) { _this.inputIsHiddenAfterUpdate = !isMulti; _this.onMenuClose(); } // when the select value should change, we should reset focusedValue _this.clearFocusValueOnUpdate = true; _this.onChange(newValue, { action: action, option: option }); }; _this.selectOption = function (newValue) { var _this$props3 = _this.props, blurInputOnSelect = _this$props3.blurInputOnSelect, isMulti = _this$props3.isMulti; var selectValue = _this.state.selectValue; if (isMulti) { if (_this.isOptionSelected(newValue, selectValue)) { var candidate = _this.getOptionValue(newValue); _this.setValue(selectValue.filter(function (i) { return _this.getOptionValue(i) !== candidate; }), 'deselect-option', newValue); _this.announceAriaLiveSelection({ event: 'deselect-option', context: { value: _this.getOptionLabel(newValue) } }); } else { if (!_this.isOptionDisabled(newValue, selectValue)) { _this.setValue([].concat(selectValue, [newValue]), 'select-option', newValue); _this.announceAriaLiveSelection({ event: 'select-option', context: { value: _this.getOptionLabel(newValue) } }); } else { // announce that option is disabled _this.announceAriaLiveSelection({ event: 'select-option', context: { value: _this.getOptionLabel(newValue), isDisabled: true } }); } } } else { if (!_this.isOptionDisabled(newValue, selectValue)) { _this.setValue(newValue, 'select-option'); _this.announceAriaLiveSelection({ event: 'select-option', context: { value: _this.getOptionLabel(newValue) } }); } else { // announce that option is disabled _this.announceAriaLiveSelection({ event: 'select-option', context: { value: _this.getOptionLabel(newValue), isDisabled: true } }); } } if (blurInputOnSelect) { _this.blurInput(); } }; _this.removeValue = function (removedValue) { var selectValue = _this.state.selectValue; var candidate = _this.getOptionValue(removedValue); var newValue = selectValue.filter(function (i) { return _this.getOptionValue(i) !== candidate; }); _this.onChange(newValue.length ? newValue : null, { action: 'remove-value', removedValue: removedValue }); _this.announceAriaLiveSelection({ event: 'remove-value', context: { value: removedValue ? _this.getOptionLabel(removedValue) : '' } }); _this.focusInput(); }; _this.clearValue = function () { var isMulti = _this.props.isMulti; _this.onChange(isMulti ? [] : null, { action: 'clear' }); }; _this.popValue = function () { var selectValue = _this.state.selectValue; var lastSelectedValue = selectValue[selectValue.length - 1]; var newValue = selectValue.slice(0, selectValue.length - 1); _this.announceAriaLiveSelection({ event: 'pop-value', context: { value: lastSelectedValue ? _this.getOptionLabel(lastSelectedValue) : '' } }); _this.onChange(newValue.length ? newValue : null, { action: 'pop-value', removedValue: lastSelectedValue }); }; _this.getOptionLabel = function (data) { return _this.props.getOptionLabel(data); }; _this.getOptionValue = function (data) { return _this.props.getOptionValue(data); }; _this.getStyles = function (key, props) { var base = defaultStyles[key](props); base.boxSizing = 'border-box'; var custom = _this.props.styles[key]; return custom ? custom(base, props) : base; }; _this.getElementId = function (element) { return _this.instancePrefix + "-" + element; }; _this.getActiveDescendentId = function () { var menuIsOpen = _this.props.menuIsOpen; var _this$state = _this.state, menuOptions = _this$state.menuOptions, focusedOption = _this$state.focusedOption; if (!focusedOption || !menuIsOpen) return undefined; var index = menuOptions.focusable.indexOf(focusedOption); var option = menuOptions.render[index]; return option && option.key; }; _this.announceAriaLiveSelection = function (_ref2) { var event = _ref2.event, context = _ref2.context; _this.setState({ ariaLiveSelection: valueEventAriaMessage(event, context) }); }; _this.announceAriaLiveContext = function (_ref3) { var event = _ref3.event, context = _ref3.context; _this.setState({ ariaLiveContext: instructionsAriaMessage(event, _extends$4({}, context, { label: _this.props['aria-label'] })) }); }; _this.onMenuMouseDown = function (event) { if (event.button !== 0) { return; } event.stopPropagation(); event.preventDefault(); _this.focusInput(); }; _this.onMenuMouseMove = function (event) { _this.blockOptionHover = false; }; _this.onControlMouseDown = function (event) { var openMenuOnClick = _this.props.openMenuOnClick; if (!_this.state.isFocused) { if (openMenuOnClick) { _this.openAfterFocus = true; } _this.focusInput(); } else if (!_this.props.menuIsOpen) { if (openMenuOnClick) { _this.openMenu('first'); } } else { if ( // $FlowFixMe event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { _this.onMenuClose(); } } if ( // $FlowFixMe event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { event.preventDefault(); } }; _this.onDropdownIndicatorMouseDown = function (event) { // ignore mouse events that weren't triggered by the primary button if (event && event.type === 'mousedown' && event.button !== 0) { return; } if (_this.props.isDisabled) return; var _this$props4 = _this.props, isMulti = _this$props4.isMulti, menuIsOpen = _this$props4.menuIsOpen; _this.focusInput(); if (menuIsOpen) { _this.inputIsHiddenAfterUpdate = !isMulti; _this.onMenuClose(); } else { _this.openMenu('first'); } event.preventDefault(); event.stopPropagation(); }; _this.onClearIndicatorMouseDown = function (event) { // ignore mouse events that weren't triggered by the primary button if (event && event.type === 'mousedown' && event.button !== 0) { return; } _this.clearValue(); event.stopPropagation(); _this.openAfterFocus = false; if (event.type === 'touchend') { _this.focusInput(); } else { setTimeout(function () { return _this.focusInput(); }); } }; _this.onScroll = function (event) { if (typeof _this.props.closeMenuOnScroll === 'boolean') { if (event.target instanceof HTMLElement && utils.isDocumentElement(event.target)) { _this.props.onMenuClose(); } } else if (typeof _this.props.closeMenuOnScroll === 'function') { if (_this.props.closeMenuOnScroll(event)) { _this.props.onMenuClose(); } } }; _this.onCompositionStart = function () { _this.isComposing = true; }; _this.onCompositionEnd = function () { _this.isComposing = false; }; _this.onTouchStart = function (_ref4) { var touches = _ref4.touches; var touch = touches.item(0); if (!touch) { return; } _this.initialTouchX = touch.clientX; _this.initialTouchY = touch.clientY; _this.userIsDragging = false; }; _this.onTouchMove = function (_ref5) { var touches = _ref5.touches; var touch = touches.item(0); if (!touch) { return; } var deltaX = Math.abs(touch.clientX - _this.initialTouchX); var deltaY = Math.abs(touch.clientY - _this.initialTouchY); var moveThreshold = 5; _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold; }; _this.onTouchEnd = function (event) { if (_this.userIsDragging) return; // close the menu if the user taps outside // we're checking on event.target here instead of event.currentTarget, because we want to assert information // on events on child elements, not the document (which we've attached this handler to). if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) { _this.blurInput(); } // reset move vars _this.initialTouchX = 0; _this.initialTouchY = 0; }; _this.onControlTouchEnd = function (event) { if (_this.userIsDragging) return; _this.onControlMouseDown(event); }; _this.onClearIndicatorTouchEnd = function (event) { if (_this.userIsDragging) return; _this.onClearIndicatorMouseDown(event); }; _this.onDropdownIndicatorTouchEnd = function (event) { if (_this.userIsDragging) return; _this.onDropdownIndicatorMouseDown(event); }; _this.handleInputChange = function (event) { var inputValue = event.currentTarget.value; _this.inputIsHiddenAfterUpdate = false; _this.onInputChange(inputValue, { action: 'input-change' }); _this.onMenuOpen(); }; _this.onInputFocus = function (event) { var _this$props5 = _this.props, isSearchable = _this$props5.isSearchable, isMulti = _this$props5.isMulti; if (_this.props.onFocus) { _this.props.onFocus(event); } _this.inputIsHiddenAfterUpdate = false; _this.announceAriaLiveContext({ event: 'input', context: { isSearchable: isSearchable, isMulti: isMulti } }); _this.setState({ isFocused: true }); if (_this.openAfterFocus || _this.props.openMenuOnFocus) { _this.openMenu('first'); } _this.openAfterFocus = false; }; _this.onInputBlur = function (event) { if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) { _this.inputRef.focus(); return; } if (_this.props.onBlur) { _this.props.onBlur(event); } _this.onInputChange('', { action: 'input-blur' }); _this.onMenuClose(); _this.setState({ focusedValue: null, isFocused: false }); }; _this.onOptionHover = function (focusedOption) { if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) { return; } _this.setState({ focusedOption: focusedOption }); }; _this.shouldHideSelectedOptions = function () { var _this$props6 = _this.props, hideSelectedOptions = _this$props6.hideSelectedOptions, isMulti = _this$props6.isMulti; if (hideSelectedOptions === undefined) return isMulti; return hideSelectedOptions; }; _this.onKeyDown = function (event) { var _this$props7 = _this.props, isMulti = _this$props7.isMulti, backspaceRemovesValue = _this$props7.backspaceRemovesValue, escapeClearsValue = _this$props7.escapeClearsValue, inputValue = _this$props7.inputValue, isClearable = _this$props7.isClearable, isDisabled = _this$props7.isDisabled, menuIsOpen = _this$props7.menuIsOpen, onKeyDown = _this$props7.onKeyDown, tabSelectsValue = _this$props7.tabSelectsValue, openMenuOnFocus = _this$props7.openMenuOnFocus; var _this$state2 = _this.state, focusedOption = _this$state2.focusedOption, focusedValue = _this$state2.focusedValue, selectValue = _this$state2.selectValue; if (isDisabled) return; if (typeof onKeyDown === 'function') { onKeyDown(event); if (event.defaultPrevented) { return; } } // Block option hover events when the user has just pressed a key _this.blockOptionHover = true; switch (event.key) { case 'ArrowLeft': if (!isMulti || inputValue) return; _this.focusValue('previous'); break; case 'ArrowRight': if (!isMulti || inputValue) return; _this.focusValue('next'); break; case 'Delete': case 'Backspace': if (inputValue) return; if (focusedValue) { _this.removeValue(focusedValue); } else { if (!backspaceRemovesValue) return; if (isMulti) { _this.popValue(); } else if (isClearable) { _this.clearValue(); } } break; case 'Tab': if (_this.isComposing) return; if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption || // don't capture the event if the menu opens on focus and the focused // option is already selected; it breaks the flow of navigation openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) { return; } _this.selectOption(focusedOption); break; case 'Enter': if (event.keyCode === 229) { // ignore the keydown event from an Input Method Editor(IME) // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode break; } if (menuIsOpen) { if (!focusedOption) return; if (_this.isComposing) return; _this.selectOption(focusedOption); break; } return; case 'Escape': if (menuIsOpen) { _this.inputIsHiddenAfterUpdate = false; _this.onInputChange('', { action: 'menu-close' }); _this.onMenuClose(); } else if (isClearable && escapeClearsValue) { _this.clearValue(); } break; case ' ': // space if (inputValue) { return; } if (!menuIsOpen) { _this.openMenu('first'); break; } if (!focusedOption) return; _this.selectOption(focusedOption); break; case 'ArrowUp': if (menuIsOpen) { _this.focusOption('up'); } else { _this.openMenu('last'); } break; case 'ArrowDown': if (menuIsOpen) { _this.focusOption('down'); } else { _this.openMenu('first'); } break; case 'PageUp': if (!menuIsOpen) return; _this.focusOption('pageup'); break; case 'PageDown': if (!menuIsOpen) return; _this.focusOption('pagedown'); break; case 'Home': if (!menuIsOpen) return; _this.focusOption('first'); break; case 'End': if (!menuIsOpen) return; _this.focusOption('last'); break; default: return; } event.preventDefault(); }; _this.buildMenuOptions = function (props, selectValue) { var _props$inputValue = props.inputValue, inputValue = _props$inputValue === void 0 ? '' : _props$inputValue, options = props.options; var toOption = function toOption(option, id) { var isDisabled = _this.isOptionDisabled(option, selectValue); var isSelected = _this.isOptionSelected(option, selectValue); var label = _this.getOptionLabel(option); var value = _this.getOptionValue(option); if (_this.shouldHideSelectedOptions() && isSelected || !_this.filterOption({ label: label, value: value, data: option }, inputValue)) { return; } var onHover = isDisabled ? undefined : function () { return _this.onOptionHover(option); }; var onSelect = isDisabled ? undefined : function () { return _this.selectOption(option); }; var optionId = _this.getElementId('option') + "-" + id; return { innerProps: { id: optionId, onClick: onSelect, onMouseMove: onHover, onMouseOver: onHover, tabIndex: -1 }, data: option, isDisabled: isDisabled, isSelected: isSelected, key: optionId, label: label, type: 'option', value: value }; }; return options.reduce(function (acc, item, itemIndex) { if (item.options) { // TODO needs a tidier implementation if (!_this.hasGroups) _this.hasGroups = true; var items = item.options; var children = items.map(function (child, i) { var option = toOption(child, itemIndex + "-" + i); if (option) acc.focusable.push(child); return option; }).filter(Boolean); if (children.length) { var groupId = _this.getElementId('group') + "-" + itemIndex; acc.render.push({ type: 'group', key: groupId, data: item, options: children }); } } else { var option = toOption(item, "" + itemIndex); if (option) { acc.render.push(option); acc.focusable.push(item); } } return acc; }, { render: [], focusable: [] }); }; var _value = _props.value; _this.cacheComponents = memoizeOne(_this.cacheComponents, index.exportedEqual).bind(_assertThisInitialized(_assertThisInitialized(_this))); _this.cacheComponents(_props.components); _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId); var _selectValue = utils.cleanValue(_value); _this.buildMenuOptions = memoizeOne(_this.buildMenuOptions, function (newArgs, lastArgs) { var _ref6 = newArgs, newProps = _ref6[0], newSelectValue = _ref6[1]; var _ref7 = lastArgs, lastProps = _ref7[0], lastSelectValue = _ref7[1]; return index.exportedEqual(newSelectValue, lastSelectValue) && index.exportedEqual(newProps.inputValue, lastProps.inputValue) && index.exportedEqual(newProps.options, lastProps.options); }).bind(_assertThisInitialized(_assertThisInitialized(_this))); var _menuOptions = _props.menuIsOpen ? _this.buildMenuOptions(_props, _selectValue) : { render: [], focusable: [] }; _this.state.menuOptions = _menuOptions; _this.state.selectValue = _selectValue; return _this; } var _proto = Select.prototype; _proto.componentDidMount = function componentDidMount() { this.startListeningComposition(); this.startListeningToTouch(); if (this.props.closeMenuOnScroll && document && document.addEventListener) { // Listen to all scroll events, and filter them out inside of 'onScroll' document.addEventListener('scroll', this.onScroll, true); } if (this.props.autoFocus) { this.focusInput(); } }; _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) { var _this$props8 = this.props, options = _this$props8.options, value = _this$props8.value, menuIsOpen = _this$props8.menuIsOpen, inputValue = _this$props8.inputValue; // re-cache custom components this.cacheComponents(nextProps.components); // rebuild the menu options if (nextProps.value !== value || nextProps.options !== options || nextProps.menuIsOpen !== menuIsOpen || nextProps.inputValue !== inputValue) { var selectValue = utils.cleanValue(nextProps.value); var menuOptions = nextProps.menuIsOpen ? this.buildMenuOptions(nextProps, selectValue) : { render: [], focusable: [] }; var focusedValue = this.getNextFocusedValue(selectValue); var focusedOption = this.getNextFocusedOption(menuOptions.focusable); this.setState({ menuOptions: menuOptions, selectValue: selectValue, focusedOption: focusedOption, focusedValue: focusedValue }); } // some updates should toggle the state of the input visibility if (this.inputIsHiddenAfterUpdate != null) { this.setState({ inputIsHidden: this.inputIsHiddenAfterUpdate }); delete this.inputIsHiddenAfterUpdate; } }; _proto.componentDidUpdate = function componentDidUpdate(prevProps) { var _this$props9 = this.props, isDisabled = _this$props9.isDisabled, menuIsOpen = _this$props9.menuIsOpen; var isFocused = this.state.isFocused; if ( // ensure focus is restored correctly when the control becomes enabled isFocused && !isDisabled && prevProps.isDisabled || // ensure focus is on the Input when the menu opens isFocused && menuIsOpen && !prevProps.menuIsOpen) { this.focusInput(); } // scroll the focused option into view if necessary if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) { utils.scrollIntoView(this.menuListRef, this.focusedOptionRef); this.scrollToFocusedOptionOnUpdate = false; } }; _proto.componentWillUnmount = function componentWillUnmount() { this.stopListeningComposition(); this.stopListeningToTouch(); document.removeEventListener('scroll', this.onScroll, true); }; // ============================== // Consumer Handlers // ============================== _proto.onMenuOpen = function onMenuOpen() { this.props.onMenuOpen(); }; _proto.onMenuClose = function onMenuClose() { var _this$props10 = this.props, isSearchable = _this$props10.isSearchable, isMulti = _this$props10.isMulti; this.announceAriaLiveContext({ event: 'input', context: { isSearchable: isSearchable, isMulti: isMulti } }); this.onInputChange('', { action: 'menu-close' }); this.props.onMenuClose(); }; _proto.onInputChange = function onInputChange(newValue, actionMeta) { this.props.onInputChange(newValue, actionMeta); } // ============================== // Methods // ============================== ; _proto.focusInput = function focusInput() { if (!this.inputRef) return; this.inputRef.focus(); }; _proto.blurInput = function blurInput() { if (!this.inputRef) return; this.inputRef.blur(); } // aliased for consumers ; _proto.openMenu = function openMenu(focusOption) { var _this2 = this; var _this$state3 = this.state, selectValue = _this$state3.selectValue, isFocused = _this$state3.isFocused; var menuOptions = this.buildMenuOptions(this.props, selectValue); var isMulti = this.props.isMulti; var openAtIndex = focusOption === 'first' ? 0 : menuOptions.focusable.length - 1; if (!isMulti) { var selectedIndex = menuOptions.focusable.indexOf(selectValue[0]); if (selectedIndex > -1) { openAtIndex = selectedIndex; } } // only scroll if the menu isn't already open this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef); this.inputIsHiddenAfterUpdate = false; this.setState({ menuOptions: menuOptions, focusedValue: null, focusedOption: menuOptions.focusable[openAtIndex] }, function () { _this2.onMenuOpen(); _this2.announceAriaLiveContext({ event: 'menu' }); }); }; _proto.focusValue = function focusValue(direction) { var _this$props11 = this.props, isMulti = _this$props11.isMulti, isSearchable = _this$props11.isSearchable; var _this$state4 = this.state, selectValue = _this$state4.selectValue, focusedValue = _this$state4.focusedValue; // Only multiselects support value focusing if (!isMulti) return; this.setState({ focusedOption: null }); var focusedIndex = selectValue.indexOf(focusedValue); if (!focusedValue) { focusedIndex = -1; this.announceAriaLiveContext({ event: 'value' }); } var lastIndex = selectValue.length - 1; var nextFocus = -1; if (!selectValue.length) return; switch (direction) { case 'previous': if (focusedIndex === 0) { // don't cycle from the start to the end nextFocus = 0; } else if (focusedIndex === -1) { // if nothing is focused, focus the last value first nextFocus = lastIndex; } else { nextFocus = focusedIndex - 1; } break; case 'next': if (focusedIndex > -1 && focusedIndex < lastIndex) { nextFocus = focusedIndex + 1; } break; } if (nextFocus === -1) { this.announceAriaLiveContext({ event: 'input', context: { isSearchable: isSearchable, isMulti: isMulti } }); } this.setState({ inputIsHidden: nextFocus !== -1, focusedValue: selectValue[nextFocus] }); }; _proto.focusOption = function focusOption(direction) { if (direction === void 0) { direction = 'first'; } var pageSize = this.props.pageSize; var _this$state5 = this.state, focusedOption = _this$state5.focusedOption, menuOptions = _this$state5.menuOptions; var options = menuOptions.focusable; if (!options.length) return; var nextFocus = 0; // handles 'first' var focusedIndex = options.indexOf(focusedOption); if (!focusedOption) { focusedIndex = -1; this.announceAriaLiveContext({ event: 'menu' }); } if (direction === 'up') { nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1; } else if (direction === 'down') { nextFocus = (focusedIndex + 1) % options.length; } else if (direction === 'pageup') { nextFocus = focusedIndex - pageSize; if (nextFocus < 0) nextFocus = 0; } else if (direction === 'pagedown') { nextFocus = focusedIndex + pageSize; if (nextFocus > options.length - 1) nextFocus = options.length - 1; } else if (direction === 'last') { nextFocus = options.length - 1; } this.scrollToFocusedOptionOnUpdate = true; this.setState({ focusedOption: options[nextFocus], focusedValue: null }); this.announceAriaLiveContext({ event: 'menu', context: { isDisabled: isOptionDisabled(options[nextFocus]) } }); }; // ============================== // Getters // ============================== _proto.getTheme = function getTheme() { // Use the default theme if there are no customizations. if (!this.props.theme) { return defaultTheme; } // If the theme prop is a function, assume the function // knows how to merge the passed-in default theme with // its own modifications. if (typeof this.props.theme === 'function') { return this.props.theme(defaultTheme); } // Otherwise, if a plain theme object was passed in, // overlay it with the default theme. return _extends$4({}, defaultTheme, this.props.theme); }; _proto.getCommonProps = function getCommonProps() { var clearValue = this.clearValue, getStyles = this.getStyles, setValue = this.setValue, selectOption = this.selectOption, props = this.props; var classNamePrefix = props.classNamePrefix, isMulti = props.isMulti, isRtl = props.isRtl, options = props.options; var selectValue = this.state.selectValue; var hasValue = this.hasValue(); var getValue = function getValue() { return selectValue; }; var cx = utils.classNames.bind(null, classNamePrefix); return { cx: cx, clearValue: clearValue, getStyles: getStyles, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, setValue: setValue, selectProps: props, theme: this.getTheme() }; }; _proto.getNextFocusedValue = function getNextFocusedValue(nextSelectValue) { if (this.clearFocusValueOnUpdate) { this.clearFocusValueOnUpdate = false; return null; } var _this$state6 = this.state, focusedValue = _this$state6.focusedValue, lastSelectValue = _this$state6.selectValue; var lastFocusedIndex = lastSelectValue.indexOf(focusedValue); if (lastFocusedIndex > -1) { var nextFocusedIndex = nextSelectValue.indexOf(focusedValue); if (nextFocusedIndex > -1) { // the focused value is still in the selectValue, return it return focusedValue; } else if (lastFocusedIndex < nextSelectValue.length) { // the focusedValue is not present in the next selectValue array by // reference, so return the new value at the same index return nextSelectValue[lastFocusedIndex]; } } return null; }; _proto.getNextFocusedOption = function getNextFocusedOption(options) { var lastFocusedOption = this.state.focusedOption; return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0]; }; _proto.hasValue = function hasValue() { var selectValue = this.state.selectValue; return selectValue.length > 0; }; _proto.hasOptions = function hasOptions() { return !!this.state.menuOptions.render.length; }; _proto.countOptions = function countOptions() { return this.state.menuOptions.focusable.length; }; _proto.isClearable = function isClearable() { var _this$props12 = this.props, isClearable = _this$props12.isClearable, isMulti = _this$props12.isMulti; // single select, by default, IS NOT clearable // multi select, by default, IS clearable if (isClearable === undefined) return isMulti; return isClearable; }; _proto.isOptionDisabled = function isOptionDisabled(option, selectValue) { return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false; }; _proto.isOptionSelected = function isOptionSelected(option, selectValue) { var _this3 = this; if (selectValue.indexOf(option) > -1) return true; if (typeof this.props.isOptionSelected === 'function') { return this.props.isOptionSelected(option, selectValue); } var candidate = this.getOptionValue(option); return selectValue.some(function (i) { return _this3.getOptionValue(i) === candidate; }); }; _proto.filterOption = function filterOption(option, inputValue) { return this.props.filterOption ? this.props.filterOption(option, inputValue) : true; }; _proto.formatOptionLabel = function formatOptionLabel(data, context) { if (typeof this.props.formatOptionLabel === 'function') { var inputValue = this.props.inputValue; var selectValue = this.state.selectValue; return this.props.formatOptionLabel(data, { context: context, inputValue: inputValue, selectValue: selectValue }); } else { return this.getOptionLabel(data); } }; _proto.formatGroupLabel = function formatGroupLabel(data) { return this.props.formatGroupLabel(data); } // ============================== // Mouse Handlers // ============================== ; // ============================== // Composition Handlers // ============================== _proto.startListeningComposition = function startListeningComposition() { if (document && document.addEventListener) { document.addEventListener('compositionstart', this.onCompositionStart, false); document.addEventListener('compositionend', this.onCompositionEnd, false); } }; _proto.stopListeningComposition = function stopListeningComposition() { if (document && document.removeEventListener) { document.removeEventListener('compositionstart', this.onCompositionStart); document.removeEventListener('compositionend', this.onCompositionEnd); } }; // ============================== // Touch Handlers // ============================== _proto.startListeningToTouch = function startListeningToTouch() { if (document && document.addEventListener) { document.addEventListener('touchstart', this.onTouchStart, false); document.addEventListener('touchmove', this.onTouchMove, false); document.addEventListener('touchend', this.onTouchEnd, false); } }; _proto.stopListeningToTouch = function stopListeningToTouch() { if (document && document.removeEventListener) { document.removeEventListener('touchstart', this.onTouchStart); document.removeEventListener('touchmove', this.onTouchMove); document.removeEventListener('touchend', this.onTouchEnd); } }; // ============================== // Renderers // ============================== _proto.constructAriaLiveMessage = function constructAriaLiveMessage() { var _this$state7 = this.state, ariaLiveContext = _this$state7.ariaLiveContext, selectValue = _this$state7.selectValue, focusedValue = _this$state7.focusedValue, focusedOption = _this$state7.focusedOption; var _this$props13 = this.props, options = _this$props13.options, menuIsOpen = _this$props13.menuIsOpen, inputValue = _this$props13.inputValue, screenReaderStatus = _this$props13.screenReaderStatus; // An aria live message representing the currently focused value in the select. var focusedValueMsg = focusedValue ? valueFocusAriaMessage({ focusedValue: focusedValue, getOptionLabel: this.getOptionLabel, selectValue: selectValue }) : ''; // An aria live message representing the currently focused option in the select. var focusedOptionMsg = focusedOption && menuIsOpen ? optionFocusAriaMessage({ focusedOption: focusedOption, getOptionLabel: this.getOptionLabel, options: options }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue. var resultsMsg = resultsAriaMessage({ inputValue: inputValue, screenReaderMessage: screenReaderStatus({ count: this.countOptions() }) }); return focusedValueMsg + " " + focusedOptionMsg + " " + resultsMsg + " " + ariaLiveContext; }; _proto.renderInput = function renderInput() { var _this$props14 = this.props, isDisabled = _this$props14.isDisabled, isSearchable = _this$props14.isSearchable, inputId = _this$props14.inputId, inputValue = _this$props14.inputValue, tabIndex = _this$props14.tabIndex; var Input = this.components.Input; var inputIsHidden = this.state.inputIsHidden; var id = inputId || this.getElementId('input'); // aria attributes makes the JSX "noisy", separated for clarity var ariaAttributes = { 'aria-autocomplete': 'list', 'aria-label': this.props['aria-label'], 'aria-labelledby': this.props['aria-labelledby'] }; if (!isSearchable) { // use a dummy input to maintain focus/blur functionality return React__default.createElement(DummyInput, _extends$4({ id: id, innerRef: this.getInputRef, onBlur: this.onInputBlur, onChange: utils.noop, onFocus: this.onInputFocus, readOnly: true, disabled: isDisabled, tabIndex: tabIndex, value: "" }, ariaAttributes)); } var _this$commonProps = this.commonProps, cx = _this$commonProps.cx, theme = _this$commonProps.theme, selectProps = _this$commonProps.selectProps; return React__default.createElement(Input, _extends$4({ autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", cx: cx, getStyles: this.getStyles, id: id, innerRef: this.getInputRef, isDisabled: isDisabled, isHidden: inputIsHidden, onBlur: this.onInputBlur, onChange: this.handleInputChange, onFocus: this.onInputFocus, selectProps: selectProps, spellCheck: "false", tabIndex: tabIndex, theme: theme, type: "text", value: inputValue }, ariaAttributes)); }; _proto.renderPlaceholderOrValue = function renderPlaceholderOrValue() { var _this4 = this; var _this$components = this.components, MultiValue = _this$components.MultiValue, MultiValueContainer = _this$components.MultiValueContainer, MultiValueLabel = _this$components.MultiValueLabel, MultiValueRemove = _this$components.MultiValueRemove, SingleValue = _this$components.SingleValue, Placeholder = _this$components.Placeholder; var commonProps = this.commonProps; var _this$props15 = this.props, controlShouldRenderValue = _this$props15.controlShouldRenderValue, isDisabled = _this$props15.isDisabled, isMulti = _this$props15.isMulti, inputValue = _this$props15.inputValue, placeholder = _this$props15.placeholder; var _this$state8 = this.state, selectValue = _this$state8.selectValue, focusedValue = _this$state8.focusedValue, isFocused = _this$state8.isFocused; if (!this.hasValue() || !controlShouldRenderValue) { return inputValue ? null : React__default.createElement(Placeholder, _extends$4({}, commonProps, { key: "placeholder", isDisabled: isDisabled, isFocused: isFocused }), placeholder); } if (isMulti) { var selectValues = selectValue.map(function (opt, index) { var isOptionFocused = opt === focusedValue; return React__default.createElement(MultiValue, _extends$4({}, commonProps, { components: { Container: MultiValueContainer, Label: MultiValueLabel, Remove: MultiValueRemove }, isFocused: isOptionFocused, isDisabled: isDisabled, key: _this4.getOptionValue(opt), index: index, removeProps: { onClick: function onClick() { return _this4.removeValue(opt); }, onTouchEnd: function onTouchEnd() { return _this4.removeValue(opt); }, onMouseDown: function onMouseDown(e) { e.preventDefault(); e.stopPropagation(); } }, data: opt }), _this4.formatOptionLabel(opt, 'value')); }); return selectValues; } if (inputValue) { return null; } var singleValue = selectValue[0]; return React__default.createElement(SingleValue, _extends$4({}, commonProps, { data: singleValue, isDisabled: isDisabled }), this.formatOptionLabel(singleValue, 'value')); }; _proto.renderClearIndicator = function renderClearIndicator() { var ClearIndicator = this.components.ClearIndicator; var commonProps = this.commonProps; var _this$props16 = this.props, isDisabled = _this$props16.isDisabled, isLoading = _this$props16.isLoading; var isFocused = this.state.isFocused; if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) { return null; } var innerProps = { onMouseDown: this.onClearIndicatorMouseDown, onTouchEnd: this.onClearIndicatorTouchEnd, 'aria-hidden': 'true' }; return React__default.createElement(ClearIndicator, _extends$4({}, commonProps, { innerProps: innerProps, isFocused: isFocused })); }; _proto.renderLoadingIndicator = function renderLoadingIndicator() { var LoadingIndicator = this.components.LoadingIndicator; var commonProps = this.commonProps; var _this$props17 = this.props, isDisabled = _this$props17.isDisabled, isLoading = _this$props17.isLoading; var isFocused = this.state.isFocused; if (!LoadingIndicator || !isLoading) return null; var innerProps = { 'aria-hidden': 'true' }; return React__default.createElement(LoadingIndicator, _extends$4({}, commonProps, { innerProps: innerProps, isDisabled: isDisabled, isFocused: isFocused })); }; _proto.renderIndicatorSeparator = function renderIndicatorSeparator() { var _this$components2 = this.components, DropdownIndicator = _this$components2.DropdownIndicator, IndicatorSeparator = _this$components2.IndicatorSeparator; // separator doesn't make sense without the dropdown indicator if (!DropdownIndicator || !IndicatorSeparator) return null; var commonProps = this.commonProps; var isDisabled = this.props.isDisabled; var isFocused = this.state.isFocused; return React__default.createElement(IndicatorSeparator, _extends$4({}, commonProps, { isDisabled: isDisabled, isFocused: isFocused })); }; _proto.renderDropdownIndicator = function renderDropdownIndicator() { var DropdownIndicator = this.components.DropdownIndicator; if (!DropdownIndicator) return null; var commonProps = this.commonProps; var isDisabled = this.props.isDisabled; var isFocused = this.state.isFocused; var innerProps = { onMouseDown: this.onDropdownIndicatorMouseDown, onTouchEnd: this.onDropdownIndicatorTouchEnd, 'aria-hidden': 'true' }; return React__default.createElement(DropdownIndicator, _extends$4({}, commonProps, { innerProps: innerProps, isDisabled: isDisabled, isFocused: isFocused })); }; _proto.renderMenu = function renderMenu() { var _this5 = this; var _this$components3 = this.components, Group = _this$components3.Group, GroupHeading = _this$components3.GroupHeading, Menu = _this$components3.Menu, MenuList = _this$components3.MenuList, MenuPortal = _this$components3.MenuPortal, LoadingMessage = _this$components3.LoadingMessage, NoOptionsMessage = _this$components3.NoOptionsMessage, Option = _this$components3.Option; var commonProps = this.commonProps; var _this$state9 = this.state, focusedOption = _this$state9.focusedOption, menuOptions = _this$state9.menuOptions; var _this$props18 = this.props, captureMenuScroll = _this$props18.captureMenuScroll, inputValue = _this$props18.inputValue, isLoading = _this$props18.isLoading, loadingMessage = _this$props18.loadingMessage, minMenuHeight = _this$props18.minMenuHeight, maxMenuHeight = _this$props18.maxMenuHeight, menuIsOpen = _this$props18.menuIsOpen, menuPlacement = _this$props18.menuPlacement, menuPosition = _this$props18.menuPosition, menuPortalTarget = _this$props18.menuPortalTarget, menuShouldBlockScroll = _this$props18.menuShouldBlockScroll, menuShouldScrollIntoView = _this$props18.menuShouldScrollIntoView, noOptionsMessage = _this$props18.noOptionsMessage, onMenuScrollToTop = _this$props18.onMenuScrollToTop, onMenuScrollToBottom = _this$props18.onMenuScrollToBottom; if (!menuIsOpen) return null; // TODO: Internal Option Type here var render = function render(props) { // for performance, the menu options in state aren't changed when the // focused option changes so we calculate additional props based on that var isFocused = focusedOption === props.data; props.innerRef = isFocused ? _this5.getFocusedOptionRef : undefined; return React__default.createElement(Option, _extends$4({}, commonProps, props, { isFocused: isFocused }), _this5.formatOptionLabel(props.data, 'menu')); }; var menuUI; if (this.hasOptions()) { menuUI = menuOptions.render.map(function (item) { if (item.type === 'group') { var type = item.type, group = _objectWithoutPropertiesLoose$2(item, ["type"]); var headingId = item.key + "-heading"; return React__default.createElement(Group, _extends$4({}, commonProps, group, { Heading: GroupHeading, headingProps: { id: headingId }, label: _this5.formatGroupLabel(item.data) }), item.options.map(function (option) { return render(option); })); } else if (item.type === 'option') { return render(item); } }); } else if (isLoading) { var message = loadingMessage({ inputValue: inputValue }); if (message === null) return null; menuUI = React__default.createElement(LoadingMessage, commonProps, message); } else { var _message = noOptionsMessage({ inputValue: inputValue }); if (_message === null) return null; menuUI = React__default.createElement(NoOptionsMessage, commonProps, _message); } var menuPlacementProps = { minMenuHeight: minMenuHeight, maxMenuHeight: maxMenuHeight, menuPlacement: menuPlacement, menuPosition: menuPosition, menuShouldScrollIntoView: menuShouldScrollIntoView }; var menuElement = React__default.createElement(index.MenuPlacer, _extends$4({}, commonProps, menuPlacementProps), function (_ref8) { var ref = _ref8.ref, _ref8$placerProps = _ref8.placerProps, placement = _ref8$placerProps.placement, maxHeight = _ref8$placerProps.maxHeight; return React__default.createElement(Menu, _extends$4({}, commonProps, menuPlacementProps, { innerRef: ref, innerProps: { onMouseDown: _this5.onMenuMouseDown, onMouseMove: _this5.onMenuMouseMove }, isLoading: isLoading, placement: placement }), React__default.createElement(ScrollCaptorSwitch, { isEnabled: captureMenuScroll, onTopArrive: onMenuScrollToTop, onBottomArrive: onMenuScrollToBottom }, React__default.createElement(ScrollBlock, { isEnabled: menuShouldBlockScroll }, React__default.createElement(MenuList, _extends$4({}, commonProps, { innerRef: _this5.getMenuListRef, isLoading: isLoading, maxHeight: maxHeight }), menuUI)))); }); // positioning behaviour is almost identical for portalled and fixed, // so we use the same component. the actual portalling logic is forked // within the component based on `menuPosition` return menuPortalTarget || menuPosition === 'fixed' ? React__default.createElement(MenuPortal, _extends$4({}, commonProps, { appendTo: menuPortalTarget, controlElement: this.controlRef, menuPlacement: menuPlacement, menuPosition: menuPosition }), menuElement) : menuElement; }; _proto.renderFormField = function renderFormField() { var _this6 = this; var _this$props19 = this.props, delimiter = _this$props19.delimiter, isDisabled = _this$props19.isDisabled, isMulti = _this$props19.isMulti, name = _this$props19.name; var selectValue = this.state.selectValue; if (!name || isDisabled) return; if (isMulti) { if (delimiter) { var value = selectValue.map(function (opt) { return _this6.getOptionValue(opt); }).join(delimiter); return React__default.createElement("input", { name: name, type: "hidden", value: value }); } else { var input = selectValue.length > 0 ? selectValue.map(function (opt, i) { return React__default.createElement("input", { key: "i-" + i, name: name, type: "hidden", value: _this6.getOptionValue(opt) }); }) : React__default.createElement("input", { name: name, type: "hidden" }); return React__default.createElement("div", null, input); } } else { var _value2 = selectValue[0] ? this.getOptionValue(selectValue[0]) : ''; return React__default.createElement("input", { name: name, type: "hidden", value: _value2 }); } }; _proto.renderLiveRegion = function renderLiveRegion() { if (!this.state.isFocused) return null; return React__default.createElement(A11yText, { "aria-live": "polite" }, React__default.createElement("p", { id: "aria-selection-event" }, "\xA0", this.state.ariaLiveSelection), React__default.createElement("p", { id: "aria-context" }, "\xA0", this.constructAriaLiveMessage())); }; _proto.render = function render() { var _this$components4 = this.components, Control = _this$components4.Control, IndicatorsContainer = _this$components4.IndicatorsContainer, SelectContainer = _this$components4.SelectContainer, ValueContainer = _this$components4.ValueContainer; var _this$props20 = this.props, className = _this$props20.className, id = _this$props20.id, isDisabled = _this$props20.isDisabled, menuIsOpen = _this$props20.menuIsOpen; var isFocused = this.state.isFocused; var commonProps = this.commonProps = this.getCommonProps(); return React__default.createElement(SelectContainer, _extends$4({}, commonProps, { className: className, innerProps: { id: id, onKeyDown: this.onKeyDown }, isDisabled: isDisabled, isFocused: isFocused }), this.renderLiveRegion(), React__default.createElement(Control, _extends$4({}, commonProps, { innerRef: this.getControlRef, innerProps: { onMouseDown: this.onControlMouseDown, onTouchEnd: this.onControlTouchEnd }, isDisabled: isDisabled, isFocused: isFocused, menuIsOpen: menuIsOpen }), React__default.createElement(ValueContainer, _extends$4({}, commonProps, { isDisabled: isDisabled }), this.renderPlaceholderOrValue(), this.renderInput()), React__default.createElement(IndicatorsContainer, _extends$4({}, commonProps, { isDisabled: isDisabled }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField()); }; return Select; }(React.Component); Select.defaultProps = defaultProps; exports.Select = Select; exports.createFilter = createFilter; exports.defaultProps = defaultProps; exports.defaultTheme = defaultTheme; exports.mergeStyles = mergeStyles;