@vaadin/overlay 24.1.0-alpha9 → 24.1.0-beta1
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/package.json +7 -7
- package/src/vaadin-overlay.js +55 -37
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/overlay",
|
|
3
|
-
"version": "24.1.0-
|
|
3
|
+
"version": "24.1.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.1.0-
|
|
40
|
-
"@vaadin/component-base": "24.1.0-
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "24.1.0-
|
|
42
|
-
"@vaadin/vaadin-material-styles": "24.1.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "24.1.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.1.0-beta1",
|
|
40
|
+
"@vaadin/component-base": "24.1.0-beta1",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-beta1",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "24.1.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-beta1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"lit": "^2.0.0",
|
|
49
49
|
"sinon": "^13.0.2"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "f0ddb6576073a6af05ab29867bc5ec82e334f9d7"
|
|
52
52
|
}
|
package/src/vaadin-overlay.js
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
8
|
import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
|
|
9
|
+
import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
9
10
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
10
11
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
11
12
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
@@ -482,8 +483,10 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
|
|
|
482
483
|
/** @private */
|
|
483
484
|
_openedChanged(opened, wasOpened) {
|
|
484
485
|
if (opened) {
|
|
485
|
-
|
|
486
|
-
|
|
486
|
+
if (this.restoreFocusOnClose) {
|
|
487
|
+
this.__storeFocus();
|
|
488
|
+
}
|
|
489
|
+
|
|
487
490
|
this._animatedOpening();
|
|
488
491
|
|
|
489
492
|
afterNextRender(this, () => {
|
|
@@ -505,6 +508,10 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
|
|
|
505
508
|
this.__focusTrapController.releaseFocus();
|
|
506
509
|
}
|
|
507
510
|
|
|
511
|
+
if (this.restoreFocusOnClose) {
|
|
512
|
+
this.__restoreFocus();
|
|
513
|
+
}
|
|
514
|
+
|
|
508
515
|
this._animatedClosing();
|
|
509
516
|
|
|
510
517
|
document.removeEventListener('keydown', this._boundKeydownListener);
|
|
@@ -515,6 +522,52 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
|
|
|
515
522
|
}
|
|
516
523
|
}
|
|
517
524
|
|
|
525
|
+
/** @private */
|
|
526
|
+
__storeFocus() {
|
|
527
|
+
// Store the focused node.
|
|
528
|
+
this.__restoreFocusNode = getDeepActiveElement();
|
|
529
|
+
|
|
530
|
+
// Determine and store the node that has the `focus-ring` attribute
|
|
531
|
+
// in order to restore the attribute when the overlay closes.
|
|
532
|
+
const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
|
|
533
|
+
if (restoreFocusNode) {
|
|
534
|
+
const restoreFocusNodeHost = (restoreFocusNode.assignedSlot || restoreFocusNode).getRootNode().host;
|
|
535
|
+
this.__restoreFocusRingNode = [restoreFocusNode, restoreFocusNodeHost].find((node) => {
|
|
536
|
+
return node && node.hasAttribute('focus-ring');
|
|
537
|
+
});
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
/** @private */
|
|
542
|
+
__restoreFocus() {
|
|
543
|
+
// If the activeElement is `<body>` or inside the overlay,
|
|
544
|
+
// we are allowed to restore the focus. In all the other
|
|
545
|
+
// cases focus might have been moved elsewhere by another
|
|
546
|
+
// component or by the user interaction (e.g. click on a
|
|
547
|
+
// button outside the overlay).
|
|
548
|
+
const activeElement = getDeepActiveElement();
|
|
549
|
+
if (activeElement !== document.body && !this._deepContains(activeElement)) {
|
|
550
|
+
return;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
// Use restoreFocusNode if specified, otherwise fallback to the node
|
|
554
|
+
// which was focused before opening the overlay.
|
|
555
|
+
const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
|
|
556
|
+
if (restoreFocusNode) {
|
|
557
|
+
// Focusing the restoreFocusNode doesn't always work synchronously on Firefox and Safari
|
|
558
|
+
// (e.g. combo-box overlay close on outside click).
|
|
559
|
+
setTimeout(() => restoreFocusNode.focus());
|
|
560
|
+
this.__restoreFocusNode = null;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
// Restore the `focus-ring` attribute if it was present
|
|
564
|
+
// when the overlay was opening.
|
|
565
|
+
if (this.__restoreFocusRingNode) {
|
|
566
|
+
this.__restoreFocusRingNode.setAttribute('focus-ring', '');
|
|
567
|
+
this.__restoreFocusRingNode = null;
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
|
|
518
571
|
/** @private */
|
|
519
572
|
_hiddenChanged(hidden) {
|
|
520
573
|
if (hidden && this.hasAttribute('closing')) {
|
|
@@ -611,27 +664,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
|
|
|
611
664
|
}
|
|
612
665
|
if (this._placeholder) {
|
|
613
666
|
this._exitModalState();
|
|
614
|
-
|
|
615
|
-
// Use this.restoreFocusNode if specified, otherwise fallback to the node
|
|
616
|
-
// which was focused before opening the overlay.
|
|
617
|
-
const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
|
|
618
|
-
|
|
619
|
-
if (this.restoreFocusOnClose && restoreFocusNode) {
|
|
620
|
-
// If the activeElement is `<body>` or inside the overlay,
|
|
621
|
-
// we are allowed to restore the focus. In all the other
|
|
622
|
-
// cases focus might have been moved elsewhere by another
|
|
623
|
-
// component or by the user interaction (e.g. click on a
|
|
624
|
-
// button outside the overlay).
|
|
625
|
-
const activeElement = this._getActiveElement();
|
|
626
|
-
|
|
627
|
-
if (activeElement === document.body || this._deepContains(activeElement)) {
|
|
628
|
-
// Focusing the restoreFocusNode doesn't always work synchronously on Firefox and Safari
|
|
629
|
-
// (e.g. combo-box overlay close on outside click).
|
|
630
|
-
setTimeout(() => restoreFocusNode.focus());
|
|
631
|
-
}
|
|
632
|
-
this.__restoreFocusNode = null;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
667
|
this.setAttribute('closing', '');
|
|
636
668
|
this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
|
|
637
669
|
|
|
@@ -747,20 +779,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
|
|
|
747
779
|
}
|
|
748
780
|
}
|
|
749
781
|
|
|
750
|
-
/**
|
|
751
|
-
* @return {!Element}
|
|
752
|
-
* @private
|
|
753
|
-
*/
|
|
754
|
-
_getActiveElement() {
|
|
755
|
-
// Document.activeElement can be null
|
|
756
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
|
|
757
|
-
let active = document.activeElement || document.body;
|
|
758
|
-
while (active.shadowRoot && active.shadowRoot.activeElement) {
|
|
759
|
-
active = active.shadowRoot.activeElement;
|
|
760
|
-
}
|
|
761
|
-
return active;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
782
|
/**
|
|
765
783
|
* @param {!Node} node
|
|
766
784
|
* @return {boolean}
|