react-select
Version:
A Select control built with and for ReactJS
1,426 lines (1,220 loc) • 150 kB
JavaScript
import { css, injectGlobal } from 'emotion';
import React, { Component, PureComponent } from 'react';
import { findDOMNode, createPortal } from 'react-dom';
import raf from 'raf';
import AutosizeInput from 'react-input-autosize';
import PropTypes from 'prop-types';
import memoizeOne from 'memoize-one';
import { Transition, TransitionGroup } from 'react-transition-group';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var objectWithoutProperties = function (obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var slicedToArray = function () {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function (arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
};
}();
var toConsumableArray = function (arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
} else {
return Array.from(arr);
}
};
var isArray = Array.isArray;
var keyList = Object.keys;
var hasProp = Object.prototype.hasOwnProperty;
function equal(a, b) {
// fast-deep-equal index.js 2.0.1
if (a === b) return true;
if (a && b && (typeof a === 'undefined' ? 'undefined' : _typeof(a)) == 'object' && (typeof b === 'undefined' ? 'undefined' : _typeof(b)) == 'object') {
var arrA = isArray(a),
arrB = isArray(b),
i,
length,
key;
if (arrA && arrB) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;) {
if (!equal(a[i], b[i])) return false;
}
return true;
}
if (arrA != arrB) return false;
var dateA = a instanceof Date,
dateB = b instanceof Date;
if (dateA != dateB) return false;
if (dateA && dateB) return a.getTime() == b.getTime();
var regexpA = a instanceof RegExp,
regexpB = b instanceof RegExp;
if (regexpA != regexpB) return false;
if (regexpA && regexpB) return a.toString() == b.toString();
var keys = keyList(a);
length = keys.length;
if (length !== keyList(b).length) {
return false;
}
for (i = length; i-- !== 0;) {
if (!hasProp.call(b, keys[i])) return false;
}
// end fast-deep-equal
// Custom handling for React
for (i = length; i-- !== 0;) {
key = keys[i];
if (key === '_owner' && a.$$typeof) {
// React-specific: avoid traversing React elements' _owner.
// _owner contains circular references
// and is not needed when comparing the actual elements (and not their owners)
// .$$typeof and ._store on just reasonable markers of a react element
continue;
} else {
// all other properties should be traversed as usual
if (!equal(a[key], b[key])) return false;
}
}
// fast-deep-equal index.js 2.0.1
return true;
}
return a !== a && b !== b;
}
// end fast-deep-equal
function exportedEqual(a, b) {
try {
return equal(a, b);
} catch (error) {
if (error.message && error.message.match(/stack|recursion/i)) {
// warn on circular references, don't crash
// browsers give this different errors name and messages:
// chrome/safari: "RangeError", "Maximum call stack size exceeded"
// firefox: "InternalError", too much recursion"
// edge: "Error", "Out of stack space"
console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
return false;
}
// some other error. we should definitely know about these
throw error;
}
}
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;
};
var trimString = function trimString(str) {
return str.replace(/^\s+|\s+$/g, '');
};
var defaulStringify = function defaulStringify(option) {
return option.label + ' ' + option.value;
};
var createFilter = function createFilter(config) {
return function (option, rawInput) {
var _ignoreCase$ignoreAcc = _extends({
ignoreCase: true,
ignoreAccents: true,
stringify: defaulStringify,
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;
};
};
// Assistive text to describe visual elements. Hidden for sighted users.
var A11yText = function A11yText(props) {
return React.createElement('span', _extends({
className: css({
zIndex: 9999,
border: 0,
clip: 'rect(1px, 1px, 1px, 1px)',
height: 1,
width: 1,
position: 'absolute',
overflow: 'hidden',
padding: 0,
whiteSpace: 'nowrap',
backgroundColor: 'red',
color: 'blue'
})
}, props));
};
var DummyInput = function (_Component) {
inherits(DummyInput, _Component);
function DummyInput() {
classCallCheck(this, DummyInput);
return possibleConstructorReturn(this, (DummyInput.__proto__ || Object.getPrototypeOf(DummyInput)).apply(this, arguments));
}
createClass(DummyInput, [{
key: 'render',
value: function render() {
var _props = this.props,
inProp = _props.in,
out = _props.out,
onExited = _props.onExited,
appear = _props.appear,
enter = _props.enter,
exit = _props.exit,
innerRef = _props.innerRef,
props = objectWithoutProperties(_props, ['in', 'out', 'onExited', 'appear', 'enter', 'exit', 'innerRef']);
return React.createElement('input', _extends({
ref: innerRef
}, props, {
className: css({
// 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)'
})
}));
}
}]);
return DummyInput;
}(Component);
var NodeResolver = function (_Component) {
inherits(NodeResolver, _Component);
function NodeResolver() {
classCallCheck(this, NodeResolver);
return possibleConstructorReturn(this, (NodeResolver.__proto__ || Object.getPrototypeOf(NodeResolver)).apply(this, arguments));
}
createClass(NodeResolver, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.props.innerRef(findDOMNode(this));
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.props.innerRef(null);
}
}, {
key: 'render',
value: function render() {
return this.props.children;
}
}]);
return NodeResolver;
}(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;
}
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
var activeScrollLocks = 0;
var ScrollLock = function (_Component) {
inherits(ScrollLock, _Component);
function ScrollLock() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, ScrollLock);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ScrollLock.__proto__ || Object.getPrototypeOf(ScrollLock)).call.apply(_ref, [this].concat(args))), _this), _this.originalStyles = {}, _this.listenerOptions = {
capture: false,
passive: false
}, _temp), possibleConstructorReturn(_this, _ret);
}
createClass(ScrollLock, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
if (!canUseDOM) return;
var _props = this.props,
accountForScrollbars = _props.accountForScrollbars,
touchScrollTarget = _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;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _this3 = this;
if (!canUseDOM) return;
var _props2 = this.props,
accountForScrollbars = _props2.accountForScrollbars,
touchScrollTarget = _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;
}(Component);
ScrollLock.defaultProps = {
accountForScrollbars: true
};
// 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 = function (_PureComponent) {
inherits(ScrollBlock, _PureComponent);
function ScrollBlock() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, ScrollBlock);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ScrollBlock.__proto__ || Object.getPrototypeOf(ScrollBlock)).call.apply(_ref, [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();
}
}, _temp), possibleConstructorReturn(_this, _ret);
}
// must be in state to trigger a re-render, only runs once per instance
// this will close the menu when a user clicks outside
createClass(ScrollBlock, [{
key: 'render',
value: function render() {
var _props = this.props,
children = _props.children,
isEnabled = _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 React.createElement(
'div',
null,
React.createElement('div', {
onClick: this.blurSelectInput,
className: css({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })
}),
React.createElement(
NodeResolver,
{ innerRef: this.getScrollTarget },
children
),
touchScrollTarget ? React.createElement(ScrollLock, { touchScrollTarget: touchScrollTarget }) : null
);
}
}]);
return ScrollBlock;
}(PureComponent);
var ScrollCaptor = function (_Component) {
inherits(ScrollCaptor, _Component);
function ScrollCaptor() {
var _ref;
var _temp, _this, _ret;
classCallCheck(this, ScrollCaptor);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ScrollCaptor.__proto__ || Object.getPrototypeOf(ScrollCaptor)).call.apply(_ref, [this].concat(args))), _this), _this.isBottom = false, _this.isTop = false, _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;
}, _temp), possibleConstructorReturn(_this, _ret);
}
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 scroll available
if (el.scrollHeight <= el.clientHeight) 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) {
// bail early if no scroll available
if (el.scrollHeight <= el.clientHeight) 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 React.createElement(
NodeResolver,
{ innerRef: this.getScrollTarget },
this.props.children
);
}
}]);
return ScrollCaptor;
}(Component);
var ScrollCaptorSwitch = function (_Component2) {
inherits(ScrollCaptorSwitch, _Component2);
function ScrollCaptorSwitch() {
classCallCheck(this, ScrollCaptorSwitch);
return possibleConstructorReturn(this, (ScrollCaptorSwitch.__proto__ || Object.getPrototypeOf(ScrollCaptorSwitch)).apply(this, arguments));
}
createClass(ScrollCaptorSwitch, [{
key: 'render',
value: function render() {
var _props = this.props,
isEnabled = _props.isEnabled,
props = objectWithoutProperties(_props, ['isEnabled']);
return isEnabled ? React.createElement(ScrollCaptor, props) : this.props.children;
}
}]);
return ScrollCaptorSwitch;
}(Component);
ScrollCaptorSwitch.defaultProps = { isEnabled: true };
var instructionsAriaMessage = function instructionsAriaMessage(event) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var isSearchable = context.isSearchable,
isMulti = context.isMulti,
label = context.label;
switch (event) {
case 'menu':
return 'Use Up and Down to choose options, press Backspace 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 Enter to remove the currently focused value';
}
};
var valueEventAriaMessage = function valueEventAriaMessage(event, context) {
var value = context.value;
if (!value) return;
switch (event) {
case 'deselect-option':
case 'pop-value':
case 'remove-value':
return 'option ' + value + ', deselected.';
case 'select-option':
return '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, ' + (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 : '') + '.';
};
// ==============================
// NO OP
// ==============================
var noop = function noop() {};
// ==============================
// Class Name Prefixer
// ==============================
/**
String representation of component state for styling with class names.
Expects an array of strings OR a string/object pair:
- className(['comp', 'comp-arg', 'comp-arg-2'])
@returns 'react-select__comp react-select__comp-arg react-select__comp-arg-2'
- className('comp', { some: true, state: false })
@returns 'react-select__comp react-select__comp--some'
*/
function applyPrefixToName(prefix, name) {
if (!name) {
return prefix;
} else if (name[0] === '-') {
return prefix + name;
} else {
return prefix + '__' + name;
}
}
function classNames(prefix, cssKey, state, className) {
var arr = [cssKey, className];
if (state && prefix) {
for (var key in state) {
if (state.hasOwnProperty(key) && state[key]) {
arr.push('' + applyPrefixToName(prefix, key));
}
}
}
return arr.filter(function (i) {
return i;
}).map(function (i) {
return String(i).trim();
}).join(' ');
}
// ==============================
// Clean Value
// ==============================
var cleanValue = function cleanValue(value) {
if (Array.isArray(value)) return value.filter(Boolean);
if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value !== null) return [value];
return [];
};
// ==============================
// Handle Input Change
// ==============================
function handleInputChange(inputValue, actionMeta, onInputChange) {
if (onInputChange) {
var newValue = onInputChange(inputValue, actionMeta);
if (typeof newValue === 'string') return newValue;
}
return inputValue;
}
// ==============================
// Scroll Helpers
// ==============================
function isDocumentElement(el) {
return [document.documentElement, document.body, window].indexOf(el) > -1;
}
// Normalized scrollTo & scrollTop
// ------------------------------
function getScrollTop(el) {
if (isDocumentElement(el)) {
return window.pageYOffset;
}
return el.scrollTop;
}
function scrollTo(el, top) {
// with a scroll distance, we perform scroll on the element
if (isDocumentElement(el)) {
window.scrollTo(0, top);
return;
}
el.scrollTop = top;
}
// Get Scroll Parent
// ------------------------------
function getScrollParent(element) {
var style = getComputedStyle(element);
var excludeStaticParent = style.position === 'absolute';
var overflowRx = /(auto|scroll)/;
var docEl = document.documentElement; // suck it, flow...
if (style.position === 'fixed') return docEl;
for (var parent = element; parent = parent.parentElement;) {
style = getComputedStyle(parent);
if (excludeStaticParent && style.position === 'static') {
continue;
}
if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
return parent;
}
}
return docEl;
}
// Animated Scroll To
// ------------------------------
/**
@param t: time (elapsed)
@param b: initial value
@param c: amount of change
@param d: duration
*/
function easeOutCubic(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
function animatedScrollTo(element, to) {
var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
var start = getScrollTop(element);
var change = to - start;
var increment = 10;
var currentTime = 0;
function animateScroll() {
currentTime += increment;
var val = easeOutCubic(currentTime, start, change, duration);
scrollTo(element, val);
if (currentTime < duration) {
raf(animateScroll);
} else {
callback(element);
}
}
animateScroll();
}
// Scroll Into View
// ------------------------------
function scrollIntoView(menuEl, focusedEl) {
var menuRect = menuEl.getBoundingClientRect();
var focusedRect = focusedEl.getBoundingClientRect();
var overScroll = focusedEl.offsetHeight / 3;
if (focusedRect.bottom + overScroll > menuRect.bottom) {
scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));
} else if (focusedRect.top - overScroll < menuRect.top) {
scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
}
}
// ==============================
// Get bounding client object
// ==============================
// cannot get keys using array notation with DOMRect
function getBoundingClientObj(element) {
var rect = element.getBoundingClientRect();
return {
bottom: rect.bottom,
height: rect.height,
left: rect.left,
right: rect.right,
top: rect.top,
width: rect.width
};
}
// ==============================
// Touch Capability Detector
// ==============================
function isTouchCapable() {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
}
// ==============================
// Mobile Device Detector
// ==============================
function isMobileDevice() {
try {
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
);
} catch (e) {
return false;
}
}
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;
};
var borderRadius = 4;
var colors = {
text: '#222',
textLight: '#444',
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral1: 'hsl(0, 0%, 99%)',
neutral2: 'hsl(0, 0%, 98%)',
neutral3: 'hsl(0, 0%, 97%)',
neutral4: 'hsl(0, 0%, 96%)',
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%)',
neutral100: 'hsl(0, 0%, 0%)',
neutral1a: 'hsla(0, 0%, 0%, 0.01)',
neutral2a: 'hsla(0, 0%, 0%, 0.02)',
neutral3a: 'hsla(0, 0%, 0%, 0.03)',
neutral4a: 'hsla(0, 0%, 0%, 0.04)',
neutral5a: 'hsla(0, 0%, 0%, 0.05)',
neutral10a: 'hsla(0, 0%, 0%, 0.1)',
neutral20a: 'hsla(0, 0%, 0%, 0.2)',
neutral30a: 'hsla(0, 0%, 0%, 0.3)',
neutral40a: 'hsla(0, 0%, 0%, 0.4)',
neutral50a: 'hsla(0, 0%, 0%, 0.5)',
neutral60a: 'hsla(0, 0%, 0%, 0.6)',
neutral70a: 'hsla(0, 0%, 0%, 0.7)',
neutral80a: 'hsla(0, 0%, 0%, 0.8)',
neutral90a: 'hsla(0, 0%, 0%, 0.9)'
};
var baseUnit = 4;
var spacing = {
/* Used to calculate consistent margin/padding on elements */
baseUnit: baseUnit,
/* The minimum height of the control */
controlHeight: 38,
/* The amount of space between the control and menu */
menuGutter: baseUnit * 2
};
// ==============================
// Root Container
// ==============================
var containerCSS = function containerCSS(_ref) {
var isDisabled = _ref.isDisabled,
isRtl = _ref.isRtl;
return {
direction: isRtl ? 'rtl' : null,
pointerEvents: isDisabled ? 'none' : null, // cancel mouse events when disabled
position: 'relative'
};
};
var SelectContainer = function SelectContainer(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps,
isDisabled = props.isDisabled,
isRtl = props.isRtl;
return React.createElement(
'div',
_extends({
className: cx( /*#__PURE__*/css(getStyles('container', props)), {
'--is-disabled': isDisabled,
'--is-rtl': isRtl
}, className)
}, innerProps),
children
);
};
// ==============================
// Value Container
// ==============================
var valueContainerCSS = function valueContainerCSS() {
return {
alignItems: 'center',
display: 'flex',
flex: 1,
flexWrap: 'wrap',
padding: spacing.baseUnit / 2 + 'px ' + spacing.baseUnit * 2 + 'px',
WebkitOverflowScrolling: 'touch',
position: 'relative'
};
};
var ValueContainer = function (_Component) {
inherits(ValueContainer, _Component);
function ValueContainer() {
classCallCheck(this, ValueContainer);
return possibleConstructorReturn(this, (ValueContainer.__proto__ || Object.getPrototypeOf(ValueContainer)).apply(this, arguments));
}
createClass(ValueContainer, [{
key: 'render',
value: function render() {
var _props = this.props,
children = _props.children,
className = _props.className,
cx = _props.cx,
isMulti = _props.isMulti,
getStyles = _props.getStyles,
hasValue = _props.hasValue;
return React.createElement(
'div',
{
className: cx( /*#__PURE__*/css(getStyles('valueContainer', this.props)), {
'value-container': true,
'value-container--is-multi': isMulti,
'value-container--has-value': hasValue
}, className)
},
children
);
}
}]);
return ValueContainer;
}(Component);
// ==============================
// Indicator Container
// ==============================
var indicatorsContainerCSS = function indicatorsContainerCSS() {
return {
alignItems: 'center',
alignSelf: 'stretch',
display: 'flex',
flexShrink: 0
};
};
var IndicatorsContainer = function IndicatorsContainer(props) {
var children = props.children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles;
return React.createElement(
'div',
{
className: cx( /*#__PURE__*/css(getStyles('indicatorsContainer', props)), {
'indicators': true
}, className)
},
children
);
};
// ==============================
// Dropdown & Clear Icons
// ==============================
var Svg = function Svg(_ref) {
var size = _ref.size,
props = objectWithoutProperties(_ref, ['size']);
return React.createElement('svg', _extends({
height: size,
width: size,
viewBox: '0 0 20 20',
'aria-hidden': 'true',
focusable: 'false',
className: /*#__PURE__*/ /*#__PURE__*/css({
display: 'inline-block',
fill: 'currentColor',
lineHeight: 1,
stroke: 'currentColor',
strokeWidth: 0
})
}, props));
};
var CrossIcon = function CrossIcon(props) {
return React.createElement(
Svg,
_extends({ size: 20 }, props),
React.createElement('path', { d: 'M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z' })
);
};
var DownChevron = function DownChevron(props) {
return React.createElement(
Svg,
_extends({ size: 20 }, props),
React.createElement('path', { d: 'M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z' })
);
};
// ==============================
// Dropdown & Clear Buttons
// ==============================
var baseCSS = function baseCSS(_ref2) {
var isFocused = _ref2.isFocused;
return {
color: isFocused ? colors.neutral60 : colors.neutral20,
display: 'flex',
padding: spacing.baseUnit * 2,
transition: 'color 150ms',
':hover': {
color: isFocused ? colors.neutral100 : colors.neutral40
}
};
};
var dropdownIndicatorCSS = baseCSS;
var DropdownIndicator = function DropdownIndicator(props) {
var _props$children = props.children,
children = _props$children === undefined ? React.createElement(DownChevron, null) : _props$children,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return React.createElement(
'div',
_extends({}, innerProps, {
className: cx( /*#__PURE__*/css(getStyles('dropdownIndicator', props)), {
'indicator': true,
'dropdown-indicator': true
}, className)
}),
children
);
};
var clearIndicatorCSS = baseCSS;
var ClearIndicator = function ClearIndicator(props) {
var _props$children2 = props.children,
children = _props$children2 === undefined ? React.createElement(CrossIcon, null) : _props$children2,
className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return React.createElement(
'div',
_extends({}, innerProps, {
className: cx( /*#__PURE__*/css(getStyles('clearIndicator', props)), {
'indicator': true,
'clear-indicator': true
}, className)
}),
children
);
};
// ==============================
// Separator
// ==============================
var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {
var isDisabled = _ref3.isDisabled;
return {
alignSelf: 'stretch',
backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
marginBottom: spacing.baseUnit * 2,
marginTop: spacing.baseUnit * 2,
width: 1
};
};
var IndicatorSeparator = function IndicatorSeparator(props) {
var className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps;
return React.createElement('span', _extends({}, innerProps, {
className: cx( /*#__PURE__*/css(getStyles('indicatorSeparator', props)), { 'indicator-separator': true }, className)
}));
};
// ==============================
// Loading
// ==============================
var keyframesName = 'react-select-loading-indicator';
var loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
var isFocused = _ref4.isFocused,
size = _ref4.size;
return {
color: isFocused ? colors.neutral60 : colors.neutral20,
display: 'flex',
padding: spacing.baseUnit * 2,
transition: 'color 150ms',
alignSelf: 'center',
fontSize: size,
lineHeight: 1,
marginRight: size,
textAlign: 'center',
verticalAlign: 'middle'
};
};
var LoadingDot = function LoadingDot(_ref5) {
var color = _ref5.color,
delay = _ref5.delay,
offset = _ref5.offset;
return React.createElement('span', {
className: css({
animationDuration: '1s',
animationDelay: delay + 'ms',
animationIterationCount: 'infinite',
animationName: keyframesName,
animationTimingFunction: 'ease-in-out',
backgroundColor: color,
borderRadius: '1em',
display: 'inline-block',
marginLeft: offset ? '1em' : null,
height: '1em',
verticalAlign: 'top',
width: '1em'
})
});
};
// eslint-disable-next-line no-unused-expressions
injectGlobal('@keyframes ', keyframesName, '{0%,80%,100%{opacity:0;}40%{opacity:1;}};');
var LoadingIndicator = function LoadingIndicator(props) {
var className = props.className,
cx = props.cx,
getStyles = props.getStyles,
innerProps = props.innerProps,
isFocused = props.isFocused,
isRtl = props.isRtl;
var color = isFocused ? colors.text : colors.neutral20;
return React.createElement(
'div',
_extends({}, innerProps, {
className: cx( /*#__PURE__*/css(getStyles('loadingIndicator', props)), {
'indicator': true,
'loading-indicator': true
}, className)
}),
React.createElement(LoadingDot, { color: color, delay: 0, offset: isRtl }),
React.createElement(LoadingDot, { color: color, delay: 160, offset: true }),
React.createElement(LoadingDot, { color: color, delay: 320, offset: !isRtl })
);
};
LoadingIndicator.defaultProps = {