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