1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
|
8 | var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
|
9 | var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
|
10 | var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
|
11 | var PropTypes = _interopDefault(require('prop-types'));
|
12 | var React = require('react');
|
13 | var React__default = _interopDefault(React);
|
14 | var reactIs = require('react-is');
|
15 | var computeScrollIntoView = _interopDefault(require('compute-scroll-into-view'));
|
16 | var keyboardKey = _interopDefault(require('keyboard-key'));
|
17 | var autoId = require('@reach/auto-id');
|
18 |
|
19 | var idCounter = 0;
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | function cbToCb(cb) {
|
30 | return typeof cb === 'function' ? cb : noop;
|
31 | }
|
32 |
|
33 | function noop() {}
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | function scrollIntoView(node, menuNode) {
|
42 | if (node === null) {
|
43 | return;
|
44 | }
|
45 |
|
46 | var actions = computeScrollIntoView(node, {
|
47 | boundary: menuNode,
|
48 | block: 'nearest',
|
49 | scrollMode: 'if-needed'
|
50 | });
|
51 | actions.forEach(function (_ref) {
|
52 | var el = _ref.el,
|
53 | top = _ref.top,
|
54 | left = _ref.left;
|
55 | el.scrollTop = top;
|
56 | el.scrollLeft = left;
|
57 | });
|
58 | }
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | function debounce(fn, time) {
|
70 | var timeoutId;
|
71 |
|
72 | function cancel() {
|
73 | if (timeoutId) {
|
74 | clearTimeout(timeoutId);
|
75 | }
|
76 | }
|
77 |
|
78 | function wrapper() {
|
79 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
80 | args[_key] = arguments[_key];
|
81 | }
|
82 |
|
83 | cancel();
|
84 | timeoutId = setTimeout(function () {
|
85 | timeoutId = null;
|
86 | fn.apply(void 0, args);
|
87 | }, time);
|
88 | }
|
89 |
|
90 | wrapper.cancel = cancel;
|
91 | return wrapper;
|
92 | }
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 | function callAllEventHandlers() {
|
103 | for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
104 | fns[_key2] = arguments[_key2];
|
105 | }
|
106 |
|
107 | return function (event) {
|
108 | for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
109 | args[_key3 - 1] = arguments[_key3];
|
110 | }
|
111 |
|
112 | return fns.some(function (fn) {
|
113 | if (fn) {
|
114 | fn.apply(void 0, [event].concat(args));
|
115 | }
|
116 |
|
117 | return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
|
118 | });
|
119 | };
|
120 | }
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 | function callAll() {
|
131 | for (var _len4 = arguments.length, fns = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
132 | fns[_key4] = arguments[_key4];
|
133 | }
|
134 |
|
135 | return function () {
|
136 | for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
|
137 | args[_key5] = arguments[_key5];
|
138 | }
|
139 |
|
140 | fns.forEach(function (fn) {
|
141 | if (fn) {
|
142 | fn.apply(void 0, args);
|
143 | }
|
144 | });
|
145 | };
|
146 | }
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 | function generateId() {
|
154 | return String(idCounter++);
|
155 | }
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | function resetIdCounter() {
|
162 | idCounter = 0;
|
163 | }
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 | function getA11yStatusMessage(_ref2) {
|
171 | var isOpen = _ref2.isOpen,
|
172 | selectedItem = _ref2.selectedItem,
|
173 | resultCount = _ref2.resultCount,
|
174 | previousResultCount = _ref2.previousResultCount,
|
175 | itemToString = _ref2.itemToString;
|
176 |
|
177 | if (!isOpen) {
|
178 | return selectedItem ? itemToString(selectedItem) : '';
|
179 | }
|
180 |
|
181 | if (!resultCount) {
|
182 | return 'No results are available.';
|
183 | }
|
184 |
|
185 | if (resultCount !== previousResultCount) {
|
186 | return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
|
187 | }
|
188 |
|
189 | return '';
|
190 | }
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 | function unwrapArray(arg, defaultValue) {
|
201 | arg = Array.isArray(arg) ?
|
202 |
|
203 | arg[0] : arg;
|
204 |
|
205 | if (!arg && defaultValue) {
|
206 | return defaultValue;
|
207 | } else {
|
208 | return arg;
|
209 | }
|
210 | }
|
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 | function isDOMElement(element) {
|
218 |
|
219 | return typeof element.type === 'string';
|
220 | }
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 | function getElementProps(element) {
|
228 | return element.props;
|
229 | }
|
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 | function requiredProp(fnName, propName) {
|
239 |
|
240 | console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
|
241 | }
|
242 |
|
243 | var stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 | function pickState(state) {
|
250 | if (state === void 0) {
|
251 | state = {};
|
252 | }
|
253 |
|
254 | var result = {};
|
255 | stateKeys.forEach(function (k) {
|
256 | if (state.hasOwnProperty(k)) {
|
257 | result[k] = state[k];
|
258 | }
|
259 | });
|
260 | return result;
|
261 | }
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 | function normalizeArrowKey(event) {
|
270 | var key = event.key,
|
271 | keyCode = event.keyCode;
|
272 |
|
273 |
|
274 | if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
|
275 | return "Arrow" + key;
|
276 | }
|
277 |
|
278 | return key;
|
279 | }
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
|
286 |
|
287 | function isPlainObject(obj) {
|
288 | return Object.prototype.toString.call(obj) === '[object Object]';
|
289 | }
|
290 |
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 | function getNextWrappingIndex(moveAmount, baseIndex, itemCount) {
|
302 | var itemsLastIndex = itemCount - 1;
|
303 |
|
304 | if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
|
305 | baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
|
306 | }
|
307 |
|
308 | var newIndex = baseIndex + moveAmount;
|
309 |
|
310 | if (newIndex < 0) {
|
311 | newIndex = itemsLastIndex;
|
312 | } else if (newIndex > itemsLastIndex) {
|
313 | newIndex = 0;
|
314 | }
|
315 |
|
316 | return newIndex;
|
317 | }
|
318 |
|
319 | var statusDiv;
|
320 | var cleanupStatus = debounce(function () {
|
321 | getStatusDiv().textContent = '';
|
322 | }, 500);
|
323 |
|
324 |
|
325 |
|
326 |
|
327 |
|
328 | function setStatus(status, documentProp) {
|
329 | var div = getStatusDiv(documentProp);
|
330 |
|
331 | if (!status) {
|
332 | return;
|
333 | }
|
334 |
|
335 | div.textContent = status;
|
336 | cleanupStatus();
|
337 | }
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 | function getStatusDiv(documentProp) {
|
346 | if (documentProp === void 0) {
|
347 | documentProp = document;
|
348 | }
|
349 |
|
350 | if (statusDiv) {
|
351 | return statusDiv;
|
352 | }
|
353 |
|
354 | statusDiv = documentProp.createElement('div');
|
355 | statusDiv.setAttribute('id', 'a11y-status-message');
|
356 | statusDiv.setAttribute('role', 'status');
|
357 | statusDiv.setAttribute('aria-live', 'polite');
|
358 | statusDiv.setAttribute('aria-relevant', 'additions text');
|
359 | Object.assign(statusDiv.style, {
|
360 | border: '0',
|
361 | clip: 'rect(0 0 0 0)',
|
362 | height: '1px',
|
363 | margin: '-1px',
|
364 | overflow: 'hidden',
|
365 | padding: '0',
|
366 | position: 'absolute',
|
367 | width: '1px'
|
368 | });
|
369 | documentProp.body.appendChild(statusDiv);
|
370 | return statusDiv;
|
371 | }
|
372 |
|
373 | var unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
|
374 | var mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
|
375 | var itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
|
376 | var keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
|
377 | var keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
|
378 | var keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
|
379 | var keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
|
380 | var keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
|
381 | var keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
|
382 | var clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
|
383 | var blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
|
384 | var changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
|
385 | var keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
|
386 | var clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
|
387 | var blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
|
388 | var controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
|
389 | var touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
|
390 |
|
391 | var stateChangeTypes = Object.freeze({
|
392 | unknown: unknown,
|
393 | mouseUp: mouseUp,
|
394 | itemMouseEnter: itemMouseEnter,
|
395 | keyDownArrowUp: keyDownArrowUp,
|
396 | keyDownArrowDown: keyDownArrowDown,
|
397 | keyDownEscape: keyDownEscape,
|
398 | keyDownEnter: keyDownEnter,
|
399 | keyDownHome: keyDownHome,
|
400 | keyDownEnd: keyDownEnd,
|
401 | clickItem: clickItem,
|
402 | blurInput: blurInput,
|
403 | changeInput: changeInput,
|
404 | keyDownSpaceButton: keyDownSpaceButton,
|
405 | clickButton: clickButton,
|
406 | blurButton: blurButton,
|
407 | controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
|
408 | touchEnd: touchEnd
|
409 | });
|
410 |
|
411 | var Downshift =
|
412 |
|
413 | function (_Component) {
|
414 | _inheritsLoose(Downshift, _Component);
|
415 |
|
416 | function Downshift(_props) {
|
417 | var _this = _Component.call(this, _props) || this;
|
418 |
|
419 | _this.id = _this.props.id || "downshift-" + generateId();
|
420 | _this.menuId = _this.props.menuId || _this.id + "-menu";
|
421 | _this.labelId = _this.props.labelId || _this.id + "-label";
|
422 | _this.inputId = _this.props.inputId || _this.id + "-input";
|
423 |
|
424 | _this.getItemId = _this.props.getItemId || function (index) {
|
425 | return _this.id + "-item-" + index;
|
426 | };
|
427 |
|
428 | _this.input = null;
|
429 | _this.items = [];
|
430 | _this.itemCount = null;
|
431 | _this.previousResultCount = 0;
|
432 | _this.timeoutIds = [];
|
433 |
|
434 | _this.internalSetTimeout = function (fn, time) {
|
435 | var id = setTimeout(function () {
|
436 | _this.timeoutIds = _this.timeoutIds.filter(function (i) {
|
437 | return i !== id;
|
438 | });
|
439 | fn();
|
440 | }, time);
|
441 |
|
442 | _this.timeoutIds.push(id);
|
443 | };
|
444 |
|
445 | _this.setItemCount = function (count) {
|
446 | _this.itemCount = count;
|
447 | };
|
448 |
|
449 | _this.unsetItemCount = function () {
|
450 | _this.itemCount = null;
|
451 | };
|
452 |
|
453 | _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
|
454 | if (highlightedIndex === void 0) {
|
455 | highlightedIndex = _this.props.defaultHighlightedIndex;
|
456 | }
|
457 |
|
458 | if (otherStateToSet === void 0) {
|
459 | otherStateToSet = {};
|
460 | }
|
461 |
|
462 | otherStateToSet = pickState(otherStateToSet);
|
463 |
|
464 | _this.internalSetState(_extends({
|
465 | highlightedIndex: highlightedIndex
|
466 | }, otherStateToSet));
|
467 | };
|
468 |
|
469 | _this.clearSelection = function (cb) {
|
470 | _this.internalSetState({
|
471 | selectedItem: null,
|
472 | inputValue: '',
|
473 | highlightedIndex: _this.props.defaultHighlightedIndex,
|
474 | isOpen: _this.props.defaultIsOpen
|
475 | }, cb);
|
476 | };
|
477 |
|
478 | _this.selectItem = function (item, otherStateToSet, cb) {
|
479 | otherStateToSet = pickState(otherStateToSet);
|
480 |
|
481 | _this.internalSetState(_extends({
|
482 | isOpen: _this.props.defaultIsOpen,
|
483 | highlightedIndex: _this.props.defaultHighlightedIndex,
|
484 | selectedItem: item,
|
485 | inputValue: _this.props.itemToString(item)
|
486 | }, otherStateToSet), cb);
|
487 | };
|
488 |
|
489 | _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
|
490 | var item = _this.items[itemIndex];
|
491 |
|
492 | if (item == null) {
|
493 | return;
|
494 | }
|
495 |
|
496 | _this.selectItem(item, otherStateToSet, cb);
|
497 | };
|
498 |
|
499 | _this.selectHighlightedItem = function (otherStateToSet, cb) {
|
500 | return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
|
501 | };
|
502 |
|
503 | _this.internalSetState = function (stateToSet, cb) {
|
504 | var isItemSelected, onChangeArg;
|
505 | var onStateChangeArg = {};
|
506 | var isStateToSetFunction = typeof stateToSet === 'function';
|
507 |
|
508 |
|
509 |
|
510 |
|
511 |
|
512 | if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
|
513 | _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, stateToSet));
|
514 | }
|
515 |
|
516 | return _this.setState(function (state) {
|
517 | state = _this.getState(state);
|
518 | var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
|
519 |
|
520 | newStateToSet = _this.props.stateReducer(state, newStateToSet);
|
521 |
|
522 |
|
523 |
|
524 | isItemSelected = newStateToSet.hasOwnProperty('selectedItem');
|
525 |
|
526 | var nextState = {};
|
527 |
|
528 | var nextFullState = {};
|
529 |
|
530 |
|
531 |
|
532 | if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
|
533 | onChangeArg = newStateToSet.selectedItem;
|
534 | }
|
535 |
|
536 | newStateToSet.type = newStateToSet.type || unknown;
|
537 | Object.keys(newStateToSet).forEach(function (key) {
|
538 |
|
539 |
|
540 | if (state[key] !== newStateToSet[key]) {
|
541 | onStateChangeArg[key] = newStateToSet[key];
|
542 | }
|
543 |
|
544 |
|
545 |
|
546 |
|
547 |
|
548 |
|
549 |
|
550 | if (key === 'type') {
|
551 | return;
|
552 | }
|
553 |
|
554 | nextFullState[key] = newStateToSet[key];
|
555 |
|
556 | if (!_this.isControlledProp(key)) {
|
557 | nextState[key] = newStateToSet[key];
|
558 | }
|
559 | });
|
560 |
|
561 |
|
562 | if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
|
563 | _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, newStateToSet));
|
564 | }
|
565 |
|
566 | return nextState;
|
567 | }, function () {
|
568 |
|
569 | cbToCb(cb)();
|
570 |
|
571 |
|
572 | var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
|
573 |
|
574 | if (hasMoreStateThanType) {
|
575 | _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
|
576 | }
|
577 |
|
578 | if (isItemSelected) {
|
579 | _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
|
580 | }
|
581 |
|
582 | if (onChangeArg !== undefined) {
|
583 | _this.props.onChange(onChangeArg, _this.getStateAndHelpers());
|
584 | }
|
585 |
|
586 |
|
587 |
|
588 | _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
|
589 | });
|
590 | };
|
591 |
|
592 | _this.rootRef = function (node) {
|
593 | return _this._rootNode = node;
|
594 | };
|
595 |
|
596 | _this.getRootProps = function (_temp, _temp2) {
|
597 | var _extends2;
|
598 |
|
599 | var _ref = _temp === void 0 ? {} : _temp,
|
600 | _ref$refKey = _ref.refKey,
|
601 | refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
602 | ref = _ref.ref,
|
603 | rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref"]);
|
604 |
|
605 | var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
606 | _ref2$suppressRefErro = _ref2.suppressRefError,
|
607 | suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
608 |
|
609 |
|
610 |
|
611 | _this.getRootProps.called = true;
|
612 | _this.getRootProps.refKey = refKey;
|
613 | _this.getRootProps.suppressRefError = suppressRefError;
|
614 |
|
615 | var _this$getState = _this.getState(),
|
616 | isOpen = _this$getState.isOpen;
|
617 |
|
618 | return _extends((_extends2 = {}, _extends2[refKey] = callAll(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
|
619 | };
|
620 |
|
621 | _this.keyDownHandlers = {
|
622 | ArrowDown: function ArrowDown(event) {
|
623 | var _this2 = this;
|
624 |
|
625 | event.preventDefault();
|
626 |
|
627 | if (this.getState().isOpen) {
|
628 | var amount = event.shiftKey ? 5 : 1;
|
629 | this.moveHighlightedIndex(amount, {
|
630 | type: keyDownArrowDown
|
631 | });
|
632 | } else {
|
633 | this.internalSetState({
|
634 | isOpen: true,
|
635 | type: keyDownArrowDown
|
636 | }, function () {
|
637 | var itemCount = _this2.getItemCount();
|
638 |
|
639 | if (itemCount > 0) {
|
640 | _this2.setHighlightedIndex(getNextWrappingIndex(1, _this2.getState().highlightedIndex, itemCount), {
|
641 | type: keyDownArrowDown
|
642 | });
|
643 | }
|
644 | });
|
645 | }
|
646 | },
|
647 | ArrowUp: function ArrowUp(event) {
|
648 | var _this3 = this;
|
649 |
|
650 | event.preventDefault();
|
651 |
|
652 | if (this.getState().isOpen) {
|
653 | var amount = event.shiftKey ? -5 : -1;
|
654 | this.moveHighlightedIndex(amount, {
|
655 | type: keyDownArrowUp
|
656 | });
|
657 | } else {
|
658 | this.internalSetState({
|
659 | isOpen: true,
|
660 | type: keyDownArrowUp
|
661 | }, function () {
|
662 | var itemCount = _this3.getItemCount();
|
663 |
|
664 | if (itemCount > 0) {
|
665 | _this3.setHighlightedIndex(getNextWrappingIndex(-1, _this3.getState().highlightedIndex, itemCount), {
|
666 | type: keyDownArrowDown
|
667 | });
|
668 | }
|
669 | });
|
670 | }
|
671 | },
|
672 | Enter: function Enter(event) {
|
673 | var _this$getState2 = this.getState(),
|
674 | isOpen = _this$getState2.isOpen,
|
675 | highlightedIndex = _this$getState2.highlightedIndex;
|
676 |
|
677 | if (isOpen && highlightedIndex != null) {
|
678 | event.preventDefault();
|
679 | var item = this.items[highlightedIndex];
|
680 | var itemNode = this.getItemNodeFromIndex(highlightedIndex);
|
681 |
|
682 | if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
|
683 | return;
|
684 | }
|
685 |
|
686 | this.selectHighlightedItem({
|
687 | type: keyDownEnter
|
688 | });
|
689 | }
|
690 | },
|
691 | Escape: function Escape(event) {
|
692 | event.preventDefault();
|
693 | this.reset({
|
694 | type: keyDownEscape,
|
695 | selectedItem: null,
|
696 | inputValue: ''
|
697 | });
|
698 | }
|
699 | };
|
700 | _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
|
701 | ' ': function _(event) {
|
702 | event.preventDefault();
|
703 | this.toggleMenu({
|
704 | type: keyDownSpaceButton
|
705 | });
|
706 | }
|
707 | });
|
708 | _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
|
709 | Home: function Home(event) {
|
710 | this.highlightFirstOrLastIndex(event, true, {
|
711 | type: keyDownHome
|
712 | });
|
713 | },
|
714 | End: function End(event) {
|
715 | this.highlightFirstOrLastIndex(event, false, {
|
716 | type: keyDownEnd
|
717 | });
|
718 | }
|
719 | });
|
720 |
|
721 | _this.getToggleButtonProps = function (_temp3) {
|
722 | var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
723 | onClick = _ref3.onClick,
|
724 | onPress = _ref3.onPress,
|
725 | onKeyDown = _ref3.onKeyDown,
|
726 | onKeyUp = _ref3.onKeyUp,
|
727 | onBlur = _ref3.onBlur,
|
728 | rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]);
|
729 |
|
730 | var _this$getState3 = _this.getState(),
|
731 | isOpen = _this$getState3.isOpen;
|
732 |
|
733 | var enabledEventHandlers =
|
734 |
|
735 | {
|
736 | onPress: callAllEventHandlers(onPress, _this.buttonHandleClick)
|
737 | };
|
738 | var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
|
739 | return _extends({
|
740 | type: 'button',
|
741 | role: 'button',
|
742 | 'aria-label': isOpen ? 'close menu' : 'open menu',
|
743 | 'aria-haspopup': true,
|
744 | 'data-toggle': true
|
745 | }, eventHandlers, {}, rest);
|
746 | };
|
747 |
|
748 | _this.buttonHandleKeyUp = function (event) {
|
749 |
|
750 | event.preventDefault();
|
751 | };
|
752 |
|
753 | _this.buttonHandleKeyDown = function (event) {
|
754 | var key = normalizeArrowKey(event);
|
755 |
|
756 | if (_this.buttonKeyDownHandlers[key]) {
|
757 | _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
|
758 | }
|
759 | };
|
760 |
|
761 | _this.buttonHandleClick = function (event) {
|
762 | event.preventDefault();
|
763 |
|
764 |
|
765 |
|
766 |
|
767 |
|
768 |
|
769 |
|
770 | if (process.env.NODE_ENV === 'test') {
|
771 | _this.toggleMenu({
|
772 | type: clickButton
|
773 | });
|
774 | } else {
|
775 |
|
776 | _this.internalSetTimeout(function () {
|
777 | return _this.toggleMenu({
|
778 | type: clickButton
|
779 | });
|
780 | });
|
781 | }
|
782 | };
|
783 |
|
784 | _this.buttonHandleBlur = function (event) {
|
785 | var blurTarget = event.target;
|
786 |
|
787 |
|
788 | _this.internalSetTimeout(function () {
|
789 | if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget
|
790 | ) {
|
791 | _this.reset({
|
792 | type: blurButton
|
793 | });
|
794 | }
|
795 | });
|
796 | };
|
797 |
|
798 | _this.getLabelProps = function (props) {
|
799 | return _extends({
|
800 | htmlFor: _this.inputId,
|
801 | id: _this.labelId
|
802 | }, props);
|
803 | };
|
804 |
|
805 | _this.getInputProps = function (_temp4) {
|
806 | var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
807 | onKeyDown = _ref4.onKeyDown,
|
808 | onBlur = _ref4.onBlur,
|
809 | onChange = _ref4.onChange,
|
810 | onInput = _ref4.onInput,
|
811 | onChangeText = _ref4.onChangeText,
|
812 | rest = _objectWithoutPropertiesLoose(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]);
|
813 |
|
814 | var onChangeKey;
|
815 | var eventHandlers = {};
|
816 |
|
817 |
|
818 | onChangeKey = 'onChange';
|
819 |
|
820 | var _this$getState4 = _this.getState(),
|
821 | inputValue = _this$getState4.inputValue,
|
822 | isOpen = _this$getState4.isOpen,
|
823 | highlightedIndex = _this$getState4.highlightedIndex;
|
824 |
|
825 | if (!rest.disabled) {
|
826 | var _eventHandlers;
|
827 |
|
828 | eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
|
829 | }
|
830 |
|
831 |
|
832 |
|
833 | eventHandlers = {
|
834 | onChange: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
|
835 | onChangeText: callAllEventHandlers(onChangeText, onInput, function (text) {
|
836 | return _this.inputHandleChange({
|
837 | nativeEvent: {
|
838 | text: text
|
839 | }
|
840 | });
|
841 | }, _this.inputHandleTextChange),
|
842 | onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
843 | };
|
844 | return _extends({
|
845 | 'aria-autocomplete': 'list',
|
846 | 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
|
847 | 'aria-controls': isOpen ? _this.menuId : null,
|
848 | 'aria-labelledby': _this.labelId,
|
849 |
|
850 |
|
851 | autoComplete: 'off',
|
852 | value: inputValue,
|
853 | id: _this.inputId
|
854 | }, eventHandlers, {}, rest);
|
855 | };
|
856 |
|
857 | _this.inputHandleKeyDown = function (event) {
|
858 | var key = normalizeArrowKey(event);
|
859 |
|
860 | if (key && _this.inputKeyDownHandlers[key]) {
|
861 | _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
|
862 | }
|
863 | };
|
864 |
|
865 | _this.inputHandleChange = function (event) {
|
866 | _this.internalSetState({
|
867 | type: changeInput,
|
868 | isOpen: true,
|
869 | inputValue:
|
870 |
|
871 | event.nativeEvent.text,
|
872 | highlightedIndex: _this.props.defaultHighlightedIndex
|
873 | });
|
874 | };
|
875 |
|
876 | _this.inputHandleBlur = function () {
|
877 |
|
878 | _this.internalSetTimeout(function () {
|
879 | var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
|
880 |
|
881 | if (!_this.isMouseDown && !downshiftButtonIsActive) {
|
882 | _this.reset({
|
883 | type: blurInput
|
884 | });
|
885 | }
|
886 | });
|
887 | };
|
888 |
|
889 | _this.menuRef = function (node) {
|
890 | _this._menuNode = node;
|
891 | };
|
892 |
|
893 | _this.getMenuProps = function (_temp5, _temp6) {
|
894 | var _extends3;
|
895 |
|
896 | var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
897 | _ref5$refKey = _ref5.refKey,
|
898 | refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
899 | ref = _ref5.ref,
|
900 | props = _objectWithoutPropertiesLoose(_ref5, ["refKey", "ref"]);
|
901 |
|
902 | var _ref6 = _temp6 === void 0 ? {} : _temp6,
|
903 | _ref6$suppressRefErro = _ref6.suppressRefError,
|
904 | suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
|
905 |
|
906 | _this.getMenuProps.called = true;
|
907 | _this.getMenuProps.refKey = refKey;
|
908 | _this.getMenuProps.suppressRefError = suppressRefError;
|
909 | return _extends((_extends3 = {}, _extends3[refKey] = callAll(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
|
910 | };
|
911 |
|
912 | _this.getItemProps = function (_temp7) {
|
913 | var _enabledEventHandlers;
|
914 |
|
915 | var _ref7 = _temp7 === void 0 ? {} : _temp7,
|
916 | onMouseMove = _ref7.onMouseMove,
|
917 | onMouseDown = _ref7.onMouseDown,
|
918 | onClick = _ref7.onClick,
|
919 | onPress = _ref7.onPress,
|
920 | index = _ref7.index,
|
921 | _ref7$item = _ref7.item,
|
922 | item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ?
|
923 |
|
924 | undefined : requiredProp('getItemProps', 'item') : _ref7$item,
|
925 | rest = _objectWithoutPropertiesLoose(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]);
|
926 |
|
927 | if (index === undefined) {
|
928 | _this.items.push(item);
|
929 |
|
930 | index = _this.items.indexOf(item);
|
931 | } else {
|
932 | _this.items[index] = item;
|
933 | }
|
934 |
|
935 | var onSelectKey =
|
936 |
|
937 | 'onPress';
|
938 | var customClickHandler =
|
939 |
|
940 | onPress;
|
941 | var enabledEventHandlers = (_enabledEventHandlers = {
|
942 |
|
943 |
|
944 |
|
945 | onMouseMove: callAllEventHandlers(onMouseMove, function () {
|
946 | if (index === _this.getState().highlightedIndex) {
|
947 | return;
|
948 | }
|
949 |
|
950 | _this.setHighlightedIndex(index, {
|
951 | type: itemMouseEnter
|
952 | });
|
953 |
|
954 |
|
955 |
|
956 |
|
957 |
|
958 | _this.avoidScrolling = true;
|
959 |
|
960 | _this.internalSetTimeout(function () {
|
961 | return _this.avoidScrolling = false;
|
962 | }, 250);
|
963 | }),
|
964 | onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
|
965 |
|
966 |
|
967 |
|
968 | event.preventDefault();
|
969 | })
|
970 | }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
|
971 | _this.selectItemAtIndex(index, {
|
972 | type: clickItem
|
973 | });
|
974 | }), _enabledEventHandlers);
|
975 |
|
976 |
|
977 | var eventHandlers = rest.disabled ? {
|
978 | onMouseDown: enabledEventHandlers.onMouseDown
|
979 | } : enabledEventHandlers;
|
980 | return _extends({
|
981 | id: _this.getItemId(index),
|
982 | role: 'option',
|
983 | 'aria-selected': _this.getState().highlightedIndex === index
|
984 | }, eventHandlers, {}, rest);
|
985 | };
|
986 |
|
987 | _this.clearItems = function () {
|
988 | _this.items = [];
|
989 | };
|
990 |
|
991 | _this.reset = function (otherStateToSet, cb) {
|
992 | if (otherStateToSet === void 0) {
|
993 | otherStateToSet = {};
|
994 | }
|
995 |
|
996 | otherStateToSet = pickState(otherStateToSet);
|
997 |
|
998 | _this.internalSetState(function (_ref8) {
|
999 | var selectedItem = _ref8.selectedItem;
|
1000 | return _extends({
|
1001 | isOpen: _this.props.defaultIsOpen,
|
1002 | highlightedIndex: _this.props.defaultHighlightedIndex,
|
1003 | inputValue: _this.props.itemToString(selectedItem)
|
1004 | }, otherStateToSet);
|
1005 | }, cb);
|
1006 | };
|
1007 |
|
1008 | _this.toggleMenu = function (otherStateToSet, cb) {
|
1009 | if (otherStateToSet === void 0) {
|
1010 | otherStateToSet = {};
|
1011 | }
|
1012 |
|
1013 | otherStateToSet = pickState(otherStateToSet);
|
1014 |
|
1015 | _this.internalSetState(function (_ref9) {
|
1016 | var isOpen = _ref9.isOpen;
|
1017 | return _extends({
|
1018 | isOpen: !isOpen
|
1019 | }, isOpen && {
|
1020 | highlightedIndex: _this.props.defaultHighlightedIndex
|
1021 | }, {}, otherStateToSet);
|
1022 | }, function () {
|
1023 | var _this$getState5 = _this.getState(),
|
1024 | isOpen = _this$getState5.isOpen,
|
1025 | highlightedIndex = _this$getState5.highlightedIndex;
|
1026 |
|
1027 | if (isOpen) {
|
1028 | if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
|
1029 | _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
|
1030 | }
|
1031 | }
|
1032 |
|
1033 | cbToCb(cb)();
|
1034 | });
|
1035 | };
|
1036 |
|
1037 | _this.openMenu = function (cb) {
|
1038 | _this.internalSetState({
|
1039 | isOpen: true
|
1040 | }, cb);
|
1041 | };
|
1042 |
|
1043 | _this.closeMenu = function (cb) {
|
1044 | _this.internalSetState({
|
1045 | isOpen: false
|
1046 | }, cb);
|
1047 | };
|
1048 |
|
1049 | _this.updateStatus = debounce(function () {
|
1050 | var state = _this.getState();
|
1051 |
|
1052 | var item = _this.items[state.highlightedIndex];
|
1053 |
|
1054 | var resultCount = _this.getItemCount();
|
1055 |
|
1056 | var status = _this.props.getA11yStatusMessage(_extends({
|
1057 | itemToString: _this.props.itemToString,
|
1058 | previousResultCount: _this.previousResultCount,
|
1059 | resultCount: resultCount,
|
1060 | highlightedItem: item
|
1061 | }, state));
|
1062 |
|
1063 | _this.previousResultCount = resultCount;
|
1064 | setStatus(status, _this.props.environment.document);
|
1065 | }, 200);
|
1066 |
|
1067 |
|
1068 |
|
1069 |
|
1070 | var _this$props = _this.props,
|
1071 | defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
|
1072 | _this$props$initialHi = _this$props.initialHighlightedIndex,
|
1073 | _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
|
1074 | defaultIsOpen = _this$props.defaultIsOpen,
|
1075 | _this$props$initialIs = _this$props.initialIsOpen,
|
1076 | _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
|
1077 | _this$props$initialIn = _this$props.initialInputValue,
|
1078 | _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
|
1079 | _this$props$initialSe = _this$props.initialSelectedItem,
|
1080 | _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
|
1081 |
|
1082 | var _state = _this.getState({
|
1083 | highlightedIndex: _highlightedIndex,
|
1084 | isOpen: _isOpen,
|
1085 | inputValue: _inputValue,
|
1086 | selectedItem: _selectedItem
|
1087 | });
|
1088 |
|
1089 | if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
|
1090 | _state.inputValue = _this.props.itemToString(_state.selectedItem);
|
1091 | }
|
1092 |
|
1093 | _this.state = _state;
|
1094 | return _this;
|
1095 | }
|
1096 |
|
1097 | var _proto = Downshift.prototype;
|
1098 |
|
1099 | |
1100 |
|
1101 |
|
1102 | _proto.internalClearTimeouts = function internalClearTimeouts() {
|
1103 | this.timeoutIds.forEach(function (id) {
|
1104 | clearTimeout(id);
|
1105 | });
|
1106 | this.timeoutIds = [];
|
1107 | }
|
1108 | |
1109 |
|
1110 |
|
1111 |
|
1112 |
|
1113 |
|
1114 |
|
1115 |
|
1116 |
|
1117 |
|
1118 |
|
1119 |
|
1120 |
|
1121 |
|
1122 |
|
1123 | ;
|
1124 |
|
1125 | _proto.getState = function getState(stateToMerge) {
|
1126 | var _this4 = this;
|
1127 |
|
1128 | if (stateToMerge === void 0) {
|
1129 | stateToMerge = this.state;
|
1130 | }
|
1131 |
|
1132 | return Object.keys(stateToMerge).reduce(function (state, key) {
|
1133 | state[key] = _this4.isControlledProp(key) ? _this4.props[key] : stateToMerge[key];
|
1134 | return state;
|
1135 | }, {});
|
1136 | }
|
1137 | |
1138 |
|
1139 |
|
1140 |
|
1141 |
|
1142 |
|
1143 |
|
1144 | ;
|
1145 |
|
1146 | _proto.isControlledProp = function isControlledProp(key) {
|
1147 | return this.props[key] !== undefined;
|
1148 | };
|
1149 |
|
1150 | _proto.getItemCount = function getItemCount() {
|
1151 |
|
1152 |
|
1153 |
|
1154 |
|
1155 | var itemCount = this.items.length;
|
1156 |
|
1157 | if (this.itemCount != null) {
|
1158 | itemCount = this.itemCount;
|
1159 | } else if (this.props.itemCount !== undefined) {
|
1160 | itemCount = this.props.itemCount;
|
1161 | }
|
1162 |
|
1163 | return itemCount;
|
1164 | };
|
1165 |
|
1166 | _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
|
1167 | return this.props.environment.document.getElementById(this.getItemId(index));
|
1168 | };
|
1169 |
|
1170 | _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {};
|
1171 |
|
1172 | _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
|
1173 | var itemCount = this.getItemCount();
|
1174 |
|
1175 | if (itemCount > 0) {
|
1176 | var nextHighlightedIndex = getNextWrappingIndex(amount, this.getState().highlightedIndex, itemCount);
|
1177 | this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
|
1178 | }
|
1179 | };
|
1180 |
|
1181 | _proto.highlightFirstOrLastIndex = function highlightFirstOrLastIndex(event, first, otherStateToSet) {
|
1182 | var itemsLastIndex = this.getItemCount() - 1;
|
1183 |
|
1184 | if (itemsLastIndex < 0 || !this.getState().isOpen) {
|
1185 | return;
|
1186 | }
|
1187 |
|
1188 | event.preventDefault();
|
1189 | this.setHighlightedIndex(first ? 0 : itemsLastIndex, otherStateToSet);
|
1190 | };
|
1191 |
|
1192 | _proto.getStateAndHelpers = function getStateAndHelpers() {
|
1193 | var _this$getState6 = this.getState(),
|
1194 | highlightedIndex = _this$getState6.highlightedIndex,
|
1195 | inputValue = _this$getState6.inputValue,
|
1196 | selectedItem = _this$getState6.selectedItem,
|
1197 | isOpen = _this$getState6.isOpen;
|
1198 |
|
1199 | var itemToString = this.props.itemToString;
|
1200 | var id = this.id;
|
1201 | var getRootProps = this.getRootProps,
|
1202 | getToggleButtonProps = this.getToggleButtonProps,
|
1203 | getLabelProps = this.getLabelProps,
|
1204 | getMenuProps = this.getMenuProps,
|
1205 | getInputProps = this.getInputProps,
|
1206 | getItemProps = this.getItemProps,
|
1207 | openMenu = this.openMenu,
|
1208 | closeMenu = this.closeMenu,
|
1209 | toggleMenu = this.toggleMenu,
|
1210 | selectItem = this.selectItem,
|
1211 | selectItemAtIndex = this.selectItemAtIndex,
|
1212 | selectHighlightedItem = this.selectHighlightedItem,
|
1213 | setHighlightedIndex = this.setHighlightedIndex,
|
1214 | clearSelection = this.clearSelection,
|
1215 | clearItems = this.clearItems,
|
1216 | reset = this.reset,
|
1217 | setItemCount = this.setItemCount,
|
1218 | unsetItemCount = this.unsetItemCount,
|
1219 | setState = this.internalSetState;
|
1220 | return {
|
1221 |
|
1222 | getRootProps: getRootProps,
|
1223 | getToggleButtonProps: getToggleButtonProps,
|
1224 | getLabelProps: getLabelProps,
|
1225 | getMenuProps: getMenuProps,
|
1226 | getInputProps: getInputProps,
|
1227 | getItemProps: getItemProps,
|
1228 |
|
1229 | reset: reset,
|
1230 | openMenu: openMenu,
|
1231 | closeMenu: closeMenu,
|
1232 | toggleMenu: toggleMenu,
|
1233 | selectItem: selectItem,
|
1234 | selectItemAtIndex: selectItemAtIndex,
|
1235 | selectHighlightedItem: selectHighlightedItem,
|
1236 | setHighlightedIndex: setHighlightedIndex,
|
1237 | clearSelection: clearSelection,
|
1238 | clearItems: clearItems,
|
1239 | setItemCount: setItemCount,
|
1240 | unsetItemCount: unsetItemCount,
|
1241 | setState: setState,
|
1242 |
|
1243 | itemToString: itemToString,
|
1244 |
|
1245 | id: id,
|
1246 |
|
1247 | highlightedIndex: highlightedIndex,
|
1248 | inputValue: inputValue,
|
1249 | isOpen: isOpen,
|
1250 | selectedItem: selectedItem
|
1251 | };
|
1252 | }
|
1253 | ;
|
1254 |
|
1255 | _proto.componentDidMount = function componentDidMount() {
|
1256 | var _this5 = this;
|
1257 |
|
1258 |
|
1259 | if (process.env.NODE_ENV !== 'production' && !true && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
|
1260 | validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
|
1261 | }
|
1262 |
|
1263 |
|
1264 |
|
1265 | this.cleanup = function () {
|
1266 | _this5.internalClearTimeouts();
|
1267 | };
|
1268 | };
|
1269 |
|
1270 | _proto.shouldScroll = function shouldScroll(prevState, prevProps) {
|
1271 | var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
|
1272 | currentHighlightedIndex = _ref10.highlightedIndex;
|
1273 |
|
1274 | var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
|
1275 | prevHighlightedIndex = _ref11.highlightedIndex;
|
1276 |
|
1277 | var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
1278 | return scrollWhenOpen || currentHighlightedIndex !== prevHighlightedIndex;
|
1279 | };
|
1280 |
|
1281 | _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
1282 | if (process.env.NODE_ENV !== 'production') {
|
1283 | validateControlledUnchanged(prevProps, this.props);
|
1284 |
|
1285 | }
|
1286 |
|
1287 | if (this.isControlledProp('selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
|
1288 | this.internalSetState({
|
1289 | type: controlledPropUpdatedSelectedItem,
|
1290 | inputValue: this.props.itemToString(this.props.selectedItem)
|
1291 | });
|
1292 | }
|
1293 |
|
1294 | if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
|
1295 | this.scrollHighlightedItemIntoView();
|
1296 | }
|
1297 |
|
1298 |
|
1299 | };
|
1300 |
|
1301 | _proto.componentWillUnmount = function componentWillUnmount() {
|
1302 | this.cleanup();
|
1303 | };
|
1304 |
|
1305 | _proto.render = function render() {
|
1306 | var children = unwrapArray(this.props.children, noop);
|
1307 |
|
1308 |
|
1309 |
|
1310 | this.clearItems();
|
1311 |
|
1312 |
|
1313 |
|
1314 |
|
1315 | this.getRootProps.called = false;
|
1316 | this.getRootProps.refKey = undefined;
|
1317 | this.getRootProps.suppressRefError = undefined;
|
1318 |
|
1319 | this.getMenuProps.called = false;
|
1320 | this.getMenuProps.refKey = undefined;
|
1321 | this.getMenuProps.suppressRefError = undefined;
|
1322 |
|
1323 | this.getLabelProps.called = false;
|
1324 |
|
1325 | this.getInputProps.called = false;
|
1326 | var element = unwrapArray(children(this.getStateAndHelpers()));
|
1327 |
|
1328 | if (!element) {
|
1329 | return null;
|
1330 | }
|
1331 |
|
1332 | if (this.getRootProps.called || this.props.suppressRefError) {
|
1333 | if (process.env.NODE_ENV !== 'production' && !this.getRootProps.suppressRefError && !this.props.suppressRefError) {
|
1334 | validateGetRootPropsCalledCorrectly(element, this.getRootProps);
|
1335 | }
|
1336 |
|
1337 | return element;
|
1338 | } else if (isDOMElement(element)) {
|
1339 |
|
1340 |
|
1341 | return React__default.cloneElement(element, this.getRootProps(getElementProps(element)));
|
1342 | }
|
1343 |
|
1344 |
|
1345 |
|
1346 | if (process.env.NODE_ENV !== 'production') {
|
1347 |
|
1348 |
|
1349 | throw new Error('downshift: If you return a non-DOM element, you must use apply the getRootProps function');
|
1350 | }
|
1351 |
|
1352 |
|
1353 |
|
1354 | return undefined;
|
1355 | };
|
1356 |
|
1357 | return Downshift;
|
1358 | }(React.Component);
|
1359 |
|
1360 | Downshift.defaultProps = {
|
1361 | defaultHighlightedIndex: null,
|
1362 | defaultIsOpen: false,
|
1363 | getA11yStatusMessage: getA11yStatusMessage,
|
1364 | itemToString: function itemToString(i) {
|
1365 | if (i == null) {
|
1366 | return '';
|
1367 | }
|
1368 |
|
1369 | if (process.env.NODE_ENV !== 'production' && isPlainObject(i) && !i.hasOwnProperty('toString')) {
|
1370 |
|
1371 | console.warn('downshift: An object was passed to the default implementation of `itemToString`. You should probably provide your own `itemToString` implementation. Please refer to the `itemToString` API documentation.', 'The object that was passed:', i);
|
1372 | }
|
1373 |
|
1374 | return String(i);
|
1375 | },
|
1376 | onStateChange: noop,
|
1377 | onInputValueChange: noop,
|
1378 | onUserAction: noop,
|
1379 | onChange: noop,
|
1380 | onSelect: noop,
|
1381 | onOuterClick: noop,
|
1382 | selectedItemChanged: function selectedItemChanged(prevItem, item) {
|
1383 | return prevItem !== item;
|
1384 | },
|
1385 | environment: typeof window === 'undefined'
|
1386 |
|
1387 | ? {} : window,
|
1388 | stateReducer: function stateReducer(state, stateToSet) {
|
1389 | return stateToSet;
|
1390 | },
|
1391 | suppressRefError: false,
|
1392 | scrollIntoView: scrollIntoView
|
1393 | };
|
1394 | Downshift.stateChangeTypes = stateChangeTypes;
|
1395 | process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
|
1396 | children: PropTypes.func,
|
1397 | defaultHighlightedIndex: PropTypes.number,
|
1398 | defaultIsOpen: PropTypes.bool,
|
1399 | initialHighlightedIndex: PropTypes.number,
|
1400 | initialSelectedItem: PropTypes.any,
|
1401 | initialInputValue: PropTypes.string,
|
1402 | initialIsOpen: PropTypes.bool,
|
1403 | getA11yStatusMessage: PropTypes.func,
|
1404 | itemToString: PropTypes.func,
|
1405 | onChange: PropTypes.func,
|
1406 | onSelect: PropTypes.func,
|
1407 | onStateChange: PropTypes.func,
|
1408 | onInputValueChange: PropTypes.func,
|
1409 | onUserAction: PropTypes.func,
|
1410 | onOuterClick: PropTypes.func,
|
1411 | selectedItemChanged: PropTypes.func,
|
1412 | stateReducer: PropTypes.func,
|
1413 | itemCount: PropTypes.number,
|
1414 | id: PropTypes.string,
|
1415 | environment: PropTypes.shape({
|
1416 | addEventListener: PropTypes.func,
|
1417 | removeEventListener: PropTypes.func,
|
1418 | document: PropTypes.shape({
|
1419 | getElementById: PropTypes.func,
|
1420 | activeElement: PropTypes.any,
|
1421 | body: PropTypes.any
|
1422 | })
|
1423 | }),
|
1424 | suppressRefError: PropTypes.bool,
|
1425 | scrollIntoView: PropTypes.func,
|
1426 |
|
1427 |
|
1428 |
|
1429 |
|
1430 | selectedItem: PropTypes.any,
|
1431 | isOpen: PropTypes.bool,
|
1432 | inputValue: PropTypes.string,
|
1433 | highlightedIndex: PropTypes.number,
|
1434 | labelId: PropTypes.string,
|
1435 | inputId: PropTypes.string,
|
1436 | menuId: PropTypes.string,
|
1437 | getItemId: PropTypes.func
|
1438 |
|
1439 |
|
1440 | } : void 0;
|
1441 |
|
1442 | function validateGetMenuPropsCalledCorrectly(node, _ref12) {
|
1443 | var refKey = _ref12.refKey;
|
1444 |
|
1445 | if (!node) {
|
1446 |
|
1447 | console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
|
1448 | }
|
1449 | }
|
1450 |
|
1451 | function validateGetRootPropsCalledCorrectly(element, _ref13) {
|
1452 | var refKey = _ref13.refKey;
|
1453 | var refKeySpecified = refKey !== 'ref';
|
1454 | var isComposite = !isDOMElement(element);
|
1455 |
|
1456 | if (isComposite && !refKeySpecified && !reactIs.isForwardRef(element)) {
|
1457 |
|
1458 | console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
|
1459 | } else if (!isComposite && refKeySpecified) {
|
1460 |
|
1461 | console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
|
1462 | }
|
1463 |
|
1464 | if (!reactIs.isForwardRef(element) && !getElementProps(element)[refKey]) {
|
1465 |
|
1466 | console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
|
1467 | }
|
1468 | }
|
1469 |
|
1470 | function validateControlledUnchanged(prevProps, nextProps) {
|
1471 | var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
|
1472 | ['selectedItem', 'isOpen', 'inputValue', 'highlightedIndex'].forEach(function (propKey) {
|
1473 | if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
|
1474 |
|
1475 | console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
|
1476 | } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
|
1477 |
|
1478 | console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
|
1479 | }
|
1480 | });
|
1481 | }
|
1482 |
|
1483 | function getElementIds(generateDefaultId, _temp) {
|
1484 | var _ref = _temp === void 0 ? {} : _temp,
|
1485 | id = _ref.id,
|
1486 | labelId = _ref.labelId,
|
1487 | menuId = _ref.menuId,
|
1488 | getItemId = _ref.getItemId,
|
1489 | toggleButtonId = _ref.toggleButtonId;
|
1490 |
|
1491 | var uniqueId = id === undefined ? "downshift-" + generateDefaultId() : id;
|
1492 | return {
|
1493 | labelId: labelId || uniqueId + "-label",
|
1494 | menuId: menuId || uniqueId + "-menu",
|
1495 | getItemId: getItemId || function (index) {
|
1496 | return uniqueId + "-item-" + index;
|
1497 | },
|
1498 | toggleButtonId: toggleButtonId || uniqueId + "-toggle-button"
|
1499 | };
|
1500 | }
|
1501 |
|
1502 | function getNextWrappingIndex$1(moveAmount, baseIndex, itemsLength, circular) {
|
1503 | if (baseIndex === -1) {
|
1504 | return moveAmount > 0 ? 0 : itemsLength - 1;
|
1505 | }
|
1506 |
|
1507 | var nextIndex = baseIndex + moveAmount;
|
1508 |
|
1509 | if (nextIndex < 0) {
|
1510 | return circular ? itemsLength - 1 : 0;
|
1511 | }
|
1512 |
|
1513 | if (nextIndex >= itemsLength) {
|
1514 | return circular ? 0 : itemsLength - 1;
|
1515 | }
|
1516 |
|
1517 | return nextIndex;
|
1518 | }
|
1519 |
|
1520 | function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToStringParam) {
|
1521 | var newHighlightedIndex = -1;
|
1522 | var itemStrings = items.map(function (item) {
|
1523 | return itemToStringParam(item).toLowerCase();
|
1524 | });
|
1525 | var startPosition = highlightedIndex + 1;
|
1526 | newHighlightedIndex = itemStrings.slice(startPosition).findIndex(function (itemString) {
|
1527 | return itemString.startsWith(keysSoFar);
|
1528 | });
|
1529 |
|
1530 | if (newHighlightedIndex > -1) {
|
1531 | return newHighlightedIndex + startPosition;
|
1532 | } else {
|
1533 | return itemStrings.slice(0, startPosition).findIndex(function (itemString) {
|
1534 | return itemString.startsWith(keysSoFar);
|
1535 | });
|
1536 | }
|
1537 | }
|
1538 |
|
1539 | function getState(state, props) {
|
1540 | return Object.keys(state).reduce(function (prevState, key) {
|
1541 |
|
1542 | prevState[key] = props[key] === undefined ? state[key] : props[key];
|
1543 | return prevState;
|
1544 | }, {});
|
1545 | }
|
1546 |
|
1547 | function getItemIndex(index, item, items) {
|
1548 | if (index !== undefined) {
|
1549 | return index;
|
1550 | }
|
1551 |
|
1552 | if (items.length === 0) {
|
1553 | return -1;
|
1554 | }
|
1555 |
|
1556 | return items.indexOf(item);
|
1557 | }
|
1558 |
|
1559 | function itemToString(item) {
|
1560 | return item ? String(item) : '';
|
1561 | }
|
1562 |
|
1563 | function getPropTypesValidator(caller, propTypes) {
|
1564 |
|
1565 | return function (options) {
|
1566 | if (options === void 0) {
|
1567 | options = {};
|
1568 | }
|
1569 |
|
1570 | Object.entries(propTypes).forEach(function (_ref2) {
|
1571 | var key = _ref2[0];
|
1572 | PropTypes.checkPropTypes(propTypes, options, key, caller.name);
|
1573 | });
|
1574 | };
|
1575 | }
|
1576 |
|
1577 | function isAcceptedCharacterKey(key) {
|
1578 | return /^\S{1}$/.test(key);
|
1579 | }
|
1580 |
|
1581 | var defaultStateValues = {
|
1582 | highlightedIndex: -1,
|
1583 | isOpen: false,
|
1584 | selectedItem: null
|
1585 | };
|
1586 |
|
1587 | function getA11yStatusMessage$1(_ref) {
|
1588 | var isOpen = _ref.isOpen,
|
1589 | items = _ref.items;
|
1590 |
|
1591 | if (!items) {
|
1592 | return '';
|
1593 | }
|
1594 |
|
1595 | var resultCount = items.length;
|
1596 |
|
1597 | if (isOpen) {
|
1598 | if (resultCount === 0) {
|
1599 | return 'No results are available';
|
1600 | }
|
1601 |
|
1602 | return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
|
1603 | }
|
1604 |
|
1605 | return '';
|
1606 | }
|
1607 |
|
1608 | function getA11ySelectionMessage(_ref2) {
|
1609 | var selectedItem = _ref2.selectedItem,
|
1610 | itemToString = _ref2.itemToString;
|
1611 | return itemToString(selectedItem) + " has been selected.";
|
1612 | }
|
1613 |
|
1614 | function getHighlightedIndexOnOpen(props, state, offset) {
|
1615 | var items = props.items,
|
1616 | initialHighlightedIndex = props.initialHighlightedIndex,
|
1617 | defaultHighlightedIndex = props.defaultHighlightedIndex;
|
1618 | var selectedItem = state.selectedItem,
|
1619 | highlightedIndex = state.highlightedIndex;
|
1620 |
|
1621 | if (initialHighlightedIndex !== undefined && highlightedIndex > -1) {
|
1622 | return initialHighlightedIndex;
|
1623 | }
|
1624 |
|
1625 | if (defaultHighlightedIndex !== undefined) {
|
1626 | return defaultHighlightedIndex;
|
1627 | }
|
1628 |
|
1629 | if (selectedItem) {
|
1630 | if (offset === 0) {
|
1631 | return items.indexOf(selectedItem);
|
1632 | }
|
1633 |
|
1634 | return getNextWrappingIndex$1(offset, items.indexOf(selectedItem), items.length, false);
|
1635 | }
|
1636 |
|
1637 | if (offset === 0) {
|
1638 | return -1;
|
1639 | }
|
1640 |
|
1641 | return offset < 0 ? items.length - 1 : 0;
|
1642 | }
|
1643 |
|
1644 | function capitalizeString(string) {
|
1645 | return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
|
1646 | }
|
1647 |
|
1648 | function getDefaultValue(props, propKey) {
|
1649 | var defaultPropKey = "default" + capitalizeString(propKey);
|
1650 |
|
1651 | if (props[defaultPropKey] !== undefined) {
|
1652 | return props[defaultPropKey];
|
1653 | }
|
1654 |
|
1655 | return defaultStateValues[propKey];
|
1656 | }
|
1657 |
|
1658 | function getInitialValue(props, propKey) {
|
1659 | if (props[propKey] !== undefined) {
|
1660 | return props[propKey];
|
1661 | }
|
1662 |
|
1663 | var initialPropKey = "initial" + capitalizeString(propKey);
|
1664 |
|
1665 | if (props[initialPropKey] !== undefined) {
|
1666 | return props[initialPropKey];
|
1667 | }
|
1668 |
|
1669 | return getDefaultValue(props, propKey);
|
1670 | }
|
1671 |
|
1672 | function getInitialState(props) {
|
1673 | return {
|
1674 | highlightedIndex: getInitialValue(props, 'highlightedIndex'),
|
1675 | isOpen: getInitialValue(props, 'isOpen'),
|
1676 | selectedItem: getInitialValue(props, 'selectedItem'),
|
1677 | keysSoFar: ''
|
1678 | };
|
1679 | }
|
1680 |
|
1681 | function invokeOnChangeHandler(propKey, props, state, changes) {
|
1682 | var handler = "on" + capitalizeString(propKey) + "Change";
|
1683 |
|
1684 | if (props[handler] && changes[propKey] !== undefined && changes[propKey] !== state[propKey]) {
|
1685 | props[handler](changes);
|
1686 | }
|
1687 | }
|
1688 |
|
1689 | function callOnChangeProps(props, state, changes) {
|
1690 | ['isOpen', 'highlightedIndex', 'selectedItem'].forEach(function (propKey) {
|
1691 | invokeOnChangeHandler(propKey, props, state, changes);
|
1692 | });
|
1693 |
|
1694 | if (props.onStateChange && changes !== undefined) {
|
1695 | props.onStateChange(changes);
|
1696 | }
|
1697 | }
|
1698 |
|
1699 | var propTypes = {
|
1700 | items: PropTypes.array.isRequired,
|
1701 | itemToString: PropTypes.func,
|
1702 | getA11yStatusMessage: PropTypes.func,
|
1703 | getA11ySelectionMessage: PropTypes.func,
|
1704 | circularNavigation: PropTypes.bool,
|
1705 | highlightedIndex: PropTypes.number,
|
1706 | defaultHighlightedIndex: PropTypes.number,
|
1707 | initialHighlightedIndex: PropTypes.number,
|
1708 | isOpen: PropTypes.bool,
|
1709 | defaultIsOpen: PropTypes.bool,
|
1710 | initialIsOpen: PropTypes.bool,
|
1711 | selectedItem: PropTypes.any,
|
1712 | initialSelectedItem: PropTypes.any,
|
1713 | defaultSelectedItem: PropTypes.any,
|
1714 | id: PropTypes.string,
|
1715 | labelId: PropTypes.string,
|
1716 | menuId: PropTypes.string,
|
1717 | getItemId: PropTypes.func,
|
1718 | toggleButtonId: PropTypes.string,
|
1719 | stateReducer: PropTypes.func,
|
1720 | onSelectedItemChange: PropTypes.func,
|
1721 | onHighlightedIndexChange: PropTypes.func,
|
1722 | onStateChange: PropTypes.func,
|
1723 | onIsOpenChange: PropTypes.func,
|
1724 | environment: PropTypes.shape({
|
1725 | addEventListener: PropTypes.func,
|
1726 | removeEventListener: PropTypes.func,
|
1727 | document: PropTypes.shape({
|
1728 | getElementById: PropTypes.func,
|
1729 | activeElement: PropTypes.any,
|
1730 | body: PropTypes.any
|
1731 | })
|
1732 | })
|
1733 | };
|
1734 |
|
1735 | var MenuKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_down__' : 0;
|
1736 | var MenuKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_up__' : 1;
|
1737 | var MenuKeyDownEscape = process.env.NODE_ENV !== "production" ? '__menu_keydown_escape__' : 2;
|
1738 | var MenuKeyDownHome = process.env.NODE_ENV !== "production" ? '__menu_keydown_home__' : 3;
|
1739 | var MenuKeyDownEnd = process.env.NODE_ENV !== "production" ? '__menu_keydown_end__' : 4;
|
1740 | var MenuKeyDownEnter = process.env.NODE_ENV !== "production" ? '__menu_keydown_enter__' : 5;
|
1741 | var MenuKeyDownCharacter = process.env.NODE_ENV !== "production" ? '__menu_keydown_character__' : 6;
|
1742 | var MenuBlur = process.env.NODE_ENV !== "production" ? '__menu_blur__' : 7;
|
1743 | var ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 8;
|
1744 | var ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 9;
|
1745 | var ToggleButtonKeyDownCharacter = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_character__' : 10;
|
1746 | var ToggleButtonKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_down__' : 11;
|
1747 | var ToggleButtonKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_up__' : 12;
|
1748 | var ToggleButtonClick = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 13;
|
1749 | var FunctionToggleMenu = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 14;
|
1750 | var FunctionOpenMenu = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 15;
|
1751 | var FunctionCloseMenu = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 16;
|
1752 | var FunctionSetHighlightedIndex = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 17;
|
1753 | var FunctionSelectItem = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 18;
|
1754 | var FunctionClearKeysSoFar = process.env.NODE_ENV !== "production" ? '__function_clear_keys_so_far__' : 19;
|
1755 | var FunctionReset = process.env.NODE_ENV !== "production" ? '__function_reset__' : 20;
|
1756 |
|
1757 | var stateChangeTypes$1 = Object.freeze({
|
1758 | MenuKeyDownArrowDown: MenuKeyDownArrowDown,
|
1759 | MenuKeyDownArrowUp: MenuKeyDownArrowUp,
|
1760 | MenuKeyDownEscape: MenuKeyDownEscape,
|
1761 | MenuKeyDownHome: MenuKeyDownHome,
|
1762 | MenuKeyDownEnd: MenuKeyDownEnd,
|
1763 | MenuKeyDownEnter: MenuKeyDownEnter,
|
1764 | MenuKeyDownCharacter: MenuKeyDownCharacter,
|
1765 | MenuBlur: MenuBlur,
|
1766 | ItemMouseMove: ItemMouseMove,
|
1767 | ItemClick: ItemClick,
|
1768 | ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
|
1769 | ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
|
1770 | ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
|
1771 | ToggleButtonClick: ToggleButtonClick,
|
1772 | FunctionToggleMenu: FunctionToggleMenu,
|
1773 | FunctionOpenMenu: FunctionOpenMenu,
|
1774 | FunctionCloseMenu: FunctionCloseMenu,
|
1775 | FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
|
1776 | FunctionSelectItem: FunctionSelectItem,
|
1777 | FunctionClearKeysSoFar: FunctionClearKeysSoFar,
|
1778 | FunctionReset: FunctionReset
|
1779 | });
|
1780 |
|
1781 |
|
1782 |
|
1783 | function downshiftSelectReducer(state, action) {
|
1784 | var type = action.type,
|
1785 | props = action.props,
|
1786 | shiftKey = action.shiftKey;
|
1787 | var changes;
|
1788 |
|
1789 | switch (type) {
|
1790 | case ItemMouseMove:
|
1791 | changes = {
|
1792 | highlightedIndex: action.index
|
1793 | };
|
1794 | break;
|
1795 |
|
1796 | case ItemClick:
|
1797 | changes = {
|
1798 | isOpen: getDefaultValue(props, 'isOpen'),
|
1799 | highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
|
1800 | selectedItem: props.items[action.index]
|
1801 | };
|
1802 | break;
|
1803 |
|
1804 | case MenuBlur:
|
1805 | changes = _extends({
|
1806 | isOpen: false,
|
1807 | highlightedIndex: -1
|
1808 | }, state.highlightedIndex >= 0 && {
|
1809 | selectedItem: props.items[state.highlightedIndex]
|
1810 | });
|
1811 | break;
|
1812 |
|
1813 | case MenuKeyDownArrowDown:
|
1814 | changes = {
|
1815 | highlightedIndex: getNextWrappingIndex$1(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, props.circularNavigation)
|
1816 | };
|
1817 | break;
|
1818 |
|
1819 | case MenuKeyDownArrowUp:
|
1820 | changes = {
|
1821 | highlightedIndex: getNextWrappingIndex$1(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, props.circularNavigation)
|
1822 | };
|
1823 | break;
|
1824 |
|
1825 | case MenuKeyDownHome:
|
1826 | changes = {
|
1827 | highlightedIndex: 0
|
1828 | };
|
1829 | break;
|
1830 |
|
1831 | case MenuKeyDownEnd:
|
1832 | changes = {
|
1833 | highlightedIndex: props.items.length - 1
|
1834 | };
|
1835 | break;
|
1836 |
|
1837 | case MenuKeyDownEscape:
|
1838 | changes = {
|
1839 | isOpen: false,
|
1840 | highlightedIndex: -1
|
1841 | };
|
1842 | break;
|
1843 |
|
1844 | case MenuKeyDownEnter:
|
1845 | changes = _extends({
|
1846 | isOpen: getDefaultValue(props, 'isOpen'),
|
1847 | highlightedIndex: getDefaultValue(props, 'highlightedIndex')
|
1848 | }, state.highlightedIndex >= 0 && {
|
1849 | selectedItem: props.items[state.highlightedIndex]
|
1850 | });
|
1851 | break;
|
1852 |
|
1853 | case MenuKeyDownCharacter:
|
1854 | {
|
1855 | var lowercasedKey = action.key;
|
1856 | var keysSoFar = "" + state.keysSoFar + lowercasedKey;
|
1857 | var highlightedIndex = getItemIndexByCharacterKey(keysSoFar, state.highlightedIndex, props.items, props.itemToString);
|
1858 | changes = _extends({
|
1859 | keysSoFar: keysSoFar
|
1860 | }, highlightedIndex >= 0 && {
|
1861 | highlightedIndex: highlightedIndex
|
1862 | });
|
1863 | }
|
1864 | break;
|
1865 |
|
1866 | case ToggleButtonKeyDownCharacter:
|
1867 | {
|
1868 | var _lowercasedKey = action.key;
|
1869 |
|
1870 | var _keysSoFar = "" + state.keysSoFar + _lowercasedKey;
|
1871 |
|
1872 | var itemIndex = getItemIndexByCharacterKey(_keysSoFar, state.selectedItem ? props.items.indexOf(state.selectedItem) : -1, props.items, props.itemToString);
|
1873 | changes = _extends({
|
1874 | keysSoFar: _keysSoFar
|
1875 | }, itemIndex >= 0 && {
|
1876 | selectedItem: props.items[itemIndex]
|
1877 | });
|
1878 | }
|
1879 | break;
|
1880 |
|
1881 | case ToggleButtonKeyDownArrowDown:
|
1882 | {
|
1883 | changes = {
|
1884 | isOpen: true,
|
1885 | highlightedIndex: getHighlightedIndexOnOpen(props, state, 1)
|
1886 | };
|
1887 | break;
|
1888 | }
|
1889 |
|
1890 | case ToggleButtonKeyDownArrowUp:
|
1891 | changes = {
|
1892 | isOpen: true,
|
1893 | highlightedIndex: getHighlightedIndexOnOpen(props, state, -1)
|
1894 | };
|
1895 | break;
|
1896 |
|
1897 | case ToggleButtonClick:
|
1898 | case FunctionToggleMenu:
|
1899 | changes = {
|
1900 | isOpen: !state.isOpen,
|
1901 | highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
|
1902 | };
|
1903 | break;
|
1904 |
|
1905 | case FunctionOpenMenu:
|
1906 | changes = {
|
1907 | isOpen: true,
|
1908 | highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
|
1909 | };
|
1910 | break;
|
1911 |
|
1912 | case FunctionCloseMenu:
|
1913 | changes = {
|
1914 | isOpen: false
|
1915 | };
|
1916 | break;
|
1917 |
|
1918 | case FunctionSetHighlightedIndex:
|
1919 | changes = {
|
1920 | highlightedIndex: action.highlightedIndex
|
1921 | };
|
1922 | break;
|
1923 |
|
1924 | case FunctionSelectItem:
|
1925 | changes = {
|
1926 | selectedItem: action.selectedItem
|
1927 | };
|
1928 | break;
|
1929 |
|
1930 | case FunctionClearKeysSoFar:
|
1931 | changes = {
|
1932 | keysSoFar: ''
|
1933 | };
|
1934 | break;
|
1935 |
|
1936 | case FunctionReset:
|
1937 | changes = {
|
1938 | highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
|
1939 | isOpen: getDefaultValue(props, 'isOpen'),
|
1940 | selectedItem: getDefaultValue(props, 'selectedItem')
|
1941 | };
|
1942 | break;
|
1943 |
|
1944 | default:
|
1945 | throw new Error('Reducer called without proper action type.');
|
1946 | }
|
1947 |
|
1948 | return _extends({}, state, {}, changes);
|
1949 | }
|
1950 |
|
1951 |
|
1952 | var validatePropTypes = getPropTypesValidator(useSelect, propTypes);
|
1953 | var defaultProps = {
|
1954 | itemToString: itemToString,
|
1955 | stateReducer: function stateReducer(s, a) {
|
1956 | return a.changes;
|
1957 | },
|
1958 | getA11yStatusMessage: getA11yStatusMessage$1,
|
1959 | getA11ySelectionMessage: getA11ySelectionMessage,
|
1960 | scrollIntoView: scrollIntoView,
|
1961 | environment: typeof window === 'undefined'
|
1962 |
|
1963 | ? {} : window
|
1964 | };
|
1965 | var clearTimeout$1;
|
1966 | useSelect.stateChangeTypes = stateChangeTypes$1;
|
1967 |
|
1968 | function useSelect(userProps) {
|
1969 | if (userProps === void 0) {
|
1970 | userProps = {};
|
1971 | }
|
1972 |
|
1973 | validatePropTypes(userProps);
|
1974 |
|
1975 | var props = _extends({}, defaultProps, {}, userProps);
|
1976 |
|
1977 | var items = props.items,
|
1978 | itemToString = props.itemToString,
|
1979 | getA11yStatusMessage = props.getA11yStatusMessage,
|
1980 | getA11ySelectionMessage = props.getA11ySelectionMessage,
|
1981 | initialIsOpen = props.initialIsOpen,
|
1982 | defaultIsOpen = props.defaultIsOpen,
|
1983 | stateReducer = props.stateReducer,
|
1984 | scrollIntoView = props.scrollIntoView,
|
1985 | environment = props.environment;
|
1986 |
|
1987 | var initialState = getInitialState(props);
|
1988 |
|
1989 | var _useReducer = React.useReducer(function (state, action) {
|
1990 | var changes = downshiftSelectReducer(state, action);
|
1991 |
|
1992 | var reducedState = stateReducer(state, _extends({}, action, {
|
1993 | changes: changes
|
1994 | }));
|
1995 |
|
1996 | callOnChangeProps(props, state, reducedState);
|
1997 |
|
1998 | return getState(reducedState, props);
|
1999 | }, initialState),
|
2000 | _useReducer$ = _useReducer[0],
|
2001 | isOpen = _useReducer$.isOpen,
|
2002 | highlightedIndex = _useReducer$.highlightedIndex,
|
2003 | selectedItem = _useReducer$.selectedItem,
|
2004 | keysSoFar = _useReducer$.keysSoFar,
|
2005 | dispatch = _useReducer[1];
|
2006 |
|
2007 |
|
2008 | var _getElementIds = getElementIds(autoId.useId, props),
|
2009 | labelId = _getElementIds.labelId,
|
2010 | getItemId = _getElementIds.getItemId,
|
2011 | menuId = _getElementIds.menuId,
|
2012 | toggleButtonId = _getElementIds.toggleButtonId;
|
2013 |
|
2014 |
|
2015 |
|
2016 | var toggleButtonRef = React.useRef(null);
|
2017 | var menuRef = React.useRef(null);
|
2018 | var itemRefs = React.useRef();
|
2019 | itemRefs.current = [];
|
2020 | var isInitialMount = React.useRef(true);
|
2021 | var shouldScroll = React.useRef(true);
|
2022 |
|
2023 |
|
2024 |
|
2025 |
|
2026 | React.useEffect(function () {
|
2027 | if (isInitialMount.current) {
|
2028 | return;
|
2029 | }
|
2030 |
|
2031 | setStatus(getA11yStatusMessage({
|
2032 | isOpen: isOpen,
|
2033 | items: items,
|
2034 | selectedItem: selectedItem,
|
2035 | itemToString: itemToString
|
2036 | }));
|
2037 | }, [isOpen]);
|
2038 |
|
2039 |
|
2040 | React.useEffect(function () {
|
2041 | if (isInitialMount.current) {
|
2042 | return;
|
2043 | }
|
2044 |
|
2045 | setStatus(getA11ySelectionMessage({
|
2046 | isOpen: isOpen,
|
2047 | items: items,
|
2048 | selectedItem: selectedItem,
|
2049 | itemToString: itemToString
|
2050 | }));
|
2051 | }, [selectedItem]);
|
2052 |
|
2053 |
|
2054 | React.useEffect(function () {
|
2055 |
|
2056 | if (isInitialMount.current) {
|
2057 | clearTimeout$1 = debounce(function () {
|
2058 | dispatch({
|
2059 | type: FunctionClearKeysSoFar,
|
2060 | props: props
|
2061 | });
|
2062 | }, 500);
|
2063 | }
|
2064 |
|
2065 | if (!keysSoFar) {
|
2066 | return;
|
2067 | }
|
2068 |
|
2069 | clearTimeout$1();
|
2070 | }, [keysSoFar]);
|
2071 |
|
2072 |
|
2073 | React.useEffect(function () {
|
2074 |
|
2075 | if (isInitialMount.current) {
|
2076 |
|
2077 | if (initialIsOpen || defaultIsOpen || isOpen) {
|
2078 | menuRef.current.focus();
|
2079 | }
|
2080 |
|
2081 | return;
|
2082 | }
|
2083 |
|
2084 |
|
2085 |
|
2086 | if (isOpen) {
|
2087 | menuRef.current.focus();
|
2088 | } else if (environment.document.activeElement === menuRef.current) {
|
2089 | toggleButtonRef.current.focus();
|
2090 | }
|
2091 |
|
2092 | }, [isOpen]);
|
2093 |
|
2094 |
|
2095 | React.useEffect(function () {
|
2096 | if (highlightedIndex < 0 || !isOpen || !itemRefs.current.length) {
|
2097 | return;
|
2098 | }
|
2099 |
|
2100 | if (shouldScroll.current === false) {
|
2101 | shouldScroll.current = true;
|
2102 | } else {
|
2103 | scrollIntoView(itemRefs.current[highlightedIndex], menuRef.current);
|
2104 | }
|
2105 |
|
2106 | }, [highlightedIndex]);
|
2107 |
|
2108 |
|
2109 | React.useEffect(function () {
|
2110 | isInitialMount.current = false;
|
2111 | }, []);
|
2112 |
|
2113 |
|
2114 | var menuKeyDownHandlers = {
|
2115 | ArrowDown: function ArrowDown(event) {
|
2116 | event.preventDefault();
|
2117 | dispatch({
|
2118 | type: MenuKeyDownArrowDown,
|
2119 | props: props,
|
2120 | shiftKey: event.shiftKey
|
2121 | });
|
2122 | },
|
2123 | ArrowUp: function ArrowUp(event) {
|
2124 | event.preventDefault();
|
2125 | dispatch({
|
2126 | type: MenuKeyDownArrowUp,
|
2127 | props: props,
|
2128 | shiftKey: event.shiftKey
|
2129 | });
|
2130 | },
|
2131 | Home: function Home(event) {
|
2132 | event.preventDefault();
|
2133 | dispatch({
|
2134 | type: MenuKeyDownHome,
|
2135 | props: props
|
2136 | });
|
2137 | },
|
2138 | End: function End(event) {
|
2139 | event.preventDefault();
|
2140 | dispatch({
|
2141 | type: MenuKeyDownEnd,
|
2142 | props: props
|
2143 | });
|
2144 | },
|
2145 | Escape: function Escape() {
|
2146 | dispatch({
|
2147 | type: MenuKeyDownEscape,
|
2148 | props: props
|
2149 | });
|
2150 | },
|
2151 | Enter: function Enter() {
|
2152 | dispatch({
|
2153 | type: MenuKeyDownEnter,
|
2154 | props: props
|
2155 | });
|
2156 | },
|
2157 | Tab: function Tab(event) {
|
2158 |
|
2159 |
|
2160 | if (event.shiftKey) {
|
2161 | dispatch({
|
2162 | type: MenuBlur,
|
2163 | props: props
|
2164 | });
|
2165 | }
|
2166 | }
|
2167 | };
|
2168 | var toggleButtonKeyDownHandlers = {
|
2169 | ArrowDown: function ArrowDown(event) {
|
2170 | event.preventDefault();
|
2171 | dispatch({
|
2172 | type: ToggleButtonKeyDownArrowDown,
|
2173 | props: props
|
2174 | });
|
2175 | },
|
2176 | ArrowUp: function ArrowUp(event) {
|
2177 | event.preventDefault();
|
2178 | dispatch({
|
2179 | type: ToggleButtonKeyDownArrowUp,
|
2180 | props: props
|
2181 | });
|
2182 | }
|
2183 | };
|
2184 |
|
2185 | var menuHandleKeyDown = function (event) {
|
2186 | var key = keyboardKey.getKey(event);
|
2187 |
|
2188 | if (key && menuKeyDownHandlers[key]) {
|
2189 | menuKeyDownHandlers[key](event);
|
2190 | } else if (isAcceptedCharacterKey(key)) {
|
2191 | dispatch({
|
2192 | type: MenuKeyDownCharacter,
|
2193 | key: key,
|
2194 | props: props
|
2195 | });
|
2196 | }
|
2197 | };
|
2198 |
|
2199 |
|
2200 |
|
2201 |
|
2202 | var menuHandleBlur = function (event) {
|
2203 | if (event.relatedTarget !== toggleButtonRef.current) {
|
2204 | dispatch({
|
2205 | type: MenuBlur,
|
2206 | props: props
|
2207 | });
|
2208 | }
|
2209 | };
|
2210 |
|
2211 | var toggleButtonHandleClick = function () {
|
2212 | dispatch({
|
2213 | type: ToggleButtonClick,
|
2214 | props: props
|
2215 | });
|
2216 | };
|
2217 |
|
2218 | var toggleButtonHandleKeyDown = function (event) {
|
2219 | var key = keyboardKey.getKey(event);
|
2220 |
|
2221 | if (key && toggleButtonKeyDownHandlers[key]) {
|
2222 | toggleButtonKeyDownHandlers[key](event);
|
2223 | } else if (isAcceptedCharacterKey(key)) {
|
2224 | dispatch({
|
2225 | type: ToggleButtonKeyDownCharacter,
|
2226 | key: key,
|
2227 | props: props
|
2228 | });
|
2229 | }
|
2230 | };
|
2231 |
|
2232 | var itemHandleMouseMove = function (index) {
|
2233 | if (index === highlightedIndex) {
|
2234 | return;
|
2235 | }
|
2236 |
|
2237 | shouldScroll.current = false;
|
2238 | dispatch({
|
2239 | type: ItemMouseMove,
|
2240 | props: props,
|
2241 | index: index
|
2242 | });
|
2243 | };
|
2244 |
|
2245 | var itemHandleClick = function (index) {
|
2246 | dispatch({
|
2247 | type: ItemClick,
|
2248 | props: props,
|
2249 | index: index
|
2250 | });
|
2251 | };
|
2252 |
|
2253 |
|
2254 | return {
|
2255 |
|
2256 | getToggleButtonProps: function getToggleButtonProps(_temp2) {
|
2257 | var _extends3;
|
2258 |
|
2259 | var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
2260 | onClick = _ref2.onClick,
|
2261 | onKeyDown = _ref2.onKeyDown,
|
2262 | _ref2$refKey = _ref2.refKey,
|
2263 | refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
|
2264 | ref = _ref2.ref,
|
2265 | rest = _objectWithoutPropertiesLoose(_ref2, ["onClick", "onKeyDown", "refKey", "ref"]);
|
2266 |
|
2267 | return _extends((_extends3 = {}, _extends3[refKey] = callAll(ref, function (toggleButtonNode) {
|
2268 | toggleButtonRef.current = toggleButtonNode;
|
2269 | }), _extends3.id = toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = labelId + " " + toggleButtonId, _extends3.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick), _extends3.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown), _extends3), rest);
|
2270 | },
|
2271 | getLabelProps: function getLabelProps(labelProps) {
|
2272 | return _extends({
|
2273 | id: labelId
|
2274 | }, labelProps);
|
2275 | },
|
2276 | getMenuProps: function getMenuProps(_temp) {
|
2277 | var _extends2;
|
2278 |
|
2279 | var _ref = _temp === void 0 ? {} : _temp,
|
2280 | onKeyDown = _ref.onKeyDown,
|
2281 | onBlur = _ref.onBlur,
|
2282 | _ref$refKey = _ref.refKey,
|
2283 | refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
2284 | ref = _ref.ref,
|
2285 | rest = _objectWithoutPropertiesLoose(_ref, ["onKeyDown", "onBlur", "refKey", "ref"]);
|
2286 |
|
2287 | return _extends((_extends2 = {}, _extends2[refKey] = callAll(ref, function (menuNode) {
|
2288 | menuRef.current = menuNode;
|
2289 | }), _extends2.id = menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = labelId, _extends2.tabIndex = -1, _extends2), highlightedIndex > -1 && {
|
2290 | 'aria-activedescendant': getItemId(highlightedIndex)
|
2291 | }, {
|
2292 | onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
|
2293 | onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
|
2294 | }, rest);
|
2295 | },
|
2296 | getItemProps: function getItemProps(_temp3) {
|
2297 | var _extends4;
|
2298 |
|
2299 | var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
2300 | item = _ref3.item,
|
2301 | index = _ref3.index,
|
2302 | _ref3$refKey = _ref3.refKey,
|
2303 | refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
2304 | ref = _ref3.ref,
|
2305 | onMouseMove = _ref3.onMouseMove,
|
2306 | onClick = _ref3.onClick,
|
2307 | rest = _objectWithoutPropertiesLoose(_ref3, ["item", "index", "refKey", "ref", "onMouseMove", "onClick"]);
|
2308 |
|
2309 | var itemIndex = getItemIndex(index, item, items);
|
2310 |
|
2311 | if (itemIndex < 0) {
|
2312 | throw new Error('Pass either item or item index in getItemProps!');
|
2313 | }
|
2314 |
|
2315 | return _extends((_extends4 = {}, _extends4[refKey] = callAll(ref, function (itemNode) {
|
2316 | if (itemNode) {
|
2317 | itemRefs.current.push(itemNode);
|
2318 | }
|
2319 | }), _extends4.role = 'option', _extends4), itemIndex === highlightedIndex && {
|
2320 | 'aria-selected': true
|
2321 | }, {
|
2322 | id: getItemId(itemIndex),
|
2323 | onMouseMove: callAllEventHandlers(onMouseMove, function () {
|
2324 | return itemHandleMouseMove(itemIndex);
|
2325 | }),
|
2326 | onClick: callAllEventHandlers(onClick, function () {
|
2327 | return itemHandleClick(itemIndex);
|
2328 | })
|
2329 | }, rest);
|
2330 | },
|
2331 |
|
2332 | toggleMenu: function toggleMenu() {
|
2333 | dispatch({
|
2334 | type: FunctionToggleMenu,
|
2335 | props: props
|
2336 | });
|
2337 | },
|
2338 | openMenu: function openMenu() {
|
2339 | dispatch({
|
2340 | type: FunctionOpenMenu,
|
2341 | props: props
|
2342 | });
|
2343 | },
|
2344 | closeMenu: function closeMenu() {
|
2345 | dispatch({
|
2346 | type: FunctionCloseMenu
|
2347 | });
|
2348 | },
|
2349 | setHighlightedIndex: function setHighlightedIndex(newHighlightedIndex) {
|
2350 | dispatch({
|
2351 | type: FunctionSetHighlightedIndex,
|
2352 | highlightedIndex: newHighlightedIndex
|
2353 | });
|
2354 | },
|
2355 | selectItem: function selectItem(newSelectedItem) {
|
2356 | dispatch({
|
2357 | type: FunctionSelectItem,
|
2358 | selectedItem: newSelectedItem
|
2359 | });
|
2360 | },
|
2361 | reset: function reset() {
|
2362 | dispatch({
|
2363 | type: FunctionReset,
|
2364 | props: props
|
2365 | });
|
2366 | },
|
2367 |
|
2368 | highlightedIndex: highlightedIndex,
|
2369 | isOpen: isOpen,
|
2370 | selectedItem: selectedItem
|
2371 | };
|
2372 | }
|
2373 |
|
2374 | exports.default = Downshift;
|
2375 | exports.resetIdCounter = resetIdCounter;
|
2376 | exports.useSelect = useSelect;
|