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