downshift 7.1.1 → 7.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/downshift.cjs.js +1435 -1572
- package/dist/downshift.esm.js +1432 -1573
- package/dist/downshift.native.cjs.js +1419 -1556
- package/dist/downshift.umd.js +1472 -1568
- package/dist/downshift.umd.js.map +1 -1
- package/dist/downshift.umd.min.js +1 -1
- package/dist/downshift.umd.min.js.map +1 -1
- package/package.json +2 -1
- package/preact/dist/downshift.cjs.js +1435 -1572
- package/preact/dist/downshift.esm.js +1432 -1573
- package/preact/dist/downshift.umd.js +1475 -1571
- package/preact/dist/downshift.umd.js.map +1 -1
- package/preact/dist/downshift.umd.min.js +9 -1
- package/preact/dist/downshift.umd.min.js.map +1 -1
|
@@ -8,6 +8,55 @@
|
|
|
8
8
|
|
|
9
9
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
10
10
|
|
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
12
|
+
if (source == null) return {};
|
|
13
|
+
var target = {};
|
|
14
|
+
var sourceKeys = Object.keys(source);
|
|
15
|
+
var key, i;
|
|
16
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
17
|
+
key = sourceKeys[i];
|
|
18
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
19
|
+
target[key] = source[key];
|
|
20
|
+
}
|
|
21
|
+
return target;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function _extends() {
|
|
25
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
26
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
27
|
+
var source = arguments[i];
|
|
28
|
+
for (var key in source) {
|
|
29
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
30
|
+
target[key] = source[key];
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
36
|
+
return _extends.apply(this, arguments);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function _assertThisInitialized(self) {
|
|
40
|
+
if (self === void 0) {
|
|
41
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
42
|
+
}
|
|
43
|
+
return self;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function _setPrototypeOf(o, p) {
|
|
47
|
+
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
48
|
+
o.__proto__ = p;
|
|
49
|
+
return o;
|
|
50
|
+
};
|
|
51
|
+
return _setPrototypeOf(o, p);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function _inheritsLoose(subClass, superClass) {
|
|
55
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
56
|
+
subClass.prototype.constructor = subClass;
|
|
57
|
+
_setPrototypeOf(subClass, superClass);
|
|
58
|
+
}
|
|
59
|
+
|
|
11
60
|
var reactIs = {exports: {}};
|
|
12
61
|
|
|
13
62
|
/** @license React v17.0.2
|
|
@@ -249,7 +298,7 @@
|
|
|
249
298
|
|
|
250
299
|
function t(t){return "object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return (!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return !1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&n(m)&&!n(document.documentElement)||null!=m&&n(m,u)&&p.push(m);}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else {G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)));}T.push({el:B,top:G,left:J});}return T};
|
|
251
300
|
|
|
252
|
-
|
|
301
|
+
var idCounter = 0;
|
|
253
302
|
|
|
254
303
|
/**
|
|
255
304
|
* Accepts a parameter and returns it if it's a function
|
|
@@ -273,17 +322,15 @@
|
|
|
273
322
|
if (!node) {
|
|
274
323
|
return;
|
|
275
324
|
}
|
|
276
|
-
|
|
325
|
+
var actions = i(node, {
|
|
277
326
|
boundary: menuNode,
|
|
278
327
|
block: 'nearest',
|
|
279
328
|
scrollMode: 'if-needed'
|
|
280
329
|
});
|
|
281
|
-
actions.forEach(_ref
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
left
|
|
286
|
-
} = _ref;
|
|
330
|
+
actions.forEach(function (_ref) {
|
|
331
|
+
var el = _ref.el,
|
|
332
|
+
top = _ref.top,
|
|
333
|
+
left = _ref.left;
|
|
287
334
|
el.scrollTop = top;
|
|
288
335
|
el.scrollLeft = left;
|
|
289
336
|
});
|
|
@@ -296,7 +343,7 @@
|
|
|
296
343
|
* @return {Boolean} whether the parent is the child or the child is in the parent
|
|
297
344
|
*/
|
|
298
345
|
function isOrContainsNode(parent, child, environment) {
|
|
299
|
-
|
|
346
|
+
var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
|
|
300
347
|
return result;
|
|
301
348
|
}
|
|
302
349
|
|
|
@@ -309,7 +356,7 @@
|
|
|
309
356
|
* @return {Function} the debounced function
|
|
310
357
|
*/
|
|
311
358
|
function debounce(fn, time) {
|
|
312
|
-
|
|
359
|
+
var timeoutId;
|
|
313
360
|
function cancel() {
|
|
314
361
|
if (timeoutId) {
|
|
315
362
|
clearTimeout(timeoutId);
|
|
@@ -320,9 +367,9 @@
|
|
|
320
367
|
args[_key] = arguments[_key];
|
|
321
368
|
}
|
|
322
369
|
cancel();
|
|
323
|
-
timeoutId = setTimeout(()
|
|
370
|
+
timeoutId = setTimeout(function () {
|
|
324
371
|
timeoutId = null;
|
|
325
|
-
fn(
|
|
372
|
+
fn.apply(void 0, args);
|
|
326
373
|
}, time);
|
|
327
374
|
}
|
|
328
375
|
wrapper.cancel = cancel;
|
|
@@ -344,9 +391,9 @@
|
|
|
344
391
|
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
|
345
392
|
args[_key3 - 1] = arguments[_key3];
|
|
346
393
|
}
|
|
347
|
-
return fns.some(fn
|
|
394
|
+
return fns.some(function (fn) {
|
|
348
395
|
if (fn) {
|
|
349
|
-
fn(
|
|
396
|
+
fn.apply(void 0, [event].concat(args));
|
|
350
397
|
}
|
|
351
398
|
return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
|
|
352
399
|
});
|
|
@@ -356,8 +403,8 @@
|
|
|
356
403
|
for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
357
404
|
refs[_key4] = arguments[_key4];
|
|
358
405
|
}
|
|
359
|
-
return node
|
|
360
|
-
refs.forEach(ref
|
|
406
|
+
return function (node) {
|
|
407
|
+
refs.forEach(function (ref) {
|
|
361
408
|
if (typeof ref === 'function') {
|
|
362
409
|
ref(node);
|
|
363
410
|
} else if (ref) {
|
|
@@ -391,11 +438,9 @@
|
|
|
391
438
|
* @return {String} the a11y status message
|
|
392
439
|
*/
|
|
393
440
|
function getA11yStatusMessage$1(_ref2) {
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
previousResultCount
|
|
398
|
-
} = _ref2;
|
|
441
|
+
var isOpen = _ref2.isOpen,
|
|
442
|
+
resultCount = _ref2.resultCount,
|
|
443
|
+
previousResultCount = _ref2.previousResultCount;
|
|
399
444
|
if (!isOpen) {
|
|
400
445
|
return '';
|
|
401
446
|
}
|
|
@@ -403,7 +448,7 @@
|
|
|
403
448
|
return 'No results are available.';
|
|
404
449
|
}
|
|
405
450
|
if (resultCount !== previousResultCount) {
|
|
406
|
-
return
|
|
451
|
+
return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
|
|
407
452
|
}
|
|
408
453
|
return '';
|
|
409
454
|
}
|
|
@@ -457,9 +502,9 @@
|
|
|
457
502
|
*/
|
|
458
503
|
function requiredProp(fnName, propName) {
|
|
459
504
|
// eslint-disable-next-line no-console
|
|
460
|
-
console.error(
|
|
505
|
+
console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
|
|
461
506
|
}
|
|
462
|
-
|
|
507
|
+
var stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
|
|
463
508
|
/**
|
|
464
509
|
* @param {Object} state the state object
|
|
465
510
|
* @return {Object} state that is relevant to downshift
|
|
@@ -468,8 +513,8 @@
|
|
|
468
513
|
if (state === void 0) {
|
|
469
514
|
state = {};
|
|
470
515
|
}
|
|
471
|
-
|
|
472
|
-
stateKeys.forEach(k
|
|
516
|
+
var result = {};
|
|
517
|
+
stateKeys.forEach(function (k) {
|
|
473
518
|
if (state.hasOwnProperty(k)) {
|
|
474
519
|
result[k] = state[k];
|
|
475
520
|
}
|
|
@@ -489,7 +534,7 @@
|
|
|
489
534
|
* @returns {Object} The merged controlled state.
|
|
490
535
|
*/
|
|
491
536
|
function getState(state, props) {
|
|
492
|
-
return Object.keys(state).reduce((prevState, key)
|
|
537
|
+
return Object.keys(state).reduce(function (prevState, key) {
|
|
493
538
|
prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
|
|
494
539
|
return prevState;
|
|
495
540
|
}, {});
|
|
@@ -514,13 +559,11 @@
|
|
|
514
559
|
* @return {String} keyboard key
|
|
515
560
|
*/
|
|
516
561
|
function normalizeArrowKey(event) {
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
keyCode
|
|
520
|
-
} = event;
|
|
562
|
+
var key = event.key,
|
|
563
|
+
keyCode = event.keyCode;
|
|
521
564
|
/* istanbul ignore next (ie) */
|
|
522
565
|
if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
|
|
523
|
-
return
|
|
566
|
+
return "Arrow" + key;
|
|
524
567
|
}
|
|
525
568
|
return key;
|
|
526
569
|
}
|
|
@@ -552,17 +595,17 @@
|
|
|
552
595
|
if (itemCount === 0) {
|
|
553
596
|
return -1;
|
|
554
597
|
}
|
|
555
|
-
|
|
598
|
+
var itemsLastIndex = itemCount - 1;
|
|
556
599
|
if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
|
|
557
600
|
baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
|
|
558
601
|
}
|
|
559
|
-
|
|
602
|
+
var newIndex = baseIndex + moveAmount;
|
|
560
603
|
if (newIndex < 0) {
|
|
561
604
|
newIndex = circular ? itemsLastIndex : 0;
|
|
562
605
|
} else if (newIndex > itemsLastIndex) {
|
|
563
606
|
newIndex = circular ? 0 : itemsLastIndex;
|
|
564
607
|
}
|
|
565
|
-
|
|
608
|
+
var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
|
|
566
609
|
if (nonDisabledNewIndex === -1) {
|
|
567
610
|
return baseIndex >= itemCount ? -1 : baseIndex;
|
|
568
611
|
}
|
|
@@ -580,20 +623,20 @@
|
|
|
580
623
|
* @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.
|
|
581
624
|
*/
|
|
582
625
|
function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
|
|
583
|
-
|
|
626
|
+
var currentElementNode = getItemNodeFromIndex(baseIndex);
|
|
584
627
|
if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
|
|
585
628
|
return baseIndex;
|
|
586
629
|
}
|
|
587
630
|
if (moveAmount > 0) {
|
|
588
|
-
for (
|
|
631
|
+
for (var index = baseIndex + 1; index < itemCount; index++) {
|
|
589
632
|
if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
|
|
590
633
|
return index;
|
|
591
634
|
}
|
|
592
635
|
}
|
|
593
636
|
} else {
|
|
594
|
-
for (
|
|
595
|
-
if (!getItemNodeFromIndex(
|
|
596
|
-
return
|
|
637
|
+
for (var _index = baseIndex - 1; _index >= 0; _index--) {
|
|
638
|
+
if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
|
|
639
|
+
return _index;
|
|
597
640
|
}
|
|
598
641
|
}
|
|
599
642
|
}
|
|
@@ -617,28 +660,30 @@
|
|
|
617
660
|
if (checkActiveElement === void 0) {
|
|
618
661
|
checkActiveElement = true;
|
|
619
662
|
}
|
|
620
|
-
return downshiftElements.some(
|
|
663
|
+
return downshiftElements.some(function (contextNode) {
|
|
664
|
+
return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
|
|
665
|
+
});
|
|
621
666
|
}
|
|
622
667
|
|
|
623
668
|
// eslint-disable-next-line import/no-mutable-exports
|
|
624
|
-
|
|
669
|
+
var validateControlledUnchanged = noop;
|
|
625
670
|
/* istanbul ignore next */
|
|
626
671
|
{
|
|
627
|
-
validateControlledUnchanged = (state, prevProps, nextProps)
|
|
628
|
-
|
|
629
|
-
Object.keys(state).forEach(propKey
|
|
672
|
+
validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
|
|
673
|
+
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";
|
|
674
|
+
Object.keys(state).forEach(function (propKey) {
|
|
630
675
|
if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
|
|
631
676
|
// eslint-disable-next-line no-console
|
|
632
|
-
console.error(
|
|
677
|
+
console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
|
|
633
678
|
} else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
|
|
634
679
|
// eslint-disable-next-line no-console
|
|
635
|
-
console.error(
|
|
680
|
+
console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
|
|
636
681
|
}
|
|
637
682
|
});
|
|
638
683
|
};
|
|
639
684
|
}
|
|
640
685
|
|
|
641
|
-
|
|
686
|
+
var cleanupStatus = debounce(function (documentProp) {
|
|
642
687
|
getStatusDiv(documentProp).textContent = '';
|
|
643
688
|
}, 500);
|
|
644
689
|
|
|
@@ -647,7 +692,7 @@
|
|
|
647
692
|
* @param {Object} documentProp document passed by the user.
|
|
648
693
|
*/
|
|
649
694
|
function setStatus(status, documentProp) {
|
|
650
|
-
|
|
695
|
+
var div = getStatusDiv(documentProp);
|
|
651
696
|
if (!status) {
|
|
652
697
|
return;
|
|
653
698
|
}
|
|
@@ -664,7 +709,7 @@
|
|
|
664
709
|
if (documentProp === void 0) {
|
|
665
710
|
documentProp = document;
|
|
666
711
|
}
|
|
667
|
-
|
|
712
|
+
var statusDiv = documentProp.getElementById('a11y-status-message');
|
|
668
713
|
if (statusDiv) {
|
|
669
714
|
return statusDiv;
|
|
670
715
|
}
|
|
@@ -687,23 +732,23 @@
|
|
|
687
732
|
return statusDiv;
|
|
688
733
|
}
|
|
689
734
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
735
|
+
var unknown = '__autocomplete_unknown__' ;
|
|
736
|
+
var mouseUp = '__autocomplete_mouseup__' ;
|
|
737
|
+
var itemMouseEnter = '__autocomplete_item_mouseenter__' ;
|
|
738
|
+
var keyDownArrowUp = '__autocomplete_keydown_arrow_up__' ;
|
|
739
|
+
var keyDownArrowDown = '__autocomplete_keydown_arrow_down__' ;
|
|
740
|
+
var keyDownEscape = '__autocomplete_keydown_escape__' ;
|
|
741
|
+
var keyDownEnter = '__autocomplete_keydown_enter__' ;
|
|
742
|
+
var keyDownHome = '__autocomplete_keydown_home__' ;
|
|
743
|
+
var keyDownEnd = '__autocomplete_keydown_end__' ;
|
|
744
|
+
var clickItem = '__autocomplete_click_item__' ;
|
|
745
|
+
var blurInput = '__autocomplete_blur_input__' ;
|
|
746
|
+
var changeInput = '__autocomplete_change_input__' ;
|
|
747
|
+
var keyDownSpaceButton = '__autocomplete_keydown_space_button__' ;
|
|
748
|
+
var clickButton = '__autocomplete_click_button__' ;
|
|
749
|
+
var blurButton = '__autocomplete_blur_button__' ;
|
|
750
|
+
var controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__' ;
|
|
751
|
+
var touchEnd = '__autocomplete_touchend__' ;
|
|
707
752
|
|
|
708
753
|
var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
|
|
709
754
|
__proto__: null,
|
|
@@ -726,37 +771,48 @@
|
|
|
726
771
|
touchEnd: touchEnd
|
|
727
772
|
});
|
|
728
773
|
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
774
|
+
var _excluded$4 = ["refKey", "ref"],
|
|
775
|
+
_excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
|
|
776
|
+
_excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
|
|
777
|
+
_excluded4$1 = ["refKey", "ref"],
|
|
778
|
+
_excluded5 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
|
|
779
|
+
var Downshift = /*#__PURE__*/function () {
|
|
780
|
+
var Downshift = /*#__PURE__*/function (_Component) {
|
|
781
|
+
_inheritsLoose(Downshift, _Component);
|
|
782
|
+
function Downshift(_props) {
|
|
733
783
|
var _this;
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
this
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
784
|
+
_this = _Component.call(this, _props) || this;
|
|
785
|
+
// fancy destructuring + defaults + aliases
|
|
786
|
+
// this basically says each value of state should either be set to
|
|
787
|
+
// the initial value or the default value if the initial value is not provided
|
|
788
|
+
_this.id = _this.props.id || "downshift-" + generateId();
|
|
789
|
+
_this.menuId = _this.props.menuId || _this.id + "-menu";
|
|
790
|
+
_this.labelId = _this.props.labelId || _this.id + "-label";
|
|
791
|
+
_this.inputId = _this.props.inputId || _this.id + "-input";
|
|
792
|
+
_this.getItemId = _this.props.getItemId || function (index) {
|
|
793
|
+
return _this.id + "-item-" + index;
|
|
794
|
+
};
|
|
795
|
+
_this.input = null;
|
|
796
|
+
_this.items = [];
|
|
797
|
+
_this.itemCount = null;
|
|
798
|
+
_this.previousResultCount = 0;
|
|
799
|
+
_this.timeoutIds = [];
|
|
800
|
+
_this.internalSetTimeout = function (fn, time) {
|
|
801
|
+
var id = setTimeout(function () {
|
|
802
|
+
_this.timeoutIds = _this.timeoutIds.filter(function (i) {
|
|
803
|
+
return i !== id;
|
|
804
|
+
});
|
|
749
805
|
fn();
|
|
750
806
|
}, time);
|
|
751
|
-
|
|
807
|
+
_this.timeoutIds.push(id);
|
|
752
808
|
};
|
|
753
|
-
|
|
754
|
-
|
|
809
|
+
_this.setItemCount = function (count) {
|
|
810
|
+
_this.itemCount = count;
|
|
755
811
|
};
|
|
756
|
-
|
|
757
|
-
|
|
812
|
+
_this.unsetItemCount = function () {
|
|
813
|
+
_this.itemCount = null;
|
|
758
814
|
};
|
|
759
|
-
|
|
815
|
+
_this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
|
|
760
816
|
if (highlightedIndex === void 0) {
|
|
761
817
|
highlightedIndex = _this.props.defaultHighlightedIndex;
|
|
762
818
|
}
|
|
@@ -764,43 +820,41 @@
|
|
|
764
820
|
otherStateToSet = {};
|
|
765
821
|
}
|
|
766
822
|
otherStateToSet = pickState(otherStateToSet);
|
|
767
|
-
_this.internalSetState({
|
|
768
|
-
highlightedIndex
|
|
769
|
-
|
|
770
|
-
});
|
|
823
|
+
_this.internalSetState(_extends({
|
|
824
|
+
highlightedIndex: highlightedIndex
|
|
825
|
+
}, otherStateToSet));
|
|
771
826
|
};
|
|
772
|
-
|
|
773
|
-
|
|
827
|
+
_this.clearSelection = function (cb) {
|
|
828
|
+
_this.internalSetState({
|
|
774
829
|
selectedItem: null,
|
|
775
830
|
inputValue: '',
|
|
776
|
-
highlightedIndex:
|
|
777
|
-
isOpen:
|
|
831
|
+
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
832
|
+
isOpen: _this.props.defaultIsOpen
|
|
778
833
|
}, cb);
|
|
779
834
|
};
|
|
780
|
-
|
|
835
|
+
_this.selectItem = function (item, otherStateToSet, cb) {
|
|
781
836
|
otherStateToSet = pickState(otherStateToSet);
|
|
782
|
-
|
|
783
|
-
isOpen:
|
|
784
|
-
highlightedIndex:
|
|
837
|
+
_this.internalSetState(_extends({
|
|
838
|
+
isOpen: _this.props.defaultIsOpen,
|
|
839
|
+
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
785
840
|
selectedItem: item,
|
|
786
|
-
inputValue:
|
|
787
|
-
|
|
788
|
-
}, cb);
|
|
841
|
+
inputValue: _this.props.itemToString(item)
|
|
842
|
+
}, otherStateToSet), cb);
|
|
789
843
|
};
|
|
790
|
-
|
|
791
|
-
|
|
844
|
+
_this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
|
|
845
|
+
var item = _this.items[itemIndex];
|
|
792
846
|
if (item == null) {
|
|
793
847
|
return;
|
|
794
848
|
}
|
|
795
|
-
|
|
849
|
+
_this.selectItem(item, otherStateToSet, cb);
|
|
796
850
|
};
|
|
797
|
-
|
|
798
|
-
return
|
|
851
|
+
_this.selectHighlightedItem = function (otherStateToSet, cb) {
|
|
852
|
+
return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
|
|
799
853
|
};
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
854
|
+
_this.internalSetState = function (stateToSet, cb) {
|
|
855
|
+
var isItemSelected, onChangeArg;
|
|
856
|
+
var onStateChangeArg = {};
|
|
857
|
+
var isStateToSetFunction = typeof stateToSet === 'function';
|
|
804
858
|
|
|
805
859
|
// we want to call `onInputValueChange` before the `setState` call
|
|
806
860
|
// so someone controlling the `inputValue` state gets notified of
|
|
@@ -808,24 +862,21 @@
|
|
|
808
862
|
// preserving the cursor position.
|
|
809
863
|
// See https://github.com/downshift-js/downshift/issues/217 for more info.
|
|
810
864
|
if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
|
|
811
|
-
|
|
812
|
-
...this.getStateAndHelpers(),
|
|
813
|
-
...stateToSet
|
|
814
|
-
});
|
|
865
|
+
_this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet));
|
|
815
866
|
}
|
|
816
|
-
return
|
|
817
|
-
state =
|
|
818
|
-
|
|
867
|
+
return _this.setState(function (state) {
|
|
868
|
+
state = _this.getState(state);
|
|
869
|
+
var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
|
|
819
870
|
|
|
820
871
|
// Your own function that could modify the state that will be set.
|
|
821
|
-
newStateToSet =
|
|
872
|
+
newStateToSet = _this.props.stateReducer(state, newStateToSet);
|
|
822
873
|
|
|
823
874
|
// checks if an item is selected, regardless of if it's different from
|
|
824
875
|
// what was selected before
|
|
825
876
|
// used to determine if onSelect and onChange callbacks should be called
|
|
826
877
|
isItemSelected = newStateToSet.hasOwnProperty('selectedItem');
|
|
827
878
|
// this keeps track of the object we want to call with setState
|
|
828
|
-
|
|
879
|
+
var nextState = {};
|
|
829
880
|
// we need to call on change if the outside world is controlling any of our state
|
|
830
881
|
// and we're trying to update that state. OR if the selection has changed and we're
|
|
831
882
|
// trying to update the selection
|
|
@@ -833,7 +884,7 @@
|
|
|
833
884
|
onChangeArg = newStateToSet.selectedItem;
|
|
834
885
|
}
|
|
835
886
|
newStateToSet.type = newStateToSet.type || unknown;
|
|
836
|
-
Object.keys(newStateToSet).forEach(key
|
|
887
|
+
Object.keys(newStateToSet).forEach(function (key) {
|
|
837
888
|
// onStateChangeArg should only have the state that is
|
|
838
889
|
// actually changing
|
|
839
890
|
if (state[key] !== newStateToSet[key]) {
|
|
@@ -850,7 +901,7 @@
|
|
|
850
901
|
}
|
|
851
902
|
newStateToSet[key];
|
|
852
903
|
// if it's coming from props, then we don't care to set it internally
|
|
853
|
-
if (!isControlledProp(
|
|
904
|
+
if (!isControlledProp(_this.props, key)) {
|
|
854
905
|
nextState[key] = newStateToSet[key];
|
|
855
906
|
}
|
|
856
907
|
});
|
|
@@ -858,66 +909,58 @@
|
|
|
858
909
|
// if stateToSet is a function, then we weren't able to call onInputValueChange
|
|
859
910
|
// earlier, so we'll call it now that we know what the inputValue state will be.
|
|
860
911
|
if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
|
|
861
|
-
|
|
862
|
-
...this.getStateAndHelpers(),
|
|
863
|
-
...newStateToSet
|
|
864
|
-
});
|
|
912
|
+
_this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet));
|
|
865
913
|
}
|
|
866
914
|
return nextState;
|
|
867
|
-
}, ()
|
|
915
|
+
}, function () {
|
|
868
916
|
// call the provided callback if it's a function
|
|
869
917
|
cbToCb(cb)();
|
|
870
918
|
|
|
871
919
|
// only call the onStateChange and onChange callbacks if
|
|
872
920
|
// we have relevant information to pass them.
|
|
873
|
-
|
|
921
|
+
var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
|
|
874
922
|
if (hasMoreStateThanType) {
|
|
875
|
-
|
|
923
|
+
_this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
|
|
876
924
|
}
|
|
877
925
|
if (isItemSelected) {
|
|
878
|
-
|
|
926
|
+
_this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
|
|
879
927
|
}
|
|
880
928
|
if (onChangeArg !== undefined) {
|
|
881
|
-
|
|
929
|
+
_this.props.onChange(onChangeArg, _this.getStateAndHelpers());
|
|
882
930
|
}
|
|
883
931
|
// this is currently undocumented and therefore subject to change
|
|
884
932
|
// We'll try to not break it, but just be warned.
|
|
885
|
-
|
|
933
|
+
_this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
|
|
886
934
|
});
|
|
887
935
|
};
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
936
|
+
_this.rootRef = function (node) {
|
|
937
|
+
return _this._rootNode = node;
|
|
938
|
+
};
|
|
939
|
+
_this.getRootProps = function (_temp, _temp2) {
|
|
940
|
+
var _extends2;
|
|
941
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
942
|
+
_ref$refKey = _ref.refKey,
|
|
943
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
|
944
|
+
ref = _ref.ref,
|
|
945
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
946
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
947
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
948
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
898
949
|
// this is used in the render to know whether the user has called getRootProps.
|
|
899
950
|
// It uses that to know whether to apply the props automatically
|
|
900
951
|
_this.getRootProps.called = true;
|
|
901
952
|
_this.getRootProps.refKey = refKey;
|
|
902
953
|
_this.getRootProps.suppressRefError = suppressRefError;
|
|
903
|
-
|
|
904
|
-
isOpen
|
|
905
|
-
} = _this.
|
|
906
|
-
return {
|
|
907
|
-
[refKey]: handleRefs(ref, _this.rootRef),
|
|
908
|
-
role: 'combobox',
|
|
909
|
-
'aria-expanded': isOpen,
|
|
910
|
-
'aria-haspopup': 'listbox',
|
|
911
|
-
'aria-owns': isOpen ? _this.menuId : null,
|
|
912
|
-
'aria-labelledby': _this.labelId,
|
|
913
|
-
...rest
|
|
914
|
-
};
|
|
954
|
+
var _this$getState = _this.getState(),
|
|
955
|
+
isOpen = _this$getState.isOpen;
|
|
956
|
+
return _extends((_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);
|
|
915
957
|
};
|
|
916
|
-
|
|
917
|
-
ArrowDown(event) {
|
|
958
|
+
_this.keyDownHandlers = {
|
|
959
|
+
ArrowDown: function ArrowDown(event) {
|
|
960
|
+
var _this2 = this;
|
|
918
961
|
event.preventDefault();
|
|
919
962
|
if (this.getState().isOpen) {
|
|
920
|
-
|
|
963
|
+
var amount = event.shiftKey ? 5 : 1;
|
|
921
964
|
this.moveHighlightedIndex(amount, {
|
|
922
965
|
type: keyDownArrowDown
|
|
923
966
|
});
|
|
@@ -925,24 +968,26 @@
|
|
|
925
968
|
this.internalSetState({
|
|
926
969
|
isOpen: true,
|
|
927
970
|
type: keyDownArrowDown
|
|
928
|
-
}, ()
|
|
929
|
-
|
|
971
|
+
}, function () {
|
|
972
|
+
var itemCount = _this2.getItemCount();
|
|
930
973
|
if (itemCount > 0) {
|
|
931
|
-
|
|
932
|
-
highlightedIndex
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
974
|
+
var _this2$getState = _this2.getState(),
|
|
975
|
+
highlightedIndex = _this2$getState.highlightedIndex;
|
|
976
|
+
var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
|
|
977
|
+
return _this2.getItemNodeFromIndex(index);
|
|
978
|
+
});
|
|
979
|
+
_this2.setHighlightedIndex(nextHighlightedIndex, {
|
|
936
980
|
type: keyDownArrowDown
|
|
937
981
|
});
|
|
938
982
|
}
|
|
939
983
|
});
|
|
940
984
|
}
|
|
941
985
|
},
|
|
942
|
-
ArrowUp(event) {
|
|
986
|
+
ArrowUp: function ArrowUp(event) {
|
|
987
|
+
var _this3 = this;
|
|
943
988
|
event.preventDefault();
|
|
944
989
|
if (this.getState().isOpen) {
|
|
945
|
-
|
|
990
|
+
var amount = event.shiftKey ? -5 : -1;
|
|
946
991
|
this.moveHighlightedIndex(amount, {
|
|
947
992
|
type: keyDownArrowUp
|
|
948
993
|
});
|
|
@@ -950,32 +995,32 @@
|
|
|
950
995
|
this.internalSetState({
|
|
951
996
|
isOpen: true,
|
|
952
997
|
type: keyDownArrowUp
|
|
953
|
-
}, ()
|
|
954
|
-
|
|
998
|
+
}, function () {
|
|
999
|
+
var itemCount = _this3.getItemCount();
|
|
955
1000
|
if (itemCount > 0) {
|
|
956
|
-
|
|
957
|
-
highlightedIndex
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
1001
|
+
var _this3$getState = _this3.getState(),
|
|
1002
|
+
highlightedIndex = _this3$getState.highlightedIndex;
|
|
1003
|
+
var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
|
|
1004
|
+
return _this3.getItemNodeFromIndex(index);
|
|
1005
|
+
});
|
|
1006
|
+
_this3.setHighlightedIndex(nextHighlightedIndex, {
|
|
961
1007
|
type: keyDownArrowUp
|
|
962
1008
|
});
|
|
963
1009
|
}
|
|
964
1010
|
});
|
|
965
1011
|
}
|
|
966
1012
|
},
|
|
967
|
-
Enter(event) {
|
|
1013
|
+
Enter: function Enter(event) {
|
|
968
1014
|
if (event.which === 229) {
|
|
969
1015
|
return;
|
|
970
1016
|
}
|
|
971
|
-
|
|
972
|
-
isOpen,
|
|
973
|
-
highlightedIndex
|
|
974
|
-
} = this.getState();
|
|
1017
|
+
var _this$getState2 = this.getState(),
|
|
1018
|
+
isOpen = _this$getState2.isOpen,
|
|
1019
|
+
highlightedIndex = _this$getState2.highlightedIndex;
|
|
975
1020
|
if (isOpen && highlightedIndex != null) {
|
|
976
1021
|
event.preventDefault();
|
|
977
|
-
|
|
978
|
-
|
|
1022
|
+
var item = this.items[highlightedIndex];
|
|
1023
|
+
var itemNode = this.getItemNodeFromIndex(highlightedIndex);
|
|
979
1024
|
if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
|
|
980
1025
|
return;
|
|
981
1026
|
}
|
|
@@ -984,112 +1029,109 @@
|
|
|
984
1029
|
});
|
|
985
1030
|
}
|
|
986
1031
|
},
|
|
987
|
-
Escape(event) {
|
|
1032
|
+
Escape: function Escape(event) {
|
|
988
1033
|
event.preventDefault();
|
|
989
|
-
this.reset({
|
|
990
|
-
type: keyDownEscape
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
});
|
|
1034
|
+
this.reset(_extends({
|
|
1035
|
+
type: keyDownEscape
|
|
1036
|
+
}, !this.state.isOpen && {
|
|
1037
|
+
selectedItem: null,
|
|
1038
|
+
inputValue: ''
|
|
1039
|
+
}));
|
|
996
1040
|
}
|
|
997
1041
|
};
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
' '(event) {
|
|
1042
|
+
_this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
|
|
1043
|
+
' ': function _(event) {
|
|
1001
1044
|
event.preventDefault();
|
|
1002
1045
|
this.toggleMenu({
|
|
1003
1046
|
type: keyDownSpaceButton
|
|
1004
1047
|
});
|
|
1005
1048
|
}
|
|
1006
|
-
};
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
isOpen
|
|
1012
|
-
} = this.getState();
|
|
1049
|
+
});
|
|
1050
|
+
_this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
|
|
1051
|
+
Home: function Home(event) {
|
|
1052
|
+
var _this4 = this;
|
|
1053
|
+
var _this$getState3 = this.getState(),
|
|
1054
|
+
isOpen = _this$getState3.isOpen;
|
|
1013
1055
|
if (!isOpen) {
|
|
1014
1056
|
return;
|
|
1015
1057
|
}
|
|
1016
1058
|
event.preventDefault();
|
|
1017
|
-
|
|
1059
|
+
var itemCount = this.getItemCount();
|
|
1018
1060
|
if (itemCount <= 0 || !isOpen) {
|
|
1019
1061
|
return;
|
|
1020
1062
|
}
|
|
1021
1063
|
|
|
1022
1064
|
// get next non-disabled starting downwards from 0 if that's disabled.
|
|
1023
|
-
|
|
1065
|
+
var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) {
|
|
1066
|
+
return _this4.getItemNodeFromIndex(index);
|
|
1067
|
+
}, false);
|
|
1024
1068
|
this.setHighlightedIndex(newHighlightedIndex, {
|
|
1025
1069
|
type: keyDownHome
|
|
1026
1070
|
});
|
|
1027
1071
|
},
|
|
1028
|
-
End(event) {
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1072
|
+
End: function End(event) {
|
|
1073
|
+
var _this5 = this;
|
|
1074
|
+
var _this$getState4 = this.getState(),
|
|
1075
|
+
isOpen = _this$getState4.isOpen;
|
|
1032
1076
|
if (!isOpen) {
|
|
1033
1077
|
return;
|
|
1034
1078
|
}
|
|
1035
1079
|
event.preventDefault();
|
|
1036
|
-
|
|
1080
|
+
var itemCount = this.getItemCount();
|
|
1037
1081
|
if (itemCount <= 0 || !isOpen) {
|
|
1038
1082
|
return;
|
|
1039
1083
|
}
|
|
1040
1084
|
|
|
1041
1085
|
// get next non-disabled starting upwards from last index if that's disabled.
|
|
1042
|
-
|
|
1086
|
+
var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) {
|
|
1087
|
+
return _this5.getItemNodeFromIndex(index);
|
|
1088
|
+
}, false);
|
|
1043
1089
|
this.setHighlightedIndex(newHighlightedIndex, {
|
|
1044
1090
|
type: keyDownEnd
|
|
1045
1091
|
});
|
|
1046
1092
|
}
|
|
1047
|
-
};
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
onClick
|
|
1051
|
-
onPress
|
|
1052
|
-
onKeyDown,
|
|
1053
|
-
onKeyUp,
|
|
1054
|
-
onBlur,
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
} = _this.getState();
|
|
1060
|
-
const enabledEventHandlers = {
|
|
1093
|
+
});
|
|
1094
|
+
_this.getToggleButtonProps = function (_temp3) {
|
|
1095
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
1096
|
+
onClick = _ref3.onClick;
|
|
1097
|
+
_ref3.onPress;
|
|
1098
|
+
var onKeyDown = _ref3.onKeyDown,
|
|
1099
|
+
onKeyUp = _ref3.onKeyUp,
|
|
1100
|
+
onBlur = _ref3.onBlur,
|
|
1101
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
1102
|
+
var _this$getState5 = _this.getState(),
|
|
1103
|
+
isOpen = _this$getState5.isOpen;
|
|
1104
|
+
var enabledEventHandlers = {
|
|
1061
1105
|
onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
|
|
1062
1106
|
onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
|
|
1063
1107
|
onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
|
|
1064
1108
|
onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
|
|
1065
1109
|
};
|
|
1066
|
-
|
|
1067
|
-
return {
|
|
1110
|
+
var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
|
|
1111
|
+
return _extends({
|
|
1068
1112
|
type: 'button',
|
|
1069
1113
|
role: 'button',
|
|
1070
1114
|
'aria-label': isOpen ? 'close menu' : 'open menu',
|
|
1071
1115
|
'aria-haspopup': true,
|
|
1072
|
-
'data-toggle': true
|
|
1073
|
-
|
|
1074
|
-
...rest
|
|
1075
|
-
};
|
|
1116
|
+
'data-toggle': true
|
|
1117
|
+
}, eventHandlers, rest);
|
|
1076
1118
|
};
|
|
1077
|
-
|
|
1119
|
+
_this.buttonHandleKeyUp = function (event) {
|
|
1078
1120
|
// Prevent click event from emitting in Firefox
|
|
1079
1121
|
event.preventDefault();
|
|
1080
1122
|
};
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
if (
|
|
1084
|
-
|
|
1123
|
+
_this.buttonHandleKeyDown = function (event) {
|
|
1124
|
+
var key = normalizeArrowKey(event);
|
|
1125
|
+
if (_this.buttonKeyDownHandlers[key]) {
|
|
1126
|
+
_this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
|
|
1085
1127
|
}
|
|
1086
1128
|
};
|
|
1087
|
-
|
|
1129
|
+
_this.buttonHandleClick = function (event) {
|
|
1088
1130
|
event.preventDefault();
|
|
1089
1131
|
// handle odd case for Safari and Firefox which
|
|
1090
1132
|
// don't give the button the focus properly.
|
|
1091
1133
|
/* istanbul ignore if (can't reasonably test this) */
|
|
1092
|
-
if (
|
|
1134
|
+
if (_this.props.environment.document.activeElement === _this.props.environment.document.body) {
|
|
1093
1135
|
event.target.focus();
|
|
1094
1136
|
}
|
|
1095
1137
|
// to simplify testing components that use downshift, we'll not wrap this in a setTimeout
|
|
@@ -1097,59 +1139,55 @@
|
|
|
1097
1139
|
// when building for production and should therefore have no impact on production code.
|
|
1098
1140
|
{
|
|
1099
1141
|
// Ensure that toggle of menu occurs after the potential blur event in iOS
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1142
|
+
_this.internalSetTimeout(function () {
|
|
1143
|
+
return _this.toggleMenu({
|
|
1144
|
+
type: clickButton
|
|
1145
|
+
});
|
|
1146
|
+
});
|
|
1103
1147
|
}
|
|
1104
1148
|
};
|
|
1105
|
-
|
|
1106
|
-
|
|
1149
|
+
_this.buttonHandleBlur = function (event) {
|
|
1150
|
+
var blurTarget = event.target; // Save blur target for comparison with activeElement later
|
|
1107
1151
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
|
|
1108
|
-
|
|
1109
|
-
if (!
|
|
1152
|
+
_this.internalSetTimeout(function () {
|
|
1153
|
+
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)
|
|
1110
1154
|
) {
|
|
1111
|
-
|
|
1155
|
+
_this.reset({
|
|
1112
1156
|
type: blurButton
|
|
1113
1157
|
});
|
|
1114
1158
|
}
|
|
1115
1159
|
});
|
|
1116
1160
|
};
|
|
1117
|
-
|
|
1118
|
-
return {
|
|
1119
|
-
htmlFor:
|
|
1120
|
-
id:
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
let onChangeKey;
|
|
1134
|
-
let eventHandlers = {};
|
|
1161
|
+
_this.getLabelProps = function (props) {
|
|
1162
|
+
return _extends({
|
|
1163
|
+
htmlFor: _this.inputId,
|
|
1164
|
+
id: _this.labelId
|
|
1165
|
+
}, props);
|
|
1166
|
+
};
|
|
1167
|
+
_this.getInputProps = function (_temp4) {
|
|
1168
|
+
var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
|
1169
|
+
onKeyDown = _ref4.onKeyDown,
|
|
1170
|
+
onBlur = _ref4.onBlur,
|
|
1171
|
+
onChange = _ref4.onChange,
|
|
1172
|
+
onInput = _ref4.onInput;
|
|
1173
|
+
_ref4.onChangeText;
|
|
1174
|
+
var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
|
|
1175
|
+
var onChangeKey;
|
|
1176
|
+
var eventHandlers = {};
|
|
1135
1177
|
|
|
1136
1178
|
/* istanbul ignore next (preact) */
|
|
1137
1179
|
{
|
|
1138
1180
|
onChangeKey = 'onInput';
|
|
1139
1181
|
}
|
|
1140
|
-
|
|
1141
|
-
inputValue,
|
|
1142
|
-
isOpen,
|
|
1143
|
-
highlightedIndex
|
|
1144
|
-
} = _this.getState();
|
|
1182
|
+
var _this$getState6 = _this.getState(),
|
|
1183
|
+
inputValue = _this$getState6.inputValue,
|
|
1184
|
+
isOpen = _this$getState6.isOpen,
|
|
1185
|
+
highlightedIndex = _this$getState6.highlightedIndex;
|
|
1145
1186
|
if (!rest.disabled) {
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
|
|
1149
|
-
onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
|
|
1150
|
-
};
|
|
1187
|
+
var _eventHandlers;
|
|
1188
|
+
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
|
|
1151
1189
|
}
|
|
1152
|
-
return {
|
|
1190
|
+
return _extends({
|
|
1153
1191
|
'aria-autocomplete': 'list',
|
|
1154
1192
|
'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
|
|
1155
1193
|
'aria-controls': isOpen ? _this.menuId : null,
|
|
@@ -1158,82 +1196,76 @@
|
|
|
1158
1196
|
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
1159
1197
|
autoComplete: 'off',
|
|
1160
1198
|
value: inputValue,
|
|
1161
|
-
id: _this.inputId
|
|
1162
|
-
|
|
1163
|
-
...rest
|
|
1164
|
-
};
|
|
1199
|
+
id: _this.inputId
|
|
1200
|
+
}, eventHandlers, rest);
|
|
1165
1201
|
};
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
if (key &&
|
|
1169
|
-
|
|
1202
|
+
_this.inputHandleKeyDown = function (event) {
|
|
1203
|
+
var key = normalizeArrowKey(event);
|
|
1204
|
+
if (key && _this.inputKeyDownHandlers[key]) {
|
|
1205
|
+
_this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
|
|
1170
1206
|
}
|
|
1171
1207
|
};
|
|
1172
|
-
|
|
1173
|
-
|
|
1208
|
+
_this.inputHandleChange = function (event) {
|
|
1209
|
+
_this.internalSetState({
|
|
1174
1210
|
type: changeInput,
|
|
1175
1211
|
isOpen: true,
|
|
1176
1212
|
inputValue: event.target.value,
|
|
1177
|
-
highlightedIndex:
|
|
1213
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
1178
1214
|
});
|
|
1179
1215
|
};
|
|
1180
|
-
|
|
1216
|
+
_this.inputHandleBlur = function () {
|
|
1181
1217
|
// Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
if (!
|
|
1185
|
-
|
|
1218
|
+
_this.internalSetTimeout(function () {
|
|
1219
|
+
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);
|
|
1220
|
+
if (!_this.isMouseDown && !downshiftButtonIsActive) {
|
|
1221
|
+
_this.reset({
|
|
1186
1222
|
type: blurInput
|
|
1187
1223
|
});
|
|
1188
1224
|
}
|
|
1189
1225
|
});
|
|
1190
1226
|
};
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
};
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1227
|
+
_this.menuRef = function (node) {
|
|
1228
|
+
_this._menuNode = node;
|
|
1229
|
+
};
|
|
1230
|
+
_this.getMenuProps = function (_temp5, _temp6) {
|
|
1231
|
+
var _extends3;
|
|
1232
|
+
var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
|
1233
|
+
_ref5$refKey = _ref5.refKey,
|
|
1234
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
1235
|
+
ref = _ref5.ref,
|
|
1236
|
+
props = _objectWithoutPropertiesLoose(_ref5, _excluded4$1);
|
|
1237
|
+
var _ref6 = _temp6 === void 0 ? {} : _temp6,
|
|
1238
|
+
_ref6$suppressRefErro = _ref6.suppressRefError,
|
|
1239
|
+
suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
|
|
1203
1240
|
_this.getMenuProps.called = true;
|
|
1204
1241
|
_this.getMenuProps.refKey = refKey;
|
|
1205
1242
|
_this.getMenuProps.suppressRefError = suppressRefError;
|
|
1206
|
-
return {
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
onPress,
|
|
1220
|
-
index,
|
|
1221
|
-
item = requiredProp('getItemProps', 'item'),
|
|
1222
|
-
...rest
|
|
1223
|
-
} = _temp7 === void 0 ? {} : _temp7;
|
|
1243
|
+
return _extends((_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);
|
|
1244
|
+
};
|
|
1245
|
+
_this.getItemProps = function (_temp7) {
|
|
1246
|
+
var _enabledEventHandlers;
|
|
1247
|
+
var _ref7 = _temp7 === void 0 ? {} : _temp7,
|
|
1248
|
+
onMouseMove = _ref7.onMouseMove,
|
|
1249
|
+
onMouseDown = _ref7.onMouseDown,
|
|
1250
|
+
onClick = _ref7.onClick;
|
|
1251
|
+
_ref7.onPress;
|
|
1252
|
+
var index = _ref7.index,
|
|
1253
|
+
_ref7$item = _ref7.item,
|
|
1254
|
+
item = _ref7$item === void 0 ? requiredProp('getItemProps', 'item') : _ref7$item,
|
|
1255
|
+
rest = _objectWithoutPropertiesLoose(_ref7, _excluded5);
|
|
1224
1256
|
if (index === undefined) {
|
|
1225
1257
|
_this.items.push(item);
|
|
1226
1258
|
index = _this.items.indexOf(item);
|
|
1227
1259
|
} else {
|
|
1228
1260
|
_this.items[index] = item;
|
|
1229
1261
|
}
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1262
|
+
var onSelectKey = 'onClick';
|
|
1263
|
+
var customClickHandler = onClick;
|
|
1264
|
+
var enabledEventHandlers = (_enabledEventHandlers = {
|
|
1233
1265
|
// onMouseMove is used over onMouseEnter here. onMouseMove
|
|
1234
1266
|
// is only triggered on actual mouse movement while onMouseEnter
|
|
1235
1267
|
// can fire on DOM changes, interrupting keyboard navigation
|
|
1236
|
-
onMouseMove: callAllEventHandlers(onMouseMove, ()
|
|
1268
|
+
onMouseMove: callAllEventHandlers(onMouseMove, function () {
|
|
1237
1269
|
if (index === _this.getState().highlightedIndex) {
|
|
1238
1270
|
return;
|
|
1239
1271
|
}
|
|
@@ -1246,75 +1278,66 @@
|
|
|
1246
1278
|
// from under the user which is currently scrolling/moving the
|
|
1247
1279
|
// cursor
|
|
1248
1280
|
_this.avoidScrolling = true;
|
|
1249
|
-
_this.internalSetTimeout(()
|
|
1281
|
+
_this.internalSetTimeout(function () {
|
|
1282
|
+
return _this.avoidScrolling = false;
|
|
1283
|
+
}, 250);
|
|
1250
1284
|
}),
|
|
1251
|
-
onMouseDown: callAllEventHandlers(onMouseDown, event
|
|
1285
|
+
onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
|
|
1252
1286
|
// This prevents the activeElement from being changed
|
|
1253
1287
|
// to the item so it can remain with the current activeElement
|
|
1254
1288
|
// which is a more common use case.
|
|
1255
1289
|
event.preventDefault();
|
|
1256
|
-
}),
|
|
1257
|
-
[onSelectKey]: callAllEventHandlers(customClickHandler, () => {
|
|
1258
|
-
_this.selectItemAtIndex(index, {
|
|
1259
|
-
type: clickItem
|
|
1260
|
-
});
|
|
1261
1290
|
})
|
|
1262
|
-
}
|
|
1291
|
+
}, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
|
|
1292
|
+
_this.selectItemAtIndex(index, {
|
|
1293
|
+
type: clickItem
|
|
1294
|
+
});
|
|
1295
|
+
}), _enabledEventHandlers);
|
|
1263
1296
|
|
|
1264
1297
|
// Passing down the onMouseDown handler to prevent redirect
|
|
1265
1298
|
// of the activeElement if clicking on disabled items
|
|
1266
|
-
|
|
1299
|
+
var eventHandlers = rest.disabled ? {
|
|
1267
1300
|
onMouseDown: enabledEventHandlers.onMouseDown
|
|
1268
1301
|
} : enabledEventHandlers;
|
|
1269
|
-
return {
|
|
1302
|
+
return _extends({
|
|
1270
1303
|
id: _this.getItemId(index),
|
|
1271
1304
|
role: 'option',
|
|
1272
|
-
'aria-selected': _this.getState().highlightedIndex === index
|
|
1273
|
-
|
|
1274
|
-
...rest
|
|
1275
|
-
};
|
|
1305
|
+
'aria-selected': _this.getState().highlightedIndex === index
|
|
1306
|
+
}, eventHandlers, rest);
|
|
1276
1307
|
};
|
|
1277
|
-
|
|
1278
|
-
|
|
1308
|
+
_this.clearItems = function () {
|
|
1309
|
+
_this.items = [];
|
|
1279
1310
|
};
|
|
1280
|
-
|
|
1311
|
+
_this.reset = function (otherStateToSet, cb) {
|
|
1281
1312
|
if (otherStateToSet === void 0) {
|
|
1282
1313
|
otherStateToSet = {};
|
|
1283
1314
|
}
|
|
1284
1315
|
otherStateToSet = pickState(otherStateToSet);
|
|
1285
|
-
_this.internalSetState(
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
} = _ref;
|
|
1289
|
-
return {
|
|
1316
|
+
_this.internalSetState(function (_ref8) {
|
|
1317
|
+
var selectedItem = _ref8.selectedItem;
|
|
1318
|
+
return _extends({
|
|
1290
1319
|
isOpen: _this.props.defaultIsOpen,
|
|
1291
1320
|
highlightedIndex: _this.props.defaultHighlightedIndex,
|
|
1292
|
-
inputValue: _this.props.itemToString(selectedItem)
|
|
1293
|
-
|
|
1294
|
-
};
|
|
1321
|
+
inputValue: _this.props.itemToString(selectedItem)
|
|
1322
|
+
}, otherStateToSet);
|
|
1295
1323
|
}, cb);
|
|
1296
1324
|
};
|
|
1297
|
-
|
|
1325
|
+
_this.toggleMenu = function (otherStateToSet, cb) {
|
|
1298
1326
|
if (otherStateToSet === void 0) {
|
|
1299
1327
|
otherStateToSet = {};
|
|
1300
1328
|
}
|
|
1301
1329
|
otherStateToSet = pickState(otherStateToSet);
|
|
1302
|
-
_this.internalSetState(
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
}, () => {
|
|
1314
|
-
const {
|
|
1315
|
-
isOpen,
|
|
1316
|
-
highlightedIndex
|
|
1317
|
-
} = _this.getState();
|
|
1330
|
+
_this.internalSetState(function (_ref9) {
|
|
1331
|
+
var isOpen = _ref9.isOpen;
|
|
1332
|
+
return _extends({
|
|
1333
|
+
isOpen: !isOpen
|
|
1334
|
+
}, isOpen && {
|
|
1335
|
+
highlightedIndex: _this.props.defaultHighlightedIndex
|
|
1336
|
+
}, otherStateToSet);
|
|
1337
|
+
}, function () {
|
|
1338
|
+
var _this$getState7 = _this.getState(),
|
|
1339
|
+
isOpen = _this$getState7.isOpen,
|
|
1340
|
+
highlightedIndex = _this$getState7.highlightedIndex;
|
|
1318
1341
|
if (isOpen) {
|
|
1319
1342
|
if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
|
|
1320
1343
|
_this.setHighlightedIndex(highlightedIndex, otherStateToSet);
|
|
@@ -1323,57 +1346,58 @@
|
|
|
1323
1346
|
cbToCb(cb)();
|
|
1324
1347
|
});
|
|
1325
1348
|
};
|
|
1326
|
-
|
|
1327
|
-
|
|
1349
|
+
_this.openMenu = function (cb) {
|
|
1350
|
+
_this.internalSetState({
|
|
1328
1351
|
isOpen: true
|
|
1329
1352
|
}, cb);
|
|
1330
1353
|
};
|
|
1331
|
-
|
|
1332
|
-
|
|
1354
|
+
_this.closeMenu = function (cb) {
|
|
1355
|
+
_this.internalSetState({
|
|
1333
1356
|
isOpen: false
|
|
1334
1357
|
}, cb);
|
|
1335
1358
|
};
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
itemToString:
|
|
1342
|
-
previousResultCount:
|
|
1343
|
-
resultCount,
|
|
1344
|
-
highlightedItem: item
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
setStatus(status, this.props.environment.document);
|
|
1359
|
+
_this.updateStatus = debounce(function () {
|
|
1360
|
+
var state = _this.getState();
|
|
1361
|
+
var item = _this.items[state.highlightedIndex];
|
|
1362
|
+
var resultCount = _this.getItemCount();
|
|
1363
|
+
var status = _this.props.getA11yStatusMessage(_extends({
|
|
1364
|
+
itemToString: _this.props.itemToString,
|
|
1365
|
+
previousResultCount: _this.previousResultCount,
|
|
1366
|
+
resultCount: resultCount,
|
|
1367
|
+
highlightedItem: item
|
|
1368
|
+
}, state));
|
|
1369
|
+
_this.previousResultCount = resultCount;
|
|
1370
|
+
setStatus(status, _this.props.environment.document);
|
|
1349
1371
|
}, 200);
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
defaultIsOpen,
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1372
|
+
var _this$props = _this.props,
|
|
1373
|
+
defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
|
|
1374
|
+
_this$props$initialHi = _this$props.initialHighlightedIndex,
|
|
1375
|
+
_highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
|
|
1376
|
+
defaultIsOpen = _this$props.defaultIsOpen,
|
|
1377
|
+
_this$props$initialIs = _this$props.initialIsOpen,
|
|
1378
|
+
_isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
|
|
1379
|
+
_this$props$initialIn = _this$props.initialInputValue,
|
|
1380
|
+
_inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
|
|
1381
|
+
_this$props$initialSe = _this$props.initialSelectedItem,
|
|
1382
|
+
_selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
|
|
1383
|
+
var _state = _this.getState({
|
|
1362
1384
|
highlightedIndex: _highlightedIndex,
|
|
1363
1385
|
isOpen: _isOpen,
|
|
1364
1386
|
inputValue: _inputValue,
|
|
1365
1387
|
selectedItem: _selectedItem
|
|
1366
1388
|
});
|
|
1367
|
-
if (_state.selectedItem != null &&
|
|
1368
|
-
_state.inputValue =
|
|
1389
|
+
if (_state.selectedItem != null && _this.props.initialInputValue === undefined) {
|
|
1390
|
+
_state.inputValue = _this.props.itemToString(_state.selectedItem);
|
|
1369
1391
|
}
|
|
1370
|
-
|
|
1392
|
+
_this.state = _state;
|
|
1393
|
+
return _this;
|
|
1371
1394
|
}
|
|
1395
|
+
var _proto = Downshift.prototype;
|
|
1372
1396
|
/**
|
|
1373
1397
|
* Clear all running timeouts
|
|
1374
1398
|
*/
|
|
1375
|
-
internalClearTimeouts() {
|
|
1376
|
-
this.timeoutIds.forEach(id
|
|
1399
|
+
_proto.internalClearTimeouts = function internalClearTimeouts() {
|
|
1400
|
+
this.timeoutIds.forEach(function (id) {
|
|
1377
1401
|
clearTimeout(id);
|
|
1378
1402
|
});
|
|
1379
1403
|
this.timeoutIds = [];
|
|
@@ -1387,117 +1411,113 @@
|
|
|
1387
1411
|
*
|
|
1388
1412
|
* @param {Object} stateToMerge defaults to this.state
|
|
1389
1413
|
* @return {Object} the state
|
|
1390
|
-
|
|
1391
|
-
getState(stateToMerge) {
|
|
1414
|
+
*/;
|
|
1415
|
+
_proto.getState = function getState$1(stateToMerge) {
|
|
1392
1416
|
if (stateToMerge === void 0) {
|
|
1393
1417
|
stateToMerge = this.state;
|
|
1394
1418
|
}
|
|
1395
1419
|
return getState(stateToMerge, this.props);
|
|
1396
|
-
}
|
|
1397
|
-
getItemCount() {
|
|
1420
|
+
};
|
|
1421
|
+
_proto.getItemCount = function getItemCount() {
|
|
1398
1422
|
// things read better this way. They're in priority order:
|
|
1399
1423
|
// 1. `this.itemCount`
|
|
1400
1424
|
// 2. `this.props.itemCount`
|
|
1401
1425
|
// 3. `this.items.length`
|
|
1402
|
-
|
|
1426
|
+
var itemCount = this.items.length;
|
|
1403
1427
|
if (this.itemCount != null) {
|
|
1404
1428
|
itemCount = this.itemCount;
|
|
1405
1429
|
} else if (this.props.itemCount !== undefined) {
|
|
1406
1430
|
itemCount = this.props.itemCount;
|
|
1407
1431
|
}
|
|
1408
1432
|
return itemCount;
|
|
1409
|
-
}
|
|
1410
|
-
getItemNodeFromIndex(index) {
|
|
1433
|
+
};
|
|
1434
|
+
_proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
|
|
1411
1435
|
return this.props.environment.document.getElementById(this.getItemId(index));
|
|
1412
|
-
}
|
|
1413
|
-
scrollHighlightedItemIntoView() {
|
|
1436
|
+
};
|
|
1437
|
+
_proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
|
|
1414
1438
|
/* istanbul ignore else (react-native) */
|
|
1415
1439
|
{
|
|
1416
|
-
|
|
1440
|
+
var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
|
|
1417
1441
|
this.props.scrollIntoView(node, this._menuNode);
|
|
1418
1442
|
}
|
|
1419
|
-
}
|
|
1420
|
-
moveHighlightedIndex(amount, otherStateToSet) {
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1443
|
+
};
|
|
1444
|
+
_proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
|
|
1445
|
+
var _this6 = this;
|
|
1446
|
+
var itemCount = this.getItemCount();
|
|
1447
|
+
var _this$getState8 = this.getState(),
|
|
1448
|
+
highlightedIndex = _this$getState8.highlightedIndex;
|
|
1425
1449
|
if (itemCount > 0) {
|
|
1426
|
-
|
|
1450
|
+
var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
|
|
1451
|
+
return _this6.getItemNodeFromIndex(index);
|
|
1452
|
+
});
|
|
1427
1453
|
this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
|
|
1428
1454
|
}
|
|
1429
|
-
}
|
|
1430
|
-
getStateAndHelpers() {
|
|
1431
|
-
|
|
1432
|
-
highlightedIndex,
|
|
1433
|
-
inputValue,
|
|
1434
|
-
selectedItem,
|
|
1435
|
-
isOpen
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
clearSelection,
|
|
1458
|
-
clearItems,
|
|
1459
|
-
reset,
|
|
1460
|
-
setItemCount,
|
|
1461
|
-
unsetItemCount,
|
|
1462
|
-
internalSetState: setState
|
|
1463
|
-
} = this;
|
|
1455
|
+
};
|
|
1456
|
+
_proto.getStateAndHelpers = function getStateAndHelpers() {
|
|
1457
|
+
var _this$getState9 = this.getState(),
|
|
1458
|
+
highlightedIndex = _this$getState9.highlightedIndex,
|
|
1459
|
+
inputValue = _this$getState9.inputValue,
|
|
1460
|
+
selectedItem = _this$getState9.selectedItem,
|
|
1461
|
+
isOpen = _this$getState9.isOpen;
|
|
1462
|
+
var itemToString = this.props.itemToString;
|
|
1463
|
+
var id = this.id;
|
|
1464
|
+
var getRootProps = this.getRootProps,
|
|
1465
|
+
getToggleButtonProps = this.getToggleButtonProps,
|
|
1466
|
+
getLabelProps = this.getLabelProps,
|
|
1467
|
+
getMenuProps = this.getMenuProps,
|
|
1468
|
+
getInputProps = this.getInputProps,
|
|
1469
|
+
getItemProps = this.getItemProps,
|
|
1470
|
+
openMenu = this.openMenu,
|
|
1471
|
+
closeMenu = this.closeMenu,
|
|
1472
|
+
toggleMenu = this.toggleMenu,
|
|
1473
|
+
selectItem = this.selectItem,
|
|
1474
|
+
selectItemAtIndex = this.selectItemAtIndex,
|
|
1475
|
+
selectHighlightedItem = this.selectHighlightedItem,
|
|
1476
|
+
setHighlightedIndex = this.setHighlightedIndex,
|
|
1477
|
+
clearSelection = this.clearSelection,
|
|
1478
|
+
clearItems = this.clearItems,
|
|
1479
|
+
reset = this.reset,
|
|
1480
|
+
setItemCount = this.setItemCount,
|
|
1481
|
+
unsetItemCount = this.unsetItemCount,
|
|
1482
|
+
setState = this.internalSetState;
|
|
1464
1483
|
return {
|
|
1465
1484
|
// prop getters
|
|
1466
|
-
getRootProps,
|
|
1467
|
-
getToggleButtonProps,
|
|
1468
|
-
getLabelProps,
|
|
1469
|
-
getMenuProps,
|
|
1470
|
-
getInputProps,
|
|
1471
|
-
getItemProps,
|
|
1485
|
+
getRootProps: getRootProps,
|
|
1486
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
1487
|
+
getLabelProps: getLabelProps,
|
|
1488
|
+
getMenuProps: getMenuProps,
|
|
1489
|
+
getInputProps: getInputProps,
|
|
1490
|
+
getItemProps: getItemProps,
|
|
1472
1491
|
// actions
|
|
1473
|
-
reset,
|
|
1474
|
-
openMenu,
|
|
1475
|
-
closeMenu,
|
|
1476
|
-
toggleMenu,
|
|
1477
|
-
selectItem,
|
|
1478
|
-
selectItemAtIndex,
|
|
1479
|
-
selectHighlightedItem,
|
|
1480
|
-
setHighlightedIndex,
|
|
1481
|
-
clearSelection,
|
|
1482
|
-
clearItems,
|
|
1483
|
-
setItemCount,
|
|
1484
|
-
unsetItemCount,
|
|
1485
|
-
setState,
|
|
1492
|
+
reset: reset,
|
|
1493
|
+
openMenu: openMenu,
|
|
1494
|
+
closeMenu: closeMenu,
|
|
1495
|
+
toggleMenu: toggleMenu,
|
|
1496
|
+
selectItem: selectItem,
|
|
1497
|
+
selectItemAtIndex: selectItemAtIndex,
|
|
1498
|
+
selectHighlightedItem: selectHighlightedItem,
|
|
1499
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
1500
|
+
clearSelection: clearSelection,
|
|
1501
|
+
clearItems: clearItems,
|
|
1502
|
+
setItemCount: setItemCount,
|
|
1503
|
+
unsetItemCount: unsetItemCount,
|
|
1504
|
+
setState: setState,
|
|
1486
1505
|
// props
|
|
1487
|
-
itemToString,
|
|
1506
|
+
itemToString: itemToString,
|
|
1488
1507
|
// derived
|
|
1489
|
-
id,
|
|
1508
|
+
id: id,
|
|
1490
1509
|
// state
|
|
1491
|
-
highlightedIndex,
|
|
1492
|
-
inputValue,
|
|
1493
|
-
isOpen,
|
|
1494
|
-
selectedItem
|
|
1510
|
+
highlightedIndex: highlightedIndex,
|
|
1511
|
+
inputValue: inputValue,
|
|
1512
|
+
isOpen: isOpen,
|
|
1513
|
+
selectedItem: selectedItem
|
|
1495
1514
|
};
|
|
1496
1515
|
}
|
|
1497
1516
|
|
|
1498
1517
|
//////////////////////////// ROOT
|
|
1499
|
-
|
|
1500
|
-
componentDidMount() {
|
|
1518
|
+
;
|
|
1519
|
+
_proto.componentDidMount = function componentDidMount() {
|
|
1520
|
+
var _this7 = this;
|
|
1501
1521
|
/* istanbul ignore if (react-native) */
|
|
1502
1522
|
if (this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
|
|
1503
1523
|
validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
|
|
@@ -1510,18 +1530,20 @@
|
|
|
1510
1530
|
// down long enough for the list to disappear (because the blur event fires on the input)
|
|
1511
1531
|
// this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
|
|
1512
1532
|
// trigger hiding the menu.
|
|
1513
|
-
|
|
1514
|
-
|
|
1533
|
+
var onMouseDown = function onMouseDown() {
|
|
1534
|
+
_this7.isMouseDown = true;
|
|
1515
1535
|
};
|
|
1516
|
-
|
|
1517
|
-
|
|
1536
|
+
var onMouseUp = function onMouseUp(event) {
|
|
1537
|
+
_this7.isMouseDown = false;
|
|
1518
1538
|
// if the target element or the activeElement is within a downshift node
|
|
1519
1539
|
// then we don't want to reset downshift
|
|
1520
|
-
|
|
1521
|
-
if (!contextWithinDownshift &&
|
|
1522
|
-
|
|
1540
|
+
var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment);
|
|
1541
|
+
if (!contextWithinDownshift && _this7.getState().isOpen) {
|
|
1542
|
+
_this7.reset({
|
|
1523
1543
|
type: mouseUp
|
|
1524
|
-
}, ()
|
|
1544
|
+
}, function () {
|
|
1545
|
+
return _this7.props.onOuterClick(_this7.getStateAndHelpers());
|
|
1546
|
+
});
|
|
1525
1547
|
}
|
|
1526
1548
|
};
|
|
1527
1549
|
// Touching an element in iOS gives focus and hover states, but touching out of
|
|
@@ -1530,31 +1552,31 @@
|
|
|
1530
1552
|
// this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
|
|
1531
1553
|
// If the user taps outside of Downshift, the component should be reset,
|
|
1532
1554
|
// but not if the user is swiping
|
|
1533
|
-
|
|
1534
|
-
|
|
1555
|
+
var onTouchStart = function onTouchStart() {
|
|
1556
|
+
_this7.isTouchMove = false;
|
|
1535
1557
|
};
|
|
1536
|
-
|
|
1537
|
-
|
|
1558
|
+
var onTouchMove = function onTouchMove() {
|
|
1559
|
+
_this7.isTouchMove = true;
|
|
1538
1560
|
};
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
if (!
|
|
1542
|
-
|
|
1561
|
+
var onTouchEnd = function onTouchEnd(event) {
|
|
1562
|
+
var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment, false);
|
|
1563
|
+
if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
|
|
1564
|
+
_this7.reset({
|
|
1543
1565
|
type: touchEnd
|
|
1544
|
-
}, ()
|
|
1566
|
+
}, function () {
|
|
1567
|
+
return _this7.props.onOuterClick(_this7.getStateAndHelpers());
|
|
1568
|
+
});
|
|
1545
1569
|
}
|
|
1546
1570
|
};
|
|
1547
|
-
|
|
1548
|
-
environment
|
|
1549
|
-
} = this.props;
|
|
1571
|
+
var environment = this.props.environment;
|
|
1550
1572
|
environment.addEventListener('mousedown', onMouseDown);
|
|
1551
1573
|
environment.addEventListener('mouseup', onMouseUp);
|
|
1552
1574
|
environment.addEventListener('touchstart', onTouchStart);
|
|
1553
1575
|
environment.addEventListener('touchmove', onTouchMove);
|
|
1554
1576
|
environment.addEventListener('touchend', onTouchEnd);
|
|
1555
|
-
this.cleanup = ()
|
|
1556
|
-
|
|
1557
|
-
|
|
1577
|
+
this.cleanup = function () {
|
|
1578
|
+
_this7.internalClearTimeouts();
|
|
1579
|
+
_this7.updateStatus.cancel();
|
|
1558
1580
|
environment.removeEventListener('mousedown', onMouseDown);
|
|
1559
1581
|
environment.removeEventListener('mouseup', onMouseUp);
|
|
1560
1582
|
environment.removeEventListener('touchstart', onTouchStart);
|
|
@@ -1562,19 +1584,17 @@
|
|
|
1562
1584
|
environment.removeEventListener('touchend', onTouchEnd);
|
|
1563
1585
|
};
|
|
1564
1586
|
}
|
|
1565
|
-
}
|
|
1566
|
-
shouldScroll(prevState, prevProps) {
|
|
1567
|
-
|
|
1568
|
-
highlightedIndex
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1574
|
-
const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1587
|
+
};
|
|
1588
|
+
_proto.shouldScroll = function shouldScroll(prevState, prevProps) {
|
|
1589
|
+
var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
|
|
1590
|
+
currentHighlightedIndex = _ref10.highlightedIndex;
|
|
1591
|
+
var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
|
|
1592
|
+
prevHighlightedIndex = _ref11.highlightedIndex;
|
|
1593
|
+
var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
|
|
1594
|
+
var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
|
|
1575
1595
|
return scrollWhenOpen || scrollWhenNavigating;
|
|
1576
|
-
}
|
|
1577
|
-
componentDidUpdate(prevProps, prevState) {
|
|
1596
|
+
};
|
|
1597
|
+
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
|
1578
1598
|
{
|
|
1579
1599
|
validateControlledUnchanged(this.state, prevProps, this.props);
|
|
1580
1600
|
/* istanbul ignore if (react-native) */
|
|
@@ -1596,13 +1616,12 @@
|
|
|
1596
1616
|
{
|
|
1597
1617
|
this.updateStatus();
|
|
1598
1618
|
}
|
|
1599
|
-
}
|
|
1600
|
-
componentWillUnmount() {
|
|
1619
|
+
};
|
|
1620
|
+
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
1601
1621
|
this.cleanup(); // avoids memory leak
|
|
1602
|
-
}
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
const children = unwrapArray(this.props.children, noop);
|
|
1622
|
+
};
|
|
1623
|
+
_proto.render = function render() {
|
|
1624
|
+
var children = unwrapArray(this.props.children, noop);
|
|
1606
1625
|
// because the items are rerendered every time we call the children
|
|
1607
1626
|
// we clear this out each render and it will be populated again as
|
|
1608
1627
|
// getItemProps is called.
|
|
@@ -1622,7 +1641,7 @@
|
|
|
1622
1641
|
this.getLabelProps.called = false;
|
|
1623
1642
|
// and something similar for getInputProps
|
|
1624
1643
|
this.getInputProps.called = false;
|
|
1625
|
-
|
|
1644
|
+
var element = unwrapArray(children(this.getStateAndHelpers()));
|
|
1626
1645
|
if (!element) {
|
|
1627
1646
|
return null;
|
|
1628
1647
|
}
|
|
@@ -1644,13 +1663,14 @@
|
|
|
1644
1663
|
|
|
1645
1664
|
throw new Error('downshift: If you return a non-DOM element, you must apply the getRootProps function');
|
|
1646
1665
|
}
|
|
1647
|
-
}
|
|
1648
|
-
|
|
1666
|
+
};
|
|
1667
|
+
return Downshift;
|
|
1668
|
+
}(preact.Component);
|
|
1649
1669
|
Downshift.defaultProps = {
|
|
1650
1670
|
defaultHighlightedIndex: null,
|
|
1651
1671
|
defaultIsOpen: false,
|
|
1652
1672
|
getA11yStatusMessage: getA11yStatusMessage$1,
|
|
1653
|
-
itemToString: i
|
|
1673
|
+
itemToString: function itemToString(i) {
|
|
1654
1674
|
if (i == null) {
|
|
1655
1675
|
return '';
|
|
1656
1676
|
}
|
|
@@ -1666,81 +1686,76 @@
|
|
|
1666
1686
|
onChange: noop,
|
|
1667
1687
|
onSelect: noop,
|
|
1668
1688
|
onOuterClick: noop,
|
|
1669
|
-
selectedItemChanged: (prevItem, item)
|
|
1689
|
+
selectedItemChanged: function selectedItemChanged(prevItem, item) {
|
|
1690
|
+
return prevItem !== item;
|
|
1691
|
+
},
|
|
1670
1692
|
environment: /* istanbul ignore next (ssr) */
|
|
1671
1693
|
typeof window === 'undefined' ? {} : window,
|
|
1672
|
-
stateReducer: (state, stateToSet)
|
|
1694
|
+
stateReducer: function stateReducer(state, stateToSet) {
|
|
1695
|
+
return stateToSet;
|
|
1696
|
+
},
|
|
1673
1697
|
suppressRefError: false,
|
|
1674
|
-
scrollIntoView
|
|
1698
|
+
scrollIntoView: scrollIntoView
|
|
1675
1699
|
};
|
|
1676
1700
|
Downshift.stateChangeTypes = stateChangeTypes$3;
|
|
1677
1701
|
return Downshift;
|
|
1678
|
-
}
|
|
1702
|
+
}();
|
|
1679
1703
|
var Downshift$1 = Downshift;
|
|
1680
|
-
function validateGetMenuPropsCalledCorrectly(node,
|
|
1681
|
-
|
|
1682
|
-
refKey
|
|
1683
|
-
} = _ref3;
|
|
1704
|
+
function validateGetMenuPropsCalledCorrectly(node, _ref12) {
|
|
1705
|
+
var refKey = _ref12.refKey;
|
|
1684
1706
|
if (!node) {
|
|
1685
1707
|
// eslint-disable-next-line no-console
|
|
1686
|
-
console.error(
|
|
1708
|
+
console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
|
|
1687
1709
|
}
|
|
1688
1710
|
}
|
|
1689
|
-
function validateGetRootPropsCalledCorrectly(element,
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
const refKeySpecified = refKey !== 'ref';
|
|
1694
|
-
const isComposite = !isDOMElement(element);
|
|
1711
|
+
function validateGetRootPropsCalledCorrectly(element, _ref13) {
|
|
1712
|
+
var refKey = _ref13.refKey;
|
|
1713
|
+
var refKeySpecified = refKey !== 'ref';
|
|
1714
|
+
var isComposite = !isDOMElement(element);
|
|
1695
1715
|
if (isComposite && !refKeySpecified && !reactIs.exports.isForwardRef(element)) {
|
|
1696
1716
|
// eslint-disable-next-line no-console
|
|
1697
1717
|
console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
|
|
1698
1718
|
} else if (!isComposite && refKeySpecified) {
|
|
1699
1719
|
// eslint-disable-next-line no-console
|
|
1700
|
-
console.error(
|
|
1720
|
+
console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
|
|
1701
1721
|
}
|
|
1702
1722
|
if (!reactIs.exports.isForwardRef(element) && !getElementProps(element)[refKey]) {
|
|
1703
1723
|
// eslint-disable-next-line no-console
|
|
1704
|
-
console.error(
|
|
1724
|
+
console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
|
|
1705
1725
|
}
|
|
1706
1726
|
}
|
|
1707
1727
|
|
|
1708
|
-
|
|
1728
|
+
var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
|
|
1729
|
+
var dropdownDefaultStateValues = {
|
|
1709
1730
|
highlightedIndex: -1,
|
|
1710
1731
|
isOpen: false,
|
|
1711
1732
|
selectedItem: null,
|
|
1712
1733
|
inputValue: ''
|
|
1713
1734
|
};
|
|
1714
1735
|
function callOnChangeProps(action, state, newState) {
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
const changes = {};
|
|
1720
|
-
Object.keys(state).forEach(key => {
|
|
1736
|
+
var props = action.props,
|
|
1737
|
+
type = action.type;
|
|
1738
|
+
var changes = {};
|
|
1739
|
+
Object.keys(state).forEach(function (key) {
|
|
1721
1740
|
invokeOnChangeHandler(key, action, state, newState);
|
|
1722
1741
|
if (newState[key] !== state[key]) {
|
|
1723
1742
|
changes[key] = newState[key];
|
|
1724
1743
|
}
|
|
1725
1744
|
});
|
|
1726
1745
|
if (props.onStateChange && Object.keys(changes).length) {
|
|
1727
|
-
props.onStateChange({
|
|
1728
|
-
type
|
|
1729
|
-
|
|
1730
|
-
});
|
|
1746
|
+
props.onStateChange(_extends({
|
|
1747
|
+
type: type
|
|
1748
|
+
}, changes));
|
|
1731
1749
|
}
|
|
1732
1750
|
}
|
|
1733
1751
|
function invokeOnChangeHandler(key, action, state, newState) {
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
} = action;
|
|
1738
|
-
const handler = `on${capitalizeString(key)}Change`;
|
|
1752
|
+
var props = action.props,
|
|
1753
|
+
type = action.type;
|
|
1754
|
+
var handler = "on" + capitalizeString(key) + "Change";
|
|
1739
1755
|
if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
|
|
1740
|
-
props[handler]({
|
|
1741
|
-
type
|
|
1742
|
-
|
|
1743
|
-
});
|
|
1756
|
+
props[handler](_extends({
|
|
1757
|
+
type: type
|
|
1758
|
+
}, newState));
|
|
1744
1759
|
}
|
|
1745
1760
|
}
|
|
1746
1761
|
|
|
@@ -1762,37 +1777,36 @@
|
|
|
1762
1777
|
* @returns {string} The a11y message.
|
|
1763
1778
|
*/
|
|
1764
1779
|
function getA11ySelectionMessage(selectionParameters) {
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
} = selectionParameters;
|
|
1769
|
-
return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
|
|
1780
|
+
var selectedItem = selectionParameters.selectedItem,
|
|
1781
|
+
itemToStringLocal = selectionParameters.itemToString;
|
|
1782
|
+
return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
|
|
1770
1783
|
}
|
|
1771
1784
|
|
|
1772
1785
|
/**
|
|
1773
1786
|
* Debounced call for updating the a11y message.
|
|
1774
1787
|
*/
|
|
1775
|
-
|
|
1788
|
+
var updateA11yStatus = debounce(function (getA11yMessage, document) {
|
|
1776
1789
|
setStatus(getA11yMessage(), document);
|
|
1777
1790
|
}, 200);
|
|
1778
1791
|
|
|
1779
1792
|
// istanbul ignore next
|
|
1780
|
-
|
|
1793
|
+
var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? preact.useLayoutEffect : preact.useEffect;
|
|
1781
1794
|
function useElementIds(_ref) {
|
|
1782
|
-
|
|
1783
|
-
id =
|
|
1784
|
-
labelId,
|
|
1785
|
-
menuId,
|
|
1786
|
-
getItemId,
|
|
1787
|
-
toggleButtonId,
|
|
1788
|
-
inputId
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1795
|
+
var _ref$id = _ref.id,
|
|
1796
|
+
id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
|
|
1797
|
+
labelId = _ref.labelId,
|
|
1798
|
+
menuId = _ref.menuId,
|
|
1799
|
+
getItemId = _ref.getItemId,
|
|
1800
|
+
toggleButtonId = _ref.toggleButtonId,
|
|
1801
|
+
inputId = _ref.inputId;
|
|
1802
|
+
var elementIdsRef = preact.useRef({
|
|
1803
|
+
labelId: labelId || id + "-label",
|
|
1804
|
+
menuId: menuId || id + "-menu",
|
|
1805
|
+
getItemId: getItemId || function (index) {
|
|
1806
|
+
return id + "-item-" + index;
|
|
1807
|
+
},
|
|
1808
|
+
toggleButtonId: toggleButtonId || id + "-toggle-button",
|
|
1809
|
+
inputId: inputId || id + "-input"
|
|
1796
1810
|
});
|
|
1797
1811
|
return elementIdsRef.current;
|
|
1798
1812
|
}
|
|
@@ -1812,10 +1826,10 @@
|
|
|
1812
1826
|
return /^\S{1}$/.test(key);
|
|
1813
1827
|
}
|
|
1814
1828
|
function capitalizeString(string) {
|
|
1815
|
-
return
|
|
1829
|
+
return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
|
|
1816
1830
|
}
|
|
1817
1831
|
function useLatestRef(val) {
|
|
1818
|
-
|
|
1832
|
+
var ref = preact.useRef(val);
|
|
1819
1833
|
// technically this is not "concurrent mode safe" because we're manipulating
|
|
1820
1834
|
// the value during render (so it's not idempotent). However, the places this
|
|
1821
1835
|
// hook is used is to support memoizing callbacks which will be called
|
|
@@ -1836,26 +1850,28 @@
|
|
|
1836
1850
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
1837
1851
|
*/
|
|
1838
1852
|
function useEnhancedReducer(reducer, initialState, props) {
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1853
|
+
var prevStateRef = preact.useRef();
|
|
1854
|
+
var actionRef = preact.useRef();
|
|
1855
|
+
var enhancedReducer = preact.useCallback(function (state, action) {
|
|
1842
1856
|
actionRef.current = action;
|
|
1843
1857
|
state = getState(state, action.props);
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
});
|
|
1858
|
+
var changes = reducer(state, action);
|
|
1859
|
+
var newState = action.props.stateReducer(state, _extends({}, action, {
|
|
1860
|
+
changes: changes
|
|
1861
|
+
}));
|
|
1849
1862
|
return newState;
|
|
1850
1863
|
}, [reducer]);
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1864
|
+
var _useReducer = preact.useReducer(enhancedReducer, initialState),
|
|
1865
|
+
state = _useReducer[0],
|
|
1866
|
+
dispatch = _useReducer[1];
|
|
1867
|
+
var propsRef = useLatestRef(props);
|
|
1868
|
+
var dispatchWithProps = preact.useCallback(function (action) {
|
|
1869
|
+
return dispatch(_extends({
|
|
1870
|
+
props: propsRef.current
|
|
1871
|
+
}, action));
|
|
1872
|
+
}, [propsRef]);
|
|
1873
|
+
var action = actionRef.current;
|
|
1874
|
+
preact.useEffect(function () {
|
|
1859
1875
|
if (action && prevStateRef.current && prevStateRef.current !== state) {
|
|
1860
1876
|
callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
|
|
1861
1877
|
}
|
|
@@ -1874,14 +1890,16 @@
|
|
|
1874
1890
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
1875
1891
|
*/
|
|
1876
1892
|
function useControlledReducer$1(reducer, initialState, props) {
|
|
1877
|
-
|
|
1893
|
+
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
|
|
1894
|
+
state = _useEnhancedReducer[0],
|
|
1895
|
+
dispatch = _useEnhancedReducer[1];
|
|
1878
1896
|
return [getState(state, props), dispatch];
|
|
1879
1897
|
}
|
|
1880
|
-
|
|
1881
|
-
itemToString,
|
|
1882
|
-
stateReducer,
|
|
1883
|
-
getA11ySelectionMessage,
|
|
1884
|
-
scrollIntoView,
|
|
1898
|
+
var defaultProps$3 = {
|
|
1899
|
+
itemToString: itemToString,
|
|
1900
|
+
stateReducer: stateReducer,
|
|
1901
|
+
getA11ySelectionMessage: getA11ySelectionMessage,
|
|
1902
|
+
scrollIntoView: scrollIntoView,
|
|
1885
1903
|
environment: /* istanbul ignore next (ssr) */
|
|
1886
1904
|
typeof window === 'undefined' ? {} : window
|
|
1887
1905
|
};
|
|
@@ -1889,7 +1907,7 @@
|
|
|
1889
1907
|
if (defaultStateValues === void 0) {
|
|
1890
1908
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1891
1909
|
}
|
|
1892
|
-
|
|
1910
|
+
var defaultValue = props["default" + capitalizeString(propKey)];
|
|
1893
1911
|
if (defaultValue !== undefined) {
|
|
1894
1912
|
return defaultValue;
|
|
1895
1913
|
}
|
|
@@ -1899,38 +1917,34 @@
|
|
|
1899
1917
|
if (defaultStateValues === void 0) {
|
|
1900
1918
|
defaultStateValues = dropdownDefaultStateValues;
|
|
1901
1919
|
}
|
|
1902
|
-
|
|
1920
|
+
var value = props[propKey];
|
|
1903
1921
|
if (value !== undefined) {
|
|
1904
1922
|
return value;
|
|
1905
1923
|
}
|
|
1906
|
-
|
|
1924
|
+
var initialValue = props["initial" + capitalizeString(propKey)];
|
|
1907
1925
|
if (initialValue !== undefined) {
|
|
1908
1926
|
return initialValue;
|
|
1909
1927
|
}
|
|
1910
1928
|
return getDefaultValue$1(props, propKey, defaultStateValues);
|
|
1911
1929
|
}
|
|
1912
1930
|
function getInitialState$2(props) {
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1931
|
+
var selectedItem = getInitialValue$1(props, 'selectedItem');
|
|
1932
|
+
var isOpen = getInitialValue$1(props, 'isOpen');
|
|
1933
|
+
var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
|
|
1934
|
+
var inputValue = getInitialValue$1(props, 'inputValue');
|
|
1917
1935
|
return {
|
|
1918
1936
|
highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
|
|
1919
|
-
isOpen,
|
|
1920
|
-
selectedItem,
|
|
1921
|
-
inputValue
|
|
1937
|
+
isOpen: isOpen,
|
|
1938
|
+
selectedItem: selectedItem,
|
|
1939
|
+
inputValue: inputValue
|
|
1922
1940
|
};
|
|
1923
1941
|
}
|
|
1924
1942
|
function getHighlightedIndexOnOpen(props, state, offset) {
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
const {
|
|
1931
|
-
selectedItem,
|
|
1932
|
-
highlightedIndex
|
|
1933
|
-
} = state;
|
|
1943
|
+
var items = props.items,
|
|
1944
|
+
initialHighlightedIndex = props.initialHighlightedIndex,
|
|
1945
|
+
defaultHighlightedIndex = props.defaultHighlightedIndex;
|
|
1946
|
+
var selectedItem = state.selectedItem,
|
|
1947
|
+
highlightedIndex = state.highlightedIndex;
|
|
1934
1948
|
if (items.length === 0) {
|
|
1935
1949
|
return -1;
|
|
1936
1950
|
}
|
|
@@ -1961,30 +1975,34 @@
|
|
|
1961
1975
|
* @returns {Object} Ref containing whether mouseDown or touchMove event is happening
|
|
1962
1976
|
*/
|
|
1963
1977
|
function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
|
|
1964
|
-
|
|
1978
|
+
var mouseAndTouchTrackersRef = preact.useRef({
|
|
1965
1979
|
isMouseDown: false,
|
|
1966
1980
|
isTouchMove: false
|
|
1967
1981
|
});
|
|
1968
|
-
preact.useEffect(()
|
|
1982
|
+
preact.useEffect(function () {
|
|
1969
1983
|
// The same strategy for checking if a click occurred inside or outside downsift
|
|
1970
1984
|
// as in downshift.js.
|
|
1971
|
-
|
|
1985
|
+
var onMouseDown = function onMouseDown() {
|
|
1972
1986
|
mouseAndTouchTrackersRef.current.isMouseDown = true;
|
|
1973
1987
|
};
|
|
1974
|
-
|
|
1988
|
+
var onMouseUp = function onMouseUp(event) {
|
|
1975
1989
|
mouseAndTouchTrackersRef.current.isMouseDown = false;
|
|
1976
|
-
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
1990
|
+
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
|
|
1991
|
+
return ref.current;
|
|
1992
|
+
}), environment)) {
|
|
1977
1993
|
handleBlur();
|
|
1978
1994
|
}
|
|
1979
1995
|
};
|
|
1980
|
-
|
|
1996
|
+
var onTouchStart = function onTouchStart() {
|
|
1981
1997
|
mouseAndTouchTrackersRef.current.isTouchMove = false;
|
|
1982
1998
|
};
|
|
1983
|
-
|
|
1999
|
+
var onTouchMove = function onTouchMove() {
|
|
1984
2000
|
mouseAndTouchTrackersRef.current.isTouchMove = true;
|
|
1985
2001
|
};
|
|
1986
|
-
|
|
1987
|
-
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(
|
|
2002
|
+
var onTouchEnd = function onTouchEnd(event) {
|
|
2003
|
+
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
|
|
2004
|
+
return ref.current;
|
|
2005
|
+
}), environment, false)) {
|
|
1988
2006
|
handleBlur();
|
|
1989
2007
|
}
|
|
1990
2008
|
};
|
|
@@ -2007,7 +2025,9 @@
|
|
|
2007
2025
|
|
|
2008
2026
|
/* istanbul ignore next */
|
|
2009
2027
|
// eslint-disable-next-line import/no-mutable-exports
|
|
2010
|
-
|
|
2028
|
+
var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
2029
|
+
return noop;
|
|
2030
|
+
};
|
|
2011
2031
|
/**
|
|
2012
2032
|
* Custom hook that checks if getter props are called correctly.
|
|
2013
2033
|
*
|
|
@@ -2016,82 +2036,77 @@
|
|
|
2016
2036
|
*/
|
|
2017
2037
|
/* istanbul ignore next */
|
|
2018
2038
|
{
|
|
2019
|
-
useGetterPropsCalledChecker = function () {
|
|
2020
|
-
|
|
2039
|
+
useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
|
|
2040
|
+
var isInitialMountRef = preact.useRef(true);
|
|
2021
2041
|
for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2022
2042
|
propKeys[_key] = arguments[_key];
|
|
2023
2043
|
}
|
|
2024
|
-
|
|
2044
|
+
var getterPropsCalledRef = preact.useRef(propKeys.reduce(function (acc, propKey) {
|
|
2025
2045
|
acc[propKey] = {};
|
|
2026
2046
|
return acc;
|
|
2027
2047
|
}, {}));
|
|
2028
|
-
preact.useEffect(()
|
|
2029
|
-
Object.keys(getterPropsCalledRef.current).forEach(propKey
|
|
2030
|
-
|
|
2048
|
+
preact.useEffect(function () {
|
|
2049
|
+
Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
|
|
2050
|
+
var propCallInfo = getterPropsCalledRef.current[propKey];
|
|
2031
2051
|
if (isInitialMountRef.current) {
|
|
2032
2052
|
if (!Object.keys(propCallInfo).length) {
|
|
2033
2053
|
// eslint-disable-next-line no-console
|
|
2034
|
-
console.error(
|
|
2054
|
+
console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
|
|
2035
2055
|
return;
|
|
2036
2056
|
}
|
|
2037
2057
|
}
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
elementRef
|
|
2042
|
-
} = propCallInfo;
|
|
2058
|
+
var suppressRefError = propCallInfo.suppressRefError,
|
|
2059
|
+
refKey = propCallInfo.refKey,
|
|
2060
|
+
elementRef = propCallInfo.elementRef;
|
|
2043
2061
|
if ((!elementRef || !elementRef.current) && !suppressRefError) {
|
|
2044
2062
|
// eslint-disable-next-line no-console
|
|
2045
|
-
console.error(
|
|
2063
|
+
console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
|
|
2046
2064
|
}
|
|
2047
2065
|
});
|
|
2048
2066
|
isInitialMountRef.current = false;
|
|
2049
2067
|
});
|
|
2050
|
-
|
|
2068
|
+
var setGetterPropCallInfo = preact.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
|
|
2051
2069
|
getterPropsCalledRef.current[propKey] = {
|
|
2052
|
-
suppressRefError,
|
|
2053
|
-
refKey,
|
|
2054
|
-
elementRef
|
|
2070
|
+
suppressRefError: suppressRefError,
|
|
2071
|
+
refKey: refKey,
|
|
2072
|
+
elementRef: elementRef
|
|
2055
2073
|
};
|
|
2056
2074
|
}, []);
|
|
2057
2075
|
return setGetterPropCallInfo;
|
|
2058
2076
|
};
|
|
2059
2077
|
}
|
|
2060
2078
|
function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
...rest
|
|
2067
|
-
} = _ref2;
|
|
2079
|
+
var isInitialMount = _ref2.isInitialMount,
|
|
2080
|
+
highlightedIndex = _ref2.highlightedIndex,
|
|
2081
|
+
items = _ref2.items,
|
|
2082
|
+
environment = _ref2.environment,
|
|
2083
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
|
|
2068
2084
|
// Sets a11y status message on changes in state.
|
|
2069
|
-
preact.useEffect(()
|
|
2085
|
+
preact.useEffect(function () {
|
|
2070
2086
|
if (isInitialMount || false) {
|
|
2071
2087
|
return;
|
|
2072
2088
|
}
|
|
2073
|
-
updateA11yStatus(()
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2089
|
+
updateA11yStatus(function () {
|
|
2090
|
+
return getA11yMessage(_extends({
|
|
2091
|
+
highlightedIndex: highlightedIndex,
|
|
2092
|
+
highlightedItem: items[highlightedIndex],
|
|
2093
|
+
resultCount: items.length
|
|
2094
|
+
}, rest));
|
|
2095
|
+
}, environment.document);
|
|
2079
2096
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2080
2097
|
}, dependencyArray);
|
|
2081
2098
|
}
|
|
2082
2099
|
function useScrollIntoView(_ref3) {
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
scrollIntoView: scrollIntoViewProp
|
|
2090
|
-
} = _ref3;
|
|
2100
|
+
var highlightedIndex = _ref3.highlightedIndex,
|
|
2101
|
+
isOpen = _ref3.isOpen,
|
|
2102
|
+
itemRefs = _ref3.itemRefs,
|
|
2103
|
+
getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
|
|
2104
|
+
menuElement = _ref3.menuElement,
|
|
2105
|
+
scrollIntoViewProp = _ref3.scrollIntoView;
|
|
2091
2106
|
// used not to scroll on highlight by mouse.
|
|
2092
|
-
|
|
2107
|
+
var shouldScrollRef = preact.useRef(true);
|
|
2093
2108
|
// Scroll on highlighted item if change comes from keyboard.
|
|
2094
|
-
useIsomorphicLayoutEffect(()
|
|
2109
|
+
useIsomorphicLayoutEffect(function () {
|
|
2095
2110
|
if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
|
|
2096
2111
|
return;
|
|
2097
2112
|
}
|
|
@@ -2106,18 +2121,16 @@
|
|
|
2106
2121
|
}
|
|
2107
2122
|
|
|
2108
2123
|
// eslint-disable-next-line import/no-mutable-exports
|
|
2109
|
-
|
|
2124
|
+
var useControlPropsValidator = noop;
|
|
2110
2125
|
/* istanbul ignore next */
|
|
2111
2126
|
{
|
|
2112
|
-
useControlPropsValidator = _ref4
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
state
|
|
2117
|
-
} = _ref4;
|
|
2127
|
+
useControlPropsValidator = function useControlPropsValidator(_ref4) {
|
|
2128
|
+
var isInitialMount = _ref4.isInitialMount,
|
|
2129
|
+
props = _ref4.props,
|
|
2130
|
+
state = _ref4.state;
|
|
2118
2131
|
// used for checking when props are moving from controlled to uncontrolled.
|
|
2119
|
-
|
|
2120
|
-
preact.useEffect(()
|
|
2132
|
+
var prevPropsRef = preact.useRef(props);
|
|
2133
|
+
preact.useEffect(function () {
|
|
2121
2134
|
if (isInitialMount) {
|
|
2122
2135
|
return;
|
|
2123
2136
|
}
|
|
@@ -2128,11 +2141,9 @@
|
|
|
2128
2141
|
}
|
|
2129
2142
|
|
|
2130
2143
|
function downshiftCommonReducer(state, action, stateChangeTypes) {
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
} = action;
|
|
2135
|
-
let changes;
|
|
2144
|
+
var type = action.type,
|
|
2145
|
+
props = action.props;
|
|
2146
|
+
var changes;
|
|
2136
2147
|
switch (type) {
|
|
2137
2148
|
case stateChangeTypes.ItemMouseMove:
|
|
2138
2149
|
changes = {
|
|
@@ -2183,10 +2194,7 @@
|
|
|
2183
2194
|
default:
|
|
2184
2195
|
throw new Error('Reducer called without proper action type.');
|
|
2185
2196
|
}
|
|
2186
|
-
return {
|
|
2187
|
-
...state,
|
|
2188
|
-
...changes
|
|
2189
|
-
};
|
|
2197
|
+
return _extends({}, state, changes);
|
|
2190
2198
|
}
|
|
2191
2199
|
/* eslint-enable complexity */
|
|
2192
2200
|
|
|
@@ -2298,28 +2306,28 @@
|
|
|
2298
2306
|
};
|
|
2299
2307
|
}
|
|
2300
2308
|
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2309
|
+
var ToggleButtonClick$1 = '__togglebutton_click__' ;
|
|
2310
|
+
var ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__' ;
|
|
2311
|
+
var ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__' ;
|
|
2312
|
+
var ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__' ;
|
|
2313
|
+
var ToggleButtonKeyDownEscape = '__togglebutton_keydown_escape__' ;
|
|
2314
|
+
var ToggleButtonKeyDownHome = '__togglebutton_keydown_home__' ;
|
|
2315
|
+
var ToggleButtonKeyDownEnd = '__togglebutton_keydown_end__' ;
|
|
2316
|
+
var ToggleButtonKeyDownEnter = '__togglebutton_keydown_enter__' ;
|
|
2317
|
+
var ToggleButtonKeyDownSpaceButton = '__togglebutton_keydown_space_button__' ;
|
|
2318
|
+
var ToggleButtonKeyDownPageUp = '__togglebutton_keydown_page_up__' ;
|
|
2319
|
+
var ToggleButtonKeyDownPageDown = '__togglebutton_keydown_page_down__' ;
|
|
2320
|
+
var ToggleButtonBlur = '__togglebutton_blur__' ;
|
|
2321
|
+
var MenuMouseLeave$1 = '__menu_mouse_leave__' ;
|
|
2322
|
+
var ItemMouseMove$1 = '__item_mouse_move__' ;
|
|
2323
|
+
var ItemClick$1 = '__item_click__' ;
|
|
2324
|
+
var FunctionToggleMenu$1 = '__function_toggle_menu__' ;
|
|
2325
|
+
var FunctionOpenMenu$1 = '__function_open_menu__' ;
|
|
2326
|
+
var FunctionCloseMenu$1 = '__function_close_menu__' ;
|
|
2327
|
+
var FunctionSetHighlightedIndex$1 = '__function_set_highlighted_index__' ;
|
|
2328
|
+
var FunctionSelectItem$1 = '__function_select_item__' ;
|
|
2329
|
+
var FunctionSetInputValue$1 = '__function_set_input_value__' ;
|
|
2330
|
+
var FunctionReset$2 = '__function_reset__' ;
|
|
2323
2331
|
|
|
2324
2332
|
var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
|
|
2325
2333
|
__proto__: null,
|
|
@@ -2349,12 +2357,10 @@
|
|
|
2349
2357
|
|
|
2350
2358
|
/* eslint-disable complexity */
|
|
2351
2359
|
function downshiftSelectReducer(state, action) {
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
} = action;
|
|
2357
|
-
let changes;
|
|
2360
|
+
var type = action.type,
|
|
2361
|
+
props = action.props,
|
|
2362
|
+
altKey = action.altKey;
|
|
2363
|
+
var changes;
|
|
2358
2364
|
switch (type) {
|
|
2359
2365
|
case ItemClick$1:
|
|
2360
2366
|
changes = {
|
|
@@ -2365,10 +2371,10 @@
|
|
|
2365
2371
|
break;
|
|
2366
2372
|
case ToggleButtonKeyDownCharacter:
|
|
2367
2373
|
{
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2374
|
+
var lowercasedKey = action.key;
|
|
2375
|
+
var inputValue = "" + state.inputValue + lowercasedKey;
|
|
2376
|
+
var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
|
|
2377
|
+
var highlightedIndex = getItemIndexByCharacterKey({
|
|
2372
2378
|
keysSoFar: inputValue,
|
|
2373
2379
|
highlightedIndex: prevHighlightedIndex,
|
|
2374
2380
|
items: props.items,
|
|
@@ -2376,34 +2382,33 @@
|
|
|
2376
2382
|
getItemNodeFromIndex: action.getItemNodeFromIndex
|
|
2377
2383
|
});
|
|
2378
2384
|
changes = {
|
|
2379
|
-
inputValue,
|
|
2380
|
-
highlightedIndex,
|
|
2385
|
+
inputValue: inputValue,
|
|
2386
|
+
highlightedIndex: highlightedIndex,
|
|
2381
2387
|
isOpen: true
|
|
2382
2388
|
};
|
|
2383
2389
|
}
|
|
2384
2390
|
break;
|
|
2385
2391
|
case ToggleButtonKeyDownArrowDown:
|
|
2386
2392
|
{
|
|
2387
|
-
|
|
2393
|
+
var _highlightedIndex = state.isOpen ? getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
|
|
2388
2394
|
changes = {
|
|
2389
|
-
highlightedIndex,
|
|
2395
|
+
highlightedIndex: _highlightedIndex,
|
|
2390
2396
|
isOpen: true
|
|
2391
2397
|
};
|
|
2392
2398
|
}
|
|
2393
2399
|
break;
|
|
2394
2400
|
case ToggleButtonKeyDownArrowUp:
|
|
2395
2401
|
if (state.isOpen && altKey) {
|
|
2396
|
-
changes = {
|
|
2402
|
+
changes = _extends({
|
|
2397
2403
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2398
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
};
|
|
2404
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2405
|
+
}, state.highlightedIndex >= 0 && {
|
|
2406
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2407
|
+
});
|
|
2403
2408
|
} else {
|
|
2404
|
-
|
|
2409
|
+
var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
|
|
2405
2410
|
changes = {
|
|
2406
|
-
highlightedIndex,
|
|
2411
|
+
highlightedIndex: _highlightedIndex2,
|
|
2407
2412
|
isOpen: true
|
|
2408
2413
|
};
|
|
2409
2414
|
}
|
|
@@ -2411,13 +2416,12 @@
|
|
|
2411
2416
|
// only triggered when menu is open.
|
|
2412
2417
|
case ToggleButtonKeyDownEnter:
|
|
2413
2418
|
case ToggleButtonKeyDownSpaceButton:
|
|
2414
|
-
changes = {
|
|
2419
|
+
changes = _extends({
|
|
2415
2420
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
2416
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
};
|
|
2421
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
2422
|
+
}, state.highlightedIndex >= 0 && {
|
|
2423
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2424
|
+
});
|
|
2421
2425
|
break;
|
|
2422
2426
|
case ToggleButtonKeyDownHome:
|
|
2423
2427
|
changes = {
|
|
@@ -2448,13 +2452,12 @@
|
|
|
2448
2452
|
};
|
|
2449
2453
|
break;
|
|
2450
2454
|
case ToggleButtonBlur:
|
|
2451
|
-
changes = {
|
|
2455
|
+
changes = _extends({
|
|
2452
2456
|
isOpen: false,
|
|
2453
|
-
highlightedIndex: -1
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
};
|
|
2457
|
+
highlightedIndex: -1
|
|
2458
|
+
}, state.highlightedIndex >= 0 && {
|
|
2459
|
+
selectedItem: props.items[state.highlightedIndex]
|
|
2460
|
+
});
|
|
2458
2461
|
break;
|
|
2459
2462
|
case FunctionSelectItem$1:
|
|
2460
2463
|
changes = {
|
|
@@ -2464,13 +2467,13 @@
|
|
|
2464
2467
|
default:
|
|
2465
2468
|
return downshiftCommonReducer(state, action, stateChangeTypes$2);
|
|
2466
2469
|
}
|
|
2467
|
-
return {
|
|
2468
|
-
...state,
|
|
2469
|
-
...changes
|
|
2470
|
-
};
|
|
2470
|
+
return _extends({}, state, changes);
|
|
2471
2471
|
}
|
|
2472
2472
|
/* eslint-enable complexity */
|
|
2473
2473
|
|
|
2474
|
+
var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
|
|
2475
|
+
_excluded2$2 = ["onBlur", "onClick", "onKeyDown", "refKey", "ref"],
|
|
2476
|
+
_excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref", "disabled"];
|
|
2474
2477
|
useSelect.stateChangeTypes = stateChangeTypes$2;
|
|
2475
2478
|
function useSelect(userProps) {
|
|
2476
2479
|
if (userProps === void 0) {
|
|
@@ -2478,81 +2481,76 @@
|
|
|
2478
2481
|
}
|
|
2479
2482
|
validatePropTypes$2(userProps, useSelect);
|
|
2480
2483
|
// Props defaults and destructuring.
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
environment,
|
|
2489
|
-
itemToString,
|
|
2490
|
-
getA11ySelectionMessage,
|
|
2491
|
-
getA11yStatusMessage
|
|
2492
|
-
} = props;
|
|
2484
|
+
var props = _extends({}, defaultProps$2, userProps);
|
|
2485
|
+
var items = props.items,
|
|
2486
|
+
scrollIntoView = props.scrollIntoView,
|
|
2487
|
+
environment = props.environment,
|
|
2488
|
+
itemToString = props.itemToString,
|
|
2489
|
+
getA11ySelectionMessage = props.getA11ySelectionMessage,
|
|
2490
|
+
getA11yStatusMessage = props.getA11yStatusMessage;
|
|
2493
2491
|
// Initial state depending on controlled props.
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2492
|
+
var initialState = getInitialState$2(props);
|
|
2493
|
+
var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
|
|
2494
|
+
state = _useControlledReducer[0],
|
|
2495
|
+
dispatch = _useControlledReducer[1];
|
|
2496
|
+
var isOpen = state.isOpen,
|
|
2497
|
+
highlightedIndex = state.highlightedIndex,
|
|
2498
|
+
selectedItem = state.selectedItem,
|
|
2499
|
+
inputValue = state.inputValue;
|
|
2502
2500
|
|
|
2503
2501
|
// Element efs.
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2502
|
+
var toggleButtonRef = preact.useRef(null);
|
|
2503
|
+
var menuRef = preact.useRef(null);
|
|
2504
|
+
var itemRefs = preact.useRef({});
|
|
2507
2505
|
// used to keep the inputValue clearTimeout object between renders.
|
|
2508
|
-
|
|
2506
|
+
var clearTimeoutRef = preact.useRef(null);
|
|
2509
2507
|
// prevent id re-generation between renders.
|
|
2510
|
-
|
|
2508
|
+
var elementIds = useElementIds(props);
|
|
2511
2509
|
// used to keep track of how many items we had on previous cycle.
|
|
2512
|
-
|
|
2513
|
-
|
|
2510
|
+
var previousResultCountRef = preact.useRef();
|
|
2511
|
+
var isInitialMountRef = preact.useRef(true);
|
|
2514
2512
|
// utility callback to get item element.
|
|
2515
|
-
|
|
2516
|
-
state,
|
|
2517
|
-
props
|
|
2513
|
+
var latest = useLatestRef({
|
|
2514
|
+
state: state,
|
|
2515
|
+
props: props
|
|
2518
2516
|
});
|
|
2519
2517
|
|
|
2520
2518
|
// Some utils.
|
|
2521
|
-
|
|
2519
|
+
var getItemNodeFromIndex = preact.useCallback(function (index) {
|
|
2520
|
+
return itemRefs.current[elementIds.getItemId(index)];
|
|
2521
|
+
}, [elementIds]);
|
|
2522
2522
|
|
|
2523
2523
|
// Effects.
|
|
2524
2524
|
// Sets a11y status message on changes in state.
|
|
2525
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
2525
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
|
|
2526
2526
|
isInitialMount: isInitialMountRef.current,
|
|
2527
2527
|
previousResultCount: previousResultCountRef.current,
|
|
2528
|
-
items,
|
|
2529
|
-
environment,
|
|
2530
|
-
itemToString
|
|
2531
|
-
|
|
2532
|
-
});
|
|
2528
|
+
items: items,
|
|
2529
|
+
environment: environment,
|
|
2530
|
+
itemToString: itemToString
|
|
2531
|
+
}, state));
|
|
2533
2532
|
// Sets a11y status message on changes in selectedItem.
|
|
2534
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
2533
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
|
|
2535
2534
|
isInitialMount: isInitialMountRef.current,
|
|
2536
2535
|
previousResultCount: previousResultCountRef.current,
|
|
2537
|
-
items,
|
|
2538
|
-
environment,
|
|
2539
|
-
itemToString
|
|
2540
|
-
|
|
2541
|
-
});
|
|
2536
|
+
items: items,
|
|
2537
|
+
environment: environment,
|
|
2538
|
+
itemToString: itemToString
|
|
2539
|
+
}, state));
|
|
2542
2540
|
// Scroll on highlighted item if change comes from keyboard.
|
|
2543
|
-
|
|
2541
|
+
var shouldScrollRef = useScrollIntoView({
|
|
2544
2542
|
menuElement: menuRef.current,
|
|
2545
|
-
highlightedIndex,
|
|
2546
|
-
isOpen,
|
|
2547
|
-
itemRefs,
|
|
2548
|
-
scrollIntoView,
|
|
2549
|
-
getItemNodeFromIndex
|
|
2543
|
+
highlightedIndex: highlightedIndex,
|
|
2544
|
+
isOpen: isOpen,
|
|
2545
|
+
itemRefs: itemRefs,
|
|
2546
|
+
scrollIntoView: scrollIntoView,
|
|
2547
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2550
2548
|
});
|
|
2551
2549
|
|
|
2552
2550
|
// Sets cleanup for the keysSoFar callback, debounded after 500ms.
|
|
2553
|
-
preact.useEffect(()
|
|
2551
|
+
preact.useEffect(function () {
|
|
2554
2552
|
// init the clean function here as we need access to dispatch.
|
|
2555
|
-
clearTimeoutRef.current = debounce(outerDispatch
|
|
2553
|
+
clearTimeoutRef.current = debounce(function (outerDispatch) {
|
|
2556
2554
|
outerDispatch({
|
|
2557
2555
|
type: FunctionSetInputValue$1,
|
|
2558
2556
|
inputValue: ''
|
|
@@ -2560,13 +2558,13 @@
|
|
|
2560
2558
|
}, 500);
|
|
2561
2559
|
|
|
2562
2560
|
// Cancel any pending debounced calls on mount
|
|
2563
|
-
return ()
|
|
2561
|
+
return function () {
|
|
2564
2562
|
clearTimeoutRef.current.cancel();
|
|
2565
2563
|
};
|
|
2566
2564
|
}, []);
|
|
2567
2565
|
|
|
2568
2566
|
// Invokes the keysSoFar callback set up above.
|
|
2569
|
-
preact.useEffect(()
|
|
2567
|
+
preact.useEffect(function () {
|
|
2570
2568
|
if (!inputValue) {
|
|
2571
2569
|
return;
|
|
2572
2570
|
}
|
|
@@ -2574,249 +2572,234 @@
|
|
|
2574
2572
|
}, [dispatch, inputValue]);
|
|
2575
2573
|
useControlPropsValidator({
|
|
2576
2574
|
isInitialMount: isInitialMountRef.current,
|
|
2577
|
-
props,
|
|
2578
|
-
state
|
|
2575
|
+
props: props,
|
|
2576
|
+
state: state
|
|
2579
2577
|
});
|
|
2580
|
-
preact.useEffect(()
|
|
2578
|
+
preact.useEffect(function () {
|
|
2581
2579
|
if (isInitialMountRef.current) {
|
|
2582
2580
|
return;
|
|
2583
2581
|
}
|
|
2584
2582
|
previousResultCountRef.current = items.length;
|
|
2585
2583
|
});
|
|
2586
2584
|
// Add mouse/touch events to document.
|
|
2587
|
-
|
|
2585
|
+
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
|
|
2588
2586
|
dispatch({
|
|
2589
2587
|
type: ToggleButtonBlur
|
|
2590
2588
|
});
|
|
2591
2589
|
});
|
|
2592
|
-
|
|
2590
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
|
|
2593
2591
|
// Make initial ref false.
|
|
2594
|
-
preact.useEffect(()
|
|
2592
|
+
preact.useEffect(function () {
|
|
2595
2593
|
isInitialMountRef.current = false;
|
|
2596
|
-
return ()
|
|
2594
|
+
return function () {
|
|
2597
2595
|
isInitialMountRef.current = true;
|
|
2598
2596
|
};
|
|
2599
2597
|
}, []);
|
|
2600
2598
|
// Reset itemRefs on close.
|
|
2601
|
-
preact.useEffect(()
|
|
2599
|
+
preact.useEffect(function () {
|
|
2602
2600
|
if (!isOpen) {
|
|
2603
2601
|
itemRefs.current = {};
|
|
2604
2602
|
}
|
|
2605
2603
|
}, [isOpen]);
|
|
2606
2604
|
|
|
2607
2605
|
// Event handler functions.
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
event
|
|
2611
|
-
dispatch({
|
|
2612
|
-
type: ToggleButtonKeyDownArrowDown,
|
|
2613
|
-
getItemNodeFromIndex,
|
|
2614
|
-
altKey: event.altKey
|
|
2615
|
-
});
|
|
2616
|
-
},
|
|
2617
|
-
ArrowUp(event) {
|
|
2618
|
-
event.preventDefault();
|
|
2619
|
-
dispatch({
|
|
2620
|
-
type: ToggleButtonKeyDownArrowUp,
|
|
2621
|
-
getItemNodeFromIndex,
|
|
2622
|
-
altKey: event.altKey
|
|
2623
|
-
});
|
|
2624
|
-
},
|
|
2625
|
-
Home(event) {
|
|
2626
|
-
event.preventDefault();
|
|
2627
|
-
dispatch({
|
|
2628
|
-
type: ToggleButtonKeyDownHome,
|
|
2629
|
-
getItemNodeFromIndex
|
|
2630
|
-
});
|
|
2631
|
-
},
|
|
2632
|
-
End(event) {
|
|
2633
|
-
event.preventDefault();
|
|
2634
|
-
dispatch({
|
|
2635
|
-
type: ToggleButtonKeyDownEnd,
|
|
2636
|
-
getItemNodeFromIndex
|
|
2637
|
-
});
|
|
2638
|
-
},
|
|
2639
|
-
Escape() {
|
|
2640
|
-
if (latest.current.state.isOpen) {
|
|
2641
|
-
dispatch({
|
|
2642
|
-
type: ToggleButtonKeyDownEscape
|
|
2643
|
-
});
|
|
2644
|
-
}
|
|
2645
|
-
},
|
|
2646
|
-
Enter(event) {
|
|
2647
|
-
event.preventDefault();
|
|
2648
|
-
dispatch({
|
|
2649
|
-
type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
|
|
2650
|
-
});
|
|
2651
|
-
},
|
|
2652
|
-
PageUp(event) {
|
|
2653
|
-
if (latest.current.state.isOpen) {
|
|
2606
|
+
var toggleButtonKeyDownHandlers = preact.useMemo(function () {
|
|
2607
|
+
return {
|
|
2608
|
+
ArrowDown: function ArrowDown(event) {
|
|
2654
2609
|
event.preventDefault();
|
|
2655
2610
|
dispatch({
|
|
2656
|
-
type:
|
|
2657
|
-
getItemNodeFromIndex
|
|
2611
|
+
type: ToggleButtonKeyDownArrowDown,
|
|
2612
|
+
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2613
|
+
altKey: event.altKey
|
|
2658
2614
|
});
|
|
2659
|
-
}
|
|
2660
|
-
|
|
2661
|
-
PageDown(event) {
|
|
2662
|
-
if (latest.current.state.isOpen) {
|
|
2615
|
+
},
|
|
2616
|
+
ArrowUp: function ArrowUp(event) {
|
|
2663
2617
|
event.preventDefault();
|
|
2664
2618
|
dispatch({
|
|
2665
|
-
type:
|
|
2666
|
-
getItemNodeFromIndex
|
|
2619
|
+
type: ToggleButtonKeyDownArrowUp,
|
|
2620
|
+
getItemNodeFromIndex: getItemNodeFromIndex,
|
|
2621
|
+
altKey: event.altKey
|
|
2667
2622
|
});
|
|
2668
|
-
}
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
event.preventDefault();
|
|
2672
|
-
const currentState = latest.current.state;
|
|
2673
|
-
if (!currentState.isOpen) {
|
|
2623
|
+
},
|
|
2624
|
+
Home: function Home(event) {
|
|
2625
|
+
event.preventDefault();
|
|
2674
2626
|
dispatch({
|
|
2675
|
-
type:
|
|
2627
|
+
type: ToggleButtonKeyDownHome,
|
|
2628
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2676
2629
|
});
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2630
|
+
},
|
|
2631
|
+
End: function End(event) {
|
|
2632
|
+
event.preventDefault();
|
|
2680
2633
|
dispatch({
|
|
2681
|
-
type:
|
|
2682
|
-
|
|
2683
|
-
getItemNodeFromIndex
|
|
2634
|
+
type: ToggleButtonKeyDownEnd,
|
|
2635
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2684
2636
|
});
|
|
2685
|
-
}
|
|
2637
|
+
},
|
|
2638
|
+
Escape: function Escape() {
|
|
2639
|
+
if (latest.current.state.isOpen) {
|
|
2640
|
+
dispatch({
|
|
2641
|
+
type: ToggleButtonKeyDownEscape
|
|
2642
|
+
});
|
|
2643
|
+
}
|
|
2644
|
+
},
|
|
2645
|
+
Enter: function Enter(event) {
|
|
2646
|
+
event.preventDefault();
|
|
2686
2647
|
dispatch({
|
|
2687
|
-
type:
|
|
2648
|
+
type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
|
|
2688
2649
|
});
|
|
2650
|
+
},
|
|
2651
|
+
PageUp: function PageUp(event) {
|
|
2652
|
+
if (latest.current.state.isOpen) {
|
|
2653
|
+
event.preventDefault();
|
|
2654
|
+
dispatch({
|
|
2655
|
+
type: ToggleButtonKeyDownPageUp,
|
|
2656
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2657
|
+
});
|
|
2658
|
+
}
|
|
2659
|
+
},
|
|
2660
|
+
PageDown: function PageDown(event) {
|
|
2661
|
+
if (latest.current.state.isOpen) {
|
|
2662
|
+
event.preventDefault();
|
|
2663
|
+
dispatch({
|
|
2664
|
+
type: ToggleButtonKeyDownPageDown,
|
|
2665
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2666
|
+
});
|
|
2667
|
+
}
|
|
2668
|
+
},
|
|
2669
|
+
' ': function _(event) {
|
|
2670
|
+
event.preventDefault();
|
|
2671
|
+
var currentState = latest.current.state;
|
|
2672
|
+
if (!currentState.isOpen) {
|
|
2673
|
+
dispatch({
|
|
2674
|
+
type: ToggleButtonClick$1
|
|
2675
|
+
});
|
|
2676
|
+
return;
|
|
2677
|
+
}
|
|
2678
|
+
if (currentState.inputValue) {
|
|
2679
|
+
dispatch({
|
|
2680
|
+
type: ToggleButtonKeyDownCharacter,
|
|
2681
|
+
key: ' ',
|
|
2682
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2683
|
+
});
|
|
2684
|
+
} else {
|
|
2685
|
+
dispatch({
|
|
2686
|
+
type: ToggleButtonKeyDownSpaceButton
|
|
2687
|
+
});
|
|
2688
|
+
}
|
|
2689
2689
|
}
|
|
2690
|
-
}
|
|
2691
|
-
}
|
|
2690
|
+
};
|
|
2691
|
+
}, [dispatch, getItemNodeFromIndex, latest]);
|
|
2692
2692
|
|
|
2693
2693
|
// Action functions.
|
|
2694
|
-
|
|
2694
|
+
var toggleMenu = preact.useCallback(function () {
|
|
2695
2695
|
dispatch({
|
|
2696
2696
|
type: FunctionToggleMenu$1
|
|
2697
2697
|
});
|
|
2698
2698
|
}, [dispatch]);
|
|
2699
|
-
|
|
2699
|
+
var closeMenu = preact.useCallback(function () {
|
|
2700
2700
|
dispatch({
|
|
2701
2701
|
type: FunctionCloseMenu$1
|
|
2702
2702
|
});
|
|
2703
2703
|
}, [dispatch]);
|
|
2704
|
-
|
|
2704
|
+
var openMenu = preact.useCallback(function () {
|
|
2705
2705
|
dispatch({
|
|
2706
2706
|
type: FunctionOpenMenu$1
|
|
2707
2707
|
});
|
|
2708
2708
|
}, [dispatch]);
|
|
2709
|
-
|
|
2709
|
+
var setHighlightedIndex = preact.useCallback(function (newHighlightedIndex) {
|
|
2710
2710
|
dispatch({
|
|
2711
2711
|
type: FunctionSetHighlightedIndex$1,
|
|
2712
2712
|
highlightedIndex: newHighlightedIndex
|
|
2713
2713
|
});
|
|
2714
2714
|
}, [dispatch]);
|
|
2715
|
-
|
|
2715
|
+
var selectItem = preact.useCallback(function (newSelectedItem) {
|
|
2716
2716
|
dispatch({
|
|
2717
2717
|
type: FunctionSelectItem$1,
|
|
2718
2718
|
selectedItem: newSelectedItem
|
|
2719
2719
|
});
|
|
2720
2720
|
}, [dispatch]);
|
|
2721
|
-
|
|
2721
|
+
var reset = preact.useCallback(function () {
|
|
2722
2722
|
dispatch({
|
|
2723
2723
|
type: FunctionReset$2
|
|
2724
2724
|
});
|
|
2725
2725
|
}, [dispatch]);
|
|
2726
|
-
|
|
2726
|
+
var setInputValue = preact.useCallback(function (newInputValue) {
|
|
2727
2727
|
dispatch({
|
|
2728
2728
|
type: FunctionSetInputValue$1,
|
|
2729
2729
|
inputValue: newInputValue
|
|
2730
2730
|
});
|
|
2731
2731
|
}, [dispatch]);
|
|
2732
2732
|
// Getter functions.
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
ref
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2733
|
+
var getLabelProps = preact.useCallback(function (labelProps) {
|
|
2734
|
+
return _extends({
|
|
2735
|
+
id: elementIds.labelId,
|
|
2736
|
+
htmlFor: elementIds.toggleButtonId
|
|
2737
|
+
}, labelProps);
|
|
2738
|
+
}, [elementIds]);
|
|
2739
|
+
var getMenuProps = preact.useCallback(function (_temp, _temp2) {
|
|
2740
|
+
var _extends2;
|
|
2741
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
2742
|
+
onMouseLeave = _ref.onMouseLeave,
|
|
2743
|
+
_ref$refKey = _ref.refKey,
|
|
2744
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey;
|
|
2745
|
+
_ref.onKeyDown;
|
|
2746
|
+
_ref.onBlur;
|
|
2747
|
+
var ref = _ref.ref,
|
|
2748
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
2749
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
2750
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
2751
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
2752
|
+
var menuHandleMouseLeave = function menuHandleMouseLeave() {
|
|
2751
2753
|
dispatch({
|
|
2752
2754
|
type: MenuMouseLeave$1
|
|
2753
2755
|
});
|
|
2754
2756
|
};
|
|
2755
2757
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
2756
|
-
return {
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
}),
|
|
2760
|
-
id: elementIds.menuId,
|
|
2761
|
-
role: 'listbox',
|
|
2762
|
-
'aria-labelledby': elementIds.labelId,
|
|
2763
|
-
tabIndex: -1,
|
|
2764
|
-
onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
|
|
2765
|
-
...rest
|
|
2766
|
-
};
|
|
2758
|
+
return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
|
|
2759
|
+
menuRef.current = menuNode;
|
|
2760
|
+
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
|
|
2767
2761
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2762
|
+
var getToggleButtonProps = preact.useCallback(function (_temp3, _temp4) {
|
|
2763
|
+
var _extends3;
|
|
2764
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
2765
|
+
onBlur = _ref3.onBlur,
|
|
2766
|
+
onClick = _ref3.onClick,
|
|
2767
|
+
onKeyDown = _ref3.onKeyDown,
|
|
2768
|
+
_ref3$refKey = _ref3.refKey,
|
|
2769
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
2770
|
+
ref = _ref3.ref,
|
|
2771
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
|
|
2772
|
+
var _ref4 = _temp4 === void 0 ? {} : _temp4,
|
|
2773
|
+
_ref4$suppressRefErro = _ref4.suppressRefError,
|
|
2774
|
+
suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
|
|
2775
|
+
var latestState = latest.current.state;
|
|
2776
|
+
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
2782
2777
|
dispatch({
|
|
2783
2778
|
type: ToggleButtonClick$1
|
|
2784
2779
|
});
|
|
2785
2780
|
};
|
|
2786
|
-
|
|
2781
|
+
var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
|
|
2787
2782
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
2788
2783
|
dispatch({
|
|
2789
2784
|
type: ToggleButtonBlur
|
|
2790
2785
|
});
|
|
2791
2786
|
}
|
|
2792
2787
|
};
|
|
2793
|
-
|
|
2794
|
-
|
|
2788
|
+
var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
|
|
2789
|
+
var key = normalizeArrowKey(event);
|
|
2795
2790
|
if (key && toggleButtonKeyDownHandlers[key]) {
|
|
2796
2791
|
toggleButtonKeyDownHandlers[key](event);
|
|
2797
2792
|
} else if (isAcceptedCharacterKey(key)) {
|
|
2798
2793
|
dispatch({
|
|
2799
2794
|
type: ToggleButtonKeyDownCharacter,
|
|
2800
|
-
key,
|
|
2801
|
-
getItemNodeFromIndex
|
|
2795
|
+
key: key,
|
|
2796
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
2802
2797
|
});
|
|
2803
2798
|
}
|
|
2804
2799
|
};
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
}),
|
|
2809
|
-
'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
|
|
2810
|
-
'aria-controls': elementIds.menuId,
|
|
2811
|
-
'aria-expanded': latest.current.state.isOpen,
|
|
2812
|
-
'aria-haspopup': 'listbox',
|
|
2813
|
-
'aria-labelledby': `${elementIds.labelId}`,
|
|
2814
|
-
id: elementIds.toggleButtonId,
|
|
2815
|
-
role: 'combobox',
|
|
2816
|
-
tabIndex: 0,
|
|
2817
|
-
onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur),
|
|
2818
|
-
...rest
|
|
2819
|
-
};
|
|
2800
|
+
var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
|
|
2801
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
2802
|
+
}), _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);
|
|
2820
2803
|
if (!rest.disabled) {
|
|
2821
2804
|
toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
|
|
2822
2805
|
toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
|
|
@@ -2824,56 +2807,54 @@
|
|
|
2824
2807
|
setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
|
|
2825
2808
|
return toggleProps;
|
|
2826
2809
|
}, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2810
|
+
var getItemProps = preact.useCallback(function (_temp5) {
|
|
2811
|
+
var _extends4;
|
|
2812
|
+
var _ref5 = _temp5 === void 0 ? {} : _temp5,
|
|
2813
|
+
itemProp = _ref5.item,
|
|
2814
|
+
indexProp = _ref5.index,
|
|
2815
|
+
onMouseMove = _ref5.onMouseMove,
|
|
2816
|
+
onClick = _ref5.onClick,
|
|
2817
|
+
_ref5$refKey = _ref5.refKey,
|
|
2818
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
2819
|
+
ref = _ref5.ref,
|
|
2820
|
+
disabled = _ref5.disabled,
|
|
2821
|
+
rest = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
|
|
2822
|
+
var _latest$current = latest.current,
|
|
2823
|
+
latestState = _latest$current.state,
|
|
2824
|
+
latestProps = _latest$current.props;
|
|
2825
|
+
var item = itemProp != null ? itemProp : items[indexProp];
|
|
2826
|
+
var index = getItemIndex(indexProp, item, latestProps.items);
|
|
2827
|
+
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
2845
2828
|
if (index === latestState.highlightedIndex) {
|
|
2846
2829
|
return;
|
|
2847
2830
|
}
|
|
2848
2831
|
shouldScrollRef.current = false;
|
|
2849
2832
|
dispatch({
|
|
2850
2833
|
type: ItemMouseMove$1,
|
|
2851
|
-
index,
|
|
2852
|
-
disabled
|
|
2834
|
+
index: index,
|
|
2835
|
+
disabled: disabled
|
|
2853
2836
|
});
|
|
2854
2837
|
};
|
|
2855
|
-
|
|
2838
|
+
var itemHandleClick = function itemHandleClick() {
|
|
2856
2839
|
dispatch({
|
|
2857
2840
|
type: ItemClick$1,
|
|
2858
|
-
index
|
|
2841
|
+
index: index
|
|
2859
2842
|
});
|
|
2860
2843
|
};
|
|
2861
|
-
|
|
2844
|
+
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
2862
2845
|
if (itemIndex < 0) {
|
|
2863
2846
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
2864
2847
|
}
|
|
2865
|
-
|
|
2866
|
-
disabled,
|
|
2848
|
+
var itemProps = _extends((_extends4 = {
|
|
2849
|
+
disabled: disabled,
|
|
2867
2850
|
role: 'option',
|
|
2868
|
-
'aria-selected':
|
|
2869
|
-
id: elementIds.getItemId(itemIndex)
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
...rest
|
|
2876
|
-
};
|
|
2851
|
+
'aria-selected': "" + (item === selectedItem),
|
|
2852
|
+
id: elementIds.getItemId(itemIndex)
|
|
2853
|
+
}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
|
|
2854
|
+
if (itemNode) {
|
|
2855
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
2856
|
+
}
|
|
2857
|
+
}), _extends4), rest);
|
|
2877
2858
|
if (!disabled) {
|
|
2878
2859
|
itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
|
|
2879
2860
|
}
|
|
@@ -2882,49 +2863,49 @@
|
|
|
2882
2863
|
}, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
|
|
2883
2864
|
return {
|
|
2884
2865
|
// prop getters.
|
|
2885
|
-
getToggleButtonProps,
|
|
2886
|
-
getLabelProps,
|
|
2887
|
-
getMenuProps,
|
|
2888
|
-
getItemProps,
|
|
2866
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
2867
|
+
getLabelProps: getLabelProps,
|
|
2868
|
+
getMenuProps: getMenuProps,
|
|
2869
|
+
getItemProps: getItemProps,
|
|
2889
2870
|
// actions.
|
|
2890
|
-
toggleMenu,
|
|
2891
|
-
openMenu,
|
|
2892
|
-
closeMenu,
|
|
2893
|
-
setHighlightedIndex,
|
|
2894
|
-
selectItem,
|
|
2895
|
-
reset,
|
|
2896
|
-
setInputValue,
|
|
2871
|
+
toggleMenu: toggleMenu,
|
|
2872
|
+
openMenu: openMenu,
|
|
2873
|
+
closeMenu: closeMenu,
|
|
2874
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
2875
|
+
selectItem: selectItem,
|
|
2876
|
+
reset: reset,
|
|
2877
|
+
setInputValue: setInputValue,
|
|
2897
2878
|
// state.
|
|
2898
|
-
highlightedIndex,
|
|
2899
|
-
isOpen,
|
|
2900
|
-
selectedItem,
|
|
2901
|
-
inputValue
|
|
2879
|
+
highlightedIndex: highlightedIndex,
|
|
2880
|
+
isOpen: isOpen,
|
|
2881
|
+
selectedItem: selectedItem,
|
|
2882
|
+
inputValue: inputValue
|
|
2902
2883
|
};
|
|
2903
2884
|
}
|
|
2904
2885
|
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2886
|
+
var InputKeyDownArrowDown = '__input_keydown_arrow_down__' ;
|
|
2887
|
+
var InputKeyDownArrowUp = '__input_keydown_arrow_up__' ;
|
|
2888
|
+
var InputKeyDownEscape = '__input_keydown_escape__' ;
|
|
2889
|
+
var InputKeyDownHome = '__input_keydown_home__' ;
|
|
2890
|
+
var InputKeyDownEnd = '__input_keydown_end__' ;
|
|
2891
|
+
var InputKeyDownPageUp = '__input_keydown_page_up__' ;
|
|
2892
|
+
var InputKeyDownPageDown = '__input_keydown_page_down__' ;
|
|
2893
|
+
var InputKeyDownEnter = '__input_keydown_enter__' ;
|
|
2894
|
+
var InputChange = '__input_change__' ;
|
|
2895
|
+
var InputBlur = '__input_blur__' ;
|
|
2896
|
+
var InputFocus = '__input_focus__' ;
|
|
2897
|
+
var MenuMouseLeave = '__menu_mouse_leave__' ;
|
|
2898
|
+
var ItemMouseMove = '__item_mouse_move__' ;
|
|
2899
|
+
var ItemClick = '__item_click__' ;
|
|
2900
|
+
var ToggleButtonClick = '__togglebutton_click__' ;
|
|
2901
|
+
var FunctionToggleMenu = '__function_toggle_menu__' ;
|
|
2902
|
+
var FunctionOpenMenu = '__function_open_menu__' ;
|
|
2903
|
+
var FunctionCloseMenu = '__function_close_menu__' ;
|
|
2904
|
+
var FunctionSetHighlightedIndex = '__function_set_highlighted_index__' ;
|
|
2905
|
+
var FunctionSelectItem = '__function_select_item__' ;
|
|
2906
|
+
var FunctionSetInputValue = '__function_set_input_value__' ;
|
|
2907
|
+
var FunctionReset$1 = '__function_reset__' ;
|
|
2908
|
+
var ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__' ;
|
|
2928
2909
|
|
|
2929
2910
|
var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
|
|
2930
2911
|
__proto__: null,
|
|
@@ -2954,22 +2935,17 @@
|
|
|
2954
2935
|
});
|
|
2955
2936
|
|
|
2956
2937
|
function getInitialState$1(props) {
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
} = initialState;
|
|
2961
|
-
let {
|
|
2962
|
-
inputValue
|
|
2963
|
-
} = initialState;
|
|
2938
|
+
var initialState = getInitialState$2(props);
|
|
2939
|
+
var selectedItem = initialState.selectedItem;
|
|
2940
|
+
var inputValue = initialState.inputValue;
|
|
2964
2941
|
if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
|
|
2965
2942
|
inputValue = props.itemToString(selectedItem);
|
|
2966
2943
|
}
|
|
2967
|
-
return {
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
};
|
|
2944
|
+
return _extends({}, initialState, {
|
|
2945
|
+
inputValue: inputValue
|
|
2946
|
+
});
|
|
2971
2947
|
}
|
|
2972
|
-
|
|
2948
|
+
var propTypes$1 = {
|
|
2973
2949
|
items: PropTypes__default["default"].array.isRequired,
|
|
2974
2950
|
itemToString: PropTypes__default["default"].func,
|
|
2975
2951
|
getA11yStatusMessage: PropTypes__default["default"].func,
|
|
@@ -3022,11 +2998,13 @@
|
|
|
3022
2998
|
* @returns {Array} An array with the state and an action dispatcher.
|
|
3023
2999
|
*/
|
|
3024
3000
|
function useControlledReducer(reducer, initialState, props) {
|
|
3025
|
-
|
|
3026
|
-
|
|
3001
|
+
var previousSelectedItemRef = preact.useRef();
|
|
3002
|
+
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
|
|
3003
|
+
state = _useEnhancedReducer[0],
|
|
3004
|
+
dispatch = _useEnhancedReducer[1];
|
|
3027
3005
|
|
|
3028
3006
|
// ToDo: if needed, make same approach as selectedItemChanged from Downshift.
|
|
3029
|
-
preact.useEffect(()
|
|
3007
|
+
preact.useEffect(function () {
|
|
3030
3008
|
if (isControlledProp(props, 'selectedItem')) {
|
|
3031
3009
|
if (previousSelectedItemRef.current !== props.selectedItem) {
|
|
3032
3010
|
dispatch({
|
|
@@ -3041,26 +3019,23 @@
|
|
|
3041
3019
|
}
|
|
3042
3020
|
|
|
3043
3021
|
// eslint-disable-next-line import/no-mutable-exports
|
|
3044
|
-
|
|
3022
|
+
var validatePropTypes$1 = noop;
|
|
3045
3023
|
/* istanbul ignore next */
|
|
3046
3024
|
{
|
|
3047
|
-
validatePropTypes$1 = (options, caller)
|
|
3025
|
+
validatePropTypes$1 = function validatePropTypes(options, caller) {
|
|
3048
3026
|
PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
|
|
3049
3027
|
};
|
|
3050
3028
|
}
|
|
3051
|
-
|
|
3052
|
-
...defaultProps$3,
|
|
3029
|
+
var defaultProps$1 = _extends({}, defaultProps$3, {
|
|
3053
3030
|
getA11yStatusMessage: getA11yStatusMessage$1
|
|
3054
|
-
};
|
|
3031
|
+
});
|
|
3055
3032
|
|
|
3056
3033
|
/* eslint-disable complexity */
|
|
3057
3034
|
function downshiftUseComboboxReducer(state, action) {
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
} = action;
|
|
3063
|
-
let changes;
|
|
3035
|
+
var type = action.type,
|
|
3036
|
+
props = action.props,
|
|
3037
|
+
altKey = action.altKey;
|
|
3038
|
+
var changes;
|
|
3064
3039
|
switch (type) {
|
|
3065
3040
|
case ItemClick:
|
|
3066
3041
|
changes = {
|
|
@@ -3085,14 +3060,13 @@
|
|
|
3085
3060
|
case InputKeyDownArrowUp:
|
|
3086
3061
|
if (state.isOpen) {
|
|
3087
3062
|
if (altKey) {
|
|
3088
|
-
changes = {
|
|
3063
|
+
changes = _extends({
|
|
3089
3064
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
3090
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
};
|
|
3065
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
3066
|
+
}, state.highlightedIndex >= 0 && {
|
|
3067
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
3068
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
3069
|
+
});
|
|
3096
3070
|
} else {
|
|
3097
3071
|
changes = {
|
|
3098
3072
|
highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
|
|
@@ -3106,24 +3080,22 @@
|
|
|
3106
3080
|
}
|
|
3107
3081
|
break;
|
|
3108
3082
|
case InputKeyDownEnter:
|
|
3109
|
-
changes = {
|
|
3083
|
+
changes = _extends({
|
|
3110
3084
|
isOpen: getDefaultValue$1(props, 'isOpen'),
|
|
3111
|
-
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
};
|
|
3085
|
+
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
|
|
3086
|
+
}, state.highlightedIndex >= 0 && {
|
|
3087
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
3088
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
3089
|
+
});
|
|
3117
3090
|
break;
|
|
3118
3091
|
case InputKeyDownEscape:
|
|
3119
|
-
changes = {
|
|
3092
|
+
changes = _extends({
|
|
3120
3093
|
isOpen: false,
|
|
3121
|
-
highlightedIndex: -1
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
};
|
|
3094
|
+
highlightedIndex: -1
|
|
3095
|
+
}, !state.isOpen && {
|
|
3096
|
+
selectedItem: null,
|
|
3097
|
+
inputValue: ''
|
|
3098
|
+
});
|
|
3127
3099
|
break;
|
|
3128
3100
|
case InputKeyDownPageUp:
|
|
3129
3101
|
changes = {
|
|
@@ -3146,14 +3118,13 @@
|
|
|
3146
3118
|
};
|
|
3147
3119
|
break;
|
|
3148
3120
|
case InputBlur:
|
|
3149
|
-
changes = {
|
|
3121
|
+
changes = _extends({
|
|
3150
3122
|
isOpen: false,
|
|
3151
|
-
highlightedIndex: -1
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
};
|
|
3123
|
+
highlightedIndex: -1
|
|
3124
|
+
}, state.highlightedIndex >= 0 && action.selectItem && {
|
|
3125
|
+
selectedItem: props.items[state.highlightedIndex],
|
|
3126
|
+
inputValue: props.itemToString(props.items[state.highlightedIndex])
|
|
3127
|
+
});
|
|
3157
3128
|
break;
|
|
3158
3129
|
case InputChange:
|
|
3159
3130
|
changes = {
|
|
@@ -3182,14 +3153,14 @@
|
|
|
3182
3153
|
default:
|
|
3183
3154
|
return downshiftCommonReducer(state, action, stateChangeTypes$1);
|
|
3184
3155
|
}
|
|
3185
|
-
return {
|
|
3186
|
-
...state,
|
|
3187
|
-
...changes
|
|
3188
|
-
};
|
|
3156
|
+
return _extends({}, state, changes);
|
|
3189
3157
|
}
|
|
3190
3158
|
/* eslint-enable complexity */
|
|
3191
3159
|
|
|
3192
|
-
|
|
3160
|
+
var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
|
|
3161
|
+
_excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"],
|
|
3162
|
+
_excluded3 = ["onClick", "onPress", "refKey", "ref"],
|
|
3163
|
+
_excluded4 = ["onKeyDown", "onChange", "onInput", "onFocus", "onBlur", "onChangeText", "refKey", "ref"];
|
|
3193
3164
|
useCombobox.stateChangeTypes = stateChangeTypes$1;
|
|
3194
3165
|
function useCombobox(userProps) {
|
|
3195
3166
|
if (userProps === void 0) {
|
|
@@ -3197,349 +3168,327 @@
|
|
|
3197
3168
|
}
|
|
3198
3169
|
validatePropTypes$1(userProps, useCombobox);
|
|
3199
3170
|
// Props defaults and destructuring.
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
environment,
|
|
3210
|
-
getA11yStatusMessage,
|
|
3211
|
-
getA11ySelectionMessage,
|
|
3212
|
-
itemToString
|
|
3213
|
-
} = props;
|
|
3171
|
+
var props = _extends({}, defaultProps$1, userProps);
|
|
3172
|
+
var initialIsOpen = props.initialIsOpen,
|
|
3173
|
+
defaultIsOpen = props.defaultIsOpen,
|
|
3174
|
+
items = props.items,
|
|
3175
|
+
scrollIntoView = props.scrollIntoView,
|
|
3176
|
+
environment = props.environment,
|
|
3177
|
+
getA11yStatusMessage = props.getA11yStatusMessage,
|
|
3178
|
+
getA11ySelectionMessage = props.getA11ySelectionMessage,
|
|
3179
|
+
itemToString = props.itemToString;
|
|
3214
3180
|
// Initial state depending on controlled props.
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3181
|
+
var initialState = getInitialState$1(props);
|
|
3182
|
+
var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
|
|
3183
|
+
state = _useControlledReducer[0],
|
|
3184
|
+
dispatch = _useControlledReducer[1];
|
|
3185
|
+
var isOpen = state.isOpen,
|
|
3186
|
+
highlightedIndex = state.highlightedIndex,
|
|
3187
|
+
selectedItem = state.selectedItem,
|
|
3188
|
+
inputValue = state.inputValue;
|
|
3223
3189
|
|
|
3224
3190
|
// Element refs.
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
|
|
3229
|
-
|
|
3191
|
+
var menuRef = preact.useRef(null);
|
|
3192
|
+
var itemRefs = preact.useRef({});
|
|
3193
|
+
var inputRef = preact.useRef(null);
|
|
3194
|
+
var toggleButtonRef = preact.useRef(null);
|
|
3195
|
+
var isInitialMountRef = preact.useRef(true);
|
|
3230
3196
|
// prevent id re-generation between renders.
|
|
3231
|
-
|
|
3197
|
+
var elementIds = useElementIds(props);
|
|
3232
3198
|
// used to keep track of how many items we had on previous cycle.
|
|
3233
|
-
|
|
3199
|
+
var previousResultCountRef = preact.useRef();
|
|
3234
3200
|
// utility callback to get item element.
|
|
3235
|
-
|
|
3236
|
-
state,
|
|
3237
|
-
props
|
|
3201
|
+
var latest = useLatestRef({
|
|
3202
|
+
state: state,
|
|
3203
|
+
props: props
|
|
3238
3204
|
});
|
|
3239
|
-
|
|
3205
|
+
var getItemNodeFromIndex = preact.useCallback(function (index) {
|
|
3206
|
+
return itemRefs.current[elementIds.getItemId(index)];
|
|
3207
|
+
}, [elementIds]);
|
|
3240
3208
|
|
|
3241
3209
|
// Effects.
|
|
3242
3210
|
// Sets a11y status message on changes in state.
|
|
3243
|
-
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
|
|
3211
|
+
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
|
|
3244
3212
|
isInitialMount: isInitialMountRef.current,
|
|
3245
3213
|
previousResultCount: previousResultCountRef.current,
|
|
3246
|
-
items,
|
|
3247
|
-
environment,
|
|
3248
|
-
itemToString
|
|
3249
|
-
|
|
3250
|
-
});
|
|
3214
|
+
items: items,
|
|
3215
|
+
environment: environment,
|
|
3216
|
+
itemToString: itemToString
|
|
3217
|
+
}, state));
|
|
3251
3218
|
// Sets a11y status message on changes in selectedItem.
|
|
3252
|
-
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
|
|
3219
|
+
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
|
|
3253
3220
|
isInitialMount: isInitialMountRef.current,
|
|
3254
3221
|
previousResultCount: previousResultCountRef.current,
|
|
3255
|
-
items,
|
|
3256
|
-
environment,
|
|
3257
|
-
itemToString
|
|
3258
|
-
|
|
3259
|
-
});
|
|
3222
|
+
items: items,
|
|
3223
|
+
environment: environment,
|
|
3224
|
+
itemToString: itemToString
|
|
3225
|
+
}, state));
|
|
3260
3226
|
// Scroll on highlighted item if change comes from keyboard.
|
|
3261
|
-
|
|
3227
|
+
var shouldScrollRef = useScrollIntoView({
|
|
3262
3228
|
menuElement: menuRef.current,
|
|
3263
|
-
highlightedIndex,
|
|
3264
|
-
isOpen,
|
|
3265
|
-
itemRefs,
|
|
3266
|
-
scrollIntoView,
|
|
3267
|
-
getItemNodeFromIndex
|
|
3229
|
+
highlightedIndex: highlightedIndex,
|
|
3230
|
+
isOpen: isOpen,
|
|
3231
|
+
itemRefs: itemRefs,
|
|
3232
|
+
scrollIntoView: scrollIntoView,
|
|
3233
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3268
3234
|
});
|
|
3269
3235
|
useControlPropsValidator({
|
|
3270
3236
|
isInitialMount: isInitialMountRef.current,
|
|
3271
|
-
props,
|
|
3272
|
-
state
|
|
3237
|
+
props: props,
|
|
3238
|
+
state: state
|
|
3273
3239
|
});
|
|
3274
3240
|
// Focus the input on first render if required.
|
|
3275
|
-
preact.useEffect(()
|
|
3276
|
-
|
|
3241
|
+
preact.useEffect(function () {
|
|
3242
|
+
var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
|
|
3277
3243
|
if (focusOnOpen && inputRef.current) {
|
|
3278
3244
|
inputRef.current.focus();
|
|
3279
3245
|
}
|
|
3280
3246
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3281
3247
|
}, []);
|
|
3282
|
-
preact.useEffect(()
|
|
3248
|
+
preact.useEffect(function () {
|
|
3283
3249
|
if (isInitialMountRef.current) {
|
|
3284
3250
|
return;
|
|
3285
3251
|
}
|
|
3286
3252
|
previousResultCountRef.current = items.length;
|
|
3287
3253
|
});
|
|
3288
3254
|
// Add mouse/touch events to document.
|
|
3289
|
-
|
|
3255
|
+
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
|
|
3290
3256
|
dispatch({
|
|
3291
3257
|
type: InputBlur,
|
|
3292
3258
|
selectItem: false
|
|
3293
3259
|
});
|
|
3294
3260
|
});
|
|
3295
|
-
|
|
3261
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
|
|
3296
3262
|
// Make initial ref false.
|
|
3297
|
-
preact.useEffect(()
|
|
3263
|
+
preact.useEffect(function () {
|
|
3298
3264
|
isInitialMountRef.current = false;
|
|
3299
|
-
return ()
|
|
3265
|
+
return function () {
|
|
3300
3266
|
isInitialMountRef.current = true;
|
|
3301
3267
|
};
|
|
3302
3268
|
}, []);
|
|
3303
3269
|
// Reset itemRefs on close.
|
|
3304
|
-
preact.useEffect(()
|
|
3270
|
+
preact.useEffect(function () {
|
|
3305
3271
|
if (!isOpen) {
|
|
3306
3272
|
itemRefs.current = {};
|
|
3307
3273
|
} else if (document.activeElement !== inputRef.current) {
|
|
3308
|
-
|
|
3274
|
+
var _inputRef$current;
|
|
3275
|
+
inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
|
|
3309
3276
|
}
|
|
3310
3277
|
}, [isOpen]);
|
|
3311
3278
|
|
|
3312
3279
|
/* Event handler functions */
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
event
|
|
3316
|
-
dispatch({
|
|
3317
|
-
type: InputKeyDownArrowDown,
|
|
3318
|
-
altKey: event.altKey,
|
|
3319
|
-
getItemNodeFromIndex
|
|
3320
|
-
});
|
|
3321
|
-
},
|
|
3322
|
-
ArrowUp(event) {
|
|
3323
|
-
event.preventDefault();
|
|
3324
|
-
dispatch({
|
|
3325
|
-
type: InputKeyDownArrowUp,
|
|
3326
|
-
altKey: event.altKey,
|
|
3327
|
-
getItemNodeFromIndex
|
|
3328
|
-
});
|
|
3329
|
-
},
|
|
3330
|
-
Home(event) {
|
|
3331
|
-
if (!latest.current.state.isOpen) {
|
|
3332
|
-
return;
|
|
3333
|
-
}
|
|
3334
|
-
event.preventDefault();
|
|
3335
|
-
dispatch({
|
|
3336
|
-
type: InputKeyDownHome,
|
|
3337
|
-
getItemNodeFromIndex
|
|
3338
|
-
});
|
|
3339
|
-
},
|
|
3340
|
-
End(event) {
|
|
3341
|
-
if (!latest.current.state.isOpen) {
|
|
3342
|
-
return;
|
|
3343
|
-
}
|
|
3344
|
-
event.preventDefault();
|
|
3345
|
-
dispatch({
|
|
3346
|
-
type: InputKeyDownEnd,
|
|
3347
|
-
getItemNodeFromIndex
|
|
3348
|
-
});
|
|
3349
|
-
},
|
|
3350
|
-
Escape(event) {
|
|
3351
|
-
const latestState = latest.current.state;
|
|
3352
|
-
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
3280
|
+
var inputKeyDownHandlers = preact.useMemo(function () {
|
|
3281
|
+
return {
|
|
3282
|
+
ArrowDown: function ArrowDown(event) {
|
|
3353
3283
|
event.preventDefault();
|
|
3354
3284
|
dispatch({
|
|
3355
|
-
type:
|
|
3285
|
+
type: InputKeyDownArrowDown,
|
|
3286
|
+
altKey: event.altKey,
|
|
3287
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3356
3288
|
});
|
|
3357
|
-
}
|
|
3358
|
-
|
|
3359
|
-
Enter(event) {
|
|
3360
|
-
const latestState = latest.current.state;
|
|
3361
|
-
// if closed or no highlighted index, do nothing.
|
|
3362
|
-
if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3363
|
-
) {
|
|
3364
|
-
return;
|
|
3365
|
-
}
|
|
3366
|
-
event.preventDefault();
|
|
3367
|
-
dispatch({
|
|
3368
|
-
type: InputKeyDownEnter,
|
|
3369
|
-
getItemNodeFromIndex
|
|
3370
|
-
});
|
|
3371
|
-
},
|
|
3372
|
-
PageUp(event) {
|
|
3373
|
-
if (latest.current.state.isOpen) {
|
|
3289
|
+
},
|
|
3290
|
+
ArrowUp: function ArrowUp(event) {
|
|
3374
3291
|
event.preventDefault();
|
|
3375
3292
|
dispatch({
|
|
3376
|
-
type:
|
|
3377
|
-
|
|
3293
|
+
type: InputKeyDownArrowUp,
|
|
3294
|
+
altKey: event.altKey,
|
|
3295
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3378
3296
|
});
|
|
3379
|
-
}
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3297
|
+
},
|
|
3298
|
+
Home: function Home(event) {
|
|
3299
|
+
if (!latest.current.state.isOpen) {
|
|
3300
|
+
return;
|
|
3301
|
+
}
|
|
3302
|
+
event.preventDefault();
|
|
3303
|
+
dispatch({
|
|
3304
|
+
type: InputKeyDownHome,
|
|
3305
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3306
|
+
});
|
|
3307
|
+
},
|
|
3308
|
+
End: function End(event) {
|
|
3309
|
+
if (!latest.current.state.isOpen) {
|
|
3310
|
+
return;
|
|
3311
|
+
}
|
|
3383
3312
|
event.preventDefault();
|
|
3384
3313
|
dispatch({
|
|
3385
|
-
type:
|
|
3386
|
-
getItemNodeFromIndex
|
|
3314
|
+
type: InputKeyDownEnd,
|
|
3315
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3387
3316
|
});
|
|
3317
|
+
},
|
|
3318
|
+
Escape: function Escape(event) {
|
|
3319
|
+
var latestState = latest.current.state;
|
|
3320
|
+
if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
|
|
3321
|
+
event.preventDefault();
|
|
3322
|
+
dispatch({
|
|
3323
|
+
type: InputKeyDownEscape
|
|
3324
|
+
});
|
|
3325
|
+
}
|
|
3326
|
+
},
|
|
3327
|
+
Enter: function Enter(event) {
|
|
3328
|
+
var latestState = latest.current.state;
|
|
3329
|
+
// if closed or no highlighted index, do nothing.
|
|
3330
|
+
if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
|
|
3331
|
+
) {
|
|
3332
|
+
return;
|
|
3333
|
+
}
|
|
3334
|
+
event.preventDefault();
|
|
3335
|
+
dispatch({
|
|
3336
|
+
type: InputKeyDownEnter,
|
|
3337
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3338
|
+
});
|
|
3339
|
+
},
|
|
3340
|
+
PageUp: function PageUp(event) {
|
|
3341
|
+
if (latest.current.state.isOpen) {
|
|
3342
|
+
event.preventDefault();
|
|
3343
|
+
dispatch({
|
|
3344
|
+
type: InputKeyDownPageUp,
|
|
3345
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3346
|
+
});
|
|
3347
|
+
}
|
|
3348
|
+
},
|
|
3349
|
+
PageDown: function PageDown(event) {
|
|
3350
|
+
if (latest.current.state.isOpen) {
|
|
3351
|
+
event.preventDefault();
|
|
3352
|
+
dispatch({
|
|
3353
|
+
type: InputKeyDownPageDown,
|
|
3354
|
+
getItemNodeFromIndex: getItemNodeFromIndex
|
|
3355
|
+
});
|
|
3356
|
+
}
|
|
3388
3357
|
}
|
|
3389
|
-
}
|
|
3390
|
-
}
|
|
3358
|
+
};
|
|
3359
|
+
}, [dispatch, latest, getItemNodeFromIndex]);
|
|
3391
3360
|
|
|
3392
3361
|
// Getter props.
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3362
|
+
var getLabelProps = preact.useCallback(function (labelProps) {
|
|
3363
|
+
return _extends({
|
|
3364
|
+
id: elementIds.labelId,
|
|
3365
|
+
htmlFor: elementIds.inputId
|
|
3366
|
+
}, labelProps);
|
|
3367
|
+
}, [elementIds]);
|
|
3368
|
+
var getMenuProps = preact.useCallback(function (_temp, _temp2) {
|
|
3369
|
+
var _extends2;
|
|
3370
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
3371
|
+
onMouseLeave = _ref.onMouseLeave,
|
|
3372
|
+
_ref$refKey = _ref.refKey,
|
|
3373
|
+
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
|
|
3374
|
+
ref = _ref.ref,
|
|
3375
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
3376
|
+
var _ref2 = _temp2 === void 0 ? {} : _temp2,
|
|
3377
|
+
_ref2$suppressRefErro = _ref2.suppressRefError,
|
|
3378
|
+
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
|
|
3408
3379
|
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
|
|
3409
|
-
return {
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
|
|
3417
|
-
dispatch({
|
|
3418
|
-
type: MenuMouseLeave
|
|
3419
|
-
});
|
|
3420
|
-
}),
|
|
3421
|
-
...rest
|
|
3422
|
-
};
|
|
3380
|
+
return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
|
|
3381
|
+
menuRef.current = menuNode;
|
|
3382
|
+
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
|
|
3383
|
+
dispatch({
|
|
3384
|
+
type: MenuMouseLeave
|
|
3385
|
+
});
|
|
3386
|
+
}), _extends2), rest);
|
|
3423
3387
|
}, [dispatch, setGetterPropCallInfo, elementIds]);
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3388
|
+
var getItemProps = preact.useCallback(function (_temp3) {
|
|
3389
|
+
var _extends3, _ref4;
|
|
3390
|
+
var _ref3 = _temp3 === void 0 ? {} : _temp3,
|
|
3391
|
+
item = _ref3.item,
|
|
3392
|
+
index = _ref3.index,
|
|
3393
|
+
_ref3$refKey = _ref3.refKey,
|
|
3394
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
3395
|
+
ref = _ref3.ref,
|
|
3396
|
+
onMouseMove = _ref3.onMouseMove,
|
|
3397
|
+
onMouseDown = _ref3.onMouseDown,
|
|
3398
|
+
onClick = _ref3.onClick;
|
|
3399
|
+
_ref3.onPress;
|
|
3400
|
+
var disabled = _ref3.disabled,
|
|
3401
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
|
|
3402
|
+
var _latest$current = latest.current,
|
|
3403
|
+
latestProps = _latest$current.props,
|
|
3404
|
+
latestState = _latest$current.state;
|
|
3405
|
+
var itemIndex = getItemIndex(index, item, latestProps.items);
|
|
3442
3406
|
if (itemIndex < 0) {
|
|
3443
3407
|
throw new Error('Pass either item or item index in getItemProps!');
|
|
3444
3408
|
}
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3409
|
+
var onSelectKey = 'onClick';
|
|
3410
|
+
var customClickHandler = onClick;
|
|
3411
|
+
var itemHandleMouseMove = function itemHandleMouseMove() {
|
|
3448
3412
|
if (index === latestState.highlightedIndex) {
|
|
3449
3413
|
return;
|
|
3450
3414
|
}
|
|
3451
3415
|
shouldScrollRef.current = false;
|
|
3452
3416
|
dispatch({
|
|
3453
3417
|
type: ItemMouseMove,
|
|
3454
|
-
index,
|
|
3455
|
-
disabled
|
|
3418
|
+
index: index,
|
|
3419
|
+
disabled: disabled
|
|
3456
3420
|
});
|
|
3457
3421
|
};
|
|
3458
|
-
|
|
3422
|
+
var itemHandleClick = function itemHandleClick() {
|
|
3459
3423
|
dispatch({
|
|
3460
3424
|
type: ItemClick,
|
|
3461
|
-
index
|
|
3425
|
+
index: index
|
|
3462
3426
|
});
|
|
3463
3427
|
};
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
[refKey]: handleRefs(ref, itemNode => {
|
|
3467
|
-
if (itemNode) {
|
|
3468
|
-
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3469
|
-
}
|
|
3470
|
-
}),
|
|
3471
|
-
disabled,
|
|
3472
|
-
role: 'option',
|
|
3473
|
-
'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
|
|
3474
|
-
id: elementIds.getItemId(itemIndex),
|
|
3475
|
-
...(!disabled && {
|
|
3476
|
-
[onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
|
|
3477
|
-
}),
|
|
3478
|
-
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3479
|
-
onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
|
|
3480
|
-
...rest
|
|
3428
|
+
var itemHandleMouseDown = function itemHandleMouseDown(e) {
|
|
3429
|
+
return e.preventDefault();
|
|
3481
3430
|
};
|
|
3431
|
+
return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
|
|
3432
|
+
if (itemNode) {
|
|
3433
|
+
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
|
|
3434
|
+
}
|
|
3435
|
+
}), _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), {
|
|
3436
|
+
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
|
|
3437
|
+
onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
|
|
3438
|
+
}, rest);
|
|
3482
3439
|
}, [dispatch, latest, shouldScrollRef, elementIds]);
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3440
|
+
var getToggleButtonProps = preact.useCallback(function (_temp4) {
|
|
3441
|
+
var _extends4;
|
|
3442
|
+
var _ref5 = _temp4 === void 0 ? {} : _temp4,
|
|
3443
|
+
onClick = _ref5.onClick;
|
|
3444
|
+
_ref5.onPress;
|
|
3445
|
+
var _ref5$refKey = _ref5.refKey,
|
|
3446
|
+
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
|
|
3447
|
+
ref = _ref5.ref,
|
|
3448
|
+
rest = _objectWithoutPropertiesLoose(_ref5, _excluded3);
|
|
3449
|
+
var latestState = latest.current.state;
|
|
3450
|
+
var toggleButtonHandleClick = function toggleButtonHandleClick() {
|
|
3493
3451
|
dispatch({
|
|
3494
3452
|
type: ToggleButtonClick
|
|
3495
3453
|
});
|
|
3496
3454
|
};
|
|
3497
|
-
return {
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
'aria-expanded': latestState.isOpen,
|
|
3503
|
-
id: elementIds.toggleButtonId,
|
|
3504
|
-
tabIndex: -1,
|
|
3505
|
-
...(!rest.disabled && {
|
|
3506
|
-
...({
|
|
3507
|
-
onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
|
|
3508
|
-
})
|
|
3509
|
-
}),
|
|
3510
|
-
...rest
|
|
3511
|
-
};
|
|
3455
|
+
return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
|
|
3456
|
+
toggleButtonRef.current = toggleButtonNode;
|
|
3457
|
+
}), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
|
|
3458
|
+
onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
|
|
3459
|
+
}), rest);
|
|
3512
3460
|
}, [dispatch, latest, elementIds]);
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
|
|
3527
|
-
|
|
3461
|
+
var getInputProps = preact.useCallback(function (_temp5, _temp6) {
|
|
3462
|
+
var _extends5;
|
|
3463
|
+
var _ref6 = _temp5 === void 0 ? {} : _temp5,
|
|
3464
|
+
onKeyDown = _ref6.onKeyDown,
|
|
3465
|
+
onChange = _ref6.onChange,
|
|
3466
|
+
onInput = _ref6.onInput,
|
|
3467
|
+
onFocus = _ref6.onFocus,
|
|
3468
|
+
onBlur = _ref6.onBlur;
|
|
3469
|
+
_ref6.onChangeText;
|
|
3470
|
+
var _ref6$refKey = _ref6.refKey,
|
|
3471
|
+
refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
|
|
3472
|
+
ref = _ref6.ref,
|
|
3473
|
+
rest = _objectWithoutPropertiesLoose(_ref6, _excluded4);
|
|
3474
|
+
var _ref7 = _temp6 === void 0 ? {} : _temp6,
|
|
3475
|
+
_ref7$suppressRefErro = _ref7.suppressRefError,
|
|
3476
|
+
suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
|
|
3528
3477
|
setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3478
|
+
var latestState = latest.current.state;
|
|
3479
|
+
var inputHandleKeyDown = function inputHandleKeyDown(event) {
|
|
3480
|
+
var key = normalizeArrowKey(event);
|
|
3532
3481
|
if (key && inputKeyDownHandlers[key]) {
|
|
3533
3482
|
inputKeyDownHandlers[key](event);
|
|
3534
3483
|
}
|
|
3535
3484
|
};
|
|
3536
|
-
|
|
3485
|
+
var inputHandleChange = function inputHandleChange(event) {
|
|
3537
3486
|
dispatch({
|
|
3538
3487
|
type: InputChange,
|
|
3539
3488
|
inputValue: event.target.value
|
|
3540
3489
|
});
|
|
3541
3490
|
};
|
|
3542
|
-
|
|
3491
|
+
var inputHandleBlur = function inputHandleBlur() {
|
|
3543
3492
|
/* istanbul ignore else */
|
|
3544
3493
|
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
|
|
3545
3494
|
dispatch({
|
|
@@ -3548,7 +3497,7 @@
|
|
|
3548
3497
|
});
|
|
3549
3498
|
}
|
|
3550
3499
|
};
|
|
3551
|
-
|
|
3500
|
+
var inputHandleFocus = function inputHandleFocus() {
|
|
3552
3501
|
if (!latestState.isOpen) {
|
|
3553
3502
|
dispatch({
|
|
3554
3503
|
type: InputFocus
|
|
@@ -3557,99 +3506,80 @@
|
|
|
3557
3506
|
};
|
|
3558
3507
|
|
|
3559
3508
|
/* istanbul ignore next (preact) */
|
|
3560
|
-
|
|
3561
|
-
|
|
3509
|
+
var onChangeKey = 'onInput' ;
|
|
3510
|
+
var eventHandlers = {};
|
|
3562
3511
|
if (!rest.disabled) {
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
|
|
3566
|
-
onBlur: callAllEventHandlers(onBlur, inputHandleBlur),
|
|
3567
|
-
onFocus: callAllEventHandlers(onFocus, inputHandleFocus)
|
|
3568
|
-
};
|
|
3512
|
+
var _eventHandlers;
|
|
3513
|
+
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onFocus = callAllEventHandlers(onFocus, inputHandleFocus), _eventHandlers);
|
|
3569
3514
|
}
|
|
3570
|
-
return {
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
}),
|
|
3574
|
-
'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
|
|
3575
|
-
'aria-autocomplete': 'list',
|
|
3576
|
-
'aria-controls': elementIds.menuId,
|
|
3577
|
-
'aria-expanded': latestState.isOpen,
|
|
3578
|
-
'aria-labelledby': elementIds.labelId,
|
|
3579
|
-
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
|
|
3580
|
-
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
|
|
3581
|
-
autoComplete: 'off',
|
|
3582
|
-
id: elementIds.inputId,
|
|
3583
|
-
role: 'combobox',
|
|
3584
|
-
value: latestState.inputValue,
|
|
3585
|
-
...eventHandlers,
|
|
3586
|
-
...rest
|
|
3587
|
-
};
|
|
3515
|
+
return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
|
|
3516
|
+
inputRef.current = inputNode;
|
|
3517
|
+
}), _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);
|
|
3588
3518
|
}, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
|
|
3589
3519
|
|
|
3590
3520
|
// returns
|
|
3591
|
-
|
|
3521
|
+
var toggleMenu = preact.useCallback(function () {
|
|
3592
3522
|
dispatch({
|
|
3593
3523
|
type: FunctionToggleMenu
|
|
3594
3524
|
});
|
|
3595
3525
|
}, [dispatch]);
|
|
3596
|
-
|
|
3526
|
+
var closeMenu = preact.useCallback(function () {
|
|
3597
3527
|
dispatch({
|
|
3598
3528
|
type: FunctionCloseMenu
|
|
3599
3529
|
});
|
|
3600
3530
|
}, [dispatch]);
|
|
3601
|
-
|
|
3531
|
+
var openMenu = preact.useCallback(function () {
|
|
3602
3532
|
dispatch({
|
|
3603
3533
|
type: FunctionOpenMenu
|
|
3604
3534
|
});
|
|
3605
3535
|
}, [dispatch]);
|
|
3606
|
-
|
|
3536
|
+
var setHighlightedIndex = preact.useCallback(function (newHighlightedIndex) {
|
|
3607
3537
|
dispatch({
|
|
3608
3538
|
type: FunctionSetHighlightedIndex,
|
|
3609
3539
|
highlightedIndex: newHighlightedIndex
|
|
3610
3540
|
});
|
|
3611
3541
|
}, [dispatch]);
|
|
3612
|
-
|
|
3542
|
+
var selectItem = preact.useCallback(function (newSelectedItem) {
|
|
3613
3543
|
dispatch({
|
|
3614
3544
|
type: FunctionSelectItem,
|
|
3615
3545
|
selectedItem: newSelectedItem
|
|
3616
3546
|
});
|
|
3617
3547
|
}, [dispatch]);
|
|
3618
|
-
|
|
3548
|
+
var setInputValue = preact.useCallback(function (newInputValue) {
|
|
3619
3549
|
dispatch({
|
|
3620
3550
|
type: FunctionSetInputValue,
|
|
3621
3551
|
inputValue: newInputValue
|
|
3622
3552
|
});
|
|
3623
3553
|
}, [dispatch]);
|
|
3624
|
-
|
|
3554
|
+
var reset = preact.useCallback(function () {
|
|
3625
3555
|
dispatch({
|
|
3626
3556
|
type: FunctionReset$1
|
|
3627
3557
|
});
|
|
3628
3558
|
}, [dispatch]);
|
|
3629
3559
|
return {
|
|
3630
3560
|
// prop getters.
|
|
3631
|
-
getItemProps,
|
|
3632
|
-
getLabelProps,
|
|
3633
|
-
getMenuProps,
|
|
3634
|
-
getInputProps,
|
|
3635
|
-
getToggleButtonProps,
|
|
3561
|
+
getItemProps: getItemProps,
|
|
3562
|
+
getLabelProps: getLabelProps,
|
|
3563
|
+
getMenuProps: getMenuProps,
|
|
3564
|
+
getInputProps: getInputProps,
|
|
3565
|
+
getToggleButtonProps: getToggleButtonProps,
|
|
3636
3566
|
// actions.
|
|
3637
|
-
toggleMenu,
|
|
3638
|
-
openMenu,
|
|
3639
|
-
closeMenu,
|
|
3640
|
-
setHighlightedIndex,
|
|
3641
|
-
setInputValue,
|
|
3642
|
-
selectItem,
|
|
3643
|
-
reset,
|
|
3567
|
+
toggleMenu: toggleMenu,
|
|
3568
|
+
openMenu: openMenu,
|
|
3569
|
+
closeMenu: closeMenu,
|
|
3570
|
+
setHighlightedIndex: setHighlightedIndex,
|
|
3571
|
+
setInputValue: setInputValue,
|
|
3572
|
+
selectItem: selectItem,
|
|
3573
|
+
reset: reset,
|
|
3644
3574
|
// state.
|
|
3645
|
-
highlightedIndex,
|
|
3646
|
-
isOpen,
|
|
3647
|
-
selectedItem,
|
|
3648
|
-
inputValue
|
|
3575
|
+
highlightedIndex: highlightedIndex,
|
|
3576
|
+
isOpen: isOpen,
|
|
3577
|
+
selectedItem: selectedItem,
|
|
3578
|
+
inputValue: inputValue
|
|
3649
3579
|
};
|
|
3650
3580
|
}
|
|
3651
3581
|
|
|
3652
|
-
|
|
3582
|
+
var defaultStateValues = {
|
|
3653
3583
|
activeIndex: -1,
|
|
3654
3584
|
selectedItems: []
|
|
3655
3585
|
};
|
|
@@ -3687,11 +3617,11 @@
|
|
|
3687
3617
|
* @returns {Object} The initial state.
|
|
3688
3618
|
*/
|
|
3689
3619
|
function getInitialState(props) {
|
|
3690
|
-
|
|
3691
|
-
|
|
3620
|
+
var activeIndex = getInitialValue(props, 'activeIndex');
|
|
3621
|
+
var selectedItems = getInitialValue(props, 'selectedItems');
|
|
3692
3622
|
return {
|
|
3693
|
-
activeIndex,
|
|
3694
|
-
selectedItems
|
|
3623
|
+
activeIndex: activeIndex,
|
|
3624
|
+
selectedItems: selectedItems
|
|
3695
3625
|
};
|
|
3696
3626
|
}
|
|
3697
3627
|
|
|
@@ -3708,7 +3638,7 @@
|
|
|
3708
3638
|
if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
|
|
3709
3639
|
return false;
|
|
3710
3640
|
}
|
|
3711
|
-
|
|
3641
|
+
var element = event.target;
|
|
3712
3642
|
if (element instanceof HTMLInputElement &&
|
|
3713
3643
|
// if element is a text input
|
|
3714
3644
|
element.value !== '' && (
|
|
@@ -3727,13 +3657,11 @@
|
|
|
3727
3657
|
* @returns {string} The a11y message.
|
|
3728
3658
|
*/
|
|
3729
3659
|
function getA11yRemovalMessage(selectionParameters) {
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
} = selectionParameters;
|
|
3734
|
-
return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
|
|
3660
|
+
var removedSelectedItem = selectionParameters.removedSelectedItem,
|
|
3661
|
+
itemToStringLocal = selectionParameters.itemToString;
|
|
3662
|
+
return itemToStringLocal(removedSelectedItem) + " has been removed.";
|
|
3735
3663
|
}
|
|
3736
|
-
|
|
3664
|
+
var propTypes = {
|
|
3737
3665
|
selectedItems: PropTypes__default["default"].array,
|
|
3738
3666
|
initialSelectedItems: PropTypes__default["default"].array,
|
|
3739
3667
|
defaultSelectedItems: PropTypes__default["default"].array,
|
|
@@ -3757,37 +3685,37 @@
|
|
|
3757
3685
|
})
|
|
3758
3686
|
})
|
|
3759
3687
|
};
|
|
3760
|
-
|
|
3688
|
+
var defaultProps = {
|
|
3761
3689
|
itemToString: defaultProps$3.itemToString,
|
|
3762
3690
|
stateReducer: defaultProps$3.stateReducer,
|
|
3763
3691
|
environment: defaultProps$3.environment,
|
|
3764
|
-
getA11yRemovalMessage,
|
|
3692
|
+
getA11yRemovalMessage: getA11yRemovalMessage,
|
|
3765
3693
|
keyNavigationNext: 'ArrowRight',
|
|
3766
3694
|
keyNavigationPrevious: 'ArrowLeft'
|
|
3767
3695
|
};
|
|
3768
3696
|
|
|
3769
3697
|
// eslint-disable-next-line import/no-mutable-exports
|
|
3770
|
-
|
|
3698
|
+
var validatePropTypes = noop;
|
|
3771
3699
|
/* istanbul ignore next */
|
|
3772
3700
|
{
|
|
3773
|
-
validatePropTypes = (options, caller)
|
|
3701
|
+
validatePropTypes = function validatePropTypes(options, caller) {
|
|
3774
3702
|
PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
|
|
3775
3703
|
};
|
|
3776
3704
|
}
|
|
3777
3705
|
|
|
3778
|
-
|
|
3779
|
-
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3706
|
+
var SelectedItemClick = '__selected_item_click__' ;
|
|
3707
|
+
var SelectedItemKeyDownDelete = '__selected_item_keydown_delete__' ;
|
|
3708
|
+
var SelectedItemKeyDownBackspace = '__selected_item_keydown_backspace__' ;
|
|
3709
|
+
var SelectedItemKeyDownNavigationNext = '__selected_item_keydown_navigation_next__' ;
|
|
3710
|
+
var SelectedItemKeyDownNavigationPrevious = '__selected_item_keydown_navigation_previous__' ;
|
|
3711
|
+
var DropdownKeyDownNavigationPrevious = '__dropdown_keydown_navigation_previous__' ;
|
|
3712
|
+
var DropdownKeyDownBackspace = '__dropdown_keydown_backspace__' ;
|
|
3713
|
+
var DropdownClick = '__dropdown_click__' ;
|
|
3714
|
+
var FunctionAddSelectedItem = '__function_add_selected_item__' ;
|
|
3715
|
+
var FunctionRemoveSelectedItem = '__function_remove_selected_item__' ;
|
|
3716
|
+
var FunctionSetSelectedItems = '__function_set_selected_items__' ;
|
|
3717
|
+
var FunctionSetActiveIndex = '__function_set_active_index__' ;
|
|
3718
|
+
var FunctionReset = '__function_reset__' ;
|
|
3791
3719
|
|
|
3792
3720
|
var stateChangeTypes = /*#__PURE__*/Object.freeze({
|
|
3793
3721
|
__proto__: null,
|
|
@@ -3808,17 +3736,13 @@
|
|
|
3808
3736
|
|
|
3809
3737
|
/* eslint-disable complexity */
|
|
3810
3738
|
function downshiftMultipleSelectionReducer(state, action) {
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
activeIndex,
|
|
3819
|
-
selectedItems
|
|
3820
|
-
} = state;
|
|
3821
|
-
let changes;
|
|
3739
|
+
var type = action.type,
|
|
3740
|
+
index = action.index,
|
|
3741
|
+
props = action.props,
|
|
3742
|
+
selectedItem = action.selectedItem;
|
|
3743
|
+
var activeIndex = state.activeIndex,
|
|
3744
|
+
selectedItems = state.selectedItems;
|
|
3745
|
+
var changes;
|
|
3822
3746
|
switch (type) {
|
|
3823
3747
|
case SelectedItemClick:
|
|
3824
3748
|
changes = {
|
|
@@ -3841,18 +3765,17 @@
|
|
|
3841
3765
|
if (activeIndex < 0) {
|
|
3842
3766
|
break;
|
|
3843
3767
|
}
|
|
3844
|
-
|
|
3768
|
+
var newActiveIndex = activeIndex;
|
|
3845
3769
|
if (selectedItems.length === 1) {
|
|
3846
3770
|
newActiveIndex = -1;
|
|
3847
3771
|
} else if (activeIndex === selectedItems.length - 1) {
|
|
3848
3772
|
newActiveIndex = selectedItems.length - 2;
|
|
3849
3773
|
}
|
|
3850
|
-
changes = {
|
|
3851
|
-
selectedItems: [
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
};
|
|
3774
|
+
changes = _extends({
|
|
3775
|
+
selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
|
|
3776
|
+
}, {
|
|
3777
|
+
activeIndex: newActiveIndex
|
|
3778
|
+
});
|
|
3856
3779
|
break;
|
|
3857
3780
|
}
|
|
3858
3781
|
case DropdownKeyDownNavigationPrevious:
|
|
@@ -3867,7 +3790,7 @@
|
|
|
3867
3790
|
break;
|
|
3868
3791
|
case FunctionAddSelectedItem:
|
|
3869
3792
|
changes = {
|
|
3870
|
-
selectedItems: [
|
|
3793
|
+
selectedItems: [].concat(selectedItems, [selectedItem])
|
|
3871
3794
|
};
|
|
3872
3795
|
break;
|
|
3873
3796
|
case DropdownClick:
|
|
@@ -3877,27 +3800,25 @@
|
|
|
3877
3800
|
break;
|
|
3878
3801
|
case FunctionRemoveSelectedItem:
|
|
3879
3802
|
{
|
|
3880
|
-
|
|
3881
|
-
|
|
3803
|
+
var _newActiveIndex = activeIndex;
|
|
3804
|
+
var selectedItemIndex = selectedItems.indexOf(selectedItem);
|
|
3882
3805
|
if (selectedItemIndex < 0) {
|
|
3883
3806
|
break;
|
|
3884
3807
|
}
|
|
3885
3808
|
if (selectedItems.length === 1) {
|
|
3886
|
-
|
|
3809
|
+
_newActiveIndex = -1;
|
|
3887
3810
|
} else if (selectedItemIndex === selectedItems.length - 1) {
|
|
3888
|
-
|
|
3811
|
+
_newActiveIndex = selectedItems.length - 2;
|
|
3889
3812
|
}
|
|
3890
3813
|
changes = {
|
|
3891
|
-
selectedItems: [
|
|
3892
|
-
activeIndex:
|
|
3814
|
+
selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)),
|
|
3815
|
+
activeIndex: _newActiveIndex
|
|
3893
3816
|
};
|
|
3894
3817
|
break;
|
|
3895
3818
|
}
|
|
3896
3819
|
case FunctionSetSelectedItems:
|
|
3897
3820
|
{
|
|
3898
|
-
|
|
3899
|
-
selectedItems: newSelectedItems
|
|
3900
|
-
} = action;
|
|
3821
|
+
var newSelectedItems = action.selectedItems;
|
|
3901
3822
|
changes = {
|
|
3902
3823
|
selectedItems: newSelectedItems
|
|
3903
3824
|
};
|
|
@@ -3905,11 +3826,9 @@
|
|
|
3905
3826
|
}
|
|
3906
3827
|
case FunctionSetActiveIndex:
|
|
3907
3828
|
{
|
|
3908
|
-
|
|
3909
|
-
activeIndex: newActiveIndex
|
|
3910
|
-
} = action;
|
|
3829
|
+
var _newActiveIndex2 = action.activeIndex;
|
|
3911
3830
|
changes = {
|
|
3912
|
-
activeIndex:
|
|
3831
|
+
activeIndex: _newActiveIndex2
|
|
3913
3832
|
};
|
|
3914
3833
|
break;
|
|
3915
3834
|
}
|
|
@@ -3922,12 +3841,11 @@
|
|
|
3922
3841
|
default:
|
|
3923
3842
|
throw new Error('Reducer called without proper action type.');
|
|
3924
3843
|
}
|
|
3925
|
-
return {
|
|
3926
|
-
...state,
|
|
3927
|
-
...changes
|
|
3928
|
-
};
|
|
3844
|
+
return _extends({}, state, changes);
|
|
3929
3845
|
}
|
|
3930
3846
|
|
|
3847
|
+
var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
|
|
3848
|
+
_excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
|
|
3931
3849
|
useMultipleSelection.stateChangeTypes = stateChangeTypes;
|
|
3932
3850
|
function useMultipleSelection(userProps) {
|
|
3933
3851
|
if (userProps === void 0) {
|
|
@@ -3935,49 +3853,46 @@
|
|
|
3935
3853
|
}
|
|
3936
3854
|
validatePropTypes(userProps, useMultipleSelection);
|
|
3937
3855
|
// Props defaults and destructuring.
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
itemToString,
|
|
3945
|
-
environment,
|
|
3946
|
-
keyNavigationNext,
|
|
3947
|
-
keyNavigationPrevious
|
|
3948
|
-
} = props;
|
|
3856
|
+
var props = _extends({}, defaultProps, userProps);
|
|
3857
|
+
var getA11yRemovalMessage = props.getA11yRemovalMessage,
|
|
3858
|
+
itemToString = props.itemToString,
|
|
3859
|
+
environment = props.environment,
|
|
3860
|
+
keyNavigationNext = props.keyNavigationNext,
|
|
3861
|
+
keyNavigationPrevious = props.keyNavigationPrevious;
|
|
3949
3862
|
|
|
3950
3863
|
// Reducer init.
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3864
|
+
var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
|
|
3865
|
+
state = _useControlledReducer[0],
|
|
3866
|
+
dispatch = _useControlledReducer[1];
|
|
3867
|
+
var activeIndex = state.activeIndex,
|
|
3868
|
+
selectedItems = state.selectedItems;
|
|
3956
3869
|
|
|
3957
3870
|
// Refs.
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3871
|
+
var isInitialMountRef = preact.useRef(true);
|
|
3872
|
+
var dropdownRef = preact.useRef(null);
|
|
3873
|
+
var previousSelectedItemsRef = preact.useRef(selectedItems);
|
|
3874
|
+
var selectedItemRefs = preact.useRef();
|
|
3962
3875
|
selectedItemRefs.current = [];
|
|
3963
|
-
|
|
3964
|
-
state,
|
|
3965
|
-
props
|
|
3876
|
+
var latest = useLatestRef({
|
|
3877
|
+
state: state,
|
|
3878
|
+
props: props
|
|
3966
3879
|
});
|
|
3967
3880
|
|
|
3968
3881
|
// Effects.
|
|
3969
3882
|
/* Sets a11y status message on changes in selectedItem. */
|
|
3970
|
-
preact.useEffect(()
|
|
3883
|
+
preact.useEffect(function () {
|
|
3971
3884
|
if (isInitialMountRef.current) {
|
|
3972
3885
|
return;
|
|
3973
3886
|
}
|
|
3974
3887
|
if (selectedItems.length < previousSelectedItemsRef.current.length) {
|
|
3975
|
-
|
|
3888
|
+
var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
|
|
3889
|
+
return selectedItems.indexOf(item) < 0;
|
|
3890
|
+
});
|
|
3976
3891
|
setStatus(getA11yRemovalMessage({
|
|
3977
|
-
itemToString,
|
|
3892
|
+
itemToString: itemToString,
|
|
3978
3893
|
resultCount: selectedItems.length,
|
|
3979
|
-
removedSelectedItem,
|
|
3980
|
-
activeIndex,
|
|
3894
|
+
removedSelectedItem: removedSelectedItem,
|
|
3895
|
+
activeIndex: activeIndex,
|
|
3981
3896
|
activeSelectedItem: selectedItems[activeIndex]
|
|
3982
3897
|
}), environment.document);
|
|
3983
3898
|
}
|
|
@@ -3986,7 +3901,7 @@
|
|
|
3986
3901
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3987
3902
|
}, [selectedItems.length]);
|
|
3988
3903
|
// Sets focus on active item.
|
|
3989
|
-
preact.useEffect(()
|
|
3904
|
+
preact.useEffect(function () {
|
|
3990
3905
|
if (isInitialMountRef.current) {
|
|
3991
3906
|
return;
|
|
3992
3907
|
}
|
|
@@ -3998,178 +3913,167 @@
|
|
|
3998
3913
|
}, [activeIndex]);
|
|
3999
3914
|
useControlPropsValidator({
|
|
4000
3915
|
isInitialMount: isInitialMountRef.current,
|
|
4001
|
-
props,
|
|
4002
|
-
state
|
|
3916
|
+
props: props,
|
|
3917
|
+
state: state
|
|
4003
3918
|
});
|
|
4004
|
-
|
|
3919
|
+
var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
|
|
4005
3920
|
// Make initial ref false.
|
|
4006
|
-
preact.useEffect(()
|
|
3921
|
+
preact.useEffect(function () {
|
|
4007
3922
|
isInitialMountRef.current = false;
|
|
4008
|
-
return ()
|
|
3923
|
+
return function () {
|
|
4009
3924
|
isInitialMountRef.current = true;
|
|
4010
3925
|
};
|
|
4011
3926
|
}, []);
|
|
4012
3927
|
|
|
4013
3928
|
// Event handler functions.
|
|
4014
|
-
|
|
4015
|
-
|
|
3929
|
+
var selectedItemKeyDownHandlers = preact.useMemo(function () {
|
|
3930
|
+
var _ref;
|
|
3931
|
+
return _ref = {}, _ref[keyNavigationPrevious] = function () {
|
|
4016
3932
|
dispatch({
|
|
4017
3933
|
type: SelectedItemKeyDownNavigationPrevious
|
|
4018
3934
|
});
|
|
4019
|
-
},
|
|
4020
|
-
[keyNavigationNext]() {
|
|
3935
|
+
}, _ref[keyNavigationNext] = function () {
|
|
4021
3936
|
dispatch({
|
|
4022
3937
|
type: SelectedItemKeyDownNavigationNext
|
|
4023
3938
|
});
|
|
4024
|
-
},
|
|
4025
|
-
Delete() {
|
|
3939
|
+
}, _ref.Delete = function Delete() {
|
|
4026
3940
|
dispatch({
|
|
4027
3941
|
type: SelectedItemKeyDownDelete
|
|
4028
3942
|
});
|
|
4029
|
-
},
|
|
4030
|
-
Backspace() {
|
|
3943
|
+
}, _ref.Backspace = function Backspace() {
|
|
4031
3944
|
dispatch({
|
|
4032
3945
|
type: SelectedItemKeyDownBackspace
|
|
4033
3946
|
});
|
|
4034
|
-
}
|
|
4035
|
-
}
|
|
4036
|
-
|
|
4037
|
-
|
|
3947
|
+
}, _ref;
|
|
3948
|
+
}, [dispatch, keyNavigationNext, keyNavigationPrevious]);
|
|
3949
|
+
var dropdownKeyDownHandlers = preact.useMemo(function () {
|
|
3950
|
+
var _ref2;
|
|
3951
|
+
return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
|
|
4038
3952
|
if (isKeyDownOperationPermitted(event)) {
|
|
4039
3953
|
dispatch({
|
|
4040
3954
|
type: DropdownKeyDownNavigationPrevious
|
|
4041
3955
|
});
|
|
4042
3956
|
}
|
|
4043
|
-
},
|
|
4044
|
-
Backspace(event) {
|
|
3957
|
+
}, _ref2.Backspace = function Backspace(event) {
|
|
4045
3958
|
if (isKeyDownOperationPermitted(event)) {
|
|
4046
3959
|
dispatch({
|
|
4047
3960
|
type: DropdownKeyDownBackspace
|
|
4048
3961
|
});
|
|
4049
3962
|
}
|
|
4050
|
-
}
|
|
4051
|
-
}
|
|
3963
|
+
}, _ref2;
|
|
3964
|
+
}, [dispatch, keyNavigationPrevious]);
|
|
4052
3965
|
|
|
4053
3966
|
// Getter props.
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
3967
|
+
var getSelectedItemProps = preact.useCallback(function (_temp) {
|
|
3968
|
+
var _extends2;
|
|
3969
|
+
var _ref3 = _temp === void 0 ? {} : _temp,
|
|
3970
|
+
_ref3$refKey = _ref3.refKey,
|
|
3971
|
+
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
|
|
3972
|
+
ref = _ref3.ref,
|
|
3973
|
+
onClick = _ref3.onClick,
|
|
3974
|
+
onKeyDown = _ref3.onKeyDown,
|
|
3975
|
+
selectedItem = _ref3.selectedItem,
|
|
3976
|
+
index = _ref3.index,
|
|
3977
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
|
|
3978
|
+
var latestState = latest.current.state;
|
|
3979
|
+
var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
|
|
4068
3980
|
if (itemIndex < 0) {
|
|
4069
3981
|
throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
|
|
4070
3982
|
}
|
|
4071
|
-
|
|
3983
|
+
var selectedItemHandleClick = function selectedItemHandleClick() {
|
|
4072
3984
|
dispatch({
|
|
4073
3985
|
type: SelectedItemClick,
|
|
4074
|
-
index
|
|
3986
|
+
index: index
|
|
4075
3987
|
});
|
|
4076
3988
|
};
|
|
4077
|
-
|
|
4078
|
-
|
|
3989
|
+
var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) {
|
|
3990
|
+
var key = normalizeArrowKey(event);
|
|
4079
3991
|
if (key && selectedItemKeyDownHandlers[key]) {
|
|
4080
3992
|
selectedItemKeyDownHandlers[key](event);
|
|
4081
3993
|
}
|
|
4082
3994
|
};
|
|
4083
|
-
return {
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
|
|
4088
|
-
}),
|
|
4089
|
-
tabIndex: index === latestState.activeIndex ? 0 : -1,
|
|
4090
|
-
onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
|
|
4091
|
-
onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
|
|
4092
|
-
...rest
|
|
4093
|
-
};
|
|
3995
|
+
return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
|
|
3996
|
+
if (selectedItemNode) {
|
|
3997
|
+
selectedItemRefs.current.push(selectedItemNode);
|
|
3998
|
+
}
|
|
3999
|
+
}), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
|
|
4094
4000
|
}, [dispatch, latest, selectedItemKeyDownHandlers]);
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4001
|
+
var getDropdownProps = preact.useCallback(function (_temp2, _temp3) {
|
|
4002
|
+
var _extends3;
|
|
4003
|
+
var _ref4 = _temp2 === void 0 ? {} : _temp2,
|
|
4004
|
+
_ref4$refKey = _ref4.refKey,
|
|
4005
|
+
refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
|
|
4006
|
+
ref = _ref4.ref,
|
|
4007
|
+
onKeyDown = _ref4.onKeyDown,
|
|
4008
|
+
onClick = _ref4.onClick,
|
|
4009
|
+
_ref4$preventKeyActio = _ref4.preventKeyAction,
|
|
4010
|
+
preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
|
|
4011
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded2);
|
|
4012
|
+
var _ref5 = _temp3 === void 0 ? {} : _temp3,
|
|
4013
|
+
_ref5$suppressRefErro = _ref5.suppressRefError,
|
|
4014
|
+
suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
|
|
4107
4015
|
setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
|
|
4108
|
-
|
|
4109
|
-
|
|
4016
|
+
var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) {
|
|
4017
|
+
var key = normalizeArrowKey(event);
|
|
4110
4018
|
if (key && dropdownKeyDownHandlers[key]) {
|
|
4111
4019
|
dropdownKeyDownHandlers[key](event);
|
|
4112
4020
|
}
|
|
4113
4021
|
};
|
|
4114
|
-
|
|
4022
|
+
var dropdownHandleClick = function dropdownHandleClick() {
|
|
4115
4023
|
dispatch({
|
|
4116
4024
|
type: DropdownClick
|
|
4117
4025
|
});
|
|
4118
4026
|
};
|
|
4119
|
-
return {
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
4128
|
-
}),
|
|
4129
|
-
...rest
|
|
4130
|
-
};
|
|
4027
|
+
return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
|
|
4028
|
+
if (dropdownNode) {
|
|
4029
|
+
dropdownRef.current = dropdownNode;
|
|
4030
|
+
}
|
|
4031
|
+
}), _extends3), !preventKeyAction && {
|
|
4032
|
+
onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
|
|
4033
|
+
onClick: callAllEventHandlers(onClick, dropdownHandleClick)
|
|
4034
|
+
}, rest);
|
|
4131
4035
|
}, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]);
|
|
4132
4036
|
|
|
4133
4037
|
// returns
|
|
4134
|
-
|
|
4038
|
+
var addSelectedItem = preact.useCallback(function (selectedItem) {
|
|
4135
4039
|
dispatch({
|
|
4136
4040
|
type: FunctionAddSelectedItem,
|
|
4137
|
-
selectedItem
|
|
4041
|
+
selectedItem: selectedItem
|
|
4138
4042
|
});
|
|
4139
4043
|
}, [dispatch]);
|
|
4140
|
-
|
|
4044
|
+
var removeSelectedItem = preact.useCallback(function (selectedItem) {
|
|
4141
4045
|
dispatch({
|
|
4142
4046
|
type: FunctionRemoveSelectedItem,
|
|
4143
|
-
selectedItem
|
|
4047
|
+
selectedItem: selectedItem
|
|
4144
4048
|
});
|
|
4145
4049
|
}, [dispatch]);
|
|
4146
|
-
|
|
4050
|
+
var setSelectedItems = preact.useCallback(function (newSelectedItems) {
|
|
4147
4051
|
dispatch({
|
|
4148
4052
|
type: FunctionSetSelectedItems,
|
|
4149
4053
|
selectedItems: newSelectedItems
|
|
4150
4054
|
});
|
|
4151
4055
|
}, [dispatch]);
|
|
4152
|
-
|
|
4056
|
+
var setActiveIndex = preact.useCallback(function (newActiveIndex) {
|
|
4153
4057
|
dispatch({
|
|
4154
4058
|
type: FunctionSetActiveIndex,
|
|
4155
4059
|
activeIndex: newActiveIndex
|
|
4156
4060
|
});
|
|
4157
4061
|
}, [dispatch]);
|
|
4158
|
-
|
|
4062
|
+
var reset = preact.useCallback(function () {
|
|
4159
4063
|
dispatch({
|
|
4160
4064
|
type: FunctionReset
|
|
4161
4065
|
});
|
|
4162
4066
|
}, [dispatch]);
|
|
4163
4067
|
return {
|
|
4164
|
-
getSelectedItemProps,
|
|
4165
|
-
getDropdownProps,
|
|
4166
|
-
addSelectedItem,
|
|
4167
|
-
removeSelectedItem,
|
|
4168
|
-
setSelectedItems,
|
|
4169
|
-
setActiveIndex,
|
|
4170
|
-
reset,
|
|
4171
|
-
selectedItems,
|
|
4172
|
-
activeIndex
|
|
4068
|
+
getSelectedItemProps: getSelectedItemProps,
|
|
4069
|
+
getDropdownProps: getDropdownProps,
|
|
4070
|
+
addSelectedItem: addSelectedItem,
|
|
4071
|
+
removeSelectedItem: removeSelectedItem,
|
|
4072
|
+
setSelectedItems: setSelectedItems,
|
|
4073
|
+
setActiveIndex: setActiveIndex,
|
|
4074
|
+
reset: reset,
|
|
4075
|
+
selectedItems: selectedItems,
|
|
4076
|
+
activeIndex: activeIndex
|
|
4173
4077
|
};
|
|
4174
4078
|
}
|
|
4175
4079
|
|