downshift 7.1.0 → 7.1.2
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/dist/downshift.cjs.js +1445 -1578
- package/dist/downshift.esm.js +1442 -1579
- package/dist/downshift.native.cjs.js +1429 -1562
- package/dist/downshift.umd.js +1482 -1574
- package/dist/downshift.umd.js.map +1 -1
- package/dist/downshift.umd.min.js +1 -1
- package/dist/downshift.umd.min.js.map +1 -1
- package/package.json +2 -1
- package/preact/dist/downshift.cjs.js +1445 -1578
- package/preact/dist/downshift.esm.js +1442 -1579
- package/preact/dist/downshift.umd.js +1485 -1577
- package/preact/dist/downshift.umd.js.map +1 -1
- package/preact/dist/downshift.umd.min.js +9 -1
- package/preact/dist/downshift.umd.min.js.map +1 -1
|
@@ -2,6 +2,10 @@
|
|
|
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');
|
|
5
9
|
var PropTypes = require('prop-types');
|
|
6
10
|
var react = require('react');
|
|
7
11
|
var reactIs = require('react-is');
|
|
@@ -10,10 +14,14 @@ var tslib = require('tslib');
|
|
|
10
14
|
|
|
11
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
16
|
|
|
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);
|
|
13
21
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
14
22
|
var computeScrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(computeScrollIntoView);
|
|
15
23
|
|
|
16
|
-
|
|
24
|
+
var idCounter = 0;
|
|
17
25
|
|
|
18
26
|
/**
|
|
19
27
|
* Accepts a parameter and returns it if it's a function
|
|
@@ -37,17 +45,15 @@ function scrollIntoView(node, menuNode) {
|
|
|
37
45
|
if (!node) {
|
|
38
46
|
return;
|
|
39
47
|
}
|
|
40
|
-
|
|
48
|
+
var actions = computeScrollIntoView__default["default"](node, {
|
|
41
49
|
boundary: menuNode,
|
|
42
50
|
block: 'nearest',
|
|
43
51
|
scrollMode: 'if-needed'
|
|
44
52
|
});
|
|
45
|
-
actions.forEach(_ref
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
left
|
|
50
|
-
} = _ref;
|
|
53
|
+
actions.forEach(function (_ref) {
|
|
54
|
+
var el = _ref.el,
|
|
55
|
+
top = _ref.top,
|
|
56
|
+
left = _ref.left;
|
|
51
57
|
el.scrollTop = top;
|
|
52
58
|
el.scrollLeft = left;
|
|
53
59
|
});
|
|
@@ -60,7 +66,7 @@ function scrollIntoView(node, menuNode) {
|
|
|
60
66
|
* @return {Boolean} whether the parent is the child or the child is in the parent
|
|
61
67
|
*/
|
|
62
68
|
function isOrContainsNode(parent, child, environment) {
|
|
63
|
-
|
|
69
|
+
var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
|
|
64
70
|
return result;
|
|
65
71
|
}
|
|
66
72
|
|
|
@@ -73,7 +79,7 @@ function isOrContainsNode(parent, child, environment) {
|
|
|
73
79
|
* @return {Function} the debounced function
|
|
74
80
|
*/
|
|
75
81
|
function debounce(fn, time) {
|
|
76
|
-
|
|
82
|
+
var timeoutId;
|
|
77
83
|
function cancel() {
|
|
78
84
|
if (timeoutId) {
|
|
79
85
|
clearTimeout(timeoutId);
|
|
@@ -84,9 +90,9 @@ function debounce(fn, time) {
|
|
|
84
90
|
args[_key] = arguments[_key];
|
|
85
91
|
}
|
|
86
92
|
cancel();
|
|
87
|
-
timeoutId = setTimeout(()
|
|
93
|
+
timeoutId = setTimeout(function () {
|
|
88
94
|
timeoutId = null;
|
|
89
|
-
fn(
|
|
95
|
+
fn.apply(void 0, args);
|
|
90
96
|
}, time);
|
|
91
97
|
}
|
|
92
98
|
wrapper.cancel = cancel;
|
|
@@ -108,9 +114,9 @@ function callAllEventHandlers() {
|
|
|
108
114
|
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
|
109
115
|
args[_key3 - 1] = arguments[_key3];
|
|
110
116
|
}
|
|
111
|
-
return fns.some(fn
|
|
117
|
+
return fns.some(function (fn) {
|
|
112
118
|
if (fn) {
|
|
113
|
-
fn(
|
|
119
|
+
fn.apply(void 0, [event].concat(args));
|
|
114
120
|
}
|
|
115
121
|
return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
|
|
116
122
|
});
|
|
@@ -120,8 +126,8 @@ function handleRefs() {
|
|
|
120
126
|
for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
121
127
|
refs[_key4] = arguments[_key4];
|
|
122
128
|
}
|
|
123
|
-
return node
|
|
124
|
-
refs.forEach(ref
|
|
129
|
+
return function (node) {
|
|
130
|
+
refs.forEach(function (ref) {
|
|
125
131
|
if (typeof ref === 'function') {
|
|
126
132
|
ref(node);
|
|
127
133
|
} else if (ref) {
|
|
@@ -155,11 +161,9 @@ function resetIdCounter() {
|
|
|
155
161
|
* @return {String} the a11y status message
|
|
156
162
|
*/
|
|
157
163
|
function getA11yStatusMessage$1(_ref2) {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
previousResultCount
|
|
162
|
-
} = _ref2;
|
|
164
|
+
var isOpen = _ref2.isOpen,
|
|
165
|
+
resultCount = _ref2.resultCount,
|
|
166
|
+
previousResultCount = _ref2.previousResultCount;
|
|
163
167
|
if (!isOpen) {
|
|
164
168
|
return '';
|
|
165
169
|
}
|
|
@@ -167,7 +171,7 @@ function getA11yStatusMessage$1(_ref2) {
|
|
|
167
171
|
return 'No results are available.';
|
|
168
172
|
}
|
|
169
173
|
if (resultCount !== previousResultCount) {
|
|
170
|
-
return
|
|
174
|
+
return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
|
|
171
175
|
}
|
|
172
176
|
return '';
|
|
173
177
|
}
|
|
@@ -214,9 +218,9 @@ function getElementProps(element) {
|
|
|
214
218
|
*/
|
|
215
219
|
function requiredProp(fnName, propName) {
|
|
216
220
|
// eslint-disable-next-line no-console
|
|
217
|
-
console.error(
|
|
221
|
+
console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
|
|
218
222
|
}
|
|
219
|
-
|
|
223
|
+
var stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
|
|
220
224
|
/**
|
|
221
225
|
* @param {Object} state the state object
|
|
222
226
|
* @return {Object} state that is relevant to downshift
|
|
@@ -225,8 +229,8 @@ function pickState(state) {
|
|
|
225
229
|
if (state === void 0) {
|
|
226
230
|
state = {};
|
|
227
231
|
}
|
|
228
|
-
|
|
229
|
-
stateKeys.forEach(k
|
|
232
|
+
var result = {};
|
|
233
|
+
stateKeys.forEach(function (k) {
|
|
230
234
|
if (state.hasOwnProperty(k)) {
|
|
231
235
|
result[k] = state[k];
|
|
232
236
|
}
|
|
@@ -246,7 +250,7 @@ function pickState(state) {
|
|
|
246
250
|
* @returns {Object} The merged controlled state.
|
|
247
251
|
*/
|
|
248
252
|
function getState(state, props) {
|
|
249
|
-
return Object.keys(state).reduce((prevState, key)
|
|
253
|
+
return Object.keys(state).reduce(function (prevState, key) {
|
|
250
254
|
prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
|
|
251
255
|
return prevState;
|
|
252
256
|
}, {});
|
|
@@ -271,13 +275,11 @@ function isControlledProp(props, key) {
|
|
|
271
275
|
* @return {String} keyboard key
|
|
272
276
|
*/
|
|
273
277
|
function normalizeArrowKey(event) {
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
keyCode
|
|
277
|
-
} = event;
|
|
278
|
+
var key = event.key,
|
|
279
|
+
keyCode = event.keyCode;
|
|
278
280
|
/* istanbul ignore next (ie) */
|
|
279
281
|
if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
|
|
280
|
-
return
|
|
282
|
+
return "Arrow" + key;
|
|
281
283
|
}
|
|
282
284
|
return key;
|
|
283
285
|
}
|
|
@@ -309,17 +311,17 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
|
|
|
309
311
|
if (itemCount === 0) {
|
|
310
312
|
return -1;
|
|
311
313
|
}
|
|
312
|
-
|
|
314
|
+
var itemsLastIndex = itemCount - 1;
|
|
313
315
|
if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
|
|
314
316
|
baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
|
|
315
317
|
}
|
|
316
|
-
|
|
318
|
+
var newIndex = baseIndex + moveAmount;
|
|
317
319
|
if (newIndex < 0) {
|
|
318
320
|
newIndex = circular ? itemsLastIndex : 0;
|
|
319
321
|
} else if (newIndex > itemsLastIndex) {
|
|
320
322
|
newIndex = circular ? 0 : itemsLastIndex;
|
|
321
323
|
}
|
|
322
|
-
|
|
324
|
+
var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
|
|
323
325
|
if (nonDisabledNewIndex === -1) {
|
|
324
326
|
return baseIndex >= itemCount ? -1 : baseIndex;
|
|
325
327
|
}
|
|
@@ -337,20 +339,20 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
|
|
|
337
339
|
* @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
|
|
338
340
|
*/
|
|
339
341
|
function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
|
|
340
|
-
|
|
342
|
+
var currentElementNode = getItemNodeFromIndex(baseIndex);
|
|
341
343
|
if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
|
|
342
344
|
return baseIndex;
|
|
343
345
|
}
|
|
344
346
|
if (moveAmount > 0) {
|
|
345
|
-
for (
|
|
347
|
+
for (var index = baseIndex + 1; index < itemCount; index++) {
|
|
346
348
|
if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
|
|
347
349
|
return index;
|
|
348
350
|
}
|
|
349
351
|
}
|
|
350
352
|
} else {
|
|
351
|
-
for (
|
|
352
|
-
if (!getItemNodeFromIndex(
|
|
353
|
-
return
|
|
353
|
+
for (var _index = baseIndex - 1; _index >= 0; _index--) {
|
|
354
|
+
if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
|
|
355
|
+
return _index;
|
|
354
356
|
}
|
|
355
357
|
}
|
|
356
358
|
}
|
|
@@ -374,28 +376,30 @@ function targetWithinDownshift(target, downshiftElements, environment, checkActi
|
|
|
374
376
|
if (checkActiveElement === void 0) {
|
|
375
377
|
checkActiveElement = true;
|
|
376
378
|
}
|
|
377
|
-
return downshiftElements.some(
|
|
379
|
+
return downshiftElements.some(function (contextNode) {
|
|
380
|
+
return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
|
|
381
|
+
});
|
|
378
382
|
}
|
|
379
383
|
|
|
380
384
|
// eslint-disable-next-line import/no-mutable-exports
|
|
381
|
-
|
|
385
|
+
var validateControlledUnchanged = noop;
|
|
382
386
|
/* istanbul ignore next */
|
|
383
387
|
if (process.env.NODE_ENV !== 'production') {
|
|
384
|
-
validateControlledUnchanged = (state, prevProps, nextProps)
|
|
385
|
-
|
|
386
|
-
Object.keys(state).forEach(propKey
|
|
388
|
+
validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
|
|
389
|
+
var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
|
|
390
|
+
Object.keys(state).forEach(function (propKey) {
|
|
387
391
|
if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
|
|
388
392
|
// eslint-disable-next-line no-console
|
|
389
|
-
console.error(
|
|
393
|
+
console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
|
|
390
394
|
} else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
|
|
391
395
|
// eslint-disable-next-line no-console
|
|
392
|
-
console.error(
|
|
396
|
+
console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
|
|
393
397
|
}
|
|
394
398
|
});
|
|
395
399
|
};
|
|
396
400
|
}
|
|
397
401
|
|
|
398
|
-
|
|
402
|
+
var cleanupStatus = debounce(function (documentProp) {
|
|
399
403
|
getStatusDiv(documentProp).textContent = '';
|
|
400
404
|
}, 500);
|
|
401
405
|
|
|
@@ -404,7 +408,7 @@ const cleanupStatus = debounce(documentProp => {
|
|
|
404
408
|
* @param {Object} documentProp document passed by the user.
|
|
405
409
|
*/
|
|
406
410
|
function setStatus(status, documentProp) {
|
|
407
|
-
|
|
411
|
+
var div = getStatusDiv(documentProp);
|
|
408
412
|
if (!status) {
|
|
409
413
|
return;
|
|
410
414
|
}
|
|
@@ -421,7 +425,7 @@ function getStatusDiv(documentProp) {
|
|
|
421
425
|
if (documentProp === void 0) {
|
|
422
426
|
documentProp = document;
|
|
423
427
|
}
|
|
424
|
-
|
|
428
|
+
var statusDiv = documentProp.getElementById('a11y-status-message');
|
|
425
429
|
if (statusDiv) {
|
|
426
430
|
return statusDiv;
|
|
427
431
|
}
|
|
@@ -444,23 +448,23 @@ function getStatusDiv(documentProp) {
|
|
|
444
448
|
return statusDiv;
|
|
445
449
|
}
|
|
446
450
|
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
451
|
+
var unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
|
|
452
|
+
var mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
|
|
453
|
+
var itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
|
|
454
|
+
var keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
|
|
455
|
+
var keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
|
|
456
|
+
var keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
|
|
457
|
+
var keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
|
|
458
|
+
var keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
|
|
459
|
+
var keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
|
|
460
|
+
var clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
|
|
461
|
+
var blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
|
|
462
|
+
var changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
|
|
463
|
+
var keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
|
|
464
|
+
var clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
|
|
465
|
+
var blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
|
|
466
|
+
var controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
|
|
467
|
+
var touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
|
|
464
468
|
|
|
465
469
|
var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
|
|
466
470
|
__proto__: null,
|
|
@@ -483,37 +487,48 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
|
|
|
483
487
|
touchEnd: touchEnd
|
|
484
488
|
});
|
|
485
489
|
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
+
var _excluded$4 = ["refKey", "ref"],
|
|
491
|
+
_excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
|
|
492
|
+
_excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
|
|
493
|
+
_excluded4$1 = ["refKey", "ref"],
|
|
494
|
+
_excluded5 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
|
|
495
|
+
var Downshift = /*#__PURE__*/function () {
|
|
496
|
+
var Downshift = /*#__PURE__*/function (_Component) {
|
|
497
|
+
_inheritsLoose__default["default"](Downshift, _Component);
|
|
498
|
+
function Downshift(_props) {
|
|
490
499
|
var _this;
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
this
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
500
|
+
_this = _Component.call(this, _props) || this;
|
|
501
|
+
// fancy destructuring + defaults + aliases
|
|
502
|
+
// this basically says each value of state should either be set to
|
|
503
|
+
// the initial value or the default value if the initial value is not provided
|
|
504
|
+
_this.id = _this.props.id || "downshift-" + generateId();
|
|
505
|
+
_this.menuId = _this.props.menuId || _this.id + "-menu";
|
|
506
|
+
_this.labelId = _this.props.labelId || _this.id + "-label";
|
|
507
|
+
_this.inputId = _this.props.inputId || _this.id + "-input";
|
|
508
|
+
_this.getItemId = _this.props.getItemId || function (index) {
|
|
509
|
+
return _this.id + "-item-" + index;
|
|
510
|
+
};
|
|
511
|
+
_this.input = null;
|
|
512
|
+
_this.items = [];
|
|
513
|
+
_this.itemCount = null;
|
|
514
|
+
_this.previousResultCount = 0;
|
|
515
|
+
_this.timeoutIds = [];
|
|
516
|
+
_this.internalSetTimeout = function (fn, time) {
|
|
517
|
+
var id = setTimeout(function () {
|
|
518
|
+
_this.timeoutIds = _this.timeoutIds.filter(function (i) {
|
|
519
|
+
return i !== id;
|
|
520
|
+
});
|
|
506
521
|
fn();
|
|
507
522
|
}, time);
|
|
508
|
-
|
|
523
|
+
_this.timeoutIds.push(id);
|
|
509
524
|
};
|
|
510
|
-
|
|
511
|
-
|
|
525
|
+
_this.setItemCount = function (count) {
|
|
526
|
+
_this.itemCount = count;
|
|
512
527
|
};
|
|
513
|
-
|
|
514
|
-
|
|
528
|
+
_this.unsetItemCount = function () {
|
|
529
|
+
_this.itemCount = null;
|
|
515
530
|
};
|
|
516
|
-
|
|
531
|
+
_this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
|
|
517
532
|
if (highlightedIndex === void 0) {
|
|
518
533
|
highlightedIndex = _this.props.defaultHighlightedIndex;
|
|
519
534
|
}
|
|
@@ -521,43 +536,41 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
521
536
|
otherStateToSet = {};
|
|
522
537
|
}
|
|
523
538
|
otherStateToSet = pickState(otherStateToSet);
|
|
524
|
-
_this.internalSetState({
|
|
525
|
-
highlightedIndex
|
|
526
|
-
|
|
527
|
-
});
|
|
539
|
+
_this.internalSetState(_extends__default["default"]({
|
|
540
|
+
highlightedIndex: highlightedIndex
|
|
541
|
+
}, otherStateToSet));
|
|
528
542
|
};
|
|
529
|
-
|
|
530
|
-
|
|
543
|
+
_this.clearSelection = function (cb) {
|
|
544
|
+
_this.internalSetState({
|
|
531
545
|
selectedItem: null,
|
|
532
546
|
inputValue: '',
|
|
533
|
-
highlightedIndex:
|
|
534
|
-
isOpen:
|
|
547
|
+
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
548
|
+
isOpen: _this.props.defaultIsOpen
|
|
535
549
|
}, cb);
|
|
536
550
|
};
|
|
537
|
-
|
|
551
|
+
_this.selectItem = function (item, otherStateToSet, cb) {
|
|
538
552
|
otherStateToSet = pickState(otherStateToSet);
|
|
539
|
-
|
|
540
|
-
isOpen:
|
|
541
|
-
highlightedIndex:
|
|
553
|
+
_this.internalSetState(_extends__default["default"]({
|
|
554
|
+
isOpen: _this.props.defaultIsOpen,
|
|
555
|
+
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
542
556
|
selectedItem: item,
|
|
543
|
-
inputValue:
|
|
544
|
-
|
|
545
|
-
}, cb);
|
|
557
|
+
inputValue: _this.props.itemToString(item)
|
|
558
|
+
}, otherStateToSet), cb);
|
|
546
559
|
};
|
|
547
|
-
|
|
548
|
-
|
|
560
|
+
_this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
|
|
561
|
+
var item = _this.items[itemIndex];
|
|
549
562
|
if (item == null) {
|
|
550
563
|
return;
|
|
551
564
|
}
|
|
552
|
-
|
|
565
|
+
_this.selectItem(item, otherStateToSet, cb);
|
|
553
566
|
};
|
|
554
|
-
|
|
555
|
-
return
|
|
567
|
+
_this.selectHighlightedItem = function (otherStateToSet, cb) {
|
|
568
|
+
return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
|
|
556
569
|
};
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
570
|
+
_this.internalSetState = function (stateToSet, cb) {
|
|
571
|
+
var isItemSelected, onChangeArg;
|
|
572
|
+
var onStateChangeArg = {};
|
|
573
|
+
var isStateToSetFunction = typeof stateToSet === 'function';
|
|
561
574
|
|
|
562
575
|
// we want to call `onInputValueChange` before the `setState` call
|
|
563
576
|
// so someone controlling the `inputValue` state gets notified of
|
|
@@ -565,24 +578,21 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
565
578
|
// preserving the cursor position.
|
|
566
579
|
// See https://github.com/downshift-js/downshift/issues/217 for more info.
|
|
567
580
|
if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
|
|
568
|
-
|
|
569
|
-
...this.getStateAndHelpers(),
|
|
570
|
-
...stateToSet
|
|
571
|
-
});
|
|
581
|
+
_this.props.onInputValueChange(stateToSet.inputValue, _extends__default["default"]({}, _this.getStateAndHelpers(), stateToSet));
|
|
572
582
|
}
|
|
573
|
-
return
|
|
574
|
-
state =
|
|
575
|
-
|
|
583
|
+
return _this.setState(function (state) {
|
|
584
|
+
state = _this.getState(state);
|
|
585
|
+
var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
|
|
576
586
|
|
|
577
587
|
// Your own function that could modify the state that will be set.
|
|
578
|
-
newStateToSet =
|
|
588
|
+
newStateToSet = _this.props.stateReducer(state, newStateToSet);
|
|
579
589
|
|
|
580
590
|
// checks if an item is selected, regardless of if it's different from
|
|
581
591
|
// what was selected before
|
|
582
592
|
// used to determine if onSelect and onChange callbacks should be called
|
|
583
593
|
isItemSelected = newStateToSet.hasOwnProperty('selectedItem');
|
|
584
594
|
// this keeps track of the object we want to call with setState
|
|
585
|
-
|
|
595
|
+
var nextState = {};
|
|
586
596
|
// we need to call on change if the outside world is controlling any of our state
|
|
587
597
|
// and we're trying to update that state. OR if the selection has changed and we're
|
|
588
598
|
// trying to update the selection
|
|
@@ -590,7 +600,7 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
590
600
|
onChangeArg = newStateToSet.selectedItem;
|
|
591
601
|
}
|
|
592
602
|
newStateToSet.type = newStateToSet.type || unknown;
|
|
593
|
-
Object.keys(newStateToSet).forEach(key
|
|
603
|
+
Object.keys(newStateToSet).forEach(function (key) {
|
|
594
604
|
// onStateChangeArg should only have the state that is
|
|
595
605
|
// actually changing
|
|
596
606
|
if (state[key] !== newStateToSet[key]) {
|
|
@@ -607,7 +617,7 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
607
617
|
}
|
|
608
618
|
newStateToSet[key];
|
|
609
619
|
// if it's coming from props, then we don't care to set it internally
|
|
610
|
-
if (!isControlledProp(
|
|
620
|
+
if (!isControlledProp(_this.props, key)) {
|
|
611
621
|
nextState[key] = newStateToSet[key];
|
|
612
622
|
}
|
|
613
623
|
});
|
|
@@ -615,66 +625,58 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
615
625
|
// if stateToSet is a function, then we weren't able to call onInputValueChange
|
|
616
626
|
// earlier, so we'll call it now that we know what the inputValue state will be.
|
|
617
627
|
if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
|
|
618
|
-
|
|
619
|
-
...this.getStateAndHelpers(),
|
|
620
|
-
...newStateToSet
|
|
621
|
-
});
|
|
628
|
+
_this.props.onInputValueChange(newStateToSet.inputValue, _extends__default["default"]({}, _this.getStateAndHelpers(), newStateToSet));
|
|
622
629
|
}
|
|
623
630
|
return nextState;
|
|
624
|
-
}, ()
|
|
631
|
+
}, function () {
|
|
625
632
|
// call the provided callback if it's a function
|
|
626
633
|
cbToCb(cb)();
|
|
627
634
|
|
|
628
635
|
// only call the onStateChange and onChange callbacks if
|
|
629
636
|
// we have relevant information to pass them.
|
|
630
|
-
|
|
637
|
+
var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
|
|
631
638
|
if (hasMoreStateThanType) {
|
|
632
|
-
|
|
639
|
+
_this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
|
|
633
640
|
}
|
|
634
641
|
if (isItemSelected) {
|
|
635
|
-
|
|
642
|
+
_this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
|
|
636
643
|
}
|
|
637
644
|
if (onChangeArg !== undefined) {
|
|
638
|
-
|
|
645
|
+
_this.props.onChange(onChangeArg, _this.getStateAndHelpers());
|
|
639
646
|
}
|
|
640
647
|
// this is currently undocumented and therefore subject to change
|
|
641
648
|
// We'll try to not break it, but just be warned.
|
|
642
|
-
|
|
649
|
+
_this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
|
|
643
650
|
});
|
|
644
651
|
};
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
652
|
+
_this.rootRef = function (node) {
|
|
653
|
+
return _this._rootNode = node;
|
|
654
|
+
};
|
|
655
|
+
_this.getRootProps = function (_temp, _temp2) {
|
|
656
|
+
var _extends2;
|
|
657
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
658
|
+
_ref$refKey = _ref.refKey,
|
|
659
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
|
660
|
+
ref = _ref.ref,
|
|
661
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
|
|
662
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
663
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
664
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
655
665
|
// this is used in the render to know whether the user has called getRootProps.
|
|
656
666
|
// It uses that to know whether to apply the props automatically
|
|
657
667
|
_this.getRootProps.called = true;
|
|
658
668
|
_this.getRootProps.refKey = refKey;
|
|
659
669
|
_this.getRootProps.suppressRefError = suppressRefError;
|
|
660
|
-
|
|
661
|
-
isOpen
|
|
662
|
-
} = _this.
|
|
663
|
-
return {
|
|
664
|
-
[refKey]: handleRefs(ref, _this.rootRef),
|
|
665
|
-
role: 'combobox',
|
|
666
|
-
'aria-expanded': isOpen,
|
|
667
|
-
'aria-haspopup': 'listbox',
|
|
668
|
-
'aria-owns': isOpen ? _this.menuId : null,
|
|
669
|
-
'aria-labelledby': _this.labelId,
|
|
670
|
-
...rest
|
|
671
|
-
};
|
|
670
|
+
var _this$getState = _this.getState(),
|
|
671
|
+
isOpen = _this$getState.isOpen;
|
|
672
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
|
|
672
673
|
};
|
|
673
|
-
|
|
674
|
-
ArrowDown(event) {
|
|
674
|
+
_this.keyDownHandlers = {
|
|
675
|
+
ArrowDown: function ArrowDown(event) {
|
|
676
|
+
var _this2 = this;
|
|
675
677
|
event.preventDefault();
|
|
676
678
|
if (this.getState().isOpen) {
|
|
677
|
-
|
|
679
|
+
var amount = event.shiftKey ? 5 : 1;
|
|
678
680
|
this.moveHighlightedIndex(amount, {
|
|
679
681
|
type: keyDownArrowDown
|
|
680
682
|
});
|
|
@@ -682,24 +684,26 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
682
684
|
this.internalSetState({
|
|
683
685
|
isOpen: true,
|
|
684
686
|
type: keyDownArrowDown
|
|
685
|
-
}, ()
|
|
686
|
-
|
|
687
|
+
}, function () {
|
|
688
|
+
var itemCount = _this2.getItemCount();
|
|
687
689
|
if (itemCount > 0) {
|
|
688
|
-
|
|
689
|
-
highlightedIndex
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
690
|
+
var _this2$getState = _this2.getState(),
|
|
691
|
+
highlightedIndex = _this2$getState.highlightedIndex;
|
|
692
|
+
var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
|
|
693
|
+
return _this2.getItemNodeFromIndex(index);
|
|
694
|
+
});
|
|
695
|
+
_this2.setHighlightedIndex(nextHighlightedIndex, {
|
|
693
696
|
type: keyDownArrowDown
|
|
694
697
|
});
|
|
695
698
|
}
|
|
696
699
|
});
|
|
697
700
|
}
|
|
698
701
|
},
|
|
699
|
-
ArrowUp(event) {
|
|
702
|
+
ArrowUp: function ArrowUp(event) {
|
|
703
|
+
var _this3 = this;
|
|
700
704
|
event.preventDefault();
|
|
701
705
|
if (this.getState().isOpen) {
|
|
702
|
-
|
|
706
|
+
var amount = event.shiftKey ? -5 : -1;
|
|
703
707
|
this.moveHighlightedIndex(amount, {
|
|
704
708
|
type: keyDownArrowUp
|
|
705
709
|
});
|
|
@@ -707,32 +711,32 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
707
711
|
this.internalSetState({
|
|
708
712
|
isOpen: true,
|
|
709
713
|
type: keyDownArrowUp
|
|
710
|
-
}, ()
|
|
711
|
-
|
|
714
|
+
}, function () {
|
|
715
|
+
var itemCount = _this3.getItemCount();
|
|
712
716
|
if (itemCount > 0) {
|
|
713
|
-
|
|
714
|
-
highlightedIndex
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
717
|
+
var _this3$getState = _this3.getState(),
|
|
718
|
+
highlightedIndex = _this3$getState.highlightedIndex;
|
|
719
|
+
var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
|
|
720
|
+
return _this3.getItemNodeFromIndex(index);
|
|
721
|
+
});
|
|
722
|
+
_this3.setHighlightedIndex(nextHighlightedIndex, {
|
|
718
723
|
type: keyDownArrowUp
|
|
719
724
|
});
|
|
720
725
|
}
|
|
721
726
|
});
|
|
722
727
|
}
|
|
723
728
|
},
|
|
724
|
-
Enter(event) {
|
|
729
|
+
Enter: function Enter(event) {
|
|
725
730
|
if (event.which === 229) {
|
|
726
731
|
return;
|
|
727
732
|
}
|
|
728
|
-
|
|
729
|
-
isOpen,
|
|
730
|
-
highlightedIndex
|
|
731
|
-
} = this.getState();
|
|
733
|
+
var _this$getState2 = this.getState(),
|
|
734
|
+
isOpen = _this$getState2.isOpen,
|
|
735
|
+
highlightedIndex = _this$getState2.highlightedIndex;
|
|
732
736
|
if (isOpen && highlightedIndex != null) {
|
|
733
737
|
event.preventDefault();
|
|
734
|
-
|
|
735
|
-
|
|
738
|
+
var item = this.items[highlightedIndex];
|
|
739
|
+
var itemNode = this.getItemNodeFromIndex(highlightedIndex);
|
|
736
740
|
if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
|
|
737
741
|
return;
|
|
738
742
|
}
|
|
@@ -741,181 +745,176 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
741
745
|
});
|
|
742
746
|
}
|
|
743
747
|
},
|
|
744
|
-
Escape(event) {
|
|
748
|
+
Escape: function Escape(event) {
|
|
745
749
|
event.preventDefault();
|
|
746
|
-
this.reset({
|
|
747
|
-
type: keyDownEscape
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
});
|
|
750
|
+
this.reset(_extends__default["default"]({
|
|
751
|
+
type: keyDownEscape
|
|
752
|
+
}, !this.state.isOpen && {
|
|
753
|
+
selectedItem: null,
|
|
754
|
+
inputValue: ''
|
|
755
|
+
}));
|
|
753
756
|
}
|
|
754
757
|
};
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
' '(event) {
|
|
758
|
+
_this.buttonKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
|
|
759
|
+
' ': function _(event) {
|
|
758
760
|
event.preventDefault();
|
|
759
761
|
this.toggleMenu({
|
|
760
762
|
type: keyDownSpaceButton
|
|
761
763
|
});
|
|
762
764
|
}
|
|
763
|
-
};
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
isOpen
|
|
769
|
-
} = this.getState();
|
|
765
|
+
});
|
|
766
|
+
_this.inputKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
|
|
767
|
+
Home: function Home(event) {
|
|
768
|
+
var _this4 = this;
|
|
769
|
+
var _this$getState3 = this.getState(),
|
|
770
|
+
isOpen = _this$getState3.isOpen;
|
|
770
771
|
if (!isOpen) {
|
|
771
772
|
return;
|
|
772
773
|
}
|
|
773
774
|
event.preventDefault();
|
|
774
|
-
|
|
775
|
+
var itemCount = this.getItemCount();
|
|
775
776
|
if (itemCount <= 0 || !isOpen) {
|
|
776
777
|
return;
|
|
777
778
|
}
|
|
778
779
|
|
|
779
780
|
// get next non-disabled starting downwards from 0 if that's disabled.
|
|
780
|
-
|
|
781
|
+
var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) {
|
|
782
|
+
return _this4.getItemNodeFromIndex(index);
|
|
783
|
+
}, false);
|
|
781
784
|
this.setHighlightedIndex(newHighlightedIndex, {
|
|
782
785
|
type: keyDownHome
|
|
783
786
|
});
|
|
784
787
|
},
|
|
785
|
-
End(event) {
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
788
|
+
End: function End(event) {
|
|
789
|
+
var _this5 = this;
|
|
790
|
+
var _this$getState4 = this.getState(),
|
|
791
|
+
isOpen = _this$getState4.isOpen;
|
|
789
792
|
if (!isOpen) {
|
|
790
793
|
return;
|
|
791
794
|
}
|
|
792
795
|
event.preventDefault();
|
|
793
|
-
|
|
796
|
+
var itemCount = this.getItemCount();
|
|
794
797
|
if (itemCount <= 0 || !isOpen) {
|
|
795
798
|
return;
|
|
796
799
|
}
|
|
797
800
|
|
|
798
801
|
// get next non-disabled starting upwards from last index if that's disabled.
|
|
799
|
-
|
|
802
|
+
var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) {
|
|
803
|
+
return _this5.getItemNodeFromIndex(index);
|
|
804
|
+
}, false);
|
|
800
805
|
this.setHighlightedIndex(newHighlightedIndex, {
|
|
801
806
|
type: keyDownEnd
|
|
802
807
|
});
|
|
803
808
|
}
|
|
804
|
-
};
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
onClick
|
|
808
|
-
onPress
|
|
809
|
-
onKeyDown
|
|
810
|
-
onKeyUp
|
|
811
|
-
onBlur
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
} = _this.getState();
|
|
817
|
-
const enabledEventHandlers = /* istanbul ignore next (react-native) */
|
|
809
|
+
});
|
|
810
|
+
_this.getToggleButtonProps = function (_temp3) {
|
|
811
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3;
|
|
812
|
+
_ref3.onClick;
|
|
813
|
+
var onPress = _ref3.onPress;
|
|
814
|
+
_ref3.onKeyDown;
|
|
815
|
+
_ref3.onKeyUp;
|
|
816
|
+
_ref3.onBlur;
|
|
817
|
+
var rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$3);
|
|
818
|
+
var _this$getState5 = _this.getState(),
|
|
819
|
+
isOpen = _this$getState5.isOpen;
|
|
820
|
+
var enabledEventHandlers = /* istanbul ignore next (react-native) */
|
|
818
821
|
{
|
|
819
822
|
onPress: callAllEventHandlers(onPress, _this.buttonHandleClick)
|
|
820
823
|
} ;
|
|
821
|
-
|
|
822
|
-
return {
|
|
824
|
+
var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
|
|
825
|
+
return _extends__default["default"]({
|
|
823
826
|
type: 'button',
|
|
824
827
|
role: 'button',
|
|
825
828
|
'aria-label': isOpen ? 'close menu' : 'open menu',
|
|
826
829
|
'aria-haspopup': true,
|
|
827
|
-
'data-toggle': true
|
|
828
|
-
|
|
829
|
-
...rest
|
|
830
|
-
};
|
|
830
|
+
'data-toggle': true
|
|
831
|
+
}, eventHandlers, rest);
|
|
831
832
|
};
|
|
832
|
-
|
|
833
|
+
_this.buttonHandleKeyUp = function (event) {
|
|
833
834
|
// Prevent click event from emitting in Firefox
|
|
834
835
|
event.preventDefault();
|
|
835
836
|
};
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
if (
|
|
839
|
-
|
|
837
|
+
_this.buttonHandleKeyDown = function (event) {
|
|
838
|
+
var key = normalizeArrowKey(event);
|
|
839
|
+
if (_this.buttonKeyDownHandlers[key]) {
|
|
840
|
+
_this.buttonKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
|
|
840
841
|
}
|
|
841
842
|
};
|
|
842
|
-
|
|
843
|
+
_this.buttonHandleClick = function (event) {
|
|
843
844
|
event.preventDefault();
|
|
844
845
|
// to simplify testing components that use downshift, we'll not wrap this in a setTimeout
|
|
845
846
|
// if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
|
|
846
847
|
// when building for production and should therefore have no impact on production code.
|
|
847
848
|
if (process.env.NODE_ENV === 'test') {
|
|
848
|
-
|
|
849
|
+
_this.toggleMenu({
|
|
849
850
|
type: clickButton
|
|
850
851
|
});
|
|
851
852
|
} else {
|
|
852
853
|
// Ensure that toggle of menu occurs after the potential blur event in iOS
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
854
|
+
_this.internalSetTimeout(function () {
|
|
855
|
+
return _this.toggleMenu({
|
|
856
|
+
type: clickButton
|
|
857
|
+
});
|
|
858
|
+
});
|
|
856
859
|
}
|
|
857
860
|
};
|
|
858
|
-
|
|
859
|
-
|
|
861
|
+
_this.buttonHandleBlur = function (event) {
|
|
862
|
+
var blurTarget = event.target; // Save blur target for comparison with activeElement later
|
|
860
863
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
|
|
861
|
-
|
|
862
|
-
if (!
|
|
864
|
+
_this.internalSetTimeout(function () {
|
|
865
|
+
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)
|
|
863
866
|
) {
|
|
864
|
-
|
|
867
|
+
_this.reset({
|
|
865
868
|
type: blurButton
|
|
866
869
|
});
|
|
867
870
|
}
|
|
868
871
|
});
|
|
869
872
|
};
|
|
870
|
-
|
|
871
|
-
return {
|
|
872
|
-
htmlFor:
|
|
873
|
-
id:
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
let onChangeKey;
|
|
887
|
-
let eventHandlers = {};
|
|
873
|
+
_this.getLabelProps = function (props) {
|
|
874
|
+
return _extends__default["default"]({
|
|
875
|
+
htmlFor: _this.inputId,
|
|
876
|
+
id: _this.labelId
|
|
877
|
+
}, props);
|
|
878
|
+
};
|
|
879
|
+
_this.getInputProps = function (_temp4) {
|
|
880
|
+
var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
|
881
|
+
onKeyDown = _ref4.onKeyDown,
|
|
882
|
+
onBlur = _ref4.onBlur,
|
|
883
|
+
onChange = _ref4.onChange,
|
|
884
|
+
onInput = _ref4.onInput,
|
|
885
|
+
onChangeText = _ref4.onChangeText,
|
|
886
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded3$2);
|
|
887
|
+
var onChangeKey;
|
|
888
|
+
var eventHandlers = {};
|
|
888
889
|
|
|
889
890
|
/* istanbul ignore next (preact) */
|
|
890
891
|
{
|
|
891
892
|
onChangeKey = 'onChange';
|
|
892
893
|
}
|
|
893
|
-
|
|
894
|
-
inputValue,
|
|
895
|
-
isOpen,
|
|
896
|
-
highlightedIndex
|
|
897
|
-
} = _this.getState();
|
|
894
|
+
var _this$getState6 = _this.getState(),
|
|
895
|
+
inputValue = _this$getState6.inputValue,
|
|
896
|
+
isOpen = _this$getState6.isOpen,
|
|
897
|
+
highlightedIndex = _this$getState6.highlightedIndex;
|
|
898
898
|
if (!rest.disabled) {
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
|
|
902
|
-
onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
|
903
|
-
};
|
|
899
|
+
var _eventHandlers;
|
|
900
|
+
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
|
|
904
901
|
}
|
|
905
902
|
|
|
906
903
|
/* istanbul ignore if (react-native) */
|
|
907
904
|
{
|
|
908
905
|
eventHandlers = {
|
|
909
906
|
onChange: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
|
|
910
|
-
onChangeText: callAllEventHandlers(onChangeText, onInput, text
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
907
|
+
onChangeText: callAllEventHandlers(onChangeText, onInput, function (text) {
|
|
908
|
+
return _this.inputHandleChange({
|
|
909
|
+
nativeEvent: {
|
|
910
|
+
text: text
|
|
911
|
+
}
|
|
912
|
+
});
|
|
913
|
+
}),
|
|
915
914
|
onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
|
916
915
|
};
|
|
917
916
|
}
|
|
918
|
-
return {
|
|
917
|
+
return _extends__default["default"]({
|
|
919
918
|
'aria-autocomplete': 'list',
|
|
920
919
|
'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
|
|
921
920
|
'aria-controls': isOpen ? _this.menuId : null,
|
|
@@ -924,82 +923,76 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
924
923
|
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
925
924
|
autoComplete: 'off',
|
|
926
925
|
value: inputValue,
|
|
927
|
-
id: _this.inputId
|
|
928
|
-
|
|
929
|
-
...rest
|
|
930
|
-
};
|
|
926
|
+
id: _this.inputId
|
|
927
|
+
}, eventHandlers, rest);
|
|
931
928
|
};
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
if (key &&
|
|
935
|
-
|
|
929
|
+
_this.inputHandleKeyDown = function (event) {
|
|
930
|
+
var key = normalizeArrowKey(event);
|
|
931
|
+
if (key && _this.inputKeyDownHandlers[key]) {
|
|
932
|
+
_this.inputKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
|
|
936
933
|
}
|
|
937
934
|
};
|
|
938
|
-
|
|
939
|
-
|
|
935
|
+
_this.inputHandleChange = function (event) {
|
|
936
|
+
_this.internalSetState({
|
|
940
937
|
type: changeInput,
|
|
941
938
|
isOpen: true,
|
|
942
939
|
inputValue: /* istanbul ignore next (react-native) */event.nativeEvent.text ,
|
|
943
|
-
highlightedIndex:
|
|
940
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
944
941
|
});
|
|
945
942
|
};
|
|
946
|
-
|
|
943
|
+
_this.inputHandleBlur = function () {
|
|
947
944
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
if (!
|
|
951
|
-
|
|
945
|
+
_this.internalSetTimeout(function () {
|
|
946
|
+
var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
|
|
947
|
+
if (!_this.isMouseDown && !downshiftButtonIsActive) {
|
|
948
|
+
_this.reset({
|
|
952
949
|
type: blurInput
|
|
953
950
|
});
|
|
954
951
|
}
|
|
955
952
|
});
|
|
956
953
|
};
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
};
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
954
|
+
_this.menuRef = function (node) {
|
|
955
|
+
_this._menuNode = node;
|
|
956
|
+
};
|
|
957
|
+
_this.getMenuProps = function (_temp5, _temp6) {
|
|
958
|
+
var _extends3;
|
|
959
|
+
var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
|
960
|
+
_ref5$refKey = _ref5.refKey,
|
|
961
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
962
|
+
ref = _ref5.ref,
|
|
963
|
+
props = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded4$1);
|
|
964
|
+
var _ref6 = _temp6 === void 0 ? {} : _temp6,
|
|
965
|
+
_ref6$suppressRefErro = _ref6.suppressRefError,
|
|
966
|
+
suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
|
|
969
967
|
_this.getMenuProps.called = true;
|
|
970
968
|
_this.getMenuProps.refKey = refKey;
|
|
971
969
|
_this.getMenuProps.suppressRefError = suppressRefError;
|
|
972
|
-
return {
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
onPress,
|
|
986
|
-
index,
|
|
987
|
-
item = process.env.NODE_ENV === 'production' ? /* istanbul ignore next */undefined : requiredProp('getItemProps', 'item'),
|
|
988
|
-
...rest
|
|
989
|
-
} = _temp7 === void 0 ? {} : _temp7;
|
|
970
|
+
return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
|
|
971
|
+
};
|
|
972
|
+
_this.getItemProps = function (_temp7) {
|
|
973
|
+
var _enabledEventHandlers;
|
|
974
|
+
var _ref7 = _temp7 === void 0 ? {} : _temp7,
|
|
975
|
+
onMouseMove = _ref7.onMouseMove,
|
|
976
|
+
onMouseDown = _ref7.onMouseDown;
|
|
977
|
+
_ref7.onClick;
|
|
978
|
+
var onPress = _ref7.onPress,
|
|
979
|
+
index = _ref7.index,
|
|
980
|
+
_ref7$item = _ref7.item,
|
|
981
|
+
item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ? /* istanbul ignore next */undefined : requiredProp('getItemProps', 'item') : _ref7$item,
|
|
982
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref7, _excluded5);
|
|
990
983
|
if (index === undefined) {
|
|
991
984
|
_this.items.push(item);
|
|
992
985
|
index = _this.items.indexOf(item);
|
|
993
986
|
} else {
|
|
994
987
|
_this.items[index] = item;
|
|
995
988
|
}
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
989
|
+
var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
|
|
990
|
+
var customClickHandler = /* istanbul ignore next (react-native) */onPress ;
|
|
991
|
+
var enabledEventHandlers = (_enabledEventHandlers = {
|
|
999
992
|
// onMouseMove is used over onMouseEnter here. onMouseMove
|
|
1000
993
|
// is only triggered on actual mouse movement while onMouseEnter
|
|
1001
994
|
// can fire on DOM changes, interrupting keyboard navigation
|
|
1002
|
-
onMouseMove: callAllEventHandlers(onMouseMove, ()
|
|
995
|
+
onMouseMove: callAllEventHandlers(onMouseMove, function () {
|
|
1003
996
|
if (index === _this.getState().highlightedIndex) {
|
|
1004
997
|
return;
|
|
1005
998
|
}
|
|
@@ -1012,75 +1005,66 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1012
1005
|
// from under the user which is currently scrolling/moving the
|
|
1013
1006
|
// cursor
|
|
1014
1007
|
_this.avoidScrolling = true;
|
|
1015
|
-
_this.internalSetTimeout(()
|
|
1008
|
+
_this.internalSetTimeout(function () {
|
|
1009
|
+
return _this.avoidScrolling = false;
|
|
1010
|
+
}, 250);
|
|
1016
1011
|
}),
|
|
1017
|
-
onMouseDown: callAllEventHandlers(onMouseDown, event
|
|
1012
|
+
onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
|
|
1018
1013
|
// This prevents the activeElement from being changed
|
|
1019
1014
|
// to the item so it can remain with the current activeElement
|
|
1020
1015
|
// which is a more common use case.
|
|
1021
1016
|
event.preventDefault();
|
|
1022
|
-
}),
|
|
1023
|
-
[onSelectKey]: callAllEventHandlers(customClickHandler, () => {
|
|
1024
|
-
_this.selectItemAtIndex(index, {
|
|
1025
|
-
type: clickItem
|
|
1026
|
-
});
|
|
1027
1017
|
})
|
|
1028
|
-
}
|
|
1018
|
+
}, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
|
|
1019
|
+
_this.selectItemAtIndex(index, {
|
|
1020
|
+
type: clickItem
|
|
1021
|
+
});
|
|
1022
|
+
}), _enabledEventHandlers);
|
|
1029
1023
|
|
|
1030
1024
|
// Passing down the onMouseDown handler to prevent redirect
|
|
1031
1025
|
// of the activeElement if clicking on disabled items
|
|
1032
|
-
|
|
1026
|
+
var eventHandlers = rest.disabled ? {
|
|
1033
1027
|
onMouseDown: enabledEventHandlers.onMouseDown
|
|
1034
1028
|
} : enabledEventHandlers;
|
|
1035
|
-
return {
|
|
1029
|
+
return _extends__default["default"]({
|
|
1036
1030
|
id: _this.getItemId(index),
|
|
1037
1031
|
role: 'option',
|
|
1038
|
-
'aria-selected': _this.getState().highlightedIndex === index
|
|
1039
|
-
|
|
1040
|
-
...rest
|
|
1041
|
-
};
|
|
1032
|
+
'aria-selected': _this.getState().highlightedIndex === index
|
|
1033
|
+
}, eventHandlers, rest);
|
|
1042
1034
|
};
|
|
1043
|
-
|
|
1044
|
-
|
|
1035
|
+
_this.clearItems = function () {
|
|
1036
|
+
_this.items = [];
|
|
1045
1037
|
};
|
|
1046
|
-
|
|
1038
|
+
_this.reset = function (otherStateToSet, cb) {
|
|
1047
1039
|
if (otherStateToSet === void 0) {
|
|
1048
1040
|
otherStateToSet = {};
|
|
1049
1041
|
}
|
|
1050
1042
|
otherStateToSet = pickState(otherStateToSet);
|
|
1051
|
-
_this.internalSetState(
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
} = _ref;
|
|
1055
|
-
return {
|
|
1043
|
+
_this.internalSetState(function (_ref8) {
|
|
1044
|
+
var selectedItem = _ref8.selectedItem;
|
|
1045
|
+
return _extends__default["default"]({
|
|
1056
1046
|
isOpen: _this.props.defaultIsOpen,
|
|
1057
1047
|
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
1058
|
-
inputValue: _this.props.itemToString(selectedItem)
|
|
1059
|
-
|
|
1060
|
-
};
|
|
1048
|
+
inputValue: _this.props.itemToString(selectedItem)
|
|
1049
|
+
}, otherStateToSet);
|
|
1061
1050
|
}, cb);
|
|
1062
1051
|
};
|
|
1063
|
-
|
|
1052
|
+
_this.toggleMenu = function (otherStateToSet, cb) {
|
|
1064
1053
|
if (otherStateToSet === void 0) {
|
|
1065
1054
|
otherStateToSet = {};
|
|
1066
1055
|
}
|
|
1067
1056
|
otherStateToSet = pickState(otherStateToSet);
|
|
1068
|
-
_this.internalSetState(
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
}, () => {
|
|
1080
|
-
const {
|
|
1081
|
-
isOpen,
|
|
1082
|
-
highlightedIndex
|
|
1083
|
-
} = _this.getState();
|
|
1057
|
+
_this.internalSetState(function (_ref9) {
|
|
1058
|
+
var isOpen = _ref9.isOpen;
|
|
1059
|
+
return _extends__default["default"]({
|
|
1060
|
+
isOpen: !isOpen
|
|
1061
|
+
}, isOpen && {
|
|
1062
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
1063
|
+
}, otherStateToSet);
|
|
1064
|
+
}, function () {
|
|
1065
|
+
var _this$getState7 = _this.getState(),
|
|
1066
|
+
isOpen = _this$getState7.isOpen,
|
|
1067
|
+
highlightedIndex = _this$getState7.highlightedIndex;
|
|
1084
1068
|
if (isOpen) {
|
|
1085
1069
|
if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
|
|
1086
1070
|
_this.setHighlightedIndex(highlightedIndex, otherStateToSet);
|
|
@@ -1089,57 +1073,58 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1089
1073
|
cbToCb(cb)();
|
|
1090
1074
|
});
|
|
1091
1075
|
};
|
|
1092
|
-
|
|
1093
|
-
|
|
1076
|
+
_this.openMenu = function (cb) {
|
|
1077
|
+
_this.internalSetState({
|
|
1094
1078
|
isOpen: true
|
|
1095
1079
|
}, cb);
|
|
1096
1080
|
};
|
|
1097
|
-
|
|
1098
|
-
|
|
1081
|
+
_this.closeMenu = function (cb) {
|
|
1082
|
+
_this.internalSetState({
|
|
1099
1083
|
isOpen: false
|
|
1100
1084
|
}, cb);
|
|
1101
1085
|
};
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
itemToString:
|
|
1108
|
-
previousResultCount:
|
|
1109
|
-
resultCount,
|
|
1110
|
-
highlightedItem: item
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
setStatus(status, this.props.environment.document);
|
|
1086
|
+
_this.updateStatus = debounce(function () {
|
|
1087
|
+
var state = _this.getState();
|
|
1088
|
+
var item = _this.items[state.highlightedIndex];
|
|
1089
|
+
var resultCount = _this.getItemCount();
|
|
1090
|
+
var status = _this.props.getA11yStatusMessage(_extends__default["default"]({
|
|
1091
|
+
itemToString: _this.props.itemToString,
|
|
1092
|
+
previousResultCount: _this.previousResultCount,
|
|
1093
|
+
resultCount: resultCount,
|
|
1094
|
+
highlightedItem: item
|
|
1095
|
+
}, state));
|
|
1096
|
+
_this.previousResultCount = resultCount;
|
|
1097
|
+
setStatus(status, _this.props.environment.document);
|
|
1115
1098
|
}, 200);
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
defaultIsOpen,
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1099
|
+
var _this$props = _this.props,
|
|
1100
|
+
defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
|
|
1101
|
+
_this$props$initialHi = _this$props.initialHighlightedIndex,
|
|
1102
|
+
_highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
|
|
1103
|
+
defaultIsOpen = _this$props.defaultIsOpen,
|
|
1104
|
+
_this$props$initialIs = _this$props.initialIsOpen,
|
|
1105
|
+
_isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
|
|
1106
|
+
_this$props$initialIn = _this$props.initialInputValue,
|
|
1107
|
+
_inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
|
|
1108
|
+
_this$props$initialSe = _this$props.initialSelectedItem,
|
|
1109
|
+
_selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
|
|
1110
|
+
var _state = _this.getState({
|
|
1128
1111
|
highlightedIndex: _highlightedIndex,
|
|
1129
1112
|
isOpen: _isOpen,
|
|
1130
1113
|
inputValue: _inputValue,
|
|
1131
1114
|
selectedItem: _selectedItem
|
|
1132
1115
|
});
|
|
1133
|
-
if (_state.selectedItem != null &&
|
|
1134
|
-
_state.inputValue =
|
|
1116
|
+
if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
|
|
1117
|
+
_state.inputValue = _this.props.itemToString(_state.selectedItem);
|
|
1135
1118
|
}
|
|
1136
|
-
|
|
1119
|
+
_this.state = _state;
|
|
1120
|
+
return _this;
|
|
1137
1121
|
}
|
|
1122
|
+
var _proto = Downshift.prototype;
|
|
1138
1123
|
/**
|
|
1139
1124
|
* Clear all running timeouts
|
|
1140
1125
|
*/
|
|
1141
|
-
internalClearTimeouts() {
|
|
1142
|
-
this.timeoutIds.forEach(id
|
|
1126
|
+
_proto.internalClearTimeouts = function internalClearTimeouts() {
|
|
1127
|
+
this.timeoutIds.forEach(function (id) {
|
|
1143
1128
|
clearTimeout(id);
|
|
1144
1129
|
});
|
|
1145
1130
|
this.timeoutIds = [];
|
|
@@ -1153,112 +1138,108 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1153
1138
|
*
|
|
1154
1139
|
* @param {Object} stateToMerge defaults to this.state
|
|
1155
1140
|
* @return {Object} the state
|
|
1156
|
-
|
|
1157
|
-
getState(stateToMerge) {
|
|
1141
|
+
*/;
|
|
1142
|
+
_proto.getState = function getState$1(stateToMerge) {
|
|
1158
1143
|
if (stateToMerge === void 0) {
|
|
1159
1144
|
stateToMerge = this.state;
|
|
1160
1145
|
}
|
|
1161
1146
|
return getState(stateToMerge, this.props);
|
|
1162
|
-
}
|
|
1163
|
-
getItemCount() {
|
|
1147
|
+
};
|
|
1148
|
+
_proto.getItemCount = function getItemCount() {
|
|
1164
1149
|
// things read better this way. They're in priority order:
|
|
1165
1150
|
// 1. `this.itemCount`
|
|
1166
1151
|
// 2. `this.props.itemCount`
|
|
1167
1152
|
// 3. `this.items.length`
|
|
1168
|
-
|
|
1153
|
+
var itemCount = this.items.length;
|
|
1169
1154
|
if (this.itemCount != null) {
|
|
1170
1155
|
itemCount = this.itemCount;
|
|
1171
1156
|
} else if (this.props.itemCount !== undefined) {
|
|
1172
1157
|
itemCount = this.props.itemCount;
|
|
1173
1158
|
}
|
|
1174
1159
|
return itemCount;
|
|
1175
|
-
}
|
|
1176
|
-
getItemNodeFromIndex(index) {
|
|
1160
|
+
};
|
|
1161
|
+
_proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
|
|
1177
1162
|
return this.props.environment.document.getElementById(this.getItemId(index));
|
|
1178
|
-
}
|
|
1179
|
-
scrollHighlightedItemIntoView() {
|
|
1180
|
-
}
|
|
1181
|
-
moveHighlightedIndex(amount, otherStateToSet) {
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1163
|
+
};
|
|
1164
|
+
_proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
|
|
1165
|
+
};
|
|
1166
|
+
_proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
|
|
1167
|
+
var _this6 = this;
|
|
1168
|
+
var itemCount = this.getItemCount();
|
|
1169
|
+
var _this$getState8 = this.getState(),
|
|
1170
|
+
highlightedIndex = _this$getState8.highlightedIndex;
|
|
1186
1171
|
if (itemCount > 0) {
|
|
1187
|
-
|
|
1172
|
+
var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
|
|
1173
|
+
return _this6.getItemNodeFromIndex(index);
|
|
1174
|
+
});
|
|
1188
1175
|
this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
|
|
1189
1176
|
}
|
|
1190
|
-
}
|
|
1191
|
-
getStateAndHelpers() {
|
|
1192
|
-
|
|
1193
|
-
highlightedIndex,
|
|
1194
|
-
inputValue,
|
|
1195
|
-
selectedItem,
|
|
1196
|
-
isOpen
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
clearSelection,
|
|
1219
|
-
clearItems,
|
|
1220
|
-
reset,
|
|
1221
|
-
setItemCount,
|
|
1222
|
-
unsetItemCount,
|
|
1223
|
-
internalSetState: setState
|
|
1224
|
-
} = this;
|
|
1177
|
+
};
|
|
1178
|
+
_proto.getStateAndHelpers = function getStateAndHelpers() {
|
|
1179
|
+
var _this$getState9 = this.getState(),
|
|
1180
|
+
highlightedIndex = _this$getState9.highlightedIndex,
|
|
1181
|
+
inputValue = _this$getState9.inputValue,
|
|
1182
|
+
selectedItem = _this$getState9.selectedItem,
|
|
1183
|
+
isOpen = _this$getState9.isOpen;
|
|
1184
|
+
var itemToString = this.props.itemToString;
|
|
1185
|
+
var id = this.id;
|
|
1186
|
+
var getRootProps = this.getRootProps,
|
|
1187
|
+
getToggleButtonProps = this.getToggleButtonProps,
|
|
1188
|
+
getLabelProps = this.getLabelProps,
|
|
1189
|
+
getMenuProps = this.getMenuProps,
|
|
1190
|
+
getInputProps = this.getInputProps,
|
|
1191
|
+
getItemProps = this.getItemProps,
|
|
1192
|
+
openMenu = this.openMenu,
|
|
1193
|
+
closeMenu = this.closeMenu,
|
|
1194
|
+
toggleMenu = this.toggleMenu,
|
|
1195
|
+
selectItem = this.selectItem,
|
|
1196
|
+
selectItemAtIndex = this.selectItemAtIndex,
|
|
1197
|
+
selectHighlightedItem = this.selectHighlightedItem,
|
|
1198
|
+
setHighlightedIndex = this.setHighlightedIndex,
|
|
1199
|
+
clearSelection = this.clearSelection,
|
|
1200
|
+
clearItems = this.clearItems,
|
|
1201
|
+
reset = this.reset,
|
|
1202
|
+
setItemCount = this.setItemCount,
|
|
1203
|
+
unsetItemCount = this.unsetItemCount,
|
|
1204
|
+
setState = this.internalSetState;
|
|
1225
1205
|
return {
|
|
1226
1206
|
// prop getters
|
|
1227
|
-
getRootProps,
|
|
1228
|
-
getToggleButtonProps,
|
|
1229
|
-
getLabelProps,
|
|
1230
|
-
getMenuProps,
|
|
1231
|
-
getInputProps,
|
|
1232
|
-
getItemProps,
|
|
1207
|
+
getRootProps: getRootProps,
|
|
1208
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
1209
|
+
getLabelProps: getLabelProps,
|
|
1210
|
+
getMenuProps: getMenuProps,
|
|
1211
|
+
getInputProps: getInputProps,
|
|
1212
|
+
getItemProps: getItemProps,
|
|
1233
1213
|
// actions
|
|
1234
|
-
reset,
|
|
1235
|
-
openMenu,
|
|
1236
|
-
closeMenu,
|
|
1237
|
-
toggleMenu,
|
|
1238
|
-
selectItem,
|
|
1239
|
-
selectItemAtIndex,
|
|
1240
|
-
selectHighlightedItem,
|
|
1241
|
-
setHighlightedIndex,
|
|
1242
|
-
clearSelection,
|
|
1243
|
-
clearItems,
|
|
1244
|
-
setItemCount,
|
|
1245
|
-
unsetItemCount,
|
|
1246
|
-
setState,
|
|
1214
|
+
reset: reset,
|
|
1215
|
+
openMenu: openMenu,
|
|
1216
|
+
closeMenu: closeMenu,
|
|
1217
|
+
toggleMenu: toggleMenu,
|
|
1218
|
+
selectItem: selectItem,
|
|
1219
|
+
selectItemAtIndex: selectItemAtIndex,
|
|
1220
|
+
selectHighlightedItem: selectHighlightedItem,
|
|
1221
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
1222
|
+
clearSelection: clearSelection,
|
|
1223
|
+
clearItems: clearItems,
|
|
1224
|
+
setItemCount: setItemCount,
|
|
1225
|
+
unsetItemCount: unsetItemCount,
|
|
1226
|
+
setState: setState,
|
|
1247
1227
|
// props
|
|
1248
|
-
itemToString,
|
|
1228
|
+
itemToString: itemToString,
|
|
1249
1229
|
// derived
|
|
1250
|
-
id,
|
|
1230
|
+
id: id,
|
|
1251
1231
|
// state
|
|
1252
|
-
highlightedIndex,
|
|
1253
|
-
inputValue,
|
|
1254
|
-
isOpen,
|
|
1255
|
-
selectedItem
|
|
1232
|
+
highlightedIndex: highlightedIndex,
|
|
1233
|
+
inputValue: inputValue,
|
|
1234
|
+
isOpen: isOpen,
|
|
1235
|
+
selectedItem: selectedItem
|
|
1256
1236
|
};
|
|
1257
1237
|
}
|
|
1258
1238
|
|
|
1259
1239
|
//////////////////////////// ROOT
|
|
1260
|
-
|
|
1261
|
-
componentDidMount() {
|
|
1240
|
+
;
|
|
1241
|
+
_proto.componentDidMount = function componentDidMount() {
|
|
1242
|
+
var _this7 = this;
|
|
1262
1243
|
/* istanbul ignore if (react-native) */
|
|
1263
1244
|
if (process.env.NODE_ENV !== 'production' && !true && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
|
|
1264
1245
|
validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
|
|
@@ -1266,23 +1247,21 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1266
1247
|
|
|
1267
1248
|
/* istanbul ignore if (react-native) */
|
|
1268
1249
|
{
|
|
1269
|
-
this.cleanup = ()
|
|
1270
|
-
|
|
1250
|
+
this.cleanup = function () {
|
|
1251
|
+
_this7.internalClearTimeouts();
|
|
1271
1252
|
};
|
|
1272
1253
|
}
|
|
1273
|
-
}
|
|
1274
|
-
shouldScroll(prevState, prevProps) {
|
|
1275
|
-
|
|
1276
|
-
highlightedIndex
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1282
|
-
const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1254
|
+
};
|
|
1255
|
+
_proto.shouldScroll = function shouldScroll(prevState, prevProps) {
|
|
1256
|
+
var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
|
|
1257
|
+
currentHighlightedIndex = _ref10.highlightedIndex;
|
|
1258
|
+
var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
|
|
1259
|
+
prevHighlightedIndex = _ref11.highlightedIndex;
|
|
1260
|
+
var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1261
|
+
var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1283
1262
|
return scrollWhenOpen || scrollWhenNavigating;
|
|
1284
|
-
}
|
|
1285
|
-
componentDidUpdate(prevProps, prevState) {
|
|
1263
|
+
};
|
|
1264
|
+
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
|
1286
1265
|
if (process.env.NODE_ENV !== 'production') {
|
|
1287
1266
|
validateControlledUnchanged(this.state, prevProps, this.props);
|
|
1288
1267
|
}
|
|
@@ -1295,13 +1274,12 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1295
1274
|
if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
|
|
1296
1275
|
this.scrollHighlightedItemIntoView();
|
|
1297
1276
|
}
|
|
1298
|
-
}
|
|
1299
|
-
componentWillUnmount() {
|
|
1277
|
+
};
|
|
1278
|
+
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
1300
1279
|
this.cleanup(); // avoids memory leak
|
|
1301
|
-
}
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
const children = unwrapArray(this.props.children, noop);
|
|
1280
|
+
};
|
|
1281
|
+
_proto.render = function render() {
|
|
1282
|
+
var children = unwrapArray(this.props.children, noop);
|
|
1305
1283
|
// because the items are rerendered every time we call the children
|
|
1306
1284
|
// we clear this out each render and it will be populated again as
|
|
1307
1285
|
// getItemProps is called.
|
|
@@ -1321,7 +1299,7 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1321
1299
|
this.getLabelProps.called = false;
|
|
1322
1300
|
// and something similar for getInputProps
|
|
1323
1301
|
this.getInputProps.called = false;
|
|
1324
|
-
|
|
1302
|
+
var element = unwrapArray(children(this.getStateAndHelpers()));
|
|
1325
1303
|
if (!element) {
|
|
1326
1304
|
return null;
|
|
1327
1305
|
}
|
|
@@ -1346,13 +1324,14 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1346
1324
|
|
|
1347
1325
|
/* istanbul ignore next */
|
|
1348
1326
|
return undefined;
|
|
1349
|
-
}
|
|
1350
|
-
|
|
1327
|
+
};
|
|
1328
|
+
return Downshift;
|
|
1329
|
+
}(react.Component);
|
|
1351
1330
|
Downshift.defaultProps = {
|
|
1352
1331
|
defaultHighlightedIndex: null,
|
|
1353
1332
|
defaultIsOpen: false,
|
|
1354
1333
|
getA11yStatusMessage: getA11yStatusMessage$1,
|
|
1355
|
-
itemToString: i
|
|
1334
|
+
itemToString: function itemToString(i) {
|
|
1356
1335
|
if (i == null) {
|
|
1357
1336
|
return '';
|
|
1358
1337
|
}
|
|
@@ -1368,16 +1347,20 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1368
1347
|
onChange: noop,
|
|
1369
1348
|
onSelect: noop,
|
|
1370
1349
|
onOuterClick: noop,
|
|
1371
|
-
selectedItemChanged: (prevItem, item)
|
|
1350
|
+
selectedItemChanged: function selectedItemChanged(prevItem, item) {
|
|
1351
|
+
return prevItem !== item;
|
|
1352
|
+
},
|
|
1372
1353
|
environment: /* istanbul ignore next (ssr) */
|
|
1373
1354
|
typeof window === 'undefined' ? {} : window,
|
|
1374
|
-
stateReducer: (state, stateToSet)
|
|
1355
|
+
stateReducer: function stateReducer(state, stateToSet) {
|
|
1356
|
+
return stateToSet;
|
|
1357
|
+
},
|
|
1375
1358
|
suppressRefError: false,
|
|
1376
|
-
scrollIntoView
|
|
1359
|
+
scrollIntoView: scrollIntoView
|
|
1377
1360
|
};
|
|
1378
1361
|
Downshift.stateChangeTypes = stateChangeTypes$3;
|
|
1379
1362
|
return Downshift;
|
|
1380
|
-
}
|
|
1363
|
+
}();
|
|
1381
1364
|
process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
|
|
1382
1365
|
children: PropTypes__default["default"].func,
|
|
1383
1366
|
defaultHighlightedIndex: PropTypes__default["default"].number,
|
|
@@ -1423,70 +1406,61 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
|
|
|
1423
1406
|
/* eslint-enable react/no-unused-prop-types */
|
|
1424
1407
|
} : void 0;
|
|
1425
1408
|
var Downshift$1 = Downshift;
|
|
1426
|
-
function validateGetMenuPropsCalledCorrectly(node,
|
|
1427
|
-
|
|
1428
|
-
refKey
|
|
1429
|
-
} = _ref3;
|
|
1409
|
+
function validateGetMenuPropsCalledCorrectly(node, _ref12) {
|
|
1410
|
+
var refKey = _ref12.refKey;
|
|
1430
1411
|
if (!node) {
|
|
1431
1412
|
// eslint-disable-next-line no-console
|
|
1432
|
-
console.error(
|
|
1413
|
+
console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
|
|
1433
1414
|
}
|
|
1434
1415
|
}
|
|
1435
|
-
function validateGetRootPropsCalledCorrectly(element,
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
const refKeySpecified = refKey !== 'ref';
|
|
1440
|
-
const isComposite = !isDOMElement(element);
|
|
1416
|
+
function validateGetRootPropsCalledCorrectly(element, _ref13) {
|
|
1417
|
+
var refKey = _ref13.refKey;
|
|
1418
|
+
var refKeySpecified = refKey !== 'ref';
|
|
1419
|
+
var isComposite = !isDOMElement(element);
|
|
1441
1420
|
if (isComposite && !refKeySpecified && !reactIs.isForwardRef(element)) {
|
|
1442
1421
|
// eslint-disable-next-line no-console
|
|
1443
1422
|
console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
|
|
1444
1423
|
} else if (!isComposite && refKeySpecified) {
|
|
1445
1424
|
// eslint-disable-next-line no-console
|
|
1446
|
-
console.error(
|
|
1425
|
+
console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
|
|
1447
1426
|
}
|
|
1448
1427
|
if (!reactIs.isForwardRef(element) && !getElementProps(element)[refKey]) {
|
|
1449
1428
|
// eslint-disable-next-line no-console
|
|
1450
|
-
console.error(
|
|
1429
|
+
console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
|
|
1451
1430
|
}
|
|
1452
1431
|
}
|
|
1453
1432
|
|
|
1454
|
-
|
|
1433
|
+
var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
|
|
1434
|
+
var dropdownDefaultStateValues = {
|
|
1455
1435
|
highlightedIndex: -1,
|
|
1456
1436
|
isOpen: false,
|
|
1457
1437
|
selectedItem: null,
|
|
1458
1438
|
inputValue: ''
|
|
1459
1439
|
};
|
|
1460
1440
|
function callOnChangeProps(action, state, newState) {
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
const changes = {};
|
|
1466
|
-
Object.keys(state).forEach(key => {
|
|
1441
|
+
var props = action.props,
|
|
1442
|
+
type = action.type;
|
|
1443
|
+
var changes = {};
|
|
1444
|
+
Object.keys(state).forEach(function (key) {
|
|
1467
1445
|
invokeOnChangeHandler(key, action, state, newState);
|
|
1468
1446
|
if (newState[key] !== state[key]) {
|
|
1469
1447
|
changes[key] = newState[key];
|
|
1470
1448
|
}
|
|
1471
1449
|
});
|
|
1472
1450
|
if (props.onStateChange && Object.keys(changes).length) {
|
|
1473
|
-
props.onStateChange({
|
|
1474
|
-
type
|
|
1475
|
-
|
|
1476
|
-
});
|
|
1451
|
+
props.onStateChange(_extends__default["default"]({
|
|
1452
|
+
type: type
|
|
1453
|
+
}, changes));
|
|
1477
1454
|
}
|
|
1478
1455
|
}
|
|
1479
1456
|
function invokeOnChangeHandler(key, action, state, newState) {
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
} = action;
|
|
1484
|
-
const handler = `on${capitalizeString(key)}Change`;
|
|
1457
|
+
var props = action.props,
|
|
1458
|
+
type = action.type;
|
|
1459
|
+
var handler = "on" + capitalizeString(key) + "Change";
|
|
1485
1460
|
if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
|
|
1486
|
-
props[handler]({
|
|
1487
|
-
type
|
|
1488
|
-
|
|
1489
|
-
});
|
|
1461
|
+
props[handler](_extends__default["default"]({
|
|
1462
|
+
type: type
|
|
1463
|
+
}, newState));
|
|
1490
1464
|
}
|
|
1491
1465
|
}
|
|
1492
1466
|
|
|
@@ -1508,37 +1482,36 @@ function stateReducer(s, a) {
|
|
|
1508
1482
|
* @returns {string} The a11y message.
|
|
1509
1483
|
*/
|
|
1510
1484
|
function getA11ySelectionMessage(selectionParameters) {
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
} = selectionParameters;
|
|
1515
|
-
return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
|
|
1485
|
+
var selectedItem = selectionParameters.selectedItem,
|
|
1486
|
+
itemToStringLocal = selectionParameters.itemToString;
|
|
1487
|
+
return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
|
|
1516
1488
|
}
|
|
1517
1489
|
|
|
1518
1490
|
/**
|
|
1519
1491
|
* Debounced call for updating the a11y message.
|
|
1520
1492
|
*/
|
|
1521
|
-
|
|
1493
|
+
var updateA11yStatus = debounce(function (getA11yMessage, document) {
|
|
1522
1494
|
setStatus(getA11yMessage(), document);
|
|
1523
1495
|
}, 200);
|
|
1524
1496
|
|
|
1525
1497
|
// istanbul ignore next
|
|
1526
|
-
|
|
1498
|
+
var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
|
|
1527
1499
|
function useElementIds(_ref) {
|
|
1528
|
-
|
|
1529
|
-
id =
|
|
1530
|
-
labelId,
|
|
1531
|
-
menuId,
|
|
1532
|
-
getItemId,
|
|
1533
|
-
toggleButtonId,
|
|
1534
|
-
inputId
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1500
|
+
var _ref$id = _ref.id,
|
|
1501
|
+
id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
|
|
1502
|
+
labelId = _ref.labelId,
|
|
1503
|
+
menuId = _ref.menuId,
|
|
1504
|
+
getItemId = _ref.getItemId,
|
|
1505
|
+
toggleButtonId = _ref.toggleButtonId,
|
|
1506
|
+
inputId = _ref.inputId;
|
|
1507
|
+
var elementIdsRef = react.useRef({
|
|
1508
|
+
labelId: labelId || id + "-label",
|
|
1509
|
+
menuId: menuId || id + "-menu",
|
|
1510
|
+
getItemId: getItemId || function (index) {
|
|
1511
|
+
return id + "-item-" + index;
|
|
1512
|
+
},
|
|
1513
|
+
toggleButtonId: toggleButtonId || id + "-toggle-button",
|
|
1514
|
+
inputId: inputId || id + "-input"
|
|
1542
1515
|
});
|
|
1543
1516
|
return elementIdsRef.current;
|
|
1544
1517
|
}
|
|
@@ -1558,10 +1531,10 @@ function isAcceptedCharacterKey(key) {
|
|
|
1558
1531
|
return /^\S{1}$/.test(key);
|
|
1559
1532
|
}
|
|
1560
1533
|
function capitalizeString(string) {
|
|
1561
|
-
return
|
|
1534
|
+
return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
|
|
1562
1535
|
}
|
|
1563
1536
|
function useLatestRef(val) {
|
|
1564
|
-
|
|
1537
|
+
var ref = react.useRef(val);
|
|
1565
1538
|
// technically this is not "concurrent mode safe" because we're manipulating
|
|
1566
1539
|
// the value during render (so it's not idempotent). However, the places this
|
|
1567
1540
|
// hook is used is to support memoizing callbacks which will be called
|
|
@@ -1582,26 +1555,28 @@ function useLatestRef(val) {
|
|
|
1582
1555
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
1583
1556
|
*/
|
|
1584
1557
|
function useEnhancedReducer(reducer, initialState, props) {
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1558
|
+
var prevStateRef = react.useRef();
|
|
1559
|
+
var actionRef = react.useRef();
|
|
1560
|
+
var enhancedReducer = react.useCallback(function (state, action) {
|
|
1588
1561
|
actionRef.current = action;
|
|
1589
1562
|
state = getState(state, action.props);
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
});
|
|
1563
|
+
var changes = reducer(state, action);
|
|
1564
|
+
var newState = action.props.stateReducer(state, _extends__default["default"]({}, action, {
|
|
1565
|
+
changes: changes
|
|
1566
|
+
}));
|
|
1595
1567
|
return newState;
|
|
1596
1568
|
}, [reducer]);
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1569
|
+
var _useReducer = react.useReducer(enhancedReducer, initialState),
|
|
1570
|
+
state = _useReducer[0],
|
|
1571
|
+
dispatch = _useReducer[1];
|
|
1572
|
+
var propsRef = useLatestRef(props);
|
|
1573
|
+
var dispatchWithProps = react.useCallback(function (action) {
|
|
1574
|
+
return dispatch(_extends__default["default"]({
|
|
1575
|
+
props: propsRef.current
|
|
1576
|
+
}, action));
|
|
1577
|
+
}, [propsRef]);
|
|
1578
|
+
var action = actionRef.current;
|
|
1579
|
+
react.useEffect(function () {
|
|
1605
1580
|
if (action && prevStateRef.current && prevStateRef.current !== state) {
|
|
1606
1581
|
callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
|
|
1607
1582
|
}
|
|
@@ -1620,14 +1595,16 @@ function useEnhancedReducer(reducer, initialState, props) {
|
|
|
1620
1595
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
1621
1596
|
*/
|
|
1622
1597
|
function useControlledReducer$1(reducer, initialState, props) {
|
|
1623
|
-
|
|
1598
|
+
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
|
|
1599
|
+
state = _useEnhancedReducer[0],
|
|
1600
|
+
dispatch = _useEnhancedReducer[1];
|
|
1624
1601
|
return [getState(state, props), dispatch];
|
|
1625
1602
|
}
|
|
1626
|
-
|
|
1627
|
-
itemToString,
|
|
1628
|
-
stateReducer,
|
|
1629
|
-
getA11ySelectionMessage,
|
|
1630
|
-
scrollIntoView,
|
|
1603
|
+
var defaultProps$3 = {
|
|
1604
|
+
itemToString: itemToString,
|
|
1605
|
+
stateReducer: stateReducer,
|
|
1606
|
+
getA11ySelectionMessage: getA11ySelectionMessage,
|
|
1607
|
+
scrollIntoView: scrollIntoView,
|
|
1631
1608
|
environment: /* istanbul ignore next (ssr) */
|
|
1632
1609
|
typeof window === 'undefined' ? {} : window
|
|
1633
1610
|
};
|
|
@@ -1635,7 +1612,7 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
|
|
|
1635
1612
|
if (defaultStateValues === void 0) {
|
|
1636
1613
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1637
1614
|
}
|
|
1638
|
-
|
|
1615
|
+
var defaultValue = props["default" + capitalizeString(propKey)];
|
|
1639
1616
|
if (defaultValue !== undefined) {
|
|
1640
1617
|
return defaultValue;
|
|
1641
1618
|
}
|
|
@@ -1645,38 +1622,34 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
|
|
|
1645
1622
|
if (defaultStateValues === void 0) {
|
|
1646
1623
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1647
1624
|
}
|
|
1648
|
-
|
|
1625
|
+
var value = props[propKey];
|
|
1649
1626
|
if (value !== undefined) {
|
|
1650
1627
|
return value;
|
|
1651
1628
|
}
|
|
1652
|
-
|
|
1629
|
+
var initialValue = props["initial" + capitalizeString(propKey)];
|
|
1653
1630
|
if (initialValue !== undefined) {
|
|
1654
1631
|
return initialValue;
|
|
1655
1632
|
}
|
|
1656
1633
|
return getDefaultValue$1(props, propKey, defaultStateValues);
|
|
1657
1634
|
}
|
|
1658
1635
|
function getInitialState$2(props) {
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1636
|
+
var selectedItem = getInitialValue$1(props, 'selectedItem');
|
|
1637
|
+
var isOpen = getInitialValue$1(props, 'isOpen');
|
|
1638
|
+
var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
|
|
1639
|
+
var inputValue = getInitialValue$1(props, 'inputValue');
|
|
1663
1640
|
return {
|
|
1664
1641
|
highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
|
|
1665
|
-
isOpen,
|
|
1666
|
-
selectedItem,
|
|
1667
|
-
inputValue
|
|
1642
|
+
isOpen: isOpen,
|
|
1643
|
+
selectedItem: selectedItem,
|
|
1644
|
+
inputValue: inputValue
|
|
1668
1645
|
};
|
|
1669
1646
|
}
|
|
1670
1647
|
function getHighlightedIndexOnOpen(props, state, offset) {
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
const {
|
|
1677
|
-
selectedItem,
|
|
1678
|
-
highlightedIndex
|
|
1679
|
-
} = state;
|
|
1648
|
+
var items = props.items,
|
|
1649
|
+
initialHighlightedIndex = props.initialHighlightedIndex,
|
|
1650
|
+
defaultHighlightedIndex = props.defaultHighlightedIndex;
|
|
1651
|
+
var selectedItem = state.selectedItem,
|
|
1652
|
+
highlightedIndex = state.highlightedIndex;
|
|
1680
1653
|
if (items.length === 0) {
|
|
1681
1654
|
return -1;
|
|
1682
1655
|
}
|
|
@@ -1707,30 +1680,34 @@ function getHighlightedIndexOnOpen(props, state, offset) {
|
|
|
1707
1680
|
* @returns {Object} Ref containing whether mouseDown or touchMove event is happening
|
|
1708
1681
|
*/
|
|
1709
1682
|
function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
|
|
1710
|
-
|
|
1683
|
+
var mouseAndTouchTrackersRef = react.useRef({
|
|
1711
1684
|
isMouseDown: false,
|
|
1712
1685
|
isTouchMove: false
|
|
1713
1686
|
});
|
|
1714
|
-
react.useEffect(()
|
|
1687
|
+
react.useEffect(function () {
|
|
1715
1688
|
// The same strategy for checking if a click occurred inside or outside downsift
|
|
1716
1689
|
// as in downshift.js.
|
|
1717
|
-
|
|
1690
|
+
var onMouseDown = function onMouseDown() {
|
|
1718
1691
|
mouseAndTouchTrackersRef.current.isMouseDown = true;
|
|
1719
1692
|
};
|
|
1720
|
-
|
|
1693
|
+
var onMouseUp = function onMouseUp(event) {
|
|
1721
1694
|
mouseAndTouchTrackersRef.current.isMouseDown = false;
|
|
1722
|
-
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1695
|
+
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
|
|
1696
|
+
return ref.current;
|
|
1697
|
+
}), environment)) {
|
|
1723
1698
|
handleBlur();
|
|
1724
1699
|
}
|
|
1725
1700
|
};
|
|
1726
|
-
|
|
1701
|
+
var onTouchStart = function onTouchStart() {
|
|
1727
1702
|
mouseAndTouchTrackersRef.current.isTouchMove = false;
|
|
1728
1703
|
};
|
|
1729
|
-
|
|
1704
|
+
var onTouchMove = function onTouchMove() {
|
|
1730
1705
|
mouseAndTouchTrackersRef.current.isTouchMove = true;
|
|
1731
1706
|
};
|
|
1732
|
-
|
|
1733
|
-
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1707
|
+
var onTouchEnd = function onTouchEnd(event) {
|
|
1708
|
+
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
|
|
1709
|
+
return ref.current;
|
|
1710
|
+
}), environment, false)) {
|
|
1734
1711
|
handleBlur();
|
|
1735
1712
|
}
|
|
1736
1713
|
};
|
|
@@ -1753,7 +1730,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
|
|
|
1753
1730
|
|
|
1754
1731
|
/* istanbul ignore next */
|
|
1755
1732
|
// eslint-disable-next-line import/no-mutable-exports
|
|
1756
|
-
|
|
1733
|
+
var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
1734
|
+
return noop;
|
|
1735
|
+
};
|
|
1757
1736
|
/**
|
|
1758
1737
|
* Custom hook that checks if getter props are called correctly.
|
|
1759
1738
|
*
|
|
@@ -1762,82 +1741,77 @@ let useGetterPropsCalledChecker = () => noop;
|
|
|
1762
1741
|
*/
|
|
1763
1742
|
/* istanbul ignore next */
|
|
1764
1743
|
if (process.env.NODE_ENV !== 'production') {
|
|
1765
|
-
useGetterPropsCalledChecker = function () {
|
|
1766
|
-
|
|
1744
|
+
useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
1745
|
+
var isInitialMountRef = react.useRef(true);
|
|
1767
1746
|
for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1768
1747
|
propKeys[_key] = arguments[_key];
|
|
1769
1748
|
}
|
|
1770
|
-
|
|
1749
|
+
var getterPropsCalledRef = react.useRef(propKeys.reduce(function (acc, propKey) {
|
|
1771
1750
|
acc[propKey] = {};
|
|
1772
1751
|
return acc;
|
|
1773
1752
|
}, {}));
|
|
1774
|
-
react.useEffect(()
|
|
1775
|
-
Object.keys(getterPropsCalledRef.current).forEach(propKey
|
|
1776
|
-
|
|
1753
|
+
react.useEffect(function () {
|
|
1754
|
+
Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
|
|
1755
|
+
var propCallInfo = getterPropsCalledRef.current[propKey];
|
|
1777
1756
|
if (isInitialMountRef.current) {
|
|
1778
1757
|
if (!Object.keys(propCallInfo).length) {
|
|
1779
1758
|
// eslint-disable-next-line no-console
|
|
1780
|
-
console.error(
|
|
1759
|
+
console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
|
|
1781
1760
|
return;
|
|
1782
1761
|
}
|
|
1783
1762
|
}
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
elementRef
|
|
1788
|
-
} = propCallInfo;
|
|
1763
|
+
var suppressRefError = propCallInfo.suppressRefError,
|
|
1764
|
+
refKey = propCallInfo.refKey,
|
|
1765
|
+
elementRef = propCallInfo.elementRef;
|
|
1789
1766
|
if ((!elementRef || !elementRef.current) && !suppressRefError) {
|
|
1790
1767
|
// eslint-disable-next-line no-console
|
|
1791
|
-
console.error(
|
|
1768
|
+
console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
|
|
1792
1769
|
}
|
|
1793
1770
|
});
|
|
1794
1771
|
isInitialMountRef.current = false;
|
|
1795
1772
|
});
|
|
1796
|
-
|
|
1773
|
+
var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
|
|
1797
1774
|
getterPropsCalledRef.current[propKey] = {
|
|
1798
|
-
suppressRefError,
|
|
1799
|
-
refKey,
|
|
1800
|
-
elementRef
|
|
1775
|
+
suppressRefError: suppressRefError,
|
|
1776
|
+
refKey: refKey,
|
|
1777
|
+
elementRef: elementRef
|
|
1801
1778
|
};
|
|
1802
1779
|
}, []);
|
|
1803
1780
|
return setGetterPropCallInfo;
|
|
1804
1781
|
};
|
|
1805
1782
|
}
|
|
1806
1783
|
function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
...rest
|
|
1813
|
-
} = _ref2;
|
|
1784
|
+
var isInitialMount = _ref2.isInitialMount,
|
|
1785
|
+
highlightedIndex = _ref2.highlightedIndex,
|
|
1786
|
+
items = _ref2.items,
|
|
1787
|
+
environment = _ref2.environment,
|
|
1788
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$3);
|
|
1814
1789
|
// Sets a11y status message on changes in state.
|
|
1815
|
-
react.useEffect(()
|
|
1790
|
+
react.useEffect(function () {
|
|
1816
1791
|
if (isInitialMount || true) {
|
|
1817
1792
|
return;
|
|
1818
1793
|
}
|
|
1819
|
-
updateA11yStatus(()
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1794
|
+
updateA11yStatus(function () {
|
|
1795
|
+
return getA11yMessage(_extends__default["default"]({
|
|
1796
|
+
highlightedIndex: highlightedIndex,
|
|
1797
|
+
highlightedItem: items[highlightedIndex],
|
|
1798
|
+
resultCount: items.length
|
|
1799
|
+
}, rest));
|
|
1800
|
+
}, environment.document);
|
|
1825
1801
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1826
1802
|
}, dependencyArray);
|
|
1827
1803
|
}
|
|
1828
1804
|
function useScrollIntoView(_ref3) {
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
scrollIntoView: scrollIntoViewProp
|
|
1836
|
-
} = _ref3;
|
|
1805
|
+
var highlightedIndex = _ref3.highlightedIndex,
|
|
1806
|
+
isOpen = _ref3.isOpen,
|
|
1807
|
+
itemRefs = _ref3.itemRefs,
|
|
1808
|
+
getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
|
|
1809
|
+
menuElement = _ref3.menuElement,
|
|
1810
|
+
scrollIntoViewProp = _ref3.scrollIntoView;
|
|
1837
1811
|
// used not to scroll on highlight by mouse.
|
|
1838
|
-
|
|
1812
|
+
var shouldScrollRef = react.useRef(true);
|
|
1839
1813
|
// Scroll on highlighted item if change comes from keyboard.
|
|
1840
|
-
useIsomorphicLayoutEffect(()
|
|
1814
|
+
useIsomorphicLayoutEffect(function () {
|
|
1841
1815
|
if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
|
|
1842
1816
|
return;
|
|
1843
1817
|
}
|
|
@@ -1852,18 +1826,16 @@ function useScrollIntoView(_ref3) {
|
|
|
1852
1826
|
}
|
|
1853
1827
|
|
|
1854
1828
|
// eslint-disable-next-line import/no-mutable-exports
|
|
1855
|
-
|
|
1829
|
+
var useControlPropsValidator = noop;
|
|
1856
1830
|
/* istanbul ignore next */
|
|
1857
1831
|
if (process.env.NODE_ENV !== 'production') {
|
|
1858
|
-
useControlPropsValidator = _ref4
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
state
|
|
1863
|
-
} = _ref4;
|
|
1832
|
+
useControlPropsValidator = function useControlPropsValidator(_ref4) {
|
|
1833
|
+
var isInitialMount = _ref4.isInitialMount,
|
|
1834
|
+
props = _ref4.props,
|
|
1835
|
+
state = _ref4.state;
|
|
1864
1836
|
// used for checking when props are moving from controlled to uncontrolled.
|
|
1865
|
-
|
|
1866
|
-
react.useEffect(()
|
|
1837
|
+
var prevPropsRef = react.useRef(props);
|
|
1838
|
+
react.useEffect(function () {
|
|
1867
1839
|
if (isInitialMount) {
|
|
1868
1840
|
return;
|
|
1869
1841
|
}
|
|
@@ -1874,11 +1846,9 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1874
1846
|
}
|
|
1875
1847
|
|
|
1876
1848
|
function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
} = action;
|
|
1881
|
-
let changes;
|
|
1849
|
+
var type = action.type,
|
|
1850
|
+
props = action.props;
|
|
1851
|
+
var changes;
|
|
1882
1852
|
switch (type) {
|
|
1883
1853
|
case stateChangeTypes.ItemMouseMove:
|
|
1884
1854
|
changes = {
|
|
@@ -1929,10 +1899,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
|
1929
1899
|
default:
|
|
1930
1900
|
throw new Error('Reducer called without proper action type.');
|
|
1931
1901
|
}
|
|
1932
|
-
return {
|
|
1933
|
-
...state,
|
|
1934
|
-
...changes
|
|
1935
|
-
};
|
|
1902
|
+
return _extends__default["default"]({}, state, changes);
|
|
1936
1903
|
}
|
|
1937
1904
|
/* eslint-enable complexity */
|
|
1938
1905
|
|
|
@@ -2018,28 +1985,28 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
2018
1985
|
};
|
|
2019
1986
|
}
|
|
2020
1987
|
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
1988
|
+
var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 0;
|
|
1989
|
+
var ToggleButtonKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_down__' : 1;
|
|
1990
|
+
var ToggleButtonKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_up__' : 2;
|
|
1991
|
+
var ToggleButtonKeyDownCharacter = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_character__' : 3;
|
|
1992
|
+
var ToggleButtonKeyDownEscape = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_escape__' : 4;
|
|
1993
|
+
var ToggleButtonKeyDownHome = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_home__' : 5;
|
|
1994
|
+
var ToggleButtonKeyDownEnd = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_end__' : 6;
|
|
1995
|
+
var ToggleButtonKeyDownEnter = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_enter__' : 7;
|
|
1996
|
+
var ToggleButtonKeyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_space_button__' : 8;
|
|
1997
|
+
var ToggleButtonKeyDownPageUp = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_page_up__' : 9;
|
|
1998
|
+
var ToggleButtonKeyDownPageDown = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_page_down__' : 10;
|
|
1999
|
+
var ToggleButtonBlur = process.env.NODE_ENV !== "production" ? '__togglebutton_blur__' : 11;
|
|
2000
|
+
var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 12;
|
|
2001
|
+
var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 13;
|
|
2002
|
+
var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 14;
|
|
2003
|
+
var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 15;
|
|
2004
|
+
var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 16;
|
|
2005
|
+
var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 17;
|
|
2006
|
+
var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 18;
|
|
2007
|
+
var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 19;
|
|
2008
|
+
var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 20;
|
|
2009
|
+
var FunctionReset$2 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 21;
|
|
2043
2010
|
|
|
2044
2011
|
var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
2045
2012
|
__proto__: null,
|
|
@@ -2069,12 +2036,10 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
|
2069
2036
|
|
|
2070
2037
|
/* eslint-disable complexity */
|
|
2071
2038
|
function downshiftSelectReducer(state, action) {
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
} = action;
|
|
2077
|
-
let changes;
|
|
2039
|
+
var type = action.type,
|
|
2040
|
+
props = action.props,
|
|
2041
|
+
altKey = action.altKey;
|
|
2042
|
+
var changes;
|
|
2078
2043
|
switch (type) {
|
|
2079
2044
|
case ItemClick$1:
|
|
2080
2045
|
changes = {
|
|
@@ -2085,10 +2050,10 @@ function downshiftSelectReducer(state, action) {
|
|
|
2085
2050
|
break;
|
|
2086
2051
|
case ToggleButtonKeyDownCharacter:
|
|
2087
2052
|
{
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2053
|
+
var lowercasedKey = action.key;
|
|
2054
|
+
var inputValue = "" + state.inputValue + lowercasedKey;
|
|
2055
|
+
var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
|
|
2056
|
+
var highlightedIndex = getItemIndexByCharacterKey({
|
|
2092
2057
|
keysSoFar: inputValue,
|
|
2093
2058
|
highlightedIndex: prevHighlightedIndex,
|
|
2094
2059
|
items: props.items,
|
|
@@ -2096,34 +2061,33 @@ function downshiftSelectReducer(state, action) {
|
|
|
2096
2061
|
getItemNodeFromIndex: action.getItemNodeFromIndex
|
|
2097
2062
|
});
|
|
2098
2063
|
changes = {
|
|
2099
|
-
inputValue,
|
|
2100
|
-
highlightedIndex,
|
|
2064
|
+
inputValue: inputValue,
|
|
2065
|
+
highlightedIndex: highlightedIndex,
|
|
2101
2066
|
isOpen: true
|
|
2102
2067
|
};
|
|
2103
2068
|
}
|
|
2104
2069
|
break;
|
|
2105
2070
|
case ToggleButtonKeyDownArrowDown:
|
|
2106
2071
|
{
|
|
2107
|
-
|
|
2072
|
+
var _highlightedIndex = state.isOpen ? getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
|
|
2108
2073
|
changes = {
|
|
2109
|
-
highlightedIndex,
|
|
2074
|
+
highlightedIndex: _highlightedIndex,
|
|
2110
2075
|
isOpen: true
|
|
2111
2076
|
};
|
|
2112
2077
|
}
|
|
2113
2078
|
break;
|
|
2114
2079
|
case ToggleButtonKeyDownArrowUp:
|
|
2115
2080
|
if (state.isOpen && altKey) {
|
|
2116
|
-
changes = {
|
|
2081
|
+
changes = _extends__default["default"]({
|
|
2117
2082
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2118
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
};
|
|
2083
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2084
|
+
}, state.highlightedIndex >= 0 && {
|
|
2085
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2086
|
+
});
|
|
2123
2087
|
} else {
|
|
2124
|
-
|
|
2088
|
+
var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
|
|
2125
2089
|
changes = {
|
|
2126
|
-
highlightedIndex,
|
|
2090
|
+
highlightedIndex: _highlightedIndex2,
|
|
2127
2091
|
isOpen: true
|
|
2128
2092
|
};
|
|
2129
2093
|
}
|
|
@@ -2131,13 +2095,12 @@ function downshiftSelectReducer(state, action) {
|
|
|
2131
2095
|
// only triggered when menu is open.
|
|
2132
2096
|
case ToggleButtonKeyDownEnter:
|
|
2133
2097
|
case ToggleButtonKeyDownSpaceButton:
|
|
2134
|
-
changes = {
|
|
2098
|
+
changes = _extends__default["default"]({
|
|
2135
2099
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2136
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
};
|
|
2100
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2101
|
+
}, state.highlightedIndex >= 0 && {
|
|
2102
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2103
|
+
});
|
|
2141
2104
|
break;
|
|
2142
2105
|
case ToggleButtonKeyDownHome:
|
|
2143
2106
|
changes = {
|
|
@@ -2168,13 +2131,12 @@ function downshiftSelectReducer(state, action) {
|
|
|
2168
2131
|
};
|
|
2169
2132
|
break;
|
|
2170
2133
|
case ToggleButtonBlur:
|
|
2171
|
-
changes = {
|
|
2134
|
+
changes = _extends__default["default"]({
|
|
2172
2135
|
isOpen: false,
|
|
2173
|
-
highlightedIndex: -1
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
};
|
|
2136
|
+
highlightedIndex: -1
|
|
2137
|
+
}, state.highlightedIndex >= 0 && {
|
|
2138
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2139
|
+
});
|
|
2178
2140
|
break;
|
|
2179
2141
|
case FunctionSelectItem$1:
|
|
2180
2142
|
changes = {
|
|
@@ -2184,13 +2146,13 @@ function downshiftSelectReducer(state, action) {
|
|
|
2184
2146
|
default:
|
|
2185
2147
|
return downshiftCommonReducer(state, action, stateChangeTypes$2);
|
|
2186
2148
|
}
|
|
2187
|
-
return {
|
|
2188
|
-
...state,
|
|
2189
|
-
...changes
|
|
2190
|
-
};
|
|
2149
|
+
return _extends__default["default"]({}, state, changes);
|
|
2191
2150
|
}
|
|
2192
2151
|
/* eslint-enable complexity */
|
|
2193
2152
|
|
|
2153
|
+
var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
|
|
2154
|
+
_excluded2$2 = ["onBlur", "onClick", "onKeyDown", "refKey", "ref"],
|
|
2155
|
+
_excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref", "disabled"];
|
|
2194
2156
|
useSelect.stateChangeTypes = stateChangeTypes$2;
|
|
2195
2157
|
function useSelect(userProps) {
|
|
2196
2158
|
if (userProps === void 0) {
|
|
@@ -2198,81 +2160,76 @@ function useSelect(userProps) {
|
|
|
2198
2160
|
}
|
|
2199
2161
|
validatePropTypes$2(userProps, useSelect);
|
|
2200
2162
|
// Props defaults and destructuring.
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
environment,
|
|
2209
|
-
itemToString,
|
|
2210
|
-
getA11ySelectionMessage,
|
|
2211
|
-
getA11yStatusMessage
|
|
2212
|
-
} = props;
|
|
2163
|
+
var props = _extends__default["default"]({}, defaultProps$2, userProps);
|
|
2164
|
+
var items = props.items,
|
|
2165
|
+
scrollIntoView = props.scrollIntoView,
|
|
2166
|
+
environment = props.environment,
|
|
2167
|
+
itemToString = props.itemToString,
|
|
2168
|
+
getA11ySelectionMessage = props.getA11ySelectionMessage,
|
|
2169
|
+
getA11yStatusMessage = props.getA11yStatusMessage;
|
|
2213
2170
|
// Initial state depending on controlled props.
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2171
|
+
var initialState = getInitialState$2(props);
|
|
2172
|
+
var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
|
|
2173
|
+
state = _useControlledReducer[0],
|
|
2174
|
+
dispatch = _useControlledReducer[1];
|
|
2175
|
+
var isOpen = state.isOpen,
|
|
2176
|
+
highlightedIndex = state.highlightedIndex,
|
|
2177
|
+
selectedItem = state.selectedItem,
|
|
2178
|
+
inputValue = state.inputValue;
|
|
2222
2179
|
|
|
2223
2180
|
// Element efs.
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2181
|
+
var toggleButtonRef = react.useRef(null);
|
|
2182
|
+
var menuRef = react.useRef(null);
|
|
2183
|
+
var itemRefs = react.useRef({});
|
|
2227
2184
|
// used to keep the inputValue clearTimeout object between renders.
|
|
2228
|
-
|
|
2185
|
+
var clearTimeoutRef = react.useRef(null);
|
|
2229
2186
|
// prevent id re-generation between renders.
|
|
2230
|
-
|
|
2187
|
+
var elementIds = useElementIds(props);
|
|
2231
2188
|
// used to keep track of how many items we had on previous cycle.
|
|
2232
|
-
|
|
2233
|
-
|
|
2189
|
+
var previousResultCountRef = react.useRef();
|
|
2190
|
+
var isInitialMountRef = react.useRef(true);
|
|
2234
2191
|
// utility callback to get item element.
|
|
2235
|
-
|
|
2236
|
-
state,
|
|
2237
|
-
props
|
|
2192
|
+
var latest = useLatestRef({
|
|
2193
|
+
state: state,
|
|
2194
|
+
props: props
|
|
2238
2195
|
});
|
|
2239
2196
|
|
|
2240
2197
|
// Some utils.
|
|
2241
|
-
|
|
2198
|
+
var getItemNodeFromIndex = react.useCallback(function (index) {
|
|
2199
|
+
return itemRefs.current[elementIds.getItemId(index)];
|
|
2200
|
+
}, [elementIds]);
|
|
2242
2201
|
|
|
2243
2202
|
// Effects.
|
|
2244
2203
|
// Sets a11y status message on changes in state.
|
|
2245
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
2204
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
|
|
2246
2205
|
isInitialMount: isInitialMountRef.current,
|
|
2247
2206
|
previousResultCount: previousResultCountRef.current,
|
|
2248
|
-
items,
|
|
2249
|
-
environment,
|
|
2250
|
-
itemToString
|
|
2251
|
-
|
|
2252
|
-
});
|
|
2207
|
+
items: items,
|
|
2208
|
+
environment: environment,
|
|
2209
|
+
itemToString: itemToString
|
|
2210
|
+
}, state));
|
|
2253
2211
|
// Sets a11y status message on changes in selectedItem.
|
|
2254
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
2212
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
|
|
2255
2213
|
isInitialMount: isInitialMountRef.current,
|
|
2256
2214
|
previousResultCount: previousResultCountRef.current,
|
|
2257
|
-
items,
|
|
2258
|
-
environment,
|
|
2259
|
-
itemToString
|
|
2260
|
-
|
|
2261
|
-
});
|
|
2215
|
+
items: items,
|
|
2216
|
+
environment: environment,
|
|
2217
|
+
itemToString: itemToString
|
|
2218
|
+
}, state));
|
|
2262
2219
|
// Scroll on highlighted item if change comes from keyboard.
|
|
2263
|
-
|
|
2220
|
+
var shouldScrollRef = useScrollIntoView({
|
|
2264
2221
|
menuElement: menuRef.current,
|
|
2265
|
-
highlightedIndex,
|
|
2266
|
-
isOpen,
|
|
2267
|
-
itemRefs,
|
|
2268
|
-
scrollIntoView,
|
|
2269
|
-
getItemNodeFromIndex
|
|
2222
|
+
highlightedIndex: highlightedIndex,
|
|
2223
|
+
isOpen: isOpen,
|
|
2224
|
+
itemRefs: itemRefs,
|
|
2225
|
+
scrollIntoView: scrollIntoView,
|
|
2226
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2270
2227
|
});
|
|
2271
2228
|
|
|
2272
2229
|
// Sets cleanup for the keysSoFar callback, debounded after 500ms.
|
|
2273
|
-
react.useEffect(()
|
|
2230
|
+
react.useEffect(function () {
|
|
2274
2231
|
// init the clean function here as we need access to dispatch.
|
|
2275
|
-
clearTimeoutRef.current = debounce(outerDispatch
|
|
2232
|
+
clearTimeoutRef.current = debounce(function (outerDispatch) {
|
|
2276
2233
|
outerDispatch({
|
|
2277
2234
|
type: FunctionSetInputValue$1,
|
|
2278
2235
|
inputValue: ''
|
|
@@ -2280,13 +2237,13 @@ function useSelect(userProps) {
|
|
|
2280
2237
|
}, 500);
|
|
2281
2238
|
|
|
2282
2239
|
// Cancel any pending debounced calls on mount
|
|
2283
|
-
return ()
|
|
2240
|
+
return function () {
|
|
2284
2241
|
clearTimeoutRef.current.cancel();
|
|
2285
2242
|
};
|
|
2286
2243
|
}, []);
|
|
2287
2244
|
|
|
2288
2245
|
// Invokes the keysSoFar callback set up above.
|
|
2289
|
-
react.useEffect(()
|
|
2246
|
+
react.useEffect(function () {
|
|
2290
2247
|
if (!inputValue) {
|
|
2291
2248
|
return;
|
|
2292
2249
|
}
|
|
@@ -2294,249 +2251,234 @@ function useSelect(userProps) {
|
|
|
2294
2251
|
}, [dispatch, inputValue]);
|
|
2295
2252
|
useControlPropsValidator({
|
|
2296
2253
|
isInitialMount: isInitialMountRef.current,
|
|
2297
|
-
props,
|
|
2298
|
-
state
|
|
2254
|
+
props: props,
|
|
2255
|
+
state: state
|
|
2299
2256
|
});
|
|
2300
|
-
react.useEffect(()
|
|
2257
|
+
react.useEffect(function () {
|
|
2301
2258
|
if (isInitialMountRef.current) {
|
|
2302
2259
|
return;
|
|
2303
2260
|
}
|
|
2304
2261
|
previousResultCountRef.current = items.length;
|
|
2305
2262
|
});
|
|
2306
2263
|
// Add mouse/touch events to document.
|
|
2307
|
-
|
|
2264
|
+
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
|
|
2308
2265
|
dispatch({
|
|
2309
2266
|
type: ToggleButtonBlur
|
|
2310
2267
|
});
|
|
2311
2268
|
});
|
|
2312
|
-
|
|
2269
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
|
|
2313
2270
|
// Make initial ref false.
|
|
2314
|
-
react.useEffect(()
|
|
2271
|
+
react.useEffect(function () {
|
|
2315
2272
|
isInitialMountRef.current = false;
|
|
2316
|
-
return ()
|
|
2273
|
+
return function () {
|
|
2317
2274
|
isInitialMountRef.current = true;
|
|
2318
2275
|
};
|
|
2319
2276
|
}, []);
|
|
2320
2277
|
// Reset itemRefs on close.
|
|
2321
|
-
react.useEffect(()
|
|
2278
|
+
react.useEffect(function () {
|
|
2322
2279
|
if (!isOpen) {
|
|
2323
2280
|
itemRefs.current = {};
|
|
2324
2281
|
}
|
|
2325
2282
|
}, [isOpen]);
|
|
2326
2283
|
|
|
2327
2284
|
// Event handler functions.
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
event
|
|
2331
|
-
dispatch({
|
|
2332
|
-
type: ToggleButtonKeyDownArrowDown,
|
|
2333
|
-
getItemNodeFromIndex,
|
|
2334
|
-
altKey: event.altKey
|
|
2335
|
-
});
|
|
2336
|
-
},
|
|
2337
|
-
ArrowUp(event) {
|
|
2338
|
-
event.preventDefault();
|
|
2339
|
-
dispatch({
|
|
2340
|
-
type: ToggleButtonKeyDownArrowUp,
|
|
2341
|
-
getItemNodeFromIndex,
|
|
2342
|
-
altKey: event.altKey
|
|
2343
|
-
});
|
|
2344
|
-
},
|
|
2345
|
-
Home(event) {
|
|
2346
|
-
event.preventDefault();
|
|
2347
|
-
dispatch({
|
|
2348
|
-
type: ToggleButtonKeyDownHome,
|
|
2349
|
-
getItemNodeFromIndex
|
|
2350
|
-
});
|
|
2351
|
-
},
|
|
2352
|
-
End(event) {
|
|
2353
|
-
event.preventDefault();
|
|
2354
|
-
dispatch({
|
|
2355
|
-
type: ToggleButtonKeyDownEnd,
|
|
2356
|
-
getItemNodeFromIndex
|
|
2357
|
-
});
|
|
2358
|
-
},
|
|
2359
|
-
Escape() {
|
|
2360
|
-
if (latest.current.state.isOpen) {
|
|
2361
|
-
dispatch({
|
|
2362
|
-
type: ToggleButtonKeyDownEscape
|
|
2363
|
-
});
|
|
2364
|
-
}
|
|
2365
|
-
},
|
|
2366
|
-
Enter(event) {
|
|
2367
|
-
event.preventDefault();
|
|
2368
|
-
dispatch({
|
|
2369
|
-
type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
|
|
2370
|
-
});
|
|
2371
|
-
},
|
|
2372
|
-
PageUp(event) {
|
|
2373
|
-
if (latest.current.state.isOpen) {
|
|
2285
|
+
var toggleButtonKeyDownHandlers = react.useMemo(function () {
|
|
2286
|
+
return {
|
|
2287
|
+
ArrowDown: function ArrowDown(event) {
|
|
2374
2288
|
event.preventDefault();
|
|
2375
2289
|
dispatch({
|
|
2376
|
-
type:
|
|
2377
|
-
getItemNodeFromIndex
|
|
2290
|
+
type: ToggleButtonKeyDownArrowDown,
|
|
2291
|
+
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2292
|
+
altKey: event.altKey
|
|
2378
2293
|
});
|
|
2379
|
-
}
|
|
2380
|
-
|
|
2381
|
-
PageDown(event) {
|
|
2382
|
-
if (latest.current.state.isOpen) {
|
|
2294
|
+
},
|
|
2295
|
+
ArrowUp: function ArrowUp(event) {
|
|
2383
2296
|
event.preventDefault();
|
|
2384
2297
|
dispatch({
|
|
2385
|
-
type:
|
|
2386
|
-
getItemNodeFromIndex
|
|
2298
|
+
type: ToggleButtonKeyDownArrowUp,
|
|
2299
|
+
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2300
|
+
altKey: event.altKey
|
|
2387
2301
|
});
|
|
2388
|
-
}
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
event.preventDefault();
|
|
2392
|
-
const currentState = latest.current.state;
|
|
2393
|
-
if (!currentState.isOpen) {
|
|
2302
|
+
},
|
|
2303
|
+
Home: function Home(event) {
|
|
2304
|
+
event.preventDefault();
|
|
2394
2305
|
dispatch({
|
|
2395
|
-
type:
|
|
2306
|
+
type: ToggleButtonKeyDownHome,
|
|
2307
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2396
2308
|
});
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2309
|
+
},
|
|
2310
|
+
End: function End(event) {
|
|
2311
|
+
event.preventDefault();
|
|
2400
2312
|
dispatch({
|
|
2401
|
-
type:
|
|
2402
|
-
|
|
2403
|
-
getItemNodeFromIndex
|
|
2313
|
+
type: ToggleButtonKeyDownEnd,
|
|
2314
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2404
2315
|
});
|
|
2405
|
-
}
|
|
2316
|
+
},
|
|
2317
|
+
Escape: function Escape() {
|
|
2318
|
+
if (latest.current.state.isOpen) {
|
|
2319
|
+
dispatch({
|
|
2320
|
+
type: ToggleButtonKeyDownEscape
|
|
2321
|
+
});
|
|
2322
|
+
}
|
|
2323
|
+
},
|
|
2324
|
+
Enter: function Enter(event) {
|
|
2325
|
+
event.preventDefault();
|
|
2406
2326
|
dispatch({
|
|
2407
|
-
type:
|
|
2327
|
+
type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
|
|
2408
2328
|
});
|
|
2329
|
+
},
|
|
2330
|
+
PageUp: function PageUp(event) {
|
|
2331
|
+
if (latest.current.state.isOpen) {
|
|
2332
|
+
event.preventDefault();
|
|
2333
|
+
dispatch({
|
|
2334
|
+
type: ToggleButtonKeyDownPageUp,
|
|
2335
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2336
|
+
});
|
|
2337
|
+
}
|
|
2338
|
+
},
|
|
2339
|
+
PageDown: function PageDown(event) {
|
|
2340
|
+
if (latest.current.state.isOpen) {
|
|
2341
|
+
event.preventDefault();
|
|
2342
|
+
dispatch({
|
|
2343
|
+
type: ToggleButtonKeyDownPageDown,
|
|
2344
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2345
|
+
});
|
|
2346
|
+
}
|
|
2347
|
+
},
|
|
2348
|
+
' ': function _(event) {
|
|
2349
|
+
event.preventDefault();
|
|
2350
|
+
var currentState = latest.current.state;
|
|
2351
|
+
if (!currentState.isOpen) {
|
|
2352
|
+
dispatch({
|
|
2353
|
+
type: ToggleButtonClick$1
|
|
2354
|
+
});
|
|
2355
|
+
return;
|
|
2356
|
+
}
|
|
2357
|
+
if (currentState.inputValue) {
|
|
2358
|
+
dispatch({
|
|
2359
|
+
type: ToggleButtonKeyDownCharacter,
|
|
2360
|
+
key: ' ',
|
|
2361
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2362
|
+
});
|
|
2363
|
+
} else {
|
|
2364
|
+
dispatch({
|
|
2365
|
+
type: ToggleButtonKeyDownSpaceButton
|
|
2366
|
+
});
|
|
2367
|
+
}
|
|
2409
2368
|
}
|
|
2410
|
-
}
|
|
2411
|
-
}
|
|
2369
|
+
};
|
|
2370
|
+
}, [dispatch, getItemNodeFromIndex, latest]);
|
|
2412
2371
|
|
|
2413
2372
|
// Action functions.
|
|
2414
|
-
|
|
2373
|
+
var toggleMenu = react.useCallback(function () {
|
|
2415
2374
|
dispatch({
|
|
2416
2375
|
type: FunctionToggleMenu$1
|
|
2417
2376
|
});
|
|
2418
2377
|
}, [dispatch]);
|
|
2419
|
-
|
|
2378
|
+
var closeMenu = react.useCallback(function () {
|
|
2420
2379
|
dispatch({
|
|
2421
2380
|
type: FunctionCloseMenu$1
|
|
2422
2381
|
});
|
|
2423
2382
|
}, [dispatch]);
|
|
2424
|
-
|
|
2383
|
+
var openMenu = react.useCallback(function () {
|
|
2425
2384
|
dispatch({
|
|
2426
2385
|
type: FunctionOpenMenu$1
|
|
2427
2386
|
});
|
|
2428
2387
|
}, [dispatch]);
|
|
2429
|
-
|
|
2388
|
+
var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
|
|
2430
2389
|
dispatch({
|
|
2431
2390
|
type: FunctionSetHighlightedIndex$1,
|
|
2432
2391
|
highlightedIndex: newHighlightedIndex
|
|
2433
2392
|
});
|
|
2434
2393
|
}, [dispatch]);
|
|
2435
|
-
|
|
2394
|
+
var selectItem = react.useCallback(function (newSelectedItem) {
|
|
2436
2395
|
dispatch({
|
|
2437
2396
|
type: FunctionSelectItem$1,
|
|
2438
2397
|
selectedItem: newSelectedItem
|
|
2439
2398
|
});
|
|
2440
2399
|
}, [dispatch]);
|
|
2441
|
-
|
|
2400
|
+
var reset = react.useCallback(function () {
|
|
2442
2401
|
dispatch({
|
|
2443
2402
|
type: FunctionReset$2
|
|
2444
2403
|
});
|
|
2445
2404
|
}, [dispatch]);
|
|
2446
|
-
|
|
2405
|
+
var setInputValue = react.useCallback(function (newInputValue) {
|
|
2447
2406
|
dispatch({
|
|
2448
2407
|
type: FunctionSetInputValue$1,
|
|
2449
2408
|
inputValue: newInputValue
|
|
2450
2409
|
});
|
|
2451
2410
|
}, [dispatch]);
|
|
2452
2411
|
// Getter functions.
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
ref
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2412
|
+
var getLabelProps = react.useCallback(function (labelProps) {
|
|
2413
|
+
return _extends__default["default"]({
|
|
2414
|
+
id: elementIds.labelId,
|
|
2415
|
+
htmlFor: elementIds.toggleButtonId
|
|
2416
|
+
}, labelProps);
|
|
2417
|
+
}, [elementIds]);
|
|
2418
|
+
var getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
2419
|
+
var _extends2;
|
|
2420
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
2421
|
+
onMouseLeave = _ref.onMouseLeave,
|
|
2422
|
+
_ref$refKey = _ref.refKey,
|
|
2423
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey;
|
|
2424
|
+
_ref.onKeyDown;
|
|
2425
|
+
_ref.onBlur;
|
|
2426
|
+
var ref = _ref.ref,
|
|
2427
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
|
|
2428
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
2429
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
2430
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
2431
|
+
var menuHandleMouseLeave = function menuHandleMouseLeave() {
|
|
2471
2432
|
dispatch({
|
|
2472
2433
|
type: MenuMouseLeave$1
|
|
2473
2434
|
});
|
|
2474
2435
|
};
|
|
2475
2436
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
2476
|
-
return {
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
}),
|
|
2480
|
-
id: elementIds.menuId,
|
|
2481
|
-
role: 'listbox',
|
|
2482
|
-
'aria-labelledby': elementIds.labelId,
|
|
2483
|
-
tabIndex: -1,
|
|
2484
|
-
onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
|
|
2485
|
-
...rest
|
|
2486
|
-
};
|
|
2437
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
|
|
2438
|
+
menuRef.current = menuNode;
|
|
2439
|
+
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
|
|
2487
2440
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2441
|
+
var getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
|
|
2442
|
+
var _extends3;
|
|
2443
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
2444
|
+
onBlur = _ref3.onBlur,
|
|
2445
|
+
onClick = _ref3.onClick,
|
|
2446
|
+
onKeyDown = _ref3.onKeyDown,
|
|
2447
|
+
_ref3$refKey = _ref3.refKey,
|
|
2448
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
2449
|
+
ref = _ref3.ref,
|
|
2450
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$2);
|
|
2451
|
+
var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
|
2452
|
+
_ref4$suppressRefErro = _ref4.suppressRefError,
|
|
2453
|
+
suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
|
|
2454
|
+
var latestState = latest.current.state;
|
|
2455
|
+
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
2502
2456
|
dispatch({
|
|
2503
2457
|
type: ToggleButtonClick$1
|
|
2504
2458
|
});
|
|
2505
2459
|
};
|
|
2506
|
-
|
|
2460
|
+
var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
|
|
2507
2461
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
2508
2462
|
dispatch({
|
|
2509
2463
|
type: ToggleButtonBlur
|
|
2510
2464
|
});
|
|
2511
2465
|
}
|
|
2512
2466
|
};
|
|
2513
|
-
|
|
2514
|
-
|
|
2467
|
+
var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
|
|
2468
|
+
var key = normalizeArrowKey(event);
|
|
2515
2469
|
if (key && toggleButtonKeyDownHandlers[key]) {
|
|
2516
2470
|
toggleButtonKeyDownHandlers[key](event);
|
|
2517
2471
|
} else if (isAcceptedCharacterKey(key)) {
|
|
2518
2472
|
dispatch({
|
|
2519
2473
|
type: ToggleButtonKeyDownCharacter,
|
|
2520
|
-
key,
|
|
2521
|
-
getItemNodeFromIndex
|
|
2474
|
+
key: key,
|
|
2475
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2522
2476
|
});
|
|
2523
2477
|
}
|
|
2524
2478
|
};
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
}),
|
|
2529
|
-
'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
|
|
2530
|
-
'aria-controls': elementIds.menuId,
|
|
2531
|
-
'aria-expanded': latest.current.state.isOpen,
|
|
2532
|
-
'aria-haspopup': 'listbox',
|
|
2533
|
-
'aria-labelledby': `${elementIds.labelId}`,
|
|
2534
|
-
id: elementIds.toggleButtonId,
|
|
2535
|
-
role: 'combobox',
|
|
2536
|
-
tabIndex: 0,
|
|
2537
|
-
onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur),
|
|
2538
|
-
...rest
|
|
2539
|
-
};
|
|
2479
|
+
var toggleProps = _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
|
|
2480
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
2481
|
+
}), _extends3['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest);
|
|
2540
2482
|
if (!rest.disabled) {
|
|
2541
2483
|
toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
|
|
2542
2484
|
toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
|
|
@@ -2544,56 +2486,54 @@ function useSelect(userProps) {
|
|
|
2544
2486
|
setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
|
|
2545
2487
|
return toggleProps;
|
|
2546
2488
|
}, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2489
|
+
var getItemProps = react.useCallback(function (_temp5) {
|
|
2490
|
+
var _extends4;
|
|
2491
|
+
var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
|
2492
|
+
itemProp = _ref5.item,
|
|
2493
|
+
indexProp = _ref5.index,
|
|
2494
|
+
onMouseMove = _ref5.onMouseMove,
|
|
2495
|
+
onClick = _ref5.onClick,
|
|
2496
|
+
_ref5$refKey = _ref5.refKey,
|
|
2497
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
2498
|
+
ref = _ref5.ref,
|
|
2499
|
+
disabled = _ref5.disabled,
|
|
2500
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded3$1);
|
|
2501
|
+
var _latest$current = latest.current,
|
|
2502
|
+
latestState = _latest$current.state,
|
|
2503
|
+
latestProps = _latest$current.props;
|
|
2504
|
+
var item = itemProp != null ? itemProp : items[indexProp];
|
|
2505
|
+
var index = getItemIndex(indexProp, item, latestProps.items);
|
|
2506
|
+
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
2565
2507
|
if (index === latestState.highlightedIndex) {
|
|
2566
2508
|
return;
|
|
2567
2509
|
}
|
|
2568
2510
|
shouldScrollRef.current = false;
|
|
2569
2511
|
dispatch({
|
|
2570
2512
|
type: ItemMouseMove$1,
|
|
2571
|
-
index,
|
|
2572
|
-
disabled
|
|
2513
|
+
index: index,
|
|
2514
|
+
disabled: disabled
|
|
2573
2515
|
});
|
|
2574
2516
|
};
|
|
2575
|
-
|
|
2517
|
+
var itemHandleClick = function itemHandleClick() {
|
|
2576
2518
|
dispatch({
|
|
2577
2519
|
type: ItemClick$1,
|
|
2578
|
-
index
|
|
2520
|
+
index: index
|
|
2579
2521
|
});
|
|
2580
2522
|
};
|
|
2581
|
-
|
|
2523
|
+
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
2582
2524
|
if (itemIndex < 0) {
|
|
2583
2525
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
2584
2526
|
}
|
|
2585
|
-
|
|
2586
|
-
disabled,
|
|
2527
|
+
var itemProps = _extends__default["default"]((_extends4 = {
|
|
2528
|
+
disabled: disabled,
|
|
2587
2529
|
role: 'option',
|
|
2588
|
-
'aria-selected':
|
|
2589
|
-
id: elementIds.getItemId(itemIndex)
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
...rest
|
|
2596
|
-
};
|
|
2530
|
+
'aria-selected': "" + (item === selectedItem),
|
|
2531
|
+
id: elementIds.getItemId(itemIndex)
|
|
2532
|
+
}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
|
|
2533
|
+
if (itemNode) {
|
|
2534
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
2535
|
+
}
|
|
2536
|
+
}), _extends4), rest);
|
|
2597
2537
|
if (!disabled) {
|
|
2598
2538
|
itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
|
|
2599
2539
|
}
|
|
@@ -2602,49 +2542,49 @@ function useSelect(userProps) {
|
|
|
2602
2542
|
}, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
|
|
2603
2543
|
return {
|
|
2604
2544
|
// prop getters.
|
|
2605
|
-
getToggleButtonProps,
|
|
2606
|
-
getLabelProps,
|
|
2607
|
-
getMenuProps,
|
|
2608
|
-
getItemProps,
|
|
2545
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
2546
|
+
getLabelProps: getLabelProps,
|
|
2547
|
+
getMenuProps: getMenuProps,
|
|
2548
|
+
getItemProps: getItemProps,
|
|
2609
2549
|
// actions.
|
|
2610
|
-
toggleMenu,
|
|
2611
|
-
openMenu,
|
|
2612
|
-
closeMenu,
|
|
2613
|
-
setHighlightedIndex,
|
|
2614
|
-
selectItem,
|
|
2615
|
-
reset,
|
|
2616
|
-
setInputValue,
|
|
2550
|
+
toggleMenu: toggleMenu,
|
|
2551
|
+
openMenu: openMenu,
|
|
2552
|
+
closeMenu: closeMenu,
|
|
2553
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
2554
|
+
selectItem: selectItem,
|
|
2555
|
+
reset: reset,
|
|
2556
|
+
setInputValue: setInputValue,
|
|
2617
2557
|
// state.
|
|
2618
|
-
highlightedIndex,
|
|
2619
|
-
isOpen,
|
|
2620
|
-
selectedItem,
|
|
2621
|
-
inputValue
|
|
2558
|
+
highlightedIndex: highlightedIndex,
|
|
2559
|
+
isOpen: isOpen,
|
|
2560
|
+
selectedItem: selectedItem,
|
|
2561
|
+
inputValue: inputValue
|
|
2622
2562
|
};
|
|
2623
2563
|
}
|
|
2624
2564
|
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2565
|
+
var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
|
|
2566
|
+
var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
|
|
2567
|
+
var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
|
|
2568
|
+
var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
|
|
2569
|
+
var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
|
|
2570
|
+
var InputKeyDownPageUp = process.env.NODE_ENV !== "production" ? '__input_keydown_page_up__' : 5;
|
|
2571
|
+
var InputKeyDownPageDown = process.env.NODE_ENV !== "production" ? '__input_keydown_page_down__' : 6;
|
|
2572
|
+
var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 7;
|
|
2573
|
+
var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 8;
|
|
2574
|
+
var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 9;
|
|
2575
|
+
var InputFocus = process.env.NODE_ENV !== "production" ? '__input_focus__' : 10;
|
|
2576
|
+
var MenuMouseLeave = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 11;
|
|
2577
|
+
var ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 12;
|
|
2578
|
+
var ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 13;
|
|
2579
|
+
var ToggleButtonClick = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 14;
|
|
2580
|
+
var FunctionToggleMenu = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 15;
|
|
2581
|
+
var FunctionOpenMenu = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 16;
|
|
2582
|
+
var FunctionCloseMenu = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 17;
|
|
2583
|
+
var FunctionSetHighlightedIndex = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 18;
|
|
2584
|
+
var FunctionSelectItem = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 19;
|
|
2585
|
+
var FunctionSetInputValue = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 20;
|
|
2586
|
+
var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 21;
|
|
2587
|
+
var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 22;
|
|
2648
2588
|
|
|
2649
2589
|
var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
2650
2590
|
__proto__: null,
|
|
@@ -2674,22 +2614,17 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
|
2674
2614
|
});
|
|
2675
2615
|
|
|
2676
2616
|
function getInitialState$1(props) {
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
} = initialState;
|
|
2681
|
-
let {
|
|
2682
|
-
inputValue
|
|
2683
|
-
} = initialState;
|
|
2617
|
+
var initialState = getInitialState$2(props);
|
|
2618
|
+
var selectedItem = initialState.selectedItem;
|
|
2619
|
+
var inputValue = initialState.inputValue;
|
|
2684
2620
|
if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
|
|
2685
2621
|
inputValue = props.itemToString(selectedItem);
|
|
2686
2622
|
}
|
|
2687
|
-
return {
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
};
|
|
2623
|
+
return _extends__default["default"]({}, initialState, {
|
|
2624
|
+
inputValue: inputValue
|
|
2625
|
+
});
|
|
2691
2626
|
}
|
|
2692
|
-
|
|
2627
|
+
var propTypes$1 = {
|
|
2693
2628
|
items: PropTypes__default["default"].array.isRequired,
|
|
2694
2629
|
itemToString: PropTypes__default["default"].func,
|
|
2695
2630
|
getA11yStatusMessage: PropTypes__default["default"].func,
|
|
@@ -2742,11 +2677,13 @@ const propTypes$1 = {
|
|
|
2742
2677
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
2743
2678
|
*/
|
|
2744
2679
|
function useControlledReducer(reducer, initialState, props) {
|
|
2745
|
-
|
|
2746
|
-
|
|
2680
|
+
var previousSelectedItemRef = react.useRef();
|
|
2681
|
+
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
|
|
2682
|
+
state = _useEnhancedReducer[0],
|
|
2683
|
+
dispatch = _useEnhancedReducer[1];
|
|
2747
2684
|
|
|
2748
2685
|
// ToDo: if needed, make same approach as selectedItemChanged from Downshift.
|
|
2749
|
-
react.useEffect(()
|
|
2686
|
+
react.useEffect(function () {
|
|
2750
2687
|
if (isControlledProp(props, 'selectedItem')) {
|
|
2751
2688
|
if (previousSelectedItemRef.current !== props.selectedItem) {
|
|
2752
2689
|
dispatch({
|
|
@@ -2761,26 +2698,23 @@ function useControlledReducer(reducer, initialState, props) {
|
|
|
2761
2698
|
}
|
|
2762
2699
|
|
|
2763
2700
|
// eslint-disable-next-line import/no-mutable-exports
|
|
2764
|
-
|
|
2701
|
+
var validatePropTypes$1 = noop;
|
|
2765
2702
|
/* istanbul ignore next */
|
|
2766
2703
|
if (process.env.NODE_ENV !== 'production') {
|
|
2767
|
-
validatePropTypes$1 = (options, caller)
|
|
2704
|
+
validatePropTypes$1 = function validatePropTypes(options, caller) {
|
|
2768
2705
|
PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
|
|
2769
2706
|
};
|
|
2770
2707
|
}
|
|
2771
|
-
|
|
2772
|
-
...defaultProps$3,
|
|
2708
|
+
var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
|
|
2773
2709
|
getA11yStatusMessage: getA11yStatusMessage$1
|
|
2774
|
-
};
|
|
2710
|
+
});
|
|
2775
2711
|
|
|
2776
2712
|
/* eslint-disable complexity */
|
|
2777
2713
|
function downshiftUseComboboxReducer(state, action) {
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
} = action;
|
|
2783
|
-
let changes;
|
|
2714
|
+
var type = action.type,
|
|
2715
|
+
props = action.props,
|
|
2716
|
+
altKey = action.altKey;
|
|
2717
|
+
var changes;
|
|
2784
2718
|
switch (type) {
|
|
2785
2719
|
case ItemClick:
|
|
2786
2720
|
changes = {
|
|
@@ -2805,14 +2739,13 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2805
2739
|
case InputKeyDownArrowUp:
|
|
2806
2740
|
if (state.isOpen) {
|
|
2807
2741
|
if (altKey) {
|
|
2808
|
-
changes = {
|
|
2742
|
+
changes = _extends__default["default"]({
|
|
2809
2743
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2810
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
};
|
|
2744
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2745
|
+
}, state.highlightedIndex >= 0 && {
|
|
2746
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
2747
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
2748
|
+
});
|
|
2816
2749
|
} else {
|
|
2817
2750
|
changes = {
|
|
2818
2751
|
highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
|
|
@@ -2826,24 +2759,22 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2826
2759
|
}
|
|
2827
2760
|
break;
|
|
2828
2761
|
case InputKeyDownEnter:
|
|
2829
|
-
changes = {
|
|
2762
|
+
changes = _extends__default["default"]({
|
|
2830
2763
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2831
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
};
|
|
2764
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2765
|
+
}, state.highlightedIndex >= 0 && {
|
|
2766
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
2767
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
2768
|
+
});
|
|
2837
2769
|
break;
|
|
2838
2770
|
case InputKeyDownEscape:
|
|
2839
|
-
changes = {
|
|
2771
|
+
changes = _extends__default["default"]({
|
|
2840
2772
|
isOpen: false,
|
|
2841
|
-
highlightedIndex: -1
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
};
|
|
2773
|
+
highlightedIndex: -1
|
|
2774
|
+
}, !state.isOpen && {
|
|
2775
|
+
selectedItem: null,
|
|
2776
|
+
inputValue: ''
|
|
2777
|
+
});
|
|
2847
2778
|
break;
|
|
2848
2779
|
case InputKeyDownPageUp:
|
|
2849
2780
|
changes = {
|
|
@@ -2866,14 +2797,13 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2866
2797
|
};
|
|
2867
2798
|
break;
|
|
2868
2799
|
case InputBlur:
|
|
2869
|
-
changes = {
|
|
2800
|
+
changes = _extends__default["default"]({
|
|
2870
2801
|
isOpen: false,
|
|
2871
|
-
highlightedIndex: -1
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
};
|
|
2802
|
+
highlightedIndex: -1
|
|
2803
|
+
}, state.highlightedIndex >= 0 && action.selectItem && {
|
|
2804
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
2805
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
2806
|
+
});
|
|
2877
2807
|
break;
|
|
2878
2808
|
case InputChange:
|
|
2879
2809
|
changes = {
|
|
@@ -2902,14 +2832,14 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2902
2832
|
default:
|
|
2903
2833
|
return downshiftCommonReducer(state, action, stateChangeTypes$1);
|
|
2904
2834
|
}
|
|
2905
|
-
return {
|
|
2906
|
-
...state,
|
|
2907
|
-
...changes
|
|
2908
|
-
};
|
|
2835
|
+
return _extends__default["default"]({}, state, changes);
|
|
2909
2836
|
}
|
|
2910
2837
|
/* eslint-enable complexity */
|
|
2911
2838
|
|
|
2912
|
-
|
|
2839
|
+
var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
|
|
2840
|
+
_excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"],
|
|
2841
|
+
_excluded3 = ["onClick", "onPress", "refKey", "ref"],
|
|
2842
|
+
_excluded4 = ["onKeyDown", "onChange", "onInput", "onFocus", "onBlur", "onChangeText", "refKey", "ref"];
|
|
2913
2843
|
useCombobox.stateChangeTypes = stateChangeTypes$1;
|
|
2914
2844
|
function useCombobox(userProps) {
|
|
2915
2845
|
if (userProps === void 0) {
|
|
@@ -2917,349 +2847,327 @@ function useCombobox(userProps) {
|
|
|
2917
2847
|
}
|
|
2918
2848
|
validatePropTypes$1(userProps, useCombobox);
|
|
2919
2849
|
// Props defaults and destructuring.
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
environment,
|
|
2930
|
-
getA11yStatusMessage,
|
|
2931
|
-
getA11ySelectionMessage,
|
|
2932
|
-
itemToString
|
|
2933
|
-
} = props;
|
|
2850
|
+
var props = _extends__default["default"]({}, defaultProps$1, userProps);
|
|
2851
|
+
var initialIsOpen = props.initialIsOpen,
|
|
2852
|
+
defaultIsOpen = props.defaultIsOpen,
|
|
2853
|
+
items = props.items,
|
|
2854
|
+
scrollIntoView = props.scrollIntoView,
|
|
2855
|
+
environment = props.environment,
|
|
2856
|
+
getA11yStatusMessage = props.getA11yStatusMessage,
|
|
2857
|
+
getA11ySelectionMessage = props.getA11ySelectionMessage,
|
|
2858
|
+
itemToString = props.itemToString;
|
|
2934
2859
|
// Initial state depending on controlled props.
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2860
|
+
var initialState = getInitialState$1(props);
|
|
2861
|
+
var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
|
|
2862
|
+
state = _useControlledReducer[0],
|
|
2863
|
+
dispatch = _useControlledReducer[1];
|
|
2864
|
+
var isOpen = state.isOpen,
|
|
2865
|
+
highlightedIndex = state.highlightedIndex,
|
|
2866
|
+
selectedItem = state.selectedItem,
|
|
2867
|
+
inputValue = state.inputValue;
|
|
2943
2868
|
|
|
2944
2869
|
// Element refs.
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2870
|
+
var menuRef = react.useRef(null);
|
|
2871
|
+
var itemRefs = react.useRef({});
|
|
2872
|
+
var inputRef = react.useRef(null);
|
|
2873
|
+
var toggleButtonRef = react.useRef(null);
|
|
2874
|
+
var isInitialMountRef = react.useRef(true);
|
|
2950
2875
|
// prevent id re-generation between renders.
|
|
2951
|
-
|
|
2876
|
+
var elementIds = useElementIds(props);
|
|
2952
2877
|
// used to keep track of how many items we had on previous cycle.
|
|
2953
|
-
|
|
2878
|
+
var previousResultCountRef = react.useRef();
|
|
2954
2879
|
// utility callback to get item element.
|
|
2955
|
-
|
|
2956
|
-
state,
|
|
2957
|
-
props
|
|
2880
|
+
var latest = useLatestRef({
|
|
2881
|
+
state: state,
|
|
2882
|
+
props: props
|
|
2958
2883
|
});
|
|
2959
|
-
|
|
2884
|
+
var getItemNodeFromIndex = react.useCallback(function (index) {
|
|
2885
|
+
return itemRefs.current[elementIds.getItemId(index)];
|
|
2886
|
+
}, [elementIds]);
|
|
2960
2887
|
|
|
2961
2888
|
// Effects.
|
|
2962
2889
|
// Sets a11y status message on changes in state.
|
|
2963
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
2890
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
|
|
2964
2891
|
isInitialMount: isInitialMountRef.current,
|
|
2965
2892
|
previousResultCount: previousResultCountRef.current,
|
|
2966
|
-
items,
|
|
2967
|
-
environment,
|
|
2968
|
-
itemToString
|
|
2969
|
-
|
|
2970
|
-
});
|
|
2893
|
+
items: items,
|
|
2894
|
+
environment: environment,
|
|
2895
|
+
itemToString: itemToString
|
|
2896
|
+
}, state));
|
|
2971
2897
|
// Sets a11y status message on changes in selectedItem.
|
|
2972
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
2898
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
|
|
2973
2899
|
isInitialMount: isInitialMountRef.current,
|
|
2974
2900
|
previousResultCount: previousResultCountRef.current,
|
|
2975
|
-
items,
|
|
2976
|
-
environment,
|
|
2977
|
-
itemToString
|
|
2978
|
-
|
|
2979
|
-
});
|
|
2901
|
+
items: items,
|
|
2902
|
+
environment: environment,
|
|
2903
|
+
itemToString: itemToString
|
|
2904
|
+
}, state));
|
|
2980
2905
|
// Scroll on highlighted item if change comes from keyboard.
|
|
2981
|
-
|
|
2906
|
+
var shouldScrollRef = useScrollIntoView({
|
|
2982
2907
|
menuElement: menuRef.current,
|
|
2983
|
-
highlightedIndex,
|
|
2984
|
-
isOpen,
|
|
2985
|
-
itemRefs,
|
|
2986
|
-
scrollIntoView,
|
|
2987
|
-
getItemNodeFromIndex
|
|
2908
|
+
highlightedIndex: highlightedIndex,
|
|
2909
|
+
isOpen: isOpen,
|
|
2910
|
+
itemRefs: itemRefs,
|
|
2911
|
+
scrollIntoView: scrollIntoView,
|
|
2912
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2988
2913
|
});
|
|
2989
2914
|
useControlPropsValidator({
|
|
2990
2915
|
isInitialMount: isInitialMountRef.current,
|
|
2991
|
-
props,
|
|
2992
|
-
state
|
|
2916
|
+
props: props,
|
|
2917
|
+
state: state
|
|
2993
2918
|
});
|
|
2994
2919
|
// Focus the input on first render if required.
|
|
2995
|
-
react.useEffect(()
|
|
2996
|
-
|
|
2920
|
+
react.useEffect(function () {
|
|
2921
|
+
var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
|
|
2997
2922
|
if (focusOnOpen && inputRef.current) {
|
|
2998
2923
|
inputRef.current.focus();
|
|
2999
2924
|
}
|
|
3000
2925
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3001
2926
|
}, []);
|
|
3002
|
-
react.useEffect(()
|
|
2927
|
+
react.useEffect(function () {
|
|
3003
2928
|
if (isInitialMountRef.current) {
|
|
3004
2929
|
return;
|
|
3005
2930
|
}
|
|
3006
2931
|
previousResultCountRef.current = items.length;
|
|
3007
2932
|
});
|
|
3008
2933
|
// Add mouse/touch events to document.
|
|
3009
|
-
|
|
2934
|
+
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
|
|
3010
2935
|
dispatch({
|
|
3011
2936
|
type: InputBlur,
|
|
3012
2937
|
selectItem: false
|
|
3013
2938
|
});
|
|
3014
2939
|
});
|
|
3015
|
-
|
|
2940
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
|
|
3016
2941
|
// Make initial ref false.
|
|
3017
|
-
react.useEffect(()
|
|
2942
|
+
react.useEffect(function () {
|
|
3018
2943
|
isInitialMountRef.current = false;
|
|
3019
|
-
return ()
|
|
2944
|
+
return function () {
|
|
3020
2945
|
isInitialMountRef.current = true;
|
|
3021
2946
|
};
|
|
3022
2947
|
}, []);
|
|
3023
2948
|
// Reset itemRefs on close.
|
|
3024
|
-
react.useEffect(()
|
|
2949
|
+
react.useEffect(function () {
|
|
3025
2950
|
if (!isOpen) {
|
|
3026
2951
|
itemRefs.current = {};
|
|
3027
2952
|
} else if (document.activeElement !== inputRef.current) {
|
|
3028
|
-
|
|
2953
|
+
var _inputRef$current;
|
|
2954
|
+
inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
3029
2955
|
}
|
|
3030
2956
|
}, [isOpen]);
|
|
3031
2957
|
|
|
3032
2958
|
/* Event handler functions */
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
event
|
|
3036
|
-
dispatch({
|
|
3037
|
-
type: InputKeyDownArrowDown,
|
|
3038
|
-
altKey: event.altKey,
|
|
3039
|
-
getItemNodeFromIndex
|
|
3040
|
-
});
|
|
3041
|
-
},
|
|
3042
|
-
ArrowUp(event) {
|
|
3043
|
-
event.preventDefault();
|
|
3044
|
-
dispatch({
|
|
3045
|
-
type: InputKeyDownArrowUp,
|
|
3046
|
-
altKey: event.altKey,
|
|
3047
|
-
getItemNodeFromIndex
|
|
3048
|
-
});
|
|
3049
|
-
},
|
|
3050
|
-
Home(event) {
|
|
3051
|
-
if (!latest.current.state.isOpen) {
|
|
3052
|
-
return;
|
|
3053
|
-
}
|
|
3054
|
-
event.preventDefault();
|
|
3055
|
-
dispatch({
|
|
3056
|
-
type: InputKeyDownHome,
|
|
3057
|
-
getItemNodeFromIndex
|
|
3058
|
-
});
|
|
3059
|
-
},
|
|
3060
|
-
End(event) {
|
|
3061
|
-
if (!latest.current.state.isOpen) {
|
|
3062
|
-
return;
|
|
3063
|
-
}
|
|
3064
|
-
event.preventDefault();
|
|
3065
|
-
dispatch({
|
|
3066
|
-
type: InputKeyDownEnd,
|
|
3067
|
-
getItemNodeFromIndex
|
|
3068
|
-
});
|
|
3069
|
-
},
|
|
3070
|
-
Escape(event) {
|
|
3071
|
-
const latestState = latest.current.state;
|
|
3072
|
-
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
2959
|
+
var inputKeyDownHandlers = react.useMemo(function () {
|
|
2960
|
+
return {
|
|
2961
|
+
ArrowDown: function ArrowDown(event) {
|
|
3073
2962
|
event.preventDefault();
|
|
3074
2963
|
dispatch({
|
|
3075
|
-
type:
|
|
2964
|
+
type: InputKeyDownArrowDown,
|
|
2965
|
+
altKey: event.altKey,
|
|
2966
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3076
2967
|
});
|
|
3077
|
-
}
|
|
3078
|
-
|
|
3079
|
-
Enter(event) {
|
|
3080
|
-
const latestState = latest.current.state;
|
|
3081
|
-
// if closed or no highlighted index, do nothing.
|
|
3082
|
-
if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3083
|
-
) {
|
|
3084
|
-
return;
|
|
3085
|
-
}
|
|
3086
|
-
event.preventDefault();
|
|
3087
|
-
dispatch({
|
|
3088
|
-
type: InputKeyDownEnter,
|
|
3089
|
-
getItemNodeFromIndex
|
|
3090
|
-
});
|
|
3091
|
-
},
|
|
3092
|
-
PageUp(event) {
|
|
3093
|
-
if (latest.current.state.isOpen) {
|
|
2968
|
+
},
|
|
2969
|
+
ArrowUp: function ArrowUp(event) {
|
|
3094
2970
|
event.preventDefault();
|
|
3095
2971
|
dispatch({
|
|
3096
|
-
type:
|
|
3097
|
-
|
|
2972
|
+
type: InputKeyDownArrowUp,
|
|
2973
|
+
altKey: event.altKey,
|
|
2974
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3098
2975
|
});
|
|
3099
|
-
}
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
2976
|
+
},
|
|
2977
|
+
Home: function Home(event) {
|
|
2978
|
+
if (!latest.current.state.isOpen) {
|
|
2979
|
+
return;
|
|
2980
|
+
}
|
|
2981
|
+
event.preventDefault();
|
|
2982
|
+
dispatch({
|
|
2983
|
+
type: InputKeyDownHome,
|
|
2984
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2985
|
+
});
|
|
2986
|
+
},
|
|
2987
|
+
End: function End(event) {
|
|
2988
|
+
if (!latest.current.state.isOpen) {
|
|
2989
|
+
return;
|
|
2990
|
+
}
|
|
3103
2991
|
event.preventDefault();
|
|
3104
2992
|
dispatch({
|
|
3105
|
-
type:
|
|
3106
|
-
getItemNodeFromIndex
|
|
2993
|
+
type: InputKeyDownEnd,
|
|
2994
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3107
2995
|
});
|
|
2996
|
+
},
|
|
2997
|
+
Escape: function Escape(event) {
|
|
2998
|
+
var latestState = latest.current.state;
|
|
2999
|
+
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
3000
|
+
event.preventDefault();
|
|
3001
|
+
dispatch({
|
|
3002
|
+
type: InputKeyDownEscape
|
|
3003
|
+
});
|
|
3004
|
+
}
|
|
3005
|
+
},
|
|
3006
|
+
Enter: function Enter(event) {
|
|
3007
|
+
var latestState = latest.current.state;
|
|
3008
|
+
// if closed or no highlighted index, do nothing.
|
|
3009
|
+
if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3010
|
+
) {
|
|
3011
|
+
return;
|
|
3012
|
+
}
|
|
3013
|
+
event.preventDefault();
|
|
3014
|
+
dispatch({
|
|
3015
|
+
type: InputKeyDownEnter,
|
|
3016
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3017
|
+
});
|
|
3018
|
+
},
|
|
3019
|
+
PageUp: function PageUp(event) {
|
|
3020
|
+
if (latest.current.state.isOpen) {
|
|
3021
|
+
event.preventDefault();
|
|
3022
|
+
dispatch({
|
|
3023
|
+
type: InputKeyDownPageUp,
|
|
3024
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3025
|
+
});
|
|
3026
|
+
}
|
|
3027
|
+
},
|
|
3028
|
+
PageDown: function PageDown(event) {
|
|
3029
|
+
if (latest.current.state.isOpen) {
|
|
3030
|
+
event.preventDefault();
|
|
3031
|
+
dispatch({
|
|
3032
|
+
type: InputKeyDownPageDown,
|
|
3033
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3034
|
+
});
|
|
3035
|
+
}
|
|
3108
3036
|
}
|
|
3109
|
-
}
|
|
3110
|
-
}
|
|
3037
|
+
};
|
|
3038
|
+
}, [dispatch, latest, getItemNodeFromIndex]);
|
|
3111
3039
|
|
|
3112
3040
|
// Getter props.
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3041
|
+
var getLabelProps = react.useCallback(function (labelProps) {
|
|
3042
|
+
return _extends__default["default"]({
|
|
3043
|
+
id: elementIds.labelId,
|
|
3044
|
+
htmlFor: elementIds.inputId
|
|
3045
|
+
}, labelProps);
|
|
3046
|
+
}, [elementIds]);
|
|
3047
|
+
var getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
3048
|
+
var _extends2;
|
|
3049
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
3050
|
+
onMouseLeave = _ref.onMouseLeave,
|
|
3051
|
+
_ref$refKey = _ref.refKey,
|
|
3052
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
|
3053
|
+
ref = _ref.ref,
|
|
3054
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
|
|
3055
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
3056
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
3057
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
3128
3058
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
3129
|
-
return {
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
|
|
3137
|
-
dispatch({
|
|
3138
|
-
type: MenuMouseLeave
|
|
3139
|
-
});
|
|
3140
|
-
}),
|
|
3141
|
-
...rest
|
|
3142
|
-
};
|
|
3059
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
|
|
3060
|
+
menuRef.current = menuNode;
|
|
3061
|
+
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
|
|
3062
|
+
dispatch({
|
|
3063
|
+
type: MenuMouseLeave
|
|
3064
|
+
});
|
|
3065
|
+
}), _extends2), rest);
|
|
3143
3066
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3067
|
+
var getItemProps = react.useCallback(function (_temp3) {
|
|
3068
|
+
var _extends3, _ref4;
|
|
3069
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
3070
|
+
item = _ref3.item,
|
|
3071
|
+
index = _ref3.index,
|
|
3072
|
+
_ref3$refKey = _ref3.refKey,
|
|
3073
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
3074
|
+
ref = _ref3.ref,
|
|
3075
|
+
onMouseMove = _ref3.onMouseMove,
|
|
3076
|
+
onMouseDown = _ref3.onMouseDown;
|
|
3077
|
+
_ref3.onClick;
|
|
3078
|
+
var onPress = _ref3.onPress,
|
|
3079
|
+
disabled = _ref3.disabled,
|
|
3080
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$1);
|
|
3081
|
+
var _latest$current = latest.current,
|
|
3082
|
+
latestProps = _latest$current.props,
|
|
3083
|
+
latestState = _latest$current.state;
|
|
3084
|
+
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
3162
3085
|
if (itemIndex < 0) {
|
|
3163
3086
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
3164
3087
|
}
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3088
|
+
var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
|
|
3089
|
+
var customClickHandler = /* istanbul ignore next (react-native) */onPress ;
|
|
3090
|
+
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
3168
3091
|
if (index === latestState.highlightedIndex) {
|
|
3169
3092
|
return;
|
|
3170
3093
|
}
|
|
3171
3094
|
shouldScrollRef.current = false;
|
|
3172
3095
|
dispatch({
|
|
3173
3096
|
type: ItemMouseMove,
|
|
3174
|
-
index,
|
|
3175
|
-
disabled
|
|
3097
|
+
index: index,
|
|
3098
|
+
disabled: disabled
|
|
3176
3099
|
});
|
|
3177
3100
|
};
|
|
3178
|
-
|
|
3101
|
+
var itemHandleClick = function itemHandleClick() {
|
|
3179
3102
|
dispatch({
|
|
3180
3103
|
type: ItemClick,
|
|
3181
|
-
index
|
|
3104
|
+
index: index
|
|
3182
3105
|
});
|
|
3183
3106
|
};
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
[refKey]: handleRefs(ref, itemNode => {
|
|
3187
|
-
if (itemNode) {
|
|
3188
|
-
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3189
|
-
}
|
|
3190
|
-
}),
|
|
3191
|
-
disabled,
|
|
3192
|
-
role: 'option',
|
|
3193
|
-
'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
|
|
3194
|
-
id: elementIds.getItemId(itemIndex),
|
|
3195
|
-
...(!disabled && {
|
|
3196
|
-
[onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
|
|
3197
|
-
}),
|
|
3198
|
-
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3199
|
-
onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
|
|
3200
|
-
...rest
|
|
3107
|
+
var itemHandleMouseDown = function itemHandleMouseDown(e) {
|
|
3108
|
+
return e.preventDefault();
|
|
3201
3109
|
};
|
|
3110
|
+
return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
|
|
3111
|
+
if (itemNode) {
|
|
3112
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3113
|
+
}
|
|
3114
|
+
}), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
|
|
3115
|
+
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3116
|
+
onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
|
|
3117
|
+
}, rest);
|
|
3202
3118
|
}, [dispatch, latest, shouldScrollRef, elementIds]);
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3119
|
+
var getToggleButtonProps = react.useCallback(function (_temp4) {
|
|
3120
|
+
var _extends4;
|
|
3121
|
+
var _ref5 = _temp4 === void 0 ? {} : _temp4;
|
|
3122
|
+
_ref5.onClick;
|
|
3123
|
+
var onPress = _ref5.onPress,
|
|
3124
|
+
_ref5$refKey = _ref5.refKey,
|
|
3125
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
3126
|
+
ref = _ref5.ref,
|
|
3127
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded3);
|
|
3128
|
+
var latestState = latest.current.state;
|
|
3129
|
+
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
3213
3130
|
dispatch({
|
|
3214
3131
|
type: ToggleButtonClick
|
|
3215
3132
|
});
|
|
3216
3133
|
};
|
|
3217
|
-
return {
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
'aria-expanded': latestState.isOpen,
|
|
3223
|
-
id: elementIds.toggleButtonId,
|
|
3224
|
-
tabIndex: -1,
|
|
3225
|
-
...(!rest.disabled && {
|
|
3226
|
-
...(/* istanbul ignore next (react-native) */{
|
|
3227
|
-
onPress: callAllEventHandlers(onPress, toggleButtonHandleClick)
|
|
3228
|
-
} )
|
|
3229
|
-
}),
|
|
3230
|
-
...rest
|
|
3231
|
-
};
|
|
3134
|
+
return _extends__default["default"]((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
|
|
3135
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
3136
|
+
}), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends__default["default"]({}, /* istanbul ignore next (react-native) */{
|
|
3137
|
+
onPress: callAllEventHandlers(onPress, toggleButtonHandleClick)
|
|
3138
|
+
} ), rest);
|
|
3232
3139
|
}, [dispatch, latest, elementIds]);
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3140
|
+
var getInputProps = react.useCallback(function (_temp5, _temp6) {
|
|
3141
|
+
var _extends5;
|
|
3142
|
+
var _ref6 = _temp5 === void 0 ? {} : _temp5,
|
|
3143
|
+
onKeyDown = _ref6.onKeyDown,
|
|
3144
|
+
onChange = _ref6.onChange,
|
|
3145
|
+
onInput = _ref6.onInput,
|
|
3146
|
+
onFocus = _ref6.onFocus,
|
|
3147
|
+
onBlur = _ref6.onBlur,
|
|
3148
|
+
onChangeText = _ref6.onChangeText,
|
|
3149
|
+
_ref6$refKey = _ref6.refKey,
|
|
3150
|
+
refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
|
|
3151
|
+
ref = _ref6.ref,
|
|
3152
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref6, _excluded4);
|
|
3153
|
+
var _ref7 = _temp6 === void 0 ? {} : _temp6,
|
|
3154
|
+
_ref7$suppressRefErro = _ref7.suppressRefError,
|
|
3155
|
+
suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
|
|
3248
3156
|
setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3157
|
+
var latestState = latest.current.state;
|
|
3158
|
+
var inputHandleKeyDown = function inputHandleKeyDown(event) {
|
|
3159
|
+
var key = normalizeArrowKey(event);
|
|
3252
3160
|
if (key && inputKeyDownHandlers[key]) {
|
|
3253
3161
|
inputKeyDownHandlers[key](event);
|
|
3254
3162
|
}
|
|
3255
3163
|
};
|
|
3256
|
-
|
|
3164
|
+
var inputHandleChange = function inputHandleChange(event) {
|
|
3257
3165
|
dispatch({
|
|
3258
3166
|
type: InputChange,
|
|
3259
3167
|
inputValue: /* istanbul ignore next (react-native) */event.nativeEvent.text
|
|
3260
3168
|
});
|
|
3261
3169
|
};
|
|
3262
|
-
|
|
3170
|
+
var inputHandleBlur = function inputHandleBlur() {
|
|
3263
3171
|
/* istanbul ignore else */
|
|
3264
3172
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
3265
3173
|
dispatch({
|
|
@@ -3268,7 +3176,7 @@ function useCombobox(userProps) {
|
|
|
3268
3176
|
});
|
|
3269
3177
|
}
|
|
3270
3178
|
};
|
|
3271
|
-
|
|
3179
|
+
var inputHandleFocus = function inputHandleFocus() {
|
|
3272
3180
|
if (!latestState.isOpen) {
|
|
3273
3181
|
dispatch({
|
|
3274
3182
|
type: InputFocus
|
|
@@ -3277,111 +3185,92 @@ function useCombobox(userProps) {
|
|
|
3277
3185
|
};
|
|
3278
3186
|
|
|
3279
3187
|
/* istanbul ignore next (preact) */
|
|
3280
|
-
|
|
3281
|
-
|
|
3188
|
+
var onChangeKey = 'onChange';
|
|
3189
|
+
var eventHandlers = {};
|
|
3282
3190
|
if (!rest.disabled) {
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
|
|
3286
|
-
onBlur: callAllEventHandlers(onBlur, inputHandleBlur),
|
|
3287
|
-
onFocus: callAllEventHandlers(onFocus, inputHandleFocus)
|
|
3288
|
-
};
|
|
3191
|
+
var _eventHandlers;
|
|
3192
|
+
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onFocus = callAllEventHandlers(onFocus, inputHandleFocus), _eventHandlers);
|
|
3289
3193
|
}
|
|
3290
3194
|
|
|
3291
3195
|
/* istanbul ignore if (react-native) */
|
|
3292
3196
|
{
|
|
3293
3197
|
eventHandlers.onChange = callAllEventHandlers(onChange, onInput, inputHandleChange);
|
|
3294
|
-
eventHandlers.onChangeText = callAllEventHandlers(onChangeText, onInput, text
|
|
3198
|
+
eventHandlers.onChangeText = callAllEventHandlers(onChangeText, onInput, function (text) {
|
|
3295
3199
|
inputHandleChange({
|
|
3296
3200
|
nativeEvent: {
|
|
3297
|
-
text
|
|
3201
|
+
text: text
|
|
3298
3202
|
}
|
|
3299
3203
|
});
|
|
3300
3204
|
});
|
|
3301
3205
|
}
|
|
3302
|
-
return {
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
}),
|
|
3306
|
-
'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
|
|
3307
|
-
'aria-autocomplete': 'list',
|
|
3308
|
-
'aria-controls': elementIds.menuId,
|
|
3309
|
-
'aria-expanded': latestState.isOpen,
|
|
3310
|
-
'aria-labelledby': elementIds.labelId,
|
|
3311
|
-
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
|
|
3312
|
-
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
3313
|
-
autoComplete: 'off',
|
|
3314
|
-
id: elementIds.inputId,
|
|
3315
|
-
role: 'combobox',
|
|
3316
|
-
value: latestState.inputValue,
|
|
3317
|
-
...eventHandlers,
|
|
3318
|
-
...rest
|
|
3319
|
-
};
|
|
3206
|
+
return _extends__default["default"]((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
|
|
3207
|
+
inputRef.current = inputNode;
|
|
3208
|
+
}), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
|
|
3320
3209
|
}, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
|
|
3321
3210
|
|
|
3322
3211
|
// returns
|
|
3323
|
-
|
|
3212
|
+
var toggleMenu = react.useCallback(function () {
|
|
3324
3213
|
dispatch({
|
|
3325
3214
|
type: FunctionToggleMenu
|
|
3326
3215
|
});
|
|
3327
3216
|
}, [dispatch]);
|
|
3328
|
-
|
|
3217
|
+
var closeMenu = react.useCallback(function () {
|
|
3329
3218
|
dispatch({
|
|
3330
3219
|
type: FunctionCloseMenu
|
|
3331
3220
|
});
|
|
3332
3221
|
}, [dispatch]);
|
|
3333
|
-
|
|
3222
|
+
var openMenu = react.useCallback(function () {
|
|
3334
3223
|
dispatch({
|
|
3335
3224
|
type: FunctionOpenMenu
|
|
3336
3225
|
});
|
|
3337
3226
|
}, [dispatch]);
|
|
3338
|
-
|
|
3227
|
+
var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
|
|
3339
3228
|
dispatch({
|
|
3340
3229
|
type: FunctionSetHighlightedIndex,
|
|
3341
3230
|
highlightedIndex: newHighlightedIndex
|
|
3342
3231
|
});
|
|
3343
3232
|
}, [dispatch]);
|
|
3344
|
-
|
|
3233
|
+
var selectItem = react.useCallback(function (newSelectedItem) {
|
|
3345
3234
|
dispatch({
|
|
3346
3235
|
type: FunctionSelectItem,
|
|
3347
3236
|
selectedItem: newSelectedItem
|
|
3348
3237
|
});
|
|
3349
3238
|
}, [dispatch]);
|
|
3350
|
-
|
|
3239
|
+
var setInputValue = react.useCallback(function (newInputValue) {
|
|
3351
3240
|
dispatch({
|
|
3352
3241
|
type: FunctionSetInputValue,
|
|
3353
3242
|
inputValue: newInputValue
|
|
3354
3243
|
});
|
|
3355
3244
|
}, [dispatch]);
|
|
3356
|
-
|
|
3245
|
+
var reset = react.useCallback(function () {
|
|
3357
3246
|
dispatch({
|
|
3358
3247
|
type: FunctionReset$1
|
|
3359
3248
|
});
|
|
3360
3249
|
}, [dispatch]);
|
|
3361
3250
|
return {
|
|
3362
3251
|
// prop getters.
|
|
3363
|
-
getItemProps,
|
|
3364
|
-
getLabelProps,
|
|
3365
|
-
getMenuProps,
|
|
3366
|
-
getInputProps,
|
|
3367
|
-
getToggleButtonProps,
|
|
3252
|
+
getItemProps: getItemProps,
|
|
3253
|
+
getLabelProps: getLabelProps,
|
|
3254
|
+
getMenuProps: getMenuProps,
|
|
3255
|
+
getInputProps: getInputProps,
|
|
3256
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
3368
3257
|
// actions.
|
|
3369
|
-
toggleMenu,
|
|
3370
|
-
openMenu,
|
|
3371
|
-
closeMenu,
|
|
3372
|
-
setHighlightedIndex,
|
|
3373
|
-
setInputValue,
|
|
3374
|
-
selectItem,
|
|
3375
|
-
reset,
|
|
3258
|
+
toggleMenu: toggleMenu,
|
|
3259
|
+
openMenu: openMenu,
|
|
3260
|
+
closeMenu: closeMenu,
|
|
3261
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
3262
|
+
setInputValue: setInputValue,
|
|
3263
|
+
selectItem: selectItem,
|
|
3264
|
+
reset: reset,
|
|
3376
3265
|
// state.
|
|
3377
|
-
highlightedIndex,
|
|
3378
|
-
isOpen,
|
|
3379
|
-
selectedItem,
|
|
3380
|
-
inputValue
|
|
3266
|
+
highlightedIndex: highlightedIndex,
|
|
3267
|
+
isOpen: isOpen,
|
|
3268
|
+
selectedItem: selectedItem,
|
|
3269
|
+
inputValue: inputValue
|
|
3381
3270
|
};
|
|
3382
3271
|
}
|
|
3383
3272
|
|
|
3384
|
-
|
|
3273
|
+
var defaultStateValues = {
|
|
3385
3274
|
activeIndex: -1,
|
|
3386
3275
|
selectedItems: []
|
|
3387
3276
|
};
|
|
@@ -3419,11 +3308,11 @@ function getDefaultValue(props, propKey) {
|
|
|
3419
3308
|
* @returns {Object} The initial state.
|
|
3420
3309
|
*/
|
|
3421
3310
|
function getInitialState(props) {
|
|
3422
|
-
|
|
3423
|
-
|
|
3311
|
+
var activeIndex = getInitialValue(props, 'activeIndex');
|
|
3312
|
+
var selectedItems = getInitialValue(props, 'selectedItems');
|
|
3424
3313
|
return {
|
|
3425
|
-
activeIndex,
|
|
3426
|
-
selectedItems
|
|
3314
|
+
activeIndex: activeIndex,
|
|
3315
|
+
selectedItems: selectedItems
|
|
3427
3316
|
};
|
|
3428
3317
|
}
|
|
3429
3318
|
|
|
@@ -3440,7 +3329,7 @@ function isKeyDownOperationPermitted(event) {
|
|
|
3440
3329
|
if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
|
|
3441
3330
|
return false;
|
|
3442
3331
|
}
|
|
3443
|
-
|
|
3332
|
+
var element = event.target;
|
|
3444
3333
|
if (element instanceof HTMLInputElement &&
|
|
3445
3334
|
// if element is a text input
|
|
3446
3335
|
element.value !== '' && (
|
|
@@ -3459,13 +3348,11 @@ function isKeyDownOperationPermitted(event) {
|
|
|
3459
3348
|
* @returns {string} The a11y message.
|
|
3460
3349
|
*/
|
|
3461
3350
|
function getA11yRemovalMessage(selectionParameters) {
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
} = selectionParameters;
|
|
3466
|
-
return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
|
|
3351
|
+
var removedSelectedItem = selectionParameters.removedSelectedItem,
|
|
3352
|
+
itemToStringLocal = selectionParameters.itemToString;
|
|
3353
|
+
return itemToStringLocal(removedSelectedItem) + " has been removed.";
|
|
3467
3354
|
}
|
|
3468
|
-
|
|
3355
|
+
var propTypes = {
|
|
3469
3356
|
selectedItems: PropTypes__default["default"].array,
|
|
3470
3357
|
initialSelectedItems: PropTypes__default["default"].array,
|
|
3471
3358
|
defaultSelectedItems: PropTypes__default["default"].array,
|
|
@@ -3489,37 +3376,37 @@ const propTypes = {
|
|
|
3489
3376
|
})
|
|
3490
3377
|
})
|
|
3491
3378
|
};
|
|
3492
|
-
|
|
3379
|
+
var defaultProps = {
|
|
3493
3380
|
itemToString: defaultProps$3.itemToString,
|
|
3494
3381
|
stateReducer: defaultProps$3.stateReducer,
|
|
3495
3382
|
environment: defaultProps$3.environment,
|
|
3496
|
-
getA11yRemovalMessage,
|
|
3383
|
+
getA11yRemovalMessage: getA11yRemovalMessage,
|
|
3497
3384
|
keyNavigationNext: 'ArrowRight',
|
|
3498
3385
|
keyNavigationPrevious: 'ArrowLeft'
|
|
3499
3386
|
};
|
|
3500
3387
|
|
|
3501
3388
|
// eslint-disable-next-line import/no-mutable-exports
|
|
3502
|
-
|
|
3389
|
+
var validatePropTypes = noop;
|
|
3503
3390
|
/* istanbul ignore next */
|
|
3504
3391
|
if (process.env.NODE_ENV !== 'production') {
|
|
3505
|
-
validatePropTypes = (options, caller)
|
|
3392
|
+
validatePropTypes = function validatePropTypes(options, caller) {
|
|
3506
3393
|
PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
|
|
3507
3394
|
};
|
|
3508
3395
|
}
|
|
3509
3396
|
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3397
|
+
var SelectedItemClick = process.env.NODE_ENV !== "production" ? '__selected_item_click__' : 0;
|
|
3398
|
+
var SelectedItemKeyDownDelete = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_delete__' : 1;
|
|
3399
|
+
var SelectedItemKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_backspace__' : 2;
|
|
3400
|
+
var SelectedItemKeyDownNavigationNext = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_navigation_next__' : 3;
|
|
3401
|
+
var SelectedItemKeyDownNavigationPrevious = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_navigation_previous__' : 4;
|
|
3402
|
+
var DropdownKeyDownNavigationPrevious = process.env.NODE_ENV !== "production" ? '__dropdown_keydown_navigation_previous__' : 5;
|
|
3403
|
+
var DropdownKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__dropdown_keydown_backspace__' : 6;
|
|
3404
|
+
var DropdownClick = process.env.NODE_ENV !== "production" ? '__dropdown_click__' : 7;
|
|
3405
|
+
var FunctionAddSelectedItem = process.env.NODE_ENV !== "production" ? '__function_add_selected_item__' : 8;
|
|
3406
|
+
var FunctionRemoveSelectedItem = process.env.NODE_ENV !== "production" ? '__function_remove_selected_item__' : 9;
|
|
3407
|
+
var FunctionSetSelectedItems = process.env.NODE_ENV !== "production" ? '__function_set_selected_items__' : 10;
|
|
3408
|
+
var FunctionSetActiveIndex = process.env.NODE_ENV !== "production" ? '__function_set_active_index__' : 11;
|
|
3409
|
+
var FunctionReset = process.env.NODE_ENV !== "production" ? '__function_reset__' : 12;
|
|
3523
3410
|
|
|
3524
3411
|
var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
3525
3412
|
__proto__: null,
|
|
@@ -3540,17 +3427,13 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
|
3540
3427
|
|
|
3541
3428
|
/* eslint-disable complexity */
|
|
3542
3429
|
function downshiftMultipleSelectionReducer(state, action) {
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3546
|
-
|
|
3547
|
-
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
activeIndex,
|
|
3551
|
-
selectedItems
|
|
3552
|
-
} = state;
|
|
3553
|
-
let changes;
|
|
3430
|
+
var type = action.type,
|
|
3431
|
+
index = action.index,
|
|
3432
|
+
props = action.props,
|
|
3433
|
+
selectedItem = action.selectedItem;
|
|
3434
|
+
var activeIndex = state.activeIndex,
|
|
3435
|
+
selectedItems = state.selectedItems;
|
|
3436
|
+
var changes;
|
|
3554
3437
|
switch (type) {
|
|
3555
3438
|
case SelectedItemClick:
|
|
3556
3439
|
changes = {
|
|
@@ -3570,18 +3453,20 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3570
3453
|
case SelectedItemKeyDownBackspace:
|
|
3571
3454
|
case SelectedItemKeyDownDelete:
|
|
3572
3455
|
{
|
|
3573
|
-
|
|
3456
|
+
if (activeIndex < 0) {
|
|
3457
|
+
break;
|
|
3458
|
+
}
|
|
3459
|
+
var newActiveIndex = activeIndex;
|
|
3574
3460
|
if (selectedItems.length === 1) {
|
|
3575
3461
|
newActiveIndex = -1;
|
|
3576
3462
|
} else if (activeIndex === selectedItems.length - 1) {
|
|
3577
3463
|
newActiveIndex = selectedItems.length - 2;
|
|
3578
3464
|
}
|
|
3579
|
-
changes = {
|
|
3580
|
-
selectedItems: [
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
};
|
|
3465
|
+
changes = _extends__default["default"]({
|
|
3466
|
+
selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
|
|
3467
|
+
}, {
|
|
3468
|
+
activeIndex: newActiveIndex
|
|
3469
|
+
});
|
|
3585
3470
|
break;
|
|
3586
3471
|
}
|
|
3587
3472
|
case DropdownKeyDownNavigationPrevious:
|
|
@@ -3596,7 +3481,7 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3596
3481
|
break;
|
|
3597
3482
|
case FunctionAddSelectedItem:
|
|
3598
3483
|
changes = {
|
|
3599
|
-
selectedItems: [
|
|
3484
|
+
selectedItems: [].concat(selectedItems, [selectedItem])
|
|
3600
3485
|
};
|
|
3601
3486
|
break;
|
|
3602
3487
|
case DropdownClick:
|
|
@@ -3606,26 +3491,25 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3606
3491
|
break;
|
|
3607
3492
|
case FunctionRemoveSelectedItem:
|
|
3608
3493
|
{
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
if (selectedItemIndex
|
|
3612
|
-
|
|
3613
|
-
newActiveIndex = -1;
|
|
3614
|
-
} else if (selectedItemIndex === selectedItems.length - 1) {
|
|
3615
|
-
newActiveIndex = selectedItems.length - 2;
|
|
3616
|
-
}
|
|
3617
|
-
changes = {
|
|
3618
|
-
selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
|
|
3619
|
-
activeIndex: newActiveIndex
|
|
3620
|
-
};
|
|
3494
|
+
var _newActiveIndex = activeIndex;
|
|
3495
|
+
var selectedItemIndex = selectedItems.indexOf(selectedItem);
|
|
3496
|
+
if (selectedItemIndex < 0) {
|
|
3497
|
+
break;
|
|
3621
3498
|
}
|
|
3499
|
+
if (selectedItems.length === 1) {
|
|
3500
|
+
_newActiveIndex = -1;
|
|
3501
|
+
} else if (selectedItemIndex === selectedItems.length - 1) {
|
|
3502
|
+
_newActiveIndex = selectedItems.length - 2;
|
|
3503
|
+
}
|
|
3504
|
+
changes = {
|
|
3505
|
+
selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)),
|
|
3506
|
+
activeIndex: _newActiveIndex
|
|
3507
|
+
};
|
|
3622
3508
|
break;
|
|
3623
3509
|
}
|
|
3624
3510
|
case FunctionSetSelectedItems:
|
|
3625
3511
|
{
|
|
3626
|
-
|
|
3627
|
-
selectedItems: newSelectedItems
|
|
3628
|
-
} = action;
|
|
3512
|
+
var newSelectedItems = action.selectedItems;
|
|
3629
3513
|
changes = {
|
|
3630
3514
|
selectedItems: newSelectedItems
|
|
3631
3515
|
};
|
|
@@ -3633,11 +3517,9 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3633
3517
|
}
|
|
3634
3518
|
case FunctionSetActiveIndex:
|
|
3635
3519
|
{
|
|
3636
|
-
|
|
3637
|
-
activeIndex: newActiveIndex
|
|
3638
|
-
} = action;
|
|
3520
|
+
var _newActiveIndex2 = action.activeIndex;
|
|
3639
3521
|
changes = {
|
|
3640
|
-
activeIndex:
|
|
3522
|
+
activeIndex: _newActiveIndex2
|
|
3641
3523
|
};
|
|
3642
3524
|
break;
|
|
3643
3525
|
}
|
|
@@ -3650,12 +3532,11 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3650
3532
|
default:
|
|
3651
3533
|
throw new Error('Reducer called without proper action type.');
|
|
3652
3534
|
}
|
|
3653
|
-
return {
|
|
3654
|
-
...state,
|
|
3655
|
-
...changes
|
|
3656
|
-
};
|
|
3535
|
+
return _extends__default["default"]({}, state, changes);
|
|
3657
3536
|
}
|
|
3658
3537
|
|
|
3538
|
+
var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
|
|
3539
|
+
_excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
|
|
3659
3540
|
useMultipleSelection.stateChangeTypes = stateChangeTypes;
|
|
3660
3541
|
function useMultipleSelection(userProps) {
|
|
3661
3542
|
if (userProps === void 0) {
|
|
@@ -3663,49 +3544,46 @@ function useMultipleSelection(userProps) {
|
|
|
3663
3544
|
}
|
|
3664
3545
|
validatePropTypes(userProps, useMultipleSelection);
|
|
3665
3546
|
// Props defaults and destructuring.
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
itemToString,
|
|
3673
|
-
environment,
|
|
3674
|
-
keyNavigationNext,
|
|
3675
|
-
keyNavigationPrevious
|
|
3676
|
-
} = props;
|
|
3547
|
+
var props = _extends__default["default"]({}, defaultProps, userProps);
|
|
3548
|
+
var getA11yRemovalMessage = props.getA11yRemovalMessage,
|
|
3549
|
+
itemToString = props.itemToString,
|
|
3550
|
+
environment = props.environment,
|
|
3551
|
+
keyNavigationNext = props.keyNavigationNext,
|
|
3552
|
+
keyNavigationPrevious = props.keyNavigationPrevious;
|
|
3677
3553
|
|
|
3678
3554
|
// Reducer init.
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3555
|
+
var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
|
|
3556
|
+
state = _useControlledReducer[0],
|
|
3557
|
+
dispatch = _useControlledReducer[1];
|
|
3558
|
+
var activeIndex = state.activeIndex,
|
|
3559
|
+
selectedItems = state.selectedItems;
|
|
3684
3560
|
|
|
3685
3561
|
// Refs.
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3562
|
+
var isInitialMountRef = react.useRef(true);
|
|
3563
|
+
var dropdownRef = react.useRef(null);
|
|
3564
|
+
var previousSelectedItemsRef = react.useRef(selectedItems);
|
|
3565
|
+
var selectedItemRefs = react.useRef();
|
|
3690
3566
|
selectedItemRefs.current = [];
|
|
3691
|
-
|
|
3692
|
-
state,
|
|
3693
|
-
props
|
|
3567
|
+
var latest = useLatestRef({
|
|
3568
|
+
state: state,
|
|
3569
|
+
props: props
|
|
3694
3570
|
});
|
|
3695
3571
|
|
|
3696
3572
|
// Effects.
|
|
3697
3573
|
/* Sets a11y status message on changes in selectedItem. */
|
|
3698
|
-
react.useEffect(()
|
|
3574
|
+
react.useEffect(function () {
|
|
3699
3575
|
if (isInitialMountRef.current) {
|
|
3700
3576
|
return;
|
|
3701
3577
|
}
|
|
3702
3578
|
if (selectedItems.length < previousSelectedItemsRef.current.length) {
|
|
3703
|
-
|
|
3579
|
+
var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
|
|
3580
|
+
return selectedItems.indexOf(item) < 0;
|
|
3581
|
+
});
|
|
3704
3582
|
setStatus(getA11yRemovalMessage({
|
|
3705
|
-
itemToString,
|
|
3583
|
+
itemToString: itemToString,
|
|
3706
3584
|
resultCount: selectedItems.length,
|
|
3707
|
-
removedSelectedItem,
|
|
3708
|
-
activeIndex,
|
|
3585
|
+
removedSelectedItem: removedSelectedItem,
|
|
3586
|
+
activeIndex: activeIndex,
|
|
3709
3587
|
activeSelectedItem: selectedItems[activeIndex]
|
|
3710
3588
|
}), environment.document);
|
|
3711
3589
|
}
|
|
@@ -3714,7 +3592,7 @@ function useMultipleSelection(userProps) {
|
|
|
3714
3592
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3715
3593
|
}, [selectedItems.length]);
|
|
3716
3594
|
// Sets focus on active item.
|
|
3717
|
-
react.useEffect(()
|
|
3595
|
+
react.useEffect(function () {
|
|
3718
3596
|
if (isInitialMountRef.current) {
|
|
3719
3597
|
return;
|
|
3720
3598
|
}
|
|
@@ -3726,178 +3604,167 @@ function useMultipleSelection(userProps) {
|
|
|
3726
3604
|
}, [activeIndex]);
|
|
3727
3605
|
useControlPropsValidator({
|
|
3728
3606
|
isInitialMount: isInitialMountRef.current,
|
|
3729
|
-
props,
|
|
3730
|
-
state
|
|
3607
|
+
props: props,
|
|
3608
|
+
state: state
|
|
3731
3609
|
});
|
|
3732
|
-
|
|
3610
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
|
|
3733
3611
|
// Make initial ref false.
|
|
3734
|
-
react.useEffect(()
|
|
3612
|
+
react.useEffect(function () {
|
|
3735
3613
|
isInitialMountRef.current = false;
|
|
3736
|
-
return ()
|
|
3614
|
+
return function () {
|
|
3737
3615
|
isInitialMountRef.current = true;
|
|
3738
3616
|
};
|
|
3739
3617
|
}, []);
|
|
3740
3618
|
|
|
3741
3619
|
// Event handler functions.
|
|
3742
|
-
|
|
3743
|
-
|
|
3620
|
+
var selectedItemKeyDownHandlers = react.useMemo(function () {
|
|
3621
|
+
var _ref;
|
|
3622
|
+
return _ref = {}, _ref[keyNavigationPrevious] = function () {
|
|
3744
3623
|
dispatch({
|
|
3745
3624
|
type: SelectedItemKeyDownNavigationPrevious
|
|
3746
3625
|
});
|
|
3747
|
-
},
|
|
3748
|
-
[keyNavigationNext]() {
|
|
3626
|
+
}, _ref[keyNavigationNext] = function () {
|
|
3749
3627
|
dispatch({
|
|
3750
3628
|
type: SelectedItemKeyDownNavigationNext
|
|
3751
3629
|
});
|
|
3752
|
-
},
|
|
3753
|
-
Delete() {
|
|
3630
|
+
}, _ref.Delete = function Delete() {
|
|
3754
3631
|
dispatch({
|
|
3755
3632
|
type: SelectedItemKeyDownDelete
|
|
3756
3633
|
});
|
|
3757
|
-
},
|
|
3758
|
-
Backspace() {
|
|
3634
|
+
}, _ref.Backspace = function Backspace() {
|
|
3759
3635
|
dispatch({
|
|
3760
3636
|
type: SelectedItemKeyDownBackspace
|
|
3761
3637
|
});
|
|
3762
|
-
}
|
|
3763
|
-
}
|
|
3764
|
-
|
|
3765
|
-
|
|
3638
|
+
}, _ref;
|
|
3639
|
+
}, [dispatch, keyNavigationNext, keyNavigationPrevious]);
|
|
3640
|
+
var dropdownKeyDownHandlers = react.useMemo(function () {
|
|
3641
|
+
var _ref2;
|
|
3642
|
+
return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
|
|
3766
3643
|
if (isKeyDownOperationPermitted(event)) {
|
|
3767
3644
|
dispatch({
|
|
3768
3645
|
type: DropdownKeyDownNavigationPrevious
|
|
3769
3646
|
});
|
|
3770
3647
|
}
|
|
3771
|
-
},
|
|
3772
|
-
Backspace(event) {
|
|
3648
|
+
}, _ref2.Backspace = function Backspace(event) {
|
|
3773
3649
|
if (isKeyDownOperationPermitted(event)) {
|
|
3774
3650
|
dispatch({
|
|
3775
3651
|
type: DropdownKeyDownBackspace
|
|
3776
3652
|
});
|
|
3777
3653
|
}
|
|
3778
|
-
}
|
|
3779
|
-
}
|
|
3654
|
+
}, _ref2;
|
|
3655
|
+
}, [dispatch, keyNavigationPrevious]);
|
|
3780
3656
|
|
|
3781
3657
|
// Getter props.
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
3658
|
+
var getSelectedItemProps = react.useCallback(function (_temp) {
|
|
3659
|
+
var _extends2;
|
|
3660
|
+
var _ref3 = _temp === void 0 ? {} : _temp,
|
|
3661
|
+
_ref3$refKey = _ref3.refKey,
|
|
3662
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
3663
|
+
ref = _ref3.ref,
|
|
3664
|
+
onClick = _ref3.onClick,
|
|
3665
|
+
onKeyDown = _ref3.onKeyDown,
|
|
3666
|
+
selectedItem = _ref3.selectedItem,
|
|
3667
|
+
index = _ref3.index,
|
|
3668
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded);
|
|
3669
|
+
var latestState = latest.current.state;
|
|
3670
|
+
var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
3796
3671
|
if (itemIndex < 0) {
|
|
3797
3672
|
throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
|
|
3798
3673
|
}
|
|
3799
|
-
|
|
3674
|
+
var selectedItemHandleClick = function selectedItemHandleClick() {
|
|
3800
3675
|
dispatch({
|
|
3801
3676
|
type: SelectedItemClick,
|
|
3802
|
-
index
|
|
3677
|
+
index: index
|
|
3803
3678
|
});
|
|
3804
3679
|
};
|
|
3805
|
-
|
|
3806
|
-
|
|
3680
|
+
var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) {
|
|
3681
|
+
var key = normalizeArrowKey(event);
|
|
3807
3682
|
if (key && selectedItemKeyDownHandlers[key]) {
|
|
3808
3683
|
selectedItemKeyDownHandlers[key](event);
|
|
3809
3684
|
}
|
|
3810
3685
|
};
|
|
3811
|
-
return {
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
}),
|
|
3817
|
-
tabIndex: index === latestState.activeIndex ? 0 : -1,
|
|
3818
|
-
onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
|
|
3819
|
-
onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
|
|
3820
|
-
...rest
|
|
3821
|
-
};
|
|
3686
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
|
|
3687
|
+
if (selectedItemNode) {
|
|
3688
|
+
selectedItemRefs.current.push(selectedItemNode);
|
|
3689
|
+
}
|
|
3690
|
+
}), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
|
|
3822
3691
|
}, [dispatch, latest, selectedItemKeyDownHandlers]);
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3692
|
+
var getDropdownProps = react.useCallback(function (_temp2, _temp3) {
|
|
3693
|
+
var _extends3;
|
|
3694
|
+
var _ref4 = _temp2 === void 0 ? {} : _temp2,
|
|
3695
|
+
_ref4$refKey = _ref4.refKey,
|
|
3696
|
+
refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
|
|
3697
|
+
ref = _ref4.ref,
|
|
3698
|
+
onKeyDown = _ref4.onKeyDown,
|
|
3699
|
+
onClick = _ref4.onClick,
|
|
3700
|
+
_ref4$preventKeyActio = _ref4.preventKeyAction,
|
|
3701
|
+
preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
|
|
3702
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded2);
|
|
3703
|
+
var _ref5 = _temp3 === void 0 ? {} : _temp3,
|
|
3704
|
+
_ref5$suppressRefErro = _ref5.suppressRefError,
|
|
3705
|
+
suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
|
|
3835
3706
|
setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
|
|
3836
|
-
|
|
3837
|
-
|
|
3707
|
+
var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) {
|
|
3708
|
+
var key = normalizeArrowKey(event);
|
|
3838
3709
|
if (key && dropdownKeyDownHandlers[key]) {
|
|
3839
3710
|
dropdownKeyDownHandlers[key](event);
|
|
3840
3711
|
}
|
|
3841
3712
|
};
|
|
3842
|
-
|
|
3713
|
+
var dropdownHandleClick = function dropdownHandleClick() {
|
|
3843
3714
|
dispatch({
|
|
3844
3715
|
type: DropdownClick
|
|
3845
3716
|
});
|
|
3846
3717
|
};
|
|
3847
|
-
return {
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
3856
|
-
}),
|
|
3857
|
-
...rest
|
|
3858
|
-
};
|
|
3718
|
+
return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
|
|
3719
|
+
if (dropdownNode) {
|
|
3720
|
+
dropdownRef.current = dropdownNode;
|
|
3721
|
+
}
|
|
3722
|
+
}), _extends3), !preventKeyAction && {
|
|
3723
|
+
onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
|
|
3724
|
+
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
3725
|
+
}, rest);
|
|
3859
3726
|
}, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]);
|
|
3860
3727
|
|
|
3861
3728
|
// returns
|
|
3862
|
-
|
|
3729
|
+
var addSelectedItem = react.useCallback(function (selectedItem) {
|
|
3863
3730
|
dispatch({
|
|
3864
3731
|
type: FunctionAddSelectedItem,
|
|
3865
|
-
selectedItem
|
|
3732
|
+
selectedItem: selectedItem
|
|
3866
3733
|
});
|
|
3867
3734
|
}, [dispatch]);
|
|
3868
|
-
|
|
3735
|
+
var removeSelectedItem = react.useCallback(function (selectedItem) {
|
|
3869
3736
|
dispatch({
|
|
3870
3737
|
type: FunctionRemoveSelectedItem,
|
|
3871
|
-
selectedItem
|
|
3738
|
+
selectedItem: selectedItem
|
|
3872
3739
|
});
|
|
3873
3740
|
}, [dispatch]);
|
|
3874
|
-
|
|
3741
|
+
var setSelectedItems = react.useCallback(function (newSelectedItems) {
|
|
3875
3742
|
dispatch({
|
|
3876
3743
|
type: FunctionSetSelectedItems,
|
|
3877
3744
|
selectedItems: newSelectedItems
|
|
3878
3745
|
});
|
|
3879
3746
|
}, [dispatch]);
|
|
3880
|
-
|
|
3747
|
+
var setActiveIndex = react.useCallback(function (newActiveIndex) {
|
|
3881
3748
|
dispatch({
|
|
3882
3749
|
type: FunctionSetActiveIndex,
|
|
3883
3750
|
activeIndex: newActiveIndex
|
|
3884
3751
|
});
|
|
3885
3752
|
}, [dispatch]);
|
|
3886
|
-
|
|
3753
|
+
var reset = react.useCallback(function () {
|
|
3887
3754
|
dispatch({
|
|
3888
3755
|
type: FunctionReset
|
|
3889
3756
|
});
|
|
3890
3757
|
}, [dispatch]);
|
|
3891
3758
|
return {
|
|
3892
|
-
getSelectedItemProps,
|
|
3893
|
-
getDropdownProps,
|
|
3894
|
-
addSelectedItem,
|
|
3895
|
-
removeSelectedItem,
|
|
3896
|
-
setSelectedItems,
|
|
3897
|
-
setActiveIndex,
|
|
3898
|
-
reset,
|
|
3899
|
-
selectedItems,
|
|
3900
|
-
activeIndex
|
|
3759
|
+
getSelectedItemProps: getSelectedItemProps,
|
|
3760
|
+
getDropdownProps: getDropdownProps,
|
|
3761
|
+
addSelectedItem: addSelectedItem,
|
|
3762
|
+
removeSelectedItem: removeSelectedItem,
|
|
3763
|
+
setSelectedItems: setSelectedItems,
|
|
3764
|
+
setActiveIndex: setActiveIndex,
|
|
3765
|
+
reset: reset,
|
|
3766
|
+
selectedItems: selectedItems,
|
|
3767
|
+
activeIndex: activeIndex
|
|
3901
3768
|
};
|
|
3902
3769
|
}
|
|
3903
3770
|
|