10697209507

Committed 04 Sep 2024 07:36AM UTC coverage: 98.11% (-0.09%) from 98.2%

Build # 10697209507

Build Type

Pull #4720

github

Committed by

web-flow

Commit Message

Merge 95674cd40 into c76f3f54f

Pull Request Pull Request #4720: fix(menu): allow menu-item to support arbitrary element as the submenu root

Run Details

5157 of 5424 branches covered (95.08%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

27 existing lines in 2 files now uncovered.

32483 of 32941 relevant lines covered (98.61%)

373.29 hits per line

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

94.44

/packages/menu/src/MenuItem.ts

/*
Copyright 2020 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 {
    CSSResultArray,
    html,
    nothing,
    PropertyValues,
    TemplateResult,
} from '@spectrum-web-components/base';
import {
    ObserveSlotPresence,
    ObserveSlotText,
    randomID,
} from '@spectrum-web-components/shared';
import {
    property,
    query,
} from '@spectrum-web-components/base/src/decorators.js';

import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';

import menuItemStyles from './menu-item.css.js';
import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
import type { Menu } from './Menu.js';
import { MutationController } from '@lit-labs/observers/mutation-controller.js';
import type { Overlay } from '@spectrum-web-components/overlay';
import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';

/**
 * Duration during which a pointing device can leave an `<sp-menu-item>` element
 * and return to it or to the submenu opened from it before closing that submenu.
 **/
const POINTERLEAVE_TIMEOUT = 100;

type MenuCascadeItem = {
    hadFocusRoot: boolean;
    ancestorWithSelects?: HTMLElement;
};

export class MenuItemAddedOrUpdatedEvent extends Event {
    constructor(item: MenuItem) {
        super('sp-menu-item-added-or-updated', {
            bubbles: true,
            composed: true,
        });
        this.clear(item);
    }
    clear(item: MenuItem): void {
        this._item = item;
        this.currentAncestorWithSelects = undefined;
        item.menuData = {
            cleanupSteps: [],
            focusRoot: undefined,
            selectionRoot: undefined,
            parentMenu: undefined,
        };
        this.menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();
    }
    menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();
    get item(): MenuItem {
        return this._item;
    }
    private _item!: MenuItem;
    currentAncestorWithSelects?: Menu;
}

export type MenuItemChildren = { icon: Element[]; content: Node[] };

/**
 * @element sp-menu-item
 *
 * @slot - text content to display within the Menu Item
 * @slot description - description to be placed below the label of the Menu Item
 * @slot icon - icon element to be placed at the start of the Menu Item
 * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
 * @slot submenu - content placed in a submenu
 * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships
 */
export class MenuItem extends LikeAnchor(
    ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
) {
    public static override get styles(): CSSResultArray {
        return [menuItemStyles, checkmarkStyles, chevronStyles];
    }

    abortControllerSubmenu!: AbortController;

    @property({ type: Boolean, reflect: true })
    public active = false;

    private dependencyManager = new DependencyManagerController(this);

    @property({ type: Boolean, reflect: true })
    public focused = false;

    @property({ type: Boolean, reflect: true })
    public selected = false;

    @property({ type: String })
    public get value(): string {
        return this._value || this.itemText;
    }

    public set value(value: string) {
        if (value === this._value) {
            return;
        }
        this._value = value || '';
        if (this._value) {
            this.setAttribute('value', this._value);
        } else {
            this.removeAttribute('value');
        }
    }

    private _value = '';

    /**
     * @private
     */
    public get itemText(): string {
        return this.itemChildren.content.reduce(
            (acc, node) => acc + (node.textContent || '').trim(),
            ''
        );
    }

    @property({ type: Boolean, reflect: true, attribute: 'has-submenu' })
    public hasSubmenu = false;

    @query('slot:not([name])')
    contentSlot!: HTMLSlotElement;

    @query('slot[name="icon"]')
    iconSlot!: HTMLSlotElement;

    @property({
        type: Boolean,
        reflect: true,
        attribute: 'no-wrap',
        hasChanged() {
            return false;
        },
    })
    public noWrap = false;

    @query('.anchor')
    private anchorElement!: HTMLAnchorElement;

    @query('sp-overlay')
    public overlayElement!: Overlay;

    private submenuElement?: HTMLElement;

    public override get focusElement(): HTMLElement {
        return this;
    }

    protected get hasIcon(): boolean {
        return this.slotContentIsPresent;
    }

    public get itemChildren(): MenuItemChildren {
        if (!this.iconSlot || !this.contentSlot) {
            return {
                icon: [],
                content: [],
            };
        }
        if (this._itemChildren) {
            return this._itemChildren;
        }
        const icon = this.iconSlot.assignedElements().map((element) => {
            const newElement = element.cloneNode(true) as HTMLElement;
            newElement.removeAttribute('slot');
            newElement.classList.toggle('icon');
            return newElement;
        });
        const content = this.contentSlot
            .assignedNodes()
            .map((node) => node.cloneNode(true));
        this._itemChildren = { icon, content };

        return this._itemChildren;
    }

    private _itemChildren?: MenuItemChildren;

    constructor() {
        super();
        this.addEventListener('click', this.handleClickCapture, {
            capture: true,
        });

        new MutationController(this, {
            config: {
                characterData: true,
                childList: true,
                subtree: true,
            },
            callback: (mutations) => {
                const isSubmenu = mutations.every(
                    (mutation) =>
                        (mutation.target as HTMLElement).slot === 'submenu'
                );
                if (isSubmenu) {
                    return;
                }
                this.breakItemChildrenCache();
            },
        });
    }

    @property({ type: Boolean, reflect: true })
    public open = false;

    public override click(): void {
        if (this.disabled) {
            return;
        }

        if (this.shouldProxyClick()) {
            return;
        }

        super.click();
    }

    private handleClickCapture(event: Event): void | boolean {
        if (this.disabled) {
            event.preventDefault();
            event.stopImmediatePropagation();
            event.stopPropagation();
            return false;
        }
    }

    private handleSlottableRequest = (event: SlottableRequestEvent): void => {
        this.submenuElement?.dispatchEvent(
            new SlottableRequestEvent(event.name, event.data)
        );
    };

    private proxyFocus = (): void => {
        this.focus();
    };

    private shouldProxyClick(): boolean {
        let handled = false;
        if (this.anchorElement) {
            this.anchorElement.click();
            handled = true;
        }
        return handled;
    }

    protected breakItemChildrenCache(): void {
        this._itemChildren = undefined;
        this.triggerUpdate();
    }

    protected renderSubmenu(): TemplateResult {
        const slot = html`
            <slot
                name="submenu"
                @slotchange=${this.manageSubmenu}
                @sp-menu-item-added-or-updated=${{
                    handleEvent: (event: MenuItemAddedOrUpdatedEvent) => {
                        event.clear(event.item);
                    },
                    capture: true,
                }}
                @focusin=${(event: Event) => event.stopPropagation()}
            ></slot>
        `;
        if (!this.hasSubmenu) {
            return slot;
        }
        this.dependencyManager.add('sp-overlay');
        this.dependencyManager.add('sp-popover');
        import('@spectrum-web-components/overlay/sp-overlay.js');
        import('@spectrum-web-components/popover/sp-popover.js');
        return html`
            <sp-overlay
                .triggerElement=${this as HTMLElement}
                ?disabled=${!this.hasSubmenu}
                ?open=${this.hasSubmenu &&
                this.open &&
                this.dependencyManager.loaded}
                .placement=${this.isLTR ? 'right-start' : 'left-start'}
                .offset=${[-10, -5] as [number, number]}
                .type=${'auto'}
                @close=${(event: Event) => event.stopPropagation()}
                @slottable-request=${this.handleSlottableRequest}
            >
                <sp-popover
                    @change=${(event: Event) => {
                        this.handleSubmenuChange(event);
                        this.open = false;
                    }}
                    @pointerenter=${this.handleSubmenuPointerenter}
                    @pointerleave=${this.handleSubmenuPointerleave}
                    @sp-menu-item-added-or-updated=${(event: Event) =>
                        event.stopPropagation()}
                >
                    ${slot}
                </sp-popover>
            </sp-overlay>
            <sp-icon-chevron100
                class="spectrum-UIIcon-ChevronRight100 chevron icon"
            ></sp-icon-chevron100>
        `;
    }

    protected override render(): TemplateResult {
        return html`
            ${this.selected
                ? html`
                      <sp-icon-checkmark100
                          id="selected"
                          class="spectrum-UIIcon-Checkmark100 
                            icon 
                            checkmark
                            ${this.hasIcon
                              ? 'checkmark--withAdjacentIcon'
                              : ''}"
                      ></sp-icon-checkmark100>
                  `
                : nothing}
            <slot name="icon"></slot>
            <div id="label">
                <slot id="slot"></slot>
            </div>
            <slot name="description"></slot>
            <slot name="value"></slot>
            ${this.href && this.href.length > 0
                ? super.renderAnchor({
                      id: 'button',
                      ariaHidden: true,
                      className: 'button anchor hidden',
                  })
                : nothing}
            ${this.renderSubmenu()}
        `;
    }

    protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {
        this.submenuElement = event.target.assignedElements({
            flatten: true,
        })[0] as HTMLElement;
        this.hasSubmenu = !!this.submenuElement;
        if (this.hasSubmenu) {
            this.setAttribute('aria-haspopup', 'true');
        }
    }

    private handlePointerdown(event: PointerEvent): void {
        if (event.target === this && this.hasSubmenu && this.open) {
            this.addEventListener('focus', this.handleSubmenuFocus, {
                once: true,
            });
            this.overlayElement.addEventListener(
                'beforetoggle',
                this.handleBeforetoggle
            );
        }
    }

    protected override firstUpdated(changes: PropertyValues): void {
        super.firstUpdated(changes);
        this.setAttribute('tabindex', '-1');
        this.addEventListener('pointerdown', this.handlePointerdown);
        this.addEventListener('pointerenter', this.closeOverlaysForRoot);
        if (!this.hasAttribute('id')) {
            this.id = `sp-menu-item-${randomID()}`;
        }
    }

    protected closeOverlaysForRoot(): void {
        if (this.open) return;
        this.menuData.parentMenu?.closeDescendentOverlays();
    }

    protected handleSubmenuClick(event: Event): void {
        if (event.composedPath().includes(this.overlayElement)) {
            return;
        }
        this.openOverlay();
    }

    protected handleSubmenuFocus(): void {
        requestAnimationFrame(() => {
            // Wait till after `closeDescendentOverlays` has happened in Menu
            // to reopen (keep open) the direct descendent of this Menu Item
            this.overlayElement.open = this.open;
        });
    }

    protected handleBeforetoggle = (event: Event): void => {
        if ((event as Event & { newState: string }).newState === 'closed') {
            this.open = true;
            this.overlayElement.manuallyKeepOpen();
            this.overlayElement.removeEventListener(
                'beforetoggle',
                this.handleBeforetoggle
            );
        }
    };

    protected handlePointerenter(): void {
        if (this.leaveTimeout) {
            clearTimeout(this.leaveTimeout);
            delete this.leaveTimeout;
            return;
        }
        this.openOverlay();
    }

    protected leaveTimeout?: ReturnType<typeof setTimeout>;
    protected recentlyLeftChild = false;

    protected handlePointerleave(): void {
        if (this.open && !this.recentlyLeftChild) {
            this.leaveTimeout = setTimeout(() => {
                delete this.leaveTimeout;
                this.open = false;
            }, POINTERLEAVE_TIMEOUT);
        }
    }

    /**
     * When there is a `change` event in the submenu for this item
     * then we "click" this item to cascade the selection up the
     * menu tree allowing all submenus between the initial selection
     * and the root of the tree to have their selection changes and
     * be closed.
     */
    protected handleSubmenuChange(event: Event): void {
        event.stopPropagation();
        this.menuData.selectionRoot?.selectOrToggleItem(this);
    }

    protected handleSubmenuPointerenter(): void {
        this.recentlyLeftChild = true;
    }

    protected async handleSubmenuPointerleave(): Promise<void> {
        requestAnimationFrame(() => {
            this.recentlyLeftChild = false;
        });
    }

    protected handleSubmenuOpen(event: Event): void {
        this.focused = false;
        const parentOverlay = event.composedPath().find((el) => {
            return (
                el !== this.overlayElement &&
                (el as HTMLElement).localName === 'sp-overlay'
            );
        }) as Overlay;
        this.overlayElement.parentOverlayToForceClose = parentOverlay;
    }

    protected cleanup(): void {
        this.open = false;
        this.active = false;
    }

    public async openOverlay(): Promise<void> {
        if (!this.hasSubmenu || this.open || this.disabled) {
            return;
        }
        this.open = true;
        this.active = true;
        this.setAttribute('aria-expanded', 'true');
        this.addEventListener('sp-closed', this.cleanup, {
            once: true,
        });
    }

    updateAriaSelected(): void {
        const role = this.getAttribute('role');
        if (role === 'option') {
            this.setAttribute(
                'aria-selected',
                this.selected ? 'true' : 'false'
            );
        } else if (role === 'menuitemcheckbox' || role === 'menuitemradio') {
            this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
        }
    }

    public setRole(role: string): void {
        this.setAttribute('role', role);
        this.updateAriaSelected();
    }

    protected override updated(changes: PropertyValues<this>): void {
        super.updated(changes);
        if (
            changes.has('label') &&
            (this.label || typeof changes.get('label') !== 'undefined')
        ) {
            this.setAttribute('aria-label', this.label || '');
        }
        if (
            changes.has('active') &&
            (this.active || typeof changes.get('active') !== 'undefined')
        ) {
            if (this.active) {
                this.menuData.selectionRoot?.closeDescendentOverlays();
            }
        }
        if (this.anchorElement) {
            this.anchorElement.addEventListener('focus', this.proxyFocus);
            this.anchorElement.tabIndex = -1;
        }
        if (changes.has('selected')) {
            this.updateAriaSelected();
        }
        if (
            changes.has('hasSubmenu') &&
            (this.hasSubmenu ||
                typeof changes.get('hasSubmenu') !== 'undefined')
        ) {
            if (this.hasSubmenu) {
                this.abortControllerSubmenu = new AbortController();
                const options = { signal: this.abortControllerSubmenu.signal };
                this.addEventListener(
                    'click',
                    this.handleSubmenuClick,
                    options
                );
                this.addEventListener(
                    'pointerenter',
                    this.handlePointerenter,
                    options
                );
                this.addEventListener(
                    'pointerleave',
                    this.handlePointerleave,
                    options
                );
                this.addEventListener(
                    'sp-opened',
                    this.handleSubmenuOpen,
                    options
                );
            } else {
                this.abortControllerSubmenu?.abort();
            }
        }
    }

    public override connectedCallback(): void {
        super.connectedCallback();
        this.triggerUpdate();
    }

    _parentElement!: HTMLElement;

    public override disconnectedCallback(): void {
        this.menuData.cleanupSteps.forEach((removal) => removal(this));
        this.menuData = {
            focusRoot: undefined,
            parentMenu: undefined,
            selectionRoot: undefined,
            cleanupSteps: [],
        };
        super.disconnectedCallback();
    }

    private willDispatchUpdate = false;

    public async triggerUpdate(): Promise<void> {
        if (this.willDispatchUpdate) {
            return;
        }
        this.willDispatchUpdate = true;
        await new Promise((ready) => requestAnimationFrame(ready));
        this.dispatchUpdate();
    }

    public dispatchUpdate(): void {
        if (!this.isConnected) {
            return;
        }
        this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
        this.willDispatchUpdate = false;
    }

    public menuData: {
        focusRoot?: Menu;
        parentMenu?: Menu;
        selectionRoot?: Menu;
        cleanupSteps: ((item: MenuItem) => void)[];
    } = {
        focusRoot: undefined,
        parentMenu: undefined,
        selectionRoot: undefined,
        cleanupSteps: [],
    };
}

declare global {
    interface GlobalEventHandlersEventMap {
        'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;
    }
}

1	/*	34✔
2	Copyright 2020 Adobe. All rights reserved.	34✔
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");	34✔
4	you may not use this file except in compliance with the License. You may obtain a copy	34✔
5	of the License at http://www.apache.org/licenses/LICENSE-2.0	34✔
6		34✔
7	Unless required by applicable law or agreed to in writing, software distributed under	34✔
8	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	34✔
9	OF ANY KIND, either express or implied. See the License for the specific language	34✔
10	governing permissions and limitations under the License.	34✔
11	*/	34✔
12		34✔
13	import {	34✔
14	CSSResultArray,	34✔
15	html,	34✔
16	nothing,	34✔
17	PropertyValues,	34✔
18	TemplateResult,	34✔
19	} from '@spectrum-web-components/base';	34✔
20	import {	34✔
21	ObserveSlotPresence,	34✔
22	ObserveSlotText,	34✔
23	randomID,	34✔
24	} from '@spectrum-web-components/shared';	34✔
25	import {	34✔
26	property,	34✔
27	query,	34✔
28	} from '@spectrum-web-components/base/src/decorators.js';	34✔
29		34✔
30	import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';	34✔
31	import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';	34✔
32	import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';	34✔
33	import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';	34✔
34	import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';	34✔
35	import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';	34✔
36		34✔
37	import menuItemStyles from './menu-item.css.js';	34✔
38	import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';	34✔
39	import type { Menu } from './Menu.js';	34✔
40	import { MutationController } from '@lit-labs/observers/mutation-controller.js';	34✔
41	import type { Overlay } from '@spectrum-web-components/overlay';	34✔
42	import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';	34✔
43		34✔
44	/**	34✔
45	* Duration during which a pointing device can leave an `<sp-menu-item>` element	34✔
46	* and return to it or to the submenu opened from it before closing that submenu.	34✔
47	**/	34✔
48	const POINTERLEAVE_TIMEOUT = 100;	34✔
49		34✔
50	type MenuCascadeItem = {	34✔
51	hadFocusRoot: boolean;	34✔
52	ancestorWithSelects?: HTMLElement;	34✔
53	};	34✔
54		34✔
55	export class MenuItemAddedOrUpdatedEvent extends Event {	34✔
56	constructor(item: MenuItem) {	34✔
57	super('sp-menu-item-added-or-updated', {	4,890✔
58	bubbles: true,	4,890✔
59	composed: true,	4,890✔
60	});	4,890✔
61	this.clear(item);	4,890✔
62	}	4,890✔
63	clear(item: MenuItem): void {	34✔
64	this._item = item;	4,917✔
65	this.currentAncestorWithSelects = undefined;	4,917✔
66	item.menuData = {	4,917✔
67	cleanupSteps: [],	4,917✔
68	focusRoot: undefined,	4,917✔
69	selectionRoot: undefined,	4,917✔
70	parentMenu: undefined,	4,917✔
71	};	4,917✔
72	this.menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();	4,917✔
73	}	4,917✔
74	menuCascade = new WeakMap<HTMLElement, MenuCascadeItem>();	34✔
75	get item(): MenuItem {	34✔
76	return this._item;	62,158✔
77	}	62,158✔
78	private _item!: MenuItem;	34✔
79	currentAncestorWithSelects?: Menu;	34✔
80	}	34✔
81		34✔
82	export type MenuItemChildren = { icon: Element[]; content: Node[] };	34✔
83		34✔
84	/**	34✔
85	* @element sp-menu-item	34✔
86	*	34✔
87	* @slot - text content to display within the Menu Item	34✔
88	* @slot description - description to be placed below the label of the Menu Item	34✔
89	* @slot icon - icon element to be placed at the start of the Menu Item	34✔
90	* @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.	34✔
91	* @slot submenu - content placed in a submenu	34✔
92	* @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships	34✔
93	*/	34✔
94	export class MenuItem extends LikeAnchor(	34✔
95	ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))	34✔
96	) {	34✔
97	public static override get styles(): CSSResultArray {	34✔
98	return [menuItemStyles, checkmarkStyles, chevronStyles];	34✔
99	}	34✔
100		34✔
101	abortControllerSubmenu!: AbortController;	34✔
102		34✔
103	@property({ type: Boolean, reflect: true })	34✔
104	public active = false;	34✔
105		34✔
106	private dependencyManager = new DependencyManagerController(this);	34✔
107		34✔
108	@property({ type: Boolean, reflect: true })	34✔
109	public focused = false;	34✔
110		34✔
111	@property({ type: Boolean, reflect: true })	34✔
112	public selected = false;	34✔
113		34✔
114	@property({ type: String })	34✔
115	public get value(): string {	34✔
116	return this._value \|\| this.itemText;	29,403✔
117	}	29,403✔
118		34✔
119	public set value(value: string) {	34✔
120	if (value === this._value) {	2,584✔
121	return;	833✔
122	}	833✔
123	this._value = value \|\| '';	2,584✔
124	if (this._value) {	2,584✔
125	this.setAttribute('value', this._value);	1,749✔
126	} else {	2,580✔
127	this.removeAttribute('value');	2✔
128	}	2✔
129	}	2,584✔
130		34✔
131	private _value = '';	34✔
132		34✔
133	/**	34✔
134	* @private	34✔
135	*/	34✔
136	public get itemText(): string {	34✔
137	return this.itemChildren.content.reduce(	16,139✔
138	(acc, node) => acc + (node.textContent \|\| '').trim(),	16,139✔
139	''	16,139✔
140	);	16,139✔
141	}	16,139✔
142		34✔
143	@property({ type: Boolean, reflect: true, attribute: 'has-submenu' })	34✔
144	public hasSubmenu = false;	34✔
145		34✔
146	@query('slot:not([name])')	34✔
147	contentSlot!: HTMLSlotElement;	34✔
148		34✔
149	@query('slot[name="icon"]')	34✔
150	iconSlot!: HTMLSlotElement;	34✔
151		34✔
152	@property({	34✔
153	type: Boolean,	34✔
154	reflect: true,	34✔
155	attribute: 'no-wrap',	34✔
156	hasChanged() {	34✔
157	return false;	4,371✔
158	},	4,371✔
159	})	34✔
160	public noWrap = false;	34✔
161		34✔
162	@query('.anchor')	34✔
163	private anchorElement!: HTMLAnchorElement;	34✔
164		34✔
165	@query('sp-overlay')	34✔
166	public overlayElement!: Overlay;	34✔
167		34✔
168	private submenuElement?: HTMLElement;	34✔
169		34✔
170	public override get focusElement(): HTMLElement {	34✔
171	return this;	23,632✔
172	}	23,632✔
173		34✔
174	protected get hasIcon(): boolean {	34✔
175	return this.slotContentIsPresent;	329✔
176	}	329✔
177		34✔
178	public get itemChildren(): MenuItemChildren {	34✔
179	if (!this.iconSlot \|\| !this.contentSlot) {	16,419✔
180	return {	6,994✔
181	icon: [],	6,994✔
182	content: [],	6,994✔
183	};	6,994✔
184	}	6,994✔
185	if (this._itemChildren) {	16,043✔
186	return this._itemChildren;	6,824✔
187	}	6,824✔
188	const icon = this.iconSlot.assignedElements().map((element) => {	2,601✔
189	const newElement = element.cloneNode(true) as HTMLElement;	4✔
190	newElement.removeAttribute('slot');	4✔
191	newElement.classList.toggle('icon');	4✔
192	return newElement;	4✔
193	});	2,601✔
194	const content = this.contentSlot	2,601✔
195	.assignedNodes()	2,601✔
196	.map((node) => node.cloneNode(true));	2,601✔
197	this._itemChildren = { icon, content };	2,601✔
198		2,601✔
199	return this._itemChildren;	2,601✔
200	}	16,419✔
201		34✔
202	private _itemChildren?: MenuItemChildren;	34✔
203		34✔
204	constructor() {	34✔
205	super();	4,371✔
206	this.addEventListener('click', this.handleClickCapture, {	4,371✔
207	capture: true,	4,371✔
208	});	4,371✔
209		4,371✔
210	new MutationController(this, {	4,371✔
211	config: {	4,371✔
212	characterData: true,	4,371✔
213	childList: true,	4,371✔
214	subtree: true,	4,371✔
215	},	4,371✔
216	callback: (mutations) => {	4,371✔
217	const isSubmenu = mutations.every(	4,425✔
218	(mutation) =>	4,425✔
219	(mutation.target as HTMLElement).slot === 'submenu'	22✔
220	);	4,425✔
221	if (isSubmenu) {	4,425✔
222	return;	4,403✔
223	}	4,403✔
224	this.breakItemChildrenCache();	22✔
225	},	4,425✔
226	});	4,371✔
227	}	4,371✔
228		34✔
229	@property({ type: Boolean, reflect: true })	34✔
230	public open = false;	34✔
231		34✔
232	public override click(): void {	34✔
233	if (this.disabled) {	145✔
234	return;	1✔
235	}	1✔
236		144✔
237	if (this.shouldProxyClick()) {	144✔
238	return;	3✔
239	}	3✔
240		141✔
241	super.click();	141✔
242	}	145✔
243		34✔
244	private handleClickCapture(event: Event): void \| boolean {	34✔
245	if (this.disabled) {	157✔
246	event.preventDefault();	1✔
247	event.stopImmediatePropagation();	1✔
248	event.stopPropagation();	1✔
249	return false;	1✔
250	}	1✔
251	}	157✔
252		34✔
253	private handleSlottableRequest = (event: SlottableRequestEvent): void => {	34✔
254	this.submenuElement?.dispatchEvent(	15!
255	new SlottableRequestEvent(event.name, event.data)	15✔
256	);	15✔
257	};	15✔
258		34✔
259	private proxyFocus = (): void => {	34✔
260	this.focus();	9✔
261	};	9✔
262		34✔
263	private shouldProxyClick(): boolean {	34✔
264	let handled = false;	144✔
265	if (this.anchorElement) {	144✔
266	this.anchorElement.click();	3✔
267	handled = true;	3✔
268	}	3✔
269	return handled;	144✔
270	}	144✔
271		34✔
272	protected breakItemChildrenCache(): void {	34✔
273	this._itemChildren = undefined;	22✔
274	this.triggerUpdate();	22✔
275	}	22✔
276		34✔
277	protected renderSubmenu(): TemplateResult {	34✔
278	const slot = html`	5,079✔
279	<slot	5,079✔
280	name="submenu"	5,079✔
281	@slotchange=${this.manageSubmenu}	5,079✔
282	@sp-menu-item-added-or-updated=${{	5,079✔
283	handleEvent: (event: MenuItemAddedOrUpdatedEvent) => {	5,079✔
284	event.clear(event.item);	27✔
285	},	27✔
286	capture: true,	5,079✔
287	}}	5,079✔
288	@focusin=${(event: Event) => event.stopPropagation()}	5,079✔
289	></slot>	5,079✔
290	`;	5,079✔
291	if (!this.hasSubmenu) {	5,079✔
292	return slot;	5,041✔
293	}	5,041✔
294	this.dependencyManager.add('sp-overlay');	38✔
295	this.dependencyManager.add('sp-popover');	38✔
296	import('@spectrum-web-components/overlay/sp-overlay.js');	38✔
297	import('@spectrum-web-components/popover/sp-popover.js');	38✔
298	return html`	38✔
299	<sp-overlay	38✔
300	.triggerElement=${this as HTMLElement}	38✔
301	?disabled=${!this.hasSubmenu}	38✔
302	?open=${this.hasSubmenu &&	38✔
303	this.open &&	38✔
304	this.dependencyManager.loaded}	5,079✔
305	.placement=${this.isLTR ? 'right-start' : 'left-start'}	5,079✔
306	.offset=${[-10, -5] as [number, number]}	5,079✔
307	.type=${'auto'}	5,079✔
308	@close=${(event: Event) => event.stopPropagation()}	5,079✔
309	@slottable-request=${this.handleSlottableRequest}	5,079✔
310	>	5,079✔
311	<sp-popover	5,079✔
312	@change=${(event: Event) => {	5,079✔
313	this.handleSubmenuChange(event);	1✔
314	this.open = false;	1✔
315	}}	5,079✔
316	@pointerenter=${this.handleSubmenuPointerenter}	5,079✔
317	@pointerleave=${this.handleSubmenuPointerleave}	5,079✔
318	@sp-menu-item-added-or-updated=${(event: Event) =>	5,079✔
319	event.stopPropagation()}	5,079✔
320	>	5,079✔
321	${slot}	5,079✔
322	</sp-popover>	5,079✔
323	</sp-overlay>	5,079✔
324	<sp-icon-chevron100	5,079✔
325	class="spectrum-UIIcon-ChevronRight100 chevron icon"	5,079✔
326	></sp-icon-chevron100>	5,079✔
327	`;	5,079✔
328	}	5,079✔
329		34✔
330	protected override render(): TemplateResult {	34✔
331	return html`	5,079✔
332	${this.selected	5,079✔
333	? html`	329✔
334	<sp-icon-checkmark100	329✔
335	id="selected"	329✔
336	class="spectrum-UIIcon-Checkmark100	329✔
337	icon	329✔
338	checkmark	329✔
339	${this.hasIcon	329✔
340	? 'checkmark--withAdjacentIcon'	4✔
341	: ''}"	329✔
342	></sp-icon-checkmark100>	4,750✔
343	`	4,750✔
344	: nothing}	5,079✔
345	<slot name="icon"></slot>	5,079✔
346	<div id="label">	5,079✔
347	<slot id="slot"></slot>	5,079✔
348	</div>	5,079✔
349	<slot name="description"></slot>	5,079✔
350	<slot name="value"></slot>	5,079✔
351	${this.href && this.href.length > 0	5,079✔
352	? super.renderAnchor({	18✔
353	id: 'button',	18✔
354	ariaHidden: true,	18✔
355	className: 'button anchor hidden',	18✔
356	})	18✔
357	: nothing}	5,079✔
358	${this.renderSubmenu()}	5,079✔
359	`;	5,079✔
360	}	5,079✔
361		34✔
362	protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {	34✔
363	this.submenuElement = event.target.assignedElements({	34✔
364	flatten: true,	34✔
365	})[0] as HTMLElement;	34✔
366	this.hasSubmenu = !!this.submenuElement;	34✔
367	if (this.hasSubmenu) {	34✔
368	this.setAttribute('aria-haspopup', 'true');	22✔
369	}	22✔
370	}	34✔
371		34✔
372	private handlePointerdown(event: PointerEvent): void {	34✔
373	if (event.target === this && this.hasSubmenu && this.open) {	13!
374	this.addEventListener('focus', this.handleSubmenuFocus, {	×
375	once: true,	×
376	});	×
377	this.overlayElement.addEventListener(	×
378	'beforetoggle',	×
379	this.handleBeforetoggle	×
380	);	×
381	}	×
382	}	13✔
383		34✔
384	protected override firstUpdated(changes: PropertyValues): void {	34✔
385	super.firstUpdated(changes);	4,371✔
386	this.setAttribute('tabindex', '-1');	4,371✔
387	this.addEventListener('pointerdown', this.handlePointerdown);	4,371✔
388	this.addEventListener('pointerenter', this.closeOverlaysForRoot);	4,371✔
389	if (!this.hasAttribute('id')) {	4,371✔
390	this.id = `sp-menu-item-${randomID()}`;	3,011✔
391	}	3,011✔
392	}	4,371✔
393		34✔
394	protected closeOverlaysForRoot(): void {	34✔
395	if (this.open) return;	20!
396	this.menuData.parentMenu?.closeDescendentOverlays();	20✔
397	}	20✔
398		34✔
399	protected handleSubmenuClick(event: Event): void {	34✔
400	if (event.composedPath().includes(this.overlayElement)) {	3✔
401	return;	2✔
402	}	2✔
403	this.openOverlay();	1✔
404	}	3✔
405		34✔
406	protected handleSubmenuFocus(): void {	34✔
407	requestAnimationFrame(() => {	×
408	// Wait till after `closeDescendentOverlays` has happened in Menu	×
409	// to reopen (keep open) the direct descendent of this Menu Item	×
410	this.overlayElement.open = this.open;	×
411	});	×
412	}	×
413		34✔
414	protected handleBeforetoggle = (event: Event): void => {	34✔
415	if ((event as Event & { newState: string }).newState === 'closed') {	8✔
416	this.open = true;	8✔
417	this.overlayElement.manuallyKeepOpen();	8✔
418	this.overlayElement.removeEventListener(	8✔
419	'beforetoggle',	8✔
420	this.handleBeforetoggle	8✔
421	);	8✔
422	}	8✔
423	};	8✔
424		34✔
425	protected handlePointerenter(): void {	34✔
426	if (this.leaveTimeout) {	3!
UNCOV 427	clearTimeout(this.leaveTimeout);	×
UNCOV 428	delete this.leaveTimeout;	×
UNCOV 429	return;	×
UNCOV 430	}	×
431	this.openOverlay();	3✔
432	}	3✔
433		34✔
434	protected leaveTimeout?: ReturnType<typeof setTimeout>;	34✔
435	protected recentlyLeftChild = false;	34✔
436		34✔
437	protected handlePointerleave(): void {	34✔
UNCOV 438	if (this.open && !this.recentlyLeftChild) {	×
UNCOV 439	this.leaveTimeout = setTimeout(() => {	×
UNCOV 440	delete this.leaveTimeout;	×
UNCOV 441	this.open = false;	×
UNCOV 442	}, POINTERLEAVE_TIMEOUT);	×
UNCOV 443	}	×
UNCOV 444	}	×
445		34✔
446	/**	34✔
447	* When there is a `change` event in the submenu for this item	34✔
448	* then we "click" this item to cascade the selection up the	34✔
449	* menu tree allowing all submenus between the initial selection	34✔
450	* and the root of the tree to have their selection changes and	34✔
451	* be closed.	34✔
452	*/	34✔
453	protected handleSubmenuChange(event: Event): void {	34✔
454	event.stopPropagation();	1✔
455	this.menuData.selectionRoot?.selectOrToggleItem(this);	1!
456	}	1✔
457		34✔
458	protected handleSubmenuPointerenter(): void {	34✔
459	this.recentlyLeftChild = true;	1✔
460	}	1✔
461		34✔
462	protected async handleSubmenuPointerleave(): Promise<void> {	34✔
463	requestAnimationFrame(() => {	×
464	this.recentlyLeftChild = false;	×
465	});	×
466	}	×
467		34✔
468	protected handleSubmenuOpen(event: Event): void {	34✔
469	this.focused = false;	2✔
470	const parentOverlay = event.composedPath().find((el) => {	2✔
471	return (	24✔
472	el !== this.overlayElement &&	24✔
473	(el as HTMLElement).localName === 'sp-overlay'	24✔
474	);	24✔
475	}) as Overlay;	2✔
476	this.overlayElement.parentOverlayToForceClose = parentOverlay;	2✔
477	}	2✔
478		34✔
479	protected cleanup(): void {	34✔
480	this.open = false;	3✔
481	this.active = false;	3✔
482	}	3✔
483		34✔
484	public async openOverlay(): Promise<void> {	34✔
485	if (!this.hasSubmenu \|\| this.open \|\| this.disabled) {	4!
UNCOV 486	return;	×
UNCOV 487	}	×
488	this.open = true;	4✔
489	this.active = true;	4✔
490	this.setAttribute('aria-expanded', 'true');	4✔
491	this.addEventListener('sp-closed', this.cleanup, {	4✔
492	once: true,	4✔
493	});	4✔
494	}	4✔
495		34✔
496	updateAriaSelected(): void {	34✔
497	const role = this.getAttribute('role');	9,585✔
498	if (role === 'option') {	9,585✔
499	this.setAttribute(	2,706✔
500	'aria-selected',	2,706✔
501	this.selected ? 'true' : 'false'	2,706✔
502	);	2,706✔
503	} else if (role === 'menuitemcheckbox' \|\| role === 'menuitemradio') {	9,585✔
504	this.setAttribute('aria-checked', this.selected ? 'true' : 'false');	446✔
505	}	446✔
506	}	9,585✔
507		34✔
508	public setRole(role: string): void {	34✔
509	this.setAttribute('role', role);	4,887✔
510	this.updateAriaSelected();	4,887✔
511	}	4,887✔
512		34✔
513	protected override updated(changes: PropertyValues<this>): void {	34✔
514	super.updated(changes);	5,079✔
515	if (	5,079✔
516	changes.has('label') &&	5,079✔
517	(this.label \|\| typeof changes.get('label') !== 'undefined')	1!
518	) {	5,079✔
519	this.setAttribute('aria-label', this.label \|\| '');	1!
520	}	1✔
521	if (	5,079✔
522	changes.has('active') &&	5,079✔
523	(this.active \|\| typeof changes.get('active') !== 'undefined')	4,378✔
524	) {	5,079✔
525	if (this.active) {	7✔
526	this.menuData.selectionRoot?.closeDescendentOverlays();	4!
527	}	4✔
528	}	7✔
529	if (this.anchorElement) {	5,079✔
530	this.anchorElement.addEventListener('focus', this.proxyFocus);	18✔
531	this.anchorElement.tabIndex = -1;	18✔
532	}	18✔
533	if (changes.has('selected')) {	5,079✔
534	this.updateAriaSelected();	4,698✔
535	}	4,698✔
536	if (	5,079✔
537	changes.has('hasSubmenu') &&	5,079✔
538	(this.hasSubmenu \|\|	4,394✔
539	typeof changes.get('hasSubmenu') !== 'undefined')	4,372✔
540	) {	5,079✔
541	if (this.hasSubmenu) {	23✔
542	this.abortControllerSubmenu = new AbortController();	22✔
543	const options = { signal: this.abortControllerSubmenu.signal };	22✔
544	this.addEventListener(	22✔
545	'click',	22✔
546	this.handleSubmenuClick,	22✔
547	options	22✔
548	);	22✔
549	this.addEventListener(	22✔
550	'pointerenter',	22✔
551	this.handlePointerenter,	22✔
552	options	22✔
553	);	22✔
554	this.addEventListener(	22✔
555	'pointerleave',	22✔
556	this.handlePointerleave,	22✔
557	options	22✔
558	);	22✔
559	this.addEventListener(	22✔
560	'sp-opened',	22✔
561	this.handleSubmenuOpen,	22✔
562	options	22✔
563	);	22✔
564	} else {	23✔
565	this.abortControllerSubmenu?.abort();	1!
566	}	1✔
567	}	23✔
568	}	5,079✔
569		34✔
570	public override connectedCallback(): void {	34✔
571	super.connectedCallback();	4,403✔
572	this.triggerUpdate();	4,403✔
573	}	4,403✔
574		34✔
575	_parentElement!: HTMLElement;	34✔
576		34✔
577	public override disconnectedCallback(): void {	34✔
578	this.menuData.cleanupSteps.forEach((removal) => removal(this));	4,403✔
579	this.menuData = {	4,403✔
580	focusRoot: undefined,	4,403✔
581	parentMenu: undefined,	4,403✔
582	selectionRoot: undefined,	4,403✔
583	cleanupSteps: [],	4,403✔
584	};	4,403✔
585	super.disconnectedCallback();	4,403✔
586	}	4,403✔
587		34✔
588	private willDispatchUpdate = false;	34✔
589		34✔
590	public async triggerUpdate(): Promise<void> {	34✔
591	if (this.willDispatchUpdate) {	9,808✔
592	return;	4,594✔
593	}	4,594✔
594	this.willDispatchUpdate = true;	5,214✔
595	await new Promise((ready) => requestAnimationFrame(ready));	5,214✔
596	this.dispatchUpdate();	5,214✔
597	}	9,808✔
598		34✔
599	public dispatchUpdate(): void {	34✔
600	if (!this.isConnected) {	5,214✔
601	return;	324✔
602	}	324✔
603	this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));	4,890✔
604	this.willDispatchUpdate = false;	4,890✔
605	}	5,214✔
606		34✔
607	public menuData: {	34✔
608	focusRoot?: Menu;	34✔
609	parentMenu?: Menu;	34✔
610	selectionRoot?: Menu;	34✔
611	cleanupSteps: ((item: MenuItem) => void)[];	34✔
612	} = {	34✔
613	focusRoot: undefined,	34✔
614	parentMenu: undefined,	34✔
615	selectionRoot: undefined,	34✔
616	cleanupSteps: [],	34✔
617	};	34✔
618	}	34✔
619		34✔
620	declare global {	34✔
621	interface GlobalEventHandlersEventMap {	34✔
622	'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;	34✔
623	}	34✔
624	}	34✔

adobe / spectrum-web-components / 10697209507

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