mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(menu): create a Menu interface for easier md-menu wrapping
PiperOrigin-RevId: 567728911
This commit is contained in:
parent
1217b62ef2
commit
5fad4f088f
@ -4,7 +4,76 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import {LitElement} from 'lit';
|
||||
|
||||
import {MenuItem} from './menuItemController.js';
|
||||
import type {Corner, SurfacePositionTarget} from './surfacePositionController.js';
|
||||
|
||||
/**
|
||||
* The interface needed for a Menu to work with other md-menu elements.
|
||||
*/
|
||||
export interface MenuSelf {
|
||||
/**
|
||||
* Whether or not the menu is currently opened.
|
||||
*/
|
||||
open: boolean;
|
||||
/**
|
||||
* Skips the opening and closing animations.
|
||||
*/
|
||||
quick: boolean;
|
||||
/**
|
||||
* Displays overflow content like a submenu.
|
||||
*
|
||||
* __NOTE__: This may cause adverse effects if you set
|
||||
* `md-menu {max-height:...}`
|
||||
* and have items overflowing items in the "y" direction.
|
||||
*/
|
||||
hasOverflow: boolean;
|
||||
/**
|
||||
* Communicates to the menu that it is a submenu and should not handle the
|
||||
* ArrowLeft button in LTR and ArrowRight button in RTL.
|
||||
*/
|
||||
isSubmenu: boolean;
|
||||
/**
|
||||
* After closing, does not restore focus to the last focused element before
|
||||
* the menu was opened.
|
||||
*/
|
||||
skipRestoreFocus: boolean;
|
||||
/**
|
||||
* The corner of the anchor in which the menu should anchor to.
|
||||
*/
|
||||
anchorCorner: Corner;
|
||||
/**
|
||||
* The corner of the menu in which the menu should anchor from.
|
||||
*/
|
||||
menuCorner: Corner;
|
||||
/**
|
||||
* The element the menu should anchor to.
|
||||
*/
|
||||
anchorElement: (HTMLElement&Partial<SurfacePositionTarget>)|null;
|
||||
/**
|
||||
* What the menu should focus by default when opened.
|
||||
*/
|
||||
defaultFocus: FocusState;
|
||||
/**
|
||||
* An array of items managed by the list.
|
||||
*/
|
||||
items: MenuItem[];
|
||||
/**
|
||||
* Opens the menu.
|
||||
*/
|
||||
show: () => void;
|
||||
/**
|
||||
* Closes the menu.
|
||||
*/
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The interface needed for a Menu to work with other md-menu elements. Useful
|
||||
* for keeping your types safe when wrapping `md-menu`.
|
||||
*/
|
||||
export type Menu = MenuSelf&LitElement;
|
||||
|
||||
/**
|
||||
* The reason the `close-menu` event was dispatched.
|
||||
|
@ -753,9 +753,6 @@ export abstract class Menu extends LitElement {
|
||||
window.addEventListener('pointerdown', this.onWindowPointerdown);
|
||||
window.addEventListener('pointerup', this.onWindowPointerup);
|
||||
}
|
||||
|
||||
// need to self-identify as an md-menu for submenu ripple identification.
|
||||
this.toggleAttribute('md-menu', true);
|
||||
}
|
||||
|
||||
override disconnectedCallback() {
|
||||
|
@ -8,9 +8,9 @@ import {html, isServer, LitElement} from 'lit';
|
||||
import {property, queryAssignedElements} from 'lit/decorators.js';
|
||||
|
||||
import {MenuItem} from '../controllers/menuItemController.js';
|
||||
import {CloseMenuEvent, CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, NavigableKey, SelectionKey} from '../controllers/shared.js';
|
||||
import {CloseMenuEvent, CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, Menu, NavigableKey, SelectionKey} from '../controllers/shared.js';
|
||||
import {createDeactivateItemsEvent, createRequestActivationEvent, deactivateActiveItem, getFirstActivatableItem} from '../list-navigation-helpers.js';
|
||||
import {Corner, Menu} from '../menu.js';
|
||||
import {Corner} from '../menu.js';
|
||||
|
||||
/**
|
||||
* @fires deactivate-items Requests the parent menu to deselect other items when
|
||||
|
@ -12,7 +12,7 @@ import {styles} from './internal/menu-styles.css.js';
|
||||
|
||||
export {ListItem} from '../list/internal/listitem/list-item.js';
|
||||
export {MenuItem} from './internal/controllers/menuItemController.js';
|
||||
export {CloseMenuEvent, FocusState} from './internal/controllers/shared.js';
|
||||
export {CloseMenuEvent, FocusState, Menu} from './internal/controllers/shared.js';
|
||||
export {Corner} from './internal/menu.js';
|
||||
|
||||
declare global {
|
||||
|
Loading…
Reference in New Issue
Block a user