13935064496

Committed 18 Mar 2025 10:56PM CUT coverage: 97.833% (-0.1%) from 97.981%

Build # 13935064496

Build Type

Pull #5095

github

Committed by

web-flow

Commit Message

Merge c94c4fd27 into 762e236da

Pull Request Pull Request #5095: feat(accordion,base,theme): initial global system reporting

Run Details

5301 of 5604 branches covered (94.59%)

Branch coverage included in aggregate %.

107 of 128 new or added lines in 5 files covered. (83.59%)

43 existing lines in 4 files now uncovered.

33624 of 34183 relevant lines covered (98.36%)

703.37 hits per line

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

93.55

/packages/picker/src/InteractionController.ts

/*
Copyright 2024 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

import {
    ReactiveController,
    TemplateResult,
} from '@spectrum-web-components/base';
import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';
import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
import { PickerBase } from './Picker.js';

export enum InteractionTypes {
    'desktop',
    'mobile',
}
export const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';

export class InteractionController implements ReactiveController {
    abortController!: AbortController;

    public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';
    public pointerdownState = false;
    public enterKeydownOn: EventTarget | null = null;

    public container!: TemplateResult;

    get activelyOpening(): boolean {
        return false;
    }

    private _open = false;

    public get open(): boolean {
        return this._open;
    }

    /**
     * Set `open`
     */
    public set open(open: boolean) {
        if (this._open === open) return;
        this._open = open;

        if (this.overlay) {
            this.host.open = open;
            return;
        }

        // When there is no Overlay and `open` is moving to `true`, lazily import/create
        // an Overlay and apply that state to it.
        customElements
            .whenDefined('sp-overlay')
            .then(async (): Promise<void> => {
                const { Overlay } = await import(
                    '@spectrum-web-components/overlay/src/Overlay.js'
                );
                this.overlay = new Overlay();
                this.host.open = true;
                this.host.requestUpdate();
            });
        import('@spectrum-web-components/overlay/sp-overlay.js');
    }

    private _overlay!: AbstractOverlay;

    public get overlay(): AbstractOverlay {
        return this._overlay;
    }

    public set overlay(overlay: AbstractOverlay | undefined) {
        if (!overlay) return;
        if (this.overlay === overlay) return;
        this._overlay = overlay;
        this.initOverlay();
    }

    type!: InteractionTypes;

    constructor(
        public target: HTMLElement,
        public host: PickerBase
    ) {
        this.target = target;
        this.host = host;
        this.host.addController(this);
        this.init();
    }

    releaseDescription(): void {}

    protected handleBeforetoggle(
        event: Event & {
            target: Overlay;
            newState: 'open' | 'closed';
        }
    ): void {
        if (event.composedPath()[0] !== event.target) {
            return;
        }
        if (event.newState === 'closed') {
            if (this.preventNextToggle === 'no') {
                this.open = false;
            } else if (!this.pointerdownState) {
                // Prevent browser driven closure while opening the Picker
                // and the expected event series has not completed.
                this.overlay?.manuallyKeepOpen();
            }
        }
        if (!this.open) {
            this.host.optionsMenu.updateSelectedItemIndex();
            this.host.optionsMenu.closeDescendentOverlays();
        }
    }

    initOverlay(): void {
        if (this.overlay) {
            this.overlay.addEventListener('beforetoggle', (event: Event) => {
                this.handleBeforetoggle(
                    event as Event & {
                        target: Overlay;
                        newState: 'open' | 'closed';
                    }
                );
            });
            this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';
            this.overlay.triggerElement = this.host as HTMLElement;
            this.overlay.placement =
                this.host.isMobile.matches && !this.host.forcePopover
                    ? undefined
                    : this.host.placement;
            // We should not be applying open is set programmatically via the picker's open.property.
            // Focus should only be applied if a user action causes the menu to open. Otherwise,
            // we could be pulling focus from a user when an picker with an open menu loads.
            this.overlay.receivesFocus = 'false';
            this.overlay.willPreventClose =
                this.preventNextToggle !== 'no' && this.open;
            this.overlay.addEventListener(
                'slottable-request',
                this.host.handleSlottableRequest
            );
        }
    }

    public handlePointerdown(_event: PointerEvent): void {}

    public handleButtonFocus(event: FocusEvent): void {
        // When focus comes from a pointer event, and the related target is the Menu,
        // we don't want to reopen the Menu.
        if (
            this.preventNextToggle === 'maybe' &&
            event.relatedTarget === this.host.optionsMenu
        ) {
            this.preventNextToggle = 'yes';
        }
        if (this.preventNextToggle === 'no') this.host.close();
    }

    public handleActivate(_event: Event): void {}

    /* c8 ignore next 3 */
    init(): void {}

    abort(): void {
        this.releaseDescription();
        this.abortController?.abort();
    }

    hostConnected(): void {
        this.init();
        this.host.addEventListener('sp-closed', ()=> {
            if(!this.open && this.host.optionsMenu.matches(':focus-within') && !this.host.button.matches(':focus')) {
                this.host.button.focus();
            }
        });
    }

    hostDisconnected(): void {
        this.abortController?.abort();
    }

    public hostUpdated(): void {
        if (
            this.overlay &&
            this.host.dependencyManager.loaded &&
            this.host.open !== this.overlay.open
        ) {
            this.overlay.willPreventClose = this.preventNextToggle !== 'no';
            this.overlay.open = this.host.open;
        }
    }
}

1	/*	30✔
2	Copyright 2024 Adobe. All rights reserved.	30✔
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");	30✔
4	you may not use this file except in compliance with the License. You may obtain a copy	30✔
5	of the License at http://www.apache.org/licenses/LICENSE-2.0	30✔
6		30✔
7	Unless required by applicable law or agreed to in writing, software distributed under	30✔
8	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	30✔
9	OF ANY KIND, either express or implied. See the License for the specific language	30✔
10	governing permissions and limitations under the License.	30✔
11	*/	30✔
12		30✔
13	import {	30✔
14	ReactiveController,	30✔
15	TemplateResult,	30✔
16	} from '@spectrum-web-components/base';	30✔
17	import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';	30✔
18	import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';	30✔
19	import { PickerBase } from './Picker.js';	30✔
20		30✔
21	export enum InteractionTypes {	30✔
22	'desktop',	30✔
23	'mobile',	30✔
24	}	30✔
25	export const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';	30✔
26		30✔
27	export class InteractionController implements ReactiveController {	30✔
28	abortController!: AbortController;	30✔
29		30✔
30	public preventNextToggle: 'no' \| 'maybe' \| 'yes' = 'no';	30✔
31	public pointerdownState = false;	30✔
32	public enterKeydownOn: EventTarget \| null = null;	30✔
33		30✔
34	public container!: TemplateResult;	30✔
35		30✔
36	get activelyOpening(): boolean {	30✔
37	return false;	30✔
38	}	30✔
39		30✔
40	private _open = false;	30✔
41		30✔
42	public get open(): boolean {	30✔
43	return this._open;	539✔
44	}	539✔
45		30✔
46	/**	30✔
47	* Set `open`	30✔
48	*/	30✔
49	public set open(open: boolean) {	30✔
50	if (this._open === open) return;	1,929✔
51	this._open = open;	341✔
52		341✔
53	if (this.overlay) {	1,386✔
54	this.host.open = open;	187✔
55	return;	187✔
56	}	187✔
57		154✔
58	// When there is no Overlay and `open` is moving to `true`, lazily import/create	154✔
59	// an Overlay and apply that state to it.	154✔
60	customElements	154✔
61	.whenDefined('sp-overlay')	154✔
62	.then(async (): Promise<void> => {	154✔
63	const { Overlay } = await import(	154✔
64	'@spectrum-web-components/overlay/src/Overlay.js'	154✔
65	);	154✔
66	this.overlay = new Overlay();	154✔
67	this.host.open = true;	154✔
68	this.host.requestUpdate();	154✔
69	});	154✔
70	import('@spectrum-web-components/overlay/sp-overlay.js');	154✔
71	}	1,929✔
72		30✔
73	private _overlay!: AbstractOverlay;	30✔
74		30✔
75	public get overlay(): AbstractOverlay {	30✔
76	return this._overlay;	5,691✔
77	}	5,691✔
78		30✔
79	public set overlay(overlay: AbstractOverlay \| undefined) {	30✔
80	if (!overlay) return;	154!
81	if (this.overlay === overlay) return;	154!
82	this._overlay = overlay;	154✔
83	this.initOverlay();	154✔
84	}	154✔
85		30✔
86	type!: InteractionTypes;	30✔
87		30✔
88	constructor(	30✔
89	public target: HTMLElement,	502✔
90	public host: PickerBase	502✔
91	) {	502✔
92	this.target = target;	502✔
93	this.host = host;	502✔
94	this.host.addController(this);	502✔
95	this.init();	502✔
96	}	502✔
97		30✔
98	releaseDescription(): void {}	30✔
99		30✔
100	protected handleBeforetoggle(	30✔
101	event: Event & {	315✔
102	target: Overlay;	315✔
103	newState: 'open' \| 'closed';	315✔
104	}	315✔
105	): void {	315✔
106	if (event.composedPath()[0] !== event.target) {	315!
107	return;	×
108	}	×
109	if (event.newState === 'closed') {	315✔
110	if (this.preventNextToggle === 'no') {	157✔
111	this.open = false;	151✔
112	} else if (!this.pointerdownState) {	157✔
113	// Prevent browser driven closure while opening the Picker	×
114	// and the expected event series has not completed.	×
115	this.overlay?.manuallyKeepOpen();	×
116	}	×
117	}	157✔
118	if (!this.open) {	315✔
119	this.host.optionsMenu.updateSelectedItemIndex();	157✔
120	this.host.optionsMenu.closeDescendentOverlays();	157✔
121	}	157✔
122	}	315✔
123		30✔
124	initOverlay(): void {	30✔
125	if (this.overlay) {	154✔
126	this.overlay.addEventListener('beforetoggle', (event: Event) => {	154✔
127	this.handleBeforetoggle(	315✔
128	event as Event & {	315✔
129	target: Overlay;	315✔
130	newState: 'open' \| 'closed';	315✔
131	}	315✔
132	);	315✔
133	});	154✔
134	this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';	154✔
135	this.overlay.triggerElement = this.host as HTMLElement;	154✔
136	this.overlay.placement =	154✔
137	this.host.isMobile.matches && !this.host.forcePopover	154✔
138	? undefined	2✔
139	: this.host.placement;	152✔
140	// We should not be applying open is set programmatically via the picker's open.property.	154✔
141	// Focus should only be applied if a user action causes the menu to open. Otherwise,	154✔
142	// we could be pulling focus from a user when an picker with an open menu loads.	154✔
143	this.overlay.receivesFocus = 'false';	154✔
144	this.overlay.willPreventClose =	154✔
145	this.preventNextToggle !== 'no' && this.open;	154✔
146	this.overlay.addEventListener(	154✔
147	'slottable-request',	154✔
148	this.host.handleSlottableRequest	154✔
149	);	154✔
150	}	154✔
151	}	154✔
152		30✔
153	public handlePointerdown(_event: PointerEvent): void {}	30✔
154		30✔
155	public handleButtonFocus(event: FocusEvent): void {	30✔
156	// When focus comes from a pointer event, and the related target is the Menu,	206✔
157	// we don't want to reopen the Menu.	206✔
158	if (	206✔
159	this.preventNextToggle === 'maybe' &&	206✔
160	event.relatedTarget === this.host.optionsMenu	44✔
161	) {	206!
162	this.preventNextToggle = 'yes';	×
163	}	×
164	if (this.preventNextToggle === 'no') this.host.close();	206✔
165	}	206✔
166		30✔
167	public handleActivate(_event: Event): void {}	30✔
168		30✔
169	/* c8 ignore next 3 */	30✔
170	init(): void {}	30✔
171		30✔
172	abort(): void {	30✔
173	this.releaseDescription();	4✔
174	this.abortController?.abort();	4!
175	}	4✔
176		30✔
177	hostConnected(): void {	30✔
178	this.init();	508✔
179	this.host.addEventListener('sp-closed', ()=> {	508✔
180	if(!this.open && this.host.optionsMenu.matches(':focus-within') && !this.host.button.matches(':focus')) {	160✔
UNCOV 181	this.host.button.focus();	×
UNCOV 182	}	×
183	});	508✔
184	}	508✔
185		30✔
186	hostDisconnected(): void {	30✔
187	this.abortController?.abort();	508!
188	}	508✔
189		30✔
190	public hostUpdated(): void {	30✔
191	if (	1,149✔
192	this.overlay &&	1,149✔
193	this.host.dependencyManager.loaded &&	501✔
194	this.host.open !== this.overlay.open	493✔
195	) {	1,149✔
196	this.overlay.willPreventClose = this.preventNextToggle !== 'no';	272✔
197	this.overlay.open = this.host.open;	272✔
198	}	272✔
199	}	1,149✔
200	}	30✔

adobe / spectrum-web-components / 13935064496

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

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