@spectrum-web-components/overlay 1.1.0-beta.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -7
- package/overlay-trigger.d.ts +0 -6
- package/overlay-trigger.dev.js +0 -5
- package/overlay-trigger.dev.js.map +0 -7
- package/overlay-trigger.js +0 -2
- package/overlay-trigger.js.map +0 -7
- package/sp-overlay.d.ts +0 -6
- package/sp-overlay.dev.js +0 -5
- package/sp-overlay.dev.js.map +0 -7
- package/sp-overlay.js +0 -2
- package/sp-overlay.js.map +0 -7
- package/src/AbstractOverlay.d.ts +0 -72
- package/src/AbstractOverlay.dev.js +0 -234
- package/src/AbstractOverlay.dev.js.map +0 -7
- package/src/AbstractOverlay.js +0 -2
- package/src/AbstractOverlay.js.map +0 -7
- package/src/ClickController.d.ts +0 -14
- package/src/ClickController.dev.js +0 -42
- package/src/ClickController.dev.js.map +0 -7
- package/src/ClickController.js +0 -2
- package/src/ClickController.js.map +0 -7
- package/src/HoverController.d.ts +0 -20
- package/src/HoverController.dev.js +0 -153
- package/src/HoverController.dev.js.map +0 -7
- package/src/HoverController.js +0 -2
- package/src/HoverController.js.map +0 -7
- package/src/InteractionController.d.ts +0 -38
- package/src/InteractionController.dev.js +0 -90
- package/src/InteractionController.dev.js.map +0 -7
- package/src/InteractionController.js +0 -2
- package/src/InteractionController.js.map +0 -7
- package/src/LongpressController.d.ts +0 -21
- package/src/LongpressController.dev.js +0 -156
- package/src/LongpressController.dev.js.map +0 -7
- package/src/LongpressController.js +0 -2
- package/src/LongpressController.js.map +0 -7
- package/src/Overlay.d.ts +0 -134
- package/src/Overlay.dev.js +0 -534
- package/src/Overlay.dev.js.map +0 -7
- package/src/Overlay.js +0 -33
- package/src/Overlay.js.map +0 -7
- package/src/OverlayDialog.d.ts +0 -4
- package/src/OverlayDialog.dev.js +0 -139
- 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 -4
- package/src/OverlayNoPopover.dev.js +0 -117
- 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 -4
- 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 -44
- package/src/OverlayStack.dev.js +0 -160
- package/src/OverlayStack.dev.js.map +0 -7
- package/src/OverlayStack.js +0 -2
- package/src/OverlayStack.js.map +0 -7
- package/src/OverlayTrigger.d.ts +0 -52
- package/src/OverlayTrigger.dev.js +0 -243
- package/src/OverlayTrigger.dev.js.map +0 -7
- package/src/OverlayTrigger.js +0 -57
- package/src/OverlayTrigger.js.map +0 -7
- package/src/PlacementController.d.ts +0 -40
- package/src/PlacementController.dev.js +0 -212
- package/src/PlacementController.dev.js.map +0 -7
- package/src/PlacementController.js +0 -2
- package/src/PlacementController.js.map +0 -7
- package/src/VirtualTrigger.d.ts +0 -7
- package/src/VirtualTrigger.dev.js +0 -32
- package/src/VirtualTrigger.dev.js.map +0 -7
- package/src/VirtualTrigger.js +0 -2
- package/src/VirtualTrigger.js.map +0 -7
- package/src/events.d.ts +0 -23
- package/src/events.dev.js +0 -39
- package/src/events.dev.js.map +0 -7
- package/src/events.js +0 -2
- package/src/events.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/index.d.ts +0 -6
- package/src/index.dev.js +0 -8
- package/src/index.dev.js.map +0 -7
- package/src/index.js +0 -2
- package/src/index.js.map +0 -7
- package/src/loader.d.ts +0 -4
- package/src/loader.dev.js +0 -11
- package/src/loader.dev.js.map +0 -7
- package/src/loader.js +0 -2
- package/src/loader.js.map +0 -7
- package/src/overlay-events.d.ts +0 -11
- package/src/overlay-events.dev.js +0 -8
- package/src/overlay-events.dev.js.map +0 -7
- package/src/overlay-events.js +0 -2
- package/src/overlay-events.js.map +0 -7
- package/src/overlay-timer.d.ts +0 -22
- package/src/overlay-timer.dev.js +0 -72
- package/src/overlay-timer.dev.js.map +0 -7
- package/src/overlay-timer.js +0 -2
- package/src/overlay-timer.js.map +0 -7
- package/src/overlay-trigger-directive.d.ts +0 -26
- package/src/overlay-trigger-directive.dev.js +0 -87
- package/src/overlay-trigger-directive.dev.js.map +0 -7
- package/src/overlay-trigger-directive.js +0 -2
- package/src/overlay-trigger-directive.js.map +0 -7
- package/src/overlay-trigger.css.d.ts +0 -2
- package/src/overlay-trigger.css.dev.js +0 -7
- package/src/overlay-trigger.css.dev.js.map +0 -7
- package/src/overlay-trigger.css.js +0 -4
- package/src/overlay-trigger.css.js.map +0 -7
- package/src/overlay-types.d.ts +0 -50
- package/src/overlay-types.dev.js +0 -3
- package/src/overlay-types.dev.js.map +0 -7
- package/src/overlay-types.js +0 -2
- package/src/overlay-types.js.map +0 -7
- package/src/overlay.css.d.ts +0 -2
- package/src/overlay.css.dev.js +0 -7
- package/src/overlay.css.dev.js.map +0 -7
- package/src/overlay.css.js +0 -4
- package/src/overlay.css.js.map +0 -7
- package/src/slottable-request-directive.d.ts +0 -17
- package/src/slottable-request-directive.dev.js +0 -66
- package/src/slottable-request-directive.dev.js.map +0 -7
- package/src/slottable-request-directive.js +0 -2
- package/src/slottable-request-directive.js.map +0 -7
- package/src/slottable-request-event.d.ts +0 -12
- package/src/slottable-request-event.dev.js +0 -28
- package/src/slottable-request-event.dev.js.map +0 -7
- package/src/slottable-request-event.js +0 -2
- package/src/slottable-request-event.js.map +0 -7
- package/src/strategies.d.ts +0 -8
- package/src/strategies.dev.js +0 -10
- package/src/strategies.dev.js.map +0 -7
- package/src/strategies.js +0 -2
- package/src/strategies.js.map +0 -7
- package/stories/index.js +0 -40
- package/stories/index.js.map +0 -7
- package/stories/overlay-directive.stories.js +0 -324
- package/stories/overlay-directive.stories.js.map +0 -7
- package/stories/overlay-element.stories.js +0 -675
- package/stories/overlay-element.stories.js.map +0 -7
- package/stories/overlay-story-components.js +0 -338
- package/stories/overlay-story-components.js.map +0 -7
- package/stories/overlay.stories.js +0 -1397
- package/stories/overlay.stories.js.map +0 -7
- package/sync/overlay-trigger.d.ts +0 -6
- package/sync/overlay-trigger.dev.js +0 -6
- package/sync/overlay-trigger.dev.js.map +0 -7
- package/sync/overlay-trigger.js +0 -2
- package/sync/overlay-trigger.js.map +0 -7
- package/test/benchmark/basic-test.js +0 -40
- package/test/benchmark/basic-test.js.map +0 -7
- package/test/benchmark/directive-test.js +0 -43
- package/test/benchmark/directive-test.js.map +0 -7
- package/test/benchmark/element-test.js +0 -40
- package/test/benchmark/element-test.js.map +0 -7
- package/test/benchmark/lazy-test.js +0 -47
- package/test/benchmark/lazy-test.js.map +0 -7
- package/test/index.js +0 -605
- package/test/index.js.map +0 -7
- package/test/overlay-directive.test-vrt.js +0 -5
- package/test/overlay-directive.test-vrt.js.map +0 -7
- package/test/overlay-directive.test.js +0 -162
- package/test/overlay-directive.test.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 -936
- package/test/overlay-element.test.js.map +0 -7
- package/test/overlay-lifecycle.test.js +0 -139
- package/test/overlay-lifecycle.test.js.map +0 -7
- package/test/overlay-memory.test.js +0 -10
- package/test/overlay-memory.test.js.map +0 -7
- package/test/overlay-timer.test.js +0 -118
- package/test/overlay-timer.test.js.map +0 -7
- package/test/overlay-trigger-click.test.js +0 -164
- package/test/overlay-trigger-click.test.js.map +0 -7
- package/test/overlay-trigger-directive.test.js +0 -75
- package/test/overlay-trigger-directive.test.js.map +0 -7
- package/test/overlay-trigger-extended.test.js +0 -235
- package/test/overlay-trigger-extended.test.js.map +0 -7
- package/test/overlay-trigger-hover-click.test.js +0 -225
- package/test/overlay-trigger-hover-click.test.js.map +0 -7
- package/test/overlay-trigger-hover.test.js +0 -308
- package/test/overlay-trigger-hover.test.js.map +0 -7
- package/test/overlay-trigger-longpress.test.js +0 -549
- package/test/overlay-trigger-longpress.test.js.map +0 -7
- package/test/overlay-trigger-sync.test.js +0 -5
- package/test/overlay-trigger-sync.test.js.map +0 -7
- package/test/overlay-trigger.test.js +0 -5
- package/test/overlay-trigger.test.js.map +0 -7
- package/test/overlay-update.test.js +0 -28
- package/test/overlay-update.test.js.map +0 -7
- package/test/overlay-v1.test.js +0 -569
- package/test/overlay-v1.test.js.map +0 -7
- package/test/overlay.test-vrt.js +0 -5
- package/test/overlay.test-vrt.js.map +0 -7
- package/test/overlay.test.js +0 -776
- package/test/overlay.test.js.map +0 -7
|
@@ -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 type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nexport function OverlayNoPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithNoPopover extends constructor {\n protected override async managePopoverOpen(): Promise<void> {\n await this.managePosition();\n }\n\n protected override async manageDelay(\n targetOpenState: boolean\n ): 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 protected override async ensureOnDOM(\n _targetOpenState: boolean\n ): Promise<void> {\n // force the browser to paint\n document.body.offsetHeight;\n }\n\n protected override 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 el.open = targetOpenState;\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 if (el.matches(userFocusableSelector)) {\n focusEl = el;\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 el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n 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 OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n this.elements.forEach((el, index) => {\n guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithNoPopover;\n}\n"],
|
|
5
|
-
"mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OAAS,kBAAAC,MAAsB,sBAE/B,OACI,8BAAAC,EACA,aAAAC,EACA,gBAAAC,MACG,uBACP,OACI,2BAAAC,EACA,yBAAAC,EACA,qBAAAC,MACG,cAEP,OAAS,yBAAAC,MAA6B,kCAE/B,gBAAS,iBACZC,EACgC,CAChC,MAAMC,UAA6BD,CAAY,CAC3C,MAAyB,mBAAmC,CACxD,MAAM,KAAK,eAAe,CAC9B,CAEA,MAAyB,YACrBE,EACa,CACb,GAAIA,IAAoB,IAASA,IAAoB,KAAK,KAAM,CAC5DP,EAAa,MAAM,IAAI,EACvB,MACJ,CACI,KAAK,SACa,MAAMA,EAAa,UAAU,IAAI,IAE/C,KAAK,KAAO,CAACO,EAGzB,CAEA,MAAyB,YACrBC,EACa,CAEb,SAAS,KAAK,YAClB,CAEA,MAAyB,eACrBD,EAC2B,CAC3B,GAAI,KAAK,OAASA,EACd,OAAO,KAEX,IAAIE,EAAU,KACd,MAAMC,EAAQ,CAACC,EAAqBC,IAAkB,IAAY,CAC9D,GAAIL,IAAoB,KAAK,KACzB,OAGJ,GADAI,EAAG,KAAOJ,EACNK,IAAU,EAAG,CACb,MAAMC,EAAQN,EACRL,EACAD,EACN,KAAK,cAAc,IAAIY,CAAO,CAClC,CAQA,GAPIN,IAAoB,KAGpBI,EAAG,QAAQP,CAAqB,IAChCK,EAAUE,GAEdF,EAAUA,GAAWd,EAAiBgB,CAAE,EACpCF,GACA,OAEeE,EAAG,iBAAiB,MAAM,EAClC,QAASG,GAAS,CACpBL,IACDA,EAAUb,EAAwBkB,CAAI,EAE9C,CAAC,CACL,EACMC,EACF,CAACJ,EAAqBC,IACtB,SAA2B,CACvB,GAAI,KAAK,OAASL,EACd,OAEJ,MAAMS,EAAYT,EACZ,YACA,YAMN,GALAI,EAAG,cACC,IAAIR,EAAkBa,EAAW,KAAM,CACnC,YAAa,KAAK,IACtB,CAAC,CACL,EACIJ,EAAQ,EACR,OAEJ,MAAMK,EACF,KAAK,0BAA0BpB,EACnC,KAAK,cACD,IAAIM,EAAkBa,EAAW,KAAM,CACnC,YAAa,KAAK,KAClB,QAASC,CACb,CAAC,CACL,EACI,KAAK,gBAAkB,CAACA,GACvB,KAAK,eAA+B,cACjC,IAAId,EAAkBa,EAAW,KAAM,CACnC,YAAa,KAAK,KAClB,QAAS,EACb,CAAC,CACL,EAEJ,KAAK,MAAQT,EAAkB,SAAW,SAC1C,KAAK,YAAY,EAEjB,MAAMR,EAAU,EAChB,MAAMA,EAAU,EAEZQ,IAAoB,KAAK,MACzBA,IAAoB,IAEpB,KAAK,iBAAiB,CAE9B,EACJ,YAAK,SAAS,QAAQ,CAACI,EAAIC,IAAU,CACjCd,EACIa,EACAD,EAAMC,EAAIC,CAAK,EACfG,EAAOJ,EAAIC,CAAK,CACpB,CACJ,CAAC,EACMH,CACX,CACJ,CACA,OAAOH,CACX",
|
|
6
|
-
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "guaranteedAllTransitionend", "nextFrame", "overlayTimer", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "OverlayStateEvent", "userFocusableSelector", "constructor", "OverlayWithNoPopover", "targetOpenState", "_targetOpenState", "focusEl", "start", "el", "index", "event", "slot", "finish", "eventName", "hasVirtualTrigger"]
|
|
7
|
-
}
|
package/src/OverlayPopover.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { SpectrumElement } from '@spectrum-web-components/base';
|
|
2
|
-
import { Constructor } from './overlay-types.js';
|
|
3
|
-
import type { AbstractOverlay } from './AbstractOverlay.js';
|
|
4
|
-
export declare function OverlayPopover<T extends Constructor<AbstractOverlay>>(constructor: T): T & Constructor<SpectrumElement>;
|
|
@@ -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 { VirtualTrigger } from "./VirtualTrigger.dev.js";
|
|
7
|
-
import {
|
|
8
|
-
guaranteedAllTransitionend,
|
|
9
|
-
nextFrame,
|
|
10
|
-
overlayTimer
|
|
11
|
-
} from "./AbstractOverlay.dev.js";
|
|
12
|
-
import {
|
|
13
|
-
BeforetoggleClosedEvent,
|
|
14
|
-
BeforetoggleOpenEvent,
|
|
15
|
-
OverlayStateEvent
|
|
16
|
-
} from "./events.dev.js";
|
|
17
|
-
import { userFocusableSelector } from "@spectrum-web-components/shared";
|
|
18
|
-
const supportsOverlayAuto = CSS.supports("(overlay: auto)");
|
|
19
|
-
function isOpen(el) {
|
|
20
|
-
let popoverOpen = false;
|
|
21
|
-
try {
|
|
22
|
-
popoverOpen = el.matches(":popover-open");
|
|
23
|
-
} catch (error) {
|
|
24
|
-
}
|
|
25
|
-
let open = false;
|
|
26
|
-
try {
|
|
27
|
-
open = el.matches(":open");
|
|
28
|
-
} catch (error) {
|
|
29
|
-
}
|
|
30
|
-
return popoverOpen || open;
|
|
31
|
-
}
|
|
32
|
-
export function OverlayPopover(constructor) {
|
|
33
|
-
class OverlayWithPopover extends constructor {
|
|
34
|
-
async manageDelay(targetOpenState) {
|
|
35
|
-
if (targetOpenState === false || targetOpenState !== this.open) {
|
|
36
|
-
overlayTimer.close(this);
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
if (this.delayed) {
|
|
40
|
-
const cancelled = await overlayTimer.openTimer(this);
|
|
41
|
-
if (cancelled) {
|
|
42
|
-
this.open = !targetOpenState;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* A popover should be hidden _after_ it is no longer on top-layer because
|
|
48
|
-
* the position metrics will have changed from when it was originally positioned.
|
|
49
|
-
*/
|
|
50
|
-
async shouldHidePopover(targetOpenState) {
|
|
51
|
-
if (targetOpenState && this.open !== targetOpenState) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
const update = async ({
|
|
55
|
-
newState
|
|
56
|
-
} = {}) => {
|
|
57
|
-
if (newState === "open") {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
await this.placementController.resetOverlayPosition();
|
|
61
|
-
};
|
|
62
|
-
if (!isOpen(this.dialogEl)) {
|
|
63
|
-
update();
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
this.dialogEl.addEventListener("toggle", update, {
|
|
67
|
-
once: true
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
async shouldShowPopover(targetOpenState) {
|
|
71
|
-
let popoverOpen = false;
|
|
72
|
-
try {
|
|
73
|
-
popoverOpen = this.dialogEl.matches(":popover-open");
|
|
74
|
-
} catch (error) {
|
|
75
|
-
}
|
|
76
|
-
let open = false;
|
|
77
|
-
try {
|
|
78
|
-
open = this.dialogEl.matches(":open");
|
|
79
|
-
} catch (error) {
|
|
80
|
-
}
|
|
81
|
-
if (targetOpenState && this.open === targetOpenState && !popoverOpen && !open && this.isConnected) {
|
|
82
|
-
this.dialogEl.showPopover();
|
|
83
|
-
await this.managePosition();
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
async ensureOnDOM(targetOpenState) {
|
|
87
|
-
await nextFrame();
|
|
88
|
-
if (!supportsOverlayAuto) {
|
|
89
|
-
await this.shouldHidePopover(targetOpenState);
|
|
90
|
-
}
|
|
91
|
-
await this.shouldShowPopover(targetOpenState);
|
|
92
|
-
await nextFrame();
|
|
93
|
-
}
|
|
94
|
-
async makeTransition(targetOpenState) {
|
|
95
|
-
if (this.open !== targetOpenState) {
|
|
96
|
-
return null;
|
|
97
|
-
}
|
|
98
|
-
let focusEl = null;
|
|
99
|
-
const start = (el, index) => () => {
|
|
100
|
-
el.open = targetOpenState;
|
|
101
|
-
if (index === 0) {
|
|
102
|
-
const event = targetOpenState ? BeforetoggleOpenEvent : BeforetoggleClosedEvent;
|
|
103
|
-
this.dispatchEvent(new event());
|
|
104
|
-
}
|
|
105
|
-
if (!targetOpenState) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
if (el.matches(userFocusableSelector)) {
|
|
109
|
-
focusEl = el;
|
|
110
|
-
}
|
|
111
|
-
focusEl = focusEl || firstFocusableIn(el);
|
|
112
|
-
if (focusEl) {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
const childSlots = el.querySelectorAll("slot");
|
|
116
|
-
childSlots.forEach((slot) => {
|
|
117
|
-
if (!focusEl) {
|
|
118
|
-
focusEl = firstFocusableSlottedIn(slot);
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
};
|
|
122
|
-
const finish = (el, index) => async () => {
|
|
123
|
-
if (this.open !== targetOpenState) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
const eventName = targetOpenState ? "sp-opened" : "sp-closed";
|
|
127
|
-
if (index > 0) {
|
|
128
|
-
el.dispatchEvent(
|
|
129
|
-
new OverlayStateEvent(eventName, this, {
|
|
130
|
-
interaction: this.type,
|
|
131
|
-
publish: false
|
|
132
|
-
})
|
|
133
|
-
);
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
const reportChange = async () => {
|
|
137
|
-
if (this.open !== targetOpenState) {
|
|
138
|
-
return;
|
|
139
|
-
}
|
|
140
|
-
await nextFrame();
|
|
141
|
-
const hasVirtualTrigger = this.triggerElement instanceof VirtualTrigger;
|
|
142
|
-
this.dispatchEvent(
|
|
143
|
-
new OverlayStateEvent(eventName, this, {
|
|
144
|
-
interaction: this.type,
|
|
145
|
-
publish: hasVirtualTrigger
|
|
146
|
-
})
|
|
147
|
-
);
|
|
148
|
-
el.dispatchEvent(
|
|
149
|
-
new OverlayStateEvent(eventName, this, {
|
|
150
|
-
interaction: this.type,
|
|
151
|
-
publish: false
|
|
152
|
-
})
|
|
153
|
-
);
|
|
154
|
-
if (this.triggerElement && !hasVirtualTrigger) {
|
|
155
|
-
this.triggerElement.dispatchEvent(
|
|
156
|
-
new OverlayStateEvent(eventName, this, {
|
|
157
|
-
interaction: this.type,
|
|
158
|
-
publish: true
|
|
159
|
-
})
|
|
160
|
-
);
|
|
161
|
-
}
|
|
162
|
-
this.state = targetOpenState ? "opened" : "closed";
|
|
163
|
-
this.returnFocus();
|
|
164
|
-
await nextFrame();
|
|
165
|
-
await nextFrame();
|
|
166
|
-
if (targetOpenState === this.open && targetOpenState === false) {
|
|
167
|
-
this.requestSlottable();
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
if (this.open !== targetOpenState) {
|
|
171
|
-
return;
|
|
172
|
-
}
|
|
173
|
-
const open = isOpen(this.dialogEl);
|
|
174
|
-
if (targetOpenState !== true && open && this.isConnected) {
|
|
175
|
-
this.dialogEl.addEventListener(
|
|
176
|
-
"beforetoggle",
|
|
177
|
-
() => {
|
|
178
|
-
reportChange();
|
|
179
|
-
},
|
|
180
|
-
{ once: true }
|
|
181
|
-
);
|
|
182
|
-
this.dialogEl.hidePopover();
|
|
183
|
-
} else {
|
|
184
|
-
reportChange();
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
this.elements.forEach((el, index) => {
|
|
188
|
-
guaranteedAllTransitionend(
|
|
189
|
-
el,
|
|
190
|
-
start(el, index),
|
|
191
|
-
finish(el, index)
|
|
192
|
-
);
|
|
193
|
-
});
|
|
194
|
-
return focusEl;
|
|
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 type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.dev.js'\nimport { Constructor, OpenableElement } from './overlay-types.dev.js'\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.dev.js'\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.dev.js'\nimport type { AbstractOverlay } from './AbstractOverlay.dev.js'\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): 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 /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\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 await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override 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 el.open = targetOpenState;\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 if (el.matches(userFocusableSelector)) {\n focusEl = el;\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 OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\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 OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\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 guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/src/OverlayPopover.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";import{firstFocusableIn as E,firstFocusableSlottedIn as y}from"@spectrum-web-components/shared/src/first-focusable-in.js";import{VirtualTrigger as b}from"./VirtualTrigger.js";import{guaranteedAllTransitionend as w,nextFrame as l,overlayTimer as m}from"./AbstractOverlay.js";import{BeforetoggleClosedEvent as P,BeforetoggleOpenEvent as g,OverlayStateEvent as h}from"./events.js";import{userFocusableSelector as T}from"@spectrum-web-components/shared";const C=CSS.supports("(overlay: auto)");function f(a){let c=!1;try{c=a.matches(":popover-open")}catch(e){}let p=!1;try{p=a.matches(":open")}catch(e){}return c||p}export function OverlayPopover(a){class c extends a{async manageDelay(e){if(e===!1||e!==this.open){m.close(this);return}this.delayed&&await m.openTimer(this)&&(this.open=!e)}async shouldHidePopover(e){if(e&&this.open!==e)return;const o=async({newState:i}={})=>{i!=="open"&&await this.placementController.resetOverlayPosition()};if(!f(this.dialogEl)){o();return}this.dialogEl.addEventListener("toggle",o,{once:!0})}async shouldShowPopover(e){let o=!1;try{o=this.dialogEl.matches(":popover-open")}catch(u){}let i=!1;try{i=this.dialogEl.matches(":open")}catch(u){}e&&this.open===e&&!o&&!i&&this.isConnected&&(this.dialogEl.showPopover(),await this.managePosition())}async ensureOnDOM(e){await l(),C||await this.shouldHidePopover(e),await this.shouldShowPopover(e),await l()}async makeTransition(e){if(this.open!==e)return null;let o=null;const i=(t,s)=>()=>{if(t.open=e,s===0){const r=e?g:P;this.dispatchEvent(new r)}if(!e||(t.matches(T)&&(o=t),o=o||E(t),o))return;t.querySelectorAll("slot").forEach(r=>{o||(o=y(r))})},u=(t,s)=>async()=>{if(this.open!==e)return;const n=e?"sp-opened":"sp-closed";if(s>0){t.dispatchEvent(new h(n,this,{interaction:this.type,publish:!1}));return}const r=async()=>{if(this.open!==e)return;await l();const d=this.triggerElement instanceof b;this.dispatchEvent(new h(n,this,{interaction:this.type,publish:d})),t.dispatchEvent(new h(n,this,{interaction:this.type,publish:!1})),this.triggerElement&&!d&&this.triggerElement.dispatchEvent(new h(n,this,{interaction:this.type,publish:!0})),this.state=e?"opened":"closed",this.returnFocus(),await l(),await l(),e===this.open&&e===!1&&this.requestSlottable()};if(this.open!==e)return;const v=f(this.dialogEl);e!==!0&&v&&this.isConnected?(this.dialogEl.addEventListener("beforetoggle",()=>{r()},{once:!0}),this.dialogEl.hidePopover()):r()};return this.elements.forEach((t,s)=>{w(t,i(t,s),u(t,s))}),o}}return c}
|
|
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 type { SpectrumElement } from '@spectrum-web-components/base';\nimport { VirtualTrigger } from './VirtualTrigger.js';\nimport { Constructor, OpenableElement } from './overlay-types.js';\nimport {\n guaranteedAllTransitionend,\n nextFrame,\n overlayTimer,\n} from './AbstractOverlay.js';\nimport {\n BeforetoggleClosedEvent,\n BeforetoggleOpenEvent,\n OverlayStateEvent,\n} from './events.js';\nimport type { AbstractOverlay } from './AbstractOverlay.js';\nimport { userFocusableSelector } from '@spectrum-web-components/shared';\n\nconst supportsOverlayAuto = CSS.supports('(overlay: auto)');\n\nfunction isOpen(el: HTMLElement): boolean {\n let popoverOpen = false;\n try {\n popoverOpen = el.matches(':popover-open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n let open = false;\n try {\n open = el.matches(':open');\n // eslint-disable-next-line no-empty\n } catch (error) {}\n return popoverOpen || open;\n}\n\nexport function OverlayPopover<T extends Constructor<AbstractOverlay>>(\n constructor: T\n): T & Constructor<SpectrumElement> {\n class OverlayWithPopover extends constructor {\n protected override async manageDelay(\n targetOpenState: boolean\n ): 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 /**\n * A popover should be hidden _after_ it is no longer on top-layer because\n * the position metrics will have changed from when it was originally positioned.\n */\n private async shouldHidePopover(\n targetOpenState: boolean\n ): Promise<void> {\n if (targetOpenState && this.open !== targetOpenState) {\n return;\n }\n const update = async ({\n newState,\n }: { newState?: string } = {}): Promise<void> => {\n if (newState === 'open') {\n return;\n }\n // When in a parent Overlay, this Overlay may need to position itself\n // while closing in due to the parent _also_ closing which means the\n // location can no longer rely on \"top layer over transform\" math.\n await this.placementController.resetOverlayPosition();\n };\n if (!isOpen(this.dialogEl)) {\n // The means the Overlay was closed from the outside, it is already off of top-layer\n // so we need to position it in regards to this new state.\n update();\n return;\n }\n // `toggle` is an async event, so it's possible for this handler to run a frame late\n this.dialogEl.addEventListener('toggle', update as EventListener, {\n once: true,\n });\n }\n\n private async shouldShowPopover(\n targetOpenState: boolean\n ): Promise<void> {\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 await this.managePosition();\n }\n }\n\n protected override async ensureOnDOM(\n targetOpenState: boolean\n ): Promise<void> {\n await nextFrame();\n if (!supportsOverlayAuto) {\n await this.shouldHidePopover(targetOpenState);\n }\n await this.shouldShowPopover(targetOpenState);\n await nextFrame();\n }\n\n protected override 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 el.open = targetOpenState;\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 if (el.matches(userFocusableSelector)) {\n focusEl = el;\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 OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\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 OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: hasVirtualTrigger,\n })\n );\n el.dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: false,\n })\n );\n if (this.triggerElement && !hasVirtualTrigger) {\n (this.triggerElement as HTMLElement).dispatchEvent(\n new OverlayStateEvent(eventName, this, {\n interaction: this.type,\n publish: true,\n })\n );\n }\n this.state = targetOpenState ? 'opened' : 'closed';\n this.returnFocus();\n // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.\n await nextFrame();\n await nextFrame();\n if (\n targetOpenState === this.open &&\n targetOpenState === false\n ) {\n this.requestSlottable();\n }\n };\n if (this.open !== targetOpenState) {\n return;\n }\n const open = isOpen(this.dialogEl);\n if (targetOpenState !== true && open && this.isConnected) {\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 guaranteedAllTransitionend(\n el,\n start(el, index),\n finish(el, index)\n );\n });\n return focusEl;\n }\n }\n return OverlayWithPopover;\n}\n"],
|
|
5
|
-
"mappings": "aAWA,OACI,oBAAAA,EACA,2BAAAC,MACG,4DAEP,OAAS,kBAAAC,MAAsB,sBAE/B,OACI,8BAAAC,EACA,aAAAC,EACA,gBAAAC,MACG,uBACP,OACI,2BAAAC,EACA,yBAAAC,EACA,qBAAAC,MACG,cAEP,OAAS,yBAAAC,MAA6B,kCAEtC,MAAMC,EAAsB,IAAI,SAAS,iBAAiB,EAE1D,SAASC,EAAOC,EAA0B,CACtC,IAAIC,EAAc,GAClB,GAAI,CACAA,EAAcD,EAAG,QAAQ,eAAe,CAE5C,OAASE,EAAO,CAAC,CACjB,IAAIC,EAAO,GACX,GAAI,CACAA,EAAOH,EAAG,QAAQ,OAAO,CAE7B,OAASE,EAAO,CAAC,CACjB,OAAOD,GAAeE,CAC1B,CAEO,gBAAS,eACZC,EACgC,CAChC,MAAMC,UAA2BD,CAAY,CACzC,MAAyB,YACrBE,EACa,CACb,GAAIA,IAAoB,IAASA,IAAoB,KAAK,KAAM,CAC5Db,EAAa,MAAM,IAAI,EACvB,MACJ,CACI,KAAK,SACa,MAAMA,EAAa,UAAU,IAAI,IAE/C,KAAK,KAAO,CAACa,EAGzB,CAMA,MAAc,kBACVA,EACa,CACb,GAAIA,GAAmB,KAAK,OAASA,EACjC,OAEJ,MAAMC,EAAS,MAAO,CAClB,SAAAC,CACJ,EAA2B,CAAC,IAAqB,CACzCA,IAAa,QAMjB,MAAM,KAAK,oBAAoB,qBAAqB,CACxD,EACA,GAAI,CAACT,EAAO,KAAK,QAAQ,EAAG,CAGxBQ,EAAO,EACP,MACJ,CAEA,KAAK,SAAS,iBAAiB,SAAUA,EAAyB,CAC9D,KAAM,EACV,CAAC,CACL,CAEA,MAAc,kBACVD,EACa,CACb,IAAIL,EAAc,GAClB,GAAI,CACAA,EAAc,KAAK,SAAS,QAAQ,eAAe,CAEvD,OAASC,EAAO,CAAC,CACjB,IAAIC,EAAO,GACX,GAAI,CACAA,EAAO,KAAK,SAAS,QAAQ,OAAO,CAExC,OAASD,EAAO,CAAC,CAEbI,GACA,KAAK,OAASA,GACd,CAACL,GACD,CAACE,GACD,KAAK,cAEL,KAAK,SAAS,YAAY,EAC1B,MAAM,KAAK,eAAe,EAElC,CAEA,MAAyB,YACrBG,EACa,CACb,MAAMd,EAAU,EACXM,GACD,MAAM,KAAK,kBAAkBQ,CAAe,EAEhD,MAAM,KAAK,kBAAkBA,CAAe,EAC5C,MAAMd,EAAU,CACpB,CAEA,MAAyB,eACrBc,EAC2B,CAC3B,GAAI,KAAK,OAASA,EACd,OAAO,KAEX,IAAIG,EAAU,KACd,MAAMC,EAAQ,CAACV,EAAqBW,IAAkB,IAAY,CAE9D,GADAX,EAAG,KAAOM,EACNK,IAAU,EAAG,CACb,MAAMC,EAAQN,EACRX,EACAD,EACN,KAAK,cAAc,IAAIkB,CAAO,CAClC,CAQA,GAPI,CAACN,IAGDN,EAAG,QAAQH,CAAqB,IAChCY,EAAUT,GAEdS,EAAUA,GAAWrB,EAAiBY,CAAE,EACpCS,GACA,OAEeT,EAAG,iBAAiB,MAAM,EAClC,QAASa,GAAS,CACpBJ,IACDA,EAAUpB,EAAwBwB,CAAI,EAE9C,CAAC,CACL,EACMC,EACF,CAACd,EAAqBW,IACtB,SAA2B,CACvB,GAAI,KAAK,OAASL,EACd,OAEJ,MAAMS,EAAYT,EACZ,YACA,YACN,GAAIK,EAAQ,EAAG,CACXX,EAAG,cACC,IAAIJ,EAAkBmB,EAAW,KAAM,CACnC,YAAa,KAAK,KAClB,QAAS,EACb,CAAC,CACL,EACA,MACJ,CACA,MAAMC,EAAe,SAA2B,CAC5C,GAAI,KAAK,OAASV,EACd,OAEJ,MAAMd,EAAU,EAChB,MAAMyB,EACF,KAAK,0BAA0B3B,EACnC,KAAK,cACD,IAAIM,EAAkBmB,EAAW,KAAM,CACnC,YAAa,KAAK,KAClB,QAASE,CACb,CAAC,CACL,EACAjB,EAAG,cACC,IAAIJ,EAAkBmB,EAAW,KAAM,CACnC,YAAa,KAAK,KAClB,QAAS,EACb,CAAC,CACL,EACI,KAAK,gBAAkB,CAACE,GACvB,KAAK,eAA+B,cACjC,IAAIrB,EAAkBmB,EAAW,KAAM,CACnC,YAAa,KAAK,KAClB,QAAS,EACb,CAAC,CACL,EAEJ,KAAK,MAAQT,EAAkB,SAAW,SAC1C,KAAK,YAAY,EAEjB,MAAMd,EAAU,EAChB,MAAMA,EAAU,EAEZc,IAAoB,KAAK,MACzBA,IAAoB,IAEpB,KAAK,iBAAiB,CAE9B,EACA,GAAI,KAAK,OAASA,EACd,OAEJ,MAAMH,EAAOJ,EAAO,KAAK,QAAQ,EAC7BO,IAAoB,IAAQH,GAAQ,KAAK,aACzC,KAAK,SAAS,iBACV,eACA,IAAM,CACFa,EAAa,CACjB,EACA,CAAE,KAAM,EAAK,CACjB,EACA,KAAK,SAAS,YAAY,GAE1BA,EAAa,CAErB,EACJ,YAAK,SAAS,QAAQ,CAAChB,EAAIW,IAAU,CACjCpB,EACIS,EACAU,EAAMV,EAAIW,CAAK,EACfG,EAAOd,EAAIW,CAAK,CACpB,CACJ,CAAC,EACMF,CACX,CACJ,CACA,OAAOJ,CACX",
|
|
6
|
-
"names": ["firstFocusableIn", "firstFocusableSlottedIn", "VirtualTrigger", "guaranteedAllTransitionend", "nextFrame", "overlayTimer", "BeforetoggleClosedEvent", "BeforetoggleOpenEvent", "OverlayStateEvent", "userFocusableSelector", "supportsOverlayAuto", "isOpen", "el", "popoverOpen", "error", "open", "constructor", "OverlayWithPopover", "targetOpenState", "update", "newState", "focusEl", "start", "index", "event", "slot", "finish", "eventName", "reportChange", "hasVirtualTrigger"]
|
|
7
|
-
}
|
package/src/OverlayStack.d.ts
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { Overlay } from './Overlay.js';
|
|
2
|
-
declare class OverlayStack {
|
|
3
|
-
private get document();
|
|
4
|
-
private pointerdownPath?;
|
|
5
|
-
private lastOverlay?;
|
|
6
|
-
private root;
|
|
7
|
-
stack: Overlay[];
|
|
8
|
-
constructor();
|
|
9
|
-
bindEvents(): void;
|
|
10
|
-
private closeOverlay;
|
|
11
|
-
/**
|
|
12
|
-
* Cach the `pointerdownTarget` for later testing
|
|
13
|
-
*
|
|
14
|
-
* @param event {ClickEvent}
|
|
15
|
-
*/
|
|
16
|
-
handlePointerdown: (event: Event) => void;
|
|
17
|
-
/**
|
|
18
|
-
* Close all overlays that are not ancestors of this click event
|
|
19
|
-
*
|
|
20
|
-
* @param event {ClickEvent}
|
|
21
|
-
*/
|
|
22
|
-
handlePointerup: () => void;
|
|
23
|
-
handleBeforetoggle: (event: Event) => void;
|
|
24
|
-
private handleKeydown;
|
|
25
|
-
/**
|
|
26
|
-
* Get an array of Overlays that all share the same trigger element.
|
|
27
|
-
*
|
|
28
|
-
* @param triggerElement {HTMLELement}
|
|
29
|
-
* @returns {Overlay[]}
|
|
30
|
-
*/
|
|
31
|
-
overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[];
|
|
32
|
-
/**
|
|
33
|
-
* When overlays are added manage the open state of exisiting overlays appropriately:
|
|
34
|
-
* - 'modal': should close other overlays
|
|
35
|
-
* - 'page': should close other overlays
|
|
36
|
-
* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
|
|
37
|
-
* - 'manual': shouldn't close other overlays
|
|
38
|
-
* - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
|
|
39
|
-
*/
|
|
40
|
-
add(overlay: Overlay): void;
|
|
41
|
-
remove(overlay: Overlay): void;
|
|
42
|
-
}
|
|
43
|
-
export declare const overlayStack: OverlayStack;
|
|
44
|
-
export {};
|
package/src/OverlayStack.dev.js
DELETED
|
@@ -1,160 +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
|
-
/**
|
|
8
|
-
* Cach the `pointerdownTarget` for later testing
|
|
9
|
-
*
|
|
10
|
-
* @param event {ClickEvent}
|
|
11
|
-
*/
|
|
12
|
-
this.handlePointerdown = (event) => {
|
|
13
|
-
this.pointerdownPath = event.composedPath();
|
|
14
|
-
this.lastOverlay = this.stack[this.stack.length - 1];
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* Close all overlays that are not ancestors of this click event
|
|
18
|
-
*
|
|
19
|
-
* @param event {ClickEvent}
|
|
20
|
-
*/
|
|
21
|
-
this.handlePointerup = () => {
|
|
22
|
-
const composedPath = this.pointerdownPath;
|
|
23
|
-
this.pointerdownPath = void 0;
|
|
24
|
-
if (!this.stack.length) return;
|
|
25
|
-
if (!(composedPath == null ? void 0 : composedPath.length)) return;
|
|
26
|
-
const lastIndex = this.stack.length - 1;
|
|
27
|
-
const nonAncestorOverlays = this.stack.filter((overlay, i) => {
|
|
28
|
-
const inStack = composedPath.find(
|
|
29
|
-
(el) => (
|
|
30
|
-
// The Overlay is in the stack
|
|
31
|
-
el === overlay || // The Overlay trigger is in the stack and the Overlay is a "hint"
|
|
32
|
-
el === (overlay == null ? void 0 : overlay.triggerElement) && "hint" === (overlay == null ? void 0 : overlay.type) || // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
|
|
33
|
-
// `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
|
|
34
|
-
i === lastIndex && overlay !== this.lastOverlay && overlay.triggerInteraction === "longpress"
|
|
35
|
-
)
|
|
36
|
-
);
|
|
37
|
-
return !inStack && !overlay.shouldPreventClose() && overlay.type !== "manual";
|
|
38
|
-
});
|
|
39
|
-
nonAncestorOverlays.reverse();
|
|
40
|
-
nonAncestorOverlays.forEach((overlay) => {
|
|
41
|
-
this.closeOverlay(overlay);
|
|
42
|
-
let parentToClose = overlay.parentOverlayToForceClose;
|
|
43
|
-
while (parentToClose) {
|
|
44
|
-
this.closeOverlay(parentToClose);
|
|
45
|
-
parentToClose = parentToClose.parentOverlayToForceClose;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
this.handleBeforetoggle = (event) => {
|
|
50
|
-
const { target, newState: open } = event;
|
|
51
|
-
if (open === "open") return;
|
|
52
|
-
this.closeOverlay(target);
|
|
53
|
-
};
|
|
54
|
-
this.handleKeydown = (event) => {
|
|
55
|
-
if (event.code !== "Escape") return;
|
|
56
|
-
if (!this.stack.length) return;
|
|
57
|
-
const last = this.stack[this.stack.length - 1];
|
|
58
|
-
if ((last == null ? void 0 : last.type) === "page") {
|
|
59
|
-
event.preventDefault();
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
if (supportsPopover) return;
|
|
63
|
-
if ((last == null ? void 0 : last.type) === "manual") {
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
if (!last) return;
|
|
67
|
-
this.closeOverlay(last);
|
|
68
|
-
};
|
|
69
|
-
this.bindEvents();
|
|
70
|
-
}
|
|
71
|
-
get document() {
|
|
72
|
-
return this.root.ownerDocument || document;
|
|
73
|
-
}
|
|
74
|
-
bindEvents() {
|
|
75
|
-
this.document.addEventListener("pointerdown", this.handlePointerdown);
|
|
76
|
-
this.document.addEventListener("pointerup", this.handlePointerup);
|
|
77
|
-
this.document.addEventListener("keydown", this.handleKeydown);
|
|
78
|
-
}
|
|
79
|
-
closeOverlay(overlay) {
|
|
80
|
-
const overlayIndex = this.stack.indexOf(overlay);
|
|
81
|
-
if (overlayIndex > -1) {
|
|
82
|
-
this.stack.splice(overlayIndex, 1);
|
|
83
|
-
}
|
|
84
|
-
overlay.open = false;
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Get an array of Overlays that all share the same trigger element.
|
|
88
|
-
*
|
|
89
|
-
* @param triggerElement {HTMLELement}
|
|
90
|
-
* @returns {Overlay[]}
|
|
91
|
-
*/
|
|
92
|
-
overlaysByTriggerElement(triggerElement) {
|
|
93
|
-
return this.stack.filter(
|
|
94
|
-
(overlay) => overlay.triggerElement === triggerElement
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* When overlays are added manage the open state of exisiting overlays appropriately:
|
|
99
|
-
* - 'modal': should close other overlays
|
|
100
|
-
* - 'page': should close other overlays
|
|
101
|
-
* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
|
|
102
|
-
* - 'manual': shouldn't close other overlays
|
|
103
|
-
* - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
|
|
104
|
-
*/
|
|
105
|
-
add(overlay) {
|
|
106
|
-
if (this.stack.includes(overlay)) {
|
|
107
|
-
const overlayIndex = this.stack.indexOf(overlay);
|
|
108
|
-
if (overlayIndex > -1) {
|
|
109
|
-
this.stack.splice(overlayIndex, 1);
|
|
110
|
-
this.stack.push(overlay);
|
|
111
|
-
}
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
if (overlay.type === "auto" || overlay.type === "modal" || overlay.type === "page") {
|
|
115
|
-
const queryPathEventName = "sp-overlay-query-path";
|
|
116
|
-
const queryPathEvent = new Event(queryPathEventName, {
|
|
117
|
-
composed: true,
|
|
118
|
-
bubbles: true
|
|
119
|
-
});
|
|
120
|
-
overlay.addEventListener(
|
|
121
|
-
queryPathEventName,
|
|
122
|
-
(event) => {
|
|
123
|
-
const path = event.composedPath();
|
|
124
|
-
this.stack.forEach((overlayEl) => {
|
|
125
|
-
const inPath = path.find((el) => el === overlayEl);
|
|
126
|
-
if (!inPath && overlayEl.type !== "manual") {
|
|
127
|
-
this.closeOverlay(overlayEl);
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
},
|
|
131
|
-
{ once: true }
|
|
132
|
-
);
|
|
133
|
-
overlay.dispatchEvent(queryPathEvent);
|
|
134
|
-
} else if (overlay.type === "hint") {
|
|
135
|
-
const hasPrevious = this.stack.some((overlayEl) => {
|
|
136
|
-
return overlayEl.type !== "manual" && overlayEl.triggerElement && overlayEl.triggerElement === overlay.triggerElement;
|
|
137
|
-
});
|
|
138
|
-
if (hasPrevious) {
|
|
139
|
-
overlay.open = false;
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
this.stack.forEach((overlayEl) => {
|
|
143
|
-
if (overlayEl.type === "hint") {
|
|
144
|
-
this.closeOverlay(overlayEl);
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
|
-
requestAnimationFrame(() => {
|
|
149
|
-
this.stack.push(overlay);
|
|
150
|
-
overlay.addEventListener("beforetoggle", this.handleBeforetoggle, {
|
|
151
|
-
once: true
|
|
152
|
-
});
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
remove(overlay) {
|
|
156
|
-
this.closeOverlay(overlay);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
export const overlayStack = new OverlayStack();
|
|
160
|
-
//# sourceMappingURL=OverlayStack.dev.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayStack.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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\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*/\n\nimport { Overlay } from './Overlay.dev.js'\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private pointerdownPath?: EventTarget[];\n\n private lastOverlay?: Overlay;\n\n private root: HTMLElement = document.body;\n\n stack: Overlay[] = [];\n\n constructor() {\n this.bindEvents();\n }\n\n bindEvents(): void {\n this.document.addEventListener('pointerdown', this.handlePointerdown);\n this.document.addEventListener('pointerup', this.handlePointerup);\n this.document.addEventListener('keydown', this.handleKeydown);\n }\n\n private closeOverlay(overlay: Overlay): void {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n }\n overlay.open = false;\n }\n\n /**\n * Cach the `pointerdownTarget` for later testing\n *\n * @param event {ClickEvent}\n */\n handlePointerdown = (event: Event): void => {\n this.pointerdownPath = event.composedPath();\n this.lastOverlay = this.stack[this.stack.length - 1];\n };\n\n /**\n * Close all overlays that are not ancestors of this click event\n *\n * @param event {ClickEvent}\n */\n handlePointerup = (): void => {\n // Test against the composed path in `pointerdown` in case the visitor moved their\n // pointer during the course of the interaction.\n // Ensure that this value is cleared even if the work in this method goes undone.\n const composedPath = this.pointerdownPath;\n this.pointerdownPath = undefined;\n if (!this.stack.length) return;\n if (!composedPath?.length) return;\n\n const lastIndex = this.stack.length - 1;\n const nonAncestorOverlays = this.stack.filter((overlay, i) => {\n const inStack = composedPath.find(\n (el) =>\n // The Overlay is in the stack\n el === overlay ||\n // The Overlay trigger is in the stack and the Overlay is a \"hint\"\n (el === overlay?.triggerElement &&\n 'hint' === overlay?.type) ||\n // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a\n // `triggerInteraction` of \"longpress\", meaning it was opened by this poitner interaction\n (i === lastIndex &&\n overlay !== this.lastOverlay &&\n overlay.triggerInteraction === 'longpress')\n );\n return (\n !inStack &&\n !overlay.shouldPreventClose() &&\n overlay.type !== 'manual'\n );\n }) as Overlay[];\n nonAncestorOverlays.reverse();\n nonAncestorOverlays.forEach((overlay) => {\n this.closeOverlay(overlay);\n let parentToClose = overlay.parentOverlayToForceClose;\n while (parentToClose) {\n this.closeOverlay(parentToClose);\n parentToClose = parentToClose.parentOverlayToForceClose;\n }\n });\n };\n\n handleBeforetoggle = (event: Event): void => {\n const { target, newState: open } = event as Event & {\n newState: string;\n };\n if (open === 'open') return;\n this.closeOverlay(target as Overlay);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Escape') return;\n if (!this.stack.length) return;\n const last = this.stack[this.stack.length - 1];\n if (last?.type === 'page') {\n event.preventDefault();\n return;\n }\n if (supportsPopover) return;\n if (last?.type === 'manual') {\n // Manual Overlays should not close on \"light dismiss\".\n return;\n }\n\n if (!last) return;\n this.closeOverlay(last);\n };\n\n /**\n * Get an array of Overlays that all share the same trigger element.\n *\n * @param triggerElement {HTMLELement}\n * @returns {Overlay[]}\n */\n overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {\n return this.stack.filter(\n (overlay) => overlay.triggerElement === triggerElement\n );\n }\n\n /**\n * When overlays are added manage the open state of exisiting overlays appropriately:\n * - 'modal': should close other overlays\n * - 'page': should close other overlays\n * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n * - 'manual': shouldn't close other overlays\n * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger\n */\n add(overlay: Overlay): void {\n if (this.stack.includes(overlay)) {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n this.stack.push(overlay);\n }\n return;\n }\n if (\n overlay.type === 'auto' ||\n overlay.type === 'modal' ||\n overlay.type === 'page'\n ) {\n // manage closing open overlays\n const queryPathEventName = 'sp-overlay-query-path';\n const queryPathEvent = new Event(queryPathEventName, {\n composed: true,\n bubbles: true,\n });\n overlay.addEventListener(\n queryPathEventName,\n (event: Event) => {\n const path = event.composedPath();\n this.stack.forEach((overlayEl) => {\n const inPath = path.find((el) => el === overlayEl);\n if (!inPath && overlayEl.type !== 'manual') {\n this.closeOverlay(overlayEl);\n }\n });\n },\n { once: true }\n );\n overlay.dispatchEvent(queryPathEvent);\n } else if (overlay.type === 'hint') {\n const hasPrevious = this.stack.some((overlayEl) => {\n return (\n overlayEl.type !== 'manual' &&\n overlayEl.triggerElement &&\n overlayEl.triggerElement === overlay.triggerElement\n );\n });\n if (hasPrevious) {\n overlay.open = false;\n return;\n }\n this.stack.forEach((overlayEl) => {\n if (overlayEl.type === 'hint') {\n this.closeOverlay(overlayEl);\n }\n });\n }\n requestAnimationFrame(() => {\n this.stack.push(overlay);\n overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n once: true,\n });\n });\n }\n\n remove(overlay: Overlay): void {\n this.closeOverlay(overlay);\n }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/src/OverlayStack.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";const h="showPopover"in document.createElement("div");class c{constructor(){this.root=document.body;this.stack=[];this.handlePointerdown=t=>{this.pointerdownPath=t.composedPath(),this.lastOverlay=this.stack[this.stack.length-1]};this.handlePointerup=()=>{const t=this.pointerdownPath;if(this.pointerdownPath=void 0,!this.stack.length||!(t!=null&&t.length))return;const e=this.stack.length-1,s=this.stack.filter((n,i)=>!t.find(a=>a===n||a===(n==null?void 0:n.triggerElement)&&(n==null?void 0:n.type)==="hint"||i===e&&n!==this.lastOverlay&&n.triggerInteraction==="longpress")&&!n.shouldPreventClose()&&n.type!=="manual");s.reverse(),s.forEach(n=>{this.closeOverlay(n);let i=n.parentOverlayToForceClose;for(;i;)this.closeOverlay(i),i=i.parentOverlayToForceClose})};this.handleBeforetoggle=t=>{const{target:e,newState:s}=t;s!=="open"&&this.closeOverlay(e)};this.handleKeydown=t=>{if(t.code!=="Escape"||!this.stack.length)return;const e=this.stack[this.stack.length-1];if((e==null?void 0:e.type)==="page"){t.preventDefault();return}h||(e==null?void 0:e.type)!=="manual"&&e&&this.closeOverlay(e)};this.bindEvents()}get document(){return this.root.ownerDocument||document}bindEvents(){this.document.addEventListener("pointerdown",this.handlePointerdown),this.document.addEventListener("pointerup",this.handlePointerup),this.document.addEventListener("keydown",this.handleKeydown)}closeOverlay(t){const e=this.stack.indexOf(t);e>-1&&this.stack.splice(e,1),t.open=!1}overlaysByTriggerElement(t){return this.stack.filter(e=>e.triggerElement===t)}add(t){if(this.stack.includes(t)){const e=this.stack.indexOf(t);e>-1&&(this.stack.splice(e,1),this.stack.push(t));return}if(t.type==="auto"||t.type==="modal"||t.type==="page"){const e="sp-overlay-query-path",s=new Event(e,{composed:!0,bubbles:!0});t.addEventListener(e,n=>{const i=n.composedPath();this.stack.forEach(r=>{!i.find(o=>o===r)&&r.type!=="manual"&&this.closeOverlay(r)})},{once:!0}),t.dispatchEvent(s)}else if(t.type==="hint"){if(this.stack.some(s=>s.type!=="manual"&&s.triggerElement&&s.triggerElement===t.triggerElement)){t.open=!1;return}this.stack.forEach(s=>{s.type==="hint"&&this.closeOverlay(s)})}requestAnimationFrame(()=>{this.stack.push(t),t.addEventListener("beforetoggle",this.handleBeforetoggle,{once:!0})})}remove(t){this.closeOverlay(t)}}export const overlayStack=new c;
|
|
2
|
-
//# sourceMappingURL=OverlayStack.js.map
|
package/src/OverlayStack.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["OverlayStack.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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\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*/\n\nimport { Overlay } from './Overlay.js';\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n private get document(): Document {\n return this.root.ownerDocument /* c8 ignore next */ || document;\n }\n\n private pointerdownPath?: EventTarget[];\n\n private lastOverlay?: Overlay;\n\n private root: HTMLElement = document.body;\n\n stack: Overlay[] = [];\n\n constructor() {\n this.bindEvents();\n }\n\n bindEvents(): void {\n this.document.addEventListener('pointerdown', this.handlePointerdown);\n this.document.addEventListener('pointerup', this.handlePointerup);\n this.document.addEventListener('keydown', this.handleKeydown);\n }\n\n private closeOverlay(overlay: Overlay): void {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n }\n overlay.open = false;\n }\n\n /**\n * Cach the `pointerdownTarget` for later testing\n *\n * @param event {ClickEvent}\n */\n handlePointerdown = (event: Event): void => {\n this.pointerdownPath = event.composedPath();\n this.lastOverlay = this.stack[this.stack.length - 1];\n };\n\n /**\n * Close all overlays that are not ancestors of this click event\n *\n * @param event {ClickEvent}\n */\n handlePointerup = (): void => {\n // Test against the composed path in `pointerdown` in case the visitor moved their\n // pointer during the course of the interaction.\n // Ensure that this value is cleared even if the work in this method goes undone.\n const composedPath = this.pointerdownPath;\n this.pointerdownPath = undefined;\n if (!this.stack.length) return;\n if (!composedPath?.length) return;\n\n const lastIndex = this.stack.length - 1;\n const nonAncestorOverlays = this.stack.filter((overlay, i) => {\n const inStack = composedPath.find(\n (el) =>\n // The Overlay is in the stack\n el === overlay ||\n // The Overlay trigger is in the stack and the Overlay is a \"hint\"\n (el === overlay?.triggerElement &&\n 'hint' === overlay?.type) ||\n // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a\n // `triggerInteraction` of \"longpress\", meaning it was opened by this poitner interaction\n (i === lastIndex &&\n overlay !== this.lastOverlay &&\n overlay.triggerInteraction === 'longpress')\n );\n return (\n !inStack &&\n !overlay.shouldPreventClose() &&\n overlay.type !== 'manual'\n );\n }) as Overlay[];\n nonAncestorOverlays.reverse();\n nonAncestorOverlays.forEach((overlay) => {\n this.closeOverlay(overlay);\n let parentToClose = overlay.parentOverlayToForceClose;\n while (parentToClose) {\n this.closeOverlay(parentToClose);\n parentToClose = parentToClose.parentOverlayToForceClose;\n }\n });\n };\n\n handleBeforetoggle = (event: Event): void => {\n const { target, newState: open } = event as Event & {\n newState: string;\n };\n if (open === 'open') return;\n this.closeOverlay(target as Overlay);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.code !== 'Escape') return;\n if (!this.stack.length) return;\n const last = this.stack[this.stack.length - 1];\n if (last?.type === 'page') {\n event.preventDefault();\n return;\n }\n if (supportsPopover) return;\n if (last?.type === 'manual') {\n // Manual Overlays should not close on \"light dismiss\".\n return;\n }\n\n if (!last) return;\n this.closeOverlay(last);\n };\n\n /**\n * Get an array of Overlays that all share the same trigger element.\n *\n * @param triggerElement {HTMLELement}\n * @returns {Overlay[]}\n */\n overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {\n return this.stack.filter(\n (overlay) => overlay.triggerElement === triggerElement\n );\n }\n\n /**\n * When overlays are added manage the open state of exisiting overlays appropriately:\n * - 'modal': should close other overlays\n * - 'page': should close other overlays\n * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n * - 'manual': shouldn't close other overlays\n * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger\n */\n add(overlay: Overlay): void {\n if (this.stack.includes(overlay)) {\n const overlayIndex = this.stack.indexOf(overlay);\n if (overlayIndex > -1) {\n this.stack.splice(overlayIndex, 1);\n this.stack.push(overlay);\n }\n return;\n }\n if (\n overlay.type === 'auto' ||\n overlay.type === 'modal' ||\n overlay.type === 'page'\n ) {\n // manage closing open overlays\n const queryPathEventName = 'sp-overlay-query-path';\n const queryPathEvent = new Event(queryPathEventName, {\n composed: true,\n bubbles: true,\n });\n overlay.addEventListener(\n queryPathEventName,\n (event: Event) => {\n const path = event.composedPath();\n this.stack.forEach((overlayEl) => {\n const inPath = path.find((el) => el === overlayEl);\n if (!inPath && overlayEl.type !== 'manual') {\n this.closeOverlay(overlayEl);\n }\n });\n },\n { once: true }\n );\n overlay.dispatchEvent(queryPathEvent);\n } else if (overlay.type === 'hint') {\n const hasPrevious = this.stack.some((overlayEl) => {\n return (\n overlayEl.type !== 'manual' &&\n overlayEl.triggerElement &&\n overlayEl.triggerElement === overlay.triggerElement\n );\n });\n if (hasPrevious) {\n overlay.open = false;\n return;\n }\n this.stack.forEach((overlayEl) => {\n if (overlayEl.type === 'hint') {\n this.closeOverlay(overlayEl);\n }\n });\n }\n requestAnimationFrame(() => {\n this.stack.push(overlay);\n overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n once: true,\n });\n });\n }\n\n remove(overlay: Overlay): void {\n this.closeOverlay(overlay);\n }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["supportsPopover", "OverlayStack", "event", "composedPath", "lastIndex", "nonAncestorOverlays", "overlay", "el", "parentToClose", "target", "open", "last", "overlayIndex", "triggerElement", "queryPathEventName", "queryPathEvent", "path", "overlayEl"]
|
|
7
|
-
}
|
package/src/OverlayTrigger.d.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
-
import type { Placement } from '@floating-ui/dom';
|
|
3
|
-
import type { Overlay } from './Overlay.js';
|
|
4
|
-
import type { OverlayTriggerInteractions } from './overlay-types';
|
|
5
|
-
export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
|
|
6
|
-
/**
|
|
7
|
-
* @element overlay-trigger
|
|
8
|
-
*
|
|
9
|
-
* @slot trigger - The content that will trigger the various overlays
|
|
10
|
-
* @slot hover-content - The content that will be displayed on hover
|
|
11
|
-
* @slot click-content - The content that will be displayed on click
|
|
12
|
-
* @slot longpress-content - The content that will be displayed on click
|
|
13
|
-
*
|
|
14
|
-
* @fires sp-opened - Announces that the overlay has been opened
|
|
15
|
-
* @fires sp-closed - Announces that the overlay has been closed
|
|
16
|
-
*/
|
|
17
|
-
export declare class OverlayTrigger extends SpectrumElement {
|
|
18
|
-
static get styles(): CSSResultArray;
|
|
19
|
-
content: string;
|
|
20
|
-
/**
|
|
21
|
-
* @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
|
|
22
|
-
* @attr
|
|
23
|
-
*/
|
|
24
|
-
placement?: Placement;
|
|
25
|
-
type?: OverlayTriggerInteractions;
|
|
26
|
-
offset: number;
|
|
27
|
-
open?: OverlayContentTypes;
|
|
28
|
-
disabled: boolean;
|
|
29
|
-
receivesFocus: 'true' | 'false' | 'auto';
|
|
30
|
-
private clickContent;
|
|
31
|
-
private clickPlacement?;
|
|
32
|
-
private longpressContent;
|
|
33
|
-
private longpressPlacement?;
|
|
34
|
-
private hoverContent;
|
|
35
|
-
private hoverPlacement?;
|
|
36
|
-
private targetContent;
|
|
37
|
-
clickOverlayElement: Overlay;
|
|
38
|
-
longpressOverlayElement: Overlay;
|
|
39
|
-
hoverOverlayElement: Overlay;
|
|
40
|
-
private getAssignedElementsFromSlot;
|
|
41
|
-
private handleTriggerContent;
|
|
42
|
-
private handleSlotContent;
|
|
43
|
-
private handleBeforetoggle;
|
|
44
|
-
protected update(changes: PropertyValues): void;
|
|
45
|
-
protected renderSlot(name: string): TemplateResult;
|
|
46
|
-
protected renderClickOverlay(): TemplateResult;
|
|
47
|
-
protected renderHoverOverlay(): TemplateResult;
|
|
48
|
-
protected renderLongpressOverlay(): TemplateResult;
|
|
49
|
-
protected render(): TemplateResult;
|
|
50
|
-
protected updated(changes: PropertyValues): void;
|
|
51
|
-
protected getUpdateComplete(): Promise<boolean>;
|
|
52
|
-
}
|