react-select-module
Version:
A Select control built with and for ReactJS
2,852 lines • 95.5 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var React = require('react');
var React__default = _interopDefault(React);
var memoizeOne = _interopDefault(require('memoize-one'));
var emotionCore = require('@emotion/core');
var reactDom = require('react-dom');
var index = require('./index-18ec33c5.cjs.dev.js');
var diacritics = [{
base: 'A',
letters: "A\u24B6\uFF21\xC0\xC1\xC2\u1EA6\u1EA4\u1EAA\u1EA8\xC3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\xC4\u01DE\u1EA2\xC5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F"
}, {
base: 'AA',
letters: "\uA732"
}, {
base: 'AE',
letters: "\xC6\u01FC\u01E2"
}, {
base: 'AO',
letters: "\uA734"
}, {
base: 'AU',
letters: "\uA736"
}, {
base: 'AV',
letters: "\uA738\uA73A"
}, {
base: 'AY',
letters: "\uA73C"
}, {
base: 'B',
letters: "B\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181"
}, {
base: 'C',
letters: "C\u24B8\uFF23\u0106\u0108\u010A\u010C\xC7\u1E08\u0187\u023B\uA73E"
}, {
base: 'D',
letters: "D\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779"
}, {
base: 'DZ',
letters: "\u01F1\u01C4"
}, {
base: 'Dz',
letters: "\u01F2\u01C5"
}, {
base: 'E',
letters: "E\u24BA\uFF25\xC8\xC9\xCA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\xCB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E"
}, {
base: 'F',
letters: "F\u24BB\uFF26\u1E1E\u0191\uA77B"
}, {
base: 'G',
letters: "G\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E"
}, {
base: 'H',
letters: "H\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D"
}, {
base: 'I',
letters: "I\u24BE\uFF29\xCC\xCD\xCE\u0128\u012A\u012C\u0130\xCF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197"
}, {
base: 'J',
letters: "J\u24BF\uFF2A\u0134\u0248"
}, {
base: 'K',
letters: "K\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2"
}, {
base: 'L',
letters: "L\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780"
}, {
base: 'LJ',
letters: "\u01C7"
}, {
base: 'Lj',
letters: "\u01C8"
}, {
base: 'M',
letters: "M\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C"
}, {
base: 'N',
letters: "N\u24C3\uFF2E\u01F8\u0143\xD1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4"
}, {
base: 'NJ',
letters: "\u01CA"
}, {
base: 'Nj',
letters: "\u01CB"
}, {
base: 'O',
letters: "O\u24C4\uFF2F\xD2\xD3\xD4\u1ED2\u1ED0\u1ED6\u1ED4\xD5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\xD6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\xD8\u01FE\u0186\u019F\uA74A\uA74C"
}, {
base: 'OI',
letters: "\u01A2"
}, {
base: 'OO',
letters: "\uA74E"
}, {
base: 'OU',
letters: "\u0222"
}, {
base: 'P',
letters: "P\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754"
}, {
base: 'Q',
letters: "Q\u24C6\uFF31\uA756\uA758\u024A"
}, {
base: 'R',
letters: "R\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782"
}, {
base: 'S',
letters: "S\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784"
}, {
base: 'T',
letters: "T\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786"
}, {
base: 'TZ',
letters: "\uA728"
}, {
base: 'U',
letters: "U\u24CA\uFF35\xD9\xDA\xDB\u0168\u1E78\u016A\u1E7A\u016C\xDC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244"
}, {
base: 'V',
letters: "V\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245"
}, {
base: 'VY',
letters: "\uA760"
}, {
base: 'W',
letters: "W\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72"
}, {
base: 'X',
letters: "X\u24CD\uFF38\u1E8A\u1E8C"
}, {
base: 'Y',
letters: "Y\u24CE\uFF39\u1EF2\xDD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE"
}, {
base: 'Z',
letters: "Z\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762"
}, {
base: 'a',
letters: "a\u24D0\uFF41\u1E9A\xE0\xE1\xE2\u1EA7\u1EA5\u1EAB\u1EA9\xE3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\xE4\u01DF\u1EA3\xE5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250"
}, {
base: 'aa',
letters: "\uA733"
}, {
base: 'ae',
letters: "\xE6\u01FD\u01E3"
}, {
base: 'ao',
letters: "\uA735"
}, {
base: 'au',
letters: "\uA737"
}, {
base: 'av',
letters: "\uA739\uA73B"
}, {
base: 'ay',
letters: "\uA73D"
}, {
base: 'b',
letters: "b\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253"
}, {
base: 'c',
letters: "c\u24D2\uFF43\u0107\u0109\u010B\u010D\xE7\u1E09\u0188\u023C\uA73F\u2184"
}, {
base: 'd',
letters: "d\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A"
}, {
base: 'dz',
letters: "\u01F3\u01C6"
}, {
base: 'e',
letters: "e\u24D4\uFF45\xE8\xE9\xEA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\xEB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD"
}, {
base: 'f',
letters: "f\u24D5\uFF46\u1E1F\u0192\uA77C"
}, {
base: 'g',
letters: "g\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F"
}, {
base: 'h',
letters: "h\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265"
}, {
base: 'hv',
letters: "\u0195"
}, {
base: 'i',
letters: "i\u24D8\uFF49\xEC\xED\xEE\u0129\u012B\u012D\xEF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131"
}, {
base: 'j',
letters: "j\u24D9\uFF4A\u0135\u01F0\u0249"
}, {
base: 'k',
letters: "k\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3"
}, {
base: 'l',
letters: "l\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747"
}, {
base: 'lj',
letters: "\u01C9"
}, {
base: 'm',
letters: "m\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F"
}, {
base: 'n',
letters: "n\u24DD\uFF4E\u01F9\u0144\xF1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5"
}, {
base: 'nj',
letters: "\u01CC"
}, {
base: 'o',
letters: "o\u24DE\uFF4F\xF2\xF3\xF4\u1ED3\u1ED1\u1ED7\u1ED5\xF5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\xF6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\xF8\u01FF\u0254\uA74B\uA74D\u0275"
}, {
base: 'oi',
letters: "\u01A3"
}, {
base: 'ou',
letters: "\u0223"
}, {
base: 'oo',
letters: "\uA74F"
}, {
base: 'p',
letters: "p\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755"
}, {
base: 'q',
letters: "q\u24E0\uFF51\u024B\uA757\uA759"
}, {
base: 'r',
letters: "r\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783"
}, {
base: 's',
letters: "s\u24E2\uFF53\xDF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B"
}, {
base: 't',
letters: "t\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787"
}, {
base: 'tz',
letters: "\uA729"
}, {
base: 'u',
letters: "u\u24E4\uFF55\xF9\xFA\xFB\u0169\u1E79\u016B\u1E7B\u016D\xFC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289"
}, {
base: 'v',
letters: "v\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C"
}, {
base: 'vy',
letters: "\uA761"
}, {
base: 'w',
letters: "w\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73"
}, {
base: 'x',
letters: "x\u24E7\uFF58\u1E8B\u1E8D"
}, {
base: 'y',
letters: "y\u24E8\uFF59\u1EF3\xFD\u0177\u1EF9\u0233\u1E8F\xFF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF"
}, {
base: 'z',
letters: "z\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763"
}];
var anyDiacritic = new RegExp('[' + diacritics.map(function (d) {
return d.letters;
}).join('') + ']', 'g');
var diacriticToBase = {};
for (var i = 0; i < diacritics.length; i++) {
var diacritic = diacritics[i];
for (var j = 0; j < diacritic.letters.length; j++) {
diacriticToBase[diacritic.letters[j]] = diacritic.base;
}
}
var stripDiacritics = function stripDiacritics(str) {
return str.replace(anyDiacritic, function (match) {
return diacriticToBase[match];
});
};
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var trimString = function trimString(str) {
return str.replace(/^\s+|\s+$/g, '');
};
var defaultStringify = function defaultStringify(option) {
return "".concat(option.label, " ").concat(option.value);
};
var createFilter = function createFilter(config) {
return function (option, rawInput) {
var _ignoreCase$ignoreAcc = _objectSpread({
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;
};
};
var jsx = emotionCore.jsx; // Assistive text to describe visual elements. Hidden for sighted users.
var A11yText = function A11yText(props) {
return jsx("span", _extends({
css: {
label: 'a11yText',
zIndex: 9999,
border: 0,
clip: 'rect(1px, 1px, 1px, 1px)',
height: 1,
width: 1,
position: 'absolute',
overflow: 'hidden',
padding: 0,
whiteSpace: 'nowrap'
}
}, props));
};
var jsx$1 = emotionCore.jsx;
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 = _objectWithoutProperties(_ref, ["in", "out", "onExited", "appear", "enter", "exit", "innerRef", "emotion"]);
return jsx$1("input", _extends({
ref: innerRef
}, props, {
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)'
}
}));
}
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var NodeResolver = /*#__PURE__*/function (_Component) {
_inherits(NodeResolver, _Component);
var _super = _createSuper(NodeResolver);
function NodeResolver() {
_classCallCheck(this, NodeResolver);
return _super.apply(this, arguments);
}
_createClass(NodeResolver, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.innerRef(reactDom.findDOMNode(this));
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.props.innerRef(null);
}
}, {
key: "render",
value: 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 _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
var activeScrollLocks = 0;
var ScrollLock = /*#__PURE__*/function (_Component) {
_inherits(ScrollLock, _Component);
var _super = _createSuper$1(ScrollLock);
function ScrollLock() {
var _this;
_classCallCheck(this, ScrollLock);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_this.originalStyles = {};
_this.listenerOptions = {
capture: false,
passive: false
};
return _this;
}
_createClass(ScrollLock, [{
key: "componentDidMount",
value: 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 = "".concat(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;
}
}, {
key: "componentWillUnmount",
value: 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);
}
}
}
}, {
key: "render",
value: function render() {
return null;
}
}]);
return ScrollLock;
}(React.Component);
ScrollLock.defaultProps = {
accountForScrollbars: true
};
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var jsx$2 = emotionCore.jsx; // 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) {
_inherits(ScrollBlock, _PureComponent);
var _super = _createSuper$2(ScrollBlock);
function ScrollBlock() {
var _this;
_classCallCheck(this, ScrollBlock);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_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;
}
_createClass(ScrollBlock, [{
key: "render",
value: 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 jsx$2("div", null, jsx$2("div", {
onClick: this.blurSelectInput,
css: {
position: 'fixed',
left: 0,
bottom: 0,
right: 0,
top: 0
}
}), jsx$2(NodeResolver, {
innerRef: this.getScrollTarget
}, children), touchScrollTarget ? jsx$2(ScrollLock, {
touchScrollTarget: touchScrollTarget
}) : null);
}
}]);
return ScrollBlock;
}(React.PureComponent);
function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var ScrollCaptor = /*#__PURE__*/function (_Component) {
_inherits(ScrollCaptor, _Component);
var _super = _createSuper$3(ScrollCaptor);
function ScrollCaptor() {
var _this;
_classCallCheck(this, ScrollCaptor);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_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;
}
_createClass(ScrollCaptor, [{
key: "componentDidMount",
value: function componentDidMount() {
this.startListening(this.scrollTarget);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.stopListening(this.scrollTarget);
}
}, {
key: "startListening",
value: 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);
}
}
}, {
key: "stopListening",
value: function stopListening(el) {
if (!el) return; // 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);
}
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/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 = _objectWithoutProperties(_ref, ["isEnabled"]);
return isEnabled ? /*#__PURE__*/React__default.createElement(ScrollCaptor, props) : props.children;
}
var instructionsAriaMessage = function instructionsAriaMessage(event, context) {
var isSearchable = context.isSearchable,
isMulti = context.isMulti,
label = context.label,
isDisabled = context.isDisabled,
tabSelectsValue = context.tabSelectsValue;
switch (event) {
case 'menu':
return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu").concat(tabSelectsValue ? ', press Tab to select the option and exit the menu' : '', ".");
case 'input':
return "".concat(label ? label : 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(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 ".concat(value, ", deselected.");
case 'select-option':
return isDisabled ? "option ".concat(value, " is disabled. Select another option.") : "option ".concat(value, ", selected.");
}
};
var valueFocusAriaMessage = function valueFocusAriaMessage(_ref) {
var focusedValue = _ref.focusedValue,
getOptionLabel = _ref.getOptionLabel,
selectValue = _ref.selectValue;
return "value ".concat(getOptionLabel(focusedValue), " focused, ").concat(selectValue.indexOf(focusedValue) + 1, " of ").concat(selectValue.length, ".");
};
var optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) {
var focusedOption = _ref2.focusedOption,
getOptionLabel = _ref2.getOptionLabel,
options = _ref2.options;
return "option ".concat(getOptionLabel(focusedOption), " focused").concat(focusedOption.isDisabled ? ' disabled' : '', ", ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, ".");
};
var resultsAriaMessage = function resultsAriaMessage(_ref3) {
var inputValue = _ref3.inputValue,
screenReaderMessage = _ref3.screenReaderMessage;
return "".concat(screenReaderMessage).concat(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 ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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) {
var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
// initialize with source styles
var styles = _objectSpread$1({}, 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 ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
var defaultProps = {
backspaceRemovesValue: true,
blurInputOnSelect: index.isTouchCapable(),
captureMenuScroll: !index.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: !index.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 "".concat(count, " result").concat(count !== 1 ? 's' : '', " available");
},
styles: {},
tabIndex: '0',
tabSelectsValue: true
};
var instanceId = 1;
var Select = /*#__PURE__*/function (_Component) {
_inherits(Select, _Component);
var _super = _createSuper$4(Select);
// Misc. Instance Properties
// ------------------------------
// TODO
// Refs
// ------------------------------
// Lifecycle
// ------------------------------
function Select(_props) {
var _this;
_classCallCheck(this, Select);
_this = _super.call(this, _props);
_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, _objectSpread$2(_objectSpread$2({}, actionMeta), {}, {
name: name
}));
};
_this.setValue = function (newValue) {
var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value';
var option = arguments.length > 2 ? arguments[2] : undefined;
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(_toConsumableArray(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 () {
_this.onChange(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.getValue = function () {
return _this.state.selectValue;
};
_this.cx = function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return index.classNames.apply(void 0, [_this.props.classNamePrefix].concat(args));
};
_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 "".concat(_this.instancePrefix, "-").concat(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, _objectSpread$2(_objectSpread$2({}, 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 && index.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 && 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 && 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'
});
if (!_this.props.menuIsOpen) {
_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 = "".concat(_this.getElementId('option'), "-").concat(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, "".concat(itemIndex, "-").concat(i));
if (option) acc.focusable.push(child);
return option;
}).filter(Boolean);
if (children.length) {
var groupId = "".concat(_this.getElementId('group'), "-").concat(itemIndex);
acc.render.push({
type: 'group',
key: groupId,
data: item,
options: children
});
}
} else {
var option = toOption(item, "".concat(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(_this));
_this.cacheComponents(_props.components);
_this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
var _selectValue = index.cleanValue(_value);
_this.buildMenuOptions = memoizeOne(_this.buildMenuOptions, function (newArgs, lastArgs) {
var _newArgs = _slicedToArray(newArgs, 2),
newProps = _newArgs[0],
newSelectValue = _newArgs[1];
var _lastArgs = _slicedToArray(lastArgs, 2),
lastProps = _lastArgs[0],
lastSelectValue = _lastArgs[1];
return newSelectValue === lastSelectValue && newProps.inputValue === lastProps.inputValue && newProps.options === lastProps.options;
}).bind(_assertThisInitialized(_this));
var _menuOptions = _props.menuIsOpen ? _this.buildMenuOptions(_props, _selectValue) : {
render: [],
focusable: []
};
_this.state.menuOptions = _menuOptions;
_this.state.selectValue = _selectValue;
return _this;
}
_createClass(Select, [{
key: "componentDidMount",
value: 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();
}
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: 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 = index.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;
}
}
}, {
key: "componentDidUpdate",
value: 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();
}
if (isFocused && isDisabled && !prevProps.isDisabled) {
// ensure select state gets blurred in case Select is programatically disabled while focused
this.setState({
isFocused: false
}, this.onMenuClose);
} // scroll the focused option into view if necessary
if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) {
index.scrollIntoView(this.menuListRef, this.focusedOptionRef);
this.scrollToFocusedOptionOnUpdate = false;
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.stopListeningComposition();
this.stopListeningToTouch();
document.removeEventListener('scroll', this.onScroll, true);
}
}, {
key: "onMenuOpen",
// ==============================
// Consumer Handlers
// ==============================
value: function onMenuOpen() {
this.props.onMenuOpen();
}
}, {
key: "onMenuClose",
value: 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();
}
}, {
key: "onInputChange",
value: function onInputChange(newValue, actionMeta) {
this.props.onInputChange(newValue, actionMeta);
} // ==============================
// Methods
// ==============================
}, {
key: "focusInput",
value: function focusInput() {
if (!this.inputRef) return;
this.inputRef.focus();
}
}, {
key: "blurInput",
value: function blurInput() {
if (!this.inputRef) return;
this.inputRef.blur();
} // aliased for consumers
}, {
key: "openMenu",
value: 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 _this$props11 = this.props,
isMulti = _this$props11.isMulti,
tabSelectsValue = _this$props11.tabSelectsValue;
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',
context: {
tabSelectsValue: tabSelectsValue
}
});
});
}
}, {
key: "focusValue",
value: function focusValue(direction) {
var _this$props12 = this.props,
isMulti = _this$props12.isMulti,
isSearchable = _this$props12.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]
});
}
}, {
key: "focusOption",
value: function focusOption() {
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first';
var _this$props13 = this.props,
pageSize = _this$props13.pageSize,
tabSelectsValue = _this$props13.tabSelectsValue;
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',
context: {
tabSelectsValue: tabSelectsValue
}
});
}
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]),
tabSelectsValue: tabSelectsValue
}
});
}
}, {
key: "getTheme",
// ==============================
// Getters
// ==============================
value: 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 _objectSpread$2(_objectSpread$2({}, defaultTheme), this.props.theme);
}
}, {
key: "getCommonProps",
value: function getCommonProps() {
var clearValue = this.clearValue,
cx = this.cx,
getStyles = this.getStyles,
getValue = this.getValue,
setValue = this.setValue,
selectOption = this.selectOption,
props = this.props;
var isMulti = props.isMulti,
isRtl = props.isRtl,
options = props.options;
var hasValue = this.hasValue();
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()
};
}
}, {
key: "getNextFocusedValue",
value: 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;
}
}, {
key: "getNextFocusedOption",
value: function getNextFocusedOption(options) {
var lastFocusedOption = this.state.focusedOption;
return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
}
}, {
key: "hasValue",
value: function hasValue() {
var selectValue = this.state.selectValue;
return selectValue.length > 0;
}
}, {
key: "hasOptions",
value: function hasOptions() {
return !!this.state.menuOptions.render.length;
}
}, {
key: "countOptions",
value: function countOptions() {
return this.state.menuOptions.focusable.length;
}
}, {
key: "isClearable",
value: function isClearable() {
var _this$props14 = this.props,
isClearable = _this$props14.isClearable,
isMulti = _this$props14.isMulti; // single select, by default, IS NOT clearable
// multi select, by default, IS clearable
if (isClearable === undefined) return isMulti;
return isClearable;
}
}, {
key: "isOptionDisabled",
value: function isOptionDisabled(option, selectValue) {
return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false;
}
}, {
key: "isOptionSelected",
value: 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;
});
}
}, {
key: "filterOption",
value: function filterOption(option, inputValue) {
return this.props.filterOption ? this.props.filterOption(option, inputValue) : true;
}
}, {
key: "formatOptionLabel",
value: 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);
}
}
}, {
key: "formatGroupLabel",
value: function formatGroupLabel(data) {
return this.props.formatGroupLabel(data);
} // ==============================
// Mouse Handlers
// ==============================
}, {
key: "startListeningComposition",
// ==============================
// Composition Handlers
// ==============================
value: function startListeningComposition() {
if (document && document.addEventListener) {
document.addEventListener('compositionstart', this.onCompositionStart, false);
document.addEventListener('compositionend', this.onCompositionEnd, false);
}
}
}, {
key: "stopListeningComposition",
value: function stopListeningComposition() {
if (document && document.removeEventListener) {
document.removeEventListener('compositionstart', this.onCompositionStart);
document.removeEventListener('compositionend', this.onCompositionEnd);
}
}
}, {
key: "startListeningToTouch",
// ==============================
// Touch Handlers
// ==============================
value: function startListeningToTouch() {
if (document && document.addEventListener) {
document.addEventListener('touchstart', this.onTouchStart, false);
document.addEventListener('touchmove', this.onTouchMove, false);
document.addEventListener('touchend', this.onTouchEnd, false);
}
}
}, {
key: "stopListeningToTouch",
value: function stopListeningToTouch() {
if (document && document.removeEventListener) {
document.removeEventListener('touchstart', this.onTouchStart);
document.removeEventListener('touchmove', this.onTouchMove);
document.removeEventListener('touchend', this.onTouchEnd);
}
}
}, {
key: "constructAriaLiveMessage",
// ==============================
// Renderers
// ==============================
value: 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$props15 = this.props,
options = _this$props15.options,
menuIsOpen = _this$props15.menuIsOpen,
inputValue = _this$props15.inputValue,
screenReaderStatus = _this$props15.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 "".concat(focusedValueMsg, " ").concat(focusedOptionMsg, " ").concat(resultsMsg, " ").concat(ariaLiveContext);
}
}, {
key: "renderInput",
value: function renderInput() {
var _this$props16 = this.props,
isDisabled = _this$props16.isDisabled,
isSearchable = _this$props16.isSearchable,
inputId = _this$props16.inputId,
inputValue = _this$props16.inputValue,
tabIndex = _this$props16.tabIndex,
form = _this$props16.form;
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 /*#__PURE__*/React__default.createElement(DummyInput, _extends({
id: id,
innerRef: this.getInputRef,
onBlur: this.onInputBlur,
onChange: index.noop,
onFocus: this.onInputFocus,
readOnly: true,
disabled: isDisabled,
tabIndex: tabIndex,
form: form,
value: ""
}, ariaAttributes));
}
var _this$commonProps = this.commonProps,
cx = _this$commonProps.cx,
theme = _this$commonProps.theme,
selectProps = _this$commonProps.selectProps;
return /*#__PURE__*/React__default.createElement(Input, _extends({
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,
form: form,
theme: theme,
type: "text",
value: inputValue
}, ariaAttributes));
}
}, {
key: "renderPlaceholderOrValue",
value: 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$props17 = this.props,
controlShouldRenderValue = _this$props17.controlShouldRenderValue,
isDisabled = _this$props17.isDisabled,
isMulti = _this$props17.isMulti,
inputValue = _this$props17.inputValue,
placeholder = _this$props17.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 : /*#__PURE__*/React__default.createElement(Placeholder, _extends({}, commonProps, {
key: "placeholder",
isDisabled: isDisabled,
isFocused: isFocused
}), placeholder);
}
if (isMulti) {
var selectValues = selectValue.map(function (opt, index) {
var isOptionFocused = opt === focusedValue;
return /*#__PURE__*/React__default.createElement(MultiValue, _extends({}, commonProps, {
components: {
Container: MultiValueContainer,
Label: MultiValueLabel,
Remove: MultiValueRemove
},
isFocused: isOptionFocused,
isDisabled: isDisabled,
key: "".concat(_this4.getOptionValue(opt)).concat(index),
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 /*#__PURE__*/React__default.createElement(SingleValue, _extends({}, commonProps, {
data: singleValue,
isDisabled: isDisabled
}), this.formatOptionLabel(singleValue, 'value'));
}
}, {
key: "renderClearIndicator",
value: function renderClearIndicator() {
var ClearIndicator = this.components.ClearIndicator;
var commonProps = this.commonProps;
var _this$props18 = this.props,
isDisabled = _this$props18.isDisabled,
isLoading = _this$props18.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 /*#__PURE__*/React__default.createElement(ClearIndicator, _extends({}, commonProps, {
innerProps: innerProps,
isFocused: isFocused
}));
}
}, {
key: "renderLoadingIndicator",
value: function renderLoadingIndicator() {
var LoadingIndicator = this.components.LoadingIndicator;
var commonProps = this.commonProps;
var _this$props19 = this.props,
isDisabled = _this$props19.isDisabled,
isLoading = _this$props19.isLoading;
var isFocused = this.state.isFocused;
if (!LoadingIndicator || !isLoading) return null;
var innerProps = {
'aria-hidden': 'true'
};
return /*#__PURE__*/React__default.createElement(LoadingIndicator, _extends({}, commonProps, {
innerProps: innerProps,
isDisabled: isDisabled,
isFocused: isFocused
}));
}
}, {
key: "renderIndicatorSeparator",
value: 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 /*#__PURE__*/React__default.createElement(IndicatorSeparator, _extends({}, commonProps, {
isDisabled: isDisabled,
isFocused: isFocused
}));
}
}, {
key: "renderDropdownIndicator",
value: 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 /*#__PURE__*/React__default.createElement(DropdownIndicator, _extends({}, commonProps, {
innerProps: innerProps,
isDisabled: isDisabled,
isFocused: isFocused
}));
}
}, {
key: "renderMenu",
value: 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$props20 = this.props,
captureMenuScroll = _this$props20.captureMenuScroll,
inputValue = _this$props20.inputValue,
isLoading = _this$props20.isLoading,
loadingMessage = _this$props20.loadingMessage,
minMenuHeight = _this$props20.minMenuHeight,
maxMenuHeight = _this$props20.maxMenuHeight,
menuIsOpen = _this$props20.menuIsOpen,
menuPlacement = _this$props20.menuPlacement,
menuPosition = _this$props20.menuPosition,
menuPortalTarget = _this$props20.menuPortalTarget,
menuShouldBlockScroll = _this$props20.menuShouldBlockScroll,
menuShouldScrollIntoView = _this$props20.menuShouldScrollIntoView,
noOptionsMessage = _this$props20.noOptionsMessage,
onMenuScrollToTop = _this$props20.onMenuScrollToTop,
onMenuScrollToBottom = _this$props20.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 /*#__PURE__*/React__default.createElement(Option, _extends({}, 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 = _objectWithoutProperties(item, ["type"]);
var headingId = "".concat(item.key, "-heading");
return /*#__PURE__*/React__default.createElement(Group, _extends({}, commonProps, group, {
Heading: GroupHeading,
headingProps: {
id: headingId,
data: item.data
},
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 = /*#__PURE__*/React__default.createElement(LoadingMessage, commonProps, message);
} else {
var _message = noOptionsMessage({
inputValue: inputValue
});
if (_message === null) return null;
menuUI = /*#__PURE__*/React__default.createElement(NoOptionsMessage, commonProps, _message);
}
var menuPlacementProps = {
minMenuHeight: minMenuHeight,
maxMenuHeight: maxMenuHeight,
menuPlacement: menuPlacement,
menuPosition: menuPosition,
menuShouldScrollIntoView: menuShouldScrollIntoView
};
var menuElement = /*#__PURE__*/React__default.createElement(index.MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref6) {
var ref = _ref6.ref,
_ref6$placerProps = _ref6.placerProps,
placement = _ref6$placerProps.placement,
maxHeight = _ref6$placerProps.maxHeight;
return /*#__PURE__*/React__default.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
innerRef: ref,
innerProps: {
onMouseDown: _this5.onMenuMouseDown,
onMouseMove: _this5.onMenuMouseMove
},
isLoading: isLoading,
placement: placement
}), /*#__PURE__*/React__default.createElement(ScrollCaptorSwitch, {
isEnabled: captureMenuScroll,
onTopArrive: onMenuScrollToTop,
onBottomArrive: onMenuScrollToBottom
}, /*#__PURE__*/React__default.createElement(ScrollBlock, {
isEnabled: menuShouldBlockScroll
}, /*#__PURE__*/React__default.createElement(MenuList, _extends({}, 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' ? /*#__PURE__*/React__default.createElement(MenuPortal, _extends({}, commonProps, {
appendTo: menuPortalTarget,
controlElement: this.controlRef,
menuPlacement: menuPlacement,
menuPosition: menuPosition
}), menuElement) : menuElement;
}
}, {
key: "renderFormField",
value: function renderFormField() {
var _this6 = this;
var _this$props21 = this.props,
delimiter = _this$props21.delimiter,
isDisabled = _this$props21.isDisabled,
isMulti = _this$props21.isMulti,
name = _this$props21.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 /*#__PURE__*/React__default.createElement("input", {
name: name,
type: "hidden",
value: value
});
} else {
var input = selectValue.length > 0 ? selectValue.map(function (opt, i) {
return /*#__PURE__*/React__default.createElement("input", {
key: "i-".concat(i),
name: name,
type: "hidden",
value: _this6.getOptionValue(opt)
});
}) : /*#__PURE__*/React__default.createElement("input", {
name: name,
type: "hidden"
});
return /*#__PURE__*/React__default.createElement("div", null, input);
}
} else {
var _value2 = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
return /*#__PURE__*/React__default.createElement("input", {
name: name,
type: "hidden",
value: _value2
});
}
}
}, {
key: "renderLiveRegion",
value: function renderLiveRegion() {
if (!this.state.isFocused) return null;
return /*#__PURE__*/React__default.createElement(A11yText, {
"aria-live": "polite"
}, /*#__PURE__*/React__default.createElement("span", {
id: "aria-selection-event"
}, "\xA0", this.state.ariaLiveSelection), /*#__PURE__*/React__default.createElement("span", {
id: "aria-context"
}, "\xA0", this.constructAriaLiveMessage()));
}
}, {
key: "render",
value: 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$props22 = this.props,
className = _this$props22.className,
id = _this$props22.id,
isDisabled = _this$props22.isDisabled,
menuIsOpen = _this$props22.menuIsOpen;
var isFocused = this.state.isFocused;
var commonProps = this.commonProps = this.getCommonProps();
return /*#__PURE__*/React__default.createElement(SelectContainer, _extends({}, commonProps, {
className: className,
innerProps: {
id: id,
onKeyDown: this.onKeyDown
},
isDisabled: isDisabled,
isFocused: isFocused
}), this.renderLiveRegion(), /*#__PURE__*/React__default.createElement(Control, _extends({}, commonProps, {
innerRef: this.getControlRef,
innerProps: {
onMouseDown: this.onControlMouseDown,
onTouchEnd: this.onControlTouchEnd
},
isDisabled: isDisabled,
isFocused: isFocused,
menuIsOpen: menuIsOpen
}), /*#__PURE__*/React__default.createElement(ValueContainer, _extends({}, commonProps, {
isDisabled: isDisabled
}), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__default.createElement(IndicatorsContainer, _extends({}, 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;