import * as React from 'react' ; import List , { ListProps } from '@material/react-list' ; import { MDCMenuFoundation } from '@material/menu/foundation' ; type RefCallback < T > = ( node : T | null ) => void ; export interface MenuListProps extends Exclude < ListProps , 'ref' > { innerRef ? : RefCallback < List > | React . RefObject < List > ; handleItemAction ? : MDCMenuFoundation [ 'handleItemAction' ] ; } class MenuList extends React . Component < MenuListProps , { } > { private listInstance = React . createRef < List > ( ) ; static defaultProps : Partial < MenuListProps > = { className : '' , handleSelect : ( ) => { } , handleItemAction : ( ) => { } , } ; get listElements ( ) : Element [ ] { if ( ! this . listInstance . current ) { return [ ] ; } return this . listInstance . current . listElements ; } handleSelect : ListProps [ 'handleSelect' ] = ( activatedItemIndex , selected ) => { this . props . handleSelect ! ( activatedItemIndex , selected ) ; this . props . handleItemAction ! ( this . listElements [ activatedItemIndex ] ) ; } ; attachRef = ( node ) => { const { innerRef } = this . props ; this . listInstance . current = node ; if ( ! innerRef ) { return ; } if ( typeof innerRef !== 'function' ) { innerRef . current = node ; } else { innerRef ( node ) ; } } ; render ( ) { const { 'aria-hidden' : ariaHidden , handleSelect , handleItemAction , role , innerRef , children , ref , ... otherProps } = this . props ; return ( < List aria - hidden = { ariaHidden !== undefined ? ariaHidden : 'true' } role = { role || 'menu' } handleSelect = { this . handleSelect } ref = { this . attachRef } { ... otherProps } > { children } < /List>); } } export default MenuList ;