@vaadin/popover 25.1.0-alpha8 → 25.1.0-alpha9
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 +11 -11
- package/src/vaadin-popover.js +147 -22
- package/web-types.json +91 -91
- package/web-types.lit.json +33 -33
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/popover",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
41
|
-
"@vaadin/component-base": "25.1.0-
|
|
42
|
-
"@vaadin/lit-renderer": "25.1.0-
|
|
43
|
-
"@vaadin/overlay": "25.1.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.1.0-alpha9",
|
|
41
|
+
"@vaadin/component-base": "25.1.0-alpha9",
|
|
42
|
+
"@vaadin/lit-renderer": "25.1.0-alpha9",
|
|
43
|
+
"@vaadin/overlay": "25.1.0-alpha9",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/aura": "25.1.0-
|
|
49
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
48
|
+
"@vaadin/aura": "25.1.0-alpha9",
|
|
49
|
+
"@vaadin/chai-plugins": "25.1.0-alpha9",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha9",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
|
|
53
53
|
"sinon": "^21.0.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
|
|
61
61
|
}
|
package/src/vaadin-popover.js
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import './vaadin-popover-overlay.js';
|
|
7
7
|
import { css, html, LitElement } from 'lit';
|
|
8
8
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
+
import { getActiveTrappingNode } from '@vaadin/a11y-base/src/focus-trap-controller.js';
|
|
9
10
|
import {
|
|
10
11
|
getDeepActiveElement,
|
|
11
12
|
getFocusableElements,
|
|
@@ -742,24 +743,53 @@ class Popover extends PopoverPositionMixin(
|
|
|
742
743
|
return;
|
|
743
744
|
}
|
|
744
745
|
|
|
745
|
-
//
|
|
746
|
-
const
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
746
|
+
// Cache filtered focusable list for this keystroke to avoid redundant DOM traversals
|
|
747
|
+
const focusables = this.__getScopeFocusables();
|
|
748
|
+
|
|
749
|
+
// Move focus to the next element after target on last content Tab,
|
|
750
|
+
// or when popover itself is focused and has no focusable content
|
|
751
|
+
const lastFocusable = this.__getLastFocusable();
|
|
752
|
+
const isFocusOut = lastFocusable ? isElementFocused(lastFocusable) : isElementFocused(this);
|
|
753
|
+
if (isFocusOut) {
|
|
754
|
+
let focusable = this.__getNextScopeFocusable(this.__getTargetFocusable(), focusables);
|
|
755
|
+
// If the next element after the target is the popover itself (DOM position
|
|
756
|
+
// differs from logical position), skip past it to the actual next element.
|
|
757
|
+
if (focusable === this) {
|
|
758
|
+
focusable = this.__getNextScopeFocusable(this, focusables);
|
|
759
|
+
}
|
|
760
|
+
if (focusable) {
|
|
750
761
|
event.preventDefault();
|
|
751
762
|
focusable.focus();
|
|
752
763
|
return;
|
|
753
764
|
}
|
|
765
|
+
// No next element after the target in the scope. When inside a focus trap,
|
|
766
|
+
// wrap explicitly to the first focusable. Don't fall through - the
|
|
767
|
+
// FocusTrapController uses DOM order which may differ from the popover's
|
|
768
|
+
// logical tab position.
|
|
769
|
+
if (getActiveTrappingNode(this) && focusables[0]) {
|
|
770
|
+
event.preventDefault();
|
|
771
|
+
focusables[0].focus();
|
|
772
|
+
return;
|
|
773
|
+
}
|
|
754
774
|
}
|
|
755
775
|
|
|
756
|
-
//
|
|
776
|
+
// Handle cases where Tab from the current element would land on the popover
|
|
757
777
|
const activeElement = getDeepActiveElement();
|
|
758
|
-
const nextFocusable = this.
|
|
759
|
-
if (nextFocusable === this
|
|
760
|
-
//
|
|
761
|
-
//
|
|
762
|
-
|
|
778
|
+
const nextFocusable = this.__getNextScopeFocusable(activeElement, focusables);
|
|
779
|
+
if (nextFocusable === this) {
|
|
780
|
+
// The popover should only be Tab-reachable from its target (handled above).
|
|
781
|
+
// Skip the popover when Tab from any other element would land on it
|
|
782
|
+
// due to its DOM position.
|
|
783
|
+
const focusableAfterPopover = this.__getNextScopeFocusable(this, focusables);
|
|
784
|
+
if (focusableAfterPopover) {
|
|
785
|
+
event.preventDefault();
|
|
786
|
+
focusableAfterPopover.focus();
|
|
787
|
+
} else if (getActiveTrappingNode(this) && focusables[0]) {
|
|
788
|
+
// Popover is last in DOM scope but shouldn't be Tab-reachable from
|
|
789
|
+
// non-target elements. Wrap to first focusable in focus trap.
|
|
790
|
+
event.preventDefault();
|
|
791
|
+
focusables[0].focus();
|
|
792
|
+
}
|
|
763
793
|
}
|
|
764
794
|
}
|
|
765
795
|
|
|
@@ -778,30 +808,125 @@ class Popover extends PopoverPositionMixin(
|
|
|
778
808
|
return;
|
|
779
809
|
}
|
|
780
810
|
|
|
781
|
-
//
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
811
|
+
// Don't intercept if focus is inside the popover content.
|
|
812
|
+
// The browser's native Shift+Tab handles navigation within
|
|
813
|
+
// the overlay (e.g. between focusable content and the popover element itself).
|
|
814
|
+
const activeElement = getDeepActiveElement();
|
|
815
|
+
if (this.contains(activeElement)) {
|
|
816
|
+
return;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
// Cache filtered focusable list for this keystroke to avoid redundant DOM traversals
|
|
820
|
+
const focusables = this.__getScopeFocusables();
|
|
821
|
+
|
|
822
|
+
// Get previous focusable element excluding the popover
|
|
823
|
+
const prevFocusable = this.__getPrevScopeFocusable(activeElement, focusables);
|
|
824
|
+
const targetFocusable = this.__getTargetFocusable();
|
|
825
|
+
|
|
826
|
+
// Intercept Shift+Tab when the previous focusable (excluding the popover)
|
|
827
|
+
// is the target. Instead of moving to the target, redirect focus into
|
|
828
|
+
// the popover's last focusable content (or the popover itself).
|
|
829
|
+
if (prevFocusable === targetFocusable) {
|
|
830
|
+
event.preventDefault();
|
|
831
|
+
this.__focusLastOrSelf();
|
|
832
|
+
return;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
// Move focus into the popover when:
|
|
836
|
+
// 1. There is no previous focusable element in the focus trap (at the
|
|
837
|
+
// beginning, would wrap around), and
|
|
838
|
+
// 2. The target is the last focusable in the focus trap (making the
|
|
839
|
+
// popover logically last).
|
|
840
|
+
// Don't fall through - the FocusTrapController uses DOM order which
|
|
841
|
+
// may differ from the popover's logical tab position.
|
|
842
|
+
if (!prevFocusable && getActiveTrappingNode(this)) {
|
|
843
|
+
const list = focusables.filter((el) => el !== this);
|
|
844
|
+
if (list.at(-1) === targetFocusable) {
|
|
845
|
+
event.preventDefault();
|
|
846
|
+
this.__focusLastOrSelf();
|
|
847
|
+
return;
|
|
848
|
+
}
|
|
849
|
+
// Popover is last in DOM but target is not the last focusable.
|
|
850
|
+
// Wrap to last non-popover focusable to prevent FocusTrapController
|
|
851
|
+
// from landing on the popover.
|
|
852
|
+
const last = list.at(-1);
|
|
853
|
+
if (last) {
|
|
854
|
+
event.preventDefault();
|
|
855
|
+
last.focus();
|
|
856
|
+
return;
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
// Get previous focusable element including the popover (simulates native Tab order)
|
|
861
|
+
const prevFocusableNative = this.__getPrevScopeFocusable(activeElement, focusables, true);
|
|
862
|
+
// Skip the popover when native Shift+Tab would land on it
|
|
863
|
+
// and redirect to the actual previous element
|
|
864
|
+
if (prevFocusableNative === this) {
|
|
865
|
+
if (prevFocusable) {
|
|
786
866
|
event.preventDefault();
|
|
787
|
-
|
|
867
|
+
prevFocusable.focus();
|
|
868
|
+
} else if (getActiveTrappingNode(this)) {
|
|
869
|
+
// Popover is first in DOM scope but shouldn't be Shift+Tab-reachable
|
|
870
|
+
// from non-target elements. Wrap to last non-popover focusable.
|
|
871
|
+
const list = focusables.filter((el) => el !== this);
|
|
872
|
+
const last = list.at(-1);
|
|
873
|
+
if (last) {
|
|
874
|
+
event.preventDefault();
|
|
875
|
+
last.focus();
|
|
876
|
+
}
|
|
788
877
|
}
|
|
789
878
|
}
|
|
790
879
|
}
|
|
791
880
|
|
|
881
|
+
/**
|
|
882
|
+
* Returns whether the element is a light DOM child of this popover
|
|
883
|
+
* (i.e. slotted popover content, excluding the popover element itself).
|
|
884
|
+
* @param {Element} el
|
|
885
|
+
* @return {boolean}
|
|
886
|
+
* @private
|
|
887
|
+
*/
|
|
888
|
+
__isPopoverContent(el) {
|
|
889
|
+
return el !== this && this.contains(el);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* Returns focusable elements within the current scope (active focus trap or
|
|
894
|
+
* document body) with popover light DOM children filtered out.
|
|
895
|
+
* @return {Element[]}
|
|
896
|
+
* @private
|
|
897
|
+
*/
|
|
898
|
+
__getScopeFocusables() {
|
|
899
|
+
const scope = getActiveTrappingNode(this) || document.body;
|
|
900
|
+
return getFocusableElements(scope).filter((el) => !this.__isPopoverContent(el));
|
|
901
|
+
}
|
|
902
|
+
|
|
792
903
|
/** @private */
|
|
793
|
-
|
|
794
|
-
const focusables = getFocusableElements(document.body);
|
|
904
|
+
__getNextScopeFocusable(target, focusables = this.__getScopeFocusables()) {
|
|
795
905
|
const idx = focusables.findIndex((el) => el === target);
|
|
796
|
-
return focusables[idx + 1];
|
|
906
|
+
return idx >= 0 ? focusables[idx + 1] : undefined;
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
/** @private */
|
|
910
|
+
__getPrevScopeFocusable(target, focusables = this.__getScopeFocusables(), includePopover = false) {
|
|
911
|
+
const list = includePopover ? focusables : focusables.filter((el) => el !== this);
|
|
912
|
+
const idx = list.findIndex((el) => el === target);
|
|
913
|
+
// Returns null both when target is the first element (idx === 0)
|
|
914
|
+
// and when target is not found in the list (idx === -1)
|
|
915
|
+
return idx > 0 ? list[idx - 1] : null;
|
|
797
916
|
}
|
|
798
917
|
|
|
799
918
|
/** @private */
|
|
800
|
-
__getLastFocusable(
|
|
801
|
-
|
|
919
|
+
__getLastFocusable() {
|
|
920
|
+
// Search within the overlay's content area to avoid returning the popover element itself
|
|
921
|
+
const focusables = getFocusableElements(this._overlayElement.$.content);
|
|
802
922
|
return focusables.pop();
|
|
803
923
|
}
|
|
804
924
|
|
|
925
|
+
/** @private */
|
|
926
|
+
__focusLastOrSelf() {
|
|
927
|
+
(this.__getLastFocusable() || this).focus();
|
|
928
|
+
}
|
|
929
|
+
|
|
805
930
|
/** @private */
|
|
806
931
|
__getTargetFocusable() {
|
|
807
932
|
if (!this.target) {
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/popover",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Optional arrow pointing to the target when using `theme=\"arrow\"`\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|----------------------------------------\n`position` | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-overlay-backdrop-background` |\n|`--vaadin-popover-arrow-border-radius` |\n|`--vaadin-popover-arrow-inset` |\n|`--vaadin-popover-arrow-size` |\n|`--vaadin-popover-background` |\n|`--vaadin-popover-border-color` |\n|`--vaadin-popover-border-radius` |\n|`--vaadin-popover-border-width` |\n|`--vaadin-popover-offset-bottom` |\n|`--vaadin-popover-offset-end` |\n|`--vaadin-popover-offset-start` |\n|`--vaadin-popover-offset-top` |\n|`--vaadin-popover-padding` |\n|`--vaadin-popover-shadow` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "accessible-name",
|
|
15
|
+
"description": "String used to label the popover to screen reader users.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
|
-
"name": "
|
|
26
|
-
"description": "
|
|
25
|
+
"name": "accessible-name-ref",
|
|
26
|
+
"description": "Id of the element used as label of the popover to screen reader users.",
|
|
27
27
|
"value": {
|
|
28
28
|
"type": [
|
|
29
29
|
"string",
|
|
@@ -33,33 +33,33 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
"name": "
|
|
37
|
-
"description": "
|
|
36
|
+
"name": "autofocus",
|
|
37
|
+
"description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
|
|
38
38
|
"value": {
|
|
39
39
|
"type": [
|
|
40
|
-
"
|
|
40
|
+
"boolean",
|
|
41
41
|
"null",
|
|
42
42
|
"undefined"
|
|
43
43
|
]
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
|
-
"name": "
|
|
48
|
-
"description": "
|
|
47
|
+
"name": "focus-delay",
|
|
48
|
+
"description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
|
|
49
49
|
"value": {
|
|
50
50
|
"type": [
|
|
51
|
-
"
|
|
51
|
+
"number",
|
|
52
52
|
"null",
|
|
53
53
|
"undefined"
|
|
54
54
|
]
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "for",
|
|
59
|
+
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
|
|
60
60
|
"value": {
|
|
61
61
|
"type": [
|
|
62
|
-
"
|
|
62
|
+
"string",
|
|
63
63
|
"null",
|
|
64
64
|
"undefined"
|
|
65
65
|
]
|
|
@@ -77,19 +77,19 @@
|
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
80
|
+
"name": "hide-delay",
|
|
81
|
+
"description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
|
-
"
|
|
84
|
+
"number",
|
|
85
85
|
"null",
|
|
86
86
|
"undefined"
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "The delay in milliseconds before the popover is opened\non
|
|
91
|
+
"name": "hover-delay",
|
|
92
|
+
"description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
|
|
93
93
|
"value": {
|
|
94
94
|
"type": [
|
|
95
95
|
"number",
|
|
@@ -99,30 +99,30 @@
|
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
|
-
"name": "
|
|
103
|
-
"description": "
|
|
102
|
+
"name": "modal",
|
|
103
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
|
|
104
104
|
"value": {
|
|
105
105
|
"type": [
|
|
106
|
-
"
|
|
106
|
+
"boolean",
|
|
107
107
|
"null",
|
|
108
108
|
"undefined"
|
|
109
109
|
]
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
|
-
"name": "
|
|
114
|
-
"description": "
|
|
113
|
+
"name": "no-close-on-esc",
|
|
114
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
115
115
|
"value": {
|
|
116
116
|
"type": [
|
|
117
|
-
"
|
|
117
|
+
"boolean",
|
|
118
118
|
"null",
|
|
119
119
|
"undefined"
|
|
120
120
|
]
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
123
|
{
|
|
124
|
-
"name": "
|
|
125
|
-
"description": "
|
|
124
|
+
"name": "no-close-on-outside-click",
|
|
125
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
126
126
|
"value": {
|
|
127
127
|
"type": [
|
|
128
128
|
"boolean",
|
|
@@ -132,11 +132,11 @@
|
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "
|
|
135
|
+
"name": "opened",
|
|
136
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
137
137
|
"value": {
|
|
138
138
|
"type": [
|
|
139
|
-
"
|
|
139
|
+
"boolean",
|
|
140
140
|
"null",
|
|
141
141
|
"undefined"
|
|
142
142
|
]
|
|
@@ -154,55 +154,55 @@
|
|
|
154
154
|
}
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
|
-
"name": "
|
|
158
|
-
"description": "
|
|
157
|
+
"name": "position",
|
|
158
|
+
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
159
159
|
"value": {
|
|
160
160
|
"type": [
|
|
161
|
-
"
|
|
161
|
+
"string",
|
|
162
162
|
"null",
|
|
163
163
|
"undefined"
|
|
164
164
|
]
|
|
165
165
|
}
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
|
-
"name": "
|
|
169
|
-
"description": "
|
|
168
|
+
"name": "role",
|
|
169
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
170
170
|
"value": {
|
|
171
171
|
"type": [
|
|
172
|
-
"
|
|
172
|
+
"string",
|
|
173
173
|
"null",
|
|
174
174
|
"undefined"
|
|
175
175
|
]
|
|
176
176
|
}
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
|
-
"name": "
|
|
180
|
-
"description": "
|
|
179
|
+
"name": "theme",
|
|
180
|
+
"description": "The theme variants to apply to the component.",
|
|
181
181
|
"value": {
|
|
182
182
|
"type": [
|
|
183
|
-
"
|
|
183
|
+
"string",
|
|
184
184
|
"null",
|
|
185
185
|
"undefined"
|
|
186
186
|
]
|
|
187
187
|
}
|
|
188
188
|
},
|
|
189
189
|
{
|
|
190
|
-
"name": "
|
|
191
|
-
"description": "
|
|
190
|
+
"name": "width",
|
|
191
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
192
192
|
"value": {
|
|
193
193
|
"type": [
|
|
194
|
-
"
|
|
194
|
+
"string",
|
|
195
195
|
"null",
|
|
196
196
|
"undefined"
|
|
197
197
|
]
|
|
198
198
|
}
|
|
199
199
|
},
|
|
200
200
|
{
|
|
201
|
-
"name": "
|
|
202
|
-
"description": "
|
|
201
|
+
"name": "with-backdrop",
|
|
202
|
+
"description": "When true, the popover has a backdrop (modality curtain) on top of the\nunderlying page content, covering the whole viewport.",
|
|
203
203
|
"value": {
|
|
204
204
|
"type": [
|
|
205
|
-
"
|
|
205
|
+
"boolean",
|
|
206
206
|
"null",
|
|
207
207
|
"undefined"
|
|
208
208
|
]
|
|
@@ -212,8 +212,8 @@
|
|
|
212
212
|
"js": {
|
|
213
213
|
"properties": [
|
|
214
214
|
{
|
|
215
|
-
"name": "
|
|
216
|
-
"description": "
|
|
215
|
+
"name": "accessibleName",
|
|
216
|
+
"description": "String used to label the popover to screen reader users.",
|
|
217
217
|
"value": {
|
|
218
218
|
"type": [
|
|
219
219
|
"string",
|
|
@@ -223,8 +223,8 @@
|
|
|
223
223
|
}
|
|
224
224
|
},
|
|
225
225
|
{
|
|
226
|
-
"name": "
|
|
227
|
-
"description": "
|
|
226
|
+
"name": "accessibleNameRef",
|
|
227
|
+
"description": "Id of the element used as label of the popover to screen reader users.",
|
|
228
228
|
"value": {
|
|
229
229
|
"type": [
|
|
230
230
|
"string",
|
|
@@ -234,30 +234,30 @@
|
|
|
234
234
|
}
|
|
235
235
|
},
|
|
236
236
|
{
|
|
237
|
-
"name": "
|
|
238
|
-
"description": "
|
|
237
|
+
"name": "autofocus",
|
|
238
|
+
"description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
|
|
239
239
|
"value": {
|
|
240
240
|
"type": [
|
|
241
|
-
"
|
|
241
|
+
"boolean",
|
|
242
242
|
"null",
|
|
243
243
|
"undefined"
|
|
244
244
|
]
|
|
245
245
|
}
|
|
246
246
|
},
|
|
247
247
|
{
|
|
248
|
-
"name": "
|
|
249
|
-
"description": "
|
|
248
|
+
"name": "focusDelay",
|
|
249
|
+
"description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
|
|
250
250
|
"value": {
|
|
251
251
|
"type": [
|
|
252
|
-
"
|
|
252
|
+
"number",
|
|
253
253
|
"null",
|
|
254
254
|
"undefined"
|
|
255
255
|
]
|
|
256
256
|
}
|
|
257
257
|
},
|
|
258
258
|
{
|
|
259
|
-
"name": "
|
|
260
|
-
"description": "
|
|
259
|
+
"name": "for",
|
|
260
|
+
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
|
|
261
261
|
"value": {
|
|
262
262
|
"type": [
|
|
263
263
|
"string",
|
|
@@ -267,66 +267,66 @@
|
|
|
267
267
|
}
|
|
268
268
|
},
|
|
269
269
|
{
|
|
270
|
-
"name": "
|
|
271
|
-
"description": "
|
|
270
|
+
"name": "height",
|
|
271
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
272
272
|
"value": {
|
|
273
273
|
"type": [
|
|
274
|
-
"
|
|
274
|
+
"string",
|
|
275
275
|
"null",
|
|
276
276
|
"undefined"
|
|
277
277
|
]
|
|
278
278
|
}
|
|
279
279
|
},
|
|
280
280
|
{
|
|
281
|
-
"name": "
|
|
282
|
-
"description": "
|
|
281
|
+
"name": "hideDelay",
|
|
282
|
+
"description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
|
|
283
283
|
"value": {
|
|
284
284
|
"type": [
|
|
285
|
-
"
|
|
285
|
+
"number",
|
|
286
286
|
"null",
|
|
287
287
|
"undefined"
|
|
288
288
|
]
|
|
289
289
|
}
|
|
290
290
|
},
|
|
291
291
|
{
|
|
292
|
-
"name": "
|
|
293
|
-
"description": "
|
|
292
|
+
"name": "hoverDelay",
|
|
293
|
+
"description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
|
|
294
294
|
"value": {
|
|
295
295
|
"type": [
|
|
296
|
-
"
|
|
296
|
+
"number",
|
|
297
297
|
"null",
|
|
298
298
|
"undefined"
|
|
299
299
|
]
|
|
300
300
|
}
|
|
301
301
|
},
|
|
302
302
|
{
|
|
303
|
-
"name": "
|
|
304
|
-
"description": "
|
|
303
|
+
"name": "modal",
|
|
304
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
|
|
305
305
|
"value": {
|
|
306
306
|
"type": [
|
|
307
|
-
"
|
|
307
|
+
"boolean",
|
|
308
308
|
"null",
|
|
309
309
|
"undefined"
|
|
310
310
|
]
|
|
311
311
|
}
|
|
312
312
|
},
|
|
313
313
|
{
|
|
314
|
-
"name": "
|
|
315
|
-
"description": "
|
|
314
|
+
"name": "noCloseOnEsc",
|
|
315
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
316
316
|
"value": {
|
|
317
317
|
"type": [
|
|
318
|
-
"
|
|
318
|
+
"boolean",
|
|
319
319
|
"null",
|
|
320
320
|
"undefined"
|
|
321
321
|
]
|
|
322
322
|
}
|
|
323
323
|
},
|
|
324
324
|
{
|
|
325
|
-
"name": "
|
|
326
|
-
"description": "
|
|
325
|
+
"name": "noCloseOnOutsideClick",
|
|
326
|
+
"description": "Set to true to disable closing popover on outside click.",
|
|
327
327
|
"value": {
|
|
328
328
|
"type": [
|
|
329
|
-
"
|
|
329
|
+
"boolean",
|
|
330
330
|
"null",
|
|
331
331
|
"undefined"
|
|
332
332
|
]
|
|
@@ -344,8 +344,8 @@
|
|
|
344
344
|
}
|
|
345
345
|
},
|
|
346
346
|
{
|
|
347
|
-
"name": "
|
|
348
|
-
"description": "The `role` attribute value to be set on the popover
|
|
347
|
+
"name": "overlayRole",
|
|
348
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
349
349
|
"value": {
|
|
350
350
|
"type": [
|
|
351
351
|
"string",
|
|
@@ -355,8 +355,8 @@
|
|
|
355
355
|
}
|
|
356
356
|
},
|
|
357
357
|
{
|
|
358
|
-
"name": "
|
|
359
|
-
"description": "
|
|
358
|
+
"name": "position",
|
|
359
|
+
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
360
360
|
"value": {
|
|
361
361
|
"type": [
|
|
362
362
|
"string",
|
|
@@ -377,44 +377,44 @@
|
|
|
377
377
|
}
|
|
378
378
|
},
|
|
379
379
|
{
|
|
380
|
-
"name": "
|
|
381
|
-
"description": "
|
|
380
|
+
"name": "role",
|
|
381
|
+
"description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
|
|
382
382
|
"value": {
|
|
383
383
|
"type": [
|
|
384
|
-
"
|
|
384
|
+
"string",
|
|
385
385
|
"null",
|
|
386
386
|
"undefined"
|
|
387
387
|
]
|
|
388
388
|
}
|
|
389
389
|
},
|
|
390
390
|
{
|
|
391
|
-
"name": "
|
|
392
|
-
"description": "
|
|
391
|
+
"name": "target",
|
|
392
|
+
"description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
|
|
393
393
|
"value": {
|
|
394
394
|
"type": [
|
|
395
|
-
"
|
|
395
|
+
"Object",
|
|
396
396
|
"null",
|
|
397
397
|
"undefined"
|
|
398
398
|
]
|
|
399
399
|
}
|
|
400
400
|
},
|
|
401
401
|
{
|
|
402
|
-
"name": "
|
|
403
|
-
"description": "
|
|
402
|
+
"name": "trigger",
|
|
403
|
+
"description": "Popover trigger mode, used to configure how the popover is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
|
|
404
404
|
"value": {
|
|
405
405
|
"type": [
|
|
406
|
-
"
|
|
406
|
+
"Array",
|
|
407
407
|
"null",
|
|
408
408
|
"undefined"
|
|
409
409
|
]
|
|
410
410
|
}
|
|
411
411
|
},
|
|
412
412
|
{
|
|
413
|
-
"name": "
|
|
414
|
-
"description": "
|
|
413
|
+
"name": "width",
|
|
414
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
415
415
|
"value": {
|
|
416
416
|
"type": [
|
|
417
|
-
"
|
|
417
|
+
"string",
|
|
418
418
|
"null",
|
|
419
419
|
"undefined"
|
|
420
420
|
]
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/popover",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "?
|
|
31
|
-
"description": "
|
|
30
|
+
"name": "?modal",
|
|
31
|
+
"description": "When true, the popover prevents interacting with background elements\nby setting `pointer-events` style on the document body to `none`.\nThis also enables trapping focus inside the popover.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "
|
|
37
|
+
"name": "?noCloseOnEsc",
|
|
38
|
+
"description": "Set to true to disable closing popover on Escape press.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "?
|
|
52
|
-
"description": "
|
|
51
|
+
"name": "?opened",
|
|
52
|
+
"description": "True if the popover is visible and available for interaction.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
@@ -62,71 +62,71 @@
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"name": ".
|
|
66
|
-
"description": "
|
|
65
|
+
"name": ".accessibleName",
|
|
66
|
+
"description": "String used to label the popover to screen reader users.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": ".
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".accessibleNameRef",
|
|
73
|
+
"description": "Id of the element used as label of the popover to screen reader users.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".focusDelay",
|
|
80
|
+
"description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": ".
|
|
87
|
-
"description": "
|
|
86
|
+
"name": ".for",
|
|
87
|
+
"description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": ".
|
|
94
|
-
"description": "
|
|
93
|
+
"name": ".height",
|
|
94
|
+
"description": "Set the height of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
|
-
"name": ".
|
|
101
|
-
"description": "
|
|
100
|
+
"name": ".hideDelay",
|
|
101
|
+
"description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
106
|
{
|
|
107
|
-
"name": ".
|
|
108
|
-
"description": "
|
|
107
|
+
"name": ".hoverDelay",
|
|
108
|
+
"description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
|
|
109
109
|
"value": {
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"name": ".
|
|
115
|
-
"description": "The
|
|
114
|
+
"name": ".overlayRole",
|
|
115
|
+
"description": "The `role` attribute value to be set on the popover.",
|
|
116
116
|
"value": {
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
|
-
"name": ".
|
|
122
|
-
"description": "
|
|
121
|
+
"name": ".position",
|
|
122
|
+
"description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
|
|
123
123
|
"value": {
|
|
124
124
|
"kind": "expression"
|
|
125
125
|
}
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"name": ".
|
|
129
|
-
"description": "
|
|
128
|
+
"name": ".renderer",
|
|
129
|
+
"description": "Custom function for rendering the content of the popover.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `popover` The reference to the `vaadin-popover` element.",
|
|
130
130
|
"value": {
|
|
131
131
|
"kind": "expression"
|
|
132
132
|
}
|
|
@@ -139,22 +139,22 @@
|
|
|
139
139
|
}
|
|
140
140
|
},
|
|
141
141
|
{
|
|
142
|
-
"name": ".
|
|
143
|
-
"description": "
|
|
142
|
+
"name": ".target",
|
|
143
|
+
"description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
|
|
144
144
|
"value": {
|
|
145
145
|
"kind": "expression"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": ".
|
|
150
|
-
"description": "
|
|
149
|
+
"name": ".trigger",
|
|
150
|
+
"description": "Popover trigger mode, used to configure how the popover is opened or closed.\nCould be set to multiple by providing an array, e.g. `trigger = ['hover', 'focus']`.\n\nSupported values:\n- `click` (default) - opens and closes on target click.\n- `hover` - opens on target mouseenter, closes on target mouseleave. Moving mouse\nto the popover content keeps the popover opened.\n- `focus` - opens on target focus, closes on target blur. Moving focus to the\npopover content keeps the popover opened.\n\nIn addition to the behavior specified by `trigger`, the popover can be closed by:\n- pressing Escape key (unless `noCloseOnEsc` property is true)\n- outside click (unless `noCloseOnOutsideClick` property is true)\n\nWhen setting `trigger` property to `null`, `undefined` or empty array, the popover\ncan be only opened programmatically by changing `opened` property. Note, closing\non Escape press or outside click is still allowed unless explicitly disabled.",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
|
-
"name": ".
|
|
157
|
-
"description": "
|
|
156
|
+
"name": ".width",
|
|
157
|
+
"description": "Set the width of the popover.\nIf a unitless number is provided, pixels are assumed.",
|
|
158
158
|
"value": {
|
|
159
159
|
"kind": "expression"
|
|
160
160
|
}
|