import m from 'mithril' ; import classnames from 'classnames' ; import { Classes } from '../../_shared' ; import { Button , IButtonAttrs } from '../button' ; import { PopoverMenu , IPopoverMenuAttrs } from '../popover-menu' ; import { Icons } from '../icon' ; export interface IMenuItemAttrs extends IButtonAttrs { /** Submenu (Menu component) */ submenu ? : m . Children ; /** Close submenu on child item click */ closeOnSubmenuClick ? : boolean ; /** Attrs passed through to Popover (if submenu exists) */ popoverMenuAttrs ? : Partial < IPopoverMenuAttrs > ; [ htmlAttrs ] : any ; } export class MenuItem implements m . Component < IMenuItemAttrs > { public view ( { attrs } ) { const { class : className , submenu , closeOnSubmenuClick , popoverMenuAttrs , ... buttonAttrs } = attrs ; const classes = classnames ( Classes . MENU_ITEM , Classes . BASIC , className ) ; const button = m ( Button , { align : 'left' , compact : true , iconRight : submenu ? Icons . CHEVRON_RIGHT : undefined , ... buttonAttrs , class : classes } ) ; return submenu ? m ( PopoverMenu , { hasArrow : false , interactionType : 'hover' , openOnTriggerFocus : true , position : 'right-start' , ... popoverMenuAttrs , closeOnContentClick : closeOnSubmenuClick , addToStack : false , content : submenu , inline : true , restoreFocus : false , trigger : button } ) : button ; } }