• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

adobe / spectrum-web-components / 14134706573

28 Mar 2025 05:38PM CUT coverage: 98.002%. Remained the same
14134706573

Pull #5288

github

web-flow
Merge 1b2cce3e8 into 54e4c93de
Pull Request #5288: chore: update dependency @spectrum-css/button to v14.1.3

5327 of 5623 branches covered (94.74%)

Branch coverage included in aggregate %.

33711 of 34211 relevant lines covered (98.54%)

647.99 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.81
/packages/overlay/src/OverlayStack.ts
1
/*
44✔
2
Copyright 2023 Adobe. All rights reserved.
44✔
3
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44✔
4
you may not use this file except in compliance with the License. You may obtain a copy
44✔
5
of the License at http://www.apache.org/licenses/LICENSE-2.0
44✔
6
Unless required by applicable law or agreed to in writing, software distributed under
44✔
7
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
44✔
8
OF ANY KIND, either express or implied. See the License for the specific language
44✔
9
governing permissions and limitations under the License.
44✔
10
*/
44✔
11

44✔
12
import { Overlay } from './Overlay.js';
44✔
13

44✔
14
const supportsPopover = 'showPopover' in document.createElement('div');
44✔
15

44✔
16
class OverlayStack {
44✔
17
    private get document(): Document {
44✔
18
        return this.root.ownerDocument /* c8 ignore next */ || document;
44✔
19
    }
44✔
20

44✔
21
    private pointerdownPath?: EventTarget[];
44✔
22

44✔
23
    private lastOverlay?: Overlay;
44✔
24

44✔
25
    private root: HTMLElement = document.body;
44✔
26

44✔
27
    stack: Overlay[] = [];
44✔
28

44✔
29
    constructor() {
44✔
30
        this.bindEvents();
44✔
31
    }
44✔
32

44✔
33
    bindEvents(): void {
44✔
34
        this.document.addEventListener('pointerdown', this.handlePointerdown);
44✔
35
        this.document.addEventListener('pointerup', this.handlePointerup);
44✔
36
        this.document.addEventListener('keydown', this.handleKeydown);
44✔
37
    }
44✔
38

44✔
39
    private closeOverlay(overlay: Overlay): void {
44✔
40
        const overlayIndex = this.stack.indexOf(overlay);
536✔
41
        if (overlayIndex > -1) {
536✔
42
            this.stack.splice(overlayIndex, 1);
460✔
43
        }
460✔
44
        overlay.open = false;
536✔
45
    }
536✔
46

44✔
47
    /**
44✔
48
     * Cach the `pointerdownTarget` for later testing
44✔
49
     *
44✔
50
     * @param event {ClickEvent}
44✔
51
     */
44✔
52
    handlePointerdown = (event: Event): void => {
44✔
53
        this.pointerdownPath = event.composedPath();
183✔
54
        this.lastOverlay = this.stack[this.stack.length - 1];
183✔
55
    };
183✔
56

44✔
57
    /**
44✔
58
     * Close all overlays that are not ancestors of this click event
44✔
59
     *
44✔
60
     * @param event {ClickEvent}
44✔
61
     */
44✔
62
    handlePointerup = (): void => {
44✔
63
        // Test against the composed path in `pointerdown` in case the visitor moved their
544✔
64
        // pointer during the course of the interaction.
544✔
65
        // Ensure that this value is cleared even if the work in this method goes undone.
544✔
66
        const composedPath = this.pointerdownPath;
544✔
67
        this.pointerdownPath = undefined;
544✔
68
        if (!this.stack.length) return;
544✔
69
        if (!composedPath?.length) return;
544✔
70
        const lastOverlay = this.lastOverlay;
53✔
71
        this.lastOverlay = undefined;
53✔
72

53✔
73
        const lastIndex = this.stack.length - 1;
53✔
74
        const nonAncestorOverlays = this.stack.filter((overlay, i) => {
53✔
75
            const inStack = composedPath.find(
53✔
76
                (el) =>
53✔
77
                    // The Overlay is in the stack
657✔
78
                    el === overlay ||
657✔
79
                    // The Overlay trigger is in the stack and the Overlay is a "hint"
613✔
80
                    (el === overlay?.triggerElement &&
613!
81
                        'hint' === overlay?.type) ||
5!
82
                    // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
609✔
83
                    // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
609✔
84
                    (i === lastIndex &&
609✔
85
                        overlay !== lastOverlay &&
609✔
86
                        overlay.triggerInteraction === 'longpress')
2✔
87
            );
53✔
88
            return (
53✔
89
                !inStack &&
53✔
90
                !overlay.shouldPreventClose() &&
3✔
91
                overlay.type !== 'manual' &&
3✔
92
                // Don't close if this overlay is modal and not on top of the overlay stack.
2✔
93
                !(overlay.type === 'modal' && lastOverlay !== overlay)
2✔
94
            );
53✔
95
        }) as Overlay[];
53✔
96
        nonAncestorOverlays.reverse();
53✔
97
        nonAncestorOverlays.forEach((overlay) => {
53✔
98
            this.closeOverlay(overlay);
2✔
99
            let parentToClose = overlay.parentOverlayToForceClose;
2✔
100
            while (parentToClose) {
2✔
101
                this.closeOverlay(parentToClose);
×
102
                parentToClose = parentToClose.parentOverlayToForceClose;
×
103
            }
×
104
        });
53✔
105
    };
544✔
106

44✔
107
    handleBeforetoggle = (event: Event): void => {
44✔
108
        const { target, newState: open } = event as Event & {
458✔
109
            newState: string;
458✔
110
        };
458✔
111
        if (open === 'open') return;
458✔
112
        this.closeOverlay(target as Overlay);
31✔
113
    };
458✔
114

44✔
115
    private handleKeydown = (event: KeyboardEvent): void => {
44✔
116
        if (event.code !== 'Escape') return;
352✔
117
        if (!this.stack.length) return;
31✔
118
        const last = this.stack[this.stack.length - 1];
17✔
119
        if (last?.type === 'page') {
352!
120
            event.preventDefault();
1✔
121
            return;
1✔
122
        }
1✔
123
        if (last?.type === 'manual') {
352!
124
            // Manual overlays should close on "Escape" key, but not when losing focus or interacting with other parts of the page.
1✔
125
            this.closeOverlay(last);
1✔
126
            return;
1✔
127
        }
1✔
128
        if (supportsPopover) return;
15!
129
        if (!last) return;
×
130
        this.closeOverlay(last);
×
131
    };
352✔
132

44✔
133
    /**
44✔
134
     * Get an array of Overlays that all share the same trigger element.
44✔
135
     *
44✔
136
     * @param triggerElement {HTMLELement}
44✔
137
     * @returns {Overlay[]}
44✔
138
     */
44✔
139
    overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {
44✔
140
        return this.stack.filter(
×
141
            (overlay) => overlay.triggerElement === triggerElement
×
142
        );
×
143
    }
×
144

44✔
145
    /**
44✔
146
     * When overlays are added manage the open state of exisiting overlays appropriately:
44✔
147
     * - 'modal': should close other non-'modal' and non-'manual' overlays
44✔
148
     * - 'page': should close other non-'modal' and non-'manual' overlays
44✔
149
     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
44✔
150
     * - 'manual': shouldn't close other overlays
44✔
151
     * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
44✔
152
     */
44✔
153
    add(overlay: Overlay): void {
44✔
154
        if (this.stack.includes(overlay)) {
467✔
155
            const overlayIndex = this.stack.indexOf(overlay);
4✔
156
            if (overlayIndex > -1) {
4✔
157
                this.stack.splice(overlayIndex, 1);
4✔
158
                this.stack.push(overlay);
4✔
159
            }
4✔
160
            return;
4✔
161
        }
4✔
162
        if (
463✔
163
            overlay.type === 'auto' ||
463✔
164
            overlay.type === 'modal' ||
140✔
165
            overlay.type === 'page'
99✔
166
        ) {
467✔
167
            // manage closing open overlays
373✔
168
            const queryPathEventName = 'sp-overlay-query-path';
373✔
169
            const queryPathEvent = new Event(queryPathEventName, {
373✔
170
                composed: true,
373✔
171
                bubbles: true,
373✔
172
            });
373✔
173
            overlay.addEventListener(
373✔
174
                queryPathEventName,
373✔
175
                (event: Event) => {
373✔
176
                    const path = event.composedPath();
373✔
177
                    this.stack.forEach((overlayEl) => {
373✔
178
                        const inPath = path.find((el) => el === overlayEl);
58✔
179
                        if (
58✔
180
                            !inPath &&
58✔
181
                            overlayEl.type !== 'manual' &&
33✔
182
                            overlayEl.type !== 'modal'
31✔
183
                        ) {
58✔
184
                            this.closeOverlay(overlayEl);
30✔
185
                        }
30✔
186
                    });
373✔
187
                },
373✔
188
                { once: true }
373✔
189
            );
373✔
190
            overlay.dispatchEvent(queryPathEvent);
373✔
191
        } else if (overlay.type === 'hint') {
467✔
192
            const hasPrevious = this.stack.some((overlayEl) => {
80✔
193
                return (
12✔
194
                    overlayEl.type !== 'manual' &&
12✔
195
                    overlayEl.triggerElement &&
12✔
196
                    overlayEl.triggerElement === overlay.triggerElement
10✔
197
                );
12✔
198
            });
80✔
199
            if (hasPrevious) {
80!
200
                overlay.open = false;
×
201
                return;
×
202
            }
×
203
            this.stack.forEach((overlayEl) => {
80✔
204
                if (overlayEl.type === 'hint') {
12✔
205
                    this.closeOverlay(overlayEl);
6✔
206
                }
6✔
207
            });
80✔
208
        }
80✔
209
        requestAnimationFrame(() => {
463✔
210
            this.stack.push(overlay);
463✔
211
            overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {
463✔
212
                once: true,
463✔
213
            });
463✔
214
        });
463✔
215
    }
467✔
216

44✔
217
    remove(overlay: Overlay): void {
44✔
218
        this.closeOverlay(overlay);
466✔
219
    }
466✔
220
}
44✔
221

44✔
222
export const overlayStack = new OverlayStack();
44✔
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc