@spectrum-web-components/overlay 0.31.1-overlay.29 → 0.31.1-react.21
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/active-overlay.d.ts +6 -0
- package/active-overlay.dev.js +5 -0
- package/{sp-overlay.dev.js.map → active-overlay.dev.js.map} +3 -3
- package/active-overlay.js +2 -0
- package/{sp-overlay.js.map → active-overlay.js.map} +4 -4
- package/custom-elements.json +1215 -0
- package/package.json +21 -50
- package/src/ActiveOverlay.d.ts +84 -0
- package/src/ActiveOverlay.dev.js +517 -0
- package/src/ActiveOverlay.dev.js.map +7 -0
- package/src/ActiveOverlay.js +16 -0
- package/src/ActiveOverlay.js.map +7 -0
- package/src/OverlayTrigger.d.ts +31 -23
- package/src/OverlayTrigger.dev.js +245 -135
- package/src/OverlayTrigger.dev.js.map +3 -3
- package/src/OverlayTrigger.js +22 -52
- package/src/OverlayTrigger.js.map +3 -3
- package/src/VirtualTrigger.dev.js +2 -0
- package/src/VirtualTrigger.dev.js.map +2 -2
- package/src/VirtualTrigger.js +1 -1
- package/src/VirtualTrigger.js.map +3 -3
- package/src/active-overlay.css.dev.js +13 -0
- package/src/active-overlay.css.dev.js.map +7 -0
- package/src/active-overlay.css.js +10 -0
- package/src/active-overlay.css.js.map +7 -0
- package/src/index.d.ts +3 -2
- package/src/index.dev.js +3 -2
- package/src/index.dev.js.map +2 -2
- package/src/index.js +1 -1
- package/src/index.js.map +2 -2
- package/src/loader.d.ts +2 -2
- package/src/loader.dev.js +19 -2
- package/src/loader.dev.js.map +2 -2
- package/src/loader.js +1 -1
- package/src/loader.js.map +3 -3
- package/src/overlay-stack.d.ts +50 -0
- package/src/overlay-stack.dev.js +514 -0
- package/src/overlay-stack.dev.js.map +7 -0
- package/src/overlay-stack.js +33 -0
- package/src/overlay-stack.js.map +7 -0
- package/src/overlay-trigger.css.dev.js +1 -1
- package/src/overlay-trigger.css.dev.js.map +1 -1
- package/src/overlay-trigger.css.js +1 -1
- package/src/overlay-trigger.css.js.map +1 -1
- package/src/overlay-types.d.ts +4 -6
- package/src/overlay-types.dev.js +0 -1
- package/src/overlay-types.dev.js.map +3 -3
- package/src/overlay-types.js +1 -1
- package/src/overlay-types.js.map +3 -3
- package/src/overlay-utils.d.ts +3 -0
- package/src/overlay-utils.dev.js +31 -0
- package/src/overlay-utils.dev.js.map +7 -0
- package/src/overlay-utils.js +2 -0
- package/src/overlay-utils.js.map +7 -0
- package/src/overlay.d.ts +59 -0
- package/src/overlay.dev.js +127 -0
- package/src/overlay.dev.js.map +7 -0
- package/src/overlay.js +2 -0
- package/src/overlay.js.map +7 -0
- package/stories/overlay-story-components.js +26 -24
- package/stories/overlay-story-components.js.map +2 -2
- package/stories/overlay.stories.js +730 -733
- package/stories/overlay.stories.js.map +2 -2
- package/sync/overlay-trigger.d.ts +0 -4
- package/sync/overlay-trigger.dev.js +4 -1
- package/sync/overlay-trigger.dev.js.map +2 -2
- package/sync/overlay-trigger.js +1 -1
- package/sync/overlay-trigger.js.map +3 -3
- package/test/benchmark/basic-test.js +1 -1
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/index.js +428 -461
- package/test/index.js.map +3 -3
- package/test/overlay-lifecycle.test.js +106 -34
- package/test/overlay-lifecycle.test.js.map +2 -2
- package/test/overlay-trigger-click.test.js +5 -11
- package/test/overlay-trigger-click.test.js.map +2 -2
- package/test/overlay-trigger-extended.test.js +9 -3
- package/test/overlay-trigger-extended.test.js.map +2 -2
- package/test/overlay-trigger-hover-click.test.js +23 -23
- package/test/overlay-trigger-hover-click.test.js.map +2 -2
- package/test/overlay-trigger-hover.test.js +34 -40
- package/test/overlay-trigger-hover.test.js.map +2 -2
- package/test/overlay-trigger-longpress.test.js +80 -98
- package/test/overlay-trigger-longpress.test.js.map +2 -2
- package/test/overlay-trigger-sync.test.js +1 -1
- package/test/overlay-trigger-sync.test.js.map +2 -2
- package/test/overlay-trigger.test.js +1 -1
- package/test/overlay-trigger.test.js.map +2 -2
- package/test/overlay-update.test.js +4 -4
- package/test/overlay-update.test.js.map +2 -2
- package/test/overlay.test.js +237 -240
- package/test/overlay.test.js.map +3 -3
- package/sp-overlay.d.ts +0 -6
- package/sp-overlay.dev.js +0 -5
- package/sp-overlay.js +0 -2
- package/src/Overlay.d.ts +0 -28
- package/src/Overlay.dev.js +0 -88
- package/src/Overlay.dev.js.map +0 -7
- package/src/Overlay.js +0 -2
- package/src/Overlay.js.map +0 -7
- package/src/OverlayBase.d.ts +0 -122
- package/src/OverlayBase.dev.js +0 -701
- package/src/OverlayBase.dev.js.map +0 -7
- package/src/OverlayBase.js +0 -17
- package/src/OverlayBase.js.map +0 -7
- package/src/OverlayDialog.d.ts +0 -8
- package/src/OverlayDialog.dev.js +0 -160
- package/src/OverlayDialog.dev.js.map +0 -7
- package/src/OverlayDialog.js +0 -2
- package/src/OverlayDialog.js.map +0 -7
- package/src/OverlayNoPopover.d.ts +0 -8
- package/src/OverlayNoPopover.dev.js +0 -149
- package/src/OverlayNoPopover.dev.js.map +0 -7
- package/src/OverlayNoPopover.js +0 -2
- package/src/OverlayNoPopover.js.map +0 -7
- package/src/OverlayPopover.d.ts +0 -8
- package/src/OverlayPopover.dev.js +0 -199
- package/src/OverlayPopover.dev.js.map +0 -7
- package/src/OverlayPopover.js +0 -2
- package/src/OverlayPopover.js.map +0 -7
- package/src/OverlayStack.d.ts +0 -24
- package/src/OverlayStack.dev.js +0 -125
- package/src/OverlayStack.dev.js.map +0 -7
- package/src/OverlayStack.js +0 -2
- package/src/OverlayStack.js.map +0 -7
- package/src/PlacementController.d.ts +0 -36
- package/src/PlacementController.dev.js +0 -193
- package/src/PlacementController.dev.js.map +0 -7
- package/src/PlacementController.js +0 -2
- package/src/PlacementController.js.map +0 -7
- package/src/fullSizePlugin.d.ts +0 -12
- package/src/fullSizePlugin.dev.js +0 -39
- package/src/fullSizePlugin.dev.js.map +0 -7
- package/src/fullSizePlugin.js +0 -2
- package/src/fullSizePlugin.js.map +0 -7
- package/src/overlay-base.css.dev.js +0 -9
- package/src/overlay-base.css.dev.js.map +0 -7
- package/src/overlay-base.css.js +0 -6
- package/src/overlay-base.css.js.map +0 -7
- package/src/placement.d.ts +0 -21
- package/src/placement.dev.js +0 -111
- package/src/placement.dev.js.map +0 -7
- package/src/placement.js +0 -2
- package/src/placement.js.map +0 -7
- package/src/topLayerOverTransforms.d.ts +0 -22
- package/src/topLayerOverTransforms.dev.js +0 -165
- package/src/topLayerOverTransforms.dev.js.map +0 -7
- package/src/topLayerOverTransforms.js +0 -2
- package/src/topLayerOverTransforms.js.map +0 -7
- package/stories/overlay-element.stories.js +0 -247
- package/stories/overlay-element.stories.js.map +0 -7
- package/test/overlay-element.test-vrt.js +0 -5
- package/test/overlay-element.test-vrt.js.map +0 -7
- package/test/overlay-element.test.js +0 -664
- package/test/overlay-element.test.js.map +0 -7
- /package/src/{overlay-base.css.d.ts → active-overlay.css.d.ts} +0 -0
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
import {
|
|
3
|
-
firstFocusableIn,
|
|
4
|
-
firstFocusableSlottedIn
|
|
5
|
-
} from "@spectrum-web-components/shared/src/first-focusable-in.js";
|
|
6
|
-
import {
|
|
7
|
-
BeforetoggleClosedEvent,
|
|
8
|
-
BeforetoggleOpenEvent,
|
|
9
|
-
guaranteedTransitionend,
|
|
10
|
-
overlayTimer
|
|
11
|
-
} from "./OverlayBase.dev.js";
|
|
12
|
-
import { VirtualTrigger } from "./VirtualTrigger.dev.js";
|
|
13
|
-
function nextFrame() {
|
|
14
|
-
return new Promise((res) => requestAnimationFrame(() => res()));
|
|
15
|
-
}
|
|
16
|
-
export function OverlayNoPopover(constructor) {
|
|
17
|
-
class OverlayWithNoPopover extends constructor {
|
|
18
|
-
async managePopoverOpen() {
|
|
19
|
-
const targetOpenState = this.open;
|
|
20
|
-
await this.managePosition();
|
|
21
|
-
if (this.open !== targetOpenState) {
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
await this.manageDelay(targetOpenState);
|
|
25
|
-
if (this.open !== targetOpenState) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
await this.ensureOnDOM();
|
|
29
|
-
if (this.open !== targetOpenState) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
const focusEl = await this.makeTransition(targetOpenState);
|
|
33
|
-
if (this.open !== targetOpenState) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
await this.applyFocus(targetOpenState, focusEl);
|
|
37
|
-
}
|
|
38
|
-
async manageDelay(targetOpenState) {
|
|
39
|
-
if (targetOpenState === false || targetOpenState !== this.open) {
|
|
40
|
-
overlayTimer.close(this);
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
if (this.delayed) {
|
|
44
|
-
const cancelled = await overlayTimer.openTimer(this);
|
|
45
|
-
if (cancelled) {
|
|
46
|
-
this.open = !targetOpenState;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
async ensureOnDOM() {
|
|
51
|
-
await nextFrame();
|
|
52
|
-
await nextFrame();
|
|
53
|
-
}
|
|
54
|
-
async makeTransition(targetOpenState) {
|
|
55
|
-
if (this.open !== targetOpenState) {
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
58
|
-
let focusEl = null;
|
|
59
|
-
const start = (el, index) => () => {
|
|
60
|
-
if (targetOpenState !== this.open) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
if (typeof el.open !== "undefined") {
|
|
64
|
-
el.open = targetOpenState;
|
|
65
|
-
}
|
|
66
|
-
if (index === 0) {
|
|
67
|
-
const event = targetOpenState ? BeforetoggleOpenEvent : BeforetoggleClosedEvent;
|
|
68
|
-
this.dispatchEvent(new event());
|
|
69
|
-
}
|
|
70
|
-
if (targetOpenState !== true) {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
focusEl = focusEl || firstFocusableIn(el);
|
|
74
|
-
if (focusEl) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
const childSlots = el.querySelectorAll("slot");
|
|
78
|
-
childSlots.forEach((slot) => {
|
|
79
|
-
if (!focusEl) {
|
|
80
|
-
focusEl = firstFocusableSlottedIn(slot);
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
};
|
|
84
|
-
const finish = (el, index) => () => {
|
|
85
|
-
if (this.open !== targetOpenState) {
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
const eventName = targetOpenState ? "sp-opened" : "sp-closed";
|
|
89
|
-
el.dispatchEvent(
|
|
90
|
-
new CustomEvent(eventName, {
|
|
91
|
-
bubbles: false,
|
|
92
|
-
composed: false,
|
|
93
|
-
detail: { interaction: this.type }
|
|
94
|
-
})
|
|
95
|
-
);
|
|
96
|
-
if (index > 0) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
const hasVirtualTrigger = this.triggerElement instanceof VirtualTrigger;
|
|
100
|
-
this.dispatchEvent(
|
|
101
|
-
new Event(eventName, {
|
|
102
|
-
bubbles: hasVirtualTrigger,
|
|
103
|
-
composed: hasVirtualTrigger
|
|
104
|
-
})
|
|
105
|
-
);
|
|
106
|
-
if (this.triggerElement && !hasVirtualTrigger) {
|
|
107
|
-
this.triggerElement.dispatchEvent(
|
|
108
|
-
new CustomEvent(eventName, {
|
|
109
|
-
bubbles: true,
|
|
110
|
-
composed: true,
|
|
111
|
-
detail: { interaction: this.type }
|
|
112
|
-
})
|
|
113
|
-
);
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
this.elements.forEach((el, index) => {
|
|
117
|
-
guaranteedTransitionend(
|
|
118
|
-
el,
|
|
119
|
-
start(el, index),
|
|
120
|
-
finish(el, index)
|
|
121
|
-
);
|
|
122
|
-
});
|
|
123
|
-
return focusEl;
|
|
124
|
-
}
|
|
125
|
-
async applyFocus(targetOpenState, focusEl) {
|
|
126
|
-
if (this.receivesFocus === "false" || this.type === "hint") {
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
await nextFrame();
|
|
130
|
-
await nextFrame();
|
|
131
|
-
if (targetOpenState === this.open && !this.open) {
|
|
132
|
-
if (
|
|
133
|
-
// Only return focus when the trigger is not "virtual"
|
|
134
|
-
this.triggerElement && !(this.triggerElement instanceof VirtualTrigger)
|
|
135
|
-
) {
|
|
136
|
-
if (this.contains(
|
|
137
|
-
this.getRootNode().activeElement
|
|
138
|
-
)) {
|
|
139
|
-
this.triggerElement.focus();
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
focusEl == null ? void 0 : focusEl.focus();
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
return OverlayWithNoPopover;
|
|
148
|
-
}
|
|
149
|
-
//# sourceMappingURL=OverlayNoPopover.dev.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayNoPopover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { ReactiveElement } from 'lit';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n guaranteedTransitionend,\n OpenableElement,\n OverlayBase,\n overlayTimer,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayOpenCloseDetail } from './overlay-types.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayNoPopover<T extends Constructor<OverlayBase>>(\n constructor: T\n): T & Constructor<ReactiveElement> {\n class OverlayWithNoPopover extends constructor {\n protected override async managePopoverOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n await this.manageDelay(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.ensureOnDOM();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.makeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.applyFocus(targetOpenState, focusEl);\n }\n\n private async manageDelay(targetOpenState: boolean): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n private async ensureOnDOM(): Promise<void> {\n await nextFrame();\n await nextFrame();\n }\n\n private async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n if (targetOpenState !== this.open) {\n return;\n }\n if (typeof el.open !== 'undefined') {\n el.open = targetOpenState;\n }\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (targetOpenState !== true) {\n return;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n el.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n bubbles: false,\n composed: false,\n detail: { interaction: this.type },\n })\n );\n if (index > 0) {\n return;\n }\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new Event(eventName, {\n bubbles: hasVirtualTrigger,\n composed: hasVirtualTrigger,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n bubbles: true,\n composed: true,\n detail: { interaction: this.type },\n })\n );\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n private async applyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n // Do not move focus when explicitly told not to\n // and when the Overlay is a \"hint\"\n if (this.receivesFocus === 'false' || this.type === 'hint') {\n return;\n }\n\n await nextFrame();\n await nextFrame();\n if (targetOpenState === this.open && !this.open) {\n if (\n // Only return focus when the trigger is not \"virtual\"\n this.triggerElement &&\n !(this.triggerElement instanceof VirtualTrigger)\n ) {\n if (\n this.contains(\n (this.getRootNode() as Document).activeElement\n )\n ) {\n this.triggerElement.focus();\n }\n }\n return;\n }\n\n focusEl?.focus();\n }\n }\n return OverlayWithNoPopover;\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/src/OverlayNoPopover.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";import{firstFocusableIn as h,firstFocusableSlottedIn as f}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as v,BeforetoggleOpenEvent as d,guaranteedTransitionend as y,overlayTimer as l}from"./OverlayBase.js";import{VirtualTrigger as c}from"./VirtualTrigger.js";function r(){return new Promise(a=>requestAnimationFrame(()=>a()))}export function OverlayNoPopover(a){class m extends a{async managePopoverOpen(){const e=this.open;if(await this.managePosition(),this.open!==e||(await this.manageDelay(e),this.open!==e)||(await this.ensureOnDOM(),this.open!==e))return;const t=await this.makeTransition(e);this.open===e&&await this.applyFocus(e,t)}async manageDelay(e){if(e===!1||e!==this.open){l.close(this);return}this.delayed&&await l.openTimer(this)&&(this.open=!e)}async ensureOnDOM(){await r(),await r()}async makeTransition(e){if(this.open!==e)return null;let t=null;const p=(i,o)=>()=>{if(e!==this.open)return;if(typeof i.open!="undefined"&&(i.open=e),o===0){const n=e?d:v;this.dispatchEvent(new n)}if(e!==!0||(t=t||h(i),t))return;i.querySelectorAll("slot").forEach(n=>{t||(t=f(n))})},u=(i,o)=>()=>{if(this.open!==e)return;const s=e?"sp-opened":"sp-closed";if(i.dispatchEvent(new CustomEvent(s,{bubbles:!1,composed:!1,detail:{interaction:this.type}})),o>0)return;const n=this.triggerElement instanceof c;this.dispatchEvent(new Event(s,{bubbles:n,composed:n})),this.triggerElement&&!n&&this.triggerElement.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};return this.elements.forEach((i,o)=>{y(i,p(i,o),u(i,o))}),t}async applyFocus(e,t){if(!(this.receivesFocus==="false"||this.type==="hint")){if(await r(),await r(),e===this.open&&!this.open){this.triggerElement&&!(this.triggerElement instanceof c)&&this.contains(this.getRootNode().activeElement)&&this.triggerElement.focus();return}t==null||t.focus()}}}return m}
|
|
2
|
-
//# sourceMappingURL=OverlayNoPopover.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayNoPopover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { ReactiveElement } from 'lit';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n guaranteedTransitionend,\n OpenableElement,\n OverlayBase,\n overlayTimer,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayOpenCloseDetail } from './overlay-types.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayNoPopover<T extends Constructor<OverlayBase>>(\n constructor: T\n): T & Constructor<ReactiveElement> {\n class OverlayWithNoPopover extends constructor {\n protected override async managePopoverOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n await this.manageDelay(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.ensureOnDOM();\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.makeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.applyFocus(targetOpenState, focusEl);\n }\n\n private async manageDelay(targetOpenState: boolean): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n private async ensureOnDOM(): Promise<void> {\n await nextFrame();\n await nextFrame();\n }\n\n private async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n if (targetOpenState !== this.open) {\n return;\n }\n if (typeof el.open !== 'undefined') {\n el.open = targetOpenState;\n }\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (targetOpenState !== true) {\n return;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish = (el: OpenableElement, index: number) => (): void => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';\n el.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n bubbles: false,\n composed: false,\n detail: { interaction: this.type },\n })\n );\n if (index > 0) {\n return;\n }\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new Event(eventName, {\n bubbles: hasVirtualTrigger,\n composed: hasVirtualTrigger,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n bubbles: true,\n composed: true,\n detail: { interaction: this.type },\n })\n );\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n private async applyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n // Do not move focus when explicitly told not to\n // and when the Overlay is a \"hint\"\n if (this.receivesFocus === 'false' || this.type === 'hint') {\n return;\n }\n\n await nextFrame();\n await nextFrame();\n if (targetOpenState === this.open && !this.open) {\n if (\n // Only return focus when the trigger is not \"virtual\"\n this.triggerElement &&\n !(this.triggerElement instanceof VirtualTrigger)\n ) {\n if (\n this.contains(\n (this.getRootNode() as Document).activeElement\n )\n ) {\n this.triggerElement.focus();\n }\n }\n return;\n }\n\n focusEl?.focus();\n }\n }\n return OverlayWithNoPopover;\n}\n"],
|
|
5
|
-
"mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OACI,2BAAAC,EACA,yBAAAC,EACA,2BAAAC,EAGA,gBAAAC,MACG,mBACP,OAAS,kBAAAC,MAAsB,sBAS/B,SAASC,GAA2B,CAChC,OAAO,IAAI,QAASC,GAAQ,sBAAsB,IAAMA,EAAI,CAAC,CAAC,CAClE,CAEO,gBAAS,iBACZC,EACgC,CAChC,MAAMC,UAA6BD,CAAY,CAC3C,MAAyB,mBAAmC,CACxD,MAAME,EAAkB,KAAK,KAU7B,GATA,MAAM,KAAK,eAAe,EACtB,KAAK,OAASA,IAGlB,MAAM,KAAK,YAAYA,CAAe,EAClC,KAAK,OAASA,KAGlB,MAAM,KAAK,YAAY,EACnB,KAAK,OAASA,GACd,OAEJ,MAAMC,EAAU,MAAM,KAAK,eAAeD,CAAe,EACrD,KAAK,OAASA,GAGlB,MAAM,KAAK,WAAWA,EAAiBC,CAAO,CAClD,CAEA,MAAc,YAAYD,EAAyC,CAC/D,GAAIA,IAAoB,IAASA,IAAoB,KAAK,KAAM,CAC5DN,EAAa,MAAM,IAAI,EACvB,OAEA,KAAK,SACa,MAAMA,EAAa,UAAU,IAAI,IAE/C,KAAK,KAAO,CAACM,EAGzB,CAEA,MAAc,aAA6B,CACvC,MAAMJ,EAAU,EAChB,MAAMA,EAAU,CACpB,CAEA,MAAc,eACVI,EAC2B,CAC3B,GAAI,KAAK,OAASA,EACd,OAAO,KAEX,IAAIC,EAAU,KACd,MAAMC,EAAQ,CAACC,EAAqBC,IAAkB,IAAY,CAC9D,GAAIJ,IAAoB,KAAK,KACzB,OAKJ,GAHI,OAAOG,EAAG,MAAS,cACnBA,EAAG,KAAOH,GAEVI,IAAU,EAAG,CACb,MAAMC,EAAQL,EACRR,EACAD,EACN,KAAK,cAAc,IAAIc,CAAO,EAMlC,GAJIL,IAAoB,KAGxBC,EAAUA,GAAWZ,EAAiBc,CAAE,EACpCF,GACA,OAEeE,EAAG,iBAAiB,MAAM,EAClC,QAASG,GAAS,CACpBL,IACDA,EAAUX,EAAwBgB,CAAI,EAE9C,CAAC,CACL,EACMC,EAAS,CAACJ,EAAqBC,IAAkB,IAAY,CAC/D,GAAI,KAAK,OAASJ,EACd,OAEJ,MAAMQ,EAAYR,EAAkB,YAAc,YAQlD,GAPAG,EAAG,cACC,IAAI,YAAoCK,EAAW,CAC/C,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,YAAa,KAAK,IAAK,CACrC,CAAC,CACL,EACIJ,EAAQ,EACR,OAEJ,MAAMK,EACF,KAAK,0BAA0Bd,EACnC,KAAK,cACD,IAAI,MAAMa,EAAW,CACjB,QAASC,EACT,SAAUA,CACd,CAAC,CACL,EACI,KAAK,gBAAkB,CAACA,GACvB,KAAK,eAA+B,cACjC,IAAI,YAAoCD,EAAW,CAC/C,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,YAAa,KAAK,IAAK,CACrC,CAAC,CACL,CAER,EACA,YAAK,SAAS,QAAQ,CAACL,EAAIC,IAAU,CACjCX,EACIU,EACAD,EAAMC,EAAIC,CAAK,EACfG,EAAOJ,EAAIC,CAAK,CACpB,CACJ,CAAC,EACMH,CACX,CAEA,MAAc,WACVD,EACAC,EACa,CAGb,GAAI,OAAK,gBAAkB,SAAW,KAAK,OAAS,QAMpD,IAFA,MAAML,EAAU,EAChB,MAAMA,EAAU,EACZI,IAAoB,KAAK,MAAQ,CAAC,KAAK,KAAM,CAGzC,KAAK,gBACL,EAAE,KAAK,0BAA0BL,IAG7B,KAAK,SACA,KAAK,YAAY,EAAe,aACrC,GAEA,KAAK,eAAe,MAAM,EAGlC,OAGJM,GAAA,MAAAA,EAAS,QACb,CACJ,CACA,OAAOF,CACX",
|
|
6
|
-
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "guaranteedTransitionend", "overlayTimer", "VirtualTrigger", "nextFrame", "res", "constructor", "OverlayWithNoPopover", "targetOpenState", "focusEl", "start", "el", "index", "event", "slot", "finish", "eventName", "hasVirtualTrigger"]
|
|
7
|
-
}
|
package/src/OverlayPopover.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ReactiveElement } from 'lit';
|
|
2
|
-
import { OverlayBase } from './OverlayBase.js';
|
|
3
|
-
declare type Constructor<T = Record<string, unknown>> = {
|
|
4
|
-
new (...args: any[]): T;
|
|
5
|
-
prototype: T;
|
|
6
|
-
};
|
|
7
|
-
export declare function OverlayPopover<T extends Constructor<OverlayBase>>(constructor: T): T & Constructor<ReactiveElement>;
|
|
8
|
-
export {};
|
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
import {
|
|
3
|
-
firstFocusableIn,
|
|
4
|
-
firstFocusableSlottedIn
|
|
5
|
-
} from "@spectrum-web-components/shared/src/first-focusable-in.js";
|
|
6
|
-
import {
|
|
7
|
-
BeforetoggleClosedEvent,
|
|
8
|
-
BeforetoggleOpenEvent,
|
|
9
|
-
guaranteedTransitionend,
|
|
10
|
-
overlayTimer
|
|
11
|
-
} from "./OverlayBase.dev.js";
|
|
12
|
-
import { VirtualTrigger } from "./VirtualTrigger.dev.js";
|
|
13
|
-
function nextFrame() {
|
|
14
|
-
return new Promise((res) => requestAnimationFrame(() => res()));
|
|
15
|
-
}
|
|
16
|
-
export function OverlayPopover(constructor) {
|
|
17
|
-
class OverlayWithPopover extends constructor {
|
|
18
|
-
async managePopoverOpen() {
|
|
19
|
-
const targetOpenState = this.open;
|
|
20
|
-
await this.managePosition();
|
|
21
|
-
if (this.open !== targetOpenState) {
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
await this.manageDelay(targetOpenState);
|
|
25
|
-
if (this.open !== targetOpenState) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
await this.ensureOnDOM(targetOpenState);
|
|
29
|
-
if (this.open !== targetOpenState) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
const focusEl = await this.makeTransition(targetOpenState);
|
|
33
|
-
if (this.open !== targetOpenState) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
await this.applyFocus(targetOpenState, focusEl);
|
|
37
|
-
}
|
|
38
|
-
async manageDelay(targetOpenState) {
|
|
39
|
-
if (targetOpenState === false || targetOpenState !== this.open) {
|
|
40
|
-
overlayTimer.close(this);
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
if (this.delayed) {
|
|
44
|
-
const cancelled = await overlayTimer.openTimer(this);
|
|
45
|
-
if (cancelled) {
|
|
46
|
-
this.open = !targetOpenState;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
async ensureOnDOM(targetOpenState) {
|
|
51
|
-
await nextFrame();
|
|
52
|
-
let popoverOpen = false;
|
|
53
|
-
try {
|
|
54
|
-
popoverOpen = this.dialogEl.matches(":popover-open");
|
|
55
|
-
} catch (error) {
|
|
56
|
-
}
|
|
57
|
-
let open = false;
|
|
58
|
-
try {
|
|
59
|
-
open = this.dialogEl.matches(":open");
|
|
60
|
-
} catch (error) {
|
|
61
|
-
}
|
|
62
|
-
if (targetOpenState && this.open === targetOpenState && !popoverOpen && !open && this.isConnected) {
|
|
63
|
-
this.dialogEl.showPopover();
|
|
64
|
-
}
|
|
65
|
-
await nextFrame();
|
|
66
|
-
}
|
|
67
|
-
async makeTransition(targetOpenState) {
|
|
68
|
-
if (this.open !== targetOpenState) {
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
let focusEl = null;
|
|
72
|
-
const start = (el, index) => () => {
|
|
73
|
-
if (typeof el.open !== "undefined") {
|
|
74
|
-
el.open = targetOpenState;
|
|
75
|
-
}
|
|
76
|
-
if (index === 0) {
|
|
77
|
-
const event = targetOpenState ? BeforetoggleOpenEvent : BeforetoggleClosedEvent;
|
|
78
|
-
this.dispatchEvent(new event());
|
|
79
|
-
}
|
|
80
|
-
if (!targetOpenState) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
focusEl = focusEl || firstFocusableIn(el);
|
|
84
|
-
if (focusEl) {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
const childSlots = el.querySelectorAll("slot");
|
|
88
|
-
childSlots.forEach((slot) => {
|
|
89
|
-
if (!focusEl) {
|
|
90
|
-
focusEl = firstFocusableSlottedIn(slot);
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
const finish = (el, index) => async () => {
|
|
95
|
-
if (this.open !== targetOpenState) {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
const eventName = targetOpenState ? "sp-opened" : "sp-closed";
|
|
99
|
-
if (index > 0) {
|
|
100
|
-
el.dispatchEvent(
|
|
101
|
-
new CustomEvent(eventName, {
|
|
102
|
-
bubbles: false,
|
|
103
|
-
composed: false,
|
|
104
|
-
detail: { interaction: this.type }
|
|
105
|
-
})
|
|
106
|
-
);
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
const reportChange = async () => {
|
|
110
|
-
if (this.open !== targetOpenState) {
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
await nextFrame();
|
|
114
|
-
const hasVirtualTrigger = this.triggerElement instanceof VirtualTrigger;
|
|
115
|
-
this.dispatchEvent(
|
|
116
|
-
new Event(eventName, {
|
|
117
|
-
bubbles: hasVirtualTrigger,
|
|
118
|
-
composed: hasVirtualTrigger
|
|
119
|
-
})
|
|
120
|
-
);
|
|
121
|
-
el.dispatchEvent(
|
|
122
|
-
new Event(eventName, {
|
|
123
|
-
bubbles: false,
|
|
124
|
-
composed: false
|
|
125
|
-
})
|
|
126
|
-
);
|
|
127
|
-
if (this.triggerElement && !hasVirtualTrigger) {
|
|
128
|
-
this.triggerElement.dispatchEvent(
|
|
129
|
-
new CustomEvent(
|
|
130
|
-
eventName,
|
|
131
|
-
{
|
|
132
|
-
bubbles: true,
|
|
133
|
-
composed: true,
|
|
134
|
-
detail: { interaction: this.type }
|
|
135
|
-
}
|
|
136
|
-
)
|
|
137
|
-
);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
if (this.open !== targetOpenState) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
let popoverOpen = false;
|
|
144
|
-
try {
|
|
145
|
-
popoverOpen = this.dialogEl.matches(":popover-open");
|
|
146
|
-
} catch (error) {
|
|
147
|
-
}
|
|
148
|
-
let open = false;
|
|
149
|
-
try {
|
|
150
|
-
open = this.dialogEl.matches(":open");
|
|
151
|
-
} catch (error) {
|
|
152
|
-
}
|
|
153
|
-
if (targetOpenState !== true && (popoverOpen || open) && this.isConnected) {
|
|
154
|
-
this.dialogEl.addEventListener(
|
|
155
|
-
"beforetoggle",
|
|
156
|
-
() => {
|
|
157
|
-
reportChange();
|
|
158
|
-
},
|
|
159
|
-
{ once: true }
|
|
160
|
-
);
|
|
161
|
-
this.dialogEl.hidePopover();
|
|
162
|
-
} else {
|
|
163
|
-
reportChange();
|
|
164
|
-
}
|
|
165
|
-
};
|
|
166
|
-
this.elements.forEach((el, index) => {
|
|
167
|
-
guaranteedTransitionend(
|
|
168
|
-
el,
|
|
169
|
-
start(el, index),
|
|
170
|
-
finish(el, index)
|
|
171
|
-
);
|
|
172
|
-
});
|
|
173
|
-
return focusEl;
|
|
174
|
-
}
|
|
175
|
-
async applyFocus(targetOpenState, focusEl) {
|
|
176
|
-
if (this.receivesFocus === "false" || this.type === "hint") {
|
|
177
|
-
return;
|
|
178
|
-
}
|
|
179
|
-
await nextFrame();
|
|
180
|
-
await nextFrame();
|
|
181
|
-
if (targetOpenState === this.open && !this.open) {
|
|
182
|
-
if (
|
|
183
|
-
// Only return focus when the trigger is not "virtual"
|
|
184
|
-
this.triggerElement && !(this.triggerElement instanceof VirtualTrigger)
|
|
185
|
-
) {
|
|
186
|
-
if (this.contains(
|
|
187
|
-
this.getRootNode().activeElement
|
|
188
|
-
)) {
|
|
189
|
-
this.triggerElement.focus();
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
return;
|
|
193
|
-
}
|
|
194
|
-
focusEl == null ? void 0 : focusEl.focus();
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
return OverlayWithPopover;
|
|
198
|
-
}
|
|
199
|
-
//# sourceMappingURL=OverlayPopover.dev.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayPopover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { ReactiveElement } from 'lit';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n guaranteedTransitionend,\n OpenableElement,\n OverlayBase,\n overlayTimer,\n} from './OverlayBase.dev.js'\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { OverlayOpenCloseDetail } from './overlay-types.dev.js'\n\ntype Constructor<T = Record<string, unknown>> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayPopover<T extends Constructor<OverlayBase>>(\n constructor: T\n): T & Constructor<ReactiveElement> {\n class OverlayWithPopover extends constructor {\n protected override async managePopoverOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n await this.manageDelay(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.ensureOnDOM(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.makeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.applyFocus(targetOpenState, focusEl);\n }\n\n private async manageDelay(targetOpenState: boolean): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n private async ensureOnDOM(targetOpenState: boolean): Promise<void> {\n await nextFrame();\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n }\n await nextFrame();\n }\n\n private async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n if (typeof el.open !== 'undefined') {\n el.open = targetOpenState;\n }\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n bubbles: false,\n composed: false,\n detail: { interaction: this.type },\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new Event(eventName, {\n bubbles: hasVirtualTrigger,\n composed: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new Event(eventName, {\n bubbles: false,\n composed: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(\n eventName,\n {\n bubbles: true,\n composed: true,\n detail: { interaction: this.type },\n }\n )\n );\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState !== true &&\n (popoverOpen || open) &&\n this.isConnected\n ) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n private async applyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n // Do not move focus when explicitly told not to\n // and when the Overlay is a \"hint\"\n if (this.receivesFocus === 'false' || this.type === 'hint') {\n return;\n }\n\n await nextFrame();\n await nextFrame();\n if (targetOpenState === this.open && !this.open) {\n if (\n // Only return focus when the trigger is not \"virtual\"\n this.triggerElement &&\n !(this.triggerElement instanceof VirtualTrigger)\n ) {\n if (\n this.contains(\n (this.getRootNode() as Document).activeElement\n )\n ) {\n this.triggerElement.focus();\n }\n }\n return;\n }\n\n focusEl?.focus();\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,OACG;AACP,SAAS,sBAAsB;AAS/B,SAAS,YAA2B;AAChC,SAAO,IAAI,QAAQ,CAAC,QAAQ,sBAAsB,MAAM,IAAI,CAAC,CAAC;AAClE;AAEO,gBAAS,eACZ,aACgC;AAChC,QAAM,2BAA2B,YAAY;AAAA,IACzC,MAAyB,oBAAmC;AACxD,YAAM,kBAAkB,KAAK;AAC7B,YAAM,KAAK,eAAe;AAC1B,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,KAAK,YAAY,eAAe;AACtC,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,KAAK,YAAY,eAAe;AACtC,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,UAAU,MAAM,KAAK,eAAe,eAAe;AACzD,UAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,MACJ;AACA,YAAM,KAAK,WAAW,iBAAiB,OAAO;AAAA,IAClD;AAAA,IAEA,MAAc,YAAY,iBAAyC;AAC/D,UAAI,oBAAoB,SAAS,oBAAoB,KAAK,MAAM;AAC5D,qBAAa,MAAM,IAAI;AACvB;AAAA,MACJ;AACA,UAAI,KAAK,SAAS;AACd,cAAM,YAAY,MAAM,aAAa,UAAU,IAAI;AACnD,YAAI,WAAW;AACX,eAAK,OAAO,CAAC;AAAA,QACjB;AAAA,MACJ;AAAA,IACJ;AAAA,IAEA,MAAc,YAAY,iBAAyC;AAC/D,YAAM,UAAU;AAChB,UAAI,cAAc;AAClB,UAAI;AACA,sBAAc,KAAK,SAAS,QAAQ,eAAe;AAAA,MAEvD,SAAS,OAAP;AAAA,MAAe;AACjB,UAAI,OAAO;AACX,UAAI;AACA,eAAO,KAAK,SAAS,QAAQ,OAAO;AAAA,MAExC,SAAS,OAAP;AAAA,MAAe;AACjB,UACI,mBACA,KAAK,SAAS,mBACd,CAAC,eACD,CAAC,QACD,KAAK,aACP;AACE,aAAK,SAAS,YAAY;AAAA,MAC9B;AACA,YAAM,UAAU;AAAA,IACpB;AAAA,IAEA,MAAc,eACV,iBAC2B;AAC3B,UAAI,KAAK,SAAS,iBAAiB;AAC/B,eAAO;AAAA,MACX;AACA,UAAI,UAAU;AACd,YAAM,QAAQ,CAAC,IAAqB,UAAkB,MAAY;AAC9D,YAAI,OAAO,GAAG,SAAS,aAAa;AAChC,aAAG,OAAO;AAAA,QACd;AACA,YAAI,UAAU,GAAG;AACb,gBAAM,QAAQ,kBACR,wBACA;AACN,eAAK,cAAc,IAAI,MAAM,CAAC;AAAA,QAClC;AACA,YAAI,CAAC,iBAAiB;AAClB;AAAA,QACJ;AACA,kBAAU,WAAW,iBAAiB,EAAE;AACxC,YAAI,SAAS;AACT;AAAA,QACJ;AACA,cAAM,aAAa,GAAG,iBAAiB,MAAM;AAC7C,mBAAW,QAAQ,CAAC,SAAS;AACzB,cAAI,CAAC,SAAS;AACV,sBAAU,wBAAwB,IAAI;AAAA,UAC1C;AAAA,QACJ,CAAC;AAAA,MACL;AACA,YAAM,SACF,CAAC,IAAqB,UACtB,YAA2B;AACvB,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,cAAM,YAAY,kBACZ,cACA;AACN,YAAI,QAAQ,GAAG;AACX,aAAG;AAAA,YACC,IAAI,YAAoC,WAAW;AAAA,cAC/C,SAAS;AAAA,cACT,UAAU;AAAA,cACV,QAAQ,EAAE,aAAa,KAAK,KAAK;AAAA,YACrC,CAAC;AAAA,UACL;AACA;AAAA,QACJ;AACA,cAAM,eAAe,YAA2B;AAC5C,cAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,UACJ;AACA,gBAAM,UAAU;AAChB,gBAAM,oBACF,KAAK,0BAA0B;AACnC,eAAK;AAAA,YACD,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA,aAAG;AAAA,YACC,IAAI,MAAM,WAAW;AAAA,cACjB,SAAS;AAAA,cACT,UAAU;AAAA,YACd,CAAC;AAAA,UACL;AACA,cAAI,KAAK,kBAAkB,CAAC,mBAAmB;AAC3C,YAAC,KAAK,eAA+B;AAAA,cACjC,IAAI;AAAA,gBACA;AAAA,gBACA;AAAA,kBACI,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,QAAQ,EAAE,aAAa,KAAK,KAAK;AAAA,gBACrC;AAAA,cACJ;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AACA,YAAI,KAAK,SAAS,iBAAiB;AAC/B;AAAA,QACJ;AACA,YAAI,cAAc;AAClB,YAAI;AACA,wBAAc,KAAK,SAAS,QAAQ,eAAe;AAAA,QAEvD,SAAS,OAAP;AAAA,QAAe;AACjB,YAAI,OAAO;AACX,YAAI;AACA,iBAAO,KAAK,SAAS,QAAQ,OAAO;AAAA,QAExC,SAAS,OAAP;AAAA,QAAe;AACjB,YACI,oBAAoB,SACnB,eAAe,SAChB,KAAK,aACP;AACE,eAAK,SAAS;AAAA,YACV;AAAA,YACA,MAAM;AACF,2BAAa;AAAA,YACjB;AAAA,YACA,EAAE,MAAM,KAAK;AAAA,UACjB;AACA,eAAK,SAAS,YAAY;AAAA,QAC9B,OAAO;AACH,uBAAa;AAAA,QACjB;AAAA,MACJ;AACJ,WAAK,SAAS,QAAQ,CAAC,IAAI,UAAU;AACjC;AAAA,UACI;AAAA,UACA,MAAM,IAAI,KAAK;AAAA,UACf,OAAO,IAAI,KAAK;AAAA,QACpB;AAAA,MACJ,CAAC;AACD,aAAO;AAAA,IACX;AAAA,IAEA,MAAc,WACV,iBACA,SACa;AAGb,UAAI,KAAK,kBAAkB,WAAW,KAAK,SAAS,QAAQ;AACxD;AAAA,MACJ;AAEA,YAAM,UAAU;AAChB,YAAM,UAAU;AAChB,UAAI,oBAAoB,KAAK,QAAQ,CAAC,KAAK,MAAM;AAC7C;AAAA;AAAA,UAEI,KAAK,kBACL,EAAE,KAAK,0BAA0B;AAAA,UACnC;AACE,cACI,KAAK;AAAA,YACA,KAAK,YAAY,EAAe;AAAA,UACrC,GACF;AACE,iBAAK,eAAe,MAAM;AAAA,UAC9B;AAAA,QACJ;AACA;AAAA,MACJ;AAEA,yCAAS;AAAA,IACb;AAAA,EACJ;AACA,SAAO;AACX;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/src/OverlayPopover.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";import{firstFocusableIn as v,firstFocusableSlottedIn as E}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{BeforetoggleClosedEvent as y,BeforetoggleOpenEvent as g,guaranteedTransitionend as b,overlayTimer as u}from"./OverlayBase.js";import{VirtualTrigger as f}from"./VirtualTrigger.js";function a(){return new Promise(c=>requestAnimationFrame(()=>c()))}export function OverlayPopover(c){class d extends c{async managePopoverOpen(){const e=this.open;if(await this.managePosition(),this.open!==e||(await this.manageDelay(e),this.open!==e)||(await this.ensureOnDOM(e),this.open!==e))return;const t=await this.makeTransition(e);this.open===e&&await this.applyFocus(e,t)}async manageDelay(e){if(e===!1||e!==this.open){u.close(this);return}this.delayed&&await u.openTimer(this)&&(this.open=!e)}async ensureOnDOM(e){await a();let t=!1;try{t=this.dialogEl.matches(":popover-open")}catch(p){}let l=!1;try{l=this.dialogEl.matches(":open")}catch(p){}e&&this.open===e&&!t&&!l&&this.isConnected&&this.dialogEl.showPopover(),await a()}async makeTransition(e){if(this.open!==e)return null;let t=null;const l=(i,o)=>()=>{if(typeof i.open!="undefined"&&(i.open=e),o===0){const n=e?g:y;this.dispatchEvent(new n)}if(!e||(t=t||v(i),t))return;i.querySelectorAll("slot").forEach(n=>{t||(t=E(n))})},p=(i,o)=>async()=>{if(this.open!==e)return;const s=e?"sp-opened":"sp-closed";if(o>0){i.dispatchEvent(new CustomEvent(s,{bubbles:!1,composed:!1,detail:{interaction:this.type}}));return}const n=async()=>{if(this.open!==e)return;await a();const r=this.triggerElement instanceof f;this.dispatchEvent(new Event(s,{bubbles:r,composed:r})),i.dispatchEvent(new Event(s,{bubbles:!1,composed:!1})),this.triggerElement&&!r&&this.triggerElement.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{interaction:this.type}}))};if(this.open!==e)return;let h=!1;try{h=this.dialogEl.matches(":popover-open")}catch(r){}let m=!1;try{m=this.dialogEl.matches(":open")}catch(r){}e!==!0&&(h||m)&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{n()},{once:!0}),this.dialogEl.hidePopover()):n()};return this.elements.forEach((i,o)=>{b(i,l(i,o),p(i,o))}),t}async applyFocus(e,t){if(!(this.receivesFocus==="false"||this.type==="hint")){if(await a(),await a(),e===this.open&&!this.open){this.triggerElement&&!(this.triggerElement instanceof f)&&this.contains(this.getRootNode().activeElement)&&this.triggerElement.focus();return}t==null||t.focus()}}}return d}
|
|
2
|
-
//# sourceMappingURL=OverlayPopover.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayPopover.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n firstFocusableIn,\n firstFocusableSlottedIn,\n} from '@spectrum-web-components/shared/src/first-focusable-in.js';\nimport { ReactiveElement } from 'lit';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n guaranteedTransitionend,\n OpenableElement,\n OverlayBase,\n overlayTimer,\n} from './OverlayBase.js';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { OverlayOpenCloseDetail } from './overlay-types.js';\n\ntype Constructor<T = Record<string, unknown>> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n prototype: T;\n};\n\nfunction nextFrame(): Promise<void> {\n return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nexport function OverlayPopover<T extends Constructor<OverlayBase>>(\n constructor: T\n): T & Constructor<ReactiveElement> {\n class OverlayWithPopover extends constructor {\n protected override async managePopoverOpen(): Promise<void> {\n const targetOpenState = this.open;\n await this.managePosition();\n if (this.open !== targetOpenState) {\n return;\n }\n await this.manageDelay(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.ensureOnDOM(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n const focusEl = await this.makeTransition(targetOpenState);\n if (this.open !== targetOpenState) {\n return;\n }\n await this.applyFocus(targetOpenState, focusEl);\n }\n\n private async manageDelay(targetOpenState: boolean): Promise<void> {\n if (targetOpenState === false || targetOpenState !== this.open) {\n overlayTimer.close(this);\n return;\n }\n if (this.delayed) {\n const cancelled = await overlayTimer.openTimer(this);\n if (cancelled) {\n this.open = !targetOpenState;\n }\n }\n }\n\n private async ensureOnDOM(targetOpenState: boolean): Promise<void> {\n await nextFrame();\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState &&\n this.open === targetOpenState &&\n !popoverOpen &&\n !open &&\n this.isConnected\n ) {\n this.dialogEl.showPopover();\n }\n await nextFrame();\n }\n\n private async makeTransition(\n targetOpenState: boolean\n ): Promise<HTMLElement | null> {\n if (this.open !== targetOpenState) {\n return null;\n }\n let focusEl = null as HTMLElement | null;\n const start = (el: OpenableElement, index: number) => (): void => {\n if (typeof el.open !== 'undefined') {\n el.open = targetOpenState;\n }\n if (index === 0) {\n const event = targetOpenState\n ? BeforetoggleOpenEvent\n : BeforetoggleClosedEvent;\n this.dispatchEvent(new event());\n }\n if (!targetOpenState) {\n return;\n }\n focusEl = focusEl || firstFocusableIn(el);\n if (focusEl) {\n return;\n }\n const childSlots = el.querySelectorAll('slot');\n childSlots.forEach((slot) => {\n if (!focusEl) {\n focusEl = firstFocusableSlottedIn(slot);\n }\n });\n };\n const finish =\n (el: OpenableElement, index: number) =>\n async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n const eventName = targetOpenState\n ? 'sp-opened'\n : 'sp-closed';\n if (index > 0) {\n el.dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(eventName, {\n bubbles: false,\n composed: false,\n detail: { interaction: this.type },\n })\n );\n return;\n }\n const reportChange = async (): Promise<void> => {\n if (this.open !== targetOpenState) {\n return;\n }\n await nextFrame();\n const hasVirtualTrigger =\n this.triggerElement instanceof VirtualTrigger;\n this.dispatchEvent(\n new Event(eventName, {\n bubbles: hasVirtualTrigger,\n composed: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new Event(eventName, {\n bubbles: false,\n composed: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new CustomEvent<OverlayOpenCloseDetail>(\n eventName,\n {\n bubbles: true,\n composed: true,\n detail: { interaction: this.type },\n }\n )\n );\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n let popoverOpen = false;\n try {\n popoverOpen = this.dialogEl.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = this.dialogEl.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n if (\n targetOpenState !== true &&\n (popoverOpen || open) &&\n this.isConnected\n ) {\n this.dialogEl.addEventListener(\n 'beforetoggle',\n () => {\n reportChange();\n },\n { once: true }\n );\n this.dialogEl.hidePopover();\n } else {\n reportChange();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n\n private async applyFocus(\n targetOpenState: boolean,\n focusEl: HTMLElement | null\n ): Promise<void> {\n // Do not move focus when explicitly told not to\n // and when the Overlay is a \"hint\"\n if (this.receivesFocus === 'false' || this.type === 'hint') {\n return;\n }\n\n await nextFrame();\n await nextFrame();\n if (targetOpenState === this.open && !this.open) {\n if (\n // Only return focus when the trigger is not \"virtual\"\n this.triggerElement &&\n !(this.triggerElement instanceof VirtualTrigger)\n ) {\n if (\n this.contains(\n (this.getRootNode() as Document).activeElement\n )\n ) {\n this.triggerElement.focus();\n }\n }\n return;\n }\n\n focusEl?.focus();\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "guaranteedTransitionend", "overlayTimer", "VirtualTrigger", "nextFrame", "res", "constructor", "OverlayWithPopover", "targetOpenState", "focusEl", "popoverOpen", "error", "open", "start", "el", "index", "event", "slot", "finish", "eventName", "reportChange", "hasVirtualTrigger"]
|
|
7
|
-
}
|
package/src/OverlayStack.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { OverlayBase } from './OverlayBase.js';
|
|
2
|
-
declare class OverlayStack {
|
|
3
|
-
private get document();
|
|
4
|
-
private root;
|
|
5
|
-
stack: OverlayBase[];
|
|
6
|
-
constructor();
|
|
7
|
-
bindEvents(): void;
|
|
8
|
-
private closeOverlay;
|
|
9
|
-
handleClick: (event: Event) => void;
|
|
10
|
-
handleBeforetoggle: (event: Event) => void;
|
|
11
|
-
private handleKeydown;
|
|
12
|
-
/**
|
|
13
|
-
* When overlays are added manage the open state of exisiting overlays appropriately:
|
|
14
|
-
* - 'modal': should close other overlays
|
|
15
|
-
* - 'page': should close other overlays
|
|
16
|
-
* - 'hint': shouldn't close other overlays
|
|
17
|
-
* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
|
|
18
|
-
* - 'manual': shouldn't close other overlays
|
|
19
|
-
*/
|
|
20
|
-
add(overlay: OverlayBase): void;
|
|
21
|
-
remove(overlay: OverlayBase): void;
|
|
22
|
-
}
|
|
23
|
-
export declare const overlayStack: OverlayStack;
|
|
24
|
-
export {};
|
package/src/OverlayStack.dev.js
DELETED
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const supportsPopover = "showPopover" in document.createElement("div");
|
|
3
|
-
class OverlayStack {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.root = document.body;
|
|
6
|
-
this.stack = [];
|
|
7
|
-
this.handleClick = (event) => {
|
|
8
|
-
if (!this.stack.length)
|
|
9
|
-
return;
|
|
10
|
-
let reverseIndex = -1;
|
|
11
|
-
let overlay = this.stack.at(reverseIndex);
|
|
12
|
-
if (overlay == null ? void 0 : overlay.shouldPreventClose())
|
|
13
|
-
return;
|
|
14
|
-
const composedPath = event.composedPath();
|
|
15
|
-
let shouldClose;
|
|
16
|
-
while (overlay && !shouldClose) {
|
|
17
|
-
shouldClose = overlay.shouldPreventClose() || !composedPath.find(
|
|
18
|
-
(el) => el === overlay || el === (overlay == null ? void 0 : overlay.triggerElement)
|
|
19
|
-
);
|
|
20
|
-
if (!shouldClose) {
|
|
21
|
-
reverseIndex -= 1;
|
|
22
|
-
overlay = this.stack.at(reverseIndex);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
if (!shouldClose || !overlay) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
this.closeOverlay(overlay);
|
|
29
|
-
let parentToClose = overlay.parentOverlayToForceClose;
|
|
30
|
-
while (parentToClose) {
|
|
31
|
-
this.closeOverlay(parentToClose);
|
|
32
|
-
parentToClose = parentToClose.parentOverlayToForceClose;
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
this.handleBeforetoggle = (event) => {
|
|
36
|
-
const { target, newState: open } = event;
|
|
37
|
-
if (open === "open")
|
|
38
|
-
return;
|
|
39
|
-
this.closeOverlay(target);
|
|
40
|
-
};
|
|
41
|
-
this.handleKeydown = (event) => {
|
|
42
|
-
if (event.code !== "Escape")
|
|
43
|
-
return;
|
|
44
|
-
if (supportsPopover)
|
|
45
|
-
return;
|
|
46
|
-
if (!this.stack.length)
|
|
47
|
-
return;
|
|
48
|
-
const last = this.stack.at(-1);
|
|
49
|
-
if (!last)
|
|
50
|
-
return;
|
|
51
|
-
this.closeOverlay(last);
|
|
52
|
-
};
|
|
53
|
-
this.bindEvents();
|
|
54
|
-
}
|
|
55
|
-
get document() {
|
|
56
|
-
return this.root.ownerDocument || document;
|
|
57
|
-
}
|
|
58
|
-
bindEvents() {
|
|
59
|
-
this.document.addEventListener("pointerup", this.handleClick);
|
|
60
|
-
this.document.addEventListener("keydown", this.handleKeydown);
|
|
61
|
-
}
|
|
62
|
-
closeOverlay(overlay) {
|
|
63
|
-
const overlayIndex = this.stack.indexOf(overlay);
|
|
64
|
-
if (overlayIndex > -1) {
|
|
65
|
-
this.stack.splice(overlayIndex, 1);
|
|
66
|
-
}
|
|
67
|
-
overlay.open = false;
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* When overlays are added manage the open state of exisiting overlays appropriately:
|
|
71
|
-
* - 'modal': should close other overlays
|
|
72
|
-
* - 'page': should close other overlays
|
|
73
|
-
* - 'hint': shouldn't close other overlays
|
|
74
|
-
* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
|
|
75
|
-
* - 'manual': shouldn't close other overlays
|
|
76
|
-
*/
|
|
77
|
-
add(overlay) {
|
|
78
|
-
if (this.stack.includes(overlay)) {
|
|
79
|
-
const overlayIndex = this.stack.indexOf(overlay);
|
|
80
|
-
if (overlayIndex > -1) {
|
|
81
|
-
this.stack.splice(overlayIndex, 1);
|
|
82
|
-
this.stack.push(overlay);
|
|
83
|
-
}
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
if (overlay.type === "auto" || overlay.type === "modal" || overlay.type === "page") {
|
|
87
|
-
const queryPathEventName = "sp-overlay-query-path";
|
|
88
|
-
const queryPathEvent = new Event(queryPathEventName, {
|
|
89
|
-
composed: true,
|
|
90
|
-
bubbles: true
|
|
91
|
-
});
|
|
92
|
-
overlay.addEventListener(
|
|
93
|
-
queryPathEventName,
|
|
94
|
-
(event) => {
|
|
95
|
-
const path = event.composedPath();
|
|
96
|
-
this.stack.forEach((overlayEl) => {
|
|
97
|
-
const inPath = path.find((el) => el === overlayEl);
|
|
98
|
-
if (!inPath && overlayEl.type !== "manual") {
|
|
99
|
-
this.closeOverlay(overlayEl);
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
},
|
|
103
|
-
{ once: true }
|
|
104
|
-
);
|
|
105
|
-
overlay.dispatchEvent(queryPathEvent);
|
|
106
|
-
} else if (overlay.type === "hint") {
|
|
107
|
-
this.stack.forEach((overlayEl) => {
|
|
108
|
-
if (overlayEl.type === "hint") {
|
|
109
|
-
this.closeOverlay(overlayEl);
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
requestAnimationFrame(() => {
|
|
114
|
-
this.stack.push(overlay);
|
|
115
|
-
overlay.addEventListener("beforetoggle", this.handleBeforetoggle, {
|
|
116
|
-
once: true
|
|
117
|
-
});
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
remove(overlay) {
|
|
121
|
-
this.closeOverlay(overlay);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
export const overlayStack = new OverlayStack();
|
|
125
|
-
//# sourceMappingURL=OverlayStack.dev.js.map
|