How to use the @material/menu.DefaultFocusState.LIST_ROOT function in @material/menu

import {closest} from '@material/dom/ponyfill';
import {cssClasses, strings, DefaultFocusState, MDCMenuFoundation} from '@material/menu';

export class MdcMenuSelectedEvent {
  constructor(
    public index: number,
    public source: MdcListItem) {}
}

let nextUniqueId = 0;

export type MdcMenuFocusState = 'none' | 'list' | 'firstItem' | 'lastItem';

const DEFAULT_FOCUS_STATE_MAP = {
  none: DefaultFocusState.NONE,
  list: DefaultFocusState.LIST_ROOT,
  firstItem: DefaultFocusState.FIRST_ITEM,
  lastItem: DefaultFocusState.LAST_ITEM
};

@Directive({
  selector: '[mdcMenuSelectionGroup], mdc-menu-selection-group',
  host: {'class': 'mdc-menu__selection-group'},
  exportAs: 'mdcMenuSelectionGroup'
})
export class MdcMenuSelectionGroup {
  constructor(public elementRef: ElementRef) {}
}

@Directive({
  selector: '[mdcMenuSelectionGroupIcon], mdc-menu-selection-group-icon',
  host: {'class': 'mdc-menu__selection-group-icon'},