From 8f69e62ba7db8b8098e640e803f0b157ae3450e0 Mon Sep 17 00:00:00 2001 From: Material Web Team Date: Thu, 2 Feb 2023 15:33:51 -0800 Subject: [PATCH] refactor(menu): rename `selected` to `active` for future `md-select` work PiperOrigin-RevId: 506740196 --- list/lib/list.ts | 96 +++++++++++++-------------- list/lib/listitem/list-item.ts | 12 ++-- menu/lib/menu.ts | 20 +++--- menu/lib/menuitem/_menu-item.scss | 2 +- menu/lib/shared.ts | 11 +-- menu/lib/submenuitem/sub-menu-item.ts | 32 ++++----- menu/lib/typeaheadController.ts | 76 ++++++++++----------- menu/menu-item-link.ts | 2 +- menu/menu-item.ts | 2 +- menu/menu.ts | 2 +- menu/sub-menu-item.ts | 2 +- 11 files changed, 129 insertions(+), 128 deletions(-) diff --git a/list/lib/list.ts b/list/lib/list.ts index 0d32b016ba..e8e2a4dbbf 100644 --- a/list/lib/list.ts +++ b/list/lib/list.ts @@ -60,7 +60,7 @@ export class List extends LitElement { @query('.md3-list') listRoot!: HTMLElement; /** - * An array of selectable and disableable list items. Queries every assigned + * An array of activatable and disableable list items. Queries every assigned * element that has the `md-list-item` attribute. * * _NOTE:_ This is a shallow, flattened query via @@ -111,7 +111,7 @@ export class List extends LitElement { * * @param event {KeyboardEvent} The keyboard event that triggers this handler. */ - protected handleKeydown(event: KeyboardEvent) { + handleKeydown(event: KeyboardEvent) { const key = event.key; if (!isNavigableKey(key)) { return; @@ -123,44 +123,44 @@ export class List extends LitElement { return; } - const selectedItemRecord = List.getSelectedItem(items); + const activeItemRecord = List.getActiveItem(items); - if (selectedItemRecord) { - selectedItemRecord.item.selected = false; + if (activeItemRecord) { + activeItemRecord.item.active = false; } event.preventDefault(); switch (key) { - // Select the next item + // Activate the next item case NAVIGABLE_KEYS.ArrowDown: - if (selectedItemRecord) { - const next = List.getNextItem(items, selectedItemRecord.index); + if (activeItemRecord) { + const next = List.getNextItem(items, activeItemRecord.index); - if (next) next.selected = true; + if (next) next.active = true; } else { - List.selectFirstItem(items); + List.activateFirstItem(items); } break; - // Select the previous item + // Activate the previous item case NAVIGABLE_KEYS.ArrowUp: - if (selectedItemRecord) { - const prev = List.getPrevItem(items, selectedItemRecord.index); - if (prev) prev.selected = true; + if (activeItemRecord) { + const prev = List.getPrevItem(items, activeItemRecord.index); + if (prev) prev.active = true; } else { - items[items.length - 1].selected = true; + items[items.length - 1].active = true; } break; - // Select the first item + // Activate the first item case NAVIGABLE_KEYS.Home: - List.selectFirstItem(items); + List.activateFirstItem(items); break; - // Select the last item + // Activate the last item case NAVIGABLE_KEYS.End: - List.selectLastItem(items); + List.activateLastItem(items); break; default: @@ -169,46 +169,46 @@ export class List extends LitElement { } /** - * Selects the first non-disabled item of a given array of items. + * Activates the first non-disabled item of a given array of items. * - * @param items {Array} The items from which to select the + * @param items {Array} The items from which to activate the * first item. */ - static selectFirstItem(items: T[]) { + static activateFirstItem(items: T[]) { // NOTE: These selector functions are static and not on the instance such // that multiple operations can be chained and we do not have to re-query // the DOM - const firstItem = List.getFirstSelectableItem(items); + const firstItem = List.getFirstActivatableItem(items); if (firstItem) { - firstItem.selected = true; + firstItem.active = true; } } /** - * Selects the last non-disabled item of a given array of items. + * Activates the last non-disabled item of a given array of items. * - * @param items {Array} The items from which to select the + * @param items {Array} The items from which to activate the * last item. */ - static selectLastItem(items: T[]) { - const lastItem = List.getLastSelectableItem(items); + static activateLastItem(items: T[]) { + const lastItem = List.getLastActivatableItem(items); if (lastItem) { - lastItem.selected = true; + lastItem.active = true; } } /** - * Deselects the currently selected item of a given array of items. + * Deactivates the currently active item of a given array of items. * - * @param items {Array} The items from which to deselect the - * selected item. - * @returns A record of the deleselcted selected item including the item and - * the index of the item or `null` if none are deselected. + * @param items {Array} The items from which to deactivate the + * active item. + * @returns A record of the deleselcted activated item including the item and + * the index of the item or `null` if none are deactivated. */ - static deselectSelectedItem(items: T[]) { - const activeItem = List.getSelectedItem(items); + static deactivateActiveItem(items: T[]) { + const activeItem = List.getActiveItem(items); if (activeItem) { - activeItem.item.selected = false; + activeItem.item.active = false; } return activeItem; } @@ -218,16 +218,16 @@ export class List extends LitElement { } /** - * Retrieves the the first selected item of a given array of items. + * Retrieves the the first activated item of a given array of items. * * @param items {Array} The items to search. - * @returns A record of the first selected item including the item and the - * index of the item or `null` if none are selected. + * @returns A record of the first activated item including the item and the + * index of the item or `null` if none are activated. */ - static getSelectedItem(items: T[]) { + static getActiveItem(items: T[]) { for (let i = 0; i < items.length; i++) { const item = items[i]; - if (item.selected) { + if (item.active) { return { item, index: i, @@ -242,9 +242,9 @@ export class List extends LitElement { * the first item that is not disabled. * * @param items {Array} The items to search. - * @returns The first selectable item or `null` if none are selectable. + * @returns The first activatable item or `null` if none are activatable. */ - static getFirstSelectableItem(items: T[]) { + static getFirstActivatableItem(items: T[]) { for (const item of items) { if (!item.disabled) { return item; @@ -258,9 +258,9 @@ export class List extends LitElement { * Retrieves the the last non-disabled item of a given array of items. * * @param items {Array} The items to search. - * @returns The last selectable item or `null` if none are selectable. + * @returns The last activatable item or `null` if none are activatable. */ - static getLastSelectableItem(items: T[]) { + static getLastActivatableItem(items: T[]) { for (let i = items.length - 1; i >= 0; i--) { const item = items[i]; if (!item.disabled) { @@ -276,7 +276,7 @@ export class List extends LitElement { * * @param items {Array} The items to search. * @param index {{index: number}} The index to search from. - * @returns The next selectable item or `null` if none are selectable. + * @returns The next activatable item or `null` if none are activatable. */ protected static getNextItem(items: T[], index: number) { for (let i = 1; i < items.length; i++) { @@ -294,7 +294,7 @@ export class List extends LitElement { * * @param items {Array} The items to search. * @param index {{index: number}} The index to search from. - * @returns The previous selectable item or `null` if none are selectable. + * @returns The previous activatable item or `null` if none are activatable. */ protected static getPrevItem(items: T[], index: number) { for (let i = 1; i < items.length; i++) { diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts index 00d430889c..65ceda53d9 100644 --- a/list/lib/listitem/list-item.ts +++ b/list/lib/listitem/list-item.ts @@ -21,7 +21,7 @@ import {MdRipple} from '../../../ripple/ripple.js'; import {ARIARole} from '../../../types/aria.js'; interface ListItemSelf { - selected: boolean; + active: boolean; disabled: boolean; } @@ -81,11 +81,11 @@ export class ListItemEl extends LitElement implements ListItem { @property({type: Number}) itemTabIndex = -1; /** - * Whether or not the element is in the selected state. When selected, + * Whether or not the element is in the selected visual state. When active, * tabindex is set to 0, and in some list item variants (like md-list-item), * focuses the underlying item. */ - @property({type: Boolean, reflect: true}) selected = false; + @property({type: Boolean, reflect: true}) active = false; /** * READONLY. Sets the `md-list-item` attribute on the element. @@ -114,8 +114,8 @@ export class ListItemEl extends LitElement implements ListItem { private isFirstUpdate = true; override willUpdate(changed: PropertyValues) { - if (changed.has('selected') && !this.disabled) { - if (this.selected) { + if (changed.has('active') && !this.disabled) { + if (this.active) { this.itemTabIndex = 0; if (this.focusOnSelection) { @@ -276,7 +276,7 @@ export class ListItemEl extends LitElement implements ListItem { // will focus the list item root if it is selected but not on the first // update or else it may cause the page to jump on first load. - if (changed.has('selected') && !this.isFirstUpdate && this.selected && + if (changed.has('active') && !this.isFirstUpdate && this.active && this.focusOnSelection) { this.listItemRoot.focus(); } diff --git a/menu/lib/menu.ts b/menu/lib/menu.ts index 98e0d36016..cce91e4c55 100644 --- a/menu/lib/menu.ts +++ b/menu/lib/menu.ts @@ -259,7 +259,7 @@ export abstract class Menu extends LitElement { protected renderMenuItems() { return html``; + @deactivate-items=${this.onDeactivateItems}>`; } /** @@ -307,23 +307,23 @@ export abstract class Menu extends LitElement { if (!this.listElement) return; const items = this.listElement.items; - const activeItemRecord = List.getSelectedItem(items); + const activeItemRecord = List.getActiveItem(items); - if (activeItemRecord) { - activeItemRecord.item.selected = false; + if (activeItemRecord && this.defaultFocus !== 'NONE') { + activeItemRecord.item.active = false; } switch (this.defaultFocus) { case 'FIRST_ITEM': - const first = List.getFirstSelectableItem(items); + const first = List.getFirstActivatableItem(items); if (first) { - first.selected = true; + first.active = true; } break; case 'LAST_ITEM': - const last = List.getLastSelectableItem(items); + const last = List.getLastActivatableItem(items); if (last) { - last.selected = true; + last.active = true; } break; case 'LIST_ROOT': @@ -594,11 +594,11 @@ export abstract class Menu extends LitElement { this.close(); } - protected onDeselectItems(e: Event) { + protected onDeactivateItems(e: Event) { e.stopPropagation(); const items = this.items; for (const item of items) { - item.selected = false; + item.active = false; } } diff --git a/menu/lib/menuitem/_menu-item.scss b/menu/lib/menuitem/_menu-item.scss index bbacd72ce3..da34d811c2 100644 --- a/menu/lib/menuitem/_menu-item.scss +++ b/menu/lib/menuitem/_menu-item.scss @@ -30,7 +30,7 @@ $_custom-property-prefix: 'menu'; } @mixin styles() { - :host([selected]) .list-item { + :host([active]) .list-item { background-color: var(--_list-item-selected-container-color); } diff --git a/menu/lib/shared.ts b/menu/lib/shared.ts index aebe54a449..e5c9781eba 100644 --- a/menu/lib/shared.ts +++ b/menu/lib/shared.ts @@ -15,9 +15,10 @@ interface MenuItemSelf { */ headline: string; /** - * Whether or not the item is selected (focuses on selection). + * Whether or not the item is in the selected visual state (focuses on + * selection). */ - selected: boolean; + active: boolean; /** * If it is a sub-menu-item, a method that can close the submenu. */ @@ -81,11 +82,11 @@ export class CloseMenuEvent extends Event { export const DefaultCloseMenuEvent = CloseMenuEvent; /** - * The event that requests the parent md-menu to deselect all other items. + * The event that requests the parent md-menu to deactivate all other items. */ -export class DeselectItemsEvent extends Event { +export class DeactivateItemsEvent extends Event { constructor() { - super('deselect-items', {bubbles: true, composed: true}); + super('deactivate-items', {bubbles: true, composed: true}); } } diff --git a/menu/lib/submenuitem/sub-menu-item.ts b/menu/lib/submenuitem/sub-menu-item.ts index a6669ea338..140d75bb9a 100644 --- a/menu/lib/submenuitem/sub-menu-item.ts +++ b/menu/lib/submenuitem/sub-menu-item.ts @@ -11,14 +11,14 @@ import {List} from '../../../list/lib/list.js'; import {ARIARole} from '../../../types/aria.js'; import {Corner, Menu} from '../menu.js'; import {MenuItemEl} from '../menuitem/menu-item.js'; -import {CLOSE_REASON, CloseMenuEvent, DeselectItemsEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js'; +import {CLOSE_REASON, CloseMenuEvent, DeactivateItemsEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js'; function stopPropagation(e: Event) { e.stopPropagation(); } /** - * @fires deselect-items {DeselectItemsEvent} Requests the parent menu to + * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to * deselect other items when a submenu opens */ export class SubMenuItem extends MenuItemEl { @@ -113,11 +113,11 @@ export class SubMenuItem extends MenuItemEl { if (!submenu) return; const submenuItems = submenu.items; - const firstSelectableItem = List.getFirstSelectableItem(submenuItems); + const firstActivatableItem = List.getFirstActivatableItem(submenuItems); - if (firstSelectableItem) { + if (firstActivatableItem) { this.show(() => { - firstSelectableItem.selected = true; + firstActivatableItem.active = true; }); return; @@ -151,12 +151,12 @@ export class SubMenuItem extends MenuItemEl { if (e.reason.kind === CLOSE_REASON.KEYDOWN && e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) { e.stopPropagation(); - this.selected = true; - // It might already be selected so manually focus + this.active = true; + // It might already be active so manually focus this.listItemRoot.focus(); return; } - this.selected = false; + this.active = false; } protected async onSubMenuKeydown(e: KeyboardEvent) { @@ -169,9 +169,9 @@ export class SubMenuItem extends MenuItemEl { if (!shouldClose) return; this.close(() => { - List.deselectSelectedItem(this.submenuEl!.items); + List.deactivateActiveItem(this.submenuEl!.items); this.listItemRoot.focus(); - this.selected = true; + this.active = true; }); } @@ -191,7 +191,7 @@ export class SubMenuItem extends MenuItemEl { menu.anchorCorner = this.anchorCorner; menu.menuCorner = this.menuCorner; menu.anchor = this; - // We manually set focus with `selected` on keyboard navigation. And we + // We manually set focus with `active` on keyboard navigation. And we // want to focus the root on hover, so the user can pick up navigation with // keyboard after hover. menu.defaultFocus = 'LIST_ROOT'; @@ -201,10 +201,10 @@ export class SubMenuItem extends MenuItemEl { const menuAlreadyOpen = menu.open; menu.show(); - // Deselect other items. This can be the case if the user has tabbed around - // the menu and then mouses over an md-sub-menu. - this.dispatchEvent(new DeselectItemsEvent()); - this.selected = true; + // Deactivate other items. This can be the case if the user has tabbed + // around the menu and then mouses over an md-sub-menu. + this.dispatchEvent(new DeactivateItemsEvent()); + this.active = true; // This is the case of mouse hovering when already opened via keyboard or // vice versa @@ -226,7 +226,7 @@ export class SubMenuItem extends MenuItemEl { menu.quick = true; menu.close(); - this.selected = false; + this.active = false; menu.addEventListener('closed', onClosed, {once: true}); } diff --git a/menu/lib/typeaheadController.ts b/menu/lib/typeaheadController.ts index 37049caf12..adb543624f 100644 --- a/menu/lib/typeaheadController.ts +++ b/menu/lib/typeaheadController.ts @@ -36,7 +36,7 @@ const TYPEAHEAD_TEXT = 2; /** * This controller listens to `keydown` events and searches the header text of * an array of `MenuItem`s with the corresponding entered keys within the buffer - * time and selects the item. + * time and activates the item. * * @example * ```ts @@ -48,12 +48,12 @@ const TYPEAHEAD_TEXT = 2; *
+ * class="activeItemText"> * * Apple *
*
- * + * * * * @@ -80,9 +80,9 @@ export class TypeaheadController { */ protected isTypingAhead = false; /** - * The record of the last selected item. + * The record of the last active item. */ - protected lastSelectedRecord: TypeaheadRecord|null = null; + protected lastActiveRecord: TypeaheadRecord|null = null; /** * @param getProperties A function that returns the options of the typeahead @@ -125,8 +125,8 @@ export class TypeaheadController { // middle of a typeahead if (e.code === 'Space' || e.code === 'Enter' || e.code.startsWith('Arrow') || e.code === 'Escape') { - if (this.lastSelectedRecord) { - this.lastSelectedRecord[TYPEAHEAD_ITEM].selected = false; + if (this.lastActiveRecord) { + this.lastActiveRecord[TYPEAHEAD_ITEM].active = false; } return; } @@ -136,18 +136,18 @@ export class TypeaheadController { // and a normalized header. this.typeaheadRecords = this.items.map( (el, index) => [index, el, el.headline.trim().toLowerCase()]); - this.lastSelectedRecord = - this.typeaheadRecords.find(record => record[TYPEAHEAD_ITEM].selected) ?? + this.lastActiveRecord = + this.typeaheadRecords.find(record => record[TYPEAHEAD_ITEM].active) ?? null; - if (this.lastSelectedRecord) { - this.lastSelectedRecord[TYPEAHEAD_ITEM].selected = false; + if (this.lastActiveRecord) { + this.lastActiveRecord[TYPEAHEAD_ITEM].active = false; } this.typeahead(e); } /** * Performs the typeahead. Based on the normalized items and the current text - * buffer, finds the _next_ item with matching text and selects it. + * buffer, finds the _next_ item with matching text and activates it. * * @example * @@ -155,31 +155,31 @@ export class TypeaheadController { * buffer: '' * user types: o * - * selects Olive + * activates Olive * * @example * - * items: Apple, Banana, Olive (selected), Orange, Cucumber + * items: Apple, Banana, Olive (active), Orange, Cucumber * buffer: 'o' * user types: l * - * selects Olive + * activates Olive * * @example * - * items: Apple, Banana, Olive (selected), Orange, Cucumber + * items: Apple, Banana, Olive (active), Orange, Cucumber * buffer: '' * user types: o * - * selects Orange + * activates Orange * * @example * - * items: Apple, Banana, Olive, Orange (selected), Cucumber + * items: Apple, Banana, Olive, Orange (active), Cucumber * buffer: '' * user types: o * - * selects Olive + * activates Olive */ protected typeahead(e: KeyboardEvent) { clearTimeout(this.cancelTypeaheadTimeout); @@ -188,8 +188,8 @@ export class TypeaheadController { if (e.code === 'Enter' || e.code.startsWith('Arrow') || e.code === 'Escape') { this.endTypeahead(); - if (this.lastSelectedRecord) { - this.lastSelectedRecord[TYPEAHEAD_ITEM].selected = false; + if (this.lastActiveRecord) { + this.lastActiveRecord[TYPEAHEAD_ITEM].active = false; } return; } @@ -205,8 +205,8 @@ export class TypeaheadController { this.typaheadBuffer += e.key.toLowerCase(); - const lastSelectedIndex = - this.lastSelectedRecord ? this.lastSelectedRecord[TYPEAHEAD_INDEX] : -1; + const lastActiveIndex = + this.lastActiveRecord ? this.lastActiveRecord[TYPEAHEAD_INDEX] : -1; const numRecords = this.typeaheadRecords.length; /** @@ -218,40 +218,40 @@ export class TypeaheadController { * 0: [0, , 'apple'] * 1: [1, , 'apricot'] * 2: [2, , 'banana'] - * 3: [3, , 'olive'] <-- lastSelectedIndex + * 3: [3, , 'olive'] <-- lastActiveIndex * 4: [4, , 'orange'] * 5: [5, , 'strawberry'] * - * this.typeaheadRecords.sort((a,b) => rebaseIndexOnSelected(a) - * - rebaseIndexOnSelected(b)) === - * 0: [3, , 'olive'] <-- lastSelectedIndex + * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a) + * - rebaseIndexOnActive(b)) === + * 0: [3, , 'olive'] <-- lastActiveIndex * 1: [4, , 'orange'] * 2: [5, , 'strawberry'] * 3: [0, , 'apple'] * 4: [1, , 'apricot'] * 5: [2, , 'banana'] */ - const rebaseIndexOnSelected = (record: TypeaheadRecord) => { - return (record[TYPEAHEAD_INDEX] + numRecords - lastSelectedIndex) % + const rebaseIndexOnActive = (record: TypeaheadRecord) => { + return (record[TYPEAHEAD_INDEX] + numRecords - lastActiveIndex) % numRecords; }; - // records filtered and sorted / rebased around the last selected index + // records filtered and sorted / rebased around the last active index const matchingRecords = this.typeaheadRecords .filter( record => !record[TYPEAHEAD_ITEM].disabled && record[TYPEAHEAD_TEXT].startsWith(this.typaheadBuffer)) .sort( - (a, b) => rebaseIndexOnSelected(a) - rebaseIndexOnSelected(b)); + (a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b)); // Just leave if there's nothing that matches. Native select will just // choose the first thing that starts with the next letter in the alphabet // but that's out of scope and hard to localize if (matchingRecords.length === 0) { clearTimeout(this.cancelTypeaheadTimeout); - if (this.lastSelectedRecord) { - this.lastSelectedRecord[TYPEAHEAD_ITEM].selected = false; + if (this.lastActiveRecord) { + this.lastActiveRecord[TYPEAHEAD_ITEM].active = false; } this.endTypeahead(); return; @@ -262,18 +262,18 @@ export class TypeaheadController { // This is likely the case that someone is trying to "tab" through different // entries that start with the same letter - if (this.lastSelectedRecord === matchingRecords[0] && isNewQuery) { + if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) { nextRecord = matchingRecords[1] ?? matchingRecords[0]; } else { nextRecord = matchingRecords[0]; } - if (this.lastSelectedRecord) { - this.lastSelectedRecord[TYPEAHEAD_ITEM].selected = false; + if (this.lastActiveRecord) { + this.lastActiveRecord[TYPEAHEAD_ITEM].active = false; } - this.lastSelectedRecord = nextRecord; - nextRecord[TYPEAHEAD_ITEM].selected = true; + this.lastActiveRecord = nextRecord; + nextRecord[TYPEAHEAD_ITEM].active = true; return; } diff --git a/menu/menu-item-link.ts b/menu/menu-item-link.ts index 013f977ca1..606e13c24f 100644 --- a/menu/menu-item-link.ts +++ b/menu/menu-item-link.ts @@ -13,7 +13,7 @@ import {styles} from './lib/menuitem/menu-item-styles.css.js'; import {MenuItemLink} from './lib/menuitemlink/menu-item-link.js'; export {ListItem} from '../list/lib/listitem/list-item.js'; -export {CloseMenuEvent, DeselectItemsEvent, MenuItem} from './lib/shared.js'; +export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js'; declare global { diff --git a/menu/menu-item.ts b/menu/menu-item.ts index fb3102f454..6a0bd214aa 100644 --- a/menu/menu-item.ts +++ b/menu/menu-item.ts @@ -13,7 +13,7 @@ import {styles as privateProps} from './lib/menuitem/menu-item-private-styles.cs import {styles} from './lib/menuitem/menu-item-styles.css.js'; export {ListItem} from '../list/lib/listitem/list-item.js'; -export {CloseMenuEvent, DeselectItemsEvent, MenuItem} from './lib/shared.js'; +export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js'; declare global { interface HTMLElementTagNameMap { diff --git a/menu/menu.ts b/menu/menu.ts index 97c7b1b904..6d4c675a03 100644 --- a/menu/menu.ts +++ b/menu/menu.ts @@ -11,7 +11,7 @@ import {styles} from './lib/menu-styles.css.js'; export {ListItem} from '../list/lib/listitem/list-item.js'; export {Corner, DefaultFocusState} from './lib/menu.js'; -export {CloseMenuEvent, DeselectItemsEvent, MenuItem} from './lib/shared.js'; +export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js'; declare global { interface HTMLElementTagNameMap { diff --git a/menu/sub-menu-item.ts b/menu/sub-menu-item.ts index ed00763d44..17e41a4cbc 100644 --- a/menu/sub-menu-item.ts +++ b/menu/sub-menu-item.ts @@ -13,7 +13,7 @@ import {styles} from './lib/menuitem/menu-item-styles.css.js'; import {SubMenuItem} from './lib/submenuitem/sub-menu-item.js'; export {ListItem} from '../list/lib/listitem/list-item.js'; -export {CloseMenuEvent, DeselectItemsEvent, MenuItem} from './lib/shared.js'; +export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js'; declare global { interface HTMLElementTagNameMap {