downshift 6.1.6 → 6.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -9
- package/dist/downshift.cjs.js +1703 -1637
- package/dist/downshift.esm.js +1577 -1507
- package/dist/downshift.native.cjs.js +1688 -1620
- package/dist/downshift.umd.js +1614 -1574
- package/dist/downshift.umd.js.map +1 -1
- package/dist/downshift.umd.min.js +1 -21
- package/dist/downshift.umd.min.js.map +1 -1
- package/package.json +25 -11
- package/preact/dist/downshift.cjs.js +1667 -1601
- package/preact/dist/downshift.esm.js +1577 -1507
- package/preact/dist/downshift.umd.js +1667 -1649
- package/preact/dist/downshift.umd.js.map +1 -1
- package/preact/dist/downshift.umd.min.js +1 -23
- package/preact/dist/downshift.umd.min.js.map +1 -1
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
6
|
-
var _extends = require('@babel/runtime/helpers/extends');
|
|
7
|
-
var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
|
|
8
|
-
var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
|
|
9
5
|
var PropTypes = require('prop-types');
|
|
10
6
|
var react = require('react');
|
|
11
7
|
var reactIs = require('react-is');
|
|
@@ -14,14 +10,10 @@ var tslib = require('tslib');
|
|
|
14
10
|
|
|
15
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
12
|
|
|
17
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
18
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
19
|
-
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
|
|
20
|
-
var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
|
|
21
13
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
22
14
|
var computeScrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(computeScrollIntoView);
|
|
23
15
|
|
|
24
|
-
|
|
16
|
+
let idCounter = 0;
|
|
25
17
|
/**
|
|
26
18
|
* Accepts a parameter and returns it if it's a function
|
|
27
19
|
* or a noop function if it's not. This allows us to
|
|
@@ -48,15 +40,17 @@ function scrollIntoView(node, menuNode) {
|
|
|
48
40
|
return;
|
|
49
41
|
}
|
|
50
42
|
|
|
51
|
-
|
|
43
|
+
const actions = computeScrollIntoView__default["default"](node, {
|
|
52
44
|
boundary: menuNode,
|
|
53
45
|
block: 'nearest',
|
|
54
46
|
scrollMode: 'if-needed'
|
|
55
47
|
});
|
|
56
|
-
actions.forEach(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
48
|
+
actions.forEach(_ref => {
|
|
49
|
+
let {
|
|
50
|
+
el,
|
|
51
|
+
top,
|
|
52
|
+
left
|
|
53
|
+
} = _ref;
|
|
60
54
|
el.scrollTop = top;
|
|
61
55
|
el.scrollLeft = left;
|
|
62
56
|
});
|
|
@@ -70,7 +64,7 @@ function scrollIntoView(node, menuNode) {
|
|
|
70
64
|
|
|
71
65
|
|
|
72
66
|
function isOrContainsNode(parent, child, environment) {
|
|
73
|
-
|
|
67
|
+
const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
|
|
74
68
|
return result;
|
|
75
69
|
}
|
|
76
70
|
/**
|
|
@@ -84,7 +78,7 @@ function isOrContainsNode(parent, child, environment) {
|
|
|
84
78
|
|
|
85
79
|
|
|
86
80
|
function debounce(fn, time) {
|
|
87
|
-
|
|
81
|
+
let timeoutId;
|
|
88
82
|
|
|
89
83
|
function cancel() {
|
|
90
84
|
if (timeoutId) {
|
|
@@ -98,9 +92,9 @@ function debounce(fn, time) {
|
|
|
98
92
|
}
|
|
99
93
|
|
|
100
94
|
cancel();
|
|
101
|
-
timeoutId = setTimeout(
|
|
95
|
+
timeoutId = setTimeout(() => {
|
|
102
96
|
timeoutId = null;
|
|
103
|
-
fn
|
|
97
|
+
fn(...args);
|
|
104
98
|
}, time);
|
|
105
99
|
}
|
|
106
100
|
|
|
@@ -126,9 +120,9 @@ function callAllEventHandlers() {
|
|
|
126
120
|
args[_key3 - 1] = arguments[_key3];
|
|
127
121
|
}
|
|
128
122
|
|
|
129
|
-
return fns.some(
|
|
123
|
+
return fns.some(fn => {
|
|
130
124
|
if (fn) {
|
|
131
|
-
fn
|
|
125
|
+
fn(event, ...args);
|
|
132
126
|
}
|
|
133
127
|
|
|
134
128
|
return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
|
|
@@ -141,8 +135,8 @@ function handleRefs() {
|
|
|
141
135
|
refs[_key4] = arguments[_key4];
|
|
142
136
|
}
|
|
143
137
|
|
|
144
|
-
return
|
|
145
|
-
refs.forEach(
|
|
138
|
+
return node => {
|
|
139
|
+
refs.forEach(ref => {
|
|
146
140
|
if (typeof ref === 'function') {
|
|
147
141
|
ref(node);
|
|
148
142
|
} else if (ref) {
|
|
@@ -179,9 +173,11 @@ function resetIdCounter() {
|
|
|
179
173
|
|
|
180
174
|
|
|
181
175
|
function getA11yStatusMessage$1(_ref2) {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
176
|
+
let {
|
|
177
|
+
isOpen,
|
|
178
|
+
resultCount,
|
|
179
|
+
previousResultCount
|
|
180
|
+
} = _ref2;
|
|
185
181
|
|
|
186
182
|
if (!isOpen) {
|
|
187
183
|
return '';
|
|
@@ -251,7 +247,7 @@ function requiredProp(fnName, propName) {
|
|
|
251
247
|
console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
|
|
252
248
|
}
|
|
253
249
|
|
|
254
|
-
|
|
250
|
+
const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
|
|
255
251
|
/**
|
|
256
252
|
* @param {Object} state the state object
|
|
257
253
|
* @return {Object} state that is relevant to downshift
|
|
@@ -262,8 +258,8 @@ function pickState(state) {
|
|
|
262
258
|
state = {};
|
|
263
259
|
}
|
|
264
260
|
|
|
265
|
-
|
|
266
|
-
stateKeys.forEach(
|
|
261
|
+
const result = {};
|
|
262
|
+
stateKeys.forEach(k => {
|
|
267
263
|
if (state.hasOwnProperty(k)) {
|
|
268
264
|
result[k] = state[k];
|
|
269
265
|
}
|
|
@@ -284,7 +280,7 @@ function pickState(state) {
|
|
|
284
280
|
|
|
285
281
|
|
|
286
282
|
function getState(state, props) {
|
|
287
|
-
return Object.keys(state).reduce(
|
|
283
|
+
return Object.keys(state).reduce((prevState, key) => {
|
|
288
284
|
prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
|
|
289
285
|
return prevState;
|
|
290
286
|
}, {});
|
|
@@ -311,8 +307,10 @@ function isControlledProp(props, key) {
|
|
|
311
307
|
|
|
312
308
|
|
|
313
309
|
function normalizeArrowKey(event) {
|
|
314
|
-
|
|
315
|
-
|
|
310
|
+
const {
|
|
311
|
+
key,
|
|
312
|
+
keyCode
|
|
313
|
+
} = event;
|
|
316
314
|
/* istanbul ignore next (ie) */
|
|
317
315
|
|
|
318
316
|
if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
|
|
@@ -353,13 +351,13 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
|
|
|
353
351
|
return -1;
|
|
354
352
|
}
|
|
355
353
|
|
|
356
|
-
|
|
354
|
+
const itemsLastIndex = itemCount - 1;
|
|
357
355
|
|
|
358
356
|
if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
|
|
359
357
|
baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
|
|
360
358
|
}
|
|
361
359
|
|
|
362
|
-
|
|
360
|
+
let newIndex = baseIndex + moveAmount;
|
|
363
361
|
|
|
364
362
|
if (newIndex < 0) {
|
|
365
363
|
newIndex = circular ? itemsLastIndex : 0;
|
|
@@ -367,7 +365,7 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
|
|
|
367
365
|
newIndex = circular ? 0 : itemsLastIndex;
|
|
368
366
|
}
|
|
369
367
|
|
|
370
|
-
|
|
368
|
+
const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
|
|
371
369
|
|
|
372
370
|
if (nonDisabledNewIndex === -1) {
|
|
373
371
|
return baseIndex >= itemCount ? -1 : baseIndex;
|
|
@@ -388,22 +386,22 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
|
|
|
388
386
|
|
|
389
387
|
|
|
390
388
|
function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
|
|
391
|
-
|
|
389
|
+
const currentElementNode = getItemNodeFromIndex(baseIndex);
|
|
392
390
|
|
|
393
391
|
if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
|
|
394
392
|
return baseIndex;
|
|
395
393
|
}
|
|
396
394
|
|
|
397
395
|
if (moveAmount > 0) {
|
|
398
|
-
for (
|
|
396
|
+
for (let index = baseIndex + 1; index < itemCount; index++) {
|
|
399
397
|
if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
|
|
400
398
|
return index;
|
|
401
399
|
}
|
|
402
400
|
}
|
|
403
401
|
} else {
|
|
404
|
-
for (
|
|
405
|
-
if (!getItemNodeFromIndex(
|
|
406
|
-
return
|
|
402
|
+
for (let index = baseIndex - 1; index >= 0; index--) {
|
|
403
|
+
if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
|
|
404
|
+
return index;
|
|
407
405
|
}
|
|
408
406
|
}
|
|
409
407
|
}
|
|
@@ -431,19 +429,17 @@ function targetWithinDownshift(target, downshiftElements, environment, checkActi
|
|
|
431
429
|
checkActiveElement = true;
|
|
432
430
|
}
|
|
433
431
|
|
|
434
|
-
return downshiftElements.some(
|
|
435
|
-
return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
|
|
436
|
-
});
|
|
432
|
+
return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
|
|
437
433
|
} // eslint-disable-next-line import/no-mutable-exports
|
|
438
434
|
|
|
439
435
|
|
|
440
|
-
|
|
436
|
+
let validateControlledUnchanged = noop;
|
|
441
437
|
/* istanbul ignore next */
|
|
442
438
|
|
|
443
439
|
if (process.env.NODE_ENV !== 'production') {
|
|
444
|
-
validateControlledUnchanged =
|
|
445
|
-
|
|
446
|
-
Object.keys(state).forEach(
|
|
440
|
+
validateControlledUnchanged = (state, prevProps, nextProps) => {
|
|
441
|
+
const 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";
|
|
442
|
+
Object.keys(state).forEach(propKey => {
|
|
447
443
|
if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
|
|
448
444
|
// eslint-disable-next-line no-console
|
|
449
445
|
console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
|
|
@@ -455,7 +451,7 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
455
451
|
};
|
|
456
452
|
}
|
|
457
453
|
|
|
458
|
-
|
|
454
|
+
const cleanupStatus = debounce(documentProp => {
|
|
459
455
|
getStatusDiv(documentProp).textContent = '';
|
|
460
456
|
}, 500);
|
|
461
457
|
/**
|
|
@@ -464,7 +460,7 @@ var cleanupStatus = debounce(function (documentProp) {
|
|
|
464
460
|
*/
|
|
465
461
|
|
|
466
462
|
function setStatus(status, documentProp) {
|
|
467
|
-
|
|
463
|
+
const div = getStatusDiv(documentProp);
|
|
468
464
|
|
|
469
465
|
if (!status) {
|
|
470
466
|
return;
|
|
@@ -485,7 +481,7 @@ function getStatusDiv(documentProp) {
|
|
|
485
481
|
documentProp = document;
|
|
486
482
|
}
|
|
487
483
|
|
|
488
|
-
|
|
484
|
+
let statusDiv = documentProp.getElementById('a11y-status-message');
|
|
489
485
|
|
|
490
486
|
if (statusDiv) {
|
|
491
487
|
return statusDiv;
|
|
@@ -510,23 +506,23 @@ function getStatusDiv(documentProp) {
|
|
|
510
506
|
return statusDiv;
|
|
511
507
|
}
|
|
512
508
|
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
509
|
+
const unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
|
|
510
|
+
const mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
|
|
511
|
+
const itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
|
|
512
|
+
const keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
|
|
513
|
+
const keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
|
|
514
|
+
const keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
|
|
515
|
+
const keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
|
|
516
|
+
const keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
|
|
517
|
+
const keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
|
|
518
|
+
const clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
|
|
519
|
+
const blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
|
|
520
|
+
const changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
|
|
521
|
+
const keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
|
|
522
|
+
const clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
|
|
523
|
+
const blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
|
|
524
|
+
const controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
|
|
525
|
+
const touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
|
|
530
526
|
|
|
531
527
|
var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
|
|
532
528
|
__proto__: null,
|
|
@@ -549,58 +545,45 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
|
|
|
549
545
|
touchEnd: touchEnd
|
|
550
546
|
});
|
|
551
547
|
|
|
552
|
-
|
|
553
|
-
_excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
|
|
554
|
-
_excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
|
|
555
|
-
_excluded4$1 = ["refKey", "ref"],
|
|
556
|
-
_excluded5$1 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
|
|
548
|
+
/* eslint camelcase:0 */
|
|
557
549
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
function Downshift(_props) {
|
|
550
|
+
const Downshift = /*#__PURE__*/(() => {
|
|
551
|
+
class Downshift extends react.Component {
|
|
552
|
+
constructor(_props) {
|
|
563
553
|
var _this;
|
|
564
554
|
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
_this.labelId = _this.props.labelId || _this.id + "-label";
|
|
572
|
-
_this.inputId = _this.props.inputId || _this.id + "-input";
|
|
555
|
+
super(_props);
|
|
556
|
+
_this = this;
|
|
557
|
+
this.id = this.props.id || "downshift-" + generateId();
|
|
558
|
+
this.menuId = this.props.menuId || this.id + "-menu";
|
|
559
|
+
this.labelId = this.props.labelId || this.id + "-label";
|
|
560
|
+
this.inputId = this.props.inputId || this.id + "-input";
|
|
573
561
|
|
|
574
|
-
|
|
575
|
-
return _this.id + "-item-" + index;
|
|
576
|
-
};
|
|
562
|
+
this.getItemId = this.props.getItemId || (index => this.id + "-item-" + index);
|
|
577
563
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
564
|
+
this.input = null;
|
|
565
|
+
this.items = [];
|
|
566
|
+
this.itemCount = null;
|
|
567
|
+
this.previousResultCount = 0;
|
|
568
|
+
this.timeoutIds = [];
|
|
583
569
|
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
return i !== id;
|
|
588
|
-
});
|
|
570
|
+
this.internalSetTimeout = (fn, time) => {
|
|
571
|
+
const id = setTimeout(() => {
|
|
572
|
+
this.timeoutIds = this.timeoutIds.filter(i => i !== id);
|
|
589
573
|
fn();
|
|
590
574
|
}, time);
|
|
591
|
-
|
|
592
|
-
_this.timeoutIds.push(id);
|
|
575
|
+
this.timeoutIds.push(id);
|
|
593
576
|
};
|
|
594
577
|
|
|
595
|
-
|
|
596
|
-
|
|
578
|
+
this.setItemCount = count => {
|
|
579
|
+
this.itemCount = count;
|
|
597
580
|
};
|
|
598
581
|
|
|
599
|
-
|
|
600
|
-
|
|
582
|
+
this.unsetItemCount = () => {
|
|
583
|
+
this.itemCount = null;
|
|
601
584
|
};
|
|
602
585
|
|
|
603
|
-
|
|
586
|
+
this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
|
|
604
587
|
if (highlightedIndex === void 0) {
|
|
605
588
|
highlightedIndex = _this.props.defaultHighlightedIndex;
|
|
606
589
|
}
|
|
@@ -611,71 +594,72 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
611
594
|
|
|
612
595
|
otherStateToSet = pickState(otherStateToSet);
|
|
613
596
|
|
|
614
|
-
_this.internalSetState(
|
|
615
|
-
highlightedIndex
|
|
616
|
-
|
|
597
|
+
_this.internalSetState({
|
|
598
|
+
highlightedIndex,
|
|
599
|
+
...otherStateToSet
|
|
600
|
+
});
|
|
617
601
|
};
|
|
618
602
|
|
|
619
|
-
|
|
620
|
-
|
|
603
|
+
this.clearSelection = cb => {
|
|
604
|
+
this.internalSetState({
|
|
621
605
|
selectedItem: null,
|
|
622
606
|
inputValue: '',
|
|
623
|
-
highlightedIndex:
|
|
624
|
-
isOpen:
|
|
607
|
+
highlightedIndex: this.props.defaultHighlightedIndex,
|
|
608
|
+
isOpen: this.props.defaultIsOpen
|
|
625
609
|
}, cb);
|
|
626
610
|
};
|
|
627
611
|
|
|
628
|
-
|
|
612
|
+
this.selectItem = (item, otherStateToSet, cb) => {
|
|
629
613
|
otherStateToSet = pickState(otherStateToSet);
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
614
|
+
this.internalSetState({
|
|
615
|
+
isOpen: this.props.defaultIsOpen,
|
|
616
|
+
highlightedIndex: this.props.defaultHighlightedIndex,
|
|
634
617
|
selectedItem: item,
|
|
635
|
-
inputValue:
|
|
636
|
-
|
|
618
|
+
inputValue: this.props.itemToString(item),
|
|
619
|
+
...otherStateToSet
|
|
620
|
+
}, cb);
|
|
637
621
|
};
|
|
638
622
|
|
|
639
|
-
|
|
640
|
-
|
|
623
|
+
this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
|
|
624
|
+
const item = this.items[itemIndex];
|
|
641
625
|
|
|
642
626
|
if (item == null) {
|
|
643
627
|
return;
|
|
644
628
|
}
|
|
645
629
|
|
|
646
|
-
|
|
630
|
+
this.selectItem(item, otherStateToSet, cb);
|
|
647
631
|
};
|
|
648
632
|
|
|
649
|
-
|
|
650
|
-
return
|
|
633
|
+
this.selectHighlightedItem = (otherStateToSet, cb) => {
|
|
634
|
+
return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
|
|
651
635
|
};
|
|
652
636
|
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
637
|
+
this.internalSetState = (stateToSet, cb) => {
|
|
638
|
+
let isItemSelected, onChangeArg;
|
|
639
|
+
const onStateChangeArg = {};
|
|
640
|
+
const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
|
|
657
641
|
// so someone controlling the `inputValue` state gets notified of
|
|
658
642
|
// the input change as soon as possible. This avoids issues with
|
|
659
643
|
// preserving the cursor position.
|
|
660
644
|
// See https://github.com/downshift-js/downshift/issues/217 for more info.
|
|
661
645
|
|
|
662
646
|
if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
|
|
663
|
-
|
|
647
|
+
this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
|
|
648
|
+
...stateToSet
|
|
649
|
+
});
|
|
664
650
|
}
|
|
665
651
|
|
|
666
|
-
return
|
|
667
|
-
state =
|
|
668
|
-
|
|
652
|
+
return this.setState(state => {
|
|
653
|
+
state = this.getState(state);
|
|
654
|
+
let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
|
|
669
655
|
|
|
670
|
-
newStateToSet =
|
|
656
|
+
newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
|
|
671
657
|
// what was selected before
|
|
672
658
|
// used to determine if onSelect and onChange callbacks should be called
|
|
673
659
|
|
|
674
660
|
isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
|
|
675
661
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state
|
|
662
|
+
const nextState = {}; // this is just used to tell whether the state changed
|
|
679
663
|
// and we're trying to update that state. OR if the selection has changed and we're
|
|
680
664
|
// trying to update the selection
|
|
681
665
|
|
|
@@ -684,7 +668,7 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
684
668
|
}
|
|
685
669
|
|
|
686
670
|
newStateToSet.type = newStateToSet.type || unknown;
|
|
687
|
-
Object.keys(newStateToSet).forEach(
|
|
671
|
+
Object.keys(newStateToSet).forEach(key => {
|
|
688
672
|
// onStateChangeArg should only have the state that is
|
|
689
673
|
// actually changing
|
|
690
674
|
if (state[key] !== newStateToSet[key]) {
|
|
@@ -701,81 +685,84 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
701
685
|
return;
|
|
702
686
|
}
|
|
703
687
|
|
|
704
|
-
|
|
688
|
+
newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
|
|
705
689
|
|
|
706
|
-
if (!isControlledProp(
|
|
690
|
+
if (!isControlledProp(this.props, key)) {
|
|
707
691
|
nextState[key] = newStateToSet[key];
|
|
708
692
|
}
|
|
709
693
|
}); // if stateToSet is a function, then we weren't able to call onInputValueChange
|
|
710
694
|
// earlier, so we'll call it now that we know what the inputValue state will be.
|
|
711
695
|
|
|
712
696
|
if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
|
|
713
|
-
|
|
697
|
+
this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
|
|
698
|
+
...newStateToSet
|
|
699
|
+
});
|
|
714
700
|
}
|
|
715
701
|
|
|
716
702
|
return nextState;
|
|
717
|
-
},
|
|
703
|
+
}, () => {
|
|
718
704
|
// call the provided callback if it's a function
|
|
719
705
|
cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
|
|
720
706
|
// we have relevant information to pass them.
|
|
721
707
|
|
|
722
|
-
|
|
708
|
+
const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
|
|
723
709
|
|
|
724
710
|
if (hasMoreStateThanType) {
|
|
725
|
-
|
|
711
|
+
this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
|
|
726
712
|
}
|
|
727
713
|
|
|
728
714
|
if (isItemSelected) {
|
|
729
|
-
|
|
715
|
+
this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
|
|
730
716
|
}
|
|
731
717
|
|
|
732
718
|
if (onChangeArg !== undefined) {
|
|
733
|
-
|
|
719
|
+
this.props.onChange(onChangeArg, this.getStateAndHelpers());
|
|
734
720
|
} // this is currently undocumented and therefore subject to change
|
|
735
721
|
// We'll try to not break it, but just be warned.
|
|
736
722
|
|
|
737
723
|
|
|
738
|
-
|
|
724
|
+
this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
|
|
739
725
|
});
|
|
740
726
|
};
|
|
741
727
|
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
rest = _objectWithoutPropertiesLoose__default['default'](_ref, _excluded$4);
|
|
754
|
-
|
|
755
|
-
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
756
|
-
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
757
|
-
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
758
|
-
|
|
728
|
+
this.rootRef = node => this._rootNode = node;
|
|
729
|
+
|
|
730
|
+
this.getRootProps = function (_temp, _temp2) {
|
|
731
|
+
let {
|
|
732
|
+
refKey = 'ref',
|
|
733
|
+
ref,
|
|
734
|
+
...rest
|
|
735
|
+
} = _temp === void 0 ? {} : _temp;
|
|
736
|
+
let {
|
|
737
|
+
suppressRefError = false
|
|
738
|
+
} = _temp2 === void 0 ? {} : _temp2;
|
|
759
739
|
// this is used in the render to know whether the user has called getRootProps.
|
|
760
740
|
// It uses that to know whether to apply the props automatically
|
|
761
741
|
_this.getRootProps.called = true;
|
|
762
742
|
_this.getRootProps.refKey = refKey;
|
|
763
743
|
_this.getRootProps.suppressRefError = suppressRefError;
|
|
764
744
|
|
|
765
|
-
|
|
766
|
-
|
|
745
|
+
const {
|
|
746
|
+
isOpen
|
|
747
|
+
} = _this.getState();
|
|
767
748
|
|
|
768
|
-
return
|
|
749
|
+
return {
|
|
750
|
+
[refKey]: handleRefs(ref, _this.rootRef),
|
|
751
|
+
role: 'combobox',
|
|
752
|
+
'aria-expanded': isOpen,
|
|
753
|
+
'aria-haspopup': 'listbox',
|
|
754
|
+
'aria-owns': isOpen ? _this.menuId : null,
|
|
755
|
+
'aria-labelledby': _this.labelId,
|
|
756
|
+
...rest
|
|
757
|
+
};
|
|
769
758
|
};
|
|
770
759
|
|
|
771
|
-
|
|
772
|
-
ArrowDown
|
|
773
|
-
var _this2 = this;
|
|
774
|
-
|
|
760
|
+
this.keyDownHandlers = {
|
|
761
|
+
ArrowDown(event) {
|
|
775
762
|
event.preventDefault();
|
|
776
763
|
|
|
777
764
|
if (this.getState().isOpen) {
|
|
778
|
-
|
|
765
|
+
const amount = event.shiftKey ? 5 : 1;
|
|
779
766
|
this.moveHighlightedIndex(amount, {
|
|
780
767
|
type: keyDownArrowDown
|
|
781
768
|
});
|
|
@@ -783,31 +770,27 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
783
770
|
this.internalSetState({
|
|
784
771
|
isOpen: true,
|
|
785
772
|
type: keyDownArrowDown
|
|
786
|
-
},
|
|
787
|
-
|
|
773
|
+
}, () => {
|
|
774
|
+
const itemCount = this.getItemCount();
|
|
788
775
|
|
|
789
776
|
if (itemCount > 0) {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
});
|
|
796
|
-
|
|
797
|
-
_this2.setHighlightedIndex(nextHighlightedIndex, {
|
|
777
|
+
const {
|
|
778
|
+
highlightedIndex
|
|
779
|
+
} = this.getState();
|
|
780
|
+
const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
|
|
781
|
+
this.setHighlightedIndex(nextHighlightedIndex, {
|
|
798
782
|
type: keyDownArrowDown
|
|
799
783
|
});
|
|
800
784
|
}
|
|
801
785
|
});
|
|
802
786
|
}
|
|
803
787
|
},
|
|
804
|
-
ArrowUp: function ArrowUp(event) {
|
|
805
|
-
var _this3 = this;
|
|
806
788
|
|
|
789
|
+
ArrowUp(event) {
|
|
807
790
|
event.preventDefault();
|
|
808
791
|
|
|
809
792
|
if (this.getState().isOpen) {
|
|
810
|
-
|
|
793
|
+
const amount = event.shiftKey ? -5 : -1;
|
|
811
794
|
this.moveHighlightedIndex(amount, {
|
|
812
795
|
type: keyDownArrowUp
|
|
813
796
|
});
|
|
@@ -815,37 +798,36 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
815
798
|
this.internalSetState({
|
|
816
799
|
isOpen: true,
|
|
817
800
|
type: keyDownArrowUp
|
|
818
|
-
},
|
|
819
|
-
|
|
801
|
+
}, () => {
|
|
802
|
+
const itemCount = this.getItemCount();
|
|
820
803
|
|
|
821
804
|
if (itemCount > 0) {
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
});
|
|
828
|
-
|
|
829
|
-
_this3.setHighlightedIndex(nextHighlightedIndex, {
|
|
805
|
+
const {
|
|
806
|
+
highlightedIndex
|
|
807
|
+
} = this.getState();
|
|
808
|
+
const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
|
|
809
|
+
this.setHighlightedIndex(nextHighlightedIndex, {
|
|
830
810
|
type: keyDownArrowUp
|
|
831
811
|
});
|
|
832
812
|
}
|
|
833
813
|
});
|
|
834
814
|
}
|
|
835
815
|
},
|
|
836
|
-
|
|
816
|
+
|
|
817
|
+
Enter(event) {
|
|
837
818
|
if (event.which === 229) {
|
|
838
819
|
return;
|
|
839
820
|
}
|
|
840
821
|
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
822
|
+
const {
|
|
823
|
+
isOpen,
|
|
824
|
+
highlightedIndex
|
|
825
|
+
} = this.getState();
|
|
844
826
|
|
|
845
827
|
if (isOpen && highlightedIndex != null) {
|
|
846
828
|
event.preventDefault();
|
|
847
|
-
|
|
848
|
-
|
|
829
|
+
const item = this.items[highlightedIndex];
|
|
830
|
+
const itemNode = this.getItemNodeFromIndex(highlightedIndex);
|
|
849
831
|
|
|
850
832
|
if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
|
|
851
833
|
return;
|
|
@@ -856,183 +838,191 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
856
838
|
});
|
|
857
839
|
}
|
|
858
840
|
},
|
|
859
|
-
|
|
841
|
+
|
|
842
|
+
Escape(event) {
|
|
860
843
|
event.preventDefault();
|
|
861
|
-
this.reset(
|
|
862
|
-
type: keyDownEscape
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
844
|
+
this.reset({
|
|
845
|
+
type: keyDownEscape,
|
|
846
|
+
...(!this.state.isOpen && {
|
|
847
|
+
selectedItem: null,
|
|
848
|
+
inputValue: ''
|
|
849
|
+
})
|
|
850
|
+
});
|
|
867
851
|
}
|
|
852
|
+
|
|
868
853
|
};
|
|
869
|
-
|
|
870
|
-
|
|
854
|
+
this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
|
|
855
|
+
|
|
856
|
+
' '(event) {
|
|
871
857
|
event.preventDefault();
|
|
872
858
|
this.toggleMenu({
|
|
873
859
|
type: keyDownSpaceButton
|
|
874
860
|
});
|
|
875
861
|
}
|
|
876
|
-
});
|
|
877
|
-
_this.inputKeyDownHandlers = _extends__default['default']({}, _this.keyDownHandlers, {
|
|
878
|
-
Home: function Home(event) {
|
|
879
|
-
var _this4 = this;
|
|
880
862
|
|
|
881
|
-
|
|
882
|
-
|
|
863
|
+
};
|
|
864
|
+
this.inputKeyDownHandlers = { ...this.keyDownHandlers,
|
|
865
|
+
|
|
866
|
+
Home(event) {
|
|
867
|
+
const {
|
|
868
|
+
isOpen
|
|
869
|
+
} = this.getState();
|
|
883
870
|
|
|
884
871
|
if (!isOpen) {
|
|
885
872
|
return;
|
|
886
873
|
}
|
|
887
874
|
|
|
888
875
|
event.preventDefault();
|
|
889
|
-
|
|
876
|
+
const itemCount = this.getItemCount();
|
|
890
877
|
|
|
891
878
|
if (itemCount <= 0 || !isOpen) {
|
|
892
879
|
return;
|
|
893
880
|
} // get next non-disabled starting downwards from 0 if that's disabled.
|
|
894
881
|
|
|
895
882
|
|
|
896
|
-
|
|
897
|
-
return _this4.getItemNodeFromIndex(index);
|
|
898
|
-
}, false);
|
|
883
|
+
const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
|
|
899
884
|
this.setHighlightedIndex(newHighlightedIndex, {
|
|
900
885
|
type: keyDownHome
|
|
901
886
|
});
|
|
902
887
|
},
|
|
903
|
-
End: function End(event) {
|
|
904
|
-
var _this5 = this;
|
|
905
888
|
|
|
906
|
-
|
|
907
|
-
|
|
889
|
+
End(event) {
|
|
890
|
+
const {
|
|
891
|
+
isOpen
|
|
892
|
+
} = this.getState();
|
|
908
893
|
|
|
909
894
|
if (!isOpen) {
|
|
910
895
|
return;
|
|
911
896
|
}
|
|
912
897
|
|
|
913
898
|
event.preventDefault();
|
|
914
|
-
|
|
899
|
+
const itemCount = this.getItemCount();
|
|
915
900
|
|
|
916
901
|
if (itemCount <= 0 || !isOpen) {
|
|
917
902
|
return;
|
|
918
903
|
} // get next non-disabled starting upwards from last index if that's disabled.
|
|
919
904
|
|
|
920
905
|
|
|
921
|
-
|
|
922
|
-
return _this5.getItemNodeFromIndex(index);
|
|
923
|
-
}, false);
|
|
906
|
+
const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
|
|
924
907
|
this.setHighlightedIndex(newHighlightedIndex, {
|
|
925
908
|
type: keyDownEnd
|
|
926
909
|
});
|
|
927
910
|
}
|
|
928
|
-
});
|
|
929
911
|
|
|
930
|
-
|
|
931
|
-
var _ref3 = _temp3 === void 0 ? {} : _temp3;
|
|
932
|
-
_ref3.onClick;
|
|
933
|
-
var onPress = _ref3.onPress;
|
|
934
|
-
_ref3.onKeyDown;
|
|
935
|
-
_ref3.onKeyUp;
|
|
936
|
-
_ref3.onBlur;
|
|
937
|
-
var rest = _objectWithoutPropertiesLoose__default['default'](_ref3, _excluded2$3);
|
|
938
|
-
|
|
939
|
-
var _this$getState5 = _this.getState(),
|
|
940
|
-
isOpen = _this$getState5.isOpen;
|
|
912
|
+
};
|
|
941
913
|
|
|
942
|
-
|
|
914
|
+
this.getToggleButtonProps = function (_temp3) {
|
|
915
|
+
let {
|
|
916
|
+
onClick,
|
|
917
|
+
onPress,
|
|
918
|
+
onKeyDown,
|
|
919
|
+
onKeyUp,
|
|
920
|
+
onBlur,
|
|
921
|
+
...rest
|
|
922
|
+
} = _temp3 === void 0 ? {} : _temp3;
|
|
923
|
+
|
|
924
|
+
const {
|
|
925
|
+
isOpen
|
|
926
|
+
} = _this.getState();
|
|
927
|
+
|
|
928
|
+
const enabledEventHandlers = /* istanbul ignore next (react-native) */
|
|
943
929
|
{
|
|
944
930
|
onPress: callAllEventHandlers(onPress, _this.buttonHandleClick)
|
|
945
931
|
} ;
|
|
946
|
-
|
|
947
|
-
return
|
|
932
|
+
const eventHandlers = rest.disabled ? {} : enabledEventHandlers;
|
|
933
|
+
return {
|
|
948
934
|
type: 'button',
|
|
949
935
|
role: 'button',
|
|
950
936
|
'aria-label': isOpen ? 'close menu' : 'open menu',
|
|
951
937
|
'aria-haspopup': true,
|
|
952
|
-
'data-toggle': true
|
|
953
|
-
|
|
938
|
+
'data-toggle': true,
|
|
939
|
+
...eventHandlers,
|
|
940
|
+
...rest
|
|
941
|
+
};
|
|
954
942
|
};
|
|
955
943
|
|
|
956
|
-
|
|
944
|
+
this.buttonHandleKeyUp = event => {
|
|
957
945
|
// Prevent click event from emitting in Firefox
|
|
958
946
|
event.preventDefault();
|
|
959
947
|
};
|
|
960
948
|
|
|
961
|
-
|
|
962
|
-
|
|
949
|
+
this.buttonHandleKeyDown = event => {
|
|
950
|
+
const key = normalizeArrowKey(event);
|
|
963
951
|
|
|
964
|
-
if (
|
|
965
|
-
|
|
952
|
+
if (this.buttonKeyDownHandlers[key]) {
|
|
953
|
+
this.buttonKeyDownHandlers[key].call(this, event);
|
|
966
954
|
}
|
|
967
955
|
};
|
|
968
956
|
|
|
969
|
-
|
|
957
|
+
this.buttonHandleClick = event => {
|
|
970
958
|
event.preventDefault(); // handle odd case for Safari and Firefox which
|
|
971
959
|
// if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
|
|
972
960
|
// when building for production and should therefore have no impact on production code.
|
|
973
961
|
|
|
974
962
|
|
|
975
963
|
if (process.env.NODE_ENV === 'test') {
|
|
976
|
-
|
|
964
|
+
this.toggleMenu({
|
|
977
965
|
type: clickButton
|
|
978
966
|
});
|
|
979
967
|
} else {
|
|
980
968
|
// Ensure that toggle of menu occurs after the potential blur event in iOS
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
});
|
|
985
|
-
});
|
|
969
|
+
this.internalSetTimeout(() => this.toggleMenu({
|
|
970
|
+
type: clickButton
|
|
971
|
+
}));
|
|
986
972
|
}
|
|
987
973
|
};
|
|
988
974
|
|
|
989
|
-
|
|
990
|
-
|
|
975
|
+
this.buttonHandleBlur = event => {
|
|
976
|
+
const blurTarget = event.target; // Save blur target for comparison with activeElement later
|
|
991
977
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
|
|
992
978
|
|
|
993
|
-
|
|
994
|
-
if (!
|
|
979
|
+
this.internalSetTimeout(() => {
|
|
980
|
+
if (!this.isMouseDown && (this.props.environment.document.activeElement == null || this.props.environment.document.activeElement.id !== this.inputId) && this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
|
|
995
981
|
) {
|
|
996
|
-
|
|
982
|
+
this.reset({
|
|
997
983
|
type: blurButton
|
|
998
984
|
});
|
|
999
985
|
}
|
|
1000
986
|
});
|
|
1001
987
|
};
|
|
1002
988
|
|
|
1003
|
-
|
|
1004
|
-
return
|
|
1005
|
-
htmlFor:
|
|
1006
|
-
id:
|
|
1007
|
-
|
|
989
|
+
this.getLabelProps = props => {
|
|
990
|
+
return {
|
|
991
|
+
htmlFor: this.inputId,
|
|
992
|
+
id: this.labelId,
|
|
993
|
+
...props
|
|
994
|
+
};
|
|
1008
995
|
};
|
|
1009
996
|
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
997
|
+
this.getInputProps = function (_temp4) {
|
|
998
|
+
let {
|
|
999
|
+
onKeyDown,
|
|
1000
|
+
onBlur,
|
|
1001
|
+
onChange,
|
|
1002
|
+
onInput,
|
|
1003
|
+
onChangeText,
|
|
1004
|
+
...rest
|
|
1005
|
+
} = _temp4 === void 0 ? {} : _temp4;
|
|
1006
|
+
let onChangeKey;
|
|
1007
|
+
let eventHandlers = {};
|
|
1021
1008
|
/* istanbul ignore next (preact) */
|
|
1022
1009
|
|
|
1023
1010
|
{
|
|
1024
1011
|
onChangeKey = 'onChange';
|
|
1025
1012
|
}
|
|
1026
1013
|
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1014
|
+
const {
|
|
1015
|
+
inputValue,
|
|
1016
|
+
isOpen,
|
|
1017
|
+
highlightedIndex
|
|
1018
|
+
} = _this.getState();
|
|
1031
1019
|
|
|
1032
1020
|
if (!rest.disabled) {
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1021
|
+
eventHandlers = {
|
|
1022
|
+
[onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
|
|
1023
|
+
onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
|
|
1024
|
+
onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
|
1025
|
+
};
|
|
1036
1026
|
}
|
|
1037
1027
|
/* istanbul ignore if (react-native) */
|
|
1038
1028
|
|
|
@@ -1040,18 +1030,16 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1040
1030
|
{
|
|
1041
1031
|
eventHandlers = {
|
|
1042
1032
|
onChange: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
|
|
1043
|
-
onChangeText: callAllEventHandlers(onChangeText, onInput,
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
});
|
|
1049
|
-
}),
|
|
1033
|
+
onChangeText: callAllEventHandlers(onChangeText, onInput, text => _this.inputHandleChange({
|
|
1034
|
+
nativeEvent: {
|
|
1035
|
+
text
|
|
1036
|
+
}
|
|
1037
|
+
})),
|
|
1050
1038
|
onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
|
1051
1039
|
};
|
|
1052
1040
|
}
|
|
1053
1041
|
|
|
1054
|
-
return
|
|
1042
|
+
return {
|
|
1055
1043
|
'aria-autocomplete': 'list',
|
|
1056
1044
|
'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
|
|
1057
1045
|
'aria-controls': isOpen ? _this.menuId : null,
|
|
@@ -1060,78 +1048,80 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1060
1048
|
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
1061
1049
|
autoComplete: 'off',
|
|
1062
1050
|
value: inputValue,
|
|
1063
|
-
id: _this.inputId
|
|
1064
|
-
|
|
1051
|
+
id: _this.inputId,
|
|
1052
|
+
...eventHandlers,
|
|
1053
|
+
...rest
|
|
1054
|
+
};
|
|
1065
1055
|
};
|
|
1066
1056
|
|
|
1067
|
-
|
|
1068
|
-
|
|
1057
|
+
this.inputHandleKeyDown = event => {
|
|
1058
|
+
const key = normalizeArrowKey(event);
|
|
1069
1059
|
|
|
1070
|
-
if (key &&
|
|
1071
|
-
|
|
1060
|
+
if (key && this.inputKeyDownHandlers[key]) {
|
|
1061
|
+
this.inputKeyDownHandlers[key].call(this, event);
|
|
1072
1062
|
}
|
|
1073
1063
|
};
|
|
1074
1064
|
|
|
1075
|
-
|
|
1076
|
-
|
|
1065
|
+
this.inputHandleChange = event => {
|
|
1066
|
+
this.internalSetState({
|
|
1077
1067
|
type: changeInput,
|
|
1078
1068
|
isOpen: true,
|
|
1079
1069
|
inputValue: /* istanbul ignore next (react-native) */
|
|
1080
1070
|
event.nativeEvent.text ,
|
|
1081
|
-
highlightedIndex:
|
|
1071
|
+
highlightedIndex: this.props.defaultHighlightedIndex
|
|
1082
1072
|
});
|
|
1083
1073
|
};
|
|
1084
1074
|
|
|
1085
|
-
|
|
1075
|
+
this.inputHandleBlur = () => {
|
|
1086
1076
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
|
|
1087
|
-
|
|
1088
|
-
|
|
1077
|
+
this.internalSetTimeout(() => {
|
|
1078
|
+
const 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);
|
|
1089
1079
|
|
|
1090
|
-
if (!
|
|
1091
|
-
|
|
1080
|
+
if (!this.isMouseDown && !downshiftButtonIsActive) {
|
|
1081
|
+
this.reset({
|
|
1092
1082
|
type: blurInput
|
|
1093
1083
|
});
|
|
1094
1084
|
}
|
|
1095
1085
|
});
|
|
1096
1086
|
};
|
|
1097
1087
|
|
|
1098
|
-
|
|
1099
|
-
|
|
1088
|
+
this.menuRef = node => {
|
|
1089
|
+
this._menuNode = node;
|
|
1100
1090
|
};
|
|
1101
1091
|
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
var _ref6 = _temp6 === void 0 ? {} : _temp6,
|
|
1112
|
-
_ref6$suppressRefErro = _ref6.suppressRefError,
|
|
1113
|
-
suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
|
|
1114
|
-
|
|
1092
|
+
this.getMenuProps = function (_temp5, _temp6) {
|
|
1093
|
+
let {
|
|
1094
|
+
refKey = 'ref',
|
|
1095
|
+
ref,
|
|
1096
|
+
...props
|
|
1097
|
+
} = _temp5 === void 0 ? {} : _temp5;
|
|
1098
|
+
let {
|
|
1099
|
+
suppressRefError = false
|
|
1100
|
+
} = _temp6 === void 0 ? {} : _temp6;
|
|
1115
1101
|
_this.getMenuProps.called = true;
|
|
1116
1102
|
_this.getMenuProps.refKey = refKey;
|
|
1117
1103
|
_this.getMenuProps.suppressRefError = suppressRefError;
|
|
1118
|
-
return
|
|
1104
|
+
return {
|
|
1105
|
+
[refKey]: handleRefs(ref, _this.menuRef),
|
|
1106
|
+
role: 'listbox',
|
|
1107
|
+
'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
|
|
1108
|
+
id: _this.menuId,
|
|
1109
|
+
...props
|
|
1110
|
+
};
|
|
1119
1111
|
};
|
|
1120
1112
|
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
undefined : requiredProp('getItemProps', 'item') : _ref7$item,
|
|
1134
|
-
rest = _objectWithoutPropertiesLoose__default['default'](_ref7, _excluded5$1);
|
|
1113
|
+
this.getItemProps = function (_temp7) {
|
|
1114
|
+
let {
|
|
1115
|
+
onMouseMove,
|
|
1116
|
+
onMouseDown,
|
|
1117
|
+
onClick,
|
|
1118
|
+
onPress,
|
|
1119
|
+
index,
|
|
1120
|
+
item = process.env.NODE_ENV === 'production' ?
|
|
1121
|
+
/* istanbul ignore next */
|
|
1122
|
+
undefined : requiredProp('getItemProps', 'item'),
|
|
1123
|
+
...rest
|
|
1124
|
+
} = _temp7 === void 0 ? {} : _temp7;
|
|
1135
1125
|
|
|
1136
1126
|
if (index === undefined) {
|
|
1137
1127
|
_this.items.push(item);
|
|
@@ -1141,15 +1131,15 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1141
1131
|
_this.items[index] = item;
|
|
1142
1132
|
}
|
|
1143
1133
|
|
|
1144
|
-
|
|
1134
|
+
const onSelectKey = /* istanbul ignore next (react-native) */
|
|
1145
1135
|
'onPress' ;
|
|
1146
|
-
|
|
1136
|
+
const customClickHandler = /* istanbul ignore next (react-native) */
|
|
1147
1137
|
onPress ;
|
|
1148
|
-
|
|
1138
|
+
const enabledEventHandlers = {
|
|
1149
1139
|
// onMouseMove is used over onMouseEnter here. onMouseMove
|
|
1150
1140
|
// is only triggered on actual mouse movement while onMouseEnter
|
|
1151
1141
|
// can fire on DOM changes, interrupting keyboard navigation
|
|
1152
|
-
onMouseMove: callAllEventHandlers(onMouseMove,
|
|
1142
|
+
onMouseMove: callAllEventHandlers(onMouseMove, () => {
|
|
1153
1143
|
if (index === _this.getState().highlightedIndex) {
|
|
1154
1144
|
return;
|
|
1155
1145
|
}
|
|
@@ -1164,72 +1154,81 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1164
1154
|
|
|
1165
1155
|
_this.avoidScrolling = true;
|
|
1166
1156
|
|
|
1167
|
-
_this.internalSetTimeout(
|
|
1168
|
-
return _this.avoidScrolling = false;
|
|
1169
|
-
}, 250);
|
|
1157
|
+
_this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
|
|
1170
1158
|
}),
|
|
1171
|
-
onMouseDown: callAllEventHandlers(onMouseDown,
|
|
1159
|
+
onMouseDown: callAllEventHandlers(onMouseDown, event => {
|
|
1172
1160
|
// This prevents the activeElement from being changed
|
|
1173
1161
|
// to the item so it can remain with the current activeElement
|
|
1174
1162
|
// which is a more common use case.
|
|
1175
1163
|
event.preventDefault();
|
|
1164
|
+
}),
|
|
1165
|
+
[onSelectKey]: callAllEventHandlers(customClickHandler, () => {
|
|
1166
|
+
_this.selectItemAtIndex(index, {
|
|
1167
|
+
type: clickItem
|
|
1168
|
+
});
|
|
1176
1169
|
})
|
|
1177
|
-
}
|
|
1178
|
-
_this.selectItemAtIndex(index, {
|
|
1179
|
-
type: clickItem
|
|
1180
|
-
});
|
|
1181
|
-
}), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect
|
|
1170
|
+
}; // Passing down the onMouseDown handler to prevent redirect
|
|
1182
1171
|
// of the activeElement if clicking on disabled items
|
|
1183
1172
|
|
|
1184
|
-
|
|
1173
|
+
const eventHandlers = rest.disabled ? {
|
|
1185
1174
|
onMouseDown: enabledEventHandlers.onMouseDown
|
|
1186
1175
|
} : enabledEventHandlers;
|
|
1187
|
-
return
|
|
1176
|
+
return {
|
|
1188
1177
|
id: _this.getItemId(index),
|
|
1189
1178
|
role: 'option',
|
|
1190
|
-
'aria-selected': _this.getState().highlightedIndex === index
|
|
1191
|
-
|
|
1179
|
+
'aria-selected': _this.getState().highlightedIndex === index,
|
|
1180
|
+
...eventHandlers,
|
|
1181
|
+
...rest
|
|
1182
|
+
};
|
|
1192
1183
|
};
|
|
1193
1184
|
|
|
1194
|
-
|
|
1195
|
-
|
|
1185
|
+
this.clearItems = () => {
|
|
1186
|
+
this.items = [];
|
|
1196
1187
|
};
|
|
1197
1188
|
|
|
1198
|
-
|
|
1189
|
+
this.reset = function (otherStateToSet, cb) {
|
|
1199
1190
|
if (otherStateToSet === void 0) {
|
|
1200
1191
|
otherStateToSet = {};
|
|
1201
1192
|
}
|
|
1202
1193
|
|
|
1203
1194
|
otherStateToSet = pickState(otherStateToSet);
|
|
1204
1195
|
|
|
1205
|
-
_this.internalSetState(
|
|
1206
|
-
|
|
1207
|
-
|
|
1196
|
+
_this.internalSetState(_ref => {
|
|
1197
|
+
let {
|
|
1198
|
+
selectedItem
|
|
1199
|
+
} = _ref;
|
|
1200
|
+
return {
|
|
1208
1201
|
isOpen: _this.props.defaultIsOpen,
|
|
1209
1202
|
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
1210
|
-
inputValue: _this.props.itemToString(selectedItem)
|
|
1211
|
-
|
|
1203
|
+
inputValue: _this.props.itemToString(selectedItem),
|
|
1204
|
+
...otherStateToSet
|
|
1205
|
+
};
|
|
1212
1206
|
}, cb);
|
|
1213
1207
|
};
|
|
1214
1208
|
|
|
1215
|
-
|
|
1209
|
+
this.toggleMenu = function (otherStateToSet, cb) {
|
|
1216
1210
|
if (otherStateToSet === void 0) {
|
|
1217
1211
|
otherStateToSet = {};
|
|
1218
1212
|
}
|
|
1219
1213
|
|
|
1220
1214
|
otherStateToSet = pickState(otherStateToSet);
|
|
1221
1215
|
|
|
1222
|
-
_this.internalSetState(
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1216
|
+
_this.internalSetState(_ref2 => {
|
|
1217
|
+
let {
|
|
1218
|
+
isOpen
|
|
1219
|
+
} = _ref2;
|
|
1220
|
+
return {
|
|
1221
|
+
isOpen: !isOpen,
|
|
1222
|
+
...(isOpen && {
|
|
1223
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
1224
|
+
}),
|
|
1225
|
+
...otherStateToSet
|
|
1226
|
+
};
|
|
1227
|
+
}, () => {
|
|
1228
|
+
const {
|
|
1229
|
+
isOpen,
|
|
1230
|
+
highlightedIndex
|
|
1231
|
+
} = _this.getState();
|
|
1233
1232
|
|
|
1234
1233
|
if (isOpen) {
|
|
1235
1234
|
if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
|
|
@@ -1241,70 +1240,63 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1241
1240
|
});
|
|
1242
1241
|
};
|
|
1243
1242
|
|
|
1244
|
-
|
|
1245
|
-
|
|
1243
|
+
this.openMenu = cb => {
|
|
1244
|
+
this.internalSetState({
|
|
1246
1245
|
isOpen: true
|
|
1247
1246
|
}, cb);
|
|
1248
1247
|
};
|
|
1249
1248
|
|
|
1250
|
-
|
|
1251
|
-
|
|
1249
|
+
this.closeMenu = cb => {
|
|
1250
|
+
this.internalSetState({
|
|
1252
1251
|
isOpen: false
|
|
1253
1252
|
}, cb);
|
|
1254
1253
|
};
|
|
1255
1254
|
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
_this.previousResultCount = resultCount;
|
|
1271
|
-
setStatus(status, _this.props.environment.document);
|
|
1255
|
+
this.updateStatus = debounce(() => {
|
|
1256
|
+
const state = this.getState();
|
|
1257
|
+
const item = this.items[state.highlightedIndex];
|
|
1258
|
+
const resultCount = this.getItemCount();
|
|
1259
|
+
const status = this.props.getA11yStatusMessage({
|
|
1260
|
+
itemToString: this.props.itemToString,
|
|
1261
|
+
previousResultCount: this.previousResultCount,
|
|
1262
|
+
resultCount,
|
|
1263
|
+
highlightedItem: item,
|
|
1264
|
+
...state
|
|
1265
|
+
});
|
|
1266
|
+
this.previousResultCount = resultCount;
|
|
1267
|
+
setStatus(status, this.props.environment.document);
|
|
1272
1268
|
}, 200);
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
var _state = _this.getState({
|
|
1269
|
+
// fancy destructuring + defaults + aliases
|
|
1270
|
+
// this basically says each value of state should either be set to
|
|
1271
|
+
// the initial value or the default value if the initial value is not provided
|
|
1272
|
+
const {
|
|
1273
|
+
defaultHighlightedIndex,
|
|
1274
|
+
initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
|
|
1275
|
+
defaultIsOpen,
|
|
1276
|
+
initialIsOpen: _isOpen = defaultIsOpen,
|
|
1277
|
+
initialInputValue: _inputValue = '',
|
|
1278
|
+
initialSelectedItem: _selectedItem = null
|
|
1279
|
+
} = this.props;
|
|
1280
|
+
|
|
1281
|
+
const _state = this.getState({
|
|
1287
1282
|
highlightedIndex: _highlightedIndex,
|
|
1288
1283
|
isOpen: _isOpen,
|
|
1289
1284
|
inputValue: _inputValue,
|
|
1290
1285
|
selectedItem: _selectedItem
|
|
1291
1286
|
});
|
|
1292
1287
|
|
|
1293
|
-
if (_state.selectedItem != null &&
|
|
1294
|
-
_state.inputValue =
|
|
1288
|
+
if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
|
|
1289
|
+
_state.inputValue = this.props.itemToString(_state.selectedItem);
|
|
1295
1290
|
}
|
|
1296
1291
|
|
|
1297
|
-
|
|
1298
|
-
return _this;
|
|
1292
|
+
this.state = _state;
|
|
1299
1293
|
}
|
|
1300
1294
|
|
|
1301
|
-
var _proto = Downshift.prototype;
|
|
1302
|
-
|
|
1303
1295
|
/**
|
|
1304
1296
|
* Clear all running timeouts
|
|
1305
1297
|
*/
|
|
1306
|
-
|
|
1307
|
-
this.timeoutIds.forEach(
|
|
1298
|
+
internalClearTimeouts() {
|
|
1299
|
+
this.timeoutIds.forEach(id => {
|
|
1308
1300
|
clearTimeout(id);
|
|
1309
1301
|
});
|
|
1310
1302
|
this.timeoutIds = [];
|
|
@@ -1318,22 +1310,22 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1318
1310
|
* @param {Object} stateToMerge defaults to this.state
|
|
1319
1311
|
* @return {Object} the state
|
|
1320
1312
|
*/
|
|
1321
|
-
;
|
|
1322
1313
|
|
|
1323
|
-
|
|
1314
|
+
|
|
1315
|
+
getState(stateToMerge) {
|
|
1324
1316
|
if (stateToMerge === void 0) {
|
|
1325
1317
|
stateToMerge = this.state;
|
|
1326
1318
|
}
|
|
1327
1319
|
|
|
1328
1320
|
return getState(stateToMerge, this.props);
|
|
1329
|
-
}
|
|
1321
|
+
}
|
|
1330
1322
|
|
|
1331
|
-
|
|
1323
|
+
getItemCount() {
|
|
1332
1324
|
// things read better this way. They're in priority order:
|
|
1333
1325
|
// 1. `this.itemCount`
|
|
1334
1326
|
// 2. `this.props.itemCount`
|
|
1335
1327
|
// 3. `this.items.length`
|
|
1336
|
-
|
|
1328
|
+
let itemCount = this.items.length;
|
|
1337
1329
|
|
|
1338
1330
|
if (this.itemCount != null) {
|
|
1339
1331
|
itemCount = this.itemCount;
|
|
@@ -1342,97 +1334,97 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1342
1334
|
}
|
|
1343
1335
|
|
|
1344
1336
|
return itemCount;
|
|
1345
|
-
}
|
|
1337
|
+
}
|
|
1346
1338
|
|
|
1347
|
-
|
|
1339
|
+
getItemNodeFromIndex(index) {
|
|
1348
1340
|
return this.props.environment.document.getElementById(this.getItemId(index));
|
|
1349
|
-
}
|
|
1350
|
-
|
|
1351
|
-
_proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
|
|
1352
|
-
};
|
|
1353
|
-
|
|
1354
|
-
_proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
|
|
1355
|
-
var _this6 = this;
|
|
1341
|
+
}
|
|
1356
1342
|
|
|
1357
|
-
|
|
1343
|
+
scrollHighlightedItemIntoView() {
|
|
1344
|
+
}
|
|
1358
1345
|
|
|
1359
|
-
|
|
1360
|
-
|
|
1346
|
+
moveHighlightedIndex(amount, otherStateToSet) {
|
|
1347
|
+
const itemCount = this.getItemCount();
|
|
1348
|
+
const {
|
|
1349
|
+
highlightedIndex
|
|
1350
|
+
} = this.getState();
|
|
1361
1351
|
|
|
1362
1352
|
if (itemCount > 0) {
|
|
1363
|
-
|
|
1364
|
-
return _this6.getItemNodeFromIndex(index);
|
|
1365
|
-
});
|
|
1353
|
+
const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
|
|
1366
1354
|
this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
|
|
1367
1355
|
}
|
|
1368
|
-
}
|
|
1356
|
+
}
|
|
1369
1357
|
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1358
|
+
getStateAndHelpers() {
|
|
1359
|
+
const {
|
|
1360
|
+
highlightedIndex,
|
|
1361
|
+
inputValue,
|
|
1362
|
+
selectedItem,
|
|
1363
|
+
isOpen
|
|
1364
|
+
} = this.getState();
|
|
1365
|
+
const {
|
|
1366
|
+
itemToString
|
|
1367
|
+
} = this.props;
|
|
1368
|
+
const {
|
|
1369
|
+
id
|
|
1370
|
+
} = this;
|
|
1371
|
+
const {
|
|
1372
|
+
getRootProps,
|
|
1373
|
+
getToggleButtonProps,
|
|
1374
|
+
getLabelProps,
|
|
1375
|
+
getMenuProps,
|
|
1376
|
+
getInputProps,
|
|
1377
|
+
getItemProps,
|
|
1378
|
+
openMenu,
|
|
1379
|
+
closeMenu,
|
|
1380
|
+
toggleMenu,
|
|
1381
|
+
selectItem,
|
|
1382
|
+
selectItemAtIndex,
|
|
1383
|
+
selectHighlightedItem,
|
|
1384
|
+
setHighlightedIndex,
|
|
1385
|
+
clearSelection,
|
|
1386
|
+
clearItems,
|
|
1387
|
+
reset,
|
|
1388
|
+
setItemCount,
|
|
1389
|
+
unsetItemCount,
|
|
1390
|
+
internalSetState: setState
|
|
1391
|
+
} = this;
|
|
1398
1392
|
return {
|
|
1399
1393
|
// prop getters
|
|
1400
|
-
getRootProps
|
|
1401
|
-
getToggleButtonProps
|
|
1402
|
-
getLabelProps
|
|
1403
|
-
getMenuProps
|
|
1404
|
-
getInputProps
|
|
1405
|
-
getItemProps
|
|
1394
|
+
getRootProps,
|
|
1395
|
+
getToggleButtonProps,
|
|
1396
|
+
getLabelProps,
|
|
1397
|
+
getMenuProps,
|
|
1398
|
+
getInputProps,
|
|
1399
|
+
getItemProps,
|
|
1406
1400
|
// actions
|
|
1407
|
-
reset
|
|
1408
|
-
openMenu
|
|
1409
|
-
closeMenu
|
|
1410
|
-
toggleMenu
|
|
1411
|
-
selectItem
|
|
1412
|
-
selectItemAtIndex
|
|
1413
|
-
selectHighlightedItem
|
|
1414
|
-
setHighlightedIndex
|
|
1415
|
-
clearSelection
|
|
1416
|
-
clearItems
|
|
1417
|
-
setItemCount
|
|
1418
|
-
unsetItemCount
|
|
1419
|
-
setState
|
|
1401
|
+
reset,
|
|
1402
|
+
openMenu,
|
|
1403
|
+
closeMenu,
|
|
1404
|
+
toggleMenu,
|
|
1405
|
+
selectItem,
|
|
1406
|
+
selectItemAtIndex,
|
|
1407
|
+
selectHighlightedItem,
|
|
1408
|
+
setHighlightedIndex,
|
|
1409
|
+
clearSelection,
|
|
1410
|
+
clearItems,
|
|
1411
|
+
setItemCount,
|
|
1412
|
+
unsetItemCount,
|
|
1413
|
+
setState,
|
|
1420
1414
|
// props
|
|
1421
|
-
itemToString
|
|
1415
|
+
itemToString,
|
|
1422
1416
|
// derived
|
|
1423
|
-
id
|
|
1417
|
+
id,
|
|
1424
1418
|
// state
|
|
1425
|
-
highlightedIndex
|
|
1426
|
-
inputValue
|
|
1427
|
-
isOpen
|
|
1428
|
-
selectedItem
|
|
1419
|
+
highlightedIndex,
|
|
1420
|
+
inputValue,
|
|
1421
|
+
isOpen,
|
|
1422
|
+
selectedItem
|
|
1429
1423
|
};
|
|
1430
1424
|
} //////////////////////////// ROOT
|
|
1431
|
-
;
|
|
1432
1425
|
|
|
1433
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
1434
|
-
var _this7 = this;
|
|
1435
1426
|
|
|
1427
|
+
componentDidMount() {
|
|
1436
1428
|
/* istanbul ignore if (react-native) */
|
|
1437
1429
|
if (process.env.NODE_ENV !== 'production' && !true && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
|
|
1438
1430
|
validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
|
|
@@ -1441,25 +1433,25 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1441
1433
|
|
|
1442
1434
|
|
|
1443
1435
|
{
|
|
1444
|
-
this.cleanup =
|
|
1445
|
-
|
|
1436
|
+
this.cleanup = () => {
|
|
1437
|
+
this.internalClearTimeouts();
|
|
1446
1438
|
};
|
|
1447
1439
|
}
|
|
1448
|
-
}
|
|
1449
|
-
|
|
1450
|
-
_proto.shouldScroll = function shouldScroll(prevState, prevProps) {
|
|
1451
|
-
var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
|
|
1452
|
-
currentHighlightedIndex = _ref10.highlightedIndex;
|
|
1453
|
-
|
|
1454
|
-
var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
|
|
1455
|
-
prevHighlightedIndex = _ref11.highlightedIndex;
|
|
1440
|
+
}
|
|
1456
1441
|
|
|
1457
|
-
|
|
1458
|
-
|
|
1442
|
+
shouldScroll(prevState, prevProps) {
|
|
1443
|
+
const {
|
|
1444
|
+
highlightedIndex: currentHighlightedIndex
|
|
1445
|
+
} = this.props.highlightedIndex === undefined ? this.getState() : this.props;
|
|
1446
|
+
const {
|
|
1447
|
+
highlightedIndex: prevHighlightedIndex
|
|
1448
|
+
} = prevProps.highlightedIndex === undefined ? prevState : prevProps;
|
|
1449
|
+
const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1450
|
+
const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1459
1451
|
return scrollWhenOpen || scrollWhenNavigating;
|
|
1460
|
-
}
|
|
1452
|
+
}
|
|
1461
1453
|
|
|
1462
|
-
|
|
1454
|
+
componentDidUpdate(prevProps, prevState) {
|
|
1463
1455
|
if (process.env.NODE_ENV !== 'production') {
|
|
1464
1456
|
validateControlledUnchanged(this.state, prevProps, this.props);
|
|
1465
1457
|
}
|
|
@@ -1474,14 +1466,14 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1474
1466
|
if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
|
|
1475
1467
|
this.scrollHighlightedItemIntoView();
|
|
1476
1468
|
}
|
|
1477
|
-
}
|
|
1469
|
+
}
|
|
1478
1470
|
|
|
1479
|
-
|
|
1471
|
+
componentWillUnmount() {
|
|
1480
1472
|
this.cleanup(); // avoids memory leak
|
|
1481
|
-
}
|
|
1473
|
+
}
|
|
1482
1474
|
|
|
1483
|
-
|
|
1484
|
-
|
|
1475
|
+
render() {
|
|
1476
|
+
const children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
|
|
1485
1477
|
// we clear this out each render and it will be populated again as
|
|
1486
1478
|
// getItemProps is called.
|
|
1487
1479
|
|
|
@@ -1501,7 +1493,7 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1501
1493
|
this.getLabelProps.called = false; // and something similar for getInputProps
|
|
1502
1494
|
|
|
1503
1495
|
this.getInputProps.called = false;
|
|
1504
|
-
|
|
1496
|
+
const element = unwrapArray(children(this.getStateAndHelpers()));
|
|
1505
1497
|
|
|
1506
1498
|
if (!element) {
|
|
1507
1499
|
return null;
|
|
@@ -1530,16 +1522,15 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1530
1522
|
|
|
1531
1523
|
|
|
1532
1524
|
return undefined;
|
|
1533
|
-
}
|
|
1525
|
+
}
|
|
1534
1526
|
|
|
1535
|
-
|
|
1536
|
-
}(react.Component);
|
|
1527
|
+
}
|
|
1537
1528
|
|
|
1538
1529
|
Downshift.defaultProps = {
|
|
1539
1530
|
defaultHighlightedIndex: null,
|
|
1540
1531
|
defaultIsOpen: false,
|
|
1541
1532
|
getA11yStatusMessage: getA11yStatusMessage$1,
|
|
1542
|
-
itemToString:
|
|
1533
|
+
itemToString: i => {
|
|
1543
1534
|
if (i == null) {
|
|
1544
1535
|
return '';
|
|
1545
1536
|
}
|
|
@@ -1557,72 +1548,70 @@ var Downshift = /*#__PURE__*/function () {
|
|
|
1557
1548
|
onChange: noop,
|
|
1558
1549
|
onSelect: noop,
|
|
1559
1550
|
onOuterClick: noop,
|
|
1560
|
-
selectedItemChanged:
|
|
1561
|
-
return prevItem !== item;
|
|
1562
|
-
},
|
|
1551
|
+
selectedItemChanged: (prevItem, item) => prevItem !== item,
|
|
1563
1552
|
environment:
|
|
1564
1553
|
/* istanbul ignore next (ssr) */
|
|
1565
1554
|
typeof window === 'undefined' ? {} : window,
|
|
1566
|
-
stateReducer:
|
|
1567
|
-
return stateToSet;
|
|
1568
|
-
},
|
|
1555
|
+
stateReducer: (state, stateToSet) => stateToSet,
|
|
1569
1556
|
suppressRefError: false,
|
|
1570
|
-
scrollIntoView
|
|
1557
|
+
scrollIntoView
|
|
1571
1558
|
};
|
|
1572
1559
|
Downshift.stateChangeTypes = stateChangeTypes$3;
|
|
1573
1560
|
return Downshift;
|
|
1574
|
-
}();
|
|
1561
|
+
})();
|
|
1575
1562
|
|
|
1576
1563
|
process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
|
|
1577
|
-
children: PropTypes__default[
|
|
1578
|
-
defaultHighlightedIndex: PropTypes__default[
|
|
1579
|
-
defaultIsOpen: PropTypes__default[
|
|
1580
|
-
initialHighlightedIndex: PropTypes__default[
|
|
1581
|
-
initialSelectedItem: PropTypes__default[
|
|
1582
|
-
initialInputValue: PropTypes__default[
|
|
1583
|
-
initialIsOpen: PropTypes__default[
|
|
1584
|
-
getA11yStatusMessage: PropTypes__default[
|
|
1585
|
-
itemToString: PropTypes__default[
|
|
1586
|
-
onChange: PropTypes__default[
|
|
1587
|
-
onSelect: PropTypes__default[
|
|
1588
|
-
onStateChange: PropTypes__default[
|
|
1589
|
-
onInputValueChange: PropTypes__default[
|
|
1590
|
-
onUserAction: PropTypes__default[
|
|
1591
|
-
onOuterClick: PropTypes__default[
|
|
1592
|
-
selectedItemChanged: PropTypes__default[
|
|
1593
|
-
stateReducer: PropTypes__default[
|
|
1594
|
-
itemCount: PropTypes__default[
|
|
1595
|
-
id: PropTypes__default[
|
|
1596
|
-
environment: PropTypes__default[
|
|
1597
|
-
addEventListener: PropTypes__default[
|
|
1598
|
-
removeEventListener: PropTypes__default[
|
|
1599
|
-
document: PropTypes__default[
|
|
1600
|
-
getElementById: PropTypes__default[
|
|
1601
|
-
activeElement: PropTypes__default[
|
|
1602
|
-
body: PropTypes__default[
|
|
1564
|
+
children: PropTypes__default["default"].func,
|
|
1565
|
+
defaultHighlightedIndex: PropTypes__default["default"].number,
|
|
1566
|
+
defaultIsOpen: PropTypes__default["default"].bool,
|
|
1567
|
+
initialHighlightedIndex: PropTypes__default["default"].number,
|
|
1568
|
+
initialSelectedItem: PropTypes__default["default"].any,
|
|
1569
|
+
initialInputValue: PropTypes__default["default"].string,
|
|
1570
|
+
initialIsOpen: PropTypes__default["default"].bool,
|
|
1571
|
+
getA11yStatusMessage: PropTypes__default["default"].func,
|
|
1572
|
+
itemToString: PropTypes__default["default"].func,
|
|
1573
|
+
onChange: PropTypes__default["default"].func,
|
|
1574
|
+
onSelect: PropTypes__default["default"].func,
|
|
1575
|
+
onStateChange: PropTypes__default["default"].func,
|
|
1576
|
+
onInputValueChange: PropTypes__default["default"].func,
|
|
1577
|
+
onUserAction: PropTypes__default["default"].func,
|
|
1578
|
+
onOuterClick: PropTypes__default["default"].func,
|
|
1579
|
+
selectedItemChanged: PropTypes__default["default"].func,
|
|
1580
|
+
stateReducer: PropTypes__default["default"].func,
|
|
1581
|
+
itemCount: PropTypes__default["default"].number,
|
|
1582
|
+
id: PropTypes__default["default"].string,
|
|
1583
|
+
environment: PropTypes__default["default"].shape({
|
|
1584
|
+
addEventListener: PropTypes__default["default"].func,
|
|
1585
|
+
removeEventListener: PropTypes__default["default"].func,
|
|
1586
|
+
document: PropTypes__default["default"].shape({
|
|
1587
|
+
getElementById: PropTypes__default["default"].func,
|
|
1588
|
+
activeElement: PropTypes__default["default"].any,
|
|
1589
|
+
body: PropTypes__default["default"].any
|
|
1603
1590
|
})
|
|
1604
1591
|
}),
|
|
1605
|
-
suppressRefError: PropTypes__default[
|
|
1606
|
-
scrollIntoView: PropTypes__default[
|
|
1592
|
+
suppressRefError: PropTypes__default["default"].bool,
|
|
1593
|
+
scrollIntoView: PropTypes__default["default"].func,
|
|
1607
1594
|
// things we keep in state for uncontrolled components
|
|
1608
1595
|
// but can accept as props for controlled components
|
|
1609
1596
|
|
|
1610
1597
|
/* eslint-disable react/no-unused-prop-types */
|
|
1611
|
-
selectedItem: PropTypes__default[
|
|
1612
|
-
isOpen: PropTypes__default[
|
|
1613
|
-
inputValue: PropTypes__default[
|
|
1614
|
-
highlightedIndex: PropTypes__default[
|
|
1615
|
-
labelId: PropTypes__default[
|
|
1616
|
-
inputId: PropTypes__default[
|
|
1617
|
-
menuId: PropTypes__default[
|
|
1618
|
-
getItemId: PropTypes__default[
|
|
1598
|
+
selectedItem: PropTypes__default["default"].any,
|
|
1599
|
+
isOpen: PropTypes__default["default"].bool,
|
|
1600
|
+
inputValue: PropTypes__default["default"].string,
|
|
1601
|
+
highlightedIndex: PropTypes__default["default"].number,
|
|
1602
|
+
labelId: PropTypes__default["default"].string,
|
|
1603
|
+
inputId: PropTypes__default["default"].string,
|
|
1604
|
+
menuId: PropTypes__default["default"].string,
|
|
1605
|
+
getItemId: PropTypes__default["default"].func
|
|
1619
1606
|
/* eslint-enable react/no-unused-prop-types */
|
|
1620
1607
|
|
|
1621
1608
|
} : void 0;
|
|
1622
1609
|
var Downshift$1 = Downshift;
|
|
1623
1610
|
|
|
1624
|
-
function validateGetMenuPropsCalledCorrectly(node,
|
|
1625
|
-
|
|
1611
|
+
function validateGetMenuPropsCalledCorrectly(node, _ref3) {
|
|
1612
|
+
let {
|
|
1613
|
+
refKey
|
|
1614
|
+
} = _ref3;
|
|
1626
1615
|
|
|
1627
1616
|
if (!node) {
|
|
1628
1617
|
// eslint-disable-next-line no-console
|
|
@@ -1630,10 +1619,12 @@ function validateGetMenuPropsCalledCorrectly(node, _ref12) {
|
|
|
1630
1619
|
}
|
|
1631
1620
|
}
|
|
1632
1621
|
|
|
1633
|
-
function validateGetRootPropsCalledCorrectly(element,
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1622
|
+
function validateGetRootPropsCalledCorrectly(element, _ref4) {
|
|
1623
|
+
let {
|
|
1624
|
+
refKey
|
|
1625
|
+
} = _ref4;
|
|
1626
|
+
const refKeySpecified = refKey !== 'ref';
|
|
1627
|
+
const isComposite = !isDOMElement(element);
|
|
1637
1628
|
|
|
1638
1629
|
if (isComposite && !refKeySpecified && !reactIs.isForwardRef(element)) {
|
|
1639
1630
|
// eslint-disable-next-line no-console
|
|
@@ -1649,8 +1640,7 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
|
|
|
1649
1640
|
}
|
|
1650
1641
|
}
|
|
1651
1642
|
|
|
1652
|
-
|
|
1653
|
-
var dropdownDefaultStateValues = {
|
|
1643
|
+
const dropdownDefaultStateValues = {
|
|
1654
1644
|
highlightedIndex: -1,
|
|
1655
1645
|
isOpen: false,
|
|
1656
1646
|
selectedItem: null,
|
|
@@ -1658,10 +1648,12 @@ var dropdownDefaultStateValues = {
|
|
|
1658
1648
|
};
|
|
1659
1649
|
|
|
1660
1650
|
function callOnChangeProps(action, state, newState) {
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1651
|
+
const {
|
|
1652
|
+
props,
|
|
1653
|
+
type
|
|
1654
|
+
} = action;
|
|
1655
|
+
const changes = {};
|
|
1656
|
+
Object.keys(state).forEach(key => {
|
|
1665
1657
|
invokeOnChangeHandler(key, action, state, newState);
|
|
1666
1658
|
|
|
1667
1659
|
if (newState[key] !== state[key]) {
|
|
@@ -1670,21 +1662,25 @@ function callOnChangeProps(action, state, newState) {
|
|
|
1670
1662
|
});
|
|
1671
1663
|
|
|
1672
1664
|
if (props.onStateChange && Object.keys(changes).length) {
|
|
1673
|
-
props.onStateChange(
|
|
1674
|
-
type
|
|
1675
|
-
|
|
1665
|
+
props.onStateChange({
|
|
1666
|
+
type,
|
|
1667
|
+
...changes
|
|
1668
|
+
});
|
|
1676
1669
|
}
|
|
1677
1670
|
}
|
|
1678
1671
|
|
|
1679
1672
|
function invokeOnChangeHandler(key, action, state, newState) {
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1673
|
+
const {
|
|
1674
|
+
props,
|
|
1675
|
+
type
|
|
1676
|
+
} = action;
|
|
1677
|
+
const handler = "on" + capitalizeString(key) + "Change";
|
|
1683
1678
|
|
|
1684
1679
|
if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
|
|
1685
|
-
props[handler](
|
|
1686
|
-
type
|
|
1687
|
-
|
|
1680
|
+
props[handler]({
|
|
1681
|
+
type,
|
|
1682
|
+
...newState
|
|
1683
|
+
});
|
|
1688
1684
|
}
|
|
1689
1685
|
}
|
|
1690
1686
|
/**
|
|
@@ -1708,8 +1704,10 @@ function stateReducer(s, a) {
|
|
|
1708
1704
|
|
|
1709
1705
|
|
|
1710
1706
|
function getA11ySelectionMessage(selectionParameters) {
|
|
1711
|
-
|
|
1712
|
-
|
|
1707
|
+
const {
|
|
1708
|
+
selectedItem,
|
|
1709
|
+
itemToString: itemToStringLocal
|
|
1710
|
+
} = selectionParameters;
|
|
1713
1711
|
return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
|
|
1714
1712
|
}
|
|
1715
1713
|
/**
|
|
@@ -1717,26 +1715,25 @@ function getA11ySelectionMessage(selectionParameters) {
|
|
|
1717
1715
|
*/
|
|
1718
1716
|
|
|
1719
1717
|
|
|
1720
|
-
|
|
1718
|
+
const updateA11yStatus = debounce((getA11yMessage, document) => {
|
|
1721
1719
|
setStatus(getA11yMessage(), document);
|
|
1722
1720
|
}, 200); // istanbul ignore next
|
|
1723
1721
|
|
|
1724
|
-
|
|
1722
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
|
|
1725
1723
|
|
|
1726
1724
|
function useElementIds(_ref) {
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1725
|
+
let {
|
|
1726
|
+
id = "downshift-" + generateId(),
|
|
1727
|
+
labelId,
|
|
1728
|
+
menuId,
|
|
1729
|
+
getItemId,
|
|
1730
|
+
toggleButtonId,
|
|
1731
|
+
inputId
|
|
1732
|
+
} = _ref;
|
|
1733
|
+
const elementIdsRef = react.useRef({
|
|
1735
1734
|
labelId: labelId || id + "-label",
|
|
1736
1735
|
menuId: menuId || id + "-menu",
|
|
1737
|
-
getItemId: getItemId ||
|
|
1738
|
-
return id + "-item-" + index;
|
|
1739
|
-
},
|
|
1736
|
+
getItemId: getItemId || (index => id + "-item-" + index),
|
|
1740
1737
|
toggleButtonId: toggleButtonId || id + "-toggle-button",
|
|
1741
1738
|
inputId: inputId || id + "-input"
|
|
1742
1739
|
});
|
|
@@ -1768,7 +1765,7 @@ function capitalizeString(string) {
|
|
|
1768
1765
|
}
|
|
1769
1766
|
|
|
1770
1767
|
function useLatestRef(val) {
|
|
1771
|
-
|
|
1768
|
+
const ref = react.useRef(val); // technically this is not "concurrent mode safe" because we're manipulating
|
|
1772
1769
|
// the value during render (so it's not idempotent). However, the places this
|
|
1773
1770
|
// hook is used is to support memoizing callbacks which will be called
|
|
1774
1771
|
// *during* render, so we need the latest values *during* render.
|
|
@@ -1790,30 +1787,25 @@ function useLatestRef(val) {
|
|
|
1790
1787
|
|
|
1791
1788
|
|
|
1792
1789
|
function useEnhancedReducer(reducer, initialState, props) {
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1790
|
+
const prevStateRef = react.useRef();
|
|
1791
|
+
const actionRef = react.useRef();
|
|
1792
|
+
const enhancedReducer = react.useCallback((state, action) => {
|
|
1796
1793
|
actionRef.current = action;
|
|
1797
1794
|
state = getState(state, action.props);
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
changes
|
|
1801
|
-
})
|
|
1795
|
+
const changes = reducer(state, action);
|
|
1796
|
+
const newState = action.props.stateReducer(state, { ...action,
|
|
1797
|
+
changes
|
|
1798
|
+
});
|
|
1802
1799
|
return newState;
|
|
1803
1800
|
}, [reducer]);
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
props: propsRef.current
|
|
1813
|
-
}, action));
|
|
1814
|
-
}, [propsRef]);
|
|
1815
|
-
var action = actionRef.current;
|
|
1816
|
-
react.useEffect(function () {
|
|
1801
|
+
const [state, dispatch] = react.useReducer(enhancedReducer, initialState);
|
|
1802
|
+
const propsRef = useLatestRef(props);
|
|
1803
|
+
const dispatchWithProps = react.useCallback(action => dispatch({
|
|
1804
|
+
props: propsRef.current,
|
|
1805
|
+
...action
|
|
1806
|
+
}), [propsRef]);
|
|
1807
|
+
const action = actionRef.current;
|
|
1808
|
+
react.useEffect(() => {
|
|
1817
1809
|
if (action && prevStateRef.current && prevStateRef.current !== state) {
|
|
1818
1810
|
callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
|
|
1819
1811
|
}
|
|
@@ -1834,18 +1826,15 @@ function useEnhancedReducer(reducer, initialState, props) {
|
|
|
1834
1826
|
|
|
1835
1827
|
|
|
1836
1828
|
function useControlledReducer$1(reducer, initialState, props) {
|
|
1837
|
-
|
|
1838
|
-
state = _useEnhancedReducer[0],
|
|
1839
|
-
dispatch = _useEnhancedReducer[1];
|
|
1840
|
-
|
|
1829
|
+
const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
|
|
1841
1830
|
return [getState(state, props), dispatch];
|
|
1842
1831
|
}
|
|
1843
1832
|
|
|
1844
|
-
|
|
1845
|
-
itemToString
|
|
1846
|
-
stateReducer
|
|
1847
|
-
getA11ySelectionMessage
|
|
1848
|
-
scrollIntoView
|
|
1833
|
+
const defaultProps$3 = {
|
|
1834
|
+
itemToString,
|
|
1835
|
+
stateReducer,
|
|
1836
|
+
getA11ySelectionMessage,
|
|
1837
|
+
scrollIntoView,
|
|
1849
1838
|
circularNavigation: false,
|
|
1850
1839
|
environment:
|
|
1851
1840
|
/* istanbul ignore next (ssr) */
|
|
@@ -1857,10 +1846,10 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
|
|
|
1857
1846
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1858
1847
|
}
|
|
1859
1848
|
|
|
1860
|
-
|
|
1849
|
+
const defaultValue = props["default" + capitalizeString(propKey)];
|
|
1861
1850
|
|
|
1862
|
-
if (
|
|
1863
|
-
return
|
|
1851
|
+
if (defaultValue !== undefined) {
|
|
1852
|
+
return defaultValue;
|
|
1864
1853
|
}
|
|
1865
1854
|
|
|
1866
1855
|
return defaultStateValues[propKey];
|
|
@@ -1871,38 +1860,44 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
|
|
|
1871
1860
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1872
1861
|
}
|
|
1873
1862
|
|
|
1874
|
-
|
|
1875
|
-
|
|
1863
|
+
const value = props[propKey];
|
|
1864
|
+
|
|
1865
|
+
if (value !== undefined) {
|
|
1866
|
+
return value;
|
|
1876
1867
|
}
|
|
1877
1868
|
|
|
1878
|
-
|
|
1869
|
+
const initialValue = props["initial" + capitalizeString(propKey)];
|
|
1879
1870
|
|
|
1880
|
-
if (
|
|
1881
|
-
return
|
|
1871
|
+
if (initialValue !== undefined) {
|
|
1872
|
+
return initialValue;
|
|
1882
1873
|
}
|
|
1883
1874
|
|
|
1884
1875
|
return getDefaultValue$1(props, propKey, defaultStateValues);
|
|
1885
1876
|
}
|
|
1886
1877
|
|
|
1887
1878
|
function getInitialState$2(props) {
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1879
|
+
const selectedItem = getInitialValue$1(props, 'selectedItem');
|
|
1880
|
+
const isOpen = getInitialValue$1(props, 'isOpen');
|
|
1881
|
+
const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
|
|
1882
|
+
const inputValue = getInitialValue$1(props, 'inputValue');
|
|
1892
1883
|
return {
|
|
1893
1884
|
highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
|
|
1894
|
-
isOpen
|
|
1895
|
-
selectedItem
|
|
1896
|
-
inputValue
|
|
1885
|
+
isOpen,
|
|
1886
|
+
selectedItem,
|
|
1887
|
+
inputValue
|
|
1897
1888
|
};
|
|
1898
1889
|
}
|
|
1899
1890
|
|
|
1900
1891
|
function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1892
|
+
const {
|
|
1893
|
+
items,
|
|
1894
|
+
initialHighlightedIndex,
|
|
1895
|
+
defaultHighlightedIndex
|
|
1896
|
+
} = props;
|
|
1897
|
+
const {
|
|
1898
|
+
selectedItem,
|
|
1899
|
+
highlightedIndex
|
|
1900
|
+
} = state;
|
|
1906
1901
|
|
|
1907
1902
|
if (items.length === 0) {
|
|
1908
1903
|
return -1;
|
|
@@ -1943,39 +1938,35 @@ function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
|
|
|
1943
1938
|
|
|
1944
1939
|
|
|
1945
1940
|
function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
|
|
1946
|
-
|
|
1941
|
+
const mouseAndTouchTrackersRef = react.useRef({
|
|
1947
1942
|
isMouseDown: false,
|
|
1948
1943
|
isTouchMove: false
|
|
1949
1944
|
});
|
|
1950
|
-
react.useEffect(
|
|
1945
|
+
react.useEffect(() => {
|
|
1951
1946
|
// The same strategy for checking if a click occurred inside or outside downsift
|
|
1952
1947
|
// as in downshift.js.
|
|
1953
|
-
|
|
1948
|
+
const onMouseDown = () => {
|
|
1954
1949
|
mouseAndTouchTrackersRef.current.isMouseDown = true;
|
|
1955
1950
|
};
|
|
1956
1951
|
|
|
1957
|
-
|
|
1952
|
+
const onMouseUp = event => {
|
|
1958
1953
|
mouseAndTouchTrackersRef.current.isMouseDown = false;
|
|
1959
1954
|
|
|
1960
|
-
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1961
|
-
return ref.current;
|
|
1962
|
-
}), environment)) {
|
|
1955
|
+
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
|
|
1963
1956
|
handleBlur();
|
|
1964
1957
|
}
|
|
1965
1958
|
};
|
|
1966
1959
|
|
|
1967
|
-
|
|
1960
|
+
const onTouchStart = () => {
|
|
1968
1961
|
mouseAndTouchTrackersRef.current.isTouchMove = false;
|
|
1969
1962
|
};
|
|
1970
1963
|
|
|
1971
|
-
|
|
1964
|
+
const onTouchMove = () => {
|
|
1972
1965
|
mouseAndTouchTrackersRef.current.isTouchMove = true;
|
|
1973
1966
|
};
|
|
1974
1967
|
|
|
1975
|
-
|
|
1976
|
-
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1977
|
-
return ref.current;
|
|
1978
|
-
}), environment, false)) {
|
|
1968
|
+
const onTouchEnd = event => {
|
|
1969
|
+
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
|
|
1979
1970
|
handleBlur();
|
|
1980
1971
|
}
|
|
1981
1972
|
};
|
|
@@ -1999,9 +1990,7 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
|
|
|
1999
1990
|
// eslint-disable-next-line import/no-mutable-exports
|
|
2000
1991
|
|
|
2001
1992
|
|
|
2002
|
-
|
|
2003
|
-
return noop;
|
|
2004
|
-
};
|
|
1993
|
+
let useGetterPropsCalledChecker = () => noop;
|
|
2005
1994
|
/**
|
|
2006
1995
|
* Custom hook that checks if getter props are called correctly.
|
|
2007
1996
|
*
|
|
@@ -2013,20 +2002,20 @@ var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
|
2013
2002
|
|
|
2014
2003
|
|
|
2015
2004
|
if (process.env.NODE_ENV !== 'production') {
|
|
2016
|
-
useGetterPropsCalledChecker = function
|
|
2017
|
-
|
|
2005
|
+
useGetterPropsCalledChecker = function () {
|
|
2006
|
+
const isInitialMountRef = react.useRef(true);
|
|
2018
2007
|
|
|
2019
2008
|
for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2020
2009
|
propKeys[_key] = arguments[_key];
|
|
2021
2010
|
}
|
|
2022
2011
|
|
|
2023
|
-
|
|
2012
|
+
const getterPropsCalledRef = react.useRef(propKeys.reduce((acc, propKey) => {
|
|
2024
2013
|
acc[propKey] = {};
|
|
2025
2014
|
return acc;
|
|
2026
2015
|
}, {}));
|
|
2027
|
-
react.useEffect(
|
|
2028
|
-
Object.keys(getterPropsCalledRef.current).forEach(
|
|
2029
|
-
|
|
2016
|
+
react.useEffect(() => {
|
|
2017
|
+
Object.keys(getterPropsCalledRef.current).forEach(propKey => {
|
|
2018
|
+
const propCallInfo = getterPropsCalledRef.current[propKey];
|
|
2030
2019
|
|
|
2031
2020
|
if (isInitialMountRef.current) {
|
|
2032
2021
|
if (!Object.keys(propCallInfo).length) {
|
|
@@ -2036,9 +2025,11 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
2036
2025
|
}
|
|
2037
2026
|
}
|
|
2038
2027
|
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2028
|
+
const {
|
|
2029
|
+
suppressRefError,
|
|
2030
|
+
refKey,
|
|
2031
|
+
elementRef
|
|
2032
|
+
} = propCallInfo;
|
|
2042
2033
|
|
|
2043
2034
|
if ((!elementRef || !elementRef.current) && !suppressRefError) {
|
|
2044
2035
|
// eslint-disable-next-line no-console
|
|
@@ -2047,11 +2038,11 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
2047
2038
|
});
|
|
2048
2039
|
isInitialMountRef.current = false;
|
|
2049
2040
|
});
|
|
2050
|
-
|
|
2041
|
+
const setGetterPropCallInfo = react.useCallback((propKey, suppressRefError, refKey, elementRef) => {
|
|
2051
2042
|
getterPropsCalledRef.current[propKey] = {
|
|
2052
|
-
suppressRefError
|
|
2053
|
-
refKey
|
|
2054
|
-
elementRef
|
|
2043
|
+
suppressRefError,
|
|
2044
|
+
refKey,
|
|
2045
|
+
elementRef
|
|
2055
2046
|
};
|
|
2056
2047
|
}, []);
|
|
2057
2048
|
return setGetterPropCallInfo;
|
|
@@ -2059,39 +2050,41 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
2059
2050
|
}
|
|
2060
2051
|
|
|
2061
2052
|
function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2053
|
+
let {
|
|
2054
|
+
isInitialMount,
|
|
2055
|
+
highlightedIndex,
|
|
2056
|
+
items,
|
|
2057
|
+
environment,
|
|
2058
|
+
...rest
|
|
2059
|
+
} = _ref2;
|
|
2068
2060
|
// Sets a11y status message on changes in state.
|
|
2069
|
-
react.useEffect(
|
|
2061
|
+
react.useEffect(() => {
|
|
2070
2062
|
if (isInitialMount || true) {
|
|
2071
2063
|
return;
|
|
2072
2064
|
}
|
|
2073
2065
|
|
|
2074
|
-
updateA11yStatus(
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
}, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2066
|
+
updateA11yStatus(() => getA11yMessage({
|
|
2067
|
+
highlightedIndex,
|
|
2068
|
+
highlightedItem: items[highlightedIndex],
|
|
2069
|
+
resultCount: items.length,
|
|
2070
|
+
...rest
|
|
2071
|
+
}), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2081
2072
|
}, dependencyArray);
|
|
2082
2073
|
}
|
|
2083
2074
|
|
|
2084
2075
|
function useScrollIntoView(_ref3) {
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2076
|
+
let {
|
|
2077
|
+
highlightedIndex,
|
|
2078
|
+
isOpen,
|
|
2079
|
+
itemRefs,
|
|
2080
|
+
getItemNodeFromIndex,
|
|
2081
|
+
menuElement,
|
|
2082
|
+
scrollIntoView: scrollIntoViewProp
|
|
2083
|
+
} = _ref3;
|
|
2091
2084
|
// used not to scroll on highlight by mouse.
|
|
2092
|
-
|
|
2085
|
+
const shouldScrollRef = react.useRef(true); // Scroll on highlighted item if change comes from keyboard.
|
|
2093
2086
|
|
|
2094
|
-
useIsomorphicLayoutEffect(
|
|
2087
|
+
useIsomorphicLayoutEffect(() => {
|
|
2095
2088
|
if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
|
|
2096
2089
|
return;
|
|
2097
2090
|
}
|
|
@@ -2107,17 +2100,19 @@ function useScrollIntoView(_ref3) {
|
|
|
2107
2100
|
} // eslint-disable-next-line import/no-mutable-exports
|
|
2108
2101
|
|
|
2109
2102
|
|
|
2110
|
-
|
|
2103
|
+
let useControlPropsValidator = noop;
|
|
2111
2104
|
/* istanbul ignore next */
|
|
2112
2105
|
|
|
2113
2106
|
if (process.env.NODE_ENV !== 'production') {
|
|
2114
|
-
useControlPropsValidator =
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2107
|
+
useControlPropsValidator = _ref4 => {
|
|
2108
|
+
let {
|
|
2109
|
+
isInitialMount,
|
|
2110
|
+
props,
|
|
2111
|
+
state
|
|
2112
|
+
} = _ref4;
|
|
2118
2113
|
// used for checking when props are moving from controlled to uncontrolled.
|
|
2119
|
-
|
|
2120
|
-
react.useEffect(
|
|
2114
|
+
const prevPropsRef = react.useRef(props);
|
|
2115
|
+
react.useEffect(() => {
|
|
2121
2116
|
if (isInitialMount) {
|
|
2122
2117
|
return;
|
|
2123
2118
|
}
|
|
@@ -2131,9 +2126,11 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
2131
2126
|
/* eslint-disable complexity */
|
|
2132
2127
|
|
|
2133
2128
|
function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2129
|
+
const {
|
|
2130
|
+
type,
|
|
2131
|
+
props
|
|
2132
|
+
} = action;
|
|
2133
|
+
let changes;
|
|
2137
2134
|
|
|
2138
2135
|
switch (type) {
|
|
2139
2136
|
case stateChangeTypes.ItemMouseMove:
|
|
@@ -2194,7 +2191,9 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
|
2194
2191
|
throw new Error('Reducer called without proper action type.');
|
|
2195
2192
|
}
|
|
2196
2193
|
|
|
2197
|
-
return
|
|
2194
|
+
return { ...state,
|
|
2195
|
+
...changes
|
|
2196
|
+
};
|
|
2198
2197
|
}
|
|
2199
2198
|
/* eslint-enable complexity */
|
|
2200
2199
|
|
|
@@ -2217,37 +2216,37 @@ function getItemIndexByCharacterKey(_a) {
|
|
|
2217
2216
|
return highlightedIndex;
|
|
2218
2217
|
}
|
|
2219
2218
|
var propTypes$2 = {
|
|
2220
|
-
items: PropTypes__default[
|
|
2221
|
-
itemToString: PropTypes__default[
|
|
2222
|
-
getA11yStatusMessage: PropTypes__default[
|
|
2223
|
-
getA11ySelectionMessage: PropTypes__default[
|
|
2224
|
-
circularNavigation: PropTypes__default[
|
|
2225
|
-
highlightedIndex: PropTypes__default[
|
|
2226
|
-
defaultHighlightedIndex: PropTypes__default[
|
|
2227
|
-
initialHighlightedIndex: PropTypes__default[
|
|
2228
|
-
isOpen: PropTypes__default[
|
|
2229
|
-
defaultIsOpen: PropTypes__default[
|
|
2230
|
-
initialIsOpen: PropTypes__default[
|
|
2231
|
-
selectedItem: PropTypes__default[
|
|
2232
|
-
initialSelectedItem: PropTypes__default[
|
|
2233
|
-
defaultSelectedItem: PropTypes__default[
|
|
2234
|
-
id: PropTypes__default[
|
|
2235
|
-
labelId: PropTypes__default[
|
|
2236
|
-
menuId: PropTypes__default[
|
|
2237
|
-
getItemId: PropTypes__default[
|
|
2238
|
-
toggleButtonId: PropTypes__default[
|
|
2239
|
-
stateReducer: PropTypes__default[
|
|
2240
|
-
onSelectedItemChange: PropTypes__default[
|
|
2241
|
-
onHighlightedIndexChange: PropTypes__default[
|
|
2242
|
-
onStateChange: PropTypes__default[
|
|
2243
|
-
onIsOpenChange: PropTypes__default[
|
|
2244
|
-
environment: PropTypes__default[
|
|
2245
|
-
addEventListener: PropTypes__default[
|
|
2246
|
-
removeEventListener: PropTypes__default[
|
|
2247
|
-
document: PropTypes__default[
|
|
2248
|
-
getElementById: PropTypes__default[
|
|
2249
|
-
activeElement: PropTypes__default[
|
|
2250
|
-
body: PropTypes__default[
|
|
2219
|
+
items: PropTypes__default["default"].array.isRequired,
|
|
2220
|
+
itemToString: PropTypes__default["default"].func,
|
|
2221
|
+
getA11yStatusMessage: PropTypes__default["default"].func,
|
|
2222
|
+
getA11ySelectionMessage: PropTypes__default["default"].func,
|
|
2223
|
+
circularNavigation: PropTypes__default["default"].bool,
|
|
2224
|
+
highlightedIndex: PropTypes__default["default"].number,
|
|
2225
|
+
defaultHighlightedIndex: PropTypes__default["default"].number,
|
|
2226
|
+
initialHighlightedIndex: PropTypes__default["default"].number,
|
|
2227
|
+
isOpen: PropTypes__default["default"].bool,
|
|
2228
|
+
defaultIsOpen: PropTypes__default["default"].bool,
|
|
2229
|
+
initialIsOpen: PropTypes__default["default"].bool,
|
|
2230
|
+
selectedItem: PropTypes__default["default"].any,
|
|
2231
|
+
initialSelectedItem: PropTypes__default["default"].any,
|
|
2232
|
+
defaultSelectedItem: PropTypes__default["default"].any,
|
|
2233
|
+
id: PropTypes__default["default"].string,
|
|
2234
|
+
labelId: PropTypes__default["default"].string,
|
|
2235
|
+
menuId: PropTypes__default["default"].string,
|
|
2236
|
+
getItemId: PropTypes__default["default"].func,
|
|
2237
|
+
toggleButtonId: PropTypes__default["default"].string,
|
|
2238
|
+
stateReducer: PropTypes__default["default"].func,
|
|
2239
|
+
onSelectedItemChange: PropTypes__default["default"].func,
|
|
2240
|
+
onHighlightedIndexChange: PropTypes__default["default"].func,
|
|
2241
|
+
onStateChange: PropTypes__default["default"].func,
|
|
2242
|
+
onIsOpenChange: PropTypes__default["default"].func,
|
|
2243
|
+
environment: PropTypes__default["default"].shape({
|
|
2244
|
+
addEventListener: PropTypes__default["default"].func,
|
|
2245
|
+
removeEventListener: PropTypes__default["default"].func,
|
|
2246
|
+
document: PropTypes__default["default"].shape({
|
|
2247
|
+
getElementById: PropTypes__default["default"].func,
|
|
2248
|
+
activeElement: PropTypes__default["default"].any,
|
|
2249
|
+
body: PropTypes__default["default"].any
|
|
2251
2250
|
})
|
|
2252
2251
|
})
|
|
2253
2252
|
};
|
|
@@ -2268,7 +2267,7 @@ function getA11yStatusMessage(_a) {
|
|
|
2268
2267
|
return 'No results are available.';
|
|
2269
2268
|
}
|
|
2270
2269
|
if (resultCount !== previousResultCount) {
|
|
2271
|
-
return resultCount
|
|
2270
|
+
return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.");
|
|
2272
2271
|
}
|
|
2273
2272
|
return '';
|
|
2274
2273
|
}
|
|
@@ -2278,33 +2277,33 @@ var validatePropTypes$2 = noop;
|
|
|
2278
2277
|
/* istanbul ignore next */
|
|
2279
2278
|
if (process.env.NODE_ENV !== 'production') {
|
|
2280
2279
|
validatePropTypes$2 = function (options, caller) {
|
|
2281
|
-
PropTypes__default[
|
|
2280
|
+
PropTypes__default["default"].checkPropTypes(propTypes$2, options, 'prop', caller.name);
|
|
2282
2281
|
};
|
|
2283
2282
|
}
|
|
2284
2283
|
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2284
|
+
const MenuKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_down__' : 0;
|
|
2285
|
+
const MenuKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_up__' : 1;
|
|
2286
|
+
const MenuKeyDownEscape = process.env.NODE_ENV !== "production" ? '__menu_keydown_escape__' : 2;
|
|
2287
|
+
const MenuKeyDownHome = process.env.NODE_ENV !== "production" ? '__menu_keydown_home__' : 3;
|
|
2288
|
+
const MenuKeyDownEnd = process.env.NODE_ENV !== "production" ? '__menu_keydown_end__' : 4;
|
|
2289
|
+
const MenuKeyDownEnter = process.env.NODE_ENV !== "production" ? '__menu_keydown_enter__' : 5;
|
|
2290
|
+
const MenuKeyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__menu_keydown_space_button__' : 6;
|
|
2291
|
+
const MenuKeyDownCharacter = process.env.NODE_ENV !== "production" ? '__menu_keydown_character__' : 7;
|
|
2292
|
+
const MenuBlur = process.env.NODE_ENV !== "production" ? '__menu_blur__' : 8;
|
|
2293
|
+
const MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 9;
|
|
2294
|
+
const ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 10;
|
|
2295
|
+
const ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 11;
|
|
2296
|
+
const ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 12;
|
|
2297
|
+
const ToggleButtonKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_down__' : 13;
|
|
2298
|
+
const ToggleButtonKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_up__' : 14;
|
|
2299
|
+
const ToggleButtonKeyDownCharacter = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_character__' : 15;
|
|
2300
|
+
const FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 16;
|
|
2301
|
+
const FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 17;
|
|
2302
|
+
const FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 18;
|
|
2303
|
+
const FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 19;
|
|
2304
|
+
const FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 20;
|
|
2305
|
+
const FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 21;
|
|
2306
|
+
const FunctionReset$2 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 22;
|
|
2308
2307
|
|
|
2309
2308
|
var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
2310
2309
|
__proto__: null,
|
|
@@ -2336,10 +2335,12 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
|
2336
2335
|
/* eslint-disable complexity */
|
|
2337
2336
|
|
|
2338
2337
|
function downshiftSelectReducer(state, action) {
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2338
|
+
const {
|
|
2339
|
+
type,
|
|
2340
|
+
props,
|
|
2341
|
+
shiftKey
|
|
2342
|
+
} = action;
|
|
2343
|
+
let changes;
|
|
2343
2344
|
|
|
2344
2345
|
switch (type) {
|
|
2345
2346
|
case ItemClick$1:
|
|
@@ -2352,20 +2353,21 @@ function downshiftSelectReducer(state, action) {
|
|
|
2352
2353
|
|
|
2353
2354
|
case ToggleButtonKeyDownCharacter:
|
|
2354
2355
|
{
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2356
|
+
const lowercasedKey = action.key;
|
|
2357
|
+
const inputValue = "" + state.inputValue + lowercasedKey;
|
|
2358
|
+
const itemIndex = getItemIndexByCharacterKey({
|
|
2358
2359
|
keysSoFar: inputValue,
|
|
2359
2360
|
highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
|
|
2360
2361
|
items: props.items,
|
|
2361
2362
|
itemToString: props.itemToString,
|
|
2362
2363
|
getItemNodeFromIndex: action.getItemNodeFromIndex
|
|
2363
2364
|
});
|
|
2364
|
-
changes =
|
|
2365
|
-
inputValue
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2365
|
+
changes = {
|
|
2366
|
+
inputValue,
|
|
2367
|
+
...(itemIndex >= 0 && {
|
|
2368
|
+
selectedItem: props.items[itemIndex]
|
|
2369
|
+
})
|
|
2370
|
+
};
|
|
2369
2371
|
}
|
|
2370
2372
|
break;
|
|
2371
2373
|
|
|
@@ -2385,12 +2387,13 @@ function downshiftSelectReducer(state, action) {
|
|
|
2385
2387
|
|
|
2386
2388
|
case MenuKeyDownEnter:
|
|
2387
2389
|
case MenuKeyDownSpaceButton:
|
|
2388
|
-
changes =
|
|
2390
|
+
changes = {
|
|
2389
2391
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2390
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2392
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
|
|
2393
|
+
...(state.highlightedIndex >= 0 && {
|
|
2394
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2395
|
+
})
|
|
2396
|
+
};
|
|
2394
2397
|
break;
|
|
2395
2398
|
|
|
2396
2399
|
case MenuKeyDownHome:
|
|
@@ -2421,22 +2424,21 @@ function downshiftSelectReducer(state, action) {
|
|
|
2421
2424
|
|
|
2422
2425
|
case MenuKeyDownCharacter:
|
|
2423
2426
|
{
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
var highlightedIndex = getItemIndexByCharacterKey({
|
|
2429
|
-
keysSoFar: _inputValue,
|
|
2427
|
+
const lowercasedKey = action.key;
|
|
2428
|
+
const inputValue = "" + state.inputValue + lowercasedKey;
|
|
2429
|
+
const highlightedIndex = getItemIndexByCharacterKey({
|
|
2430
|
+
keysSoFar: inputValue,
|
|
2430
2431
|
highlightedIndex: state.highlightedIndex,
|
|
2431
2432
|
items: props.items,
|
|
2432
2433
|
itemToString: props.itemToString,
|
|
2433
2434
|
getItemNodeFromIndex: action.getItemNodeFromIndex
|
|
2434
2435
|
});
|
|
2435
|
-
changes =
|
|
2436
|
-
inputValue
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2436
|
+
changes = {
|
|
2437
|
+
inputValue,
|
|
2438
|
+
...(highlightedIndex >= 0 && {
|
|
2439
|
+
highlightedIndex
|
|
2440
|
+
})
|
|
2441
|
+
};
|
|
2440
2442
|
}
|
|
2441
2443
|
break;
|
|
2442
2444
|
|
|
@@ -2462,13 +2464,13 @@ function downshiftSelectReducer(state, action) {
|
|
|
2462
2464
|
return downshiftCommonReducer(state, action, stateChangeTypes$2);
|
|
2463
2465
|
}
|
|
2464
2466
|
|
|
2465
|
-
return
|
|
2467
|
+
return { ...state,
|
|
2468
|
+
...changes
|
|
2469
|
+
};
|
|
2466
2470
|
}
|
|
2467
2471
|
/* eslint-enable complexity */
|
|
2468
2472
|
|
|
2469
|
-
|
|
2470
|
-
_excluded2$2 = ["onClick", "onKeyDown", "refKey", "ref"],
|
|
2471
|
-
_excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref"];
|
|
2473
|
+
/* eslint-disable max-statements */
|
|
2472
2474
|
useSelect.stateChangeTypes = stateChangeTypes$2;
|
|
2473
2475
|
|
|
2474
2476
|
function useSelect(userProps) {
|
|
@@ -2478,91 +2480,92 @@ function useSelect(userProps) {
|
|
|
2478
2480
|
|
|
2479
2481
|
validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
|
|
2480
2482
|
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2483
|
+
const props = { ...defaultProps$2,
|
|
2484
|
+
...userProps
|
|
2485
|
+
};
|
|
2486
|
+
const {
|
|
2487
|
+
items,
|
|
2488
|
+
scrollIntoView,
|
|
2489
|
+
environment,
|
|
2490
|
+
initialIsOpen,
|
|
2491
|
+
defaultIsOpen,
|
|
2492
|
+
itemToString,
|
|
2493
|
+
getA11ySelectionMessage,
|
|
2494
|
+
getA11yStatusMessage
|
|
2495
|
+
} = props; // Initial state depending on controlled props.
|
|
2496
|
+
|
|
2497
|
+
const initialState = getInitialState$2(props);
|
|
2498
|
+
const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
|
|
2499
|
+
const {
|
|
2500
|
+
isOpen,
|
|
2501
|
+
highlightedIndex,
|
|
2502
|
+
selectedItem,
|
|
2503
|
+
inputValue
|
|
2504
|
+
} = state; // Element efs.
|
|
2505
|
+
|
|
2506
|
+
const toggleButtonRef = react.useRef(null);
|
|
2507
|
+
const menuRef = react.useRef(null);
|
|
2508
|
+
const itemRefs = react.useRef({}); // used not to trigger menu blur action in some scenarios.
|
|
2509
|
+
|
|
2510
|
+
const shouldBlurRef = react.useRef(true); // used to keep the inputValue clearTimeout object between renders.
|
|
2511
|
+
|
|
2512
|
+
const clearTimeoutRef = react.useRef(null); // prevent id re-generation between renders.
|
|
2513
|
+
|
|
2514
|
+
const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
|
|
2515
|
+
|
|
2516
|
+
const previousResultCountRef = react.useRef();
|
|
2517
|
+
const isInitialMountRef = react.useRef(true); // utility callback to get item element.
|
|
2518
|
+
|
|
2519
|
+
const latest = useLatestRef({
|
|
2520
|
+
state,
|
|
2521
|
+
props
|
|
2519
2522
|
}); // Some utils.
|
|
2520
2523
|
|
|
2521
|
-
|
|
2522
|
-
return itemRefs.current[elementIds.getItemId(index)];
|
|
2523
|
-
}, [elementIds]); // Effects.
|
|
2524
|
+
const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
|
|
2524
2525
|
// Sets a11y status message on changes in state.
|
|
2525
2526
|
|
|
2526
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items],
|
|
2527
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
2527
2528
|
isInitialMount: isInitialMountRef.current,
|
|
2528
2529
|
previousResultCount: previousResultCountRef.current,
|
|
2529
|
-
items
|
|
2530
|
-
environment
|
|
2531
|
-
itemToString
|
|
2532
|
-
|
|
2530
|
+
items,
|
|
2531
|
+
environment,
|
|
2532
|
+
itemToString,
|
|
2533
|
+
...state
|
|
2534
|
+
}); // Sets a11y status message on changes in selectedItem.
|
|
2533
2535
|
|
|
2534
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem],
|
|
2536
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
2535
2537
|
isInitialMount: isInitialMountRef.current,
|
|
2536
2538
|
previousResultCount: previousResultCountRef.current,
|
|
2537
|
-
items
|
|
2538
|
-
environment
|
|
2539
|
-
itemToString
|
|
2540
|
-
|
|
2539
|
+
items,
|
|
2540
|
+
environment,
|
|
2541
|
+
itemToString,
|
|
2542
|
+
...state
|
|
2543
|
+
}); // Scroll on highlighted item if change comes from keyboard.
|
|
2541
2544
|
|
|
2542
|
-
|
|
2545
|
+
const shouldScrollRef = useScrollIntoView({
|
|
2543
2546
|
menuElement: menuRef.current,
|
|
2544
|
-
highlightedIndex
|
|
2545
|
-
isOpen
|
|
2546
|
-
itemRefs
|
|
2547
|
-
scrollIntoView
|
|
2548
|
-
getItemNodeFromIndex
|
|
2547
|
+
highlightedIndex,
|
|
2548
|
+
isOpen,
|
|
2549
|
+
itemRefs,
|
|
2550
|
+
scrollIntoView,
|
|
2551
|
+
getItemNodeFromIndex
|
|
2549
2552
|
}); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
|
|
2550
2553
|
|
|
2551
|
-
react.useEffect(
|
|
2554
|
+
react.useEffect(() => {
|
|
2552
2555
|
// init the clean function here as we need access to dispatch.
|
|
2553
|
-
clearTimeoutRef.current = debounce(
|
|
2556
|
+
clearTimeoutRef.current = debounce(outerDispatch => {
|
|
2554
2557
|
outerDispatch({
|
|
2555
2558
|
type: FunctionSetInputValue$1,
|
|
2556
2559
|
inputValue: ''
|
|
2557
2560
|
});
|
|
2558
2561
|
}, 500); // Cancel any pending debounced calls on mount
|
|
2559
2562
|
|
|
2560
|
-
return
|
|
2563
|
+
return () => {
|
|
2561
2564
|
clearTimeoutRef.current.cancel();
|
|
2562
2565
|
};
|
|
2563
2566
|
}, []); // Invokes the keysSoFar callback set up above.
|
|
2564
2567
|
|
|
2565
|
-
react.useEffect(
|
|
2568
|
+
react.useEffect(() => {
|
|
2566
2569
|
if (!inputValue) {
|
|
2567
2570
|
return;
|
|
2568
2571
|
}
|
|
@@ -2571,12 +2574,12 @@ function useSelect(userProps) {
|
|
|
2571
2574
|
}, [dispatch, inputValue]);
|
|
2572
2575
|
useControlPropsValidator({
|
|
2573
2576
|
isInitialMount: isInitialMountRef.current,
|
|
2574
|
-
props
|
|
2575
|
-
state
|
|
2577
|
+
props,
|
|
2578
|
+
state
|
|
2576
2579
|
});
|
|
2577
2580
|
/* Controls the focus on the menu or the toggle button. */
|
|
2578
2581
|
|
|
2579
|
-
react.useEffect(
|
|
2582
|
+
react.useEffect(() => {
|
|
2580
2583
|
// Don't focus menu on first render.
|
|
2581
2584
|
if (isInitialMountRef.current) {
|
|
2582
2585
|
// Unless it was initialised as open.
|
|
@@ -2607,7 +2610,7 @@ function useSelect(userProps) {
|
|
|
2607
2610
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2608
2611
|
|
|
2609
2612
|
}, [isOpen]);
|
|
2610
|
-
react.useEffect(
|
|
2613
|
+
react.useEffect(() => {
|
|
2611
2614
|
if (isInitialMountRef.current) {
|
|
2612
2615
|
return;
|
|
2613
2616
|
}
|
|
@@ -2615,180 +2618,180 @@ function useSelect(userProps) {
|
|
|
2615
2618
|
previousResultCountRef.current = items.length;
|
|
2616
2619
|
}); // Add mouse/touch events to document.
|
|
2617
2620
|
|
|
2618
|
-
|
|
2621
|
+
const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
|
|
2619
2622
|
dispatch({
|
|
2620
2623
|
type: MenuBlur
|
|
2621
2624
|
});
|
|
2622
2625
|
});
|
|
2623
|
-
|
|
2626
|
+
const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
|
|
2624
2627
|
|
|
2625
|
-
react.useEffect(
|
|
2628
|
+
react.useEffect(() => {
|
|
2626
2629
|
isInitialMountRef.current = false;
|
|
2627
2630
|
}, []); // Reset itemRefs on close.
|
|
2628
2631
|
|
|
2629
|
-
react.useEffect(
|
|
2632
|
+
react.useEffect(() => {
|
|
2630
2633
|
if (!isOpen) {
|
|
2631
2634
|
itemRefs.current = {};
|
|
2632
2635
|
}
|
|
2633
2636
|
}, [isOpen]); // Event handler functions.
|
|
2634
2637
|
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
},
|
|
2645
|
-
ArrowUp: function ArrowUp(event) {
|
|
2646
|
-
event.preventDefault();
|
|
2647
|
-
dispatch({
|
|
2648
|
-
type: ToggleButtonKeyDownArrowUp,
|
|
2649
|
-
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2650
|
-
shiftKey: event.shiftKey
|
|
2651
|
-
});
|
|
2652
|
-
}
|
|
2653
|
-
};
|
|
2654
|
-
}, [dispatch, getItemNodeFromIndex]);
|
|
2655
|
-
var menuKeyDownHandlers = react.useMemo(function () {
|
|
2656
|
-
return {
|
|
2657
|
-
ArrowDown: function ArrowDown(event) {
|
|
2658
|
-
event.preventDefault();
|
|
2659
|
-
dispatch({
|
|
2660
|
-
type: MenuKeyDownArrowDown,
|
|
2661
|
-
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2662
|
-
shiftKey: event.shiftKey
|
|
2663
|
-
});
|
|
2664
|
-
},
|
|
2665
|
-
ArrowUp: function ArrowUp(event) {
|
|
2666
|
-
event.preventDefault();
|
|
2667
|
-
dispatch({
|
|
2668
|
-
type: MenuKeyDownArrowUp,
|
|
2669
|
-
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2670
|
-
shiftKey: event.shiftKey
|
|
2671
|
-
});
|
|
2672
|
-
},
|
|
2673
|
-
Home: function Home(event) {
|
|
2674
|
-
event.preventDefault();
|
|
2675
|
-
dispatch({
|
|
2676
|
-
type: MenuKeyDownHome,
|
|
2677
|
-
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2678
|
-
});
|
|
2679
|
-
},
|
|
2680
|
-
End: function End(event) {
|
|
2681
|
-
event.preventDefault();
|
|
2682
|
-
dispatch({
|
|
2683
|
-
type: MenuKeyDownEnd,
|
|
2684
|
-
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2685
|
-
});
|
|
2686
|
-
},
|
|
2687
|
-
Escape: function Escape() {
|
|
2688
|
-
dispatch({
|
|
2689
|
-
type: MenuKeyDownEscape
|
|
2690
|
-
});
|
|
2691
|
-
},
|
|
2692
|
-
Enter: function Enter(event) {
|
|
2693
|
-
event.preventDefault();
|
|
2694
|
-
dispatch({
|
|
2695
|
-
type: MenuKeyDownEnter
|
|
2696
|
-
});
|
|
2697
|
-
},
|
|
2698
|
-
' ': function _(event) {
|
|
2699
|
-
event.preventDefault();
|
|
2700
|
-
dispatch({
|
|
2701
|
-
type: MenuKeyDownSpaceButton
|
|
2702
|
-
});
|
|
2703
|
-
}
|
|
2704
|
-
};
|
|
2705
|
-
}, [dispatch, getItemNodeFromIndex]); // Action functions.
|
|
2638
|
+
const toggleButtonKeyDownHandlers = react.useMemo(() => ({
|
|
2639
|
+
ArrowDown(event) {
|
|
2640
|
+
event.preventDefault();
|
|
2641
|
+
dispatch({
|
|
2642
|
+
type: ToggleButtonKeyDownArrowDown,
|
|
2643
|
+
getItemNodeFromIndex,
|
|
2644
|
+
shiftKey: event.shiftKey
|
|
2645
|
+
});
|
|
2646
|
+
},
|
|
2706
2647
|
|
|
2707
|
-
|
|
2648
|
+
ArrowUp(event) {
|
|
2649
|
+
event.preventDefault();
|
|
2650
|
+
dispatch({
|
|
2651
|
+
type: ToggleButtonKeyDownArrowUp,
|
|
2652
|
+
getItemNodeFromIndex,
|
|
2653
|
+
shiftKey: event.shiftKey
|
|
2654
|
+
});
|
|
2655
|
+
}
|
|
2656
|
+
|
|
2657
|
+
}), [dispatch, getItemNodeFromIndex]);
|
|
2658
|
+
const menuKeyDownHandlers = react.useMemo(() => ({
|
|
2659
|
+
ArrowDown(event) {
|
|
2660
|
+
event.preventDefault();
|
|
2661
|
+
dispatch({
|
|
2662
|
+
type: MenuKeyDownArrowDown,
|
|
2663
|
+
getItemNodeFromIndex,
|
|
2664
|
+
shiftKey: event.shiftKey
|
|
2665
|
+
});
|
|
2666
|
+
},
|
|
2667
|
+
|
|
2668
|
+
ArrowUp(event) {
|
|
2669
|
+
event.preventDefault();
|
|
2670
|
+
dispatch({
|
|
2671
|
+
type: MenuKeyDownArrowUp,
|
|
2672
|
+
getItemNodeFromIndex,
|
|
2673
|
+
shiftKey: event.shiftKey
|
|
2674
|
+
});
|
|
2675
|
+
},
|
|
2676
|
+
|
|
2677
|
+
Home(event) {
|
|
2678
|
+
event.preventDefault();
|
|
2679
|
+
dispatch({
|
|
2680
|
+
type: MenuKeyDownHome,
|
|
2681
|
+
getItemNodeFromIndex
|
|
2682
|
+
});
|
|
2683
|
+
},
|
|
2684
|
+
|
|
2685
|
+
End(event) {
|
|
2686
|
+
event.preventDefault();
|
|
2687
|
+
dispatch({
|
|
2688
|
+
type: MenuKeyDownEnd,
|
|
2689
|
+
getItemNodeFromIndex
|
|
2690
|
+
});
|
|
2691
|
+
},
|
|
2692
|
+
|
|
2693
|
+
Escape() {
|
|
2694
|
+
dispatch({
|
|
2695
|
+
type: MenuKeyDownEscape
|
|
2696
|
+
});
|
|
2697
|
+
},
|
|
2698
|
+
|
|
2699
|
+
Enter(event) {
|
|
2700
|
+
event.preventDefault();
|
|
2701
|
+
dispatch({
|
|
2702
|
+
type: MenuKeyDownEnter
|
|
2703
|
+
});
|
|
2704
|
+
},
|
|
2705
|
+
|
|
2706
|
+
' '(event) {
|
|
2707
|
+
event.preventDefault();
|
|
2708
|
+
dispatch({
|
|
2709
|
+
type: MenuKeyDownSpaceButton
|
|
2710
|
+
});
|
|
2711
|
+
}
|
|
2712
|
+
|
|
2713
|
+
}), [dispatch, getItemNodeFromIndex]); // Action functions.
|
|
2714
|
+
|
|
2715
|
+
const toggleMenu = react.useCallback(() => {
|
|
2708
2716
|
dispatch({
|
|
2709
2717
|
type: FunctionToggleMenu$1
|
|
2710
2718
|
});
|
|
2711
2719
|
}, [dispatch]);
|
|
2712
|
-
|
|
2720
|
+
const closeMenu = react.useCallback(() => {
|
|
2713
2721
|
dispatch({
|
|
2714
2722
|
type: FunctionCloseMenu$1
|
|
2715
2723
|
});
|
|
2716
2724
|
}, [dispatch]);
|
|
2717
|
-
|
|
2725
|
+
const openMenu = react.useCallback(() => {
|
|
2718
2726
|
dispatch({
|
|
2719
2727
|
type: FunctionOpenMenu$1
|
|
2720
2728
|
});
|
|
2721
2729
|
}, [dispatch]);
|
|
2722
|
-
|
|
2730
|
+
const setHighlightedIndex = react.useCallback(newHighlightedIndex => {
|
|
2723
2731
|
dispatch({
|
|
2724
2732
|
type: FunctionSetHighlightedIndex$1,
|
|
2725
2733
|
highlightedIndex: newHighlightedIndex
|
|
2726
2734
|
});
|
|
2727
2735
|
}, [dispatch]);
|
|
2728
|
-
|
|
2736
|
+
const selectItem = react.useCallback(newSelectedItem => {
|
|
2729
2737
|
dispatch({
|
|
2730
2738
|
type: FunctionSelectItem$1,
|
|
2731
2739
|
selectedItem: newSelectedItem
|
|
2732
2740
|
});
|
|
2733
2741
|
}, [dispatch]);
|
|
2734
|
-
|
|
2742
|
+
const reset = react.useCallback(() => {
|
|
2735
2743
|
dispatch({
|
|
2736
2744
|
type: FunctionReset$2
|
|
2737
2745
|
});
|
|
2738
2746
|
}, [dispatch]);
|
|
2739
|
-
|
|
2747
|
+
const setInputValue = react.useCallback(newInputValue => {
|
|
2740
2748
|
dispatch({
|
|
2741
2749
|
type: FunctionSetInputValue$1,
|
|
2742
2750
|
inputValue: newInputValue
|
|
2743
2751
|
});
|
|
2744
2752
|
}, [dispatch]); // Getter functions.
|
|
2745
2753
|
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
var latestState = latest.current.state;
|
|
2769
|
-
|
|
2770
|
-
var menuHandleKeyDown = function menuHandleKeyDown(event) {
|
|
2771
|
-
var key = normalizeArrowKey(event);
|
|
2754
|
+
const getLabelProps = react.useCallback(labelProps => ({
|
|
2755
|
+
id: elementIds.labelId,
|
|
2756
|
+
htmlFor: elementIds.toggleButtonId,
|
|
2757
|
+
...labelProps
|
|
2758
|
+
}), [elementIds]);
|
|
2759
|
+
const getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
2760
|
+
let {
|
|
2761
|
+
onMouseLeave,
|
|
2762
|
+
refKey = 'ref',
|
|
2763
|
+
onKeyDown,
|
|
2764
|
+
onBlur,
|
|
2765
|
+
ref,
|
|
2766
|
+
...rest
|
|
2767
|
+
} = _temp === void 0 ? {} : _temp;
|
|
2768
|
+
let {
|
|
2769
|
+
suppressRefError = false
|
|
2770
|
+
} = _temp2 === void 0 ? {} : _temp2;
|
|
2771
|
+
const latestState = latest.current.state;
|
|
2772
|
+
|
|
2773
|
+
const menuHandleKeyDown = event => {
|
|
2774
|
+
const key = normalizeArrowKey(event);
|
|
2772
2775
|
|
|
2773
2776
|
if (key && menuKeyDownHandlers[key]) {
|
|
2774
2777
|
menuKeyDownHandlers[key](event);
|
|
2775
2778
|
} else if (isAcceptedCharacterKey(key)) {
|
|
2776
2779
|
dispatch({
|
|
2777
2780
|
type: MenuKeyDownCharacter,
|
|
2778
|
-
key
|
|
2779
|
-
getItemNodeFromIndex
|
|
2781
|
+
key,
|
|
2782
|
+
getItemNodeFromIndex
|
|
2780
2783
|
});
|
|
2781
2784
|
}
|
|
2782
2785
|
};
|
|
2783
2786
|
|
|
2784
|
-
|
|
2787
|
+
const menuHandleBlur = () => {
|
|
2785
2788
|
// if the blur was a result of selection, we don't trigger this action.
|
|
2786
2789
|
if (shouldBlurRef.current === false) {
|
|
2787
2790
|
shouldBlurRef.current = true;
|
|
2788
2791
|
return;
|
|
2789
2792
|
}
|
|
2790
2793
|
|
|
2791
|
-
|
|
2794
|
+
const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
|
|
2792
2795
|
/* istanbul ignore else */
|
|
2793
2796
|
|
|
2794
2797
|
if (shouldBlur) {
|
|
@@ -2798,61 +2801,72 @@ function useSelect(userProps) {
|
|
|
2798
2801
|
}
|
|
2799
2802
|
};
|
|
2800
2803
|
|
|
2801
|
-
|
|
2804
|
+
const menuHandleMouseLeave = () => {
|
|
2802
2805
|
dispatch({
|
|
2803
2806
|
type: MenuMouseLeave$1
|
|
2804
2807
|
});
|
|
2805
2808
|
};
|
|
2806
2809
|
|
|
2807
2810
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
2808
|
-
return
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2811
|
+
return {
|
|
2812
|
+
[refKey]: handleRefs(ref, menuNode => {
|
|
2813
|
+
menuRef.current = menuNode;
|
|
2814
|
+
}),
|
|
2815
|
+
id: elementIds.menuId,
|
|
2816
|
+
role: 'listbox',
|
|
2817
|
+
'aria-labelledby': elementIds.labelId,
|
|
2818
|
+
tabIndex: -1,
|
|
2819
|
+
...(latestState.isOpen && latestState.highlightedIndex > -1 && {
|
|
2820
|
+
'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
|
|
2821
|
+
}),
|
|
2813
2822
|
onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
|
|
2814
2823
|
onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
|
|
2815
|
-
onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
|
|
2816
|
-
|
|
2824
|
+
onBlur: callAllEventHandlers(onBlur, menuHandleBlur),
|
|
2825
|
+
...rest
|
|
2826
|
+
};
|
|
2817
2827
|
}, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
|
|
2832
|
-
|
|
2833
|
-
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
2828
|
+
const getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
|
|
2829
|
+
let {
|
|
2830
|
+
onClick,
|
|
2831
|
+
onKeyDown,
|
|
2832
|
+
refKey = 'ref',
|
|
2833
|
+
ref,
|
|
2834
|
+
...rest
|
|
2835
|
+
} = _temp3 === void 0 ? {} : _temp3;
|
|
2836
|
+
let {
|
|
2837
|
+
suppressRefError = false
|
|
2838
|
+
} = _temp4 === void 0 ? {} : _temp4;
|
|
2839
|
+
|
|
2840
|
+
const toggleButtonHandleClick = () => {
|
|
2834
2841
|
dispatch({
|
|
2835
2842
|
type: ToggleButtonClick$1
|
|
2836
2843
|
});
|
|
2837
2844
|
};
|
|
2838
2845
|
|
|
2839
|
-
|
|
2840
|
-
|
|
2846
|
+
const toggleButtonHandleKeyDown = event => {
|
|
2847
|
+
const key = normalizeArrowKey(event);
|
|
2841
2848
|
|
|
2842
2849
|
if (key && toggleButtonKeyDownHandlers[key]) {
|
|
2843
2850
|
toggleButtonKeyDownHandlers[key](event);
|
|
2844
2851
|
} else if (isAcceptedCharacterKey(key)) {
|
|
2845
2852
|
dispatch({
|
|
2846
2853
|
type: ToggleButtonKeyDownCharacter,
|
|
2847
|
-
key
|
|
2848
|
-
getItemNodeFromIndex
|
|
2854
|
+
key,
|
|
2855
|
+
getItemNodeFromIndex
|
|
2849
2856
|
});
|
|
2850
2857
|
}
|
|
2851
2858
|
};
|
|
2852
2859
|
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2860
|
+
const toggleProps = {
|
|
2861
|
+
[refKey]: handleRefs(ref, toggleButtonNode => {
|
|
2862
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
2863
|
+
}),
|
|
2864
|
+
id: elementIds.toggleButtonId,
|
|
2865
|
+
'aria-haspopup': 'listbox',
|
|
2866
|
+
'aria-expanded': latest.current.state.isOpen,
|
|
2867
|
+
'aria-labelledby': elementIds.labelId + " " + elementIds.toggleButtonId,
|
|
2868
|
+
...rest
|
|
2869
|
+
};
|
|
2856
2870
|
|
|
2857
2871
|
if (!rest.disabled) {
|
|
2858
2872
|
toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
|
|
@@ -2862,24 +2876,22 @@ function useSelect(userProps) {
|
|
|
2862
2876
|
setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
|
|
2863
2877
|
return toggleProps;
|
|
2864
2878
|
}, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
2879
|
+
const getItemProps = react.useCallback(function (_temp5) {
|
|
2880
|
+
let {
|
|
2881
|
+
item,
|
|
2882
|
+
index,
|
|
2883
|
+
onMouseMove,
|
|
2884
|
+
onClick,
|
|
2885
|
+
refKey = 'ref',
|
|
2886
|
+
ref,
|
|
2887
|
+
...rest
|
|
2888
|
+
} = _temp5 === void 0 ? {} : _temp5;
|
|
2889
|
+
const {
|
|
2890
|
+
state: latestState,
|
|
2891
|
+
props: latestProps
|
|
2892
|
+
} = latest.current;
|
|
2893
|
+
|
|
2894
|
+
const itemHandleMouseMove = () => {
|
|
2883
2895
|
if (index === latestState.highlightedIndex) {
|
|
2884
2896
|
return;
|
|
2885
2897
|
}
|
|
@@ -2887,32 +2899,34 @@ function useSelect(userProps) {
|
|
|
2887
2899
|
shouldScrollRef.current = false;
|
|
2888
2900
|
dispatch({
|
|
2889
2901
|
type: ItemMouseMove$1,
|
|
2890
|
-
index
|
|
2902
|
+
index
|
|
2891
2903
|
});
|
|
2892
2904
|
};
|
|
2893
2905
|
|
|
2894
|
-
|
|
2906
|
+
const itemHandleClick = () => {
|
|
2895
2907
|
dispatch({
|
|
2896
2908
|
type: ItemClick$1,
|
|
2897
|
-
index
|
|
2909
|
+
index
|
|
2898
2910
|
});
|
|
2899
2911
|
};
|
|
2900
2912
|
|
|
2901
|
-
|
|
2913
|
+
const itemIndex = getItemIndex(index, item, latestProps.items);
|
|
2902
2914
|
|
|
2903
2915
|
if (itemIndex < 0) {
|
|
2904
2916
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
2905
2917
|
}
|
|
2906
2918
|
|
|
2907
|
-
|
|
2919
|
+
const itemProps = {
|
|
2908
2920
|
role: 'option',
|
|
2909
2921
|
'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
|
|
2910
|
-
id: elementIds.getItemId(itemIndex)
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2922
|
+
id: elementIds.getItemId(itemIndex),
|
|
2923
|
+
[refKey]: handleRefs(ref, itemNode => {
|
|
2924
|
+
if (itemNode) {
|
|
2925
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
2926
|
+
}
|
|
2927
|
+
}),
|
|
2928
|
+
...rest
|
|
2929
|
+
};
|
|
2916
2930
|
|
|
2917
2931
|
if (!rest.disabled) {
|
|
2918
2932
|
itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
|
|
@@ -2923,46 +2937,46 @@ function useSelect(userProps) {
|
|
|
2923
2937
|
}, [dispatch, latest, shouldScrollRef, elementIds]);
|
|
2924
2938
|
return {
|
|
2925
2939
|
// prop getters.
|
|
2926
|
-
getToggleButtonProps
|
|
2927
|
-
getLabelProps
|
|
2928
|
-
getMenuProps
|
|
2929
|
-
getItemProps
|
|
2940
|
+
getToggleButtonProps,
|
|
2941
|
+
getLabelProps,
|
|
2942
|
+
getMenuProps,
|
|
2943
|
+
getItemProps,
|
|
2930
2944
|
// actions.
|
|
2931
|
-
toggleMenu
|
|
2932
|
-
openMenu
|
|
2933
|
-
closeMenu
|
|
2934
|
-
setHighlightedIndex
|
|
2935
|
-
selectItem
|
|
2936
|
-
reset
|
|
2937
|
-
setInputValue
|
|
2945
|
+
toggleMenu,
|
|
2946
|
+
openMenu,
|
|
2947
|
+
closeMenu,
|
|
2948
|
+
setHighlightedIndex,
|
|
2949
|
+
selectItem,
|
|
2950
|
+
reset,
|
|
2951
|
+
setInputValue,
|
|
2938
2952
|
// state.
|
|
2939
|
-
highlightedIndex
|
|
2940
|
-
isOpen
|
|
2941
|
-
selectedItem
|
|
2942
|
-
inputValue
|
|
2953
|
+
highlightedIndex,
|
|
2954
|
+
isOpen,
|
|
2955
|
+
selectedItem,
|
|
2956
|
+
inputValue
|
|
2943
2957
|
};
|
|
2944
2958
|
}
|
|
2945
2959
|
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2960
|
+
const InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
|
|
2961
|
+
const InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
|
|
2962
|
+
const InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
|
|
2963
|
+
const InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
|
|
2964
|
+
const InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
|
|
2965
|
+
const InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
|
|
2966
|
+
const InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
|
|
2967
|
+
const InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
|
|
2968
|
+
const MenuMouseLeave = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
|
|
2969
|
+
const ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
|
|
2970
|
+
const ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
|
|
2971
|
+
const ToggleButtonClick = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
|
|
2972
|
+
const FunctionToggleMenu = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
|
|
2973
|
+
const FunctionOpenMenu = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
|
|
2974
|
+
const FunctionCloseMenu = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
|
|
2975
|
+
const FunctionSetHighlightedIndex = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
|
|
2976
|
+
const FunctionSelectItem = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
|
|
2977
|
+
const FunctionSetInputValue = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
|
|
2978
|
+
const FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
|
|
2979
|
+
const ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 19;
|
|
2966
2980
|
|
|
2967
2981
|
var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
2968
2982
|
__proto__: null,
|
|
@@ -2989,56 +3003,60 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
|
2989
3003
|
});
|
|
2990
3004
|
|
|
2991
3005
|
function getInitialState$1(props) {
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
3006
|
+
const initialState = getInitialState$2(props);
|
|
3007
|
+
const {
|
|
3008
|
+
selectedItem
|
|
3009
|
+
} = initialState;
|
|
3010
|
+
let {
|
|
3011
|
+
inputValue
|
|
3012
|
+
} = initialState;
|
|
2995
3013
|
|
|
2996
3014
|
if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
|
|
2997
3015
|
inputValue = props.itemToString(selectedItem);
|
|
2998
3016
|
}
|
|
2999
3017
|
|
|
3000
|
-
return
|
|
3001
|
-
inputValue
|
|
3002
|
-
}
|
|
3018
|
+
return { ...initialState,
|
|
3019
|
+
inputValue
|
|
3020
|
+
};
|
|
3003
3021
|
}
|
|
3004
3022
|
|
|
3005
|
-
|
|
3006
|
-
items: PropTypes__default[
|
|
3007
|
-
itemToString: PropTypes__default[
|
|
3008
|
-
getA11yStatusMessage: PropTypes__default[
|
|
3009
|
-
getA11ySelectionMessage: PropTypes__default[
|
|
3010
|
-
circularNavigation: PropTypes__default[
|
|
3011
|
-
highlightedIndex: PropTypes__default[
|
|
3012
|
-
defaultHighlightedIndex: PropTypes__default[
|
|
3013
|
-
initialHighlightedIndex: PropTypes__default[
|
|
3014
|
-
isOpen: PropTypes__default[
|
|
3015
|
-
defaultIsOpen: PropTypes__default[
|
|
3016
|
-
initialIsOpen: PropTypes__default[
|
|
3017
|
-
selectedItem: PropTypes__default[
|
|
3018
|
-
initialSelectedItem: PropTypes__default[
|
|
3019
|
-
defaultSelectedItem: PropTypes__default[
|
|
3020
|
-
inputValue: PropTypes__default[
|
|
3021
|
-
defaultInputValue: PropTypes__default[
|
|
3022
|
-
initialInputValue: PropTypes__default[
|
|
3023
|
-
id: PropTypes__default[
|
|
3024
|
-
labelId: PropTypes__default[
|
|
3025
|
-
menuId: PropTypes__default[
|
|
3026
|
-
getItemId: PropTypes__default[
|
|
3027
|
-
inputId: PropTypes__default[
|
|
3028
|
-
toggleButtonId: PropTypes__default[
|
|
3029
|
-
stateReducer: PropTypes__default[
|
|
3030
|
-
onSelectedItemChange: PropTypes__default[
|
|
3031
|
-
onHighlightedIndexChange: PropTypes__default[
|
|
3032
|
-
onStateChange: PropTypes__default[
|
|
3033
|
-
onIsOpenChange: PropTypes__default[
|
|
3034
|
-
onInputValueChange: PropTypes__default[
|
|
3035
|
-
environment: PropTypes__default[
|
|
3036
|
-
addEventListener: PropTypes__default[
|
|
3037
|
-
removeEventListener: PropTypes__default[
|
|
3038
|
-
document: PropTypes__default[
|
|
3039
|
-
getElementById: PropTypes__default[
|
|
3040
|
-
activeElement: PropTypes__default[
|
|
3041
|
-
body: PropTypes__default[
|
|
3023
|
+
const propTypes$1 = {
|
|
3024
|
+
items: PropTypes__default["default"].array.isRequired,
|
|
3025
|
+
itemToString: PropTypes__default["default"].func,
|
|
3026
|
+
getA11yStatusMessage: PropTypes__default["default"].func,
|
|
3027
|
+
getA11ySelectionMessage: PropTypes__default["default"].func,
|
|
3028
|
+
circularNavigation: PropTypes__default["default"].bool,
|
|
3029
|
+
highlightedIndex: PropTypes__default["default"].number,
|
|
3030
|
+
defaultHighlightedIndex: PropTypes__default["default"].number,
|
|
3031
|
+
initialHighlightedIndex: PropTypes__default["default"].number,
|
|
3032
|
+
isOpen: PropTypes__default["default"].bool,
|
|
3033
|
+
defaultIsOpen: PropTypes__default["default"].bool,
|
|
3034
|
+
initialIsOpen: PropTypes__default["default"].bool,
|
|
3035
|
+
selectedItem: PropTypes__default["default"].any,
|
|
3036
|
+
initialSelectedItem: PropTypes__default["default"].any,
|
|
3037
|
+
defaultSelectedItem: PropTypes__default["default"].any,
|
|
3038
|
+
inputValue: PropTypes__default["default"].string,
|
|
3039
|
+
defaultInputValue: PropTypes__default["default"].string,
|
|
3040
|
+
initialInputValue: PropTypes__default["default"].string,
|
|
3041
|
+
id: PropTypes__default["default"].string,
|
|
3042
|
+
labelId: PropTypes__default["default"].string,
|
|
3043
|
+
menuId: PropTypes__default["default"].string,
|
|
3044
|
+
getItemId: PropTypes__default["default"].func,
|
|
3045
|
+
inputId: PropTypes__default["default"].string,
|
|
3046
|
+
toggleButtonId: PropTypes__default["default"].string,
|
|
3047
|
+
stateReducer: PropTypes__default["default"].func,
|
|
3048
|
+
onSelectedItemChange: PropTypes__default["default"].func,
|
|
3049
|
+
onHighlightedIndexChange: PropTypes__default["default"].func,
|
|
3050
|
+
onStateChange: PropTypes__default["default"].func,
|
|
3051
|
+
onIsOpenChange: PropTypes__default["default"].func,
|
|
3052
|
+
onInputValueChange: PropTypes__default["default"].func,
|
|
3053
|
+
environment: PropTypes__default["default"].shape({
|
|
3054
|
+
addEventListener: PropTypes__default["default"].func,
|
|
3055
|
+
removeEventListener: PropTypes__default["default"].func,
|
|
3056
|
+
document: PropTypes__default["default"].shape({
|
|
3057
|
+
getElementById: PropTypes__default["default"].func,
|
|
3058
|
+
activeElement: PropTypes__default["default"].any,
|
|
3059
|
+
body: PropTypes__default["default"].any
|
|
3042
3060
|
})
|
|
3043
3061
|
})
|
|
3044
3062
|
};
|
|
@@ -3056,14 +3074,10 @@ var propTypes$1 = {
|
|
|
3056
3074
|
*/
|
|
3057
3075
|
|
|
3058
3076
|
function useControlledReducer(reducer, initialState, props) {
|
|
3059
|
-
|
|
3077
|
+
const previousSelectedItemRef = react.useRef();
|
|
3078
|
+
const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
|
|
3060
3079
|
|
|
3061
|
-
|
|
3062
|
-
state = _useEnhancedReducer[0],
|
|
3063
|
-
dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
react.useEffect(function () {
|
|
3080
|
+
react.useEffect(() => {
|
|
3067
3081
|
if (isControlledProp(props, 'selectedItem')) {
|
|
3068
3082
|
if (previousSelectedItemRef.current !== props.selectedItem) {
|
|
3069
3083
|
dispatch({
|
|
@@ -3079,27 +3093,29 @@ function useControlledReducer(reducer, initialState, props) {
|
|
|
3079
3093
|
} // eslint-disable-next-line import/no-mutable-exports
|
|
3080
3094
|
|
|
3081
3095
|
|
|
3082
|
-
|
|
3096
|
+
let validatePropTypes$1 = noop;
|
|
3083
3097
|
/* istanbul ignore next */
|
|
3084
3098
|
|
|
3085
3099
|
if (process.env.NODE_ENV !== 'production') {
|
|
3086
|
-
validatePropTypes$1 =
|
|
3087
|
-
PropTypes__default[
|
|
3100
|
+
validatePropTypes$1 = (options, caller) => {
|
|
3101
|
+
PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
|
|
3088
3102
|
};
|
|
3089
3103
|
}
|
|
3090
3104
|
|
|
3091
|
-
|
|
3105
|
+
const defaultProps$1 = { ...defaultProps$3,
|
|
3092
3106
|
getA11yStatusMessage: getA11yStatusMessage$1,
|
|
3093
3107
|
circularNavigation: true
|
|
3094
|
-
}
|
|
3108
|
+
};
|
|
3095
3109
|
|
|
3096
3110
|
/* eslint-disable complexity */
|
|
3097
3111
|
|
|
3098
3112
|
function downshiftUseComboboxReducer(state, action) {
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3113
|
+
const {
|
|
3114
|
+
type,
|
|
3115
|
+
props,
|
|
3116
|
+
shiftKey
|
|
3117
|
+
} = action;
|
|
3118
|
+
let changes;
|
|
3103
3119
|
|
|
3104
3120
|
switch (type) {
|
|
3105
3121
|
case ItemClick:
|
|
@@ -3140,22 +3156,24 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
3140
3156
|
break;
|
|
3141
3157
|
|
|
3142
3158
|
case InputKeyDownEnter:
|
|
3143
|
-
changes =
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3159
|
+
changes = { ...(state.isOpen && state.highlightedIndex >= 0 && {
|
|
3160
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
3161
|
+
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
3162
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
|
|
3163
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
3164
|
+
})
|
|
3165
|
+
};
|
|
3149
3166
|
break;
|
|
3150
3167
|
|
|
3151
3168
|
case InputKeyDownEscape:
|
|
3152
|
-
changes =
|
|
3169
|
+
changes = {
|
|
3153
3170
|
isOpen: false,
|
|
3154
|
-
highlightedIndex: -1
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3171
|
+
highlightedIndex: -1,
|
|
3172
|
+
...(!state.isOpen && {
|
|
3173
|
+
selectedItem: null,
|
|
3174
|
+
inputValue: ''
|
|
3175
|
+
})
|
|
3176
|
+
};
|
|
3159
3177
|
break;
|
|
3160
3178
|
|
|
3161
3179
|
case InputKeyDownHome:
|
|
@@ -3171,13 +3189,14 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
3171
3189
|
break;
|
|
3172
3190
|
|
|
3173
3191
|
case InputBlur:
|
|
3174
|
-
changes =
|
|
3192
|
+
changes = {
|
|
3175
3193
|
isOpen: false,
|
|
3176
|
-
highlightedIndex: -1
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3194
|
+
highlightedIndex: -1,
|
|
3195
|
+
...(state.highlightedIndex >= 0 && action.selectItem && {
|
|
3196
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
3197
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
3198
|
+
})
|
|
3199
|
+
};
|
|
3181
3200
|
break;
|
|
3182
3201
|
|
|
3183
3202
|
case InputChange:
|
|
@@ -3205,15 +3224,13 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
3205
3224
|
return downshiftCommonReducer(state, action, stateChangeTypes$1);
|
|
3206
3225
|
}
|
|
3207
3226
|
|
|
3208
|
-
return
|
|
3227
|
+
return { ...state,
|
|
3228
|
+
...changes
|
|
3229
|
+
};
|
|
3209
3230
|
}
|
|
3210
3231
|
/* eslint-enable complexity */
|
|
3211
3232
|
|
|
3212
|
-
|
|
3213
|
-
_excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"],
|
|
3214
|
-
_excluded3 = ["onClick", "onPress", "refKey", "ref"],
|
|
3215
|
-
_excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"],
|
|
3216
|
-
_excluded5 = ["refKey", "ref"];
|
|
3233
|
+
/* eslint-disable max-statements */
|
|
3217
3234
|
useCombobox.stateChangeTypes = stateChangeTypes$1;
|
|
3218
3235
|
|
|
3219
3236
|
function useCombobox(userProps) {
|
|
@@ -3223,87 +3240,88 @@ function useCombobox(userProps) {
|
|
|
3223
3240
|
|
|
3224
3241
|
validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
|
|
3225
3242
|
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3243
|
+
const props = { ...defaultProps$1,
|
|
3244
|
+
...userProps
|
|
3245
|
+
};
|
|
3246
|
+
const {
|
|
3247
|
+
initialIsOpen,
|
|
3248
|
+
defaultIsOpen,
|
|
3249
|
+
items,
|
|
3250
|
+
scrollIntoView,
|
|
3251
|
+
environment,
|
|
3252
|
+
getA11yStatusMessage,
|
|
3253
|
+
getA11ySelectionMessage,
|
|
3254
|
+
itemToString
|
|
3255
|
+
} = props; // Initial state depending on controlled props.
|
|
3256
|
+
|
|
3257
|
+
const initialState = getInitialState$1(props);
|
|
3258
|
+
const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
|
|
3259
|
+
const {
|
|
3260
|
+
isOpen,
|
|
3261
|
+
highlightedIndex,
|
|
3262
|
+
selectedItem,
|
|
3263
|
+
inputValue
|
|
3264
|
+
} = state; // Element refs.
|
|
3265
|
+
|
|
3266
|
+
const menuRef = react.useRef(null);
|
|
3267
|
+
const itemRefs = react.useRef({});
|
|
3268
|
+
const inputRef = react.useRef(null);
|
|
3269
|
+
const toggleButtonRef = react.useRef(null);
|
|
3270
|
+
const comboboxRef = react.useRef(null);
|
|
3271
|
+
const isInitialMountRef = react.useRef(true); // prevent id re-generation between renders.
|
|
3272
|
+
|
|
3273
|
+
const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
|
|
3274
|
+
|
|
3275
|
+
const previousResultCountRef = react.useRef(); // utility callback to get item element.
|
|
3276
|
+
|
|
3277
|
+
const latest = useLatestRef({
|
|
3278
|
+
state,
|
|
3279
|
+
props
|
|
3262
3280
|
});
|
|
3263
|
-
|
|
3264
|
-
return itemRefs.current[elementIds.getItemId(index)];
|
|
3265
|
-
}, [elementIds]); // Effects.
|
|
3281
|
+
const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
|
|
3266
3282
|
// Sets a11y status message on changes in state.
|
|
3267
3283
|
|
|
3268
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items],
|
|
3284
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
3269
3285
|
isInitialMount: isInitialMountRef.current,
|
|
3270
3286
|
previousResultCount: previousResultCountRef.current,
|
|
3271
|
-
items
|
|
3272
|
-
environment
|
|
3273
|
-
itemToString
|
|
3274
|
-
|
|
3287
|
+
items,
|
|
3288
|
+
environment,
|
|
3289
|
+
itemToString,
|
|
3290
|
+
...state
|
|
3291
|
+
}); // Sets a11y status message on changes in selectedItem.
|
|
3275
3292
|
|
|
3276
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem],
|
|
3293
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
3277
3294
|
isInitialMount: isInitialMountRef.current,
|
|
3278
3295
|
previousResultCount: previousResultCountRef.current,
|
|
3279
|
-
items
|
|
3280
|
-
environment
|
|
3281
|
-
itemToString
|
|
3282
|
-
|
|
3296
|
+
items,
|
|
3297
|
+
environment,
|
|
3298
|
+
itemToString,
|
|
3299
|
+
...state
|
|
3300
|
+
}); // Scroll on highlighted item if change comes from keyboard.
|
|
3283
3301
|
|
|
3284
|
-
|
|
3302
|
+
const shouldScrollRef = useScrollIntoView({
|
|
3285
3303
|
menuElement: menuRef.current,
|
|
3286
|
-
highlightedIndex
|
|
3287
|
-
isOpen
|
|
3288
|
-
itemRefs
|
|
3289
|
-
scrollIntoView
|
|
3290
|
-
getItemNodeFromIndex
|
|
3304
|
+
highlightedIndex,
|
|
3305
|
+
isOpen,
|
|
3306
|
+
itemRefs,
|
|
3307
|
+
scrollIntoView,
|
|
3308
|
+
getItemNodeFromIndex
|
|
3291
3309
|
});
|
|
3292
3310
|
useControlPropsValidator({
|
|
3293
3311
|
isInitialMount: isInitialMountRef.current,
|
|
3294
|
-
props
|
|
3295
|
-
state
|
|
3312
|
+
props,
|
|
3313
|
+
state
|
|
3296
3314
|
}); // Focus the input on first render if required.
|
|
3297
3315
|
|
|
3298
|
-
react.useEffect(
|
|
3299
|
-
|
|
3316
|
+
react.useEffect(() => {
|
|
3317
|
+
const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
|
|
3300
3318
|
|
|
3301
3319
|
if (focusOnOpen && inputRef.current) {
|
|
3302
3320
|
inputRef.current.focus();
|
|
3303
3321
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3304
3322
|
|
|
3305
3323
|
}, []);
|
|
3306
|
-
react.useEffect(
|
|
3324
|
+
react.useEffect(() => {
|
|
3307
3325
|
if (isInitialMountRef.current) {
|
|
3308
3326
|
return;
|
|
3309
3327
|
}
|
|
@@ -3311,149 +3329,153 @@ function useCombobox(userProps) {
|
|
|
3311
3329
|
previousResultCountRef.current = items.length;
|
|
3312
3330
|
}); // Add mouse/touch events to document.
|
|
3313
3331
|
|
|
3314
|
-
|
|
3332
|
+
const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, () => {
|
|
3315
3333
|
dispatch({
|
|
3316
3334
|
type: InputBlur,
|
|
3317
3335
|
selectItem: false
|
|
3318
3336
|
});
|
|
3319
3337
|
});
|
|
3320
|
-
|
|
3338
|
+
const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
|
|
3321
3339
|
|
|
3322
|
-
react.useEffect(
|
|
3340
|
+
react.useEffect(() => {
|
|
3323
3341
|
isInitialMountRef.current = false;
|
|
3324
3342
|
}, []); // Reset itemRefs on close.
|
|
3325
3343
|
|
|
3326
|
-
react.useEffect(
|
|
3344
|
+
react.useEffect(() => {
|
|
3327
3345
|
if (!isOpen) {
|
|
3328
3346
|
itemRefs.current = {};
|
|
3329
3347
|
}
|
|
3330
3348
|
}, [isOpen]);
|
|
3331
3349
|
/* Event handler functions */
|
|
3332
3350
|
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
},
|
|
3343
|
-
ArrowUp: function ArrowUp(event) {
|
|
3344
|
-
event.preventDefault();
|
|
3345
|
-
dispatch({
|
|
3346
|
-
type: InputKeyDownArrowUp,
|
|
3347
|
-
shiftKey: event.shiftKey,
|
|
3348
|
-
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3349
|
-
});
|
|
3350
|
-
},
|
|
3351
|
-
Home: function Home(event) {
|
|
3352
|
-
if (!latest.current.state.isOpen) {
|
|
3353
|
-
return;
|
|
3354
|
-
}
|
|
3351
|
+
const inputKeyDownHandlers = react.useMemo(() => ({
|
|
3352
|
+
ArrowDown(event) {
|
|
3353
|
+
event.preventDefault();
|
|
3354
|
+
dispatch({
|
|
3355
|
+
type: InputKeyDownArrowDown,
|
|
3356
|
+
shiftKey: event.shiftKey,
|
|
3357
|
+
getItemNodeFromIndex
|
|
3358
|
+
});
|
|
3359
|
+
},
|
|
3355
3360
|
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
return;
|
|
3365
|
-
}
|
|
3361
|
+
ArrowUp(event) {
|
|
3362
|
+
event.preventDefault();
|
|
3363
|
+
dispatch({
|
|
3364
|
+
type: InputKeyDownArrowUp,
|
|
3365
|
+
shiftKey: event.shiftKey,
|
|
3366
|
+
getItemNodeFromIndex
|
|
3367
|
+
});
|
|
3368
|
+
},
|
|
3366
3369
|
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
});
|
|
3372
|
-
},
|
|
3373
|
-
Escape: function Escape() {
|
|
3374
|
-
var latestState = latest.current.state;
|
|
3370
|
+
Home(event) {
|
|
3371
|
+
if (!latest.current.state.isOpen) {
|
|
3372
|
+
return;
|
|
3373
|
+
}
|
|
3375
3374
|
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
Enter: function Enter(event) {
|
|
3383
|
-
var latestState = latest.current.state; // if closed or no highlighted index, do nothing.
|
|
3375
|
+
event.preventDefault();
|
|
3376
|
+
dispatch({
|
|
3377
|
+
type: InputKeyDownHome,
|
|
3378
|
+
getItemNodeFromIndex
|
|
3379
|
+
});
|
|
3380
|
+
},
|
|
3384
3381
|
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3382
|
+
End(event) {
|
|
3383
|
+
if (!latest.current.state.isOpen) {
|
|
3384
|
+
return;
|
|
3385
|
+
}
|
|
3389
3386
|
|
|
3390
|
-
|
|
3387
|
+
event.preventDefault();
|
|
3388
|
+
dispatch({
|
|
3389
|
+
type: InputKeyDownEnd,
|
|
3390
|
+
getItemNodeFromIndex
|
|
3391
|
+
});
|
|
3392
|
+
},
|
|
3393
|
+
|
|
3394
|
+
Escape() {
|
|
3395
|
+
const latestState = latest.current.state;
|
|
3396
|
+
|
|
3397
|
+
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
3391
3398
|
dispatch({
|
|
3392
|
-
type:
|
|
3393
|
-
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3399
|
+
type: InputKeyDownEscape
|
|
3394
3400
|
});
|
|
3395
3401
|
}
|
|
3396
|
-
}
|
|
3397
|
-
}, [dispatch, latest, getItemNodeFromIndex]); // Getter props.
|
|
3398
|
-
|
|
3399
|
-
var getLabelProps = react.useCallback(function (labelProps) {
|
|
3400
|
-
return _extends__default['default']({
|
|
3401
|
-
id: elementIds.labelId,
|
|
3402
|
-
htmlFor: elementIds.inputId
|
|
3403
|
-
}, labelProps);
|
|
3404
|
-
}, [elementIds]);
|
|
3405
|
-
var getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
3406
|
-
var _extends2;
|
|
3407
|
-
|
|
3408
|
-
var _ref = _temp === void 0 ? {} : _temp,
|
|
3409
|
-
onMouseLeave = _ref.onMouseLeave,
|
|
3410
|
-
_ref$refKey = _ref.refKey,
|
|
3411
|
-
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
|
3412
|
-
ref = _ref.ref,
|
|
3413
|
-
rest = _objectWithoutPropertiesLoose__default['default'](_ref, _excluded$1);
|
|
3414
|
-
|
|
3415
|
-
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
3416
|
-
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
3417
|
-
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
3402
|
+
},
|
|
3418
3403
|
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3404
|
+
Enter(event) {
|
|
3405
|
+
const latestState = latest.current.state; // if closed or no highlighted index, do nothing.
|
|
3406
|
+
|
|
3407
|
+
if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3408
|
+
) {
|
|
3409
|
+
return;
|
|
3410
|
+
}
|
|
3411
|
+
|
|
3412
|
+
event.preventDefault();
|
|
3423
3413
|
dispatch({
|
|
3424
|
-
type:
|
|
3414
|
+
type: InputKeyDownEnter,
|
|
3415
|
+
getItemNodeFromIndex
|
|
3425
3416
|
});
|
|
3426
|
-
}
|
|
3417
|
+
}
|
|
3418
|
+
|
|
3419
|
+
}), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
|
|
3420
|
+
|
|
3421
|
+
const getLabelProps = react.useCallback(labelProps => ({
|
|
3422
|
+
id: elementIds.labelId,
|
|
3423
|
+
htmlFor: elementIds.inputId,
|
|
3424
|
+
...labelProps
|
|
3425
|
+
}), [elementIds]);
|
|
3426
|
+
const getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
3427
|
+
let {
|
|
3428
|
+
onMouseLeave,
|
|
3429
|
+
refKey = 'ref',
|
|
3430
|
+
ref,
|
|
3431
|
+
...rest
|
|
3432
|
+
} = _temp === void 0 ? {} : _temp;
|
|
3433
|
+
let {
|
|
3434
|
+
suppressRefError = false
|
|
3435
|
+
} = _temp2 === void 0 ? {} : _temp2;
|
|
3436
|
+
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
3437
|
+
return {
|
|
3438
|
+
[refKey]: handleRefs(ref, menuNode => {
|
|
3439
|
+
menuRef.current = menuNode;
|
|
3440
|
+
}),
|
|
3441
|
+
id: elementIds.menuId,
|
|
3442
|
+
role: 'listbox',
|
|
3443
|
+
'aria-labelledby': elementIds.labelId,
|
|
3444
|
+
onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
|
|
3445
|
+
dispatch({
|
|
3446
|
+
type: MenuMouseLeave
|
|
3447
|
+
});
|
|
3448
|
+
}),
|
|
3449
|
+
...rest
|
|
3450
|
+
};
|
|
3427
3451
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
latestState = _latest$current.state;
|
|
3445
|
-
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
3452
|
+
const getItemProps = react.useCallback(function (_temp3) {
|
|
3453
|
+
let {
|
|
3454
|
+
item,
|
|
3455
|
+
index,
|
|
3456
|
+
refKey = 'ref',
|
|
3457
|
+
ref,
|
|
3458
|
+
onMouseMove,
|
|
3459
|
+
onClick,
|
|
3460
|
+
onPress,
|
|
3461
|
+
...rest
|
|
3462
|
+
} = _temp3 === void 0 ? {} : _temp3;
|
|
3463
|
+
const {
|
|
3464
|
+
props: latestProps,
|
|
3465
|
+
state: latestState
|
|
3466
|
+
} = latest.current;
|
|
3467
|
+
const itemIndex = getItemIndex(index, item, latestProps.items);
|
|
3446
3468
|
|
|
3447
3469
|
if (itemIndex < 0) {
|
|
3448
3470
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
3449
3471
|
}
|
|
3450
3472
|
|
|
3451
|
-
|
|
3473
|
+
const onSelectKey = /* istanbul ignore next (react-native) */
|
|
3452
3474
|
'onPress' ;
|
|
3453
|
-
|
|
3475
|
+
const customClickHandler = /* istanbul ignore next (react-native) */
|
|
3454
3476
|
onPress ;
|
|
3455
3477
|
|
|
3456
|
-
|
|
3478
|
+
const itemHandleMouseMove = () => {
|
|
3457
3479
|
if (index === latestState.highlightedIndex) {
|
|
3458
3480
|
return;
|
|
3459
3481
|
}
|
|
@@ -3461,14 +3483,14 @@ function useCombobox(userProps) {
|
|
|
3461
3483
|
shouldScrollRef.current = false;
|
|
3462
3484
|
dispatch({
|
|
3463
3485
|
type: ItemMouseMove,
|
|
3464
|
-
index
|
|
3486
|
+
index
|
|
3465
3487
|
});
|
|
3466
3488
|
};
|
|
3467
3489
|
|
|
3468
|
-
|
|
3490
|
+
const itemHandleClick = () => {
|
|
3469
3491
|
dispatch({
|
|
3470
3492
|
type: ItemClick,
|
|
3471
|
-
index
|
|
3493
|
+
index
|
|
3472
3494
|
});
|
|
3473
3495
|
|
|
3474
3496
|
if (inputRef.current) {
|
|
@@ -3476,26 +3498,32 @@ function useCombobox(userProps) {
|
|
|
3476
3498
|
}
|
|
3477
3499
|
};
|
|
3478
3500
|
|
|
3479
|
-
return
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3501
|
+
return {
|
|
3502
|
+
[refKey]: handleRefs(ref, itemNode => {
|
|
3503
|
+
if (itemNode) {
|
|
3504
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3505
|
+
}
|
|
3506
|
+
}),
|
|
3507
|
+
role: 'option',
|
|
3508
|
+
'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
|
|
3509
|
+
id: elementIds.getItemId(itemIndex),
|
|
3510
|
+
...(!rest.disabled && {
|
|
3511
|
+
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3512
|
+
[onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
|
|
3513
|
+
}),
|
|
3514
|
+
...rest
|
|
3515
|
+
};
|
|
3486
3516
|
}, [dispatch, latest, shouldScrollRef, elementIds]);
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
3517
|
+
const getToggleButtonProps = react.useCallback(function (_temp4) {
|
|
3518
|
+
let {
|
|
3519
|
+
onClick,
|
|
3520
|
+
onPress,
|
|
3521
|
+
refKey = 'ref',
|
|
3522
|
+
ref,
|
|
3523
|
+
...rest
|
|
3524
|
+
} = _temp4 === void 0 ? {} : _temp4;
|
|
3525
|
+
|
|
3526
|
+
const toggleButtonHandleClick = () => {
|
|
3499
3527
|
dispatch({
|
|
3500
3528
|
type: ToggleButtonClick
|
|
3501
3529
|
});
|
|
@@ -3505,43 +3533,46 @@ function useCombobox(userProps) {
|
|
|
3505
3533
|
}
|
|
3506
3534
|
};
|
|
3507
3535
|
|
|
3508
|
-
return
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3536
|
+
return {
|
|
3537
|
+
[refKey]: handleRefs(ref, toggleButtonNode => {
|
|
3538
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
3539
|
+
}),
|
|
3540
|
+
id: elementIds.toggleButtonId,
|
|
3541
|
+
tabIndex: -1,
|
|
3542
|
+
...(!rest.disabled && { ...(/* istanbul ignore next (react-native) */
|
|
3543
|
+
{
|
|
3544
|
+
onPress: callAllEventHandlers(onPress, toggleButtonHandleClick)
|
|
3545
|
+
} )
|
|
3546
|
+
}),
|
|
3547
|
+
...rest
|
|
3548
|
+
};
|
|
3514
3549
|
}, [dispatch, latest, elementIds]);
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
var _ref7 = _temp6 === void 0 ? {} : _temp6,
|
|
3530
|
-
_ref7$suppressRefErro = _ref7.suppressRefError,
|
|
3531
|
-
suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
|
|
3532
|
-
|
|
3550
|
+
const getInputProps = react.useCallback(function (_temp5, _temp6) {
|
|
3551
|
+
let {
|
|
3552
|
+
onKeyDown,
|
|
3553
|
+
onChange,
|
|
3554
|
+
onInput,
|
|
3555
|
+
onBlur,
|
|
3556
|
+
onChangeText,
|
|
3557
|
+
refKey = 'ref',
|
|
3558
|
+
ref,
|
|
3559
|
+
...rest
|
|
3560
|
+
} = _temp5 === void 0 ? {} : _temp5;
|
|
3561
|
+
let {
|
|
3562
|
+
suppressRefError = false
|
|
3563
|
+
} = _temp6 === void 0 ? {} : _temp6;
|
|
3533
3564
|
setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
|
|
3534
|
-
|
|
3565
|
+
const latestState = latest.current.state;
|
|
3535
3566
|
|
|
3536
|
-
|
|
3537
|
-
|
|
3567
|
+
const inputHandleKeyDown = event => {
|
|
3568
|
+
const key = normalizeArrowKey(event);
|
|
3538
3569
|
|
|
3539
3570
|
if (key && inputKeyDownHandlers[key]) {
|
|
3540
3571
|
inputKeyDownHandlers[key](event);
|
|
3541
3572
|
}
|
|
3542
3573
|
};
|
|
3543
3574
|
|
|
3544
|
-
|
|
3575
|
+
const inputHandleChange = event => {
|
|
3545
3576
|
dispatch({
|
|
3546
3577
|
type: InputChange,
|
|
3547
3578
|
inputValue: /* istanbul ignore next (react-native) */
|
|
@@ -3549,7 +3580,7 @@ function useCombobox(userProps) {
|
|
|
3549
3580
|
});
|
|
3550
3581
|
};
|
|
3551
3582
|
|
|
3552
|
-
|
|
3583
|
+
const inputHandleBlur = () => {
|
|
3553
3584
|
/* istanbul ignore else */
|
|
3554
3585
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
3555
3586
|
dispatch({
|
|
@@ -3561,122 +3592,134 @@ function useCombobox(userProps) {
|
|
|
3561
3592
|
/* istanbul ignore next (preact) */
|
|
3562
3593
|
|
|
3563
3594
|
|
|
3564
|
-
|
|
3565
|
-
|
|
3595
|
+
const onChangeKey = 'onChange';
|
|
3596
|
+
let eventHandlers = {};
|
|
3566
3597
|
|
|
3567
3598
|
if (!rest.disabled) {
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3599
|
+
eventHandlers = {
|
|
3600
|
+
[onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
|
|
3601
|
+
onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
|
|
3602
|
+
onBlur: callAllEventHandlers(onBlur, inputHandleBlur)
|
|
3603
|
+
};
|
|
3571
3604
|
}
|
|
3572
3605
|
/* istanbul ignore if (react-native) */
|
|
3573
3606
|
|
|
3574
3607
|
|
|
3575
3608
|
{
|
|
3576
3609
|
eventHandlers.onChange = callAllEventHandlers(onChange, onInput, inputHandleChange);
|
|
3577
|
-
eventHandlers.onChangeText = callAllEventHandlers(onChangeText, onInput,
|
|
3610
|
+
eventHandlers.onChangeText = callAllEventHandlers(onChangeText, onInput, text => {
|
|
3578
3611
|
inputHandleChange({
|
|
3579
3612
|
nativeEvent: {
|
|
3580
|
-
text
|
|
3613
|
+
text
|
|
3581
3614
|
}
|
|
3582
3615
|
});
|
|
3583
3616
|
});
|
|
3584
3617
|
}
|
|
3585
3618
|
|
|
3586
|
-
return
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3619
|
+
return {
|
|
3620
|
+
[refKey]: handleRefs(ref, inputNode => {
|
|
3621
|
+
inputRef.current = inputNode;
|
|
3622
|
+
}),
|
|
3623
|
+
id: elementIds.inputId,
|
|
3624
|
+
'aria-autocomplete': 'list',
|
|
3625
|
+
'aria-controls': elementIds.menuId,
|
|
3626
|
+
...(latestState.isOpen && latestState.highlightedIndex > -1 && {
|
|
3627
|
+
'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
|
|
3628
|
+
}),
|
|
3591
3629
|
'aria-labelledby': elementIds.labelId,
|
|
3592
3630
|
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
|
|
3593
3631
|
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
3594
3632
|
autoComplete: 'off',
|
|
3595
|
-
value: latestState.inputValue
|
|
3596
|
-
|
|
3633
|
+
value: latestState.inputValue,
|
|
3634
|
+
...eventHandlers,
|
|
3635
|
+
...rest
|
|
3636
|
+
};
|
|
3597
3637
|
}, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
var _ref9 = _temp8 === void 0 ? {} : _temp8,
|
|
3608
|
-
_ref9$suppressRefErro = _ref9.suppressRefError,
|
|
3609
|
-
suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro;
|
|
3610
|
-
|
|
3638
|
+
const getComboboxProps = react.useCallback(function (_temp7, _temp8) {
|
|
3639
|
+
let {
|
|
3640
|
+
refKey = 'ref',
|
|
3641
|
+
ref,
|
|
3642
|
+
...rest
|
|
3643
|
+
} = _temp7 === void 0 ? {} : _temp7;
|
|
3644
|
+
let {
|
|
3645
|
+
suppressRefError = false
|
|
3646
|
+
} = _temp8 === void 0 ? {} : _temp8;
|
|
3611
3647
|
setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
|
|
3612
|
-
return
|
|
3613
|
-
|
|
3614
|
-
|
|
3648
|
+
return {
|
|
3649
|
+
[refKey]: handleRefs(ref, comboboxNode => {
|
|
3650
|
+
comboboxRef.current = comboboxNode;
|
|
3651
|
+
}),
|
|
3652
|
+
role: 'combobox',
|
|
3653
|
+
'aria-haspopup': 'listbox',
|
|
3654
|
+
'aria-owns': elementIds.menuId,
|
|
3655
|
+
'aria-expanded': latest.current.state.isOpen,
|
|
3656
|
+
...rest
|
|
3657
|
+
};
|
|
3615
3658
|
}, [latest, setGetterPropCallInfo, elementIds]); // returns
|
|
3616
3659
|
|
|
3617
|
-
|
|
3660
|
+
const toggleMenu = react.useCallback(() => {
|
|
3618
3661
|
dispatch({
|
|
3619
3662
|
type: FunctionToggleMenu
|
|
3620
3663
|
});
|
|
3621
3664
|
}, [dispatch]);
|
|
3622
|
-
|
|
3665
|
+
const closeMenu = react.useCallback(() => {
|
|
3623
3666
|
dispatch({
|
|
3624
3667
|
type: FunctionCloseMenu
|
|
3625
3668
|
});
|
|
3626
3669
|
}, [dispatch]);
|
|
3627
|
-
|
|
3670
|
+
const openMenu = react.useCallback(() => {
|
|
3628
3671
|
dispatch({
|
|
3629
3672
|
type: FunctionOpenMenu
|
|
3630
3673
|
});
|
|
3631
3674
|
}, [dispatch]);
|
|
3632
|
-
|
|
3675
|
+
const setHighlightedIndex = react.useCallback(newHighlightedIndex => {
|
|
3633
3676
|
dispatch({
|
|
3634
3677
|
type: FunctionSetHighlightedIndex,
|
|
3635
3678
|
highlightedIndex: newHighlightedIndex
|
|
3636
3679
|
});
|
|
3637
3680
|
}, [dispatch]);
|
|
3638
|
-
|
|
3681
|
+
const selectItem = react.useCallback(newSelectedItem => {
|
|
3639
3682
|
dispatch({
|
|
3640
3683
|
type: FunctionSelectItem,
|
|
3641
3684
|
selectedItem: newSelectedItem
|
|
3642
3685
|
});
|
|
3643
3686
|
}, [dispatch]);
|
|
3644
|
-
|
|
3687
|
+
const setInputValue = react.useCallback(newInputValue => {
|
|
3645
3688
|
dispatch({
|
|
3646
3689
|
type: FunctionSetInputValue,
|
|
3647
3690
|
inputValue: newInputValue
|
|
3648
3691
|
});
|
|
3649
3692
|
}, [dispatch]);
|
|
3650
|
-
|
|
3693
|
+
const reset = react.useCallback(() => {
|
|
3651
3694
|
dispatch({
|
|
3652
3695
|
type: FunctionReset$1
|
|
3653
3696
|
});
|
|
3654
3697
|
}, [dispatch]);
|
|
3655
3698
|
return {
|
|
3656
3699
|
// prop getters.
|
|
3657
|
-
getItemProps
|
|
3658
|
-
getLabelProps
|
|
3659
|
-
getMenuProps
|
|
3660
|
-
getInputProps
|
|
3661
|
-
getComboboxProps
|
|
3662
|
-
getToggleButtonProps
|
|
3700
|
+
getItemProps,
|
|
3701
|
+
getLabelProps,
|
|
3702
|
+
getMenuProps,
|
|
3703
|
+
getInputProps,
|
|
3704
|
+
getComboboxProps,
|
|
3705
|
+
getToggleButtonProps,
|
|
3663
3706
|
// actions.
|
|
3664
|
-
toggleMenu
|
|
3665
|
-
openMenu
|
|
3666
|
-
closeMenu
|
|
3667
|
-
setHighlightedIndex
|
|
3668
|
-
setInputValue
|
|
3669
|
-
selectItem
|
|
3670
|
-
reset
|
|
3707
|
+
toggleMenu,
|
|
3708
|
+
openMenu,
|
|
3709
|
+
closeMenu,
|
|
3710
|
+
setHighlightedIndex,
|
|
3711
|
+
setInputValue,
|
|
3712
|
+
selectItem,
|
|
3713
|
+
reset,
|
|
3671
3714
|
// state.
|
|
3672
|
-
highlightedIndex
|
|
3673
|
-
isOpen
|
|
3674
|
-
selectedItem
|
|
3675
|
-
inputValue
|
|
3715
|
+
highlightedIndex,
|
|
3716
|
+
isOpen,
|
|
3717
|
+
selectedItem,
|
|
3718
|
+
inputValue
|
|
3676
3719
|
};
|
|
3677
3720
|
}
|
|
3678
3721
|
|
|
3679
|
-
|
|
3722
|
+
const defaultStateValues = {
|
|
3680
3723
|
activeIndex: -1,
|
|
3681
3724
|
selectedItems: []
|
|
3682
3725
|
};
|
|
@@ -3716,11 +3759,11 @@ function getDefaultValue(props, propKey) {
|
|
|
3716
3759
|
|
|
3717
3760
|
|
|
3718
3761
|
function getInitialState(props) {
|
|
3719
|
-
|
|
3720
|
-
|
|
3762
|
+
const activeIndex = getInitialValue(props, 'activeIndex');
|
|
3763
|
+
const selectedItems = getInitialValue(props, 'selectedItems');
|
|
3721
3764
|
return {
|
|
3722
|
-
activeIndex
|
|
3723
|
-
selectedItems
|
|
3765
|
+
activeIndex,
|
|
3766
|
+
selectedItems
|
|
3724
3767
|
};
|
|
3725
3768
|
}
|
|
3726
3769
|
/**
|
|
@@ -3739,10 +3782,12 @@ function isKeyDownOperationPermitted(event) {
|
|
|
3739
3782
|
return false;
|
|
3740
3783
|
}
|
|
3741
3784
|
|
|
3742
|
-
|
|
3785
|
+
const element = event.target;
|
|
3743
3786
|
|
|
3744
3787
|
if (element instanceof HTMLInputElement && // if element is a text input
|
|
3745
|
-
element.value !== '' && (
|
|
3788
|
+
element.value !== '' && ( // and we have text in it
|
|
3789
|
+
// and cursor is either not at the start or is currently highlighting text.
|
|
3790
|
+
element.selectionStart !== 0 || element.selectionEnd !== 0)) {
|
|
3746
3791
|
return false;
|
|
3747
3792
|
}
|
|
3748
3793
|
|
|
@@ -3757,66 +3802,68 @@ function isKeyDownOperationPermitted(event) {
|
|
|
3757
3802
|
|
|
3758
3803
|
|
|
3759
3804
|
function getA11yRemovalMessage(selectionParameters) {
|
|
3760
|
-
|
|
3761
|
-
|
|
3805
|
+
const {
|
|
3806
|
+
removedSelectedItem,
|
|
3807
|
+
itemToString: itemToStringLocal
|
|
3808
|
+
} = selectionParameters;
|
|
3762
3809
|
return itemToStringLocal(removedSelectedItem) + " has been removed.";
|
|
3763
3810
|
}
|
|
3764
3811
|
|
|
3765
|
-
|
|
3766
|
-
selectedItems: PropTypes__default[
|
|
3767
|
-
initialSelectedItems: PropTypes__default[
|
|
3768
|
-
defaultSelectedItems: PropTypes__default[
|
|
3769
|
-
itemToString: PropTypes__default[
|
|
3770
|
-
getA11yRemovalMessage: PropTypes__default[
|
|
3771
|
-
stateReducer: PropTypes__default[
|
|
3772
|
-
activeIndex: PropTypes__default[
|
|
3773
|
-
initialActiveIndex: PropTypes__default[
|
|
3774
|
-
defaultActiveIndex: PropTypes__default[
|
|
3775
|
-
onActiveIndexChange: PropTypes__default[
|
|
3776
|
-
onSelectedItemsChange: PropTypes__default[
|
|
3777
|
-
keyNavigationNext: PropTypes__default[
|
|
3778
|
-
keyNavigationPrevious: PropTypes__default[
|
|
3779
|
-
environment: PropTypes__default[
|
|
3780
|
-
addEventListener: PropTypes__default[
|
|
3781
|
-
removeEventListener: PropTypes__default[
|
|
3782
|
-
document: PropTypes__default[
|
|
3783
|
-
getElementById: PropTypes__default[
|
|
3784
|
-
activeElement: PropTypes__default[
|
|
3785
|
-
body: PropTypes__default[
|
|
3812
|
+
const propTypes = {
|
|
3813
|
+
selectedItems: PropTypes__default["default"].array,
|
|
3814
|
+
initialSelectedItems: PropTypes__default["default"].array,
|
|
3815
|
+
defaultSelectedItems: PropTypes__default["default"].array,
|
|
3816
|
+
itemToString: PropTypes__default["default"].func,
|
|
3817
|
+
getA11yRemovalMessage: PropTypes__default["default"].func,
|
|
3818
|
+
stateReducer: PropTypes__default["default"].func,
|
|
3819
|
+
activeIndex: PropTypes__default["default"].number,
|
|
3820
|
+
initialActiveIndex: PropTypes__default["default"].number,
|
|
3821
|
+
defaultActiveIndex: PropTypes__default["default"].number,
|
|
3822
|
+
onActiveIndexChange: PropTypes__default["default"].func,
|
|
3823
|
+
onSelectedItemsChange: PropTypes__default["default"].func,
|
|
3824
|
+
keyNavigationNext: PropTypes__default["default"].string,
|
|
3825
|
+
keyNavigationPrevious: PropTypes__default["default"].string,
|
|
3826
|
+
environment: PropTypes__default["default"].shape({
|
|
3827
|
+
addEventListener: PropTypes__default["default"].func,
|
|
3828
|
+
removeEventListener: PropTypes__default["default"].func,
|
|
3829
|
+
document: PropTypes__default["default"].shape({
|
|
3830
|
+
getElementById: PropTypes__default["default"].func,
|
|
3831
|
+
activeElement: PropTypes__default["default"].any,
|
|
3832
|
+
body: PropTypes__default["default"].any
|
|
3786
3833
|
})
|
|
3787
3834
|
})
|
|
3788
3835
|
};
|
|
3789
|
-
|
|
3836
|
+
const defaultProps = {
|
|
3790
3837
|
itemToString: defaultProps$3.itemToString,
|
|
3791
3838
|
stateReducer: defaultProps$3.stateReducer,
|
|
3792
3839
|
environment: defaultProps$3.environment,
|
|
3793
|
-
getA11yRemovalMessage
|
|
3840
|
+
getA11yRemovalMessage,
|
|
3794
3841
|
keyNavigationNext: 'ArrowRight',
|
|
3795
3842
|
keyNavigationPrevious: 'ArrowLeft'
|
|
3796
3843
|
}; // eslint-disable-next-line import/no-mutable-exports
|
|
3797
3844
|
|
|
3798
|
-
|
|
3845
|
+
let validatePropTypes = noop;
|
|
3799
3846
|
/* istanbul ignore next */
|
|
3800
3847
|
|
|
3801
3848
|
if (process.env.NODE_ENV !== 'production') {
|
|
3802
|
-
validatePropTypes =
|
|
3803
|
-
PropTypes__default[
|
|
3849
|
+
validatePropTypes = (options, caller) => {
|
|
3850
|
+
PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
|
|
3804
3851
|
};
|
|
3805
3852
|
}
|
|
3806
3853
|
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
|
|
3819
|
-
|
|
3854
|
+
const SelectedItemClick = process.env.NODE_ENV !== "production" ? '__selected_item_click__' : 0;
|
|
3855
|
+
const SelectedItemKeyDownDelete = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_delete__' : 1;
|
|
3856
|
+
const SelectedItemKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_backspace__' : 2;
|
|
3857
|
+
const SelectedItemKeyDownNavigationNext = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_navigation_next__' : 3;
|
|
3858
|
+
const SelectedItemKeyDownNavigationPrevious = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_navigation_previous__' : 4;
|
|
3859
|
+
const DropdownKeyDownNavigationPrevious = process.env.NODE_ENV !== "production" ? '__dropdown_keydown_navigation_previous__' : 5;
|
|
3860
|
+
const DropdownKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__dropdown_keydown_backspace__' : 6;
|
|
3861
|
+
const DropdownClick = process.env.NODE_ENV !== "production" ? '__dropdown_click__' : 7;
|
|
3862
|
+
const FunctionAddSelectedItem = process.env.NODE_ENV !== "production" ? '__function_add_selected_item__' : 8;
|
|
3863
|
+
const FunctionRemoveSelectedItem = process.env.NODE_ENV !== "production" ? '__function_remove_selected_item__' : 9;
|
|
3864
|
+
const FunctionSetSelectedItems = process.env.NODE_ENV !== "production" ? '__function_set_selected_items__' : 10;
|
|
3865
|
+
const FunctionSetActiveIndex = process.env.NODE_ENV !== "production" ? '__function_set_active_index__' : 11;
|
|
3866
|
+
const FunctionReset = process.env.NODE_ENV !== "production" ? '__function_reset__' : 12;
|
|
3820
3867
|
|
|
3821
3868
|
var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
3822
3869
|
__proto__: null,
|
|
@@ -3838,13 +3885,17 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
|
3838
3885
|
/* eslint-disable complexity */
|
|
3839
3886
|
|
|
3840
3887
|
function downshiftMultipleSelectionReducer(state, action) {
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3888
|
+
const {
|
|
3889
|
+
type,
|
|
3890
|
+
index,
|
|
3891
|
+
props,
|
|
3892
|
+
selectedItem
|
|
3893
|
+
} = action;
|
|
3894
|
+
const {
|
|
3895
|
+
activeIndex,
|
|
3896
|
+
selectedItems
|
|
3897
|
+
} = state;
|
|
3898
|
+
let changes;
|
|
3848
3899
|
|
|
3849
3900
|
switch (type) {
|
|
3850
3901
|
case SelectedItemClick:
|
|
@@ -3868,7 +3919,7 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3868
3919
|
case SelectedItemKeyDownBackspace:
|
|
3869
3920
|
case SelectedItemKeyDownDelete:
|
|
3870
3921
|
{
|
|
3871
|
-
|
|
3922
|
+
let newActiveIndex = activeIndex;
|
|
3872
3923
|
|
|
3873
3924
|
if (selectedItems.length === 1) {
|
|
3874
3925
|
newActiveIndex = -1;
|
|
@@ -3876,11 +3927,12 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3876
3927
|
newActiveIndex = selectedItems.length - 2;
|
|
3877
3928
|
}
|
|
3878
3929
|
|
|
3879
|
-
changes =
|
|
3880
|
-
selectedItems: [
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3930
|
+
changes = {
|
|
3931
|
+
selectedItems: [...selectedItems.slice(0, activeIndex), ...selectedItems.slice(activeIndex + 1)],
|
|
3932
|
+
...{
|
|
3933
|
+
activeIndex: newActiveIndex
|
|
3934
|
+
}
|
|
3935
|
+
};
|
|
3884
3936
|
break;
|
|
3885
3937
|
}
|
|
3886
3938
|
|
|
@@ -3898,7 +3950,7 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3898
3950
|
|
|
3899
3951
|
case FunctionAddSelectedItem:
|
|
3900
3952
|
changes = {
|
|
3901
|
-
selectedItems: [
|
|
3953
|
+
selectedItems: [...selectedItems, selectedItem]
|
|
3902
3954
|
};
|
|
3903
3955
|
break;
|
|
3904
3956
|
|
|
@@ -3910,26 +3962,30 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3910
3962
|
|
|
3911
3963
|
case FunctionRemoveSelectedItem:
|
|
3912
3964
|
{
|
|
3913
|
-
|
|
3914
|
-
|
|
3965
|
+
let newActiveIndex = activeIndex;
|
|
3966
|
+
const selectedItemIndex = selectedItems.indexOf(selectedItem);
|
|
3967
|
+
|
|
3968
|
+
if (selectedItemIndex >= 0) {
|
|
3969
|
+
if (selectedItems.length === 1) {
|
|
3970
|
+
newActiveIndex = -1;
|
|
3971
|
+
} else if (selectedItemIndex === selectedItems.length - 1) {
|
|
3972
|
+
newActiveIndex = selectedItems.length - 2;
|
|
3973
|
+
}
|
|
3915
3974
|
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3975
|
+
changes = {
|
|
3976
|
+
selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
|
|
3977
|
+
activeIndex: newActiveIndex
|
|
3978
|
+
};
|
|
3920
3979
|
}
|
|
3921
3980
|
|
|
3922
|
-
changes = _extends__default['default']({
|
|
3923
|
-
selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1))
|
|
3924
|
-
}, {
|
|
3925
|
-
activeIndex: _newActiveIndex
|
|
3926
|
-
});
|
|
3927
3981
|
break;
|
|
3928
3982
|
}
|
|
3929
3983
|
|
|
3930
3984
|
case FunctionSetSelectedItems:
|
|
3931
3985
|
{
|
|
3932
|
-
|
|
3986
|
+
const {
|
|
3987
|
+
selectedItems: newSelectedItems
|
|
3988
|
+
} = action;
|
|
3933
3989
|
changes = {
|
|
3934
3990
|
selectedItems: newSelectedItems
|
|
3935
3991
|
};
|
|
@@ -3938,9 +3994,11 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3938
3994
|
|
|
3939
3995
|
case FunctionSetActiveIndex:
|
|
3940
3996
|
{
|
|
3941
|
-
|
|
3997
|
+
const {
|
|
3998
|
+
activeIndex: newActiveIndex
|
|
3999
|
+
} = action;
|
|
3942
4000
|
changes = {
|
|
3943
|
-
activeIndex:
|
|
4001
|
+
activeIndex: newActiveIndex
|
|
3944
4002
|
};
|
|
3945
4003
|
break;
|
|
3946
4004
|
}
|
|
@@ -3956,11 +4014,11 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3956
4014
|
throw new Error('Reducer called without proper action type.');
|
|
3957
4015
|
}
|
|
3958
4016
|
|
|
3959
|
-
return
|
|
4017
|
+
return { ...state,
|
|
4018
|
+
...changes
|
|
4019
|
+
};
|
|
3960
4020
|
}
|
|
3961
4021
|
|
|
3962
|
-
var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
|
|
3963
|
-
_excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
|
|
3964
4022
|
useMultipleSelection.stateChangeTypes = stateChangeTypes;
|
|
3965
4023
|
|
|
3966
4024
|
function useMultipleSelection(userProps) {
|
|
@@ -3970,47 +4028,47 @@ function useMultipleSelection(userProps) {
|
|
|
3970
4028
|
|
|
3971
4029
|
validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
|
|
3972
4030
|
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
|
|
3980
|
-
|
|
3981
|
-
|
|
3982
|
-
|
|
3983
|
-
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
4031
|
+
const props = { ...defaultProps,
|
|
4032
|
+
...userProps
|
|
4033
|
+
};
|
|
4034
|
+
const {
|
|
4035
|
+
getA11yRemovalMessage,
|
|
4036
|
+
itemToString,
|
|
4037
|
+
environment,
|
|
4038
|
+
keyNavigationNext,
|
|
4039
|
+
keyNavigationPrevious
|
|
4040
|
+
} = props; // Reducer init.
|
|
4041
|
+
|
|
4042
|
+
const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
|
|
4043
|
+
const {
|
|
4044
|
+
activeIndex,
|
|
4045
|
+
selectedItems
|
|
4046
|
+
} = state; // Refs.
|
|
4047
|
+
|
|
4048
|
+
const isInitialMountRef = react.useRef(true);
|
|
4049
|
+
const dropdownRef = react.useRef(null);
|
|
4050
|
+
const previousSelectedItemsRef = react.useRef(selectedItems);
|
|
4051
|
+
const selectedItemRefs = react.useRef();
|
|
3992
4052
|
selectedItemRefs.current = [];
|
|
3993
|
-
|
|
3994
|
-
state
|
|
3995
|
-
props
|
|
4053
|
+
const latest = useLatestRef({
|
|
4054
|
+
state,
|
|
4055
|
+
props
|
|
3996
4056
|
}); // Effects.
|
|
3997
4057
|
|
|
3998
4058
|
/* Sets a11y status message on changes in selectedItem. */
|
|
3999
4059
|
|
|
4000
|
-
react.useEffect(
|
|
4060
|
+
react.useEffect(() => {
|
|
4001
4061
|
if (isInitialMountRef.current) {
|
|
4002
4062
|
return;
|
|
4003
4063
|
}
|
|
4004
4064
|
|
|
4005
4065
|
if (selectedItems.length < previousSelectedItemsRef.current.length) {
|
|
4006
|
-
|
|
4007
|
-
return selectedItems.indexOf(item) < 0;
|
|
4008
|
-
});
|
|
4066
|
+
const removedSelectedItem = previousSelectedItemsRef.current.find(item => selectedItems.indexOf(item) < 0);
|
|
4009
4067
|
setStatus(getA11yRemovalMessage({
|
|
4010
|
-
itemToString
|
|
4068
|
+
itemToString,
|
|
4011
4069
|
resultCount: selectedItems.length,
|
|
4012
|
-
removedSelectedItem
|
|
4013
|
-
activeIndex
|
|
4070
|
+
removedSelectedItem,
|
|
4071
|
+
activeIndex,
|
|
4014
4072
|
activeSelectedItem: selectedItems[activeIndex]
|
|
4015
4073
|
}), environment.document);
|
|
4016
4074
|
}
|
|
@@ -4018,7 +4076,7 @@ function useMultipleSelection(userProps) {
|
|
|
4018
4076
|
previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4019
4077
|
}, [selectedItems.length]); // Sets focus on active item.
|
|
4020
4078
|
|
|
4021
|
-
react.useEffect(
|
|
4079
|
+
react.useEffect(() => {
|
|
4022
4080
|
if (isInitialMountRef.current) {
|
|
4023
4081
|
return;
|
|
4024
4082
|
}
|
|
@@ -4031,181 +4089,191 @@ function useMultipleSelection(userProps) {
|
|
|
4031
4089
|
}, [activeIndex]);
|
|
4032
4090
|
useControlPropsValidator({
|
|
4033
4091
|
isInitialMount: isInitialMountRef.current,
|
|
4034
|
-
props
|
|
4035
|
-
state
|
|
4092
|
+
props,
|
|
4093
|
+
state
|
|
4036
4094
|
});
|
|
4037
|
-
|
|
4095
|
+
const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
|
|
4038
4096
|
|
|
4039
|
-
react.useEffect(
|
|
4097
|
+
react.useEffect(() => {
|
|
4040
4098
|
isInitialMountRef.current = false;
|
|
4041
4099
|
}, []); // Event handler functions.
|
|
4042
4100
|
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
return _ref = {}, _ref[keyNavigationPrevious] = function () {
|
|
4101
|
+
const selectedItemKeyDownHandlers = react.useMemo(() => ({
|
|
4102
|
+
[keyNavigationPrevious]() {
|
|
4047
4103
|
dispatch({
|
|
4048
4104
|
type: SelectedItemKeyDownNavigationPrevious
|
|
4049
4105
|
});
|
|
4050
|
-
},
|
|
4106
|
+
},
|
|
4107
|
+
|
|
4108
|
+
[keyNavigationNext]() {
|
|
4051
4109
|
dispatch({
|
|
4052
4110
|
type: SelectedItemKeyDownNavigationNext
|
|
4053
4111
|
});
|
|
4054
|
-
},
|
|
4112
|
+
},
|
|
4113
|
+
|
|
4114
|
+
Delete() {
|
|
4055
4115
|
dispatch({
|
|
4056
4116
|
type: SelectedItemKeyDownDelete
|
|
4057
4117
|
});
|
|
4058
|
-
},
|
|
4118
|
+
},
|
|
4119
|
+
|
|
4120
|
+
Backspace() {
|
|
4059
4121
|
dispatch({
|
|
4060
4122
|
type: SelectedItemKeyDownBackspace
|
|
4061
4123
|
});
|
|
4062
|
-
}
|
|
4063
|
-
}, [dispatch, keyNavigationNext, keyNavigationPrevious]);
|
|
4064
|
-
var dropdownKeyDownHandlers = react.useMemo(function () {
|
|
4065
|
-
var _ref2;
|
|
4124
|
+
}
|
|
4066
4125
|
|
|
4067
|
-
|
|
4126
|
+
}), [dispatch, keyNavigationNext, keyNavigationPrevious]);
|
|
4127
|
+
const dropdownKeyDownHandlers = react.useMemo(() => ({
|
|
4128
|
+
[keyNavigationPrevious](event) {
|
|
4068
4129
|
if (isKeyDownOperationPermitted(event)) {
|
|
4069
4130
|
dispatch({
|
|
4070
4131
|
type: DropdownKeyDownNavigationPrevious
|
|
4071
4132
|
});
|
|
4072
4133
|
}
|
|
4073
|
-
},
|
|
4134
|
+
},
|
|
4135
|
+
|
|
4136
|
+
Backspace(event) {
|
|
4074
4137
|
if (isKeyDownOperationPermitted(event)) {
|
|
4075
4138
|
dispatch({
|
|
4076
4139
|
type: DropdownKeyDownBackspace
|
|
4077
4140
|
});
|
|
4078
4141
|
}
|
|
4079
|
-
}
|
|
4080
|
-
}, [dispatch, keyNavigationPrevious]); // Getter props.
|
|
4081
|
-
|
|
4082
|
-
var getSelectedItemProps = react.useCallback(function (_temp) {
|
|
4083
|
-
var _extends2;
|
|
4084
|
-
|
|
4085
|
-
var _ref3 = _temp === void 0 ? {} : _temp,
|
|
4086
|
-
_ref3$refKey = _ref3.refKey,
|
|
4087
|
-
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
4088
|
-
ref = _ref3.ref,
|
|
4089
|
-
onClick = _ref3.onClick,
|
|
4090
|
-
onKeyDown = _ref3.onKeyDown,
|
|
4091
|
-
selectedItem = _ref3.selectedItem,
|
|
4092
|
-
index = _ref3.index,
|
|
4093
|
-
rest = _objectWithoutPropertiesLoose__default['default'](_ref3, _excluded);
|
|
4142
|
+
}
|
|
4094
4143
|
|
|
4095
|
-
|
|
4096
|
-
|
|
4144
|
+
}), [dispatch, keyNavigationPrevious]); // Getter props.
|
|
4145
|
+
|
|
4146
|
+
const getSelectedItemProps = react.useCallback(function (_temp) {
|
|
4147
|
+
let {
|
|
4148
|
+
refKey = 'ref',
|
|
4149
|
+
ref,
|
|
4150
|
+
onClick,
|
|
4151
|
+
onKeyDown,
|
|
4152
|
+
selectedItem,
|
|
4153
|
+
index,
|
|
4154
|
+
...rest
|
|
4155
|
+
} = _temp === void 0 ? {} : _temp;
|
|
4156
|
+
const {
|
|
4157
|
+
state: latestState
|
|
4158
|
+
} = latest.current;
|
|
4159
|
+
const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
4097
4160
|
|
|
4098
4161
|
if (itemIndex < 0) {
|
|
4099
4162
|
throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
|
|
4100
4163
|
}
|
|
4101
4164
|
|
|
4102
|
-
|
|
4165
|
+
const selectedItemHandleClick = () => {
|
|
4103
4166
|
dispatch({
|
|
4104
4167
|
type: SelectedItemClick,
|
|
4105
|
-
index
|
|
4168
|
+
index
|
|
4106
4169
|
});
|
|
4107
4170
|
};
|
|
4108
4171
|
|
|
4109
|
-
|
|
4110
|
-
|
|
4172
|
+
const selectedItemHandleKeyDown = event => {
|
|
4173
|
+
const key = normalizeArrowKey(event);
|
|
4111
4174
|
|
|
4112
4175
|
if (key && selectedItemKeyDownHandlers[key]) {
|
|
4113
4176
|
selectedItemKeyDownHandlers[key](event);
|
|
4114
4177
|
}
|
|
4115
4178
|
};
|
|
4116
4179
|
|
|
4117
|
-
return
|
|
4118
|
-
|
|
4119
|
-
|
|
4120
|
-
|
|
4121
|
-
|
|
4180
|
+
return {
|
|
4181
|
+
[refKey]: handleRefs(ref, selectedItemNode => {
|
|
4182
|
+
if (selectedItemNode) {
|
|
4183
|
+
selectedItemRefs.current.push(selectedItemNode);
|
|
4184
|
+
}
|
|
4185
|
+
}),
|
|
4186
|
+
tabIndex: index === latestState.activeIndex ? 0 : -1,
|
|
4187
|
+
onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
|
|
4188
|
+
onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
|
|
4189
|
+
...rest
|
|
4190
|
+
};
|
|
4122
4191
|
}, [dispatch, latest, selectedItemKeyDownHandlers]);
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4129
|
-
|
|
4130
|
-
|
|
4131
|
-
|
|
4132
|
-
|
|
4133
|
-
|
|
4134
|
-
|
|
4135
|
-
|
|
4136
|
-
var _ref5 = _temp3 === void 0 ? {} : _temp3,
|
|
4137
|
-
_ref5$suppressRefErro = _ref5.suppressRefError,
|
|
4138
|
-
suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
|
|
4139
|
-
|
|
4192
|
+
const getDropdownProps = react.useCallback(function (_temp2, _temp3) {
|
|
4193
|
+
let {
|
|
4194
|
+
refKey = 'ref',
|
|
4195
|
+
ref,
|
|
4196
|
+
onKeyDown,
|
|
4197
|
+
onClick,
|
|
4198
|
+
preventKeyAction = false,
|
|
4199
|
+
...rest
|
|
4200
|
+
} = _temp2 === void 0 ? {} : _temp2;
|
|
4201
|
+
let {
|
|
4202
|
+
suppressRefError = false
|
|
4203
|
+
} = _temp3 === void 0 ? {} : _temp3;
|
|
4140
4204
|
setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
|
|
4141
4205
|
|
|
4142
|
-
|
|
4143
|
-
|
|
4206
|
+
const dropdownHandleKeyDown = event => {
|
|
4207
|
+
const key = normalizeArrowKey(event);
|
|
4144
4208
|
|
|
4145
4209
|
if (key && dropdownKeyDownHandlers[key]) {
|
|
4146
4210
|
dropdownKeyDownHandlers[key](event);
|
|
4147
4211
|
}
|
|
4148
4212
|
};
|
|
4149
4213
|
|
|
4150
|
-
|
|
4214
|
+
const dropdownHandleClick = () => {
|
|
4151
4215
|
dispatch({
|
|
4152
4216
|
type: DropdownClick
|
|
4153
4217
|
});
|
|
4154
4218
|
};
|
|
4155
4219
|
|
|
4156
|
-
return
|
|
4157
|
-
|
|
4158
|
-
|
|
4159
|
-
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
|
|
4220
|
+
return {
|
|
4221
|
+
[refKey]: handleRefs(ref, dropdownNode => {
|
|
4222
|
+
if (dropdownNode) {
|
|
4223
|
+
dropdownRef.current = dropdownNode;
|
|
4224
|
+
}
|
|
4225
|
+
}),
|
|
4226
|
+
...(!preventKeyAction && {
|
|
4227
|
+
onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
|
|
4228
|
+
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
4229
|
+
}),
|
|
4230
|
+
...rest
|
|
4231
|
+
};
|
|
4164
4232
|
}, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
|
|
4165
4233
|
|
|
4166
|
-
|
|
4234
|
+
const addSelectedItem = react.useCallback(selectedItem => {
|
|
4167
4235
|
dispatch({
|
|
4168
4236
|
type: FunctionAddSelectedItem,
|
|
4169
|
-
selectedItem
|
|
4237
|
+
selectedItem
|
|
4170
4238
|
});
|
|
4171
4239
|
}, [dispatch]);
|
|
4172
|
-
|
|
4240
|
+
const removeSelectedItem = react.useCallback(selectedItem => {
|
|
4173
4241
|
dispatch({
|
|
4174
4242
|
type: FunctionRemoveSelectedItem,
|
|
4175
|
-
selectedItem
|
|
4243
|
+
selectedItem
|
|
4176
4244
|
});
|
|
4177
4245
|
}, [dispatch]);
|
|
4178
|
-
|
|
4246
|
+
const setSelectedItems = react.useCallback(newSelectedItems => {
|
|
4179
4247
|
dispatch({
|
|
4180
4248
|
type: FunctionSetSelectedItems,
|
|
4181
4249
|
selectedItems: newSelectedItems
|
|
4182
4250
|
});
|
|
4183
4251
|
}, [dispatch]);
|
|
4184
|
-
|
|
4252
|
+
const setActiveIndex = react.useCallback(newActiveIndex => {
|
|
4185
4253
|
dispatch({
|
|
4186
4254
|
type: FunctionSetActiveIndex,
|
|
4187
4255
|
activeIndex: newActiveIndex
|
|
4188
4256
|
});
|
|
4189
4257
|
}, [dispatch]);
|
|
4190
|
-
|
|
4258
|
+
const reset = react.useCallback(() => {
|
|
4191
4259
|
dispatch({
|
|
4192
4260
|
type: FunctionReset
|
|
4193
4261
|
});
|
|
4194
4262
|
}, [dispatch]);
|
|
4195
4263
|
return {
|
|
4196
|
-
getSelectedItemProps
|
|
4197
|
-
getDropdownProps
|
|
4198
|
-
addSelectedItem
|
|
4199
|
-
removeSelectedItem
|
|
4200
|
-
setSelectedItems
|
|
4201
|
-
setActiveIndex
|
|
4202
|
-
reset
|
|
4203
|
-
selectedItems
|
|
4204
|
-
activeIndex
|
|
4264
|
+
getSelectedItemProps,
|
|
4265
|
+
getDropdownProps,
|
|
4266
|
+
addSelectedItem,
|
|
4267
|
+
removeSelectedItem,
|
|
4268
|
+
setSelectedItems,
|
|
4269
|
+
setActiveIndex,
|
|
4270
|
+
reset,
|
|
4271
|
+
selectedItems,
|
|
4272
|
+
activeIndex
|
|
4205
4273
|
};
|
|
4206
4274
|
}
|
|
4207
4275
|
|
|
4208
|
-
exports[
|
|
4276
|
+
exports["default"] = Downshift$1;
|
|
4209
4277
|
exports.resetIdCounter = resetIdCounter;
|
|
4210
4278
|
exports.useCombobox = useCombobox;
|
|
4211
4279
|
exports.useMultipleSelection = useMultipleSelection;
|