downshift 7.1.1 → 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 +1435 -1572
- package/dist/downshift.esm.js +1432 -1573
- package/dist/downshift.native.cjs.js +1419 -1556
- package/dist/downshift.umd.js +1472 -1568
- 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 +1435 -1572
- package/preact/dist/downshift.esm.js +1432 -1573
- package/preact/dist/downshift.umd.js +1475 -1571
- 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
package/dist/downshift.cjs.js
CHANGED
|
@@ -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,176 +745,169 @@ 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 = {
|
|
809
|
+
});
|
|
810
|
+
_this.getToggleButtonProps = function (_temp3) {
|
|
811
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
812
|
+
onClick = _ref3.onClick;
|
|
813
|
+
_ref3.onPress;
|
|
814
|
+
var onKeyDown = _ref3.onKeyDown,
|
|
815
|
+
onKeyUp = _ref3.onKeyUp,
|
|
816
|
+
onBlur = _ref3.onBlur,
|
|
817
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$3);
|
|
818
|
+
var _this$getState5 = _this.getState(),
|
|
819
|
+
isOpen = _this$getState5.isOpen;
|
|
820
|
+
var enabledEventHandlers = {
|
|
818
821
|
onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
|
|
819
822
|
onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
|
|
820
823
|
onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
|
|
821
824
|
onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
|
|
822
825
|
};
|
|
823
|
-
|
|
824
|
-
return {
|
|
826
|
+
var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
|
|
827
|
+
return _extends__default["default"]({
|
|
825
828
|
type: 'button',
|
|
826
829
|
role: 'button',
|
|
827
830
|
'aria-label': isOpen ? 'close menu' : 'open menu',
|
|
828
831
|
'aria-haspopup': true,
|
|
829
|
-
'data-toggle': true
|
|
830
|
-
|
|
831
|
-
...rest
|
|
832
|
-
};
|
|
832
|
+
'data-toggle': true
|
|
833
|
+
}, eventHandlers, rest);
|
|
833
834
|
};
|
|
834
|
-
|
|
835
|
+
_this.buttonHandleKeyUp = function (event) {
|
|
835
836
|
// Prevent click event from emitting in Firefox
|
|
836
837
|
event.preventDefault();
|
|
837
838
|
};
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
if (
|
|
841
|
-
|
|
839
|
+
_this.buttonHandleKeyDown = function (event) {
|
|
840
|
+
var key = normalizeArrowKey(event);
|
|
841
|
+
if (_this.buttonKeyDownHandlers[key]) {
|
|
842
|
+
_this.buttonKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
|
|
842
843
|
}
|
|
843
844
|
};
|
|
844
|
-
|
|
845
|
+
_this.buttonHandleClick = function (event) {
|
|
845
846
|
event.preventDefault();
|
|
846
847
|
// handle odd case for Safari and Firefox which
|
|
847
848
|
// don't give the button the focus properly.
|
|
848
849
|
/* istanbul ignore if (can't reasonably test this) */
|
|
849
|
-
if (
|
|
850
|
+
if (_this.props.environment.document.activeElement === _this.props.environment.document.body) {
|
|
850
851
|
event.target.focus();
|
|
851
852
|
}
|
|
852
853
|
// to simplify testing components that use downshift, we'll not wrap this in a setTimeout
|
|
853
854
|
// if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
|
|
854
855
|
// when building for production and should therefore have no impact on production code.
|
|
855
856
|
if (process.env.NODE_ENV === 'test') {
|
|
856
|
-
|
|
857
|
+
_this.toggleMenu({
|
|
857
858
|
type: clickButton
|
|
858
859
|
});
|
|
859
860
|
} else {
|
|
860
861
|
// Ensure that toggle of menu occurs after the potential blur event in iOS
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
862
|
+
_this.internalSetTimeout(function () {
|
|
863
|
+
return _this.toggleMenu({
|
|
864
|
+
type: clickButton
|
|
865
|
+
});
|
|
866
|
+
});
|
|
864
867
|
}
|
|
865
868
|
};
|
|
866
|
-
|
|
867
|
-
|
|
869
|
+
_this.buttonHandleBlur = function (event) {
|
|
870
|
+
var blurTarget = event.target; // Save blur target for comparison with activeElement later
|
|
868
871
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
|
|
869
|
-
|
|
870
|
-
if (!
|
|
872
|
+
_this.internalSetTimeout(function () {
|
|
873
|
+
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)
|
|
871
874
|
) {
|
|
872
|
-
|
|
875
|
+
_this.reset({
|
|
873
876
|
type: blurButton
|
|
874
877
|
});
|
|
875
878
|
}
|
|
876
879
|
});
|
|
877
880
|
};
|
|
878
|
-
|
|
879
|
-
return {
|
|
880
|
-
htmlFor:
|
|
881
|
-
id:
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
let onChangeKey;
|
|
895
|
-
let eventHandlers = {};
|
|
881
|
+
_this.getLabelProps = function (props) {
|
|
882
|
+
return _extends__default["default"]({
|
|
883
|
+
htmlFor: _this.inputId,
|
|
884
|
+
id: _this.labelId
|
|
885
|
+
}, props);
|
|
886
|
+
};
|
|
887
|
+
_this.getInputProps = function (_temp4) {
|
|
888
|
+
var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
|
889
|
+
onKeyDown = _ref4.onKeyDown,
|
|
890
|
+
onBlur = _ref4.onBlur,
|
|
891
|
+
onChange = _ref4.onChange,
|
|
892
|
+
onInput = _ref4.onInput;
|
|
893
|
+
_ref4.onChangeText;
|
|
894
|
+
var rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded3$2);
|
|
895
|
+
var onChangeKey;
|
|
896
|
+
var eventHandlers = {};
|
|
896
897
|
|
|
897
898
|
/* istanbul ignore next (preact) */
|
|
898
899
|
{
|
|
899
900
|
onChangeKey = 'onChange';
|
|
900
901
|
}
|
|
901
|
-
|
|
902
|
-
inputValue,
|
|
903
|
-
isOpen,
|
|
904
|
-
highlightedIndex
|
|
905
|
-
} = _this.getState();
|
|
902
|
+
var _this$getState6 = _this.getState(),
|
|
903
|
+
inputValue = _this$getState6.inputValue,
|
|
904
|
+
isOpen = _this$getState6.isOpen,
|
|
905
|
+
highlightedIndex = _this$getState6.highlightedIndex;
|
|
906
906
|
if (!rest.disabled) {
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
|
|
910
|
-
onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
|
911
|
-
};
|
|
907
|
+
var _eventHandlers;
|
|
908
|
+
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
|
|
912
909
|
}
|
|
913
|
-
return {
|
|
910
|
+
return _extends__default["default"]({
|
|
914
911
|
'aria-autocomplete': 'list',
|
|
915
912
|
'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
|
|
916
913
|
'aria-controls': isOpen ? _this.menuId : null,
|
|
@@ -919,82 +916,76 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
919
916
|
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
920
917
|
autoComplete: 'off',
|
|
921
918
|
value: inputValue,
|
|
922
|
-
id: _this.inputId
|
|
923
|
-
|
|
924
|
-
...rest
|
|
925
|
-
};
|
|
919
|
+
id: _this.inputId
|
|
920
|
+
}, eventHandlers, rest);
|
|
926
921
|
};
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
if (key &&
|
|
930
|
-
|
|
922
|
+
_this.inputHandleKeyDown = function (event) {
|
|
923
|
+
var key = normalizeArrowKey(event);
|
|
924
|
+
if (key && _this.inputKeyDownHandlers[key]) {
|
|
925
|
+
_this.inputKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
|
|
931
926
|
}
|
|
932
927
|
};
|
|
933
|
-
|
|
934
|
-
|
|
928
|
+
_this.inputHandleChange = function (event) {
|
|
929
|
+
_this.internalSetState({
|
|
935
930
|
type: changeInput,
|
|
936
931
|
isOpen: true,
|
|
937
932
|
inputValue: event.target.value,
|
|
938
|
-
highlightedIndex:
|
|
933
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
939
934
|
});
|
|
940
935
|
};
|
|
941
|
-
|
|
936
|
+
_this.inputHandleBlur = function () {
|
|
942
937
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
if (!
|
|
946
|
-
|
|
938
|
+
_this.internalSetTimeout(function () {
|
|
939
|
+
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);
|
|
940
|
+
if (!_this.isMouseDown && !downshiftButtonIsActive) {
|
|
941
|
+
_this.reset({
|
|
947
942
|
type: blurInput
|
|
948
943
|
});
|
|
949
944
|
}
|
|
950
945
|
});
|
|
951
946
|
};
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
};
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
947
|
+
_this.menuRef = function (node) {
|
|
948
|
+
_this._menuNode = node;
|
|
949
|
+
};
|
|
950
|
+
_this.getMenuProps = function (_temp5, _temp6) {
|
|
951
|
+
var _extends3;
|
|
952
|
+
var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
|
953
|
+
_ref5$refKey = _ref5.refKey,
|
|
954
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
955
|
+
ref = _ref5.ref,
|
|
956
|
+
props = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded4$1);
|
|
957
|
+
var _ref6 = _temp6 === void 0 ? {} : _temp6,
|
|
958
|
+
_ref6$suppressRefErro = _ref6.suppressRefError,
|
|
959
|
+
suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
|
|
964
960
|
_this.getMenuProps.called = true;
|
|
965
961
|
_this.getMenuProps.refKey = refKey;
|
|
966
962
|
_this.getMenuProps.suppressRefError = suppressRefError;
|
|
967
|
-
return {
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
onPress,
|
|
981
|
-
index,
|
|
982
|
-
item = process.env.NODE_ENV === 'production' ? /* istanbul ignore next */undefined : requiredProp('getItemProps', 'item'),
|
|
983
|
-
...rest
|
|
984
|
-
} = _temp7 === void 0 ? {} : _temp7;
|
|
963
|
+
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);
|
|
964
|
+
};
|
|
965
|
+
_this.getItemProps = function (_temp7) {
|
|
966
|
+
var _enabledEventHandlers;
|
|
967
|
+
var _ref7 = _temp7 === void 0 ? {} : _temp7,
|
|
968
|
+
onMouseMove = _ref7.onMouseMove,
|
|
969
|
+
onMouseDown = _ref7.onMouseDown,
|
|
970
|
+
onClick = _ref7.onClick;
|
|
971
|
+
_ref7.onPress;
|
|
972
|
+
var index = _ref7.index,
|
|
973
|
+
_ref7$item = _ref7.item,
|
|
974
|
+
item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ? /* istanbul ignore next */undefined : requiredProp('getItemProps', 'item') : _ref7$item,
|
|
975
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref7, _excluded5);
|
|
985
976
|
if (index === undefined) {
|
|
986
977
|
_this.items.push(item);
|
|
987
978
|
index = _this.items.indexOf(item);
|
|
988
979
|
} else {
|
|
989
980
|
_this.items[index] = item;
|
|
990
981
|
}
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
982
|
+
var onSelectKey = 'onClick';
|
|
983
|
+
var customClickHandler = onClick;
|
|
984
|
+
var enabledEventHandlers = (_enabledEventHandlers = {
|
|
994
985
|
// onMouseMove is used over onMouseEnter here. onMouseMove
|
|
995
986
|
// is only triggered on actual mouse movement while onMouseEnter
|
|
996
987
|
// can fire on DOM changes, interrupting keyboard navigation
|
|
997
|
-
onMouseMove: callAllEventHandlers(onMouseMove, ()
|
|
988
|
+
onMouseMove: callAllEventHandlers(onMouseMove, function () {
|
|
998
989
|
if (index === _this.getState().highlightedIndex) {
|
|
999
990
|
return;
|
|
1000
991
|
}
|
|
@@ -1007,75 +998,66 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1007
998
|
// from under the user which is currently scrolling/moving the
|
|
1008
999
|
// cursor
|
|
1009
1000
|
_this.avoidScrolling = true;
|
|
1010
|
-
_this.internalSetTimeout(()
|
|
1001
|
+
_this.internalSetTimeout(function () {
|
|
1002
|
+
return _this.avoidScrolling = false;
|
|
1003
|
+
}, 250);
|
|
1011
1004
|
}),
|
|
1012
|
-
onMouseDown: callAllEventHandlers(onMouseDown, event
|
|
1005
|
+
onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
|
|
1013
1006
|
// This prevents the activeElement from being changed
|
|
1014
1007
|
// to the item so it can remain with the current activeElement
|
|
1015
1008
|
// which is a more common use case.
|
|
1016
1009
|
event.preventDefault();
|
|
1017
|
-
}),
|
|
1018
|
-
[onSelectKey]: callAllEventHandlers(customClickHandler, () => {
|
|
1019
|
-
_this.selectItemAtIndex(index, {
|
|
1020
|
-
type: clickItem
|
|
1021
|
-
});
|
|
1022
1010
|
})
|
|
1023
|
-
}
|
|
1011
|
+
}, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
|
|
1012
|
+
_this.selectItemAtIndex(index, {
|
|
1013
|
+
type: clickItem
|
|
1014
|
+
});
|
|
1015
|
+
}), _enabledEventHandlers);
|
|
1024
1016
|
|
|
1025
1017
|
// Passing down the onMouseDown handler to prevent redirect
|
|
1026
1018
|
// of the activeElement if clicking on disabled items
|
|
1027
|
-
|
|
1019
|
+
var eventHandlers = rest.disabled ? {
|
|
1028
1020
|
onMouseDown: enabledEventHandlers.onMouseDown
|
|
1029
1021
|
} : enabledEventHandlers;
|
|
1030
|
-
return {
|
|
1022
|
+
return _extends__default["default"]({
|
|
1031
1023
|
id: _this.getItemId(index),
|
|
1032
1024
|
role: 'option',
|
|
1033
|
-
'aria-selected': _this.getState().highlightedIndex === index
|
|
1034
|
-
|
|
1035
|
-
...rest
|
|
1036
|
-
};
|
|
1025
|
+
'aria-selected': _this.getState().highlightedIndex === index
|
|
1026
|
+
}, eventHandlers, rest);
|
|
1037
1027
|
};
|
|
1038
|
-
|
|
1039
|
-
|
|
1028
|
+
_this.clearItems = function () {
|
|
1029
|
+
_this.items = [];
|
|
1040
1030
|
};
|
|
1041
|
-
|
|
1031
|
+
_this.reset = function (otherStateToSet, cb) {
|
|
1042
1032
|
if (otherStateToSet === void 0) {
|
|
1043
1033
|
otherStateToSet = {};
|
|
1044
1034
|
}
|
|
1045
1035
|
otherStateToSet = pickState(otherStateToSet);
|
|
1046
|
-
_this.internalSetState(
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
} = _ref;
|
|
1050
|
-
return {
|
|
1036
|
+
_this.internalSetState(function (_ref8) {
|
|
1037
|
+
var selectedItem = _ref8.selectedItem;
|
|
1038
|
+
return _extends__default["default"]({
|
|
1051
1039
|
isOpen: _this.props.defaultIsOpen,
|
|
1052
1040
|
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
1053
|
-
inputValue: _this.props.itemToString(selectedItem)
|
|
1054
|
-
|
|
1055
|
-
};
|
|
1041
|
+
inputValue: _this.props.itemToString(selectedItem)
|
|
1042
|
+
}, otherStateToSet);
|
|
1056
1043
|
}, cb);
|
|
1057
1044
|
};
|
|
1058
|
-
|
|
1045
|
+
_this.toggleMenu = function (otherStateToSet, cb) {
|
|
1059
1046
|
if (otherStateToSet === void 0) {
|
|
1060
1047
|
otherStateToSet = {};
|
|
1061
1048
|
}
|
|
1062
1049
|
otherStateToSet = pickState(otherStateToSet);
|
|
1063
|
-
_this.internalSetState(
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
}, () => {
|
|
1075
|
-
const {
|
|
1076
|
-
isOpen,
|
|
1077
|
-
highlightedIndex
|
|
1078
|
-
} = _this.getState();
|
|
1050
|
+
_this.internalSetState(function (_ref9) {
|
|
1051
|
+
var isOpen = _ref9.isOpen;
|
|
1052
|
+
return _extends__default["default"]({
|
|
1053
|
+
isOpen: !isOpen
|
|
1054
|
+
}, isOpen && {
|
|
1055
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
1056
|
+
}, otherStateToSet);
|
|
1057
|
+
}, function () {
|
|
1058
|
+
var _this$getState7 = _this.getState(),
|
|
1059
|
+
isOpen = _this$getState7.isOpen,
|
|
1060
|
+
highlightedIndex = _this$getState7.highlightedIndex;
|
|
1079
1061
|
if (isOpen) {
|
|
1080
1062
|
if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
|
|
1081
1063
|
_this.setHighlightedIndex(highlightedIndex, otherStateToSet);
|
|
@@ -1084,57 +1066,58 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1084
1066
|
cbToCb(cb)();
|
|
1085
1067
|
});
|
|
1086
1068
|
};
|
|
1087
|
-
|
|
1088
|
-
|
|
1069
|
+
_this.openMenu = function (cb) {
|
|
1070
|
+
_this.internalSetState({
|
|
1089
1071
|
isOpen: true
|
|
1090
1072
|
}, cb);
|
|
1091
1073
|
};
|
|
1092
|
-
|
|
1093
|
-
|
|
1074
|
+
_this.closeMenu = function (cb) {
|
|
1075
|
+
_this.internalSetState({
|
|
1094
1076
|
isOpen: false
|
|
1095
1077
|
}, cb);
|
|
1096
1078
|
};
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
itemToString:
|
|
1103
|
-
previousResultCount:
|
|
1104
|
-
resultCount,
|
|
1105
|
-
highlightedItem: item
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
setStatus(status, this.props.environment.document);
|
|
1079
|
+
_this.updateStatus = debounce(function () {
|
|
1080
|
+
var state = _this.getState();
|
|
1081
|
+
var item = _this.items[state.highlightedIndex];
|
|
1082
|
+
var resultCount = _this.getItemCount();
|
|
1083
|
+
var status = _this.props.getA11yStatusMessage(_extends__default["default"]({
|
|
1084
|
+
itemToString: _this.props.itemToString,
|
|
1085
|
+
previousResultCount: _this.previousResultCount,
|
|
1086
|
+
resultCount: resultCount,
|
|
1087
|
+
highlightedItem: item
|
|
1088
|
+
}, state));
|
|
1089
|
+
_this.previousResultCount = resultCount;
|
|
1090
|
+
setStatus(status, _this.props.environment.document);
|
|
1110
1091
|
}, 200);
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
defaultIsOpen,
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1092
|
+
var _this$props = _this.props,
|
|
1093
|
+
defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
|
|
1094
|
+
_this$props$initialHi = _this$props.initialHighlightedIndex,
|
|
1095
|
+
_highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
|
|
1096
|
+
defaultIsOpen = _this$props.defaultIsOpen,
|
|
1097
|
+
_this$props$initialIs = _this$props.initialIsOpen,
|
|
1098
|
+
_isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
|
|
1099
|
+
_this$props$initialIn = _this$props.initialInputValue,
|
|
1100
|
+
_inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
|
|
1101
|
+
_this$props$initialSe = _this$props.initialSelectedItem,
|
|
1102
|
+
_selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
|
|
1103
|
+
var _state = _this.getState({
|
|
1123
1104
|
highlightedIndex: _highlightedIndex,
|
|
1124
1105
|
isOpen: _isOpen,
|
|
1125
1106
|
inputValue: _inputValue,
|
|
1126
1107
|
selectedItem: _selectedItem
|
|
1127
1108
|
});
|
|
1128
|
-
if (_state.selectedItem != null &&
|
|
1129
|
-
_state.inputValue =
|
|
1109
|
+
if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
|
|
1110
|
+
_state.inputValue = _this.props.itemToString(_state.selectedItem);
|
|
1130
1111
|
}
|
|
1131
|
-
|
|
1112
|
+
_this.state = _state;
|
|
1113
|
+
return _this;
|
|
1132
1114
|
}
|
|
1115
|
+
var _proto = Downshift.prototype;
|
|
1133
1116
|
/**
|
|
1134
1117
|
* Clear all running timeouts
|
|
1135
1118
|
*/
|
|
1136
|
-
internalClearTimeouts() {
|
|
1137
|
-
this.timeoutIds.forEach(id
|
|
1119
|
+
_proto.internalClearTimeouts = function internalClearTimeouts() {
|
|
1120
|
+
this.timeoutIds.forEach(function (id) {
|
|
1138
1121
|
clearTimeout(id);
|
|
1139
1122
|
});
|
|
1140
1123
|
this.timeoutIds = [];
|
|
@@ -1148,117 +1131,113 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1148
1131
|
*
|
|
1149
1132
|
* @param {Object} stateToMerge defaults to this.state
|
|
1150
1133
|
* @return {Object} the state
|
|
1151
|
-
|
|
1152
|
-
getState(stateToMerge) {
|
|
1134
|
+
*/;
|
|
1135
|
+
_proto.getState = function getState$1(stateToMerge) {
|
|
1153
1136
|
if (stateToMerge === void 0) {
|
|
1154
1137
|
stateToMerge = this.state;
|
|
1155
1138
|
}
|
|
1156
1139
|
return getState(stateToMerge, this.props);
|
|
1157
|
-
}
|
|
1158
|
-
getItemCount() {
|
|
1140
|
+
};
|
|
1141
|
+
_proto.getItemCount = function getItemCount() {
|
|
1159
1142
|
// things read better this way. They're in priority order:
|
|
1160
1143
|
// 1. `this.itemCount`
|
|
1161
1144
|
// 2. `this.props.itemCount`
|
|
1162
1145
|
// 3. `this.items.length`
|
|
1163
|
-
|
|
1146
|
+
var itemCount = this.items.length;
|
|
1164
1147
|
if (this.itemCount != null) {
|
|
1165
1148
|
itemCount = this.itemCount;
|
|
1166
1149
|
} else if (this.props.itemCount !== undefined) {
|
|
1167
1150
|
itemCount = this.props.itemCount;
|
|
1168
1151
|
}
|
|
1169
1152
|
return itemCount;
|
|
1170
|
-
}
|
|
1171
|
-
getItemNodeFromIndex(index) {
|
|
1153
|
+
};
|
|
1154
|
+
_proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
|
|
1172
1155
|
return this.props.environment.document.getElementById(this.getItemId(index));
|
|
1173
|
-
}
|
|
1174
|
-
scrollHighlightedItemIntoView() {
|
|
1156
|
+
};
|
|
1157
|
+
_proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
|
|
1175
1158
|
/* istanbul ignore else (react-native) */
|
|
1176
1159
|
{
|
|
1177
|
-
|
|
1160
|
+
var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
|
|
1178
1161
|
this.props.scrollIntoView(node, this._menuNode);
|
|
1179
1162
|
}
|
|
1180
|
-
}
|
|
1181
|
-
moveHighlightedIndex(amount, otherStateToSet) {
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1163
|
+
};
|
|
1164
|
+
_proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
|
|
1165
|
+
var _this6 = this;
|
|
1166
|
+
var itemCount = this.getItemCount();
|
|
1167
|
+
var _this$getState8 = this.getState(),
|
|
1168
|
+
highlightedIndex = _this$getState8.highlightedIndex;
|
|
1186
1169
|
if (itemCount > 0) {
|
|
1187
|
-
|
|
1170
|
+
var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
|
|
1171
|
+
return _this6.getItemNodeFromIndex(index);
|
|
1172
|
+
});
|
|
1188
1173
|
this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
|
|
1189
1174
|
}
|
|
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;
|
|
1175
|
+
};
|
|
1176
|
+
_proto.getStateAndHelpers = function getStateAndHelpers() {
|
|
1177
|
+
var _this$getState9 = this.getState(),
|
|
1178
|
+
highlightedIndex = _this$getState9.highlightedIndex,
|
|
1179
|
+
inputValue = _this$getState9.inputValue,
|
|
1180
|
+
selectedItem = _this$getState9.selectedItem,
|
|
1181
|
+
isOpen = _this$getState9.isOpen;
|
|
1182
|
+
var itemToString = this.props.itemToString;
|
|
1183
|
+
var id = this.id;
|
|
1184
|
+
var getRootProps = this.getRootProps,
|
|
1185
|
+
getToggleButtonProps = this.getToggleButtonProps,
|
|
1186
|
+
getLabelProps = this.getLabelProps,
|
|
1187
|
+
getMenuProps = this.getMenuProps,
|
|
1188
|
+
getInputProps = this.getInputProps,
|
|
1189
|
+
getItemProps = this.getItemProps,
|
|
1190
|
+
openMenu = this.openMenu,
|
|
1191
|
+
closeMenu = this.closeMenu,
|
|
1192
|
+
toggleMenu = this.toggleMenu,
|
|
1193
|
+
selectItem = this.selectItem,
|
|
1194
|
+
selectItemAtIndex = this.selectItemAtIndex,
|
|
1195
|
+
selectHighlightedItem = this.selectHighlightedItem,
|
|
1196
|
+
setHighlightedIndex = this.setHighlightedIndex,
|
|
1197
|
+
clearSelection = this.clearSelection,
|
|
1198
|
+
clearItems = this.clearItems,
|
|
1199
|
+
reset = this.reset,
|
|
1200
|
+
setItemCount = this.setItemCount,
|
|
1201
|
+
unsetItemCount = this.unsetItemCount,
|
|
1202
|
+
setState = this.internalSetState;
|
|
1225
1203
|
return {
|
|
1226
1204
|
// prop getters
|
|
1227
|
-
getRootProps,
|
|
1228
|
-
getToggleButtonProps,
|
|
1229
|
-
getLabelProps,
|
|
1230
|
-
getMenuProps,
|
|
1231
|
-
getInputProps,
|
|
1232
|
-
getItemProps,
|
|
1205
|
+
getRootProps: getRootProps,
|
|
1206
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
1207
|
+
getLabelProps: getLabelProps,
|
|
1208
|
+
getMenuProps: getMenuProps,
|
|
1209
|
+
getInputProps: getInputProps,
|
|
1210
|
+
getItemProps: getItemProps,
|
|
1233
1211
|
// 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,
|
|
1212
|
+
reset: reset,
|
|
1213
|
+
openMenu: openMenu,
|
|
1214
|
+
closeMenu: closeMenu,
|
|
1215
|
+
toggleMenu: toggleMenu,
|
|
1216
|
+
selectItem: selectItem,
|
|
1217
|
+
selectItemAtIndex: selectItemAtIndex,
|
|
1218
|
+
selectHighlightedItem: selectHighlightedItem,
|
|
1219
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
1220
|
+
clearSelection: clearSelection,
|
|
1221
|
+
clearItems: clearItems,
|
|
1222
|
+
setItemCount: setItemCount,
|
|
1223
|
+
unsetItemCount: unsetItemCount,
|
|
1224
|
+
setState: setState,
|
|
1247
1225
|
// props
|
|
1248
|
-
itemToString,
|
|
1226
|
+
itemToString: itemToString,
|
|
1249
1227
|
// derived
|
|
1250
|
-
id,
|
|
1228
|
+
id: id,
|
|
1251
1229
|
// state
|
|
1252
|
-
highlightedIndex,
|
|
1253
|
-
inputValue,
|
|
1254
|
-
isOpen,
|
|
1255
|
-
selectedItem
|
|
1230
|
+
highlightedIndex: highlightedIndex,
|
|
1231
|
+
inputValue: inputValue,
|
|
1232
|
+
isOpen: isOpen,
|
|
1233
|
+
selectedItem: selectedItem
|
|
1256
1234
|
};
|
|
1257
1235
|
}
|
|
1258
1236
|
|
|
1259
1237
|
//////////////////////////// ROOT
|
|
1260
|
-
|
|
1261
|
-
componentDidMount() {
|
|
1238
|
+
;
|
|
1239
|
+
_proto.componentDidMount = function componentDidMount() {
|
|
1240
|
+
var _this7 = this;
|
|
1262
1241
|
/* istanbul ignore if (react-native) */
|
|
1263
1242
|
if (process.env.NODE_ENV !== 'production' && !false && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
|
|
1264
1243
|
validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
|
|
@@ -1271,18 +1250,20 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1271
1250
|
// down long enough for the list to disappear (because the blur event fires on the input)
|
|
1272
1251
|
// this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
|
|
1273
1252
|
// trigger hiding the menu.
|
|
1274
|
-
|
|
1275
|
-
|
|
1253
|
+
var onMouseDown = function onMouseDown() {
|
|
1254
|
+
_this7.isMouseDown = true;
|
|
1276
1255
|
};
|
|
1277
|
-
|
|
1278
|
-
|
|
1256
|
+
var onMouseUp = function onMouseUp(event) {
|
|
1257
|
+
_this7.isMouseDown = false;
|
|
1279
1258
|
// if the target element or the activeElement is within a downshift node
|
|
1280
1259
|
// then we don't want to reset downshift
|
|
1281
|
-
|
|
1282
|
-
if (!contextWithinDownshift &&
|
|
1283
|
-
|
|
1260
|
+
var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment);
|
|
1261
|
+
if (!contextWithinDownshift && _this7.getState().isOpen) {
|
|
1262
|
+
_this7.reset({
|
|
1284
1263
|
type: mouseUp
|
|
1285
|
-
}, ()
|
|
1264
|
+
}, function () {
|
|
1265
|
+
return _this7.props.onOuterClick(_this7.getStateAndHelpers());
|
|
1266
|
+
});
|
|
1286
1267
|
}
|
|
1287
1268
|
};
|
|
1288
1269
|
// Touching an element in iOS gives focus and hover states, but touching out of
|
|
@@ -1291,31 +1272,31 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1291
1272
|
// this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
|
|
1292
1273
|
// If the user taps outside of Downshift, the component should be reset,
|
|
1293
1274
|
// but not if the user is swiping
|
|
1294
|
-
|
|
1295
|
-
|
|
1275
|
+
var onTouchStart = function onTouchStart() {
|
|
1276
|
+
_this7.isTouchMove = false;
|
|
1296
1277
|
};
|
|
1297
|
-
|
|
1298
|
-
|
|
1278
|
+
var onTouchMove = function onTouchMove() {
|
|
1279
|
+
_this7.isTouchMove = true;
|
|
1299
1280
|
};
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
if (!
|
|
1303
|
-
|
|
1281
|
+
var onTouchEnd = function onTouchEnd(event) {
|
|
1282
|
+
var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment, false);
|
|
1283
|
+
if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
|
|
1284
|
+
_this7.reset({
|
|
1304
1285
|
type: touchEnd
|
|
1305
|
-
}, ()
|
|
1286
|
+
}, function () {
|
|
1287
|
+
return _this7.props.onOuterClick(_this7.getStateAndHelpers());
|
|
1288
|
+
});
|
|
1306
1289
|
}
|
|
1307
1290
|
};
|
|
1308
|
-
|
|
1309
|
-
environment
|
|
1310
|
-
} = this.props;
|
|
1291
|
+
var environment = this.props.environment;
|
|
1311
1292
|
environment.addEventListener('mousedown', onMouseDown);
|
|
1312
1293
|
environment.addEventListener('mouseup', onMouseUp);
|
|
1313
1294
|
environment.addEventListener('touchstart', onTouchStart);
|
|
1314
1295
|
environment.addEventListener('touchmove', onTouchMove);
|
|
1315
1296
|
environment.addEventListener('touchend', onTouchEnd);
|
|
1316
|
-
this.cleanup = ()
|
|
1317
|
-
|
|
1318
|
-
|
|
1297
|
+
this.cleanup = function () {
|
|
1298
|
+
_this7.internalClearTimeouts();
|
|
1299
|
+
_this7.updateStatus.cancel();
|
|
1319
1300
|
environment.removeEventListener('mousedown', onMouseDown);
|
|
1320
1301
|
environment.removeEventListener('mouseup', onMouseUp);
|
|
1321
1302
|
environment.removeEventListener('touchstart', onTouchStart);
|
|
@@ -1323,19 +1304,17 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1323
1304
|
environment.removeEventListener('touchend', onTouchEnd);
|
|
1324
1305
|
};
|
|
1325
1306
|
}
|
|
1326
|
-
}
|
|
1327
|
-
shouldScroll(prevState, prevProps) {
|
|
1328
|
-
|
|
1329
|
-
highlightedIndex
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1335
|
-
const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1307
|
+
};
|
|
1308
|
+
_proto.shouldScroll = function shouldScroll(prevState, prevProps) {
|
|
1309
|
+
var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
|
|
1310
|
+
currentHighlightedIndex = _ref10.highlightedIndex;
|
|
1311
|
+
var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
|
|
1312
|
+
prevHighlightedIndex = _ref11.highlightedIndex;
|
|
1313
|
+
var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1314
|
+
var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1336
1315
|
return scrollWhenOpen || scrollWhenNavigating;
|
|
1337
|
-
}
|
|
1338
|
-
componentDidUpdate(prevProps, prevState) {
|
|
1316
|
+
};
|
|
1317
|
+
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
|
1339
1318
|
if (process.env.NODE_ENV !== 'production') {
|
|
1340
1319
|
validateControlledUnchanged(this.state, prevProps, this.props);
|
|
1341
1320
|
/* istanbul ignore if (react-native) */
|
|
@@ -1357,13 +1336,12 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1357
1336
|
{
|
|
1358
1337
|
this.updateStatus();
|
|
1359
1338
|
}
|
|
1360
|
-
}
|
|
1361
|
-
componentWillUnmount() {
|
|
1339
|
+
};
|
|
1340
|
+
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
1362
1341
|
this.cleanup(); // avoids memory leak
|
|
1363
|
-
}
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
const children = unwrapArray(this.props.children, noop);
|
|
1342
|
+
};
|
|
1343
|
+
_proto.render = function render() {
|
|
1344
|
+
var children = unwrapArray(this.props.children, noop);
|
|
1367
1345
|
// because the items are rerendered every time we call the children
|
|
1368
1346
|
// we clear this out each render and it will be populated again as
|
|
1369
1347
|
// getItemProps is called.
|
|
@@ -1383,7 +1361,7 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1383
1361
|
this.getLabelProps.called = false;
|
|
1384
1362
|
// and something similar for getInputProps
|
|
1385
1363
|
this.getInputProps.called = false;
|
|
1386
|
-
|
|
1364
|
+
var element = unwrapArray(children(this.getStateAndHelpers()));
|
|
1387
1365
|
if (!element) {
|
|
1388
1366
|
return null;
|
|
1389
1367
|
}
|
|
@@ -1408,13 +1386,14 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1408
1386
|
|
|
1409
1387
|
/* istanbul ignore next */
|
|
1410
1388
|
return undefined;
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1389
|
+
};
|
|
1390
|
+
return Downshift;
|
|
1391
|
+
}(react.Component);
|
|
1413
1392
|
Downshift.defaultProps = {
|
|
1414
1393
|
defaultHighlightedIndex: null,
|
|
1415
1394
|
defaultIsOpen: false,
|
|
1416
1395
|
getA11yStatusMessage: getA11yStatusMessage$1,
|
|
1417
|
-
itemToString: i
|
|
1396
|
+
itemToString: function itemToString(i) {
|
|
1418
1397
|
if (i == null) {
|
|
1419
1398
|
return '';
|
|
1420
1399
|
}
|
|
@@ -1430,16 +1409,20 @@ const Downshift = /*#__PURE__*/(() => {
|
|
|
1430
1409
|
onChange: noop,
|
|
1431
1410
|
onSelect: noop,
|
|
1432
1411
|
onOuterClick: noop,
|
|
1433
|
-
selectedItemChanged: (prevItem, item)
|
|
1412
|
+
selectedItemChanged: function selectedItemChanged(prevItem, item) {
|
|
1413
|
+
return prevItem !== item;
|
|
1414
|
+
},
|
|
1434
1415
|
environment: /* istanbul ignore next (ssr) */
|
|
1435
1416
|
typeof window === 'undefined' ? {} : window,
|
|
1436
|
-
stateReducer: (state, stateToSet)
|
|
1417
|
+
stateReducer: function stateReducer(state, stateToSet) {
|
|
1418
|
+
return stateToSet;
|
|
1419
|
+
},
|
|
1437
1420
|
suppressRefError: false,
|
|
1438
|
-
scrollIntoView
|
|
1421
|
+
scrollIntoView: scrollIntoView
|
|
1439
1422
|
};
|
|
1440
1423
|
Downshift.stateChangeTypes = stateChangeTypes$3;
|
|
1441
1424
|
return Downshift;
|
|
1442
|
-
}
|
|
1425
|
+
}();
|
|
1443
1426
|
process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
|
|
1444
1427
|
children: PropTypes__default["default"].func,
|
|
1445
1428
|
defaultHighlightedIndex: PropTypes__default["default"].number,
|
|
@@ -1485,70 +1468,61 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
|
|
|
1485
1468
|
/* eslint-enable react/no-unused-prop-types */
|
|
1486
1469
|
} : void 0;
|
|
1487
1470
|
var Downshift$1 = Downshift;
|
|
1488
|
-
function validateGetMenuPropsCalledCorrectly(node,
|
|
1489
|
-
|
|
1490
|
-
refKey
|
|
1491
|
-
} = _ref3;
|
|
1471
|
+
function validateGetMenuPropsCalledCorrectly(node, _ref12) {
|
|
1472
|
+
var refKey = _ref12.refKey;
|
|
1492
1473
|
if (!node) {
|
|
1493
1474
|
// eslint-disable-next-line no-console
|
|
1494
|
-
console.error(
|
|
1475
|
+
console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
|
|
1495
1476
|
}
|
|
1496
1477
|
}
|
|
1497
|
-
function validateGetRootPropsCalledCorrectly(element,
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
const refKeySpecified = refKey !== 'ref';
|
|
1502
|
-
const isComposite = !isDOMElement(element);
|
|
1478
|
+
function validateGetRootPropsCalledCorrectly(element, _ref13) {
|
|
1479
|
+
var refKey = _ref13.refKey;
|
|
1480
|
+
var refKeySpecified = refKey !== 'ref';
|
|
1481
|
+
var isComposite = !isDOMElement(element);
|
|
1503
1482
|
if (isComposite && !refKeySpecified && !reactIs.isForwardRef(element)) {
|
|
1504
1483
|
// eslint-disable-next-line no-console
|
|
1505
1484
|
console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
|
|
1506
1485
|
} else if (!isComposite && refKeySpecified) {
|
|
1507
1486
|
// eslint-disable-next-line no-console
|
|
1508
|
-
console.error(
|
|
1487
|
+
console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
|
|
1509
1488
|
}
|
|
1510
1489
|
if (!reactIs.isForwardRef(element) && !getElementProps(element)[refKey]) {
|
|
1511
1490
|
// eslint-disable-next-line no-console
|
|
1512
|
-
console.error(
|
|
1491
|
+
console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
|
|
1513
1492
|
}
|
|
1514
1493
|
}
|
|
1515
1494
|
|
|
1516
|
-
|
|
1495
|
+
var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
|
|
1496
|
+
var dropdownDefaultStateValues = {
|
|
1517
1497
|
highlightedIndex: -1,
|
|
1518
1498
|
isOpen: false,
|
|
1519
1499
|
selectedItem: null,
|
|
1520
1500
|
inputValue: ''
|
|
1521
1501
|
};
|
|
1522
1502
|
function callOnChangeProps(action, state, newState) {
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
const changes = {};
|
|
1528
|
-
Object.keys(state).forEach(key => {
|
|
1503
|
+
var props = action.props,
|
|
1504
|
+
type = action.type;
|
|
1505
|
+
var changes = {};
|
|
1506
|
+
Object.keys(state).forEach(function (key) {
|
|
1529
1507
|
invokeOnChangeHandler(key, action, state, newState);
|
|
1530
1508
|
if (newState[key] !== state[key]) {
|
|
1531
1509
|
changes[key] = newState[key];
|
|
1532
1510
|
}
|
|
1533
1511
|
});
|
|
1534
1512
|
if (props.onStateChange && Object.keys(changes).length) {
|
|
1535
|
-
props.onStateChange({
|
|
1536
|
-
type
|
|
1537
|
-
|
|
1538
|
-
});
|
|
1513
|
+
props.onStateChange(_extends__default["default"]({
|
|
1514
|
+
type: type
|
|
1515
|
+
}, changes));
|
|
1539
1516
|
}
|
|
1540
1517
|
}
|
|
1541
1518
|
function invokeOnChangeHandler(key, action, state, newState) {
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
} = action;
|
|
1546
|
-
const handler = `on${capitalizeString(key)}Change`;
|
|
1519
|
+
var props = action.props,
|
|
1520
|
+
type = action.type;
|
|
1521
|
+
var handler = "on" + capitalizeString(key) + "Change";
|
|
1547
1522
|
if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
|
|
1548
|
-
props[handler]({
|
|
1549
|
-
type
|
|
1550
|
-
|
|
1551
|
-
});
|
|
1523
|
+
props[handler](_extends__default["default"]({
|
|
1524
|
+
type: type
|
|
1525
|
+
}, newState));
|
|
1552
1526
|
}
|
|
1553
1527
|
}
|
|
1554
1528
|
|
|
@@ -1570,37 +1544,36 @@ function stateReducer(s, a) {
|
|
|
1570
1544
|
* @returns {string} The a11y message.
|
|
1571
1545
|
*/
|
|
1572
1546
|
function getA11ySelectionMessage(selectionParameters) {
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
} = selectionParameters;
|
|
1577
|
-
return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
|
|
1547
|
+
var selectedItem = selectionParameters.selectedItem,
|
|
1548
|
+
itemToStringLocal = selectionParameters.itemToString;
|
|
1549
|
+
return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
|
|
1578
1550
|
}
|
|
1579
1551
|
|
|
1580
1552
|
/**
|
|
1581
1553
|
* Debounced call for updating the a11y message.
|
|
1582
1554
|
*/
|
|
1583
|
-
|
|
1555
|
+
var updateA11yStatus = debounce(function (getA11yMessage, document) {
|
|
1584
1556
|
setStatus(getA11yMessage(), document);
|
|
1585
1557
|
}, 200);
|
|
1586
1558
|
|
|
1587
1559
|
// istanbul ignore next
|
|
1588
|
-
|
|
1560
|
+
var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
|
|
1589
1561
|
function useElementIds(_ref) {
|
|
1590
|
-
|
|
1591
|
-
id =
|
|
1592
|
-
labelId,
|
|
1593
|
-
menuId,
|
|
1594
|
-
getItemId,
|
|
1595
|
-
toggleButtonId,
|
|
1596
|
-
inputId
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1562
|
+
var _ref$id = _ref.id,
|
|
1563
|
+
id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
|
|
1564
|
+
labelId = _ref.labelId,
|
|
1565
|
+
menuId = _ref.menuId,
|
|
1566
|
+
getItemId = _ref.getItemId,
|
|
1567
|
+
toggleButtonId = _ref.toggleButtonId,
|
|
1568
|
+
inputId = _ref.inputId;
|
|
1569
|
+
var elementIdsRef = react.useRef({
|
|
1570
|
+
labelId: labelId || id + "-label",
|
|
1571
|
+
menuId: menuId || id + "-menu",
|
|
1572
|
+
getItemId: getItemId || function (index) {
|
|
1573
|
+
return id + "-item-" + index;
|
|
1574
|
+
},
|
|
1575
|
+
toggleButtonId: toggleButtonId || id + "-toggle-button",
|
|
1576
|
+
inputId: inputId || id + "-input"
|
|
1604
1577
|
});
|
|
1605
1578
|
return elementIdsRef.current;
|
|
1606
1579
|
}
|
|
@@ -1620,10 +1593,10 @@ function isAcceptedCharacterKey(key) {
|
|
|
1620
1593
|
return /^\S{1}$/.test(key);
|
|
1621
1594
|
}
|
|
1622
1595
|
function capitalizeString(string) {
|
|
1623
|
-
return
|
|
1596
|
+
return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
|
|
1624
1597
|
}
|
|
1625
1598
|
function useLatestRef(val) {
|
|
1626
|
-
|
|
1599
|
+
var ref = react.useRef(val);
|
|
1627
1600
|
// technically this is not "concurrent mode safe" because we're manipulating
|
|
1628
1601
|
// the value during render (so it's not idempotent). However, the places this
|
|
1629
1602
|
// hook is used is to support memoizing callbacks which will be called
|
|
@@ -1644,26 +1617,28 @@ function useLatestRef(val) {
|
|
|
1644
1617
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
1645
1618
|
*/
|
|
1646
1619
|
function useEnhancedReducer(reducer, initialState, props) {
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1620
|
+
var prevStateRef = react.useRef();
|
|
1621
|
+
var actionRef = react.useRef();
|
|
1622
|
+
var enhancedReducer = react.useCallback(function (state, action) {
|
|
1650
1623
|
actionRef.current = action;
|
|
1651
1624
|
state = getState(state, action.props);
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
});
|
|
1625
|
+
var changes = reducer(state, action);
|
|
1626
|
+
var newState = action.props.stateReducer(state, _extends__default["default"]({}, action, {
|
|
1627
|
+
changes: changes
|
|
1628
|
+
}));
|
|
1657
1629
|
return newState;
|
|
1658
1630
|
}, [reducer]);
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1631
|
+
var _useReducer = react.useReducer(enhancedReducer, initialState),
|
|
1632
|
+
state = _useReducer[0],
|
|
1633
|
+
dispatch = _useReducer[1];
|
|
1634
|
+
var propsRef = useLatestRef(props);
|
|
1635
|
+
var dispatchWithProps = react.useCallback(function (action) {
|
|
1636
|
+
return dispatch(_extends__default["default"]({
|
|
1637
|
+
props: propsRef.current
|
|
1638
|
+
}, action));
|
|
1639
|
+
}, [propsRef]);
|
|
1640
|
+
var action = actionRef.current;
|
|
1641
|
+
react.useEffect(function () {
|
|
1667
1642
|
if (action && prevStateRef.current && prevStateRef.current !== state) {
|
|
1668
1643
|
callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
|
|
1669
1644
|
}
|
|
@@ -1682,14 +1657,16 @@ function useEnhancedReducer(reducer, initialState, props) {
|
|
|
1682
1657
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
1683
1658
|
*/
|
|
1684
1659
|
function useControlledReducer$1(reducer, initialState, props) {
|
|
1685
|
-
|
|
1660
|
+
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
|
|
1661
|
+
state = _useEnhancedReducer[0],
|
|
1662
|
+
dispatch = _useEnhancedReducer[1];
|
|
1686
1663
|
return [getState(state, props), dispatch];
|
|
1687
1664
|
}
|
|
1688
|
-
|
|
1689
|
-
itemToString,
|
|
1690
|
-
stateReducer,
|
|
1691
|
-
getA11ySelectionMessage,
|
|
1692
|
-
scrollIntoView,
|
|
1665
|
+
var defaultProps$3 = {
|
|
1666
|
+
itemToString: itemToString,
|
|
1667
|
+
stateReducer: stateReducer,
|
|
1668
|
+
getA11ySelectionMessage: getA11ySelectionMessage,
|
|
1669
|
+
scrollIntoView: scrollIntoView,
|
|
1693
1670
|
environment: /* istanbul ignore next (ssr) */
|
|
1694
1671
|
typeof window === 'undefined' ? {} : window
|
|
1695
1672
|
};
|
|
@@ -1697,7 +1674,7 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
|
|
|
1697
1674
|
if (defaultStateValues === void 0) {
|
|
1698
1675
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1699
1676
|
}
|
|
1700
|
-
|
|
1677
|
+
var defaultValue = props["default" + capitalizeString(propKey)];
|
|
1701
1678
|
if (defaultValue !== undefined) {
|
|
1702
1679
|
return defaultValue;
|
|
1703
1680
|
}
|
|
@@ -1707,38 +1684,34 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
|
|
|
1707
1684
|
if (defaultStateValues === void 0) {
|
|
1708
1685
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1709
1686
|
}
|
|
1710
|
-
|
|
1687
|
+
var value = props[propKey];
|
|
1711
1688
|
if (value !== undefined) {
|
|
1712
1689
|
return value;
|
|
1713
1690
|
}
|
|
1714
|
-
|
|
1691
|
+
var initialValue = props["initial" + capitalizeString(propKey)];
|
|
1715
1692
|
if (initialValue !== undefined) {
|
|
1716
1693
|
return initialValue;
|
|
1717
1694
|
}
|
|
1718
1695
|
return getDefaultValue$1(props, propKey, defaultStateValues);
|
|
1719
1696
|
}
|
|
1720
1697
|
function getInitialState$2(props) {
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1698
|
+
var selectedItem = getInitialValue$1(props, 'selectedItem');
|
|
1699
|
+
var isOpen = getInitialValue$1(props, 'isOpen');
|
|
1700
|
+
var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
|
|
1701
|
+
var inputValue = getInitialValue$1(props, 'inputValue');
|
|
1725
1702
|
return {
|
|
1726
1703
|
highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
|
|
1727
|
-
isOpen,
|
|
1728
|
-
selectedItem,
|
|
1729
|
-
inputValue
|
|
1704
|
+
isOpen: isOpen,
|
|
1705
|
+
selectedItem: selectedItem,
|
|
1706
|
+
inputValue: inputValue
|
|
1730
1707
|
};
|
|
1731
1708
|
}
|
|
1732
1709
|
function getHighlightedIndexOnOpen(props, state, offset) {
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
const {
|
|
1739
|
-
selectedItem,
|
|
1740
|
-
highlightedIndex
|
|
1741
|
-
} = state;
|
|
1710
|
+
var items = props.items,
|
|
1711
|
+
initialHighlightedIndex = props.initialHighlightedIndex,
|
|
1712
|
+
defaultHighlightedIndex = props.defaultHighlightedIndex;
|
|
1713
|
+
var selectedItem = state.selectedItem,
|
|
1714
|
+
highlightedIndex = state.highlightedIndex;
|
|
1742
1715
|
if (items.length === 0) {
|
|
1743
1716
|
return -1;
|
|
1744
1717
|
}
|
|
@@ -1769,30 +1742,34 @@ function getHighlightedIndexOnOpen(props, state, offset) {
|
|
|
1769
1742
|
* @returns {Object} Ref containing whether mouseDown or touchMove event is happening
|
|
1770
1743
|
*/
|
|
1771
1744
|
function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
|
|
1772
|
-
|
|
1745
|
+
var mouseAndTouchTrackersRef = react.useRef({
|
|
1773
1746
|
isMouseDown: false,
|
|
1774
1747
|
isTouchMove: false
|
|
1775
1748
|
});
|
|
1776
|
-
react.useEffect(()
|
|
1749
|
+
react.useEffect(function () {
|
|
1777
1750
|
// The same strategy for checking if a click occurred inside or outside downsift
|
|
1778
1751
|
// as in downshift.js.
|
|
1779
|
-
|
|
1752
|
+
var onMouseDown = function onMouseDown() {
|
|
1780
1753
|
mouseAndTouchTrackersRef.current.isMouseDown = true;
|
|
1781
1754
|
};
|
|
1782
|
-
|
|
1755
|
+
var onMouseUp = function onMouseUp(event) {
|
|
1783
1756
|
mouseAndTouchTrackersRef.current.isMouseDown = false;
|
|
1784
|
-
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1757
|
+
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
|
|
1758
|
+
return ref.current;
|
|
1759
|
+
}), environment)) {
|
|
1785
1760
|
handleBlur();
|
|
1786
1761
|
}
|
|
1787
1762
|
};
|
|
1788
|
-
|
|
1763
|
+
var onTouchStart = function onTouchStart() {
|
|
1789
1764
|
mouseAndTouchTrackersRef.current.isTouchMove = false;
|
|
1790
1765
|
};
|
|
1791
|
-
|
|
1766
|
+
var onTouchMove = function onTouchMove() {
|
|
1792
1767
|
mouseAndTouchTrackersRef.current.isTouchMove = true;
|
|
1793
1768
|
};
|
|
1794
|
-
|
|
1795
|
-
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1769
|
+
var onTouchEnd = function onTouchEnd(event) {
|
|
1770
|
+
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
|
|
1771
|
+
return ref.current;
|
|
1772
|
+
}), environment, false)) {
|
|
1796
1773
|
handleBlur();
|
|
1797
1774
|
}
|
|
1798
1775
|
};
|
|
@@ -1815,7 +1792,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
|
|
|
1815
1792
|
|
|
1816
1793
|
/* istanbul ignore next */
|
|
1817
1794
|
// eslint-disable-next-line import/no-mutable-exports
|
|
1818
|
-
|
|
1795
|
+
var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
1796
|
+
return noop;
|
|
1797
|
+
};
|
|
1819
1798
|
/**
|
|
1820
1799
|
* Custom hook that checks if getter props are called correctly.
|
|
1821
1800
|
*
|
|
@@ -1824,82 +1803,77 @@ let useGetterPropsCalledChecker = () => noop;
|
|
|
1824
1803
|
*/
|
|
1825
1804
|
/* istanbul ignore next */
|
|
1826
1805
|
if (process.env.NODE_ENV !== 'production') {
|
|
1827
|
-
useGetterPropsCalledChecker = function () {
|
|
1828
|
-
|
|
1806
|
+
useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
1807
|
+
var isInitialMountRef = react.useRef(true);
|
|
1829
1808
|
for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1830
1809
|
propKeys[_key] = arguments[_key];
|
|
1831
1810
|
}
|
|
1832
|
-
|
|
1811
|
+
var getterPropsCalledRef = react.useRef(propKeys.reduce(function (acc, propKey) {
|
|
1833
1812
|
acc[propKey] = {};
|
|
1834
1813
|
return acc;
|
|
1835
1814
|
}, {}));
|
|
1836
|
-
react.useEffect(()
|
|
1837
|
-
Object.keys(getterPropsCalledRef.current).forEach(propKey
|
|
1838
|
-
|
|
1815
|
+
react.useEffect(function () {
|
|
1816
|
+
Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
|
|
1817
|
+
var propCallInfo = getterPropsCalledRef.current[propKey];
|
|
1839
1818
|
if (isInitialMountRef.current) {
|
|
1840
1819
|
if (!Object.keys(propCallInfo).length) {
|
|
1841
1820
|
// eslint-disable-next-line no-console
|
|
1842
|
-
console.error(
|
|
1821
|
+
console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
|
|
1843
1822
|
return;
|
|
1844
1823
|
}
|
|
1845
1824
|
}
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
elementRef
|
|
1850
|
-
} = propCallInfo;
|
|
1825
|
+
var suppressRefError = propCallInfo.suppressRefError,
|
|
1826
|
+
refKey = propCallInfo.refKey,
|
|
1827
|
+
elementRef = propCallInfo.elementRef;
|
|
1851
1828
|
if ((!elementRef || !elementRef.current) && !suppressRefError) {
|
|
1852
1829
|
// eslint-disable-next-line no-console
|
|
1853
|
-
console.error(
|
|
1830
|
+
console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
|
|
1854
1831
|
}
|
|
1855
1832
|
});
|
|
1856
1833
|
isInitialMountRef.current = false;
|
|
1857
1834
|
});
|
|
1858
|
-
|
|
1835
|
+
var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
|
|
1859
1836
|
getterPropsCalledRef.current[propKey] = {
|
|
1860
|
-
suppressRefError,
|
|
1861
|
-
refKey,
|
|
1862
|
-
elementRef
|
|
1837
|
+
suppressRefError: suppressRefError,
|
|
1838
|
+
refKey: refKey,
|
|
1839
|
+
elementRef: elementRef
|
|
1863
1840
|
};
|
|
1864
1841
|
}, []);
|
|
1865
1842
|
return setGetterPropCallInfo;
|
|
1866
1843
|
};
|
|
1867
1844
|
}
|
|
1868
1845
|
function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
...rest
|
|
1875
|
-
} = _ref2;
|
|
1846
|
+
var isInitialMount = _ref2.isInitialMount,
|
|
1847
|
+
highlightedIndex = _ref2.highlightedIndex,
|
|
1848
|
+
items = _ref2.items,
|
|
1849
|
+
environment = _ref2.environment,
|
|
1850
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$3);
|
|
1876
1851
|
// Sets a11y status message on changes in state.
|
|
1877
|
-
react.useEffect(()
|
|
1852
|
+
react.useEffect(function () {
|
|
1878
1853
|
if (isInitialMount || false) {
|
|
1879
1854
|
return;
|
|
1880
1855
|
}
|
|
1881
|
-
updateA11yStatus(()
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1856
|
+
updateA11yStatus(function () {
|
|
1857
|
+
return getA11yMessage(_extends__default["default"]({
|
|
1858
|
+
highlightedIndex: highlightedIndex,
|
|
1859
|
+
highlightedItem: items[highlightedIndex],
|
|
1860
|
+
resultCount: items.length
|
|
1861
|
+
}, rest));
|
|
1862
|
+
}, environment.document);
|
|
1887
1863
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1888
1864
|
}, dependencyArray);
|
|
1889
1865
|
}
|
|
1890
1866
|
function useScrollIntoView(_ref3) {
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
scrollIntoView: scrollIntoViewProp
|
|
1898
|
-
} = _ref3;
|
|
1867
|
+
var highlightedIndex = _ref3.highlightedIndex,
|
|
1868
|
+
isOpen = _ref3.isOpen,
|
|
1869
|
+
itemRefs = _ref3.itemRefs,
|
|
1870
|
+
getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
|
|
1871
|
+
menuElement = _ref3.menuElement,
|
|
1872
|
+
scrollIntoViewProp = _ref3.scrollIntoView;
|
|
1899
1873
|
// used not to scroll on highlight by mouse.
|
|
1900
|
-
|
|
1874
|
+
var shouldScrollRef = react.useRef(true);
|
|
1901
1875
|
// Scroll on highlighted item if change comes from keyboard.
|
|
1902
|
-
useIsomorphicLayoutEffect(()
|
|
1876
|
+
useIsomorphicLayoutEffect(function () {
|
|
1903
1877
|
if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
|
|
1904
1878
|
return;
|
|
1905
1879
|
}
|
|
@@ -1914,18 +1888,16 @@ function useScrollIntoView(_ref3) {
|
|
|
1914
1888
|
}
|
|
1915
1889
|
|
|
1916
1890
|
// eslint-disable-next-line import/no-mutable-exports
|
|
1917
|
-
|
|
1891
|
+
var useControlPropsValidator = noop;
|
|
1918
1892
|
/* istanbul ignore next */
|
|
1919
1893
|
if (process.env.NODE_ENV !== 'production') {
|
|
1920
|
-
useControlPropsValidator = _ref4
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
state
|
|
1925
|
-
} = _ref4;
|
|
1894
|
+
useControlPropsValidator = function useControlPropsValidator(_ref4) {
|
|
1895
|
+
var isInitialMount = _ref4.isInitialMount,
|
|
1896
|
+
props = _ref4.props,
|
|
1897
|
+
state = _ref4.state;
|
|
1926
1898
|
// used for checking when props are moving from controlled to uncontrolled.
|
|
1927
|
-
|
|
1928
|
-
react.useEffect(()
|
|
1899
|
+
var prevPropsRef = react.useRef(props);
|
|
1900
|
+
react.useEffect(function () {
|
|
1929
1901
|
if (isInitialMount) {
|
|
1930
1902
|
return;
|
|
1931
1903
|
}
|
|
@@ -1936,11 +1908,9 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1936
1908
|
}
|
|
1937
1909
|
|
|
1938
1910
|
function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
} = action;
|
|
1943
|
-
let changes;
|
|
1911
|
+
var type = action.type,
|
|
1912
|
+
props = action.props;
|
|
1913
|
+
var changes;
|
|
1944
1914
|
switch (type) {
|
|
1945
1915
|
case stateChangeTypes.ItemMouseMove:
|
|
1946
1916
|
changes = {
|
|
@@ -1991,10 +1961,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
|
1991
1961
|
default:
|
|
1992
1962
|
throw new Error('Reducer called without proper action type.');
|
|
1993
1963
|
}
|
|
1994
|
-
return {
|
|
1995
|
-
...state,
|
|
1996
|
-
...changes
|
|
1997
|
-
};
|
|
1964
|
+
return _extends__default["default"]({}, state, changes);
|
|
1998
1965
|
}
|
|
1999
1966
|
/* eslint-enable complexity */
|
|
2000
1967
|
|
|
@@ -2080,28 +2047,28 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
2080
2047
|
};
|
|
2081
2048
|
}
|
|
2082
2049
|
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2050
|
+
var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 0;
|
|
2051
|
+
var ToggleButtonKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_down__' : 1;
|
|
2052
|
+
var ToggleButtonKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_arrow_up__' : 2;
|
|
2053
|
+
var ToggleButtonKeyDownCharacter = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_character__' : 3;
|
|
2054
|
+
var ToggleButtonKeyDownEscape = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_escape__' : 4;
|
|
2055
|
+
var ToggleButtonKeyDownHome = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_home__' : 5;
|
|
2056
|
+
var ToggleButtonKeyDownEnd = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_end__' : 6;
|
|
2057
|
+
var ToggleButtonKeyDownEnter = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_enter__' : 7;
|
|
2058
|
+
var ToggleButtonKeyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_space_button__' : 8;
|
|
2059
|
+
var ToggleButtonKeyDownPageUp = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_page_up__' : 9;
|
|
2060
|
+
var ToggleButtonKeyDownPageDown = process.env.NODE_ENV !== "production" ? '__togglebutton_keydown_page_down__' : 10;
|
|
2061
|
+
var ToggleButtonBlur = process.env.NODE_ENV !== "production" ? '__togglebutton_blur__' : 11;
|
|
2062
|
+
var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 12;
|
|
2063
|
+
var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 13;
|
|
2064
|
+
var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 14;
|
|
2065
|
+
var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 15;
|
|
2066
|
+
var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 16;
|
|
2067
|
+
var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 17;
|
|
2068
|
+
var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 18;
|
|
2069
|
+
var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 19;
|
|
2070
|
+
var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 20;
|
|
2071
|
+
var FunctionReset$2 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 21;
|
|
2105
2072
|
|
|
2106
2073
|
var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
2107
2074
|
__proto__: null,
|
|
@@ -2131,12 +2098,10 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
|
2131
2098
|
|
|
2132
2099
|
/* eslint-disable complexity */
|
|
2133
2100
|
function downshiftSelectReducer(state, action) {
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
} = action;
|
|
2139
|
-
let changes;
|
|
2101
|
+
var type = action.type,
|
|
2102
|
+
props = action.props,
|
|
2103
|
+
altKey = action.altKey;
|
|
2104
|
+
var changes;
|
|
2140
2105
|
switch (type) {
|
|
2141
2106
|
case ItemClick$1:
|
|
2142
2107
|
changes = {
|
|
@@ -2147,10 +2112,10 @@ function downshiftSelectReducer(state, action) {
|
|
|
2147
2112
|
break;
|
|
2148
2113
|
case ToggleButtonKeyDownCharacter:
|
|
2149
2114
|
{
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2115
|
+
var lowercasedKey = action.key;
|
|
2116
|
+
var inputValue = "" + state.inputValue + lowercasedKey;
|
|
2117
|
+
var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
|
|
2118
|
+
var highlightedIndex = getItemIndexByCharacterKey({
|
|
2154
2119
|
keysSoFar: inputValue,
|
|
2155
2120
|
highlightedIndex: prevHighlightedIndex,
|
|
2156
2121
|
items: props.items,
|
|
@@ -2158,34 +2123,33 @@ function downshiftSelectReducer(state, action) {
|
|
|
2158
2123
|
getItemNodeFromIndex: action.getItemNodeFromIndex
|
|
2159
2124
|
});
|
|
2160
2125
|
changes = {
|
|
2161
|
-
inputValue,
|
|
2162
|
-
highlightedIndex,
|
|
2126
|
+
inputValue: inputValue,
|
|
2127
|
+
highlightedIndex: highlightedIndex,
|
|
2163
2128
|
isOpen: true
|
|
2164
2129
|
};
|
|
2165
2130
|
}
|
|
2166
2131
|
break;
|
|
2167
2132
|
case ToggleButtonKeyDownArrowDown:
|
|
2168
2133
|
{
|
|
2169
|
-
|
|
2134
|
+
var _highlightedIndex = state.isOpen ? getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
|
|
2170
2135
|
changes = {
|
|
2171
|
-
highlightedIndex,
|
|
2136
|
+
highlightedIndex: _highlightedIndex,
|
|
2172
2137
|
isOpen: true
|
|
2173
2138
|
};
|
|
2174
2139
|
}
|
|
2175
2140
|
break;
|
|
2176
2141
|
case ToggleButtonKeyDownArrowUp:
|
|
2177
2142
|
if (state.isOpen && altKey) {
|
|
2178
|
-
changes = {
|
|
2143
|
+
changes = _extends__default["default"]({
|
|
2179
2144
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2180
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
};
|
|
2145
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2146
|
+
}, state.highlightedIndex >= 0 && {
|
|
2147
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2148
|
+
});
|
|
2185
2149
|
} else {
|
|
2186
|
-
|
|
2150
|
+
var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
|
|
2187
2151
|
changes = {
|
|
2188
|
-
highlightedIndex,
|
|
2152
|
+
highlightedIndex: _highlightedIndex2,
|
|
2189
2153
|
isOpen: true
|
|
2190
2154
|
};
|
|
2191
2155
|
}
|
|
@@ -2193,13 +2157,12 @@ function downshiftSelectReducer(state, action) {
|
|
|
2193
2157
|
// only triggered when menu is open.
|
|
2194
2158
|
case ToggleButtonKeyDownEnter:
|
|
2195
2159
|
case ToggleButtonKeyDownSpaceButton:
|
|
2196
|
-
changes = {
|
|
2160
|
+
changes = _extends__default["default"]({
|
|
2197
2161
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2198
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
};
|
|
2162
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2163
|
+
}, state.highlightedIndex >= 0 && {
|
|
2164
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2165
|
+
});
|
|
2203
2166
|
break;
|
|
2204
2167
|
case ToggleButtonKeyDownHome:
|
|
2205
2168
|
changes = {
|
|
@@ -2230,13 +2193,12 @@ function downshiftSelectReducer(state, action) {
|
|
|
2230
2193
|
};
|
|
2231
2194
|
break;
|
|
2232
2195
|
case ToggleButtonBlur:
|
|
2233
|
-
changes = {
|
|
2196
|
+
changes = _extends__default["default"]({
|
|
2234
2197
|
isOpen: false,
|
|
2235
|
-
highlightedIndex: -1
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
};
|
|
2198
|
+
highlightedIndex: -1
|
|
2199
|
+
}, state.highlightedIndex >= 0 && {
|
|
2200
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2201
|
+
});
|
|
2240
2202
|
break;
|
|
2241
2203
|
case FunctionSelectItem$1:
|
|
2242
2204
|
changes = {
|
|
@@ -2246,13 +2208,13 @@ function downshiftSelectReducer(state, action) {
|
|
|
2246
2208
|
default:
|
|
2247
2209
|
return downshiftCommonReducer(state, action, stateChangeTypes$2);
|
|
2248
2210
|
}
|
|
2249
|
-
return {
|
|
2250
|
-
...state,
|
|
2251
|
-
...changes
|
|
2252
|
-
};
|
|
2211
|
+
return _extends__default["default"]({}, state, changes);
|
|
2253
2212
|
}
|
|
2254
2213
|
/* eslint-enable complexity */
|
|
2255
2214
|
|
|
2215
|
+
var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
|
|
2216
|
+
_excluded2$2 = ["onBlur", "onClick", "onKeyDown", "refKey", "ref"],
|
|
2217
|
+
_excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref", "disabled"];
|
|
2256
2218
|
useSelect.stateChangeTypes = stateChangeTypes$2;
|
|
2257
2219
|
function useSelect(userProps) {
|
|
2258
2220
|
if (userProps === void 0) {
|
|
@@ -2260,81 +2222,76 @@ function useSelect(userProps) {
|
|
|
2260
2222
|
}
|
|
2261
2223
|
validatePropTypes$2(userProps, useSelect);
|
|
2262
2224
|
// Props defaults and destructuring.
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
environment,
|
|
2271
|
-
itemToString,
|
|
2272
|
-
getA11ySelectionMessage,
|
|
2273
|
-
getA11yStatusMessage
|
|
2274
|
-
} = props;
|
|
2225
|
+
var props = _extends__default["default"]({}, defaultProps$2, userProps);
|
|
2226
|
+
var items = props.items,
|
|
2227
|
+
scrollIntoView = props.scrollIntoView,
|
|
2228
|
+
environment = props.environment,
|
|
2229
|
+
itemToString = props.itemToString,
|
|
2230
|
+
getA11ySelectionMessage = props.getA11ySelectionMessage,
|
|
2231
|
+
getA11yStatusMessage = props.getA11yStatusMessage;
|
|
2275
2232
|
// Initial state depending on controlled props.
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2233
|
+
var initialState = getInitialState$2(props);
|
|
2234
|
+
var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
|
|
2235
|
+
state = _useControlledReducer[0],
|
|
2236
|
+
dispatch = _useControlledReducer[1];
|
|
2237
|
+
var isOpen = state.isOpen,
|
|
2238
|
+
highlightedIndex = state.highlightedIndex,
|
|
2239
|
+
selectedItem = state.selectedItem,
|
|
2240
|
+
inputValue = state.inputValue;
|
|
2284
2241
|
|
|
2285
2242
|
// Element efs.
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2243
|
+
var toggleButtonRef = react.useRef(null);
|
|
2244
|
+
var menuRef = react.useRef(null);
|
|
2245
|
+
var itemRefs = react.useRef({});
|
|
2289
2246
|
// used to keep the inputValue clearTimeout object between renders.
|
|
2290
|
-
|
|
2247
|
+
var clearTimeoutRef = react.useRef(null);
|
|
2291
2248
|
// prevent id re-generation between renders.
|
|
2292
|
-
|
|
2249
|
+
var elementIds = useElementIds(props);
|
|
2293
2250
|
// used to keep track of how many items we had on previous cycle.
|
|
2294
|
-
|
|
2295
|
-
|
|
2251
|
+
var previousResultCountRef = react.useRef();
|
|
2252
|
+
var isInitialMountRef = react.useRef(true);
|
|
2296
2253
|
// utility callback to get item element.
|
|
2297
|
-
|
|
2298
|
-
state,
|
|
2299
|
-
props
|
|
2254
|
+
var latest = useLatestRef({
|
|
2255
|
+
state: state,
|
|
2256
|
+
props: props
|
|
2300
2257
|
});
|
|
2301
2258
|
|
|
2302
2259
|
// Some utils.
|
|
2303
|
-
|
|
2260
|
+
var getItemNodeFromIndex = react.useCallback(function (index) {
|
|
2261
|
+
return itemRefs.current[elementIds.getItemId(index)];
|
|
2262
|
+
}, [elementIds]);
|
|
2304
2263
|
|
|
2305
2264
|
// Effects.
|
|
2306
2265
|
// Sets a11y status message on changes in state.
|
|
2307
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
2266
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
|
|
2308
2267
|
isInitialMount: isInitialMountRef.current,
|
|
2309
2268
|
previousResultCount: previousResultCountRef.current,
|
|
2310
|
-
items,
|
|
2311
|
-
environment,
|
|
2312
|
-
itemToString
|
|
2313
|
-
|
|
2314
|
-
});
|
|
2269
|
+
items: items,
|
|
2270
|
+
environment: environment,
|
|
2271
|
+
itemToString: itemToString
|
|
2272
|
+
}, state));
|
|
2315
2273
|
// Sets a11y status message on changes in selectedItem.
|
|
2316
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
2274
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
|
|
2317
2275
|
isInitialMount: isInitialMountRef.current,
|
|
2318
2276
|
previousResultCount: previousResultCountRef.current,
|
|
2319
|
-
items,
|
|
2320
|
-
environment,
|
|
2321
|
-
itemToString
|
|
2322
|
-
|
|
2323
|
-
});
|
|
2277
|
+
items: items,
|
|
2278
|
+
environment: environment,
|
|
2279
|
+
itemToString: itemToString
|
|
2280
|
+
}, state));
|
|
2324
2281
|
// Scroll on highlighted item if change comes from keyboard.
|
|
2325
|
-
|
|
2282
|
+
var shouldScrollRef = useScrollIntoView({
|
|
2326
2283
|
menuElement: menuRef.current,
|
|
2327
|
-
highlightedIndex,
|
|
2328
|
-
isOpen,
|
|
2329
|
-
itemRefs,
|
|
2330
|
-
scrollIntoView,
|
|
2331
|
-
getItemNodeFromIndex
|
|
2284
|
+
highlightedIndex: highlightedIndex,
|
|
2285
|
+
isOpen: isOpen,
|
|
2286
|
+
itemRefs: itemRefs,
|
|
2287
|
+
scrollIntoView: scrollIntoView,
|
|
2288
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2332
2289
|
});
|
|
2333
2290
|
|
|
2334
2291
|
// Sets cleanup for the keysSoFar callback, debounded after 500ms.
|
|
2335
|
-
react.useEffect(()
|
|
2292
|
+
react.useEffect(function () {
|
|
2336
2293
|
// init the clean function here as we need access to dispatch.
|
|
2337
|
-
clearTimeoutRef.current = debounce(outerDispatch
|
|
2294
|
+
clearTimeoutRef.current = debounce(function (outerDispatch) {
|
|
2338
2295
|
outerDispatch({
|
|
2339
2296
|
type: FunctionSetInputValue$1,
|
|
2340
2297
|
inputValue: ''
|
|
@@ -2342,13 +2299,13 @@ function useSelect(userProps) {
|
|
|
2342
2299
|
}, 500);
|
|
2343
2300
|
|
|
2344
2301
|
// Cancel any pending debounced calls on mount
|
|
2345
|
-
return ()
|
|
2302
|
+
return function () {
|
|
2346
2303
|
clearTimeoutRef.current.cancel();
|
|
2347
2304
|
};
|
|
2348
2305
|
}, []);
|
|
2349
2306
|
|
|
2350
2307
|
// Invokes the keysSoFar callback set up above.
|
|
2351
|
-
react.useEffect(()
|
|
2308
|
+
react.useEffect(function () {
|
|
2352
2309
|
if (!inputValue) {
|
|
2353
2310
|
return;
|
|
2354
2311
|
}
|
|
@@ -2356,249 +2313,234 @@ function useSelect(userProps) {
|
|
|
2356
2313
|
}, [dispatch, inputValue]);
|
|
2357
2314
|
useControlPropsValidator({
|
|
2358
2315
|
isInitialMount: isInitialMountRef.current,
|
|
2359
|
-
props,
|
|
2360
|
-
state
|
|
2316
|
+
props: props,
|
|
2317
|
+
state: state
|
|
2361
2318
|
});
|
|
2362
|
-
react.useEffect(()
|
|
2319
|
+
react.useEffect(function () {
|
|
2363
2320
|
if (isInitialMountRef.current) {
|
|
2364
2321
|
return;
|
|
2365
2322
|
}
|
|
2366
2323
|
previousResultCountRef.current = items.length;
|
|
2367
2324
|
});
|
|
2368
2325
|
// Add mouse/touch events to document.
|
|
2369
|
-
|
|
2326
|
+
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
|
|
2370
2327
|
dispatch({
|
|
2371
2328
|
type: ToggleButtonBlur
|
|
2372
2329
|
});
|
|
2373
2330
|
});
|
|
2374
|
-
|
|
2331
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
|
|
2375
2332
|
// Make initial ref false.
|
|
2376
|
-
react.useEffect(()
|
|
2333
|
+
react.useEffect(function () {
|
|
2377
2334
|
isInitialMountRef.current = false;
|
|
2378
|
-
return ()
|
|
2335
|
+
return function () {
|
|
2379
2336
|
isInitialMountRef.current = true;
|
|
2380
2337
|
};
|
|
2381
2338
|
}, []);
|
|
2382
2339
|
// Reset itemRefs on close.
|
|
2383
|
-
react.useEffect(()
|
|
2340
|
+
react.useEffect(function () {
|
|
2384
2341
|
if (!isOpen) {
|
|
2385
2342
|
itemRefs.current = {};
|
|
2386
2343
|
}
|
|
2387
2344
|
}, [isOpen]);
|
|
2388
2345
|
|
|
2389
2346
|
// Event handler functions.
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
event
|
|
2393
|
-
dispatch({
|
|
2394
|
-
type: ToggleButtonKeyDownArrowDown,
|
|
2395
|
-
getItemNodeFromIndex,
|
|
2396
|
-
altKey: event.altKey
|
|
2397
|
-
});
|
|
2398
|
-
},
|
|
2399
|
-
ArrowUp(event) {
|
|
2400
|
-
event.preventDefault();
|
|
2401
|
-
dispatch({
|
|
2402
|
-
type: ToggleButtonKeyDownArrowUp,
|
|
2403
|
-
getItemNodeFromIndex,
|
|
2404
|
-
altKey: event.altKey
|
|
2405
|
-
});
|
|
2406
|
-
},
|
|
2407
|
-
Home(event) {
|
|
2408
|
-
event.preventDefault();
|
|
2409
|
-
dispatch({
|
|
2410
|
-
type: ToggleButtonKeyDownHome,
|
|
2411
|
-
getItemNodeFromIndex
|
|
2412
|
-
});
|
|
2413
|
-
},
|
|
2414
|
-
End(event) {
|
|
2415
|
-
event.preventDefault();
|
|
2416
|
-
dispatch({
|
|
2417
|
-
type: ToggleButtonKeyDownEnd,
|
|
2418
|
-
getItemNodeFromIndex
|
|
2419
|
-
});
|
|
2420
|
-
},
|
|
2421
|
-
Escape() {
|
|
2422
|
-
if (latest.current.state.isOpen) {
|
|
2423
|
-
dispatch({
|
|
2424
|
-
type: ToggleButtonKeyDownEscape
|
|
2425
|
-
});
|
|
2426
|
-
}
|
|
2427
|
-
},
|
|
2428
|
-
Enter(event) {
|
|
2429
|
-
event.preventDefault();
|
|
2430
|
-
dispatch({
|
|
2431
|
-
type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
|
|
2432
|
-
});
|
|
2433
|
-
},
|
|
2434
|
-
PageUp(event) {
|
|
2435
|
-
if (latest.current.state.isOpen) {
|
|
2347
|
+
var toggleButtonKeyDownHandlers = react.useMemo(function () {
|
|
2348
|
+
return {
|
|
2349
|
+
ArrowDown: function ArrowDown(event) {
|
|
2436
2350
|
event.preventDefault();
|
|
2437
2351
|
dispatch({
|
|
2438
|
-
type:
|
|
2439
|
-
getItemNodeFromIndex
|
|
2352
|
+
type: ToggleButtonKeyDownArrowDown,
|
|
2353
|
+
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2354
|
+
altKey: event.altKey
|
|
2440
2355
|
});
|
|
2441
|
-
}
|
|
2442
|
-
|
|
2443
|
-
PageDown(event) {
|
|
2444
|
-
if (latest.current.state.isOpen) {
|
|
2356
|
+
},
|
|
2357
|
+
ArrowUp: function ArrowUp(event) {
|
|
2445
2358
|
event.preventDefault();
|
|
2446
2359
|
dispatch({
|
|
2447
|
-
type:
|
|
2448
|
-
getItemNodeFromIndex
|
|
2360
|
+
type: ToggleButtonKeyDownArrowUp,
|
|
2361
|
+
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2362
|
+
altKey: event.altKey
|
|
2449
2363
|
});
|
|
2450
|
-
}
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
event.preventDefault();
|
|
2454
|
-
const currentState = latest.current.state;
|
|
2455
|
-
if (!currentState.isOpen) {
|
|
2364
|
+
},
|
|
2365
|
+
Home: function Home(event) {
|
|
2366
|
+
event.preventDefault();
|
|
2456
2367
|
dispatch({
|
|
2457
|
-
type:
|
|
2368
|
+
type: ToggleButtonKeyDownHome,
|
|
2369
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2458
2370
|
});
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2371
|
+
},
|
|
2372
|
+
End: function End(event) {
|
|
2373
|
+
event.preventDefault();
|
|
2462
2374
|
dispatch({
|
|
2463
|
-
type:
|
|
2464
|
-
|
|
2465
|
-
getItemNodeFromIndex
|
|
2375
|
+
type: ToggleButtonKeyDownEnd,
|
|
2376
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2466
2377
|
});
|
|
2467
|
-
}
|
|
2378
|
+
},
|
|
2379
|
+
Escape: function Escape() {
|
|
2380
|
+
if (latest.current.state.isOpen) {
|
|
2381
|
+
dispatch({
|
|
2382
|
+
type: ToggleButtonKeyDownEscape
|
|
2383
|
+
});
|
|
2384
|
+
}
|
|
2385
|
+
},
|
|
2386
|
+
Enter: function Enter(event) {
|
|
2387
|
+
event.preventDefault();
|
|
2468
2388
|
dispatch({
|
|
2469
|
-
type:
|
|
2389
|
+
type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
|
|
2470
2390
|
});
|
|
2391
|
+
},
|
|
2392
|
+
PageUp: function PageUp(event) {
|
|
2393
|
+
if (latest.current.state.isOpen) {
|
|
2394
|
+
event.preventDefault();
|
|
2395
|
+
dispatch({
|
|
2396
|
+
type: ToggleButtonKeyDownPageUp,
|
|
2397
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2398
|
+
});
|
|
2399
|
+
}
|
|
2400
|
+
},
|
|
2401
|
+
PageDown: function PageDown(event) {
|
|
2402
|
+
if (latest.current.state.isOpen) {
|
|
2403
|
+
event.preventDefault();
|
|
2404
|
+
dispatch({
|
|
2405
|
+
type: ToggleButtonKeyDownPageDown,
|
|
2406
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2407
|
+
});
|
|
2408
|
+
}
|
|
2409
|
+
},
|
|
2410
|
+
' ': function _(event) {
|
|
2411
|
+
event.preventDefault();
|
|
2412
|
+
var currentState = latest.current.state;
|
|
2413
|
+
if (!currentState.isOpen) {
|
|
2414
|
+
dispatch({
|
|
2415
|
+
type: ToggleButtonClick$1
|
|
2416
|
+
});
|
|
2417
|
+
return;
|
|
2418
|
+
}
|
|
2419
|
+
if (currentState.inputValue) {
|
|
2420
|
+
dispatch({
|
|
2421
|
+
type: ToggleButtonKeyDownCharacter,
|
|
2422
|
+
key: ' ',
|
|
2423
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2424
|
+
});
|
|
2425
|
+
} else {
|
|
2426
|
+
dispatch({
|
|
2427
|
+
type: ToggleButtonKeyDownSpaceButton
|
|
2428
|
+
});
|
|
2429
|
+
}
|
|
2471
2430
|
}
|
|
2472
|
-
}
|
|
2473
|
-
}
|
|
2431
|
+
};
|
|
2432
|
+
}, [dispatch, getItemNodeFromIndex, latest]);
|
|
2474
2433
|
|
|
2475
2434
|
// Action functions.
|
|
2476
|
-
|
|
2435
|
+
var toggleMenu = react.useCallback(function () {
|
|
2477
2436
|
dispatch({
|
|
2478
2437
|
type: FunctionToggleMenu$1
|
|
2479
2438
|
});
|
|
2480
2439
|
}, [dispatch]);
|
|
2481
|
-
|
|
2440
|
+
var closeMenu = react.useCallback(function () {
|
|
2482
2441
|
dispatch({
|
|
2483
2442
|
type: FunctionCloseMenu$1
|
|
2484
2443
|
});
|
|
2485
2444
|
}, [dispatch]);
|
|
2486
|
-
|
|
2445
|
+
var openMenu = react.useCallback(function () {
|
|
2487
2446
|
dispatch({
|
|
2488
2447
|
type: FunctionOpenMenu$1
|
|
2489
2448
|
});
|
|
2490
2449
|
}, [dispatch]);
|
|
2491
|
-
|
|
2450
|
+
var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
|
|
2492
2451
|
dispatch({
|
|
2493
2452
|
type: FunctionSetHighlightedIndex$1,
|
|
2494
2453
|
highlightedIndex: newHighlightedIndex
|
|
2495
2454
|
});
|
|
2496
2455
|
}, [dispatch]);
|
|
2497
|
-
|
|
2456
|
+
var selectItem = react.useCallback(function (newSelectedItem) {
|
|
2498
2457
|
dispatch({
|
|
2499
2458
|
type: FunctionSelectItem$1,
|
|
2500
2459
|
selectedItem: newSelectedItem
|
|
2501
2460
|
});
|
|
2502
2461
|
}, [dispatch]);
|
|
2503
|
-
|
|
2462
|
+
var reset = react.useCallback(function () {
|
|
2504
2463
|
dispatch({
|
|
2505
2464
|
type: FunctionReset$2
|
|
2506
2465
|
});
|
|
2507
2466
|
}, [dispatch]);
|
|
2508
|
-
|
|
2467
|
+
var setInputValue = react.useCallback(function (newInputValue) {
|
|
2509
2468
|
dispatch({
|
|
2510
2469
|
type: FunctionSetInputValue$1,
|
|
2511
2470
|
inputValue: newInputValue
|
|
2512
2471
|
});
|
|
2513
2472
|
}, [dispatch]);
|
|
2514
2473
|
// Getter functions.
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
ref
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2474
|
+
var getLabelProps = react.useCallback(function (labelProps) {
|
|
2475
|
+
return _extends__default["default"]({
|
|
2476
|
+
id: elementIds.labelId,
|
|
2477
|
+
htmlFor: elementIds.toggleButtonId
|
|
2478
|
+
}, labelProps);
|
|
2479
|
+
}, [elementIds]);
|
|
2480
|
+
var getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
2481
|
+
var _extends2;
|
|
2482
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
2483
|
+
onMouseLeave = _ref.onMouseLeave,
|
|
2484
|
+
_ref$refKey = _ref.refKey,
|
|
2485
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey;
|
|
2486
|
+
_ref.onKeyDown;
|
|
2487
|
+
_ref.onBlur;
|
|
2488
|
+
var ref = _ref.ref,
|
|
2489
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
|
|
2490
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
2491
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
2492
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
2493
|
+
var menuHandleMouseLeave = function menuHandleMouseLeave() {
|
|
2533
2494
|
dispatch({
|
|
2534
2495
|
type: MenuMouseLeave$1
|
|
2535
2496
|
});
|
|
2536
2497
|
};
|
|
2537
2498
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
2538
|
-
return {
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
}),
|
|
2542
|
-
id: elementIds.menuId,
|
|
2543
|
-
role: 'listbox',
|
|
2544
|
-
'aria-labelledby': elementIds.labelId,
|
|
2545
|
-
tabIndex: -1,
|
|
2546
|
-
onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
|
|
2547
|
-
...rest
|
|
2548
|
-
};
|
|
2499
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
|
|
2500
|
+
menuRef.current = menuNode;
|
|
2501
|
+
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
|
|
2549
2502
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2503
|
+
var getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
|
|
2504
|
+
var _extends3;
|
|
2505
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
2506
|
+
onBlur = _ref3.onBlur,
|
|
2507
|
+
onClick = _ref3.onClick,
|
|
2508
|
+
onKeyDown = _ref3.onKeyDown,
|
|
2509
|
+
_ref3$refKey = _ref3.refKey,
|
|
2510
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
2511
|
+
ref = _ref3.ref,
|
|
2512
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$2);
|
|
2513
|
+
var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
|
2514
|
+
_ref4$suppressRefErro = _ref4.suppressRefError,
|
|
2515
|
+
suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
|
|
2516
|
+
var latestState = latest.current.state;
|
|
2517
|
+
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
2564
2518
|
dispatch({
|
|
2565
2519
|
type: ToggleButtonClick$1
|
|
2566
2520
|
});
|
|
2567
2521
|
};
|
|
2568
|
-
|
|
2522
|
+
var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
|
|
2569
2523
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
2570
2524
|
dispatch({
|
|
2571
2525
|
type: ToggleButtonBlur
|
|
2572
2526
|
});
|
|
2573
2527
|
}
|
|
2574
2528
|
};
|
|
2575
|
-
|
|
2576
|
-
|
|
2529
|
+
var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
|
|
2530
|
+
var key = normalizeArrowKey(event);
|
|
2577
2531
|
if (key && toggleButtonKeyDownHandlers[key]) {
|
|
2578
2532
|
toggleButtonKeyDownHandlers[key](event);
|
|
2579
2533
|
} else if (isAcceptedCharacterKey(key)) {
|
|
2580
2534
|
dispatch({
|
|
2581
2535
|
type: ToggleButtonKeyDownCharacter,
|
|
2582
|
-
key,
|
|
2583
|
-
getItemNodeFromIndex
|
|
2536
|
+
key: key,
|
|
2537
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2584
2538
|
});
|
|
2585
2539
|
}
|
|
2586
2540
|
};
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
}),
|
|
2591
|
-
'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
|
|
2592
|
-
'aria-controls': elementIds.menuId,
|
|
2593
|
-
'aria-expanded': latest.current.state.isOpen,
|
|
2594
|
-
'aria-haspopup': 'listbox',
|
|
2595
|
-
'aria-labelledby': `${elementIds.labelId}`,
|
|
2596
|
-
id: elementIds.toggleButtonId,
|
|
2597
|
-
role: 'combobox',
|
|
2598
|
-
tabIndex: 0,
|
|
2599
|
-
onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur),
|
|
2600
|
-
...rest
|
|
2601
|
-
};
|
|
2541
|
+
var toggleProps = _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
|
|
2542
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
2543
|
+
}), _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);
|
|
2602
2544
|
if (!rest.disabled) {
|
|
2603
2545
|
toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
|
|
2604
2546
|
toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
|
|
@@ -2606,56 +2548,54 @@ function useSelect(userProps) {
|
|
|
2606
2548
|
setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
|
|
2607
2549
|
return toggleProps;
|
|
2608
2550
|
}, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2551
|
+
var getItemProps = react.useCallback(function (_temp5) {
|
|
2552
|
+
var _extends4;
|
|
2553
|
+
var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
|
2554
|
+
itemProp = _ref5.item,
|
|
2555
|
+
indexProp = _ref5.index,
|
|
2556
|
+
onMouseMove = _ref5.onMouseMove,
|
|
2557
|
+
onClick = _ref5.onClick,
|
|
2558
|
+
_ref5$refKey = _ref5.refKey,
|
|
2559
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
2560
|
+
ref = _ref5.ref,
|
|
2561
|
+
disabled = _ref5.disabled,
|
|
2562
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded3$1);
|
|
2563
|
+
var _latest$current = latest.current,
|
|
2564
|
+
latestState = _latest$current.state,
|
|
2565
|
+
latestProps = _latest$current.props;
|
|
2566
|
+
var item = itemProp != null ? itemProp : items[indexProp];
|
|
2567
|
+
var index = getItemIndex(indexProp, item, latestProps.items);
|
|
2568
|
+
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
2627
2569
|
if (index === latestState.highlightedIndex) {
|
|
2628
2570
|
return;
|
|
2629
2571
|
}
|
|
2630
2572
|
shouldScrollRef.current = false;
|
|
2631
2573
|
dispatch({
|
|
2632
2574
|
type: ItemMouseMove$1,
|
|
2633
|
-
index,
|
|
2634
|
-
disabled
|
|
2575
|
+
index: index,
|
|
2576
|
+
disabled: disabled
|
|
2635
2577
|
});
|
|
2636
2578
|
};
|
|
2637
|
-
|
|
2579
|
+
var itemHandleClick = function itemHandleClick() {
|
|
2638
2580
|
dispatch({
|
|
2639
2581
|
type: ItemClick$1,
|
|
2640
|
-
index
|
|
2582
|
+
index: index
|
|
2641
2583
|
});
|
|
2642
2584
|
};
|
|
2643
|
-
|
|
2585
|
+
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
2644
2586
|
if (itemIndex < 0) {
|
|
2645
2587
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
2646
2588
|
}
|
|
2647
|
-
|
|
2648
|
-
disabled,
|
|
2589
|
+
var itemProps = _extends__default["default"]((_extends4 = {
|
|
2590
|
+
disabled: disabled,
|
|
2649
2591
|
role: 'option',
|
|
2650
|
-
'aria-selected':
|
|
2651
|
-
id: elementIds.getItemId(itemIndex)
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
...rest
|
|
2658
|
-
};
|
|
2592
|
+
'aria-selected': "" + (item === selectedItem),
|
|
2593
|
+
id: elementIds.getItemId(itemIndex)
|
|
2594
|
+
}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
|
|
2595
|
+
if (itemNode) {
|
|
2596
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
2597
|
+
}
|
|
2598
|
+
}), _extends4), rest);
|
|
2659
2599
|
if (!disabled) {
|
|
2660
2600
|
itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
|
|
2661
2601
|
}
|
|
@@ -2664,49 +2604,49 @@ function useSelect(userProps) {
|
|
|
2664
2604
|
}, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
|
|
2665
2605
|
return {
|
|
2666
2606
|
// prop getters.
|
|
2667
|
-
getToggleButtonProps,
|
|
2668
|
-
getLabelProps,
|
|
2669
|
-
getMenuProps,
|
|
2670
|
-
getItemProps,
|
|
2607
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
2608
|
+
getLabelProps: getLabelProps,
|
|
2609
|
+
getMenuProps: getMenuProps,
|
|
2610
|
+
getItemProps: getItemProps,
|
|
2671
2611
|
// actions.
|
|
2672
|
-
toggleMenu,
|
|
2673
|
-
openMenu,
|
|
2674
|
-
closeMenu,
|
|
2675
|
-
setHighlightedIndex,
|
|
2676
|
-
selectItem,
|
|
2677
|
-
reset,
|
|
2678
|
-
setInputValue,
|
|
2612
|
+
toggleMenu: toggleMenu,
|
|
2613
|
+
openMenu: openMenu,
|
|
2614
|
+
closeMenu: closeMenu,
|
|
2615
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
2616
|
+
selectItem: selectItem,
|
|
2617
|
+
reset: reset,
|
|
2618
|
+
setInputValue: setInputValue,
|
|
2679
2619
|
// state.
|
|
2680
|
-
highlightedIndex,
|
|
2681
|
-
isOpen,
|
|
2682
|
-
selectedItem,
|
|
2683
|
-
inputValue
|
|
2620
|
+
highlightedIndex: highlightedIndex,
|
|
2621
|
+
isOpen: isOpen,
|
|
2622
|
+
selectedItem: selectedItem,
|
|
2623
|
+
inputValue: inputValue
|
|
2684
2624
|
};
|
|
2685
2625
|
}
|
|
2686
2626
|
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2627
|
+
var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
|
|
2628
|
+
var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
|
|
2629
|
+
var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
|
|
2630
|
+
var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
|
|
2631
|
+
var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
|
|
2632
|
+
var InputKeyDownPageUp = process.env.NODE_ENV !== "production" ? '__input_keydown_page_up__' : 5;
|
|
2633
|
+
var InputKeyDownPageDown = process.env.NODE_ENV !== "production" ? '__input_keydown_page_down__' : 6;
|
|
2634
|
+
var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 7;
|
|
2635
|
+
var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 8;
|
|
2636
|
+
var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 9;
|
|
2637
|
+
var InputFocus = process.env.NODE_ENV !== "production" ? '__input_focus__' : 10;
|
|
2638
|
+
var MenuMouseLeave = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 11;
|
|
2639
|
+
var ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 12;
|
|
2640
|
+
var ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 13;
|
|
2641
|
+
var ToggleButtonClick = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 14;
|
|
2642
|
+
var FunctionToggleMenu = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 15;
|
|
2643
|
+
var FunctionOpenMenu = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 16;
|
|
2644
|
+
var FunctionCloseMenu = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 17;
|
|
2645
|
+
var FunctionSetHighlightedIndex = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 18;
|
|
2646
|
+
var FunctionSelectItem = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 19;
|
|
2647
|
+
var FunctionSetInputValue = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 20;
|
|
2648
|
+
var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 21;
|
|
2649
|
+
var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 22;
|
|
2710
2650
|
|
|
2711
2651
|
var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
2712
2652
|
__proto__: null,
|
|
@@ -2736,22 +2676,17 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
|
2736
2676
|
});
|
|
2737
2677
|
|
|
2738
2678
|
function getInitialState$1(props) {
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
} = initialState;
|
|
2743
|
-
let {
|
|
2744
|
-
inputValue
|
|
2745
|
-
} = initialState;
|
|
2679
|
+
var initialState = getInitialState$2(props);
|
|
2680
|
+
var selectedItem = initialState.selectedItem;
|
|
2681
|
+
var inputValue = initialState.inputValue;
|
|
2746
2682
|
if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
|
|
2747
2683
|
inputValue = props.itemToString(selectedItem);
|
|
2748
2684
|
}
|
|
2749
|
-
return {
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
};
|
|
2685
|
+
return _extends__default["default"]({}, initialState, {
|
|
2686
|
+
inputValue: inputValue
|
|
2687
|
+
});
|
|
2753
2688
|
}
|
|
2754
|
-
|
|
2689
|
+
var propTypes$1 = {
|
|
2755
2690
|
items: PropTypes__default["default"].array.isRequired,
|
|
2756
2691
|
itemToString: PropTypes__default["default"].func,
|
|
2757
2692
|
getA11yStatusMessage: PropTypes__default["default"].func,
|
|
@@ -2804,11 +2739,13 @@ const propTypes$1 = {
|
|
|
2804
2739
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
2805
2740
|
*/
|
|
2806
2741
|
function useControlledReducer(reducer, initialState, props) {
|
|
2807
|
-
|
|
2808
|
-
|
|
2742
|
+
var previousSelectedItemRef = react.useRef();
|
|
2743
|
+
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
|
|
2744
|
+
state = _useEnhancedReducer[0],
|
|
2745
|
+
dispatch = _useEnhancedReducer[1];
|
|
2809
2746
|
|
|
2810
2747
|
// ToDo: if needed, make same approach as selectedItemChanged from Downshift.
|
|
2811
|
-
react.useEffect(()
|
|
2748
|
+
react.useEffect(function () {
|
|
2812
2749
|
if (isControlledProp(props, 'selectedItem')) {
|
|
2813
2750
|
if (previousSelectedItemRef.current !== props.selectedItem) {
|
|
2814
2751
|
dispatch({
|
|
@@ -2823,26 +2760,23 @@ function useControlledReducer(reducer, initialState, props) {
|
|
|
2823
2760
|
}
|
|
2824
2761
|
|
|
2825
2762
|
// eslint-disable-next-line import/no-mutable-exports
|
|
2826
|
-
|
|
2763
|
+
var validatePropTypes$1 = noop;
|
|
2827
2764
|
/* istanbul ignore next */
|
|
2828
2765
|
if (process.env.NODE_ENV !== 'production') {
|
|
2829
|
-
validatePropTypes$1 = (options, caller)
|
|
2766
|
+
validatePropTypes$1 = function validatePropTypes(options, caller) {
|
|
2830
2767
|
PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
|
|
2831
2768
|
};
|
|
2832
2769
|
}
|
|
2833
|
-
|
|
2834
|
-
...defaultProps$3,
|
|
2770
|
+
var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
|
|
2835
2771
|
getA11yStatusMessage: getA11yStatusMessage$1
|
|
2836
|
-
};
|
|
2772
|
+
});
|
|
2837
2773
|
|
|
2838
2774
|
/* eslint-disable complexity */
|
|
2839
2775
|
function downshiftUseComboboxReducer(state, action) {
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
} = action;
|
|
2845
|
-
let changes;
|
|
2776
|
+
var type = action.type,
|
|
2777
|
+
props = action.props,
|
|
2778
|
+
altKey = action.altKey;
|
|
2779
|
+
var changes;
|
|
2846
2780
|
switch (type) {
|
|
2847
2781
|
case ItemClick:
|
|
2848
2782
|
changes = {
|
|
@@ -2867,14 +2801,13 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2867
2801
|
case InputKeyDownArrowUp:
|
|
2868
2802
|
if (state.isOpen) {
|
|
2869
2803
|
if (altKey) {
|
|
2870
|
-
changes = {
|
|
2804
|
+
changes = _extends__default["default"]({
|
|
2871
2805
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2872
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
};
|
|
2806
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2807
|
+
}, state.highlightedIndex >= 0 && {
|
|
2808
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
2809
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
2810
|
+
});
|
|
2878
2811
|
} else {
|
|
2879
2812
|
changes = {
|
|
2880
2813
|
highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
|
|
@@ -2888,24 +2821,22 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2888
2821
|
}
|
|
2889
2822
|
break;
|
|
2890
2823
|
case InputKeyDownEnter:
|
|
2891
|
-
changes = {
|
|
2824
|
+
changes = _extends__default["default"]({
|
|
2892
2825
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2893
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
};
|
|
2826
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2827
|
+
}, state.highlightedIndex >= 0 && {
|
|
2828
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
2829
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
2830
|
+
});
|
|
2899
2831
|
break;
|
|
2900
2832
|
case InputKeyDownEscape:
|
|
2901
|
-
changes = {
|
|
2833
|
+
changes = _extends__default["default"]({
|
|
2902
2834
|
isOpen: false,
|
|
2903
|
-
highlightedIndex: -1
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
};
|
|
2835
|
+
highlightedIndex: -1
|
|
2836
|
+
}, !state.isOpen && {
|
|
2837
|
+
selectedItem: null,
|
|
2838
|
+
inputValue: ''
|
|
2839
|
+
});
|
|
2909
2840
|
break;
|
|
2910
2841
|
case InputKeyDownPageUp:
|
|
2911
2842
|
changes = {
|
|
@@ -2928,14 +2859,13 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2928
2859
|
};
|
|
2929
2860
|
break;
|
|
2930
2861
|
case InputBlur:
|
|
2931
|
-
changes = {
|
|
2862
|
+
changes = _extends__default["default"]({
|
|
2932
2863
|
isOpen: false,
|
|
2933
|
-
highlightedIndex: -1
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
};
|
|
2864
|
+
highlightedIndex: -1
|
|
2865
|
+
}, state.highlightedIndex >= 0 && action.selectItem && {
|
|
2866
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
2867
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
2868
|
+
});
|
|
2939
2869
|
break;
|
|
2940
2870
|
case InputChange:
|
|
2941
2871
|
changes = {
|
|
@@ -2964,14 +2894,14 @@ function downshiftUseComboboxReducer(state, action) {
|
|
|
2964
2894
|
default:
|
|
2965
2895
|
return downshiftCommonReducer(state, action, stateChangeTypes$1);
|
|
2966
2896
|
}
|
|
2967
|
-
return {
|
|
2968
|
-
...state,
|
|
2969
|
-
...changes
|
|
2970
|
-
};
|
|
2897
|
+
return _extends__default["default"]({}, state, changes);
|
|
2971
2898
|
}
|
|
2972
2899
|
/* eslint-enable complexity */
|
|
2973
2900
|
|
|
2974
|
-
|
|
2901
|
+
var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
|
|
2902
|
+
_excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"],
|
|
2903
|
+
_excluded3 = ["onClick", "onPress", "refKey", "ref"],
|
|
2904
|
+
_excluded4 = ["onKeyDown", "onChange", "onInput", "onFocus", "onBlur", "onChangeText", "refKey", "ref"];
|
|
2975
2905
|
useCombobox.stateChangeTypes = stateChangeTypes$1;
|
|
2976
2906
|
function useCombobox(userProps) {
|
|
2977
2907
|
if (userProps === void 0) {
|
|
@@ -2979,349 +2909,327 @@ function useCombobox(userProps) {
|
|
|
2979
2909
|
}
|
|
2980
2910
|
validatePropTypes$1(userProps, useCombobox);
|
|
2981
2911
|
// Props defaults and destructuring.
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
environment,
|
|
2992
|
-
getA11yStatusMessage,
|
|
2993
|
-
getA11ySelectionMessage,
|
|
2994
|
-
itemToString
|
|
2995
|
-
} = props;
|
|
2912
|
+
var props = _extends__default["default"]({}, defaultProps$1, userProps);
|
|
2913
|
+
var initialIsOpen = props.initialIsOpen,
|
|
2914
|
+
defaultIsOpen = props.defaultIsOpen,
|
|
2915
|
+
items = props.items,
|
|
2916
|
+
scrollIntoView = props.scrollIntoView,
|
|
2917
|
+
environment = props.environment,
|
|
2918
|
+
getA11yStatusMessage = props.getA11yStatusMessage,
|
|
2919
|
+
getA11ySelectionMessage = props.getA11ySelectionMessage,
|
|
2920
|
+
itemToString = props.itemToString;
|
|
2996
2921
|
// Initial state depending on controlled props.
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
2922
|
+
var initialState = getInitialState$1(props);
|
|
2923
|
+
var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
|
|
2924
|
+
state = _useControlledReducer[0],
|
|
2925
|
+
dispatch = _useControlledReducer[1];
|
|
2926
|
+
var isOpen = state.isOpen,
|
|
2927
|
+
highlightedIndex = state.highlightedIndex,
|
|
2928
|
+
selectedItem = state.selectedItem,
|
|
2929
|
+
inputValue = state.inputValue;
|
|
3005
2930
|
|
|
3006
2931
|
// Element refs.
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
2932
|
+
var menuRef = react.useRef(null);
|
|
2933
|
+
var itemRefs = react.useRef({});
|
|
2934
|
+
var inputRef = react.useRef(null);
|
|
2935
|
+
var toggleButtonRef = react.useRef(null);
|
|
2936
|
+
var isInitialMountRef = react.useRef(true);
|
|
3012
2937
|
// prevent id re-generation between renders.
|
|
3013
|
-
|
|
2938
|
+
var elementIds = useElementIds(props);
|
|
3014
2939
|
// used to keep track of how many items we had on previous cycle.
|
|
3015
|
-
|
|
2940
|
+
var previousResultCountRef = react.useRef();
|
|
3016
2941
|
// utility callback to get item element.
|
|
3017
|
-
|
|
3018
|
-
state,
|
|
3019
|
-
props
|
|
2942
|
+
var latest = useLatestRef({
|
|
2943
|
+
state: state,
|
|
2944
|
+
props: props
|
|
3020
2945
|
});
|
|
3021
|
-
|
|
2946
|
+
var getItemNodeFromIndex = react.useCallback(function (index) {
|
|
2947
|
+
return itemRefs.current[elementIds.getItemId(index)];
|
|
2948
|
+
}, [elementIds]);
|
|
3022
2949
|
|
|
3023
2950
|
// Effects.
|
|
3024
2951
|
// Sets a11y status message on changes in state.
|
|
3025
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
2952
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
|
|
3026
2953
|
isInitialMount: isInitialMountRef.current,
|
|
3027
2954
|
previousResultCount: previousResultCountRef.current,
|
|
3028
|
-
items,
|
|
3029
|
-
environment,
|
|
3030
|
-
itemToString
|
|
3031
|
-
|
|
3032
|
-
});
|
|
2955
|
+
items: items,
|
|
2956
|
+
environment: environment,
|
|
2957
|
+
itemToString: itemToString
|
|
2958
|
+
}, state));
|
|
3033
2959
|
// Sets a11y status message on changes in selectedItem.
|
|
3034
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
2960
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
|
|
3035
2961
|
isInitialMount: isInitialMountRef.current,
|
|
3036
2962
|
previousResultCount: previousResultCountRef.current,
|
|
3037
|
-
items,
|
|
3038
|
-
environment,
|
|
3039
|
-
itemToString
|
|
3040
|
-
|
|
3041
|
-
});
|
|
2963
|
+
items: items,
|
|
2964
|
+
environment: environment,
|
|
2965
|
+
itemToString: itemToString
|
|
2966
|
+
}, state));
|
|
3042
2967
|
// Scroll on highlighted item if change comes from keyboard.
|
|
3043
|
-
|
|
2968
|
+
var shouldScrollRef = useScrollIntoView({
|
|
3044
2969
|
menuElement: menuRef.current,
|
|
3045
|
-
highlightedIndex,
|
|
3046
|
-
isOpen,
|
|
3047
|
-
itemRefs,
|
|
3048
|
-
scrollIntoView,
|
|
3049
|
-
getItemNodeFromIndex
|
|
2970
|
+
highlightedIndex: highlightedIndex,
|
|
2971
|
+
isOpen: isOpen,
|
|
2972
|
+
itemRefs: itemRefs,
|
|
2973
|
+
scrollIntoView: scrollIntoView,
|
|
2974
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3050
2975
|
});
|
|
3051
2976
|
useControlPropsValidator({
|
|
3052
2977
|
isInitialMount: isInitialMountRef.current,
|
|
3053
|
-
props,
|
|
3054
|
-
state
|
|
2978
|
+
props: props,
|
|
2979
|
+
state: state
|
|
3055
2980
|
});
|
|
3056
2981
|
// Focus the input on first render if required.
|
|
3057
|
-
react.useEffect(()
|
|
3058
|
-
|
|
2982
|
+
react.useEffect(function () {
|
|
2983
|
+
var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
|
|
3059
2984
|
if (focusOnOpen && inputRef.current) {
|
|
3060
2985
|
inputRef.current.focus();
|
|
3061
2986
|
}
|
|
3062
2987
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3063
2988
|
}, []);
|
|
3064
|
-
react.useEffect(()
|
|
2989
|
+
react.useEffect(function () {
|
|
3065
2990
|
if (isInitialMountRef.current) {
|
|
3066
2991
|
return;
|
|
3067
2992
|
}
|
|
3068
2993
|
previousResultCountRef.current = items.length;
|
|
3069
2994
|
});
|
|
3070
2995
|
// Add mouse/touch events to document.
|
|
3071
|
-
|
|
2996
|
+
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
|
|
3072
2997
|
dispatch({
|
|
3073
2998
|
type: InputBlur,
|
|
3074
2999
|
selectItem: false
|
|
3075
3000
|
});
|
|
3076
3001
|
});
|
|
3077
|
-
|
|
3002
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
|
|
3078
3003
|
// Make initial ref false.
|
|
3079
|
-
react.useEffect(()
|
|
3004
|
+
react.useEffect(function () {
|
|
3080
3005
|
isInitialMountRef.current = false;
|
|
3081
|
-
return ()
|
|
3006
|
+
return function () {
|
|
3082
3007
|
isInitialMountRef.current = true;
|
|
3083
3008
|
};
|
|
3084
3009
|
}, []);
|
|
3085
3010
|
// Reset itemRefs on close.
|
|
3086
|
-
react.useEffect(()
|
|
3011
|
+
react.useEffect(function () {
|
|
3087
3012
|
if (!isOpen) {
|
|
3088
3013
|
itemRefs.current = {};
|
|
3089
3014
|
} else if (document.activeElement !== inputRef.current) {
|
|
3090
|
-
|
|
3015
|
+
var _inputRef$current;
|
|
3016
|
+
inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
3091
3017
|
}
|
|
3092
3018
|
}, [isOpen]);
|
|
3093
3019
|
|
|
3094
3020
|
/* Event handler functions */
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
event
|
|
3098
|
-
dispatch({
|
|
3099
|
-
type: InputKeyDownArrowDown,
|
|
3100
|
-
altKey: event.altKey,
|
|
3101
|
-
getItemNodeFromIndex
|
|
3102
|
-
});
|
|
3103
|
-
},
|
|
3104
|
-
ArrowUp(event) {
|
|
3105
|
-
event.preventDefault();
|
|
3106
|
-
dispatch({
|
|
3107
|
-
type: InputKeyDownArrowUp,
|
|
3108
|
-
altKey: event.altKey,
|
|
3109
|
-
getItemNodeFromIndex
|
|
3110
|
-
});
|
|
3111
|
-
},
|
|
3112
|
-
Home(event) {
|
|
3113
|
-
if (!latest.current.state.isOpen) {
|
|
3114
|
-
return;
|
|
3115
|
-
}
|
|
3116
|
-
event.preventDefault();
|
|
3117
|
-
dispatch({
|
|
3118
|
-
type: InputKeyDownHome,
|
|
3119
|
-
getItemNodeFromIndex
|
|
3120
|
-
});
|
|
3121
|
-
},
|
|
3122
|
-
End(event) {
|
|
3123
|
-
if (!latest.current.state.isOpen) {
|
|
3124
|
-
return;
|
|
3125
|
-
}
|
|
3126
|
-
event.preventDefault();
|
|
3127
|
-
dispatch({
|
|
3128
|
-
type: InputKeyDownEnd,
|
|
3129
|
-
getItemNodeFromIndex
|
|
3130
|
-
});
|
|
3131
|
-
},
|
|
3132
|
-
Escape(event) {
|
|
3133
|
-
const latestState = latest.current.state;
|
|
3134
|
-
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
3021
|
+
var inputKeyDownHandlers = react.useMemo(function () {
|
|
3022
|
+
return {
|
|
3023
|
+
ArrowDown: function ArrowDown(event) {
|
|
3135
3024
|
event.preventDefault();
|
|
3136
3025
|
dispatch({
|
|
3137
|
-
type:
|
|
3026
|
+
type: InputKeyDownArrowDown,
|
|
3027
|
+
altKey: event.altKey,
|
|
3028
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3138
3029
|
});
|
|
3139
|
-
}
|
|
3140
|
-
|
|
3141
|
-
Enter(event) {
|
|
3142
|
-
const latestState = latest.current.state;
|
|
3143
|
-
// if closed or no highlighted index, do nothing.
|
|
3144
|
-
if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3145
|
-
) {
|
|
3146
|
-
return;
|
|
3147
|
-
}
|
|
3148
|
-
event.preventDefault();
|
|
3149
|
-
dispatch({
|
|
3150
|
-
type: InputKeyDownEnter,
|
|
3151
|
-
getItemNodeFromIndex
|
|
3152
|
-
});
|
|
3153
|
-
},
|
|
3154
|
-
PageUp(event) {
|
|
3155
|
-
if (latest.current.state.isOpen) {
|
|
3030
|
+
},
|
|
3031
|
+
ArrowUp: function ArrowUp(event) {
|
|
3156
3032
|
event.preventDefault();
|
|
3157
3033
|
dispatch({
|
|
3158
|
-
type:
|
|
3159
|
-
|
|
3034
|
+
type: InputKeyDownArrowUp,
|
|
3035
|
+
altKey: event.altKey,
|
|
3036
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3160
3037
|
});
|
|
3161
|
-
}
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3038
|
+
},
|
|
3039
|
+
Home: function Home(event) {
|
|
3040
|
+
if (!latest.current.state.isOpen) {
|
|
3041
|
+
return;
|
|
3042
|
+
}
|
|
3043
|
+
event.preventDefault();
|
|
3044
|
+
dispatch({
|
|
3045
|
+
type: InputKeyDownHome,
|
|
3046
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3047
|
+
});
|
|
3048
|
+
},
|
|
3049
|
+
End: function End(event) {
|
|
3050
|
+
if (!latest.current.state.isOpen) {
|
|
3051
|
+
return;
|
|
3052
|
+
}
|
|
3165
3053
|
event.preventDefault();
|
|
3166
3054
|
dispatch({
|
|
3167
|
-
type:
|
|
3168
|
-
getItemNodeFromIndex
|
|
3055
|
+
type: InputKeyDownEnd,
|
|
3056
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3169
3057
|
});
|
|
3058
|
+
},
|
|
3059
|
+
Escape: function Escape(event) {
|
|
3060
|
+
var latestState = latest.current.state;
|
|
3061
|
+
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
3062
|
+
event.preventDefault();
|
|
3063
|
+
dispatch({
|
|
3064
|
+
type: InputKeyDownEscape
|
|
3065
|
+
});
|
|
3066
|
+
}
|
|
3067
|
+
},
|
|
3068
|
+
Enter: function Enter(event) {
|
|
3069
|
+
var latestState = latest.current.state;
|
|
3070
|
+
// if closed or no highlighted index, do nothing.
|
|
3071
|
+
if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3072
|
+
) {
|
|
3073
|
+
return;
|
|
3074
|
+
}
|
|
3075
|
+
event.preventDefault();
|
|
3076
|
+
dispatch({
|
|
3077
|
+
type: InputKeyDownEnter,
|
|
3078
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3079
|
+
});
|
|
3080
|
+
},
|
|
3081
|
+
PageUp: function PageUp(event) {
|
|
3082
|
+
if (latest.current.state.isOpen) {
|
|
3083
|
+
event.preventDefault();
|
|
3084
|
+
dispatch({
|
|
3085
|
+
type: InputKeyDownPageUp,
|
|
3086
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3087
|
+
});
|
|
3088
|
+
}
|
|
3089
|
+
},
|
|
3090
|
+
PageDown: function PageDown(event) {
|
|
3091
|
+
if (latest.current.state.isOpen) {
|
|
3092
|
+
event.preventDefault();
|
|
3093
|
+
dispatch({
|
|
3094
|
+
type: InputKeyDownPageDown,
|
|
3095
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3096
|
+
});
|
|
3097
|
+
}
|
|
3170
3098
|
}
|
|
3171
|
-
}
|
|
3172
|
-
}
|
|
3099
|
+
};
|
|
3100
|
+
}, [dispatch, latest, getItemNodeFromIndex]);
|
|
3173
3101
|
|
|
3174
3102
|
// Getter props.
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3103
|
+
var getLabelProps = react.useCallback(function (labelProps) {
|
|
3104
|
+
return _extends__default["default"]({
|
|
3105
|
+
id: elementIds.labelId,
|
|
3106
|
+
htmlFor: elementIds.inputId
|
|
3107
|
+
}, labelProps);
|
|
3108
|
+
}, [elementIds]);
|
|
3109
|
+
var getMenuProps = react.useCallback(function (_temp, _temp2) {
|
|
3110
|
+
var _extends2;
|
|
3111
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
3112
|
+
onMouseLeave = _ref.onMouseLeave,
|
|
3113
|
+
_ref$refKey = _ref.refKey,
|
|
3114
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
|
3115
|
+
ref = _ref.ref,
|
|
3116
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
|
|
3117
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
3118
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
3119
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
3190
3120
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
3191
|
-
return {
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
|
|
3199
|
-
dispatch({
|
|
3200
|
-
type: MenuMouseLeave
|
|
3201
|
-
});
|
|
3202
|
-
}),
|
|
3203
|
-
...rest
|
|
3204
|
-
};
|
|
3121
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
|
|
3122
|
+
menuRef.current = menuNode;
|
|
3123
|
+
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
|
|
3124
|
+
dispatch({
|
|
3125
|
+
type: MenuMouseLeave
|
|
3126
|
+
});
|
|
3127
|
+
}), _extends2), rest);
|
|
3205
3128
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3129
|
+
var getItemProps = react.useCallback(function (_temp3) {
|
|
3130
|
+
var _extends3, _ref4;
|
|
3131
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
3132
|
+
item = _ref3.item,
|
|
3133
|
+
index = _ref3.index,
|
|
3134
|
+
_ref3$refKey = _ref3.refKey,
|
|
3135
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
3136
|
+
ref = _ref3.ref,
|
|
3137
|
+
onMouseMove = _ref3.onMouseMove,
|
|
3138
|
+
onMouseDown = _ref3.onMouseDown,
|
|
3139
|
+
onClick = _ref3.onClick;
|
|
3140
|
+
_ref3.onPress;
|
|
3141
|
+
var disabled = _ref3.disabled,
|
|
3142
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$1);
|
|
3143
|
+
var _latest$current = latest.current,
|
|
3144
|
+
latestProps = _latest$current.props,
|
|
3145
|
+
latestState = _latest$current.state;
|
|
3146
|
+
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
3224
3147
|
if (itemIndex < 0) {
|
|
3225
3148
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
3226
3149
|
}
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3150
|
+
var onSelectKey = 'onClick';
|
|
3151
|
+
var customClickHandler = onClick;
|
|
3152
|
+
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
3230
3153
|
if (index === latestState.highlightedIndex) {
|
|
3231
3154
|
return;
|
|
3232
3155
|
}
|
|
3233
3156
|
shouldScrollRef.current = false;
|
|
3234
3157
|
dispatch({
|
|
3235
3158
|
type: ItemMouseMove,
|
|
3236
|
-
index,
|
|
3237
|
-
disabled
|
|
3159
|
+
index: index,
|
|
3160
|
+
disabled: disabled
|
|
3238
3161
|
});
|
|
3239
3162
|
};
|
|
3240
|
-
|
|
3163
|
+
var itemHandleClick = function itemHandleClick() {
|
|
3241
3164
|
dispatch({
|
|
3242
3165
|
type: ItemClick,
|
|
3243
|
-
index
|
|
3166
|
+
index: index
|
|
3244
3167
|
});
|
|
3245
3168
|
};
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
[refKey]: handleRefs(ref, itemNode => {
|
|
3249
|
-
if (itemNode) {
|
|
3250
|
-
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3251
|
-
}
|
|
3252
|
-
}),
|
|
3253
|
-
disabled,
|
|
3254
|
-
role: 'option',
|
|
3255
|
-
'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
|
|
3256
|
-
id: elementIds.getItemId(itemIndex),
|
|
3257
|
-
...(!disabled && {
|
|
3258
|
-
[onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
|
|
3259
|
-
}),
|
|
3260
|
-
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3261
|
-
onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
|
|
3262
|
-
...rest
|
|
3169
|
+
var itemHandleMouseDown = function itemHandleMouseDown(e) {
|
|
3170
|
+
return e.preventDefault();
|
|
3263
3171
|
};
|
|
3172
|
+
return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
|
|
3173
|
+
if (itemNode) {
|
|
3174
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3175
|
+
}
|
|
3176
|
+
}), _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), {
|
|
3177
|
+
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3178
|
+
onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
|
|
3179
|
+
}, rest);
|
|
3264
3180
|
}, [dispatch, latest, shouldScrollRef, elementIds]);
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3181
|
+
var getToggleButtonProps = react.useCallback(function (_temp4) {
|
|
3182
|
+
var _extends4;
|
|
3183
|
+
var _ref5 = _temp4 === void 0 ? {} : _temp4,
|
|
3184
|
+
onClick = _ref5.onClick;
|
|
3185
|
+
_ref5.onPress;
|
|
3186
|
+
var _ref5$refKey = _ref5.refKey,
|
|
3187
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
3188
|
+
ref = _ref5.ref,
|
|
3189
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded3);
|
|
3190
|
+
var latestState = latest.current.state;
|
|
3191
|
+
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
3275
3192
|
dispatch({
|
|
3276
3193
|
type: ToggleButtonClick
|
|
3277
3194
|
});
|
|
3278
3195
|
};
|
|
3279
|
-
return {
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
'aria-expanded': latestState.isOpen,
|
|
3285
|
-
id: elementIds.toggleButtonId,
|
|
3286
|
-
tabIndex: -1,
|
|
3287
|
-
...(!rest.disabled && {
|
|
3288
|
-
...({
|
|
3289
|
-
onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
|
|
3290
|
-
})
|
|
3291
|
-
}),
|
|
3292
|
-
...rest
|
|
3293
|
-
};
|
|
3196
|
+
return _extends__default["default"]((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
|
|
3197
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
3198
|
+
}), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends__default["default"]({}, {
|
|
3199
|
+
onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
|
|
3200
|
+
}), rest);
|
|
3294
3201
|
}, [dispatch, latest, elementIds]);
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3202
|
+
var getInputProps = react.useCallback(function (_temp5, _temp6) {
|
|
3203
|
+
var _extends5;
|
|
3204
|
+
var _ref6 = _temp5 === void 0 ? {} : _temp5,
|
|
3205
|
+
onKeyDown = _ref6.onKeyDown,
|
|
3206
|
+
onChange = _ref6.onChange,
|
|
3207
|
+
onInput = _ref6.onInput,
|
|
3208
|
+
onFocus = _ref6.onFocus,
|
|
3209
|
+
onBlur = _ref6.onBlur;
|
|
3210
|
+
_ref6.onChangeText;
|
|
3211
|
+
var _ref6$refKey = _ref6.refKey,
|
|
3212
|
+
refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
|
|
3213
|
+
ref = _ref6.ref,
|
|
3214
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref6, _excluded4);
|
|
3215
|
+
var _ref7 = _temp6 === void 0 ? {} : _temp6,
|
|
3216
|
+
_ref7$suppressRefErro = _ref7.suppressRefError,
|
|
3217
|
+
suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
|
|
3310
3218
|
setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3219
|
+
var latestState = latest.current.state;
|
|
3220
|
+
var inputHandleKeyDown = function inputHandleKeyDown(event) {
|
|
3221
|
+
var key = normalizeArrowKey(event);
|
|
3314
3222
|
if (key && inputKeyDownHandlers[key]) {
|
|
3315
3223
|
inputKeyDownHandlers[key](event);
|
|
3316
3224
|
}
|
|
3317
3225
|
};
|
|
3318
|
-
|
|
3226
|
+
var inputHandleChange = function inputHandleChange(event) {
|
|
3319
3227
|
dispatch({
|
|
3320
3228
|
type: InputChange,
|
|
3321
3229
|
inputValue: event.target.value
|
|
3322
3230
|
});
|
|
3323
3231
|
};
|
|
3324
|
-
|
|
3232
|
+
var inputHandleBlur = function inputHandleBlur() {
|
|
3325
3233
|
/* istanbul ignore else */
|
|
3326
3234
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
3327
3235
|
dispatch({
|
|
@@ -3330,7 +3238,7 @@ function useCombobox(userProps) {
|
|
|
3330
3238
|
});
|
|
3331
3239
|
}
|
|
3332
3240
|
};
|
|
3333
|
-
|
|
3241
|
+
var inputHandleFocus = function inputHandleFocus() {
|
|
3334
3242
|
if (!latestState.isOpen) {
|
|
3335
3243
|
dispatch({
|
|
3336
3244
|
type: InputFocus
|
|
@@ -3339,99 +3247,80 @@ function useCombobox(userProps) {
|
|
|
3339
3247
|
};
|
|
3340
3248
|
|
|
3341
3249
|
/* istanbul ignore next (preact) */
|
|
3342
|
-
|
|
3343
|
-
|
|
3250
|
+
var onChangeKey = 'onChange';
|
|
3251
|
+
var eventHandlers = {};
|
|
3344
3252
|
if (!rest.disabled) {
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
|
|
3348
|
-
onBlur: callAllEventHandlers(onBlur, inputHandleBlur),
|
|
3349
|
-
onFocus: callAllEventHandlers(onFocus, inputHandleFocus)
|
|
3350
|
-
};
|
|
3253
|
+
var _eventHandlers;
|
|
3254
|
+
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onFocus = callAllEventHandlers(onFocus, inputHandleFocus), _eventHandlers);
|
|
3351
3255
|
}
|
|
3352
|
-
return {
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
}),
|
|
3356
|
-
'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
|
|
3357
|
-
'aria-autocomplete': 'list',
|
|
3358
|
-
'aria-controls': elementIds.menuId,
|
|
3359
|
-
'aria-expanded': latestState.isOpen,
|
|
3360
|
-
'aria-labelledby': elementIds.labelId,
|
|
3361
|
-
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
|
|
3362
|
-
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
3363
|
-
autoComplete: 'off',
|
|
3364
|
-
id: elementIds.inputId,
|
|
3365
|
-
role: 'combobox',
|
|
3366
|
-
value: latestState.inputValue,
|
|
3367
|
-
...eventHandlers,
|
|
3368
|
-
...rest
|
|
3369
|
-
};
|
|
3256
|
+
return _extends__default["default"]((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
|
|
3257
|
+
inputRef.current = inputNode;
|
|
3258
|
+
}), _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);
|
|
3370
3259
|
}, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
|
|
3371
3260
|
|
|
3372
3261
|
// returns
|
|
3373
|
-
|
|
3262
|
+
var toggleMenu = react.useCallback(function () {
|
|
3374
3263
|
dispatch({
|
|
3375
3264
|
type: FunctionToggleMenu
|
|
3376
3265
|
});
|
|
3377
3266
|
}, [dispatch]);
|
|
3378
|
-
|
|
3267
|
+
var closeMenu = react.useCallback(function () {
|
|
3379
3268
|
dispatch({
|
|
3380
3269
|
type: FunctionCloseMenu
|
|
3381
3270
|
});
|
|
3382
3271
|
}, [dispatch]);
|
|
3383
|
-
|
|
3272
|
+
var openMenu = react.useCallback(function () {
|
|
3384
3273
|
dispatch({
|
|
3385
3274
|
type: FunctionOpenMenu
|
|
3386
3275
|
});
|
|
3387
3276
|
}, [dispatch]);
|
|
3388
|
-
|
|
3277
|
+
var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
|
|
3389
3278
|
dispatch({
|
|
3390
3279
|
type: FunctionSetHighlightedIndex,
|
|
3391
3280
|
highlightedIndex: newHighlightedIndex
|
|
3392
3281
|
});
|
|
3393
3282
|
}, [dispatch]);
|
|
3394
|
-
|
|
3283
|
+
var selectItem = react.useCallback(function (newSelectedItem) {
|
|
3395
3284
|
dispatch({
|
|
3396
3285
|
type: FunctionSelectItem,
|
|
3397
3286
|
selectedItem: newSelectedItem
|
|
3398
3287
|
});
|
|
3399
3288
|
}, [dispatch]);
|
|
3400
|
-
|
|
3289
|
+
var setInputValue = react.useCallback(function (newInputValue) {
|
|
3401
3290
|
dispatch({
|
|
3402
3291
|
type: FunctionSetInputValue,
|
|
3403
3292
|
inputValue: newInputValue
|
|
3404
3293
|
});
|
|
3405
3294
|
}, [dispatch]);
|
|
3406
|
-
|
|
3295
|
+
var reset = react.useCallback(function () {
|
|
3407
3296
|
dispatch({
|
|
3408
3297
|
type: FunctionReset$1
|
|
3409
3298
|
});
|
|
3410
3299
|
}, [dispatch]);
|
|
3411
3300
|
return {
|
|
3412
3301
|
// prop getters.
|
|
3413
|
-
getItemProps,
|
|
3414
|
-
getLabelProps,
|
|
3415
|
-
getMenuProps,
|
|
3416
|
-
getInputProps,
|
|
3417
|
-
getToggleButtonProps,
|
|
3302
|
+
getItemProps: getItemProps,
|
|
3303
|
+
getLabelProps: getLabelProps,
|
|
3304
|
+
getMenuProps: getMenuProps,
|
|
3305
|
+
getInputProps: getInputProps,
|
|
3306
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
3418
3307
|
// actions.
|
|
3419
|
-
toggleMenu,
|
|
3420
|
-
openMenu,
|
|
3421
|
-
closeMenu,
|
|
3422
|
-
setHighlightedIndex,
|
|
3423
|
-
setInputValue,
|
|
3424
|
-
selectItem,
|
|
3425
|
-
reset,
|
|
3308
|
+
toggleMenu: toggleMenu,
|
|
3309
|
+
openMenu: openMenu,
|
|
3310
|
+
closeMenu: closeMenu,
|
|
3311
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
3312
|
+
setInputValue: setInputValue,
|
|
3313
|
+
selectItem: selectItem,
|
|
3314
|
+
reset: reset,
|
|
3426
3315
|
// state.
|
|
3427
|
-
highlightedIndex,
|
|
3428
|
-
isOpen,
|
|
3429
|
-
selectedItem,
|
|
3430
|
-
inputValue
|
|
3316
|
+
highlightedIndex: highlightedIndex,
|
|
3317
|
+
isOpen: isOpen,
|
|
3318
|
+
selectedItem: selectedItem,
|
|
3319
|
+
inputValue: inputValue
|
|
3431
3320
|
};
|
|
3432
3321
|
}
|
|
3433
3322
|
|
|
3434
|
-
|
|
3323
|
+
var defaultStateValues = {
|
|
3435
3324
|
activeIndex: -1,
|
|
3436
3325
|
selectedItems: []
|
|
3437
3326
|
};
|
|
@@ -3469,11 +3358,11 @@ function getDefaultValue(props, propKey) {
|
|
|
3469
3358
|
* @returns {Object} The initial state.
|
|
3470
3359
|
*/
|
|
3471
3360
|
function getInitialState(props) {
|
|
3472
|
-
|
|
3473
|
-
|
|
3361
|
+
var activeIndex = getInitialValue(props, 'activeIndex');
|
|
3362
|
+
var selectedItems = getInitialValue(props, 'selectedItems');
|
|
3474
3363
|
return {
|
|
3475
|
-
activeIndex,
|
|
3476
|
-
selectedItems
|
|
3364
|
+
activeIndex: activeIndex,
|
|
3365
|
+
selectedItems: selectedItems
|
|
3477
3366
|
};
|
|
3478
3367
|
}
|
|
3479
3368
|
|
|
@@ -3490,7 +3379,7 @@ function isKeyDownOperationPermitted(event) {
|
|
|
3490
3379
|
if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
|
|
3491
3380
|
return false;
|
|
3492
3381
|
}
|
|
3493
|
-
|
|
3382
|
+
var element = event.target;
|
|
3494
3383
|
if (element instanceof HTMLInputElement &&
|
|
3495
3384
|
// if element is a text input
|
|
3496
3385
|
element.value !== '' && (
|
|
@@ -3509,13 +3398,11 @@ function isKeyDownOperationPermitted(event) {
|
|
|
3509
3398
|
* @returns {string} The a11y message.
|
|
3510
3399
|
*/
|
|
3511
3400
|
function getA11yRemovalMessage(selectionParameters) {
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
} = selectionParameters;
|
|
3516
|
-
return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
|
|
3401
|
+
var removedSelectedItem = selectionParameters.removedSelectedItem,
|
|
3402
|
+
itemToStringLocal = selectionParameters.itemToString;
|
|
3403
|
+
return itemToStringLocal(removedSelectedItem) + " has been removed.";
|
|
3517
3404
|
}
|
|
3518
|
-
|
|
3405
|
+
var propTypes = {
|
|
3519
3406
|
selectedItems: PropTypes__default["default"].array,
|
|
3520
3407
|
initialSelectedItems: PropTypes__default["default"].array,
|
|
3521
3408
|
defaultSelectedItems: PropTypes__default["default"].array,
|
|
@@ -3539,37 +3426,37 @@ const propTypes = {
|
|
|
3539
3426
|
})
|
|
3540
3427
|
})
|
|
3541
3428
|
};
|
|
3542
|
-
|
|
3429
|
+
var defaultProps = {
|
|
3543
3430
|
itemToString: defaultProps$3.itemToString,
|
|
3544
3431
|
stateReducer: defaultProps$3.stateReducer,
|
|
3545
3432
|
environment: defaultProps$3.environment,
|
|
3546
|
-
getA11yRemovalMessage,
|
|
3433
|
+
getA11yRemovalMessage: getA11yRemovalMessage,
|
|
3547
3434
|
keyNavigationNext: 'ArrowRight',
|
|
3548
3435
|
keyNavigationPrevious: 'ArrowLeft'
|
|
3549
3436
|
};
|
|
3550
3437
|
|
|
3551
3438
|
// eslint-disable-next-line import/no-mutable-exports
|
|
3552
|
-
|
|
3439
|
+
var validatePropTypes = noop;
|
|
3553
3440
|
/* istanbul ignore next */
|
|
3554
3441
|
if (process.env.NODE_ENV !== 'production') {
|
|
3555
|
-
validatePropTypes = (options, caller)
|
|
3442
|
+
validatePropTypes = function validatePropTypes(options, caller) {
|
|
3556
3443
|
PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
|
|
3557
3444
|
};
|
|
3558
3445
|
}
|
|
3559
3446
|
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3447
|
+
var SelectedItemClick = process.env.NODE_ENV !== "production" ? '__selected_item_click__' : 0;
|
|
3448
|
+
var SelectedItemKeyDownDelete = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_delete__' : 1;
|
|
3449
|
+
var SelectedItemKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_backspace__' : 2;
|
|
3450
|
+
var SelectedItemKeyDownNavigationNext = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_navigation_next__' : 3;
|
|
3451
|
+
var SelectedItemKeyDownNavigationPrevious = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_navigation_previous__' : 4;
|
|
3452
|
+
var DropdownKeyDownNavigationPrevious = process.env.NODE_ENV !== "production" ? '__dropdown_keydown_navigation_previous__' : 5;
|
|
3453
|
+
var DropdownKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__dropdown_keydown_backspace__' : 6;
|
|
3454
|
+
var DropdownClick = process.env.NODE_ENV !== "production" ? '__dropdown_click__' : 7;
|
|
3455
|
+
var FunctionAddSelectedItem = process.env.NODE_ENV !== "production" ? '__function_add_selected_item__' : 8;
|
|
3456
|
+
var FunctionRemoveSelectedItem = process.env.NODE_ENV !== "production" ? '__function_remove_selected_item__' : 9;
|
|
3457
|
+
var FunctionSetSelectedItems = process.env.NODE_ENV !== "production" ? '__function_set_selected_items__' : 10;
|
|
3458
|
+
var FunctionSetActiveIndex = process.env.NODE_ENV !== "production" ? '__function_set_active_index__' : 11;
|
|
3459
|
+
var FunctionReset = process.env.NODE_ENV !== "production" ? '__function_reset__' : 12;
|
|
3573
3460
|
|
|
3574
3461
|
var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
3575
3462
|
__proto__: null,
|
|
@@ -3590,17 +3477,13 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
|
3590
3477
|
|
|
3591
3478
|
/* eslint-disable complexity */
|
|
3592
3479
|
function downshiftMultipleSelectionReducer(state, action) {
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
activeIndex,
|
|
3601
|
-
selectedItems
|
|
3602
|
-
} = state;
|
|
3603
|
-
let changes;
|
|
3480
|
+
var type = action.type,
|
|
3481
|
+
index = action.index,
|
|
3482
|
+
props = action.props,
|
|
3483
|
+
selectedItem = action.selectedItem;
|
|
3484
|
+
var activeIndex = state.activeIndex,
|
|
3485
|
+
selectedItems = state.selectedItems;
|
|
3486
|
+
var changes;
|
|
3604
3487
|
switch (type) {
|
|
3605
3488
|
case SelectedItemClick:
|
|
3606
3489
|
changes = {
|
|
@@ -3623,18 +3506,17 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3623
3506
|
if (activeIndex < 0) {
|
|
3624
3507
|
break;
|
|
3625
3508
|
}
|
|
3626
|
-
|
|
3509
|
+
var newActiveIndex = activeIndex;
|
|
3627
3510
|
if (selectedItems.length === 1) {
|
|
3628
3511
|
newActiveIndex = -1;
|
|
3629
3512
|
} else if (activeIndex === selectedItems.length - 1) {
|
|
3630
3513
|
newActiveIndex = selectedItems.length - 2;
|
|
3631
3514
|
}
|
|
3632
|
-
changes = {
|
|
3633
|
-
selectedItems: [
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
};
|
|
3515
|
+
changes = _extends__default["default"]({
|
|
3516
|
+
selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
|
|
3517
|
+
}, {
|
|
3518
|
+
activeIndex: newActiveIndex
|
|
3519
|
+
});
|
|
3638
3520
|
break;
|
|
3639
3521
|
}
|
|
3640
3522
|
case DropdownKeyDownNavigationPrevious:
|
|
@@ -3649,7 +3531,7 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3649
3531
|
break;
|
|
3650
3532
|
case FunctionAddSelectedItem:
|
|
3651
3533
|
changes = {
|
|
3652
|
-
selectedItems: [
|
|
3534
|
+
selectedItems: [].concat(selectedItems, [selectedItem])
|
|
3653
3535
|
};
|
|
3654
3536
|
break;
|
|
3655
3537
|
case DropdownClick:
|
|
@@ -3659,27 +3541,25 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3659
3541
|
break;
|
|
3660
3542
|
case FunctionRemoveSelectedItem:
|
|
3661
3543
|
{
|
|
3662
|
-
|
|
3663
|
-
|
|
3544
|
+
var _newActiveIndex = activeIndex;
|
|
3545
|
+
var selectedItemIndex = selectedItems.indexOf(selectedItem);
|
|
3664
3546
|
if (selectedItemIndex < 0) {
|
|
3665
3547
|
break;
|
|
3666
3548
|
}
|
|
3667
3549
|
if (selectedItems.length === 1) {
|
|
3668
|
-
|
|
3550
|
+
_newActiveIndex = -1;
|
|
3669
3551
|
} else if (selectedItemIndex === selectedItems.length - 1) {
|
|
3670
|
-
|
|
3552
|
+
_newActiveIndex = selectedItems.length - 2;
|
|
3671
3553
|
}
|
|
3672
3554
|
changes = {
|
|
3673
|
-
selectedItems: [
|
|
3674
|
-
activeIndex:
|
|
3555
|
+
selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)),
|
|
3556
|
+
activeIndex: _newActiveIndex
|
|
3675
3557
|
};
|
|
3676
3558
|
break;
|
|
3677
3559
|
}
|
|
3678
3560
|
case FunctionSetSelectedItems:
|
|
3679
3561
|
{
|
|
3680
|
-
|
|
3681
|
-
selectedItems: newSelectedItems
|
|
3682
|
-
} = action;
|
|
3562
|
+
var newSelectedItems = action.selectedItems;
|
|
3683
3563
|
changes = {
|
|
3684
3564
|
selectedItems: newSelectedItems
|
|
3685
3565
|
};
|
|
@@ -3687,11 +3567,9 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3687
3567
|
}
|
|
3688
3568
|
case FunctionSetActiveIndex:
|
|
3689
3569
|
{
|
|
3690
|
-
|
|
3691
|
-
activeIndex: newActiveIndex
|
|
3692
|
-
} = action;
|
|
3570
|
+
var _newActiveIndex2 = action.activeIndex;
|
|
3693
3571
|
changes = {
|
|
3694
|
-
activeIndex:
|
|
3572
|
+
activeIndex: _newActiveIndex2
|
|
3695
3573
|
};
|
|
3696
3574
|
break;
|
|
3697
3575
|
}
|
|
@@ -3704,12 +3582,11 @@ function downshiftMultipleSelectionReducer(state, action) {
|
|
|
3704
3582
|
default:
|
|
3705
3583
|
throw new Error('Reducer called without proper action type.');
|
|
3706
3584
|
}
|
|
3707
|
-
return {
|
|
3708
|
-
...state,
|
|
3709
|
-
...changes
|
|
3710
|
-
};
|
|
3585
|
+
return _extends__default["default"]({}, state, changes);
|
|
3711
3586
|
}
|
|
3712
3587
|
|
|
3588
|
+
var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
|
|
3589
|
+
_excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
|
|
3713
3590
|
useMultipleSelection.stateChangeTypes = stateChangeTypes;
|
|
3714
3591
|
function useMultipleSelection(userProps) {
|
|
3715
3592
|
if (userProps === void 0) {
|
|
@@ -3717,49 +3594,46 @@ function useMultipleSelection(userProps) {
|
|
|
3717
3594
|
}
|
|
3718
3595
|
validatePropTypes(userProps, useMultipleSelection);
|
|
3719
3596
|
// Props defaults and destructuring.
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
itemToString,
|
|
3727
|
-
environment,
|
|
3728
|
-
keyNavigationNext,
|
|
3729
|
-
keyNavigationPrevious
|
|
3730
|
-
} = props;
|
|
3597
|
+
var props = _extends__default["default"]({}, defaultProps, userProps);
|
|
3598
|
+
var getA11yRemovalMessage = props.getA11yRemovalMessage,
|
|
3599
|
+
itemToString = props.itemToString,
|
|
3600
|
+
environment = props.environment,
|
|
3601
|
+
keyNavigationNext = props.keyNavigationNext,
|
|
3602
|
+
keyNavigationPrevious = props.keyNavigationPrevious;
|
|
3731
3603
|
|
|
3732
3604
|
// Reducer init.
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3605
|
+
var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
|
|
3606
|
+
state = _useControlledReducer[0],
|
|
3607
|
+
dispatch = _useControlledReducer[1];
|
|
3608
|
+
var activeIndex = state.activeIndex,
|
|
3609
|
+
selectedItems = state.selectedItems;
|
|
3738
3610
|
|
|
3739
3611
|
// Refs.
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3612
|
+
var isInitialMountRef = react.useRef(true);
|
|
3613
|
+
var dropdownRef = react.useRef(null);
|
|
3614
|
+
var previousSelectedItemsRef = react.useRef(selectedItems);
|
|
3615
|
+
var selectedItemRefs = react.useRef();
|
|
3744
3616
|
selectedItemRefs.current = [];
|
|
3745
|
-
|
|
3746
|
-
state,
|
|
3747
|
-
props
|
|
3617
|
+
var latest = useLatestRef({
|
|
3618
|
+
state: state,
|
|
3619
|
+
props: props
|
|
3748
3620
|
});
|
|
3749
3621
|
|
|
3750
3622
|
// Effects.
|
|
3751
3623
|
/* Sets a11y status message on changes in selectedItem. */
|
|
3752
|
-
react.useEffect(()
|
|
3624
|
+
react.useEffect(function () {
|
|
3753
3625
|
if (isInitialMountRef.current) {
|
|
3754
3626
|
return;
|
|
3755
3627
|
}
|
|
3756
3628
|
if (selectedItems.length < previousSelectedItemsRef.current.length) {
|
|
3757
|
-
|
|
3629
|
+
var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
|
|
3630
|
+
return selectedItems.indexOf(item) < 0;
|
|
3631
|
+
});
|
|
3758
3632
|
setStatus(getA11yRemovalMessage({
|
|
3759
|
-
itemToString,
|
|
3633
|
+
itemToString: itemToString,
|
|
3760
3634
|
resultCount: selectedItems.length,
|
|
3761
|
-
removedSelectedItem,
|
|
3762
|
-
activeIndex,
|
|
3635
|
+
removedSelectedItem: removedSelectedItem,
|
|
3636
|
+
activeIndex: activeIndex,
|
|
3763
3637
|
activeSelectedItem: selectedItems[activeIndex]
|
|
3764
3638
|
}), environment.document);
|
|
3765
3639
|
}
|
|
@@ -3768,7 +3642,7 @@ function useMultipleSelection(userProps) {
|
|
|
3768
3642
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3769
3643
|
}, [selectedItems.length]);
|
|
3770
3644
|
// Sets focus on active item.
|
|
3771
|
-
react.useEffect(()
|
|
3645
|
+
react.useEffect(function () {
|
|
3772
3646
|
if (isInitialMountRef.current) {
|
|
3773
3647
|
return;
|
|
3774
3648
|
}
|
|
@@ -3780,178 +3654,167 @@ function useMultipleSelection(userProps) {
|
|
|
3780
3654
|
}, [activeIndex]);
|
|
3781
3655
|
useControlPropsValidator({
|
|
3782
3656
|
isInitialMount: isInitialMountRef.current,
|
|
3783
|
-
props,
|
|
3784
|
-
state
|
|
3657
|
+
props: props,
|
|
3658
|
+
state: state
|
|
3785
3659
|
});
|
|
3786
|
-
|
|
3660
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
|
|
3787
3661
|
// Make initial ref false.
|
|
3788
|
-
react.useEffect(()
|
|
3662
|
+
react.useEffect(function () {
|
|
3789
3663
|
isInitialMountRef.current = false;
|
|
3790
|
-
return ()
|
|
3664
|
+
return function () {
|
|
3791
3665
|
isInitialMountRef.current = true;
|
|
3792
3666
|
};
|
|
3793
3667
|
}, []);
|
|
3794
3668
|
|
|
3795
3669
|
// Event handler functions.
|
|
3796
|
-
|
|
3797
|
-
|
|
3670
|
+
var selectedItemKeyDownHandlers = react.useMemo(function () {
|
|
3671
|
+
var _ref;
|
|
3672
|
+
return _ref = {}, _ref[keyNavigationPrevious] = function () {
|
|
3798
3673
|
dispatch({
|
|
3799
3674
|
type: SelectedItemKeyDownNavigationPrevious
|
|
3800
3675
|
});
|
|
3801
|
-
},
|
|
3802
|
-
[keyNavigationNext]() {
|
|
3676
|
+
}, _ref[keyNavigationNext] = function () {
|
|
3803
3677
|
dispatch({
|
|
3804
3678
|
type: SelectedItemKeyDownNavigationNext
|
|
3805
3679
|
});
|
|
3806
|
-
},
|
|
3807
|
-
Delete() {
|
|
3680
|
+
}, _ref.Delete = function Delete() {
|
|
3808
3681
|
dispatch({
|
|
3809
3682
|
type: SelectedItemKeyDownDelete
|
|
3810
3683
|
});
|
|
3811
|
-
},
|
|
3812
|
-
Backspace() {
|
|
3684
|
+
}, _ref.Backspace = function Backspace() {
|
|
3813
3685
|
dispatch({
|
|
3814
3686
|
type: SelectedItemKeyDownBackspace
|
|
3815
3687
|
});
|
|
3816
|
-
}
|
|
3817
|
-
}
|
|
3818
|
-
|
|
3819
|
-
|
|
3688
|
+
}, _ref;
|
|
3689
|
+
}, [dispatch, keyNavigationNext, keyNavigationPrevious]);
|
|
3690
|
+
var dropdownKeyDownHandlers = react.useMemo(function () {
|
|
3691
|
+
var _ref2;
|
|
3692
|
+
return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
|
|
3820
3693
|
if (isKeyDownOperationPermitted(event)) {
|
|
3821
3694
|
dispatch({
|
|
3822
3695
|
type: DropdownKeyDownNavigationPrevious
|
|
3823
3696
|
});
|
|
3824
3697
|
}
|
|
3825
|
-
},
|
|
3826
|
-
Backspace(event) {
|
|
3698
|
+
}, _ref2.Backspace = function Backspace(event) {
|
|
3827
3699
|
if (isKeyDownOperationPermitted(event)) {
|
|
3828
3700
|
dispatch({
|
|
3829
3701
|
type: DropdownKeyDownBackspace
|
|
3830
3702
|
});
|
|
3831
3703
|
}
|
|
3832
|
-
}
|
|
3833
|
-
}
|
|
3704
|
+
}, _ref2;
|
|
3705
|
+
}, [dispatch, keyNavigationPrevious]);
|
|
3834
3706
|
|
|
3835
3707
|
// Getter props.
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
3708
|
+
var getSelectedItemProps = react.useCallback(function (_temp) {
|
|
3709
|
+
var _extends2;
|
|
3710
|
+
var _ref3 = _temp === void 0 ? {} : _temp,
|
|
3711
|
+
_ref3$refKey = _ref3.refKey,
|
|
3712
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
3713
|
+
ref = _ref3.ref,
|
|
3714
|
+
onClick = _ref3.onClick,
|
|
3715
|
+
onKeyDown = _ref3.onKeyDown,
|
|
3716
|
+
selectedItem = _ref3.selectedItem,
|
|
3717
|
+
index = _ref3.index,
|
|
3718
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded);
|
|
3719
|
+
var latestState = latest.current.state;
|
|
3720
|
+
var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
3850
3721
|
if (itemIndex < 0) {
|
|
3851
3722
|
throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
|
|
3852
3723
|
}
|
|
3853
|
-
|
|
3724
|
+
var selectedItemHandleClick = function selectedItemHandleClick() {
|
|
3854
3725
|
dispatch({
|
|
3855
3726
|
type: SelectedItemClick,
|
|
3856
|
-
index
|
|
3727
|
+
index: index
|
|
3857
3728
|
});
|
|
3858
3729
|
};
|
|
3859
|
-
|
|
3860
|
-
|
|
3730
|
+
var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) {
|
|
3731
|
+
var key = normalizeArrowKey(event);
|
|
3861
3732
|
if (key && selectedItemKeyDownHandlers[key]) {
|
|
3862
3733
|
selectedItemKeyDownHandlers[key](event);
|
|
3863
3734
|
}
|
|
3864
3735
|
};
|
|
3865
|
-
return {
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
}),
|
|
3871
|
-
tabIndex: index === latestState.activeIndex ? 0 : -1,
|
|
3872
|
-
onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
|
|
3873
|
-
onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
|
|
3874
|
-
...rest
|
|
3875
|
-
};
|
|
3736
|
+
return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
|
|
3737
|
+
if (selectedItemNode) {
|
|
3738
|
+
selectedItemRefs.current.push(selectedItemNode);
|
|
3739
|
+
}
|
|
3740
|
+
}), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
|
|
3876
3741
|
}, [dispatch, latest, selectedItemKeyDownHandlers]);
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3742
|
+
var getDropdownProps = react.useCallback(function (_temp2, _temp3) {
|
|
3743
|
+
var _extends3;
|
|
3744
|
+
var _ref4 = _temp2 === void 0 ? {} : _temp2,
|
|
3745
|
+
_ref4$refKey = _ref4.refKey,
|
|
3746
|
+
refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
|
|
3747
|
+
ref = _ref4.ref,
|
|
3748
|
+
onKeyDown = _ref4.onKeyDown,
|
|
3749
|
+
onClick = _ref4.onClick,
|
|
3750
|
+
_ref4$preventKeyActio = _ref4.preventKeyAction,
|
|
3751
|
+
preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
|
|
3752
|
+
rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded2);
|
|
3753
|
+
var _ref5 = _temp3 === void 0 ? {} : _temp3,
|
|
3754
|
+
_ref5$suppressRefErro = _ref5.suppressRefError,
|
|
3755
|
+
suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
|
|
3889
3756
|
setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
|
|
3890
|
-
|
|
3891
|
-
|
|
3757
|
+
var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) {
|
|
3758
|
+
var key = normalizeArrowKey(event);
|
|
3892
3759
|
if (key && dropdownKeyDownHandlers[key]) {
|
|
3893
3760
|
dropdownKeyDownHandlers[key](event);
|
|
3894
3761
|
}
|
|
3895
3762
|
};
|
|
3896
|
-
|
|
3763
|
+
var dropdownHandleClick = function dropdownHandleClick() {
|
|
3897
3764
|
dispatch({
|
|
3898
3765
|
type: DropdownClick
|
|
3899
3766
|
});
|
|
3900
3767
|
};
|
|
3901
|
-
return {
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
3910
|
-
}),
|
|
3911
|
-
...rest
|
|
3912
|
-
};
|
|
3768
|
+
return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
|
|
3769
|
+
if (dropdownNode) {
|
|
3770
|
+
dropdownRef.current = dropdownNode;
|
|
3771
|
+
}
|
|
3772
|
+
}), _extends3), !preventKeyAction && {
|
|
3773
|
+
onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
|
|
3774
|
+
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
3775
|
+
}, rest);
|
|
3913
3776
|
}, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]);
|
|
3914
3777
|
|
|
3915
3778
|
// returns
|
|
3916
|
-
|
|
3779
|
+
var addSelectedItem = react.useCallback(function (selectedItem) {
|
|
3917
3780
|
dispatch({
|
|
3918
3781
|
type: FunctionAddSelectedItem,
|
|
3919
|
-
selectedItem
|
|
3782
|
+
selectedItem: selectedItem
|
|
3920
3783
|
});
|
|
3921
3784
|
}, [dispatch]);
|
|
3922
|
-
|
|
3785
|
+
var removeSelectedItem = react.useCallback(function (selectedItem) {
|
|
3923
3786
|
dispatch({
|
|
3924
3787
|
type: FunctionRemoveSelectedItem,
|
|
3925
|
-
selectedItem
|
|
3788
|
+
selectedItem: selectedItem
|
|
3926
3789
|
});
|
|
3927
3790
|
}, [dispatch]);
|
|
3928
|
-
|
|
3791
|
+
var setSelectedItems = react.useCallback(function (newSelectedItems) {
|
|
3929
3792
|
dispatch({
|
|
3930
3793
|
type: FunctionSetSelectedItems,
|
|
3931
3794
|
selectedItems: newSelectedItems
|
|
3932
3795
|
});
|
|
3933
3796
|
}, [dispatch]);
|
|
3934
|
-
|
|
3797
|
+
var setActiveIndex = react.useCallback(function (newActiveIndex) {
|
|
3935
3798
|
dispatch({
|
|
3936
3799
|
type: FunctionSetActiveIndex,
|
|
3937
3800
|
activeIndex: newActiveIndex
|
|
3938
3801
|
});
|
|
3939
3802
|
}, [dispatch]);
|
|
3940
|
-
|
|
3803
|
+
var reset = react.useCallback(function () {
|
|
3941
3804
|
dispatch({
|
|
3942
3805
|
type: FunctionReset
|
|
3943
3806
|
});
|
|
3944
3807
|
}, [dispatch]);
|
|
3945
3808
|
return {
|
|
3946
|
-
getSelectedItemProps,
|
|
3947
|
-
getDropdownProps,
|
|
3948
|
-
addSelectedItem,
|
|
3949
|
-
removeSelectedItem,
|
|
3950
|
-
setSelectedItems,
|
|
3951
|
-
setActiveIndex,
|
|
3952
|
-
reset,
|
|
3953
|
-
selectedItems,
|
|
3954
|
-
activeIndex
|
|
3809
|
+
getSelectedItemProps: getSelectedItemProps,
|
|
3810
|
+
getDropdownProps: getDropdownProps,
|
|
3811
|
+
addSelectedItem: addSelectedItem,
|
|
3812
|
+
removeSelectedItem: removeSelectedItem,
|
|
3813
|
+
setSelectedItems: setSelectedItems,
|
|
3814
|
+
setActiveIndex: setActiveIndex,
|
|
3815
|
+
reset: reset,
|
|
3816
|
+
selectedItems: selectedItems,
|
|
3817
|
+
activeIndex: activeIndex
|
|
3955
3818
|
};
|
|
3956
3819
|
}
|
|
3957
3820
|
|