UNPKG

96.5 kBJavaScriptView Raw
1'use strict';
2
3var _extends = require('@babel/runtime/helpers/extends');
4var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
5var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
6var _createClass = require('@babel/runtime/helpers/createClass');
7var _inherits = require('@babel/runtime/helpers/inherits');
8var _createSuper = require('@babel/runtime/helpers/createSuper');
9var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
10var React = require('react');
11var index = require('./index-665c4ed8.cjs.prod.js');
12var react = require('@emotion/react');
13var memoizeOne = require('memoize-one');
14var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
15
16function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
17
18function _interopNamespace(e) {
19 if (e && e.__esModule) return e;
20 var n = Object.create(null);
21 if (e) {
22 Object.keys(e).forEach(function (k) {
23 if (k !== 'default') {
24 var d = Object.getOwnPropertyDescriptor(e, k);
25 Object.defineProperty(n, k, d.get ? d : {
26 enumerable: true,
27 get: function () { return e[k]; }
28 });
29 }
30 });
31 }
32 n["default"] = e;
33 return Object.freeze(n);
34}
35
36var React__namespace = /*#__PURE__*/_interopNamespace(React);
37var memoizeOne__default = /*#__PURE__*/_interopDefault(memoizeOne);
38
39// Assistive text to describe visual elements. Hidden for sighted users.
40var _ref = {
41 name: "7pg0cj-a11yText",
42 styles: "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap"
43} ;
44var A11yText = function A11yText(props) {
45 return react.jsx("span", _extends({
46 css: _ref
47 }, props));
48};
49var A11yText$1 = A11yText;
50
51var defaultAriaLiveMessages = {
52 guidance: function guidance(props) {
53 var isSearchable = props.isSearchable,
54 isMulti = props.isMulti,
55 tabSelectsValue = props.tabSelectsValue,
56 context = props.context,
57 isInitialFocus = props.isInitialFocus;
58 switch (context) {
59 case 'menu':
60 return "Use Up and Down to choose options, 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' : '', ".");
61 case 'input':
62 return isInitialFocus ? "".concat(props['aria-label'] || 'Select', " is focused ").concat(isSearchable ? ',type to refine list' : '', ", press Down to open the menu, ").concat(isMulti ? ' press left to focus selected values' : '') : '';
63 case 'value':
64 return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
65 default:
66 return '';
67 }
68 },
69 onChange: function onChange(props) {
70 var action = props.action,
71 _props$label = props.label,
72 label = _props$label === void 0 ? '' : _props$label,
73 labels = props.labels,
74 isDisabled = props.isDisabled;
75 switch (action) {
76 case 'deselect-option':
77 case 'pop-value':
78 case 'remove-value':
79 return "option ".concat(label, ", deselected.");
80 case 'clear':
81 return 'All selected options have been cleared.';
82 case 'initial-input-focus':
83 return "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.");
84 case 'select-option':
85 return isDisabled ? "option ".concat(label, " is disabled. Select another option.") : "option ".concat(label, ", selected.");
86 default:
87 return '';
88 }
89 },
90 onFocus: function onFocus(props) {
91 var context = props.context,
92 focused = props.focused,
93 options = props.options,
94 _props$label2 = props.label,
95 label = _props$label2 === void 0 ? '' : _props$label2,
96 selectValue = props.selectValue,
97 isDisabled = props.isDisabled,
98 isSelected = props.isSelected,
99 isAppleDevice = props.isAppleDevice;
100 var getArrayIndex = function getArrayIndex(arr, item) {
101 return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " of ").concat(arr.length) : '';
102 };
103 if (context === 'value' && selectValue) {
104 return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
105 }
106 if (context === 'menu' && isAppleDevice) {
107 var disabled = isDisabled ? ' disabled' : '';
108 var status = "".concat(isSelected ? ' selected' : '').concat(disabled);
109 return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ".");
110 }
111 return '';
112 },
113 onFilter: function onFilter(props) {
114 var inputValue = props.inputValue,
115 resultsMessage = props.resultsMessage;
116 return "".concat(resultsMessage).concat(inputValue ? ' for search term ' + inputValue : '', ".");
117 }
118};
119
120var LiveRegion = function LiveRegion(props) {
121 var ariaSelection = props.ariaSelection,
122 focusedOption = props.focusedOption,
123 focusedValue = props.focusedValue,
124 focusableOptions = props.focusableOptions,
125 isFocused = props.isFocused,
126 selectValue = props.selectValue,
127 selectProps = props.selectProps,
128 id = props.id,
129 isAppleDevice = props.isAppleDevice;
130 var ariaLiveMessages = selectProps.ariaLiveMessages,
131 getOptionLabel = selectProps.getOptionLabel,
132 inputValue = selectProps.inputValue,
133 isMulti = selectProps.isMulti,
134 isOptionDisabled = selectProps.isOptionDisabled,
135 isSearchable = selectProps.isSearchable,
136 menuIsOpen = selectProps.menuIsOpen,
137 options = selectProps.options,
138 screenReaderStatus = selectProps.screenReaderStatus,
139 tabSelectsValue = selectProps.tabSelectsValue,
140 isLoading = selectProps.isLoading;
141 var ariaLabel = selectProps['aria-label'];
142 var ariaLive = selectProps['aria-live'];
143
144 // Update aria live message configuration when prop changes
145 var messages = React.useMemo(function () {
146 return _objectSpread(_objectSpread({}, defaultAriaLiveMessages), ariaLiveMessages || {});
147 }, [ariaLiveMessages]);
148
149 // Update aria live selected option when prop changes
150 var ariaSelected = React.useMemo(function () {
151 var message = '';
152 if (ariaSelection && messages.onChange) {
153 var option = ariaSelection.option,
154 selectedOptions = ariaSelection.options,
155 removedValue = ariaSelection.removedValue,
156 removedValues = ariaSelection.removedValues,
157 value = ariaSelection.value;
158 // select-option when !isMulti does not return option so we assume selected option is value
159 var asOption = function asOption(val) {
160 return !Array.isArray(val) ? val : null;
161 };
162
163 // If there is just one item from the action then get its label
164 var selected = removedValue || option || asOption(value);
165 var label = selected ? getOptionLabel(selected) : '';
166
167 // If there are multiple items from the action then return an array of labels
168 var multiSelected = selectedOptions || removedValues || undefined;
169 var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
170 var onChangeProps = _objectSpread({
171 // multiSelected items are usually items that have already been selected
172 // or set by the user as a default value so we assume they are not disabled
173 isDisabled: selected && isOptionDisabled(selected, selectValue),
174 label: label,
175 labels: labels
176 }, ariaSelection);
177 message = messages.onChange(onChangeProps);
178 }
179 return message;
180 }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
181 var ariaFocused = React.useMemo(function () {
182 var focusMsg = '';
183 var focused = focusedOption || focusedValue;
184 var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
185 if (focused && messages.onFocus) {
186 var onFocusProps = {
187 focused: focused,
188 label: getOptionLabel(focused),
189 isDisabled: isOptionDisabled(focused, selectValue),
190 isSelected: isSelected,
191 options: focusableOptions,
192 context: focused === focusedOption ? 'menu' : 'value',
193 selectValue: selectValue,
194 isAppleDevice: isAppleDevice
195 };
196 focusMsg = messages.onFocus(onFocusProps);
197 }
198 return focusMsg;
199 }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
200 var ariaResults = React.useMemo(function () {
201 var resultsMsg = '';
202 if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
203 var resultsMessage = screenReaderStatus({
204 count: focusableOptions.length
205 });
206 resultsMsg = messages.onFilter({
207 inputValue: inputValue,
208 resultsMessage: resultsMessage
209 });
210 }
211 return resultsMsg;
212 }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
213 var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
214 var ariaGuidance = React.useMemo(function () {
215 var guidanceMsg = '';
216 if (messages.guidance) {
217 var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
218 guidanceMsg = messages.guidance({
219 'aria-label': ariaLabel,
220 context: context,
221 isDisabled: focusedOption && isOptionDisabled(focusedOption, selectValue),
222 isMulti: isMulti,
223 isSearchable: isSearchable,
224 tabSelectsValue: tabSelectsValue,
225 isInitialFocus: isInitialFocus
226 });
227 }
228 return guidanceMsg;
229 }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
230 var ScreenReaderText = react.jsx(React.Fragment, null, react.jsx("span", {
231 id: "aria-selection"
232 }, ariaSelected), react.jsx("span", {
233 id: "aria-focused"
234 }, ariaFocused), react.jsx("span", {
235 id: "aria-results"
236 }, ariaResults), react.jsx("span", {
237 id: "aria-guidance"
238 }, ariaGuidance));
239 return react.jsx(React.Fragment, null, react.jsx(A11yText$1, {
240 id: id
241 }, isInitialFocus && ScreenReaderText), react.jsx(A11yText$1, {
242 "aria-live": ariaLive,
243 "aria-atomic": "false",
244 "aria-relevant": "additions text",
245 role: "log"
246 }, isFocused && !isInitialFocus && ScreenReaderText));
247};
248var LiveRegion$1 = LiveRegion;
249
250var diacritics = [{
251 base: 'A',
252 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"
253}, {
254 base: 'AA',
255 letters: "\uA732"
256}, {
257 base: 'AE',
258 letters: "\xC6\u01FC\u01E2"
259}, {
260 base: 'AO',
261 letters: "\uA734"
262}, {
263 base: 'AU',
264 letters: "\uA736"
265}, {
266 base: 'AV',
267 letters: "\uA738\uA73A"
268}, {
269 base: 'AY',
270 letters: "\uA73C"
271}, {
272 base: 'B',
273 letters: "B\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181"
274}, {
275 base: 'C',
276 letters: "C\u24B8\uFF23\u0106\u0108\u010A\u010C\xC7\u1E08\u0187\u023B\uA73E"
277}, {
278 base: 'D',
279 letters: "D\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779"
280}, {
281 base: 'DZ',
282 letters: "\u01F1\u01C4"
283}, {
284 base: 'Dz',
285 letters: "\u01F2\u01C5"
286}, {
287 base: 'E',
288 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"
289}, {
290 base: 'F',
291 letters: "F\u24BB\uFF26\u1E1E\u0191\uA77B"
292}, {
293 base: 'G',
294 letters: "G\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E"
295}, {
296 base: 'H',
297 letters: "H\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D"
298}, {
299 base: 'I',
300 letters: "I\u24BE\uFF29\xCC\xCD\xCE\u0128\u012A\u012C\u0130\xCF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197"
301}, {
302 base: 'J',
303 letters: "J\u24BF\uFF2A\u0134\u0248"
304}, {
305 base: 'K',
306 letters: "K\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2"
307}, {
308 base: 'L',
309 letters: "L\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780"
310}, {
311 base: 'LJ',
312 letters: "\u01C7"
313}, {
314 base: 'Lj',
315 letters: "\u01C8"
316}, {
317 base: 'M',
318 letters: "M\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C"
319}, {
320 base: 'N',
321 letters: "N\u24C3\uFF2E\u01F8\u0143\xD1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4"
322}, {
323 base: 'NJ',
324 letters: "\u01CA"
325}, {
326 base: 'Nj',
327 letters: "\u01CB"
328}, {
329 base: 'O',
330 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"
331}, {
332 base: 'OI',
333 letters: "\u01A2"
334}, {
335 base: 'OO',
336 letters: "\uA74E"
337}, {
338 base: 'OU',
339 letters: "\u0222"
340}, {
341 base: 'P',
342 letters: "P\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754"
343}, {
344 base: 'Q',
345 letters: "Q\u24C6\uFF31\uA756\uA758\u024A"
346}, {
347 base: 'R',
348 letters: "R\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782"
349}, {
350 base: 'S',
351 letters: "S\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784"
352}, {
353 base: 'T',
354 letters: "T\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786"
355}, {
356 base: 'TZ',
357 letters: "\uA728"
358}, {
359 base: 'U',
360 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"
361}, {
362 base: 'V',
363 letters: "V\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245"
364}, {
365 base: 'VY',
366 letters: "\uA760"
367}, {
368 base: 'W',
369 letters: "W\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72"
370}, {
371 base: 'X',
372 letters: "X\u24CD\uFF38\u1E8A\u1E8C"
373}, {
374 base: 'Y',
375 letters: "Y\u24CE\uFF39\u1EF2\xDD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE"
376}, {
377 base: 'Z',
378 letters: "Z\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762"
379}, {
380 base: 'a',
381 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"
382}, {
383 base: 'aa',
384 letters: "\uA733"
385}, {
386 base: 'ae',
387 letters: "\xE6\u01FD\u01E3"
388}, {
389 base: 'ao',
390 letters: "\uA735"
391}, {
392 base: 'au',
393 letters: "\uA737"
394}, {
395 base: 'av',
396 letters: "\uA739\uA73B"
397}, {
398 base: 'ay',
399 letters: "\uA73D"
400}, {
401 base: 'b',
402 letters: "b\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253"
403}, {
404 base: 'c',
405 letters: "c\u24D2\uFF43\u0107\u0109\u010B\u010D\xE7\u1E09\u0188\u023C\uA73F\u2184"
406}, {
407 base: 'd',
408 letters: "d\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A"
409}, {
410 base: 'dz',
411 letters: "\u01F3\u01C6"
412}, {
413 base: 'e',
414 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"
415}, {
416 base: 'f',
417 letters: "f\u24D5\uFF46\u1E1F\u0192\uA77C"
418}, {
419 base: 'g',
420 letters: "g\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F"
421}, {
422 base: 'h',
423 letters: "h\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265"
424}, {
425 base: 'hv',
426 letters: "\u0195"
427}, {
428 base: 'i',
429 letters: "i\u24D8\uFF49\xEC\xED\xEE\u0129\u012B\u012D\xEF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131"
430}, {
431 base: 'j',
432 letters: "j\u24D9\uFF4A\u0135\u01F0\u0249"
433}, {
434 base: 'k',
435 letters: "k\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3"
436}, {
437 base: 'l',
438 letters: "l\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747"
439}, {
440 base: 'lj',
441 letters: "\u01C9"
442}, {
443 base: 'm',
444 letters: "m\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F"
445}, {
446 base: 'n',
447 letters: "n\u24DD\uFF4E\u01F9\u0144\xF1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5"
448}, {
449 base: 'nj',
450 letters: "\u01CC"
451}, {
452 base: 'o',
453 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"
454}, {
455 base: 'oi',
456 letters: "\u01A3"
457}, {
458 base: 'ou',
459 letters: "\u0223"
460}, {
461 base: 'oo',
462 letters: "\uA74F"
463}, {
464 base: 'p',
465 letters: "p\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755"
466}, {
467 base: 'q',
468 letters: "q\u24E0\uFF51\u024B\uA757\uA759"
469}, {
470 base: 'r',
471 letters: "r\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783"
472}, {
473 base: 's',
474 letters: "s\u24E2\uFF53\xDF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B"
475}, {
476 base: 't',
477 letters: "t\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787"
478}, {
479 base: 'tz',
480 letters: "\uA729"
481}, {
482 base: 'u',
483 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"
484}, {
485 base: 'v',
486 letters: "v\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C"
487}, {
488 base: 'vy',
489 letters: "\uA761"
490}, {
491 base: 'w',
492 letters: "w\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73"
493}, {
494 base: 'x',
495 letters: "x\u24E7\uFF58\u1E8B\u1E8D"
496}, {
497 base: 'y',
498 letters: "y\u24E8\uFF59\u1EF3\xFD\u0177\u1EF9\u0233\u1E8F\xFF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF"
499}, {
500 base: 'z',
501 letters: "z\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763"
502}];
503var anyDiacritic = new RegExp('[' + diacritics.map(function (d) {
504 return d.letters;
505}).join('') + ']', 'g');
506var diacriticToBase = {};
507for (var i = 0; i < diacritics.length; i++) {
508 var diacritic = diacritics[i];
509 for (var j = 0; j < diacritic.letters.length; j++) {
510 diacriticToBase[diacritic.letters[j]] = diacritic.base;
511 }
512}
513var stripDiacritics = function stripDiacritics(str) {
514 return str.replace(anyDiacritic, function (match) {
515 return diacriticToBase[match];
516 });
517};
518
519var memoizedStripDiacriticsForInput = memoizeOne__default["default"](stripDiacritics);
520var trimString = function trimString(str) {
521 return str.replace(/^\s+|\s+$/g, '');
522};
523var defaultStringify = function defaultStringify(option) {
524 return "".concat(option.label, " ").concat(option.value);
525};
526var createFilter = function createFilter(config) {
527 return function (option, rawInput) {
528 // eslint-disable-next-line no-underscore-dangle
529 if (option.data.__isNew__) return true;
530 var _ignoreCase$ignoreAcc = _objectSpread({
531 ignoreCase: true,
532 ignoreAccents: true,
533 stringify: defaultStringify,
534 trim: true,
535 matchFrom: 'any'
536 }, config),
537 ignoreCase = _ignoreCase$ignoreAcc.ignoreCase,
538 ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents,
539 stringify = _ignoreCase$ignoreAcc.stringify,
540 trim = _ignoreCase$ignoreAcc.trim,
541 matchFrom = _ignoreCase$ignoreAcc.matchFrom;
542 var input = trim ? trimString(rawInput) : rawInput;
543 var candidate = trim ? trimString(stringify(option)) : stringify(option);
544 if (ignoreCase) {
545 input = input.toLowerCase();
546 candidate = candidate.toLowerCase();
547 }
548 if (ignoreAccents) {
549 input = memoizedStripDiacriticsForInput(input);
550 candidate = stripDiacritics(candidate);
551 }
552 return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1;
553 };
554};
555
556var _excluded = ["innerRef"];
557function DummyInput(_ref) {
558 var innerRef = _ref.innerRef,
559 props = _objectWithoutProperties(_ref, _excluded);
560 // Remove animation props not meant for HTML elements
561 var filteredProps = index.removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
562 return react.jsx("input", _extends({
563 ref: innerRef
564 }, filteredProps, {
565 css: /*#__PURE__*/react.css({
566 label: 'dummyInput',
567 // get rid of any default styles
568 background: 0,
569 border: 0,
570 // important! this hides the flashing cursor
571 caretColor: 'transparent',
572 fontSize: 'inherit',
573 gridArea: '1 / 1 / 2 / 3',
574 outline: 0,
575 padding: 0,
576 // important! without `width` browsers won't allow focus
577 width: 1,
578 // remove cursor on desktop
579 color: 'transparent',
580 // remove cursor on mobile whilst maintaining "scroll into view" behaviour
581 left: -100,
582 opacity: 0,
583 position: 'relative',
584 transform: 'scale(.01)'
585 }, "" , "" )
586 }));
587}
588
589var cancelScroll = function cancelScroll(event) {
590 if (event.cancelable) event.preventDefault();
591 event.stopPropagation();
592};
593function useScrollCapture(_ref) {
594 var isEnabled = _ref.isEnabled,
595 onBottomArrive = _ref.onBottomArrive,
596 onBottomLeave = _ref.onBottomLeave,
597 onTopArrive = _ref.onTopArrive,
598 onTopLeave = _ref.onTopLeave;
599 var isBottom = React.useRef(false);
600 var isTop = React.useRef(false);
601 var touchStart = React.useRef(0);
602 var scrollTarget = React.useRef(null);
603 var handleEventDelta = React.useCallback(function (event, delta) {
604 if (scrollTarget.current === null) return;
605 var _scrollTarget$current = scrollTarget.current,
606 scrollTop = _scrollTarget$current.scrollTop,
607 scrollHeight = _scrollTarget$current.scrollHeight,
608 clientHeight = _scrollTarget$current.clientHeight;
609 var target = scrollTarget.current;
610 var isDeltaPositive = delta > 0;
611 var availableScroll = scrollHeight - clientHeight - scrollTop;
612 var shouldCancelScroll = false;
613
614 // reset bottom/top flags
615 if (availableScroll > delta && isBottom.current) {
616 if (onBottomLeave) onBottomLeave(event);
617 isBottom.current = false;
618 }
619 if (isDeltaPositive && isTop.current) {
620 if (onTopLeave) onTopLeave(event);
621 isTop.current = false;
622 }
623
624 // bottom limit
625 if (isDeltaPositive && delta > availableScroll) {
626 if (onBottomArrive && !isBottom.current) {
627 onBottomArrive(event);
628 }
629 target.scrollTop = scrollHeight;
630 shouldCancelScroll = true;
631 isBottom.current = true;
632
633 // top limit
634 } else if (!isDeltaPositive && -delta > scrollTop) {
635 if (onTopArrive && !isTop.current) {
636 onTopArrive(event);
637 }
638 target.scrollTop = 0;
639 shouldCancelScroll = true;
640 isTop.current = true;
641 }
642
643 // cancel scroll
644 if (shouldCancelScroll) {
645 cancelScroll(event);
646 }
647 }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
648 var onWheel = React.useCallback(function (event) {
649 handleEventDelta(event, event.deltaY);
650 }, [handleEventDelta]);
651 var onTouchStart = React.useCallback(function (event) {
652 // set touch start so we can calculate touchmove delta
653 touchStart.current = event.changedTouches[0].clientY;
654 }, []);
655 var onTouchMove = React.useCallback(function (event) {
656 var deltaY = touchStart.current - event.changedTouches[0].clientY;
657 handleEventDelta(event, deltaY);
658 }, [handleEventDelta]);
659 var startListening = React.useCallback(function (el) {
660 // bail early if no element is available to attach to
661 if (!el) return;
662 var notPassive = index.supportsPassiveEvents ? {
663 passive: false
664 } : false;
665 el.addEventListener('wheel', onWheel, notPassive);
666 el.addEventListener('touchstart', onTouchStart, notPassive);
667 el.addEventListener('touchmove', onTouchMove, notPassive);
668 }, [onTouchMove, onTouchStart, onWheel]);
669 var stopListening = React.useCallback(function (el) {
670 // bail early if no element is available to detach from
671 if (!el) return;
672 el.removeEventListener('wheel', onWheel, false);
673 el.removeEventListener('touchstart', onTouchStart, false);
674 el.removeEventListener('touchmove', onTouchMove, false);
675 }, [onTouchMove, onTouchStart, onWheel]);
676 React.useEffect(function () {
677 if (!isEnabled) return;
678 var element = scrollTarget.current;
679 startListening(element);
680 return function () {
681 stopListening(element);
682 };
683 }, [isEnabled, startListening, stopListening]);
684 return function (element) {
685 scrollTarget.current = element;
686 };
687}
688
689var STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];
690var LOCK_STYLES = {
691 boxSizing: 'border-box',
692 // account for possible declaration `width: 100%;` on body
693 overflow: 'hidden',
694 position: 'relative',
695 height: '100%'
696};
697function preventTouchMove(e) {
698 e.preventDefault();
699}
700function allowTouchMove(e) {
701 e.stopPropagation();
702}
703function preventInertiaScroll() {
704 var top = this.scrollTop;
705 var totalScroll = this.scrollHeight;
706 var currentScroll = top + this.offsetHeight;
707 if (top === 0) {
708 this.scrollTop = 1;
709 } else if (currentScroll === totalScroll) {
710 this.scrollTop = top - 1;
711 }
712}
713
714// `ontouchstart` check works on most browsers
715// `maxTouchPoints` works on IE10/11 and Surface
716function isTouchDevice() {
717 return 'ontouchstart' in window || navigator.maxTouchPoints;
718}
719var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
720var activeScrollLocks = 0;
721var listenerOptions = {
722 capture: false,
723 passive: false
724};
725function useScrollLock(_ref) {
726 var isEnabled = _ref.isEnabled,
727 _ref$accountForScroll = _ref.accountForScrollbars,
728 accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
729 var originalStyles = React.useRef({});
730 var scrollTarget = React.useRef(null);
731 var addScrollLock = React.useCallback(function (touchScrollTarget) {
732 if (!canUseDOM) return;
733 var target = document.body;
734 var targetStyle = target && target.style;
735 if (accountForScrollbars) {
736 // store any styles already applied to the body
737 STYLE_KEYS.forEach(function (key) {
738 var val = targetStyle && targetStyle[key];
739 originalStyles.current[key] = val;
740 });
741 }
742
743 // apply the lock styles and padding if this is the first scroll lock
744 if (accountForScrollbars && activeScrollLocks < 1) {
745 var currentPadding = parseInt(originalStyles.current.paddingRight, 10) || 0;
746 var clientWidth = document.body ? document.body.clientWidth : 0;
747 var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;
748 Object.keys(LOCK_STYLES).forEach(function (key) {
749 var val = LOCK_STYLES[key];
750 if (targetStyle) {
751 targetStyle[key] = val;
752 }
753 });
754 if (targetStyle) {
755 targetStyle.paddingRight = "".concat(adjustedPadding, "px");
756 }
757 }
758
759 // account for touch devices
760 if (target && isTouchDevice()) {
761 // Mobile Safari ignores { overflow: hidden } declaration on the body.
762 target.addEventListener('touchmove', preventTouchMove, listenerOptions);
763
764 // Allow scroll on provided target
765 if (touchScrollTarget) {
766 touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, listenerOptions);
767 touchScrollTarget.addEventListener('touchmove', allowTouchMove, listenerOptions);
768 }
769 }
770
771 // increment active scroll locks
772 activeScrollLocks += 1;
773 }, [accountForScrollbars]);
774 var removeScrollLock = React.useCallback(function (touchScrollTarget) {
775 if (!canUseDOM) return;
776 var target = document.body;
777 var targetStyle = target && target.style;
778
779 // safely decrement active scroll locks
780 activeScrollLocks = Math.max(activeScrollLocks - 1, 0);
781
782 // reapply original body styles, if any
783 if (accountForScrollbars && activeScrollLocks < 1) {
784 STYLE_KEYS.forEach(function (key) {
785 var val = originalStyles.current[key];
786 if (targetStyle) {
787 targetStyle[key] = val;
788 }
789 });
790 }
791
792 // remove touch listeners
793 if (target && isTouchDevice()) {
794 target.removeEventListener('touchmove', preventTouchMove, listenerOptions);
795 if (touchScrollTarget) {
796 touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, listenerOptions);
797 touchScrollTarget.removeEventListener('touchmove', allowTouchMove, listenerOptions);
798 }
799 }
800 }, [accountForScrollbars]);
801 React.useEffect(function () {
802 if (!isEnabled) return;
803 var element = scrollTarget.current;
804 addScrollLock(element);
805 return function () {
806 removeScrollLock(element);
807 };
808 }, [isEnabled, addScrollLock, removeScrollLock]);
809 return function (element) {
810 scrollTarget.current = element;
811 };
812}
813
814var blurSelectInput = function blurSelectInput(event) {
815 var element = event.target;
816 return element.ownerDocument.activeElement && element.ownerDocument.activeElement.blur();
817};
818var _ref2$1 = {
819 name: "1kfdb0e",
820 styles: "position:fixed;left:0;bottom:0;right:0;top:0"
821} ;
822function ScrollManager(_ref) {
823 var children = _ref.children,
824 lockEnabled = _ref.lockEnabled,
825 _ref$captureEnabled = _ref.captureEnabled,
826 captureEnabled = _ref$captureEnabled === void 0 ? true : _ref$captureEnabled,
827 onBottomArrive = _ref.onBottomArrive,
828 onBottomLeave = _ref.onBottomLeave,
829 onTopArrive = _ref.onTopArrive,
830 onTopLeave = _ref.onTopLeave;
831 var setScrollCaptureTarget = useScrollCapture({
832 isEnabled: captureEnabled,
833 onBottomArrive: onBottomArrive,
834 onBottomLeave: onBottomLeave,
835 onTopArrive: onTopArrive,
836 onTopLeave: onTopLeave
837 });
838 var setScrollLockTarget = useScrollLock({
839 isEnabled: lockEnabled
840 });
841 var targetRef = function targetRef(element) {
842 setScrollCaptureTarget(element);
843 setScrollLockTarget(element);
844 };
845 return react.jsx(React.Fragment, null, lockEnabled && react.jsx("div", {
846 onClick: blurSelectInput,
847 css: _ref2$1
848 }), children(targetRef));
849}
850
851var _ref2 = {
852 name: "1a0ro4n-requiredInput",
853 styles: "label:requiredInput;opacity:0;pointer-events:none;position:absolute;bottom:0;left:0;right:0;width:100%"
854} ;
855var RequiredInput = function RequiredInput(_ref) {
856 var name = _ref.name,
857 onFocus = _ref.onFocus;
858 return react.jsx("input", {
859 required: true,
860 name: name,
861 tabIndex: -1,
862 "aria-hidden": "true",
863 onFocus: onFocus,
864 css: _ref2
865 // Prevent `Switching from uncontrolled to controlled` error
866 ,
867 value: "",
868 onChange: function onChange() {}
869 });
870};
871var RequiredInput$1 = RequiredInput;
872
873/// <reference types="user-agent-data-types" />
874
875function testPlatform(re) {
876 var _window$navigator$use;
877 return typeof window !== 'undefined' && window.navigator != null ? re.test(((_window$navigator$use = window.navigator['userAgentData']) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform) : false;
878}
879function isIPhone() {
880 return testPlatform(/^iPhone/i);
881}
882function isMac() {
883 return testPlatform(/^Mac/i);
884}
885function isIPad() {
886 return testPlatform(/^iPad/i) ||
887 // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
888 isMac() && navigator.maxTouchPoints > 1;
889}
890function isIOS() {
891 return isIPhone() || isIPad();
892}
893function isAppleDevice() {
894 return isMac() || isIOS();
895}
896
897var formatGroupLabel = function formatGroupLabel(group) {
898 return group.label;
899};
900var getOptionLabel$1 = function getOptionLabel(option) {
901 return option.label;
902};
903var getOptionValue$1 = function getOptionValue(option) {
904 return option.value;
905};
906var isOptionDisabled = function isOptionDisabled(option) {
907 return !!option.isDisabled;
908};
909
910var defaultStyles = {
911 clearIndicator: index.clearIndicatorCSS,
912 container: index.containerCSS,
913 control: index.css,
914 dropdownIndicator: index.dropdownIndicatorCSS,
915 group: index.groupCSS,
916 groupHeading: index.groupHeadingCSS,
917 indicatorsContainer: index.indicatorsContainerCSS,
918 indicatorSeparator: index.indicatorSeparatorCSS,
919 input: index.inputCSS,
920 loadingIndicator: index.loadingIndicatorCSS,
921 loadingMessage: index.loadingMessageCSS,
922 menu: index.menuCSS,
923 menuList: index.menuListCSS,
924 menuPortal: index.menuPortalCSS,
925 multiValue: index.multiValueCSS,
926 multiValueLabel: index.multiValueLabelCSS,
927 multiValueRemove: index.multiValueRemoveCSS,
928 noOptionsMessage: index.noOptionsMessageCSS,
929 option: index.optionCSS,
930 placeholder: index.placeholderCSS,
931 singleValue: index.css$1,
932 valueContainer: index.valueContainerCSS
933};
934// Merge Utility
935// Allows consumers to extend a base Select with additional styles
936
937function mergeStyles(source) {
938 var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
939 // initialize with source styles
940 var styles = _objectSpread({}, source);
941
942 // massage in target styles
943 Object.keys(target).forEach(function (keyAsString) {
944 var key = keyAsString;
945 if (source[key]) {
946 styles[key] = function (rsCss, props) {
947 return target[key](source[key](rsCss, props), props);
948 };
949 } else {
950 styles[key] = target[key];
951 }
952 });
953 return styles;
954}
955
956var colors = {
957 primary: '#2684FF',
958 primary75: '#4C9AFF',
959 primary50: '#B2D4FF',
960 primary25: '#DEEBFF',
961 danger: '#DE350B',
962 dangerLight: '#FFBDAD',
963 neutral0: 'hsl(0, 0%, 100%)',
964 neutral5: 'hsl(0, 0%, 95%)',
965 neutral10: 'hsl(0, 0%, 90%)',
966 neutral20: 'hsl(0, 0%, 80%)',
967 neutral30: 'hsl(0, 0%, 70%)',
968 neutral40: 'hsl(0, 0%, 60%)',
969 neutral50: 'hsl(0, 0%, 50%)',
970 neutral60: 'hsl(0, 0%, 40%)',
971 neutral70: 'hsl(0, 0%, 30%)',
972 neutral80: 'hsl(0, 0%, 20%)',
973 neutral90: 'hsl(0, 0%, 10%)'
974};
975var borderRadius = 4;
976// Used to calculate consistent margin/padding on elements
977var baseUnit = 4;
978// The minimum height of the control
979var controlHeight = 38;
980// The amount of space between the control and menu */
981var menuGutter = baseUnit * 2;
982var spacing = {
983 baseUnit: baseUnit,
984 controlHeight: controlHeight,
985 menuGutter: menuGutter
986};
987var defaultTheme = {
988 borderRadius: borderRadius,
989 colors: colors,
990 spacing: spacing
991};
992
993var defaultProps = {
994 'aria-live': 'polite',
995 backspaceRemovesValue: true,
996 blurInputOnSelect: index.isTouchCapable(),
997 captureMenuScroll: !index.isTouchCapable(),
998 classNames: {},
999 closeMenuOnSelect: true,
1000 closeMenuOnScroll: false,
1001 components: {},
1002 controlShouldRenderValue: true,
1003 escapeClearsValue: false,
1004 filterOption: createFilter(),
1005 formatGroupLabel: formatGroupLabel,
1006 getOptionLabel: getOptionLabel$1,
1007 getOptionValue: getOptionValue$1,
1008 isDisabled: false,
1009 isLoading: false,
1010 isMulti: false,
1011 isRtl: false,
1012 isSearchable: true,
1013 isOptionDisabled: isOptionDisabled,
1014 loadingMessage: function loadingMessage() {
1015 return 'Loading...';
1016 },
1017 maxMenuHeight: 300,
1018 minMenuHeight: 140,
1019 menuIsOpen: false,
1020 menuPlacement: 'bottom',
1021 menuPosition: 'absolute',
1022 menuShouldBlockScroll: false,
1023 menuShouldScrollIntoView: !index.isMobileDevice(),
1024 noOptionsMessage: function noOptionsMessage() {
1025 return 'No options';
1026 },
1027 openMenuOnFocus: false,
1028 openMenuOnClick: true,
1029 options: [],
1030 pageSize: 5,
1031 placeholder: 'Select...',
1032 screenReaderStatus: function screenReaderStatus(_ref) {
1033 var count = _ref.count;
1034 return "".concat(count, " result").concat(count !== 1 ? 's' : '', " available");
1035 },
1036 styles: {},
1037 tabIndex: 0,
1038 tabSelectsValue: true,
1039 unstyled: false
1040};
1041function toCategorizedOption(props, option, selectValue, index) {
1042 var isDisabled = _isOptionDisabled(props, option, selectValue);
1043 var isSelected = _isOptionSelected(props, option, selectValue);
1044 var label = getOptionLabel(props, option);
1045 var value = getOptionValue(props, option);
1046 return {
1047 type: 'option',
1048 data: option,
1049 isDisabled: isDisabled,
1050 isSelected: isSelected,
1051 label: label,
1052 value: value,
1053 index: index
1054 };
1055}
1056function buildCategorizedOptions(props, selectValue) {
1057 return props.options.map(function (groupOrOption, groupOrOptionIndex) {
1058 if ('options' in groupOrOption) {
1059 var categorizedOptions = groupOrOption.options.map(function (option, optionIndex) {
1060 return toCategorizedOption(props, option, selectValue, optionIndex);
1061 }).filter(function (categorizedOption) {
1062 return isFocusable(props, categorizedOption);
1063 });
1064 return categorizedOptions.length > 0 ? {
1065 type: 'group',
1066 data: groupOrOption,
1067 options: categorizedOptions,
1068 index: groupOrOptionIndex
1069 } : undefined;
1070 }
1071 var categorizedOption = toCategorizedOption(props, groupOrOption, selectValue, groupOrOptionIndex);
1072 return isFocusable(props, categorizedOption) ? categorizedOption : undefined;
1073 }).filter(index.notNullish);
1074}
1075function buildFocusableOptionsFromCategorizedOptions(categorizedOptions) {
1076 return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
1077 if (categorizedOption.type === 'group') {
1078 optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
1079 return option.data;
1080 })));
1081 } else {
1082 optionsAccumulator.push(categorizedOption.data);
1083 }
1084 return optionsAccumulator;
1085 }, []);
1086}
1087function buildFocusableOptionsWithIds(categorizedOptions, optionId) {
1088 return categorizedOptions.reduce(function (optionsAccumulator, categorizedOption) {
1089 if (categorizedOption.type === 'group') {
1090 optionsAccumulator.push.apply(optionsAccumulator, _toConsumableArray(categorizedOption.options.map(function (option) {
1091 return {
1092 data: option.data,
1093 id: "".concat(optionId, "-").concat(categorizedOption.index, "-").concat(option.index)
1094 };
1095 })));
1096 } else {
1097 optionsAccumulator.push({
1098 data: categorizedOption.data,
1099 id: "".concat(optionId, "-").concat(categorizedOption.index)
1100 });
1101 }
1102 return optionsAccumulator;
1103 }, []);
1104}
1105function buildFocusableOptions(props, selectValue) {
1106 return buildFocusableOptionsFromCategorizedOptions(buildCategorizedOptions(props, selectValue));
1107}
1108function isFocusable(props, categorizedOption) {
1109 var _props$inputValue = props.inputValue,
1110 inputValue = _props$inputValue === void 0 ? '' : _props$inputValue;
1111 var data = categorizedOption.data,
1112 isSelected = categorizedOption.isSelected,
1113 label = categorizedOption.label,
1114 value = categorizedOption.value;
1115 return (!shouldHideSelectedOptions(props) || !isSelected) && _filterOption(props, {
1116 label: label,
1117 value: value,
1118 data: data
1119 }, inputValue);
1120}
1121function getNextFocusedValue(state, nextSelectValue) {
1122 var focusedValue = state.focusedValue,
1123 lastSelectValue = state.selectValue;
1124 var lastFocusedIndex = lastSelectValue.indexOf(focusedValue);
1125 if (lastFocusedIndex > -1) {
1126 var nextFocusedIndex = nextSelectValue.indexOf(focusedValue);
1127 if (nextFocusedIndex > -1) {
1128 // the focused value is still in the selectValue, return it
1129 return focusedValue;
1130 } else if (lastFocusedIndex < nextSelectValue.length) {
1131 // the focusedValue is not present in the next selectValue array by
1132 // reference, so return the new value at the same index
1133 return nextSelectValue[lastFocusedIndex];
1134 }
1135 }
1136 return null;
1137}
1138function getNextFocusedOption(state, options) {
1139 var lastFocusedOption = state.focusedOption;
1140 return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];
1141}
1142var getFocusedOptionId = function getFocusedOptionId(focusableOptionsWithIds, focusedOption) {
1143 var _focusableOptionsWith;
1144 var focusedOptionId = (_focusableOptionsWith = focusableOptionsWithIds.find(function (option) {
1145 return option.data === focusedOption;
1146 })) === null || _focusableOptionsWith === void 0 ? void 0 : _focusableOptionsWith.id;
1147 return focusedOptionId || null;
1148};
1149var getOptionLabel = function getOptionLabel(props, data) {
1150 return props.getOptionLabel(data);
1151};
1152var getOptionValue = function getOptionValue(props, data) {
1153 return props.getOptionValue(data);
1154};
1155function _isOptionDisabled(props, option, selectValue) {
1156 return typeof props.isOptionDisabled === 'function' ? props.isOptionDisabled(option, selectValue) : false;
1157}
1158function _isOptionSelected(props, option, selectValue) {
1159 if (selectValue.indexOf(option) > -1) return true;
1160 if (typeof props.isOptionSelected === 'function') {
1161 return props.isOptionSelected(option, selectValue);
1162 }
1163 var candidate = getOptionValue(props, option);
1164 return selectValue.some(function (i) {
1165 return getOptionValue(props, i) === candidate;
1166 });
1167}
1168function _filterOption(props, option, inputValue) {
1169 return props.filterOption ? props.filterOption(option, inputValue) : true;
1170}
1171var shouldHideSelectedOptions = function shouldHideSelectedOptions(props) {
1172 var hideSelectedOptions = props.hideSelectedOptions,
1173 isMulti = props.isMulti;
1174 if (hideSelectedOptions === undefined) return isMulti;
1175 return hideSelectedOptions;
1176};
1177var instanceId = 1;
1178var Select = /*#__PURE__*/function (_Component) {
1179 _inherits(Select, _Component);
1180 var _super = _createSuper(Select);
1181 // Misc. Instance Properties
1182 // ------------------------------
1183
1184 // TODO
1185
1186 // Refs
1187 // ------------------------------
1188
1189 // Lifecycle
1190 // ------------------------------
1191
1192 function Select(_props) {
1193 var _this;
1194 _classCallCheck(this, Select);
1195 _this = _super.call(this, _props);
1196 _this.state = {
1197 ariaSelection: null,
1198 focusedOption: null,
1199 focusedOptionId: null,
1200 focusableOptionsWithIds: [],
1201 focusedValue: null,
1202 inputIsHidden: false,
1203 isFocused: false,
1204 selectValue: [],
1205 clearFocusValueOnUpdate: false,
1206 prevWasFocused: false,
1207 inputIsHiddenAfterUpdate: undefined,
1208 prevProps: undefined,
1209 instancePrefix: ''
1210 };
1211 _this.blockOptionHover = false;
1212 _this.isComposing = false;
1213 _this.commonProps = void 0;
1214 _this.initialTouchX = 0;
1215 _this.initialTouchY = 0;
1216 _this.openAfterFocus = false;
1217 _this.scrollToFocusedOptionOnUpdate = false;
1218 _this.userIsDragging = void 0;
1219 _this.isAppleDevice = isAppleDevice();
1220 _this.controlRef = null;
1221 _this.getControlRef = function (ref) {
1222 _this.controlRef = ref;
1223 };
1224 _this.focusedOptionRef = null;
1225 _this.getFocusedOptionRef = function (ref) {
1226 _this.focusedOptionRef = ref;
1227 };
1228 _this.menuListRef = null;
1229 _this.getMenuListRef = function (ref) {
1230 _this.menuListRef = ref;
1231 };
1232 _this.inputRef = null;
1233 _this.getInputRef = function (ref) {
1234 _this.inputRef = ref;
1235 };
1236 _this.focus = _this.focusInput;
1237 _this.blur = _this.blurInput;
1238 _this.onChange = function (newValue, actionMeta) {
1239 var _this$props = _this.props,
1240 onChange = _this$props.onChange,
1241 name = _this$props.name;
1242 actionMeta.name = name;
1243 _this.ariaOnChange(newValue, actionMeta);
1244 onChange(newValue, actionMeta);
1245 };
1246 _this.setValue = function (newValue, action, option) {
1247 var _this$props2 = _this.props,
1248 closeMenuOnSelect = _this$props2.closeMenuOnSelect,
1249 isMulti = _this$props2.isMulti,
1250 inputValue = _this$props2.inputValue;
1251 _this.onInputChange('', {
1252 action: 'set-value',
1253 prevInputValue: inputValue
1254 });
1255 if (closeMenuOnSelect) {
1256 _this.setState({
1257 inputIsHiddenAfterUpdate: !isMulti
1258 });
1259 _this.onMenuClose();
1260 }
1261 // when the select value should change, we should reset focusedValue
1262 _this.setState({
1263 clearFocusValueOnUpdate: true
1264 });
1265 _this.onChange(newValue, {
1266 action: action,
1267 option: option
1268 });
1269 };
1270 _this.selectOption = function (newValue) {
1271 var _this$props3 = _this.props,
1272 blurInputOnSelect = _this$props3.blurInputOnSelect,
1273 isMulti = _this$props3.isMulti,
1274 name = _this$props3.name;
1275 var selectValue = _this.state.selectValue;
1276 var deselected = isMulti && _this.isOptionSelected(newValue, selectValue);
1277 var isDisabled = _this.isOptionDisabled(newValue, selectValue);
1278 if (deselected) {
1279 var candidate = _this.getOptionValue(newValue);
1280 _this.setValue(index.multiValueAsValue(selectValue.filter(function (i) {
1281 return _this.getOptionValue(i) !== candidate;
1282 })), 'deselect-option', newValue);
1283 } else if (!isDisabled) {
1284 // Select option if option is not disabled
1285 if (isMulti) {
1286 _this.setValue(index.multiValueAsValue([].concat(_toConsumableArray(selectValue), [newValue])), 'select-option', newValue);
1287 } else {
1288 _this.setValue(index.singleValueAsValue(newValue), 'select-option');
1289 }
1290 } else {
1291 _this.ariaOnChange(index.singleValueAsValue(newValue), {
1292 action: 'select-option',
1293 option: newValue,
1294 name: name
1295 });
1296 return;
1297 }
1298 if (blurInputOnSelect) {
1299 _this.blurInput();
1300 }
1301 };
1302 _this.removeValue = function (removedValue) {
1303 var isMulti = _this.props.isMulti;
1304 var selectValue = _this.state.selectValue;
1305 var candidate = _this.getOptionValue(removedValue);
1306 var newValueArray = selectValue.filter(function (i) {
1307 return _this.getOptionValue(i) !== candidate;
1308 });
1309 var newValue = index.valueTernary(isMulti, newValueArray, newValueArray[0] || null);
1310 _this.onChange(newValue, {
1311 action: 'remove-value',
1312 removedValue: removedValue
1313 });
1314 _this.focusInput();
1315 };
1316 _this.clearValue = function () {
1317 var selectValue = _this.state.selectValue;
1318 _this.onChange(index.valueTernary(_this.props.isMulti, [], null), {
1319 action: 'clear',
1320 removedValues: selectValue
1321 });
1322 };
1323 _this.popValue = function () {
1324 var isMulti = _this.props.isMulti;
1325 var selectValue = _this.state.selectValue;
1326 var lastSelectedValue = selectValue[selectValue.length - 1];
1327 var newValueArray = selectValue.slice(0, selectValue.length - 1);
1328 var newValue = index.valueTernary(isMulti, newValueArray, newValueArray[0] || null);
1329 _this.onChange(newValue, {
1330 action: 'pop-value',
1331 removedValue: lastSelectedValue
1332 });
1333 };
1334 _this.getFocusedOptionId = function (focusedOption) {
1335 return getFocusedOptionId(_this.state.focusableOptionsWithIds, focusedOption);
1336 };
1337 _this.getFocusableOptionsWithIds = function () {
1338 return buildFocusableOptionsWithIds(buildCategorizedOptions(_this.props, _this.state.selectValue), _this.getElementId('option'));
1339 };
1340 _this.getValue = function () {
1341 return _this.state.selectValue;
1342 };
1343 _this.cx = function () {
1344 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1345 args[_key] = arguments[_key];
1346 }
1347 return index.classNames.apply(void 0, [_this.props.classNamePrefix].concat(args));
1348 };
1349 _this.getOptionLabel = function (data) {
1350 return getOptionLabel(_this.props, data);
1351 };
1352 _this.getOptionValue = function (data) {
1353 return getOptionValue(_this.props, data);
1354 };
1355 _this.getStyles = function (key, props) {
1356 var unstyled = _this.props.unstyled;
1357 var base = defaultStyles[key](props, unstyled);
1358 base.boxSizing = 'border-box';
1359 var custom = _this.props.styles[key];
1360 return custom ? custom(base, props) : base;
1361 };
1362 _this.getClassNames = function (key, props) {
1363 var _this$props$className, _this$props$className2;
1364 return (_this$props$className = (_this$props$className2 = _this.props.classNames)[key]) === null || _this$props$className === void 0 ? void 0 : _this$props$className.call(_this$props$className2, props);
1365 };
1366 _this.getElementId = function (element) {
1367 return "".concat(_this.state.instancePrefix, "-").concat(element);
1368 };
1369 _this.getComponents = function () {
1370 return index.defaultComponents(_this.props);
1371 };
1372 _this.buildCategorizedOptions = function () {
1373 return buildCategorizedOptions(_this.props, _this.state.selectValue);
1374 };
1375 _this.getCategorizedOptions = function () {
1376 return _this.props.menuIsOpen ? _this.buildCategorizedOptions() : [];
1377 };
1378 _this.buildFocusableOptions = function () {
1379 return buildFocusableOptionsFromCategorizedOptions(_this.buildCategorizedOptions());
1380 };
1381 _this.getFocusableOptions = function () {
1382 return _this.props.menuIsOpen ? _this.buildFocusableOptions() : [];
1383 };
1384 _this.ariaOnChange = function (value, actionMeta) {
1385 _this.setState({
1386 ariaSelection: _objectSpread({
1387 value: value
1388 }, actionMeta)
1389 });
1390 };
1391 _this.onMenuMouseDown = function (event) {
1392 if (event.button !== 0) {
1393 return;
1394 }
1395 event.stopPropagation();
1396 event.preventDefault();
1397 _this.focusInput();
1398 };
1399 _this.onMenuMouseMove = function (event) {
1400 _this.blockOptionHover = false;
1401 };
1402 _this.onControlMouseDown = function (event) {
1403 // Event captured by dropdown indicator
1404 if (event.defaultPrevented) {
1405 return;
1406 }
1407 var openMenuOnClick = _this.props.openMenuOnClick;
1408 if (!_this.state.isFocused) {
1409 if (openMenuOnClick) {
1410 _this.openAfterFocus = true;
1411 }
1412 _this.focusInput();
1413 } else if (!_this.props.menuIsOpen) {
1414 if (openMenuOnClick) {
1415 _this.openMenu('first');
1416 }
1417 } else {
1418 if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
1419 _this.onMenuClose();
1420 }
1421 }
1422 if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
1423 event.preventDefault();
1424 }
1425 };
1426 _this.onDropdownIndicatorMouseDown = function (event) {
1427 // ignore mouse events that weren't triggered by the primary button
1428 if (event && event.type === 'mousedown' && event.button !== 0) {
1429 return;
1430 }
1431 if (_this.props.isDisabled) return;
1432 var _this$props4 = _this.props,
1433 isMulti = _this$props4.isMulti,
1434 menuIsOpen = _this$props4.menuIsOpen;
1435 _this.focusInput();
1436 if (menuIsOpen) {
1437 _this.setState({
1438 inputIsHiddenAfterUpdate: !isMulti
1439 });
1440 _this.onMenuClose();
1441 } else {
1442 _this.openMenu('first');
1443 }
1444 event.preventDefault();
1445 };
1446 _this.onClearIndicatorMouseDown = function (event) {
1447 // ignore mouse events that weren't triggered by the primary button
1448 if (event && event.type === 'mousedown' && event.button !== 0) {
1449 return;
1450 }
1451 _this.clearValue();
1452 event.preventDefault();
1453 _this.openAfterFocus = false;
1454 if (event.type === 'touchend') {
1455 _this.focusInput();
1456 } else {
1457 setTimeout(function () {
1458 return _this.focusInput();
1459 });
1460 }
1461 };
1462 _this.onScroll = function (event) {
1463 if (typeof _this.props.closeMenuOnScroll === 'boolean') {
1464 if (event.target instanceof HTMLElement && index.isDocumentElement(event.target)) {
1465 _this.props.onMenuClose();
1466 }
1467 } else if (typeof _this.props.closeMenuOnScroll === 'function') {
1468 if (_this.props.closeMenuOnScroll(event)) {
1469 _this.props.onMenuClose();
1470 }
1471 }
1472 };
1473 _this.onCompositionStart = function () {
1474 _this.isComposing = true;
1475 };
1476 _this.onCompositionEnd = function () {
1477 _this.isComposing = false;
1478 };
1479 _this.onTouchStart = function (_ref2) {
1480 var touches = _ref2.touches;
1481 var touch = touches && touches.item(0);
1482 if (!touch) {
1483 return;
1484 }
1485 _this.initialTouchX = touch.clientX;
1486 _this.initialTouchY = touch.clientY;
1487 _this.userIsDragging = false;
1488 };
1489 _this.onTouchMove = function (_ref3) {
1490 var touches = _ref3.touches;
1491 var touch = touches && touches.item(0);
1492 if (!touch) {
1493 return;
1494 }
1495 var deltaX = Math.abs(touch.clientX - _this.initialTouchX);
1496 var deltaY = Math.abs(touch.clientY - _this.initialTouchY);
1497 var moveThreshold = 5;
1498 _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold;
1499 };
1500 _this.onTouchEnd = function (event) {
1501 if (_this.userIsDragging) return;
1502
1503 // close the menu if the user taps outside
1504 // we're checking on event.target here instead of event.currentTarget, because we want to assert information
1505 // on events on child elements, not the document (which we've attached this handler to).
1506 if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) {
1507 _this.blurInput();
1508 }
1509
1510 // reset move vars
1511 _this.initialTouchX = 0;
1512 _this.initialTouchY = 0;
1513 };
1514 _this.onControlTouchEnd = function (event) {
1515 if (_this.userIsDragging) return;
1516 _this.onControlMouseDown(event);
1517 };
1518 _this.onClearIndicatorTouchEnd = function (event) {
1519 if (_this.userIsDragging) return;
1520 _this.onClearIndicatorMouseDown(event);
1521 };
1522 _this.onDropdownIndicatorTouchEnd = function (event) {
1523 if (_this.userIsDragging) return;
1524 _this.onDropdownIndicatorMouseDown(event);
1525 };
1526 _this.handleInputChange = function (event) {
1527 var prevInputValue = _this.props.inputValue;
1528 var inputValue = event.currentTarget.value;
1529 _this.setState({
1530 inputIsHiddenAfterUpdate: false
1531 });
1532 _this.onInputChange(inputValue, {
1533 action: 'input-change',
1534 prevInputValue: prevInputValue
1535 });
1536 if (!_this.props.menuIsOpen) {
1537 _this.onMenuOpen();
1538 }
1539 };
1540 _this.onInputFocus = function (event) {
1541 if (_this.props.onFocus) {
1542 _this.props.onFocus(event);
1543 }
1544 _this.setState({
1545 inputIsHiddenAfterUpdate: false,
1546 isFocused: true
1547 });
1548 if (_this.openAfterFocus || _this.props.openMenuOnFocus) {
1549 _this.openMenu('first');
1550 }
1551 _this.openAfterFocus = false;
1552 };
1553 _this.onInputBlur = function (event) {
1554 var prevInputValue = _this.props.inputValue;
1555 if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) {
1556 _this.inputRef.focus();
1557 return;
1558 }
1559 if (_this.props.onBlur) {
1560 _this.props.onBlur(event);
1561 }
1562 _this.onInputChange('', {
1563 action: 'input-blur',
1564 prevInputValue: prevInputValue
1565 });
1566 _this.onMenuClose();
1567 _this.setState({
1568 focusedValue: null,
1569 isFocused: false
1570 });
1571 };
1572 _this.onOptionHover = function (focusedOption) {
1573 if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {
1574 return;
1575 }
1576 var options = _this.getFocusableOptions();
1577 var focusedOptionIndex = options.indexOf(focusedOption);
1578 _this.setState({
1579 focusedOption: focusedOption,
1580 focusedOptionId: focusedOptionIndex > -1 ? _this.getFocusedOptionId(focusedOption) : null
1581 });
1582 };
1583 _this.shouldHideSelectedOptions = function () {
1584 return shouldHideSelectedOptions(_this.props);
1585 };
1586 _this.onValueInputFocus = function (e) {
1587 e.preventDefault();
1588 e.stopPropagation();
1589 _this.focus();
1590 };
1591 _this.onKeyDown = function (event) {
1592 var _this$props5 = _this.props,
1593 isMulti = _this$props5.isMulti,
1594 backspaceRemovesValue = _this$props5.backspaceRemovesValue,
1595 escapeClearsValue = _this$props5.escapeClearsValue,
1596 inputValue = _this$props5.inputValue,
1597 isClearable = _this$props5.isClearable,
1598 isDisabled = _this$props5.isDisabled,
1599 menuIsOpen = _this$props5.menuIsOpen,
1600 onKeyDown = _this$props5.onKeyDown,
1601 tabSelectsValue = _this$props5.tabSelectsValue,
1602 openMenuOnFocus = _this$props5.openMenuOnFocus;
1603 var _this$state = _this.state,
1604 focusedOption = _this$state.focusedOption,
1605 focusedValue = _this$state.focusedValue,
1606 selectValue = _this$state.selectValue;
1607 if (isDisabled) return;
1608 if (typeof onKeyDown === 'function') {
1609 onKeyDown(event);
1610 if (event.defaultPrevented) {
1611 return;
1612 }
1613 }
1614
1615 // Block option hover events when the user has just pressed a key
1616 _this.blockOptionHover = true;
1617 switch (event.key) {
1618 case 'ArrowLeft':
1619 if (!isMulti || inputValue) return;
1620 _this.focusValue('previous');
1621 break;
1622 case 'ArrowRight':
1623 if (!isMulti || inputValue) return;
1624 _this.focusValue('next');
1625 break;
1626 case 'Delete':
1627 case 'Backspace':
1628 if (inputValue) return;
1629 if (focusedValue) {
1630 _this.removeValue(focusedValue);
1631 } else {
1632 if (!backspaceRemovesValue) return;
1633 if (isMulti) {
1634 _this.popValue();
1635 } else if (isClearable) {
1636 _this.clearValue();
1637 }
1638 }
1639 break;
1640 case 'Tab':
1641 if (_this.isComposing) return;
1642 if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption ||
1643 // don't capture the event if the menu opens on focus and the focused
1644 // option is already selected; it breaks the flow of navigation
1645 openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) {
1646 return;
1647 }
1648 _this.selectOption(focusedOption);
1649 break;
1650 case 'Enter':
1651 if (event.keyCode === 229) {
1652 // ignore the keydown event from an Input Method Editor(IME)
1653 // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
1654 break;
1655 }
1656 if (menuIsOpen) {
1657 if (!focusedOption) return;
1658 if (_this.isComposing) return;
1659 _this.selectOption(focusedOption);
1660 break;
1661 }
1662 return;
1663 case 'Escape':
1664 if (menuIsOpen) {
1665 _this.setState({
1666 inputIsHiddenAfterUpdate: false
1667 });
1668 _this.onInputChange('', {
1669 action: 'menu-close',
1670 prevInputValue: inputValue
1671 });
1672 _this.onMenuClose();
1673 } else if (isClearable && escapeClearsValue) {
1674 _this.clearValue();
1675 }
1676 break;
1677 case ' ':
1678 // space
1679 if (inputValue) {
1680 return;
1681 }
1682 if (!menuIsOpen) {
1683 _this.openMenu('first');
1684 break;
1685 }
1686 if (!focusedOption) return;
1687 _this.selectOption(focusedOption);
1688 break;
1689 case 'ArrowUp':
1690 if (menuIsOpen) {
1691 _this.focusOption('up');
1692 } else {
1693 _this.openMenu('last');
1694 }
1695 break;
1696 case 'ArrowDown':
1697 if (menuIsOpen) {
1698 _this.focusOption('down');
1699 } else {
1700 _this.openMenu('first');
1701 }
1702 break;
1703 case 'PageUp':
1704 if (!menuIsOpen) return;
1705 _this.focusOption('pageup');
1706 break;
1707 case 'PageDown':
1708 if (!menuIsOpen) return;
1709 _this.focusOption('pagedown');
1710 break;
1711 case 'Home':
1712 if (!menuIsOpen) return;
1713 _this.focusOption('first');
1714 break;
1715 case 'End':
1716 if (!menuIsOpen) return;
1717 _this.focusOption('last');
1718 break;
1719 default:
1720 return;
1721 }
1722 event.preventDefault();
1723 };
1724 _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
1725 _this.state.selectValue = index.cleanValue(_props.value);
1726 // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
1727 if (_props.menuIsOpen && _this.state.selectValue.length) {
1728 var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
1729 var focusableOptions = _this.buildFocusableOptions();
1730 var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
1731 _this.state.focusableOptionsWithIds = focusableOptionsWithIds;
1732 _this.state.focusedOption = focusableOptions[optionIndex];
1733 _this.state.focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusableOptions[optionIndex]);
1734 }
1735 return _this;
1736 }
1737 _createClass(Select, [{
1738 key: "componentDidMount",
1739 value: function componentDidMount() {
1740 this.startListeningComposition();
1741 this.startListeningToTouch();
1742 if (this.props.closeMenuOnScroll && document && document.addEventListener) {
1743 // Listen to all scroll events, and filter them out inside of 'onScroll'
1744 document.addEventListener('scroll', this.onScroll, true);
1745 }
1746 if (this.props.autoFocus) {
1747 this.focusInput();
1748 }
1749
1750 // Scroll focusedOption into view if menuIsOpen is set on mount (e.g. defaultMenuIsOpen)
1751 if (this.props.menuIsOpen && this.state.focusedOption && this.menuListRef && this.focusedOptionRef) {
1752 index.scrollIntoView(this.menuListRef, this.focusedOptionRef);
1753 }
1754 }
1755 }, {
1756 key: "componentDidUpdate",
1757 value: function componentDidUpdate(prevProps) {
1758 var _this$props6 = this.props,
1759 isDisabled = _this$props6.isDisabled,
1760 menuIsOpen = _this$props6.menuIsOpen;
1761 var isFocused = this.state.isFocused;
1762 if (
1763 // ensure focus is restored correctly when the control becomes enabled
1764 isFocused && !isDisabled && prevProps.isDisabled ||
1765 // ensure focus is on the Input when the menu opens
1766 isFocused && menuIsOpen && !prevProps.menuIsOpen) {
1767 this.focusInput();
1768 }
1769 if (isFocused && isDisabled && !prevProps.isDisabled) {
1770 // ensure select state gets blurred in case Select is programmatically disabled while focused
1771 // eslint-disable-next-line react/no-did-update-set-state
1772 this.setState({
1773 isFocused: false
1774 }, this.onMenuClose);
1775 } else if (!isFocused && !isDisabled && prevProps.isDisabled && this.inputRef === document.activeElement) {
1776 // ensure select state gets focused in case Select is programatically re-enabled while focused (Firefox)
1777 // eslint-disable-next-line react/no-did-update-set-state
1778 this.setState({
1779 isFocused: true
1780 });
1781 }
1782
1783 // scroll the focused option into view if necessary
1784 if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) {
1785 index.scrollIntoView(this.menuListRef, this.focusedOptionRef);
1786 this.scrollToFocusedOptionOnUpdate = false;
1787 }
1788 }
1789 }, {
1790 key: "componentWillUnmount",
1791 value: function componentWillUnmount() {
1792 this.stopListeningComposition();
1793 this.stopListeningToTouch();
1794 document.removeEventListener('scroll', this.onScroll, true);
1795 }
1796
1797 // ==============================
1798 // Consumer Handlers
1799 // ==============================
1800 }, {
1801 key: "onMenuOpen",
1802 value: function onMenuOpen() {
1803 this.props.onMenuOpen();
1804 }
1805 }, {
1806 key: "onMenuClose",
1807 value: function onMenuClose() {
1808 this.onInputChange('', {
1809 action: 'menu-close',
1810 prevInputValue: this.props.inputValue
1811 });
1812 this.props.onMenuClose();
1813 }
1814 }, {
1815 key: "onInputChange",
1816 value: function onInputChange(newValue, actionMeta) {
1817 this.props.onInputChange(newValue, actionMeta);
1818 }
1819
1820 // ==============================
1821 // Methods
1822 // ==============================
1823 }, {
1824 key: "focusInput",
1825 value: function focusInput() {
1826 if (!this.inputRef) return;
1827 this.inputRef.focus();
1828 }
1829 }, {
1830 key: "blurInput",
1831 value: function blurInput() {
1832 if (!this.inputRef) return;
1833 this.inputRef.blur();
1834 }
1835
1836 // aliased for consumers
1837 }, {
1838 key: "openMenu",
1839 value: function openMenu(focusOption) {
1840 var _this2 = this;
1841 var _this$state2 = this.state,
1842 selectValue = _this$state2.selectValue,
1843 isFocused = _this$state2.isFocused;
1844 var focusableOptions = this.buildFocusableOptions();
1845 var openAtIndex = focusOption === 'first' ? 0 : focusableOptions.length - 1;
1846 if (!this.props.isMulti) {
1847 var selectedIndex = focusableOptions.indexOf(selectValue[0]);
1848 if (selectedIndex > -1) {
1849 openAtIndex = selectedIndex;
1850 }
1851 }
1852
1853 // only scroll if the menu isn't already open
1854 this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
1855 this.setState({
1856 inputIsHiddenAfterUpdate: false,
1857 focusedValue: null,
1858 focusedOption: focusableOptions[openAtIndex],
1859 focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex])
1860 }, function () {
1861 return _this2.onMenuOpen();
1862 });
1863 }
1864 }, {
1865 key: "focusValue",
1866 value: function focusValue(direction) {
1867 var _this$state3 = this.state,
1868 selectValue = _this$state3.selectValue,
1869 focusedValue = _this$state3.focusedValue;
1870
1871 // Only multiselects support value focusing
1872 if (!this.props.isMulti) return;
1873 this.setState({
1874 focusedOption: null
1875 });
1876 var focusedIndex = selectValue.indexOf(focusedValue);
1877 if (!focusedValue) {
1878 focusedIndex = -1;
1879 }
1880 var lastIndex = selectValue.length - 1;
1881 var nextFocus = -1;
1882 if (!selectValue.length) return;
1883 switch (direction) {
1884 case 'previous':
1885 if (focusedIndex === 0) {
1886 // don't cycle from the start to the end
1887 nextFocus = 0;
1888 } else if (focusedIndex === -1) {
1889 // if nothing is focused, focus the last value first
1890 nextFocus = lastIndex;
1891 } else {
1892 nextFocus = focusedIndex - 1;
1893 }
1894 break;
1895 case 'next':
1896 if (focusedIndex > -1 && focusedIndex < lastIndex) {
1897 nextFocus = focusedIndex + 1;
1898 }
1899 break;
1900 }
1901 this.setState({
1902 inputIsHidden: nextFocus !== -1,
1903 focusedValue: selectValue[nextFocus]
1904 });
1905 }
1906 }, {
1907 key: "focusOption",
1908 value: function focusOption() {
1909 var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first';
1910 var pageSize = this.props.pageSize;
1911 var focusedOption = this.state.focusedOption;
1912 var options = this.getFocusableOptions();
1913 if (!options.length) return;
1914 var nextFocus = 0; // handles 'first'
1915 var focusedIndex = options.indexOf(focusedOption);
1916 if (!focusedOption) {
1917 focusedIndex = -1;
1918 }
1919 if (direction === 'up') {
1920 nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1;
1921 } else if (direction === 'down') {
1922 nextFocus = (focusedIndex + 1) % options.length;
1923 } else if (direction === 'pageup') {
1924 nextFocus = focusedIndex - pageSize;
1925 if (nextFocus < 0) nextFocus = 0;
1926 } else if (direction === 'pagedown') {
1927 nextFocus = focusedIndex + pageSize;
1928 if (nextFocus > options.length - 1) nextFocus = options.length - 1;
1929 } else if (direction === 'last') {
1930 nextFocus = options.length - 1;
1931 }
1932 this.scrollToFocusedOptionOnUpdate = true;
1933 this.setState({
1934 focusedOption: options[nextFocus],
1935 focusedValue: null,
1936 focusedOptionId: this.getFocusedOptionId(options[nextFocus])
1937 });
1938 }
1939 }, {
1940 key: "getTheme",
1941 value:
1942 // ==============================
1943 // Getters
1944 // ==============================
1945
1946 function getTheme() {
1947 // Use the default theme if there are no customisations.
1948 if (!this.props.theme) {
1949 return defaultTheme;
1950 }
1951 // If the theme prop is a function, assume the function
1952 // knows how to merge the passed-in default theme with
1953 // its own modifications.
1954 if (typeof this.props.theme === 'function') {
1955 return this.props.theme(defaultTheme);
1956 }
1957 // Otherwise, if a plain theme object was passed in,
1958 // overlay it with the default theme.
1959 return _objectSpread(_objectSpread({}, defaultTheme), this.props.theme);
1960 }
1961 }, {
1962 key: "getCommonProps",
1963 value: function getCommonProps() {
1964 var clearValue = this.clearValue,
1965 cx = this.cx,
1966 getStyles = this.getStyles,
1967 getClassNames = this.getClassNames,
1968 getValue = this.getValue,
1969 selectOption = this.selectOption,
1970 setValue = this.setValue,
1971 props = this.props;
1972 var isMulti = props.isMulti,
1973 isRtl = props.isRtl,
1974 options = props.options;
1975 var hasValue = this.hasValue();
1976 return {
1977 clearValue: clearValue,
1978 cx: cx,
1979 getStyles: getStyles,
1980 getClassNames: getClassNames,
1981 getValue: getValue,
1982 hasValue: hasValue,
1983 isMulti: isMulti,
1984 isRtl: isRtl,
1985 options: options,
1986 selectOption: selectOption,
1987 selectProps: props,
1988 setValue: setValue,
1989 theme: this.getTheme()
1990 };
1991 }
1992 }, {
1993 key: "hasValue",
1994 value: function hasValue() {
1995 var selectValue = this.state.selectValue;
1996 return selectValue.length > 0;
1997 }
1998 }, {
1999 key: "hasOptions",
2000 value: function hasOptions() {
2001 return !!this.getFocusableOptions().length;
2002 }
2003 }, {
2004 key: "isClearable",
2005 value: function isClearable() {
2006 var _this$props7 = this.props,
2007 isClearable = _this$props7.isClearable,
2008 isMulti = _this$props7.isMulti;
2009
2010 // single select, by default, IS NOT clearable
2011 // multi select, by default, IS clearable
2012 if (isClearable === undefined) return isMulti;
2013 return isClearable;
2014 }
2015 }, {
2016 key: "isOptionDisabled",
2017 value: function isOptionDisabled(option, selectValue) {
2018 return _isOptionDisabled(this.props, option, selectValue);
2019 }
2020 }, {
2021 key: "isOptionSelected",
2022 value: function isOptionSelected(option, selectValue) {
2023 return _isOptionSelected(this.props, option, selectValue);
2024 }
2025 }, {
2026 key: "filterOption",
2027 value: function filterOption(option, inputValue) {
2028 return _filterOption(this.props, option, inputValue);
2029 }
2030 }, {
2031 key: "formatOptionLabel",
2032 value: function formatOptionLabel(data, context) {
2033 if (typeof this.props.formatOptionLabel === 'function') {
2034 var _inputValue = this.props.inputValue;
2035 var _selectValue = this.state.selectValue;
2036 return this.props.formatOptionLabel(data, {
2037 context: context,
2038 inputValue: _inputValue,
2039 selectValue: _selectValue
2040 });
2041 } else {
2042 return this.getOptionLabel(data);
2043 }
2044 }
2045 }, {
2046 key: "formatGroupLabel",
2047 value: function formatGroupLabel(data) {
2048 return this.props.formatGroupLabel(data);
2049 }
2050
2051 // ==============================
2052 // Mouse Handlers
2053 // ==============================
2054 }, {
2055 key: "startListeningComposition",
2056 value:
2057 // ==============================
2058 // Composition Handlers
2059 // ==============================
2060
2061 function startListeningComposition() {
2062 if (document && document.addEventListener) {
2063 document.addEventListener('compositionstart', this.onCompositionStart, false);
2064 document.addEventListener('compositionend', this.onCompositionEnd, false);
2065 }
2066 }
2067 }, {
2068 key: "stopListeningComposition",
2069 value: function stopListeningComposition() {
2070 if (document && document.removeEventListener) {
2071 document.removeEventListener('compositionstart', this.onCompositionStart);
2072 document.removeEventListener('compositionend', this.onCompositionEnd);
2073 }
2074 }
2075 }, {
2076 key: "startListeningToTouch",
2077 value:
2078 // ==============================
2079 // Touch Handlers
2080 // ==============================
2081
2082 function startListeningToTouch() {
2083 if (document && document.addEventListener) {
2084 document.addEventListener('touchstart', this.onTouchStart, false);
2085 document.addEventListener('touchmove', this.onTouchMove, false);
2086 document.addEventListener('touchend', this.onTouchEnd, false);
2087 }
2088 }
2089 }, {
2090 key: "stopListeningToTouch",
2091 value: function stopListeningToTouch() {
2092 if (document && document.removeEventListener) {
2093 document.removeEventListener('touchstart', this.onTouchStart);
2094 document.removeEventListener('touchmove', this.onTouchMove);
2095 document.removeEventListener('touchend', this.onTouchEnd);
2096 }
2097 }
2098 }, {
2099 key: "renderInput",
2100 value:
2101 // ==============================
2102 // Renderers
2103 // ==============================
2104 function renderInput() {
2105 var _this$props8 = this.props,
2106 isDisabled = _this$props8.isDisabled,
2107 isSearchable = _this$props8.isSearchable,
2108 inputId = _this$props8.inputId,
2109 inputValue = _this$props8.inputValue,
2110 tabIndex = _this$props8.tabIndex,
2111 form = _this$props8.form,
2112 menuIsOpen = _this$props8.menuIsOpen,
2113 required = _this$props8.required;
2114 var _this$getComponents = this.getComponents(),
2115 Input = _this$getComponents.Input;
2116 var _this$state4 = this.state,
2117 inputIsHidden = _this$state4.inputIsHidden,
2118 ariaSelection = _this$state4.ariaSelection;
2119 var commonProps = this.commonProps;
2120 var id = inputId || this.getElementId('input');
2121
2122 // aria attributes makes the JSX "noisy", separated for clarity
2123 var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
2124 'aria-autocomplete': 'list',
2125 'aria-expanded': menuIsOpen,
2126 'aria-haspopup': true,
2127 'aria-errormessage': this.props['aria-errormessage'],
2128 'aria-invalid': this.props['aria-invalid'],
2129 'aria-label': this.props['aria-label'],
2130 'aria-labelledby': this.props['aria-labelledby'],
2131 'aria-required': required,
2132 role: 'combobox',
2133 'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
2134 }, menuIsOpen && {
2135 'aria-controls': this.getElementId('listbox')
2136 }), !isSearchable && {
2137 'aria-readonly': true
2138 }), this.hasValue() ? (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus' && {
2139 'aria-describedby': this.getElementId('live-region')
2140 } : {
2141 'aria-describedby': this.getElementId('placeholder')
2142 });
2143 if (!isSearchable) {
2144 // use a dummy input to maintain focus/blur functionality
2145 return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends({
2146 id: id,
2147 innerRef: this.getInputRef,
2148 onBlur: this.onInputBlur,
2149 onChange: index.noop,
2150 onFocus: this.onInputFocus,
2151 disabled: isDisabled,
2152 tabIndex: tabIndex,
2153 inputMode: "none",
2154 form: form,
2155 value: ""
2156 }, ariaAttributes));
2157 }
2158 return /*#__PURE__*/React__namespace.createElement(Input, _extends({}, commonProps, {
2159 autoCapitalize: "none",
2160 autoComplete: "off",
2161 autoCorrect: "off",
2162 id: id,
2163 innerRef: this.getInputRef,
2164 isDisabled: isDisabled,
2165 isHidden: inputIsHidden,
2166 onBlur: this.onInputBlur,
2167 onChange: this.handleInputChange,
2168 onFocus: this.onInputFocus,
2169 spellCheck: "false",
2170 tabIndex: tabIndex,
2171 form: form,
2172 type: "text",
2173 value: inputValue
2174 }, ariaAttributes));
2175 }
2176 }, {
2177 key: "renderPlaceholderOrValue",
2178 value: function renderPlaceholderOrValue() {
2179 var _this3 = this;
2180 var _this$getComponents2 = this.getComponents(),
2181 MultiValue = _this$getComponents2.MultiValue,
2182 MultiValueContainer = _this$getComponents2.MultiValueContainer,
2183 MultiValueLabel = _this$getComponents2.MultiValueLabel,
2184 MultiValueRemove = _this$getComponents2.MultiValueRemove,
2185 SingleValue = _this$getComponents2.SingleValue,
2186 Placeholder = _this$getComponents2.Placeholder;
2187 var commonProps = this.commonProps;
2188 var _this$props9 = this.props,
2189 controlShouldRenderValue = _this$props9.controlShouldRenderValue,
2190 isDisabled = _this$props9.isDisabled,
2191 isMulti = _this$props9.isMulti,
2192 inputValue = _this$props9.inputValue,
2193 placeholder = _this$props9.placeholder;
2194 var _this$state5 = this.state,
2195 selectValue = _this$state5.selectValue,
2196 focusedValue = _this$state5.focusedValue,
2197 isFocused = _this$state5.isFocused;
2198 if (!this.hasValue() || !controlShouldRenderValue) {
2199 return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends({}, commonProps, {
2200 key: "placeholder",
2201 isDisabled: isDisabled,
2202 isFocused: isFocused,
2203 innerProps: {
2204 id: this.getElementId('placeholder')
2205 }
2206 }), placeholder);
2207 }
2208 if (isMulti) {
2209 return selectValue.map(function (opt, index) {
2210 var isOptionFocused = opt === focusedValue;
2211 var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
2212 return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends({}, commonProps, {
2213 components: {
2214 Container: MultiValueContainer,
2215 Label: MultiValueLabel,
2216 Remove: MultiValueRemove
2217 },
2218 isFocused: isOptionFocused,
2219 isDisabled: isDisabled,
2220 key: key,
2221 index: index,
2222 removeProps: {
2223 onClick: function onClick() {
2224 return _this3.removeValue(opt);
2225 },
2226 onTouchEnd: function onTouchEnd() {
2227 return _this3.removeValue(opt);
2228 },
2229 onMouseDown: function onMouseDown(e) {
2230 e.preventDefault();
2231 }
2232 },
2233 data: opt
2234 }), _this3.formatOptionLabel(opt, 'value'));
2235 });
2236 }
2237 if (inputValue) {
2238 return null;
2239 }
2240 var singleValue = selectValue[0];
2241 return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends({}, commonProps, {
2242 data: singleValue,
2243 isDisabled: isDisabled
2244 }), this.formatOptionLabel(singleValue, 'value'));
2245 }
2246 }, {
2247 key: "renderClearIndicator",
2248 value: function renderClearIndicator() {
2249 var _this$getComponents3 = this.getComponents(),
2250 ClearIndicator = _this$getComponents3.ClearIndicator;
2251 var commonProps = this.commonProps;
2252 var _this$props10 = this.props,
2253 isDisabled = _this$props10.isDisabled,
2254 isLoading = _this$props10.isLoading;
2255 var isFocused = this.state.isFocused;
2256 if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {
2257 return null;
2258 }
2259 var innerProps = {
2260 onMouseDown: this.onClearIndicatorMouseDown,
2261 onTouchEnd: this.onClearIndicatorTouchEnd,
2262 'aria-hidden': 'true'
2263 };
2264 return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends({}, commonProps, {
2265 innerProps: innerProps,
2266 isFocused: isFocused
2267 }));
2268 }
2269 }, {
2270 key: "renderLoadingIndicator",
2271 value: function renderLoadingIndicator() {
2272 var _this$getComponents4 = this.getComponents(),
2273 LoadingIndicator = _this$getComponents4.LoadingIndicator;
2274 var commonProps = this.commonProps;
2275 var _this$props11 = this.props,
2276 isDisabled = _this$props11.isDisabled,
2277 isLoading = _this$props11.isLoading;
2278 var isFocused = this.state.isFocused;
2279 if (!LoadingIndicator || !isLoading) return null;
2280 var innerProps = {
2281 'aria-hidden': 'true'
2282 };
2283 return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends({}, commonProps, {
2284 innerProps: innerProps,
2285 isDisabled: isDisabled,
2286 isFocused: isFocused
2287 }));
2288 }
2289 }, {
2290 key: "renderIndicatorSeparator",
2291 value: function renderIndicatorSeparator() {
2292 var _this$getComponents5 = this.getComponents(),
2293 DropdownIndicator = _this$getComponents5.DropdownIndicator,
2294 IndicatorSeparator = _this$getComponents5.IndicatorSeparator;
2295
2296 // separator doesn't make sense without the dropdown indicator
2297 if (!DropdownIndicator || !IndicatorSeparator) return null;
2298 var commonProps = this.commonProps;
2299 var isDisabled = this.props.isDisabled;
2300 var isFocused = this.state.isFocused;
2301 return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends({}, commonProps, {
2302 isDisabled: isDisabled,
2303 isFocused: isFocused
2304 }));
2305 }
2306 }, {
2307 key: "renderDropdownIndicator",
2308 value: function renderDropdownIndicator() {
2309 var _this$getComponents6 = this.getComponents(),
2310 DropdownIndicator = _this$getComponents6.DropdownIndicator;
2311 if (!DropdownIndicator) return null;
2312 var commonProps = this.commonProps;
2313 var isDisabled = this.props.isDisabled;
2314 var isFocused = this.state.isFocused;
2315 var innerProps = {
2316 onMouseDown: this.onDropdownIndicatorMouseDown,
2317 onTouchEnd: this.onDropdownIndicatorTouchEnd,
2318 'aria-hidden': 'true'
2319 };
2320 return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends({}, commonProps, {
2321 innerProps: innerProps,
2322 isDisabled: isDisabled,
2323 isFocused: isFocused
2324 }));
2325 }
2326 }, {
2327 key: "renderMenu",
2328 value: function renderMenu() {
2329 var _this4 = this;
2330 var _this$getComponents7 = this.getComponents(),
2331 Group = _this$getComponents7.Group,
2332 GroupHeading = _this$getComponents7.GroupHeading,
2333 Menu = _this$getComponents7.Menu,
2334 MenuList = _this$getComponents7.MenuList,
2335 MenuPortal = _this$getComponents7.MenuPortal,
2336 LoadingMessage = _this$getComponents7.LoadingMessage,
2337 NoOptionsMessage = _this$getComponents7.NoOptionsMessage,
2338 Option = _this$getComponents7.Option;
2339 var commonProps = this.commonProps;
2340 var focusedOption = this.state.focusedOption;
2341 var _this$props12 = this.props,
2342 captureMenuScroll = _this$props12.captureMenuScroll,
2343 inputValue = _this$props12.inputValue,
2344 isLoading = _this$props12.isLoading,
2345 loadingMessage = _this$props12.loadingMessage,
2346 minMenuHeight = _this$props12.minMenuHeight,
2347 maxMenuHeight = _this$props12.maxMenuHeight,
2348 menuIsOpen = _this$props12.menuIsOpen,
2349 menuPlacement = _this$props12.menuPlacement,
2350 menuPosition = _this$props12.menuPosition,
2351 menuPortalTarget = _this$props12.menuPortalTarget,
2352 menuShouldBlockScroll = _this$props12.menuShouldBlockScroll,
2353 menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView,
2354 noOptionsMessage = _this$props12.noOptionsMessage,
2355 onMenuScrollToTop = _this$props12.onMenuScrollToTop,
2356 onMenuScrollToBottom = _this$props12.onMenuScrollToBottom;
2357 if (!menuIsOpen) return null;
2358
2359 // TODO: Internal Option Type here
2360 var render = function render(props, id) {
2361 var type = props.type,
2362 data = props.data,
2363 isDisabled = props.isDisabled,
2364 isSelected = props.isSelected,
2365 label = props.label,
2366 value = props.value;
2367 var isFocused = focusedOption === data;
2368 var onHover = isDisabled ? undefined : function () {
2369 return _this4.onOptionHover(data);
2370 };
2371 var onSelect = isDisabled ? undefined : function () {
2372 return _this4.selectOption(data);
2373 };
2374 var optionId = "".concat(_this4.getElementId('option'), "-").concat(id);
2375 var innerProps = {
2376 id: optionId,
2377 onClick: onSelect,
2378 onMouseMove: onHover,
2379 onMouseOver: onHover,
2380 tabIndex: -1,
2381 role: 'option',
2382 'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
2383 };
2384
2385 return /*#__PURE__*/React__namespace.createElement(Option, _extends({}, commonProps, {
2386 innerProps: innerProps,
2387 data: data,
2388 isDisabled: isDisabled,
2389 isSelected: isSelected,
2390 key: optionId,
2391 label: label,
2392 type: type,
2393 value: value,
2394 isFocused: isFocused,
2395 innerRef: isFocused ? _this4.getFocusedOptionRef : undefined
2396 }), _this4.formatOptionLabel(props.data, 'menu'));
2397 };
2398 var menuUI;
2399 if (this.hasOptions()) {
2400 menuUI = this.getCategorizedOptions().map(function (item) {
2401 if (item.type === 'group') {
2402 var _data = item.data,
2403 options = item.options,
2404 groupIndex = item.index;
2405 var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
2406 var headingId = "".concat(groupId, "-heading");
2407 return /*#__PURE__*/React__namespace.createElement(Group, _extends({}, commonProps, {
2408 key: groupId,
2409 data: _data,
2410 options: options,
2411 Heading: GroupHeading,
2412 headingProps: {
2413 id: headingId,
2414 data: item.data
2415 },
2416 label: _this4.formatGroupLabel(item.data)
2417 }), item.options.map(function (option) {
2418 return render(option, "".concat(groupIndex, "-").concat(option.index));
2419 }));
2420 } else if (item.type === 'option') {
2421 return render(item, "".concat(item.index));
2422 }
2423 });
2424 } else if (isLoading) {
2425 var message = loadingMessage({
2426 inputValue: inputValue
2427 });
2428 if (message === null) return null;
2429 menuUI = /*#__PURE__*/React__namespace.createElement(LoadingMessage, commonProps, message);
2430 } else {
2431 var _message = noOptionsMessage({
2432 inputValue: inputValue
2433 });
2434 if (_message === null) return null;
2435 menuUI = /*#__PURE__*/React__namespace.createElement(NoOptionsMessage, commonProps, _message);
2436 }
2437 var menuPlacementProps = {
2438 minMenuHeight: minMenuHeight,
2439 maxMenuHeight: maxMenuHeight,
2440 menuPlacement: menuPlacement,
2441 menuPosition: menuPosition,
2442 menuShouldScrollIntoView: menuShouldScrollIntoView
2443 };
2444 var menuElement = /*#__PURE__*/React__namespace.createElement(index.MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
2445 var ref = _ref4.ref,
2446 _ref4$placerProps = _ref4.placerProps,
2447 placement = _ref4$placerProps.placement,
2448 maxHeight = _ref4$placerProps.maxHeight;
2449 return /*#__PURE__*/React__namespace.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
2450 innerRef: ref,
2451 innerProps: {
2452 onMouseDown: _this4.onMenuMouseDown,
2453 onMouseMove: _this4.onMenuMouseMove
2454 },
2455 isLoading: isLoading,
2456 placement: placement
2457 }), /*#__PURE__*/React__namespace.createElement(ScrollManager, {
2458 captureEnabled: captureMenuScroll,
2459 onTopArrive: onMenuScrollToTop,
2460 onBottomArrive: onMenuScrollToBottom,
2461 lockEnabled: menuShouldBlockScroll
2462 }, function (scrollTargetRef) {
2463 return /*#__PURE__*/React__namespace.createElement(MenuList, _extends({}, commonProps, {
2464 innerRef: function innerRef(instance) {
2465 _this4.getMenuListRef(instance);
2466 scrollTargetRef(instance);
2467 },
2468 innerProps: {
2469 role: 'listbox',
2470 'aria-multiselectable': commonProps.isMulti,
2471 id: _this4.getElementId('listbox')
2472 },
2473 isLoading: isLoading,
2474 maxHeight: maxHeight,
2475 focusedOption: focusedOption
2476 }), menuUI);
2477 }));
2478 });
2479
2480 // positioning behaviour is almost identical for portalled and fixed,
2481 // so we use the same component. the actual portalling logic is forked
2482 // within the component based on `menuPosition`
2483 return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends({}, commonProps, {
2484 appendTo: menuPortalTarget,
2485 controlElement: this.controlRef,
2486 menuPlacement: menuPlacement,
2487 menuPosition: menuPosition
2488 }), menuElement) : menuElement;
2489 }
2490 }, {
2491 key: "renderFormField",
2492 value: function renderFormField() {
2493 var _this5 = this;
2494 var _this$props13 = this.props,
2495 delimiter = _this$props13.delimiter,
2496 isDisabled = _this$props13.isDisabled,
2497 isMulti = _this$props13.isMulti,
2498 name = _this$props13.name,
2499 required = _this$props13.required;
2500 var selectValue = this.state.selectValue;
2501 if (required && !this.hasValue() && !isDisabled) {
2502 return /*#__PURE__*/React__namespace.createElement(RequiredInput$1, {
2503 name: name,
2504 onFocus: this.onValueInputFocus
2505 });
2506 }
2507 if (!name || isDisabled) return;
2508 if (isMulti) {
2509 if (delimiter) {
2510 var value = selectValue.map(function (opt) {
2511 return _this5.getOptionValue(opt);
2512 }).join(delimiter);
2513 return /*#__PURE__*/React__namespace.createElement("input", {
2514 name: name,
2515 type: "hidden",
2516 value: value
2517 });
2518 } else {
2519 var input = selectValue.length > 0 ? selectValue.map(function (opt, i) {
2520 return /*#__PURE__*/React__namespace.createElement("input", {
2521 key: "i-".concat(i),
2522 name: name,
2523 type: "hidden",
2524 value: _this5.getOptionValue(opt)
2525 });
2526 }) : /*#__PURE__*/React__namespace.createElement("input", {
2527 name: name,
2528 type: "hidden",
2529 value: ""
2530 });
2531 return /*#__PURE__*/React__namespace.createElement("div", null, input);
2532 }
2533 } else {
2534 var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
2535 return /*#__PURE__*/React__namespace.createElement("input", {
2536 name: name,
2537 type: "hidden",
2538 value: _value
2539 });
2540 }
2541 }
2542 }, {
2543 key: "renderLiveRegion",
2544 value: function renderLiveRegion() {
2545 var commonProps = this.commonProps;
2546 var _this$state6 = this.state,
2547 ariaSelection = _this$state6.ariaSelection,
2548 focusedOption = _this$state6.focusedOption,
2549 focusedValue = _this$state6.focusedValue,
2550 isFocused = _this$state6.isFocused,
2551 selectValue = _this$state6.selectValue;
2552 var focusableOptions = this.getFocusableOptions();
2553 return /*#__PURE__*/React__namespace.createElement(LiveRegion$1, _extends({}, commonProps, {
2554 id: this.getElementId('live-region'),
2555 ariaSelection: ariaSelection,
2556 focusedOption: focusedOption,
2557 focusedValue: focusedValue,
2558 isFocused: isFocused,
2559 selectValue: selectValue,
2560 focusableOptions: focusableOptions,
2561 isAppleDevice: this.isAppleDevice
2562 }));
2563 }
2564 }, {
2565 key: "render",
2566 value: function render() {
2567 var _this$getComponents8 = this.getComponents(),
2568 Control = _this$getComponents8.Control,
2569 IndicatorsContainer = _this$getComponents8.IndicatorsContainer,
2570 SelectContainer = _this$getComponents8.SelectContainer,
2571 ValueContainer = _this$getComponents8.ValueContainer;
2572 var _this$props14 = this.props,
2573 className = _this$props14.className,
2574 id = _this$props14.id,
2575 isDisabled = _this$props14.isDisabled,
2576 menuIsOpen = _this$props14.menuIsOpen;
2577 var isFocused = this.state.isFocused;
2578 var commonProps = this.commonProps = this.getCommonProps();
2579 return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends({}, commonProps, {
2580 className: className,
2581 innerProps: {
2582 id: id,
2583 onKeyDown: this.onKeyDown
2584 },
2585 isDisabled: isDisabled,
2586 isFocused: isFocused
2587 }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends({}, commonProps, {
2588 innerRef: this.getControlRef,
2589 innerProps: {
2590 onMouseDown: this.onControlMouseDown,
2591 onTouchEnd: this.onControlTouchEnd
2592 },
2593 isDisabled: isDisabled,
2594 isFocused: isFocused,
2595 menuIsOpen: menuIsOpen
2596 }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends({}, commonProps, {
2597 isDisabled: isDisabled
2598 }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends({}, commonProps, {
2599 isDisabled: isDisabled
2600 }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
2601 }
2602 }], [{
2603 key: "getDerivedStateFromProps",
2604 value: function getDerivedStateFromProps(props, state) {
2605 var prevProps = state.prevProps,
2606 clearFocusValueOnUpdate = state.clearFocusValueOnUpdate,
2607 inputIsHiddenAfterUpdate = state.inputIsHiddenAfterUpdate,
2608 ariaSelection = state.ariaSelection,
2609 isFocused = state.isFocused,
2610 prevWasFocused = state.prevWasFocused,
2611 instancePrefix = state.instancePrefix;
2612 var options = props.options,
2613 value = props.value,
2614 menuIsOpen = props.menuIsOpen,
2615 inputValue = props.inputValue,
2616 isMulti = props.isMulti;
2617 var selectValue = index.cleanValue(value);
2618 var newMenuOptionsState = {};
2619 if (prevProps && (value !== prevProps.value || options !== prevProps.options || menuIsOpen !== prevProps.menuIsOpen || inputValue !== prevProps.inputValue)) {
2620 var focusableOptions = menuIsOpen ? buildFocusableOptions(props, selectValue) : [];
2621 var focusableOptionsWithIds = menuIsOpen ? buildFocusableOptionsWithIds(buildCategorizedOptions(props, selectValue), "".concat(instancePrefix, "-option")) : [];
2622 var focusedValue = clearFocusValueOnUpdate ? getNextFocusedValue(state, selectValue) : null;
2623 var focusedOption = getNextFocusedOption(state, focusableOptions);
2624 var focusedOptionId = getFocusedOptionId(focusableOptionsWithIds, focusedOption);
2625 newMenuOptionsState = {
2626 selectValue: selectValue,
2627 focusedOption: focusedOption,
2628 focusedOptionId: focusedOptionId,
2629 focusableOptionsWithIds: focusableOptionsWithIds,
2630 focusedValue: focusedValue,
2631 clearFocusValueOnUpdate: false
2632 };
2633 }
2634 // some updates should toggle the state of the input visibility
2635 var newInputIsHiddenState = inputIsHiddenAfterUpdate != null && props !== prevProps ? {
2636 inputIsHidden: inputIsHiddenAfterUpdate,
2637 inputIsHiddenAfterUpdate: undefined
2638 } : {};
2639 var newAriaSelection = ariaSelection;
2640 var hasKeptFocus = isFocused && prevWasFocused;
2641 if (isFocused && !hasKeptFocus) {
2642 // If `value` or `defaultValue` props are not empty then announce them
2643 // when the Select is initially focused
2644 newAriaSelection = {
2645 value: index.valueTernary(isMulti, selectValue, selectValue[0] || null),
2646 options: selectValue,
2647 action: 'initial-input-focus'
2648 };
2649 hasKeptFocus = !prevWasFocused;
2650 }
2651
2652 // If the 'initial-input-focus' action has been set already
2653 // then reset the ariaSelection to null
2654 if ((ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus') {
2655 newAriaSelection = null;
2656 }
2657 return _objectSpread(_objectSpread(_objectSpread({}, newMenuOptionsState), newInputIsHiddenState), {}, {
2658 prevProps: props,
2659 ariaSelection: newAriaSelection,
2660 prevWasFocused: hasKeptFocus
2661 });
2662 }
2663 }]);
2664 return Select;
2665}(React.Component);
2666Select.defaultProps = defaultProps;
2667
2668exports.Select = Select;
2669exports.createFilter = createFilter;
2670exports.defaultProps = defaultProps;
2671exports.defaultTheme = defaultTheme;
2672exports.getOptionLabel = getOptionLabel$1;
2673exports.getOptionValue = getOptionValue$1;
2674exports.mergeStyles = mergeStyles;