<templates>
  <t t-name="o-spreadsheet-Menu-Popover">
    <Popover t-if="this.menuItems.length" t-props="this.popoverProps">
      <div
        t-ref="this.menuRef"
        tabIndex="-1"
        class="o-menu-wrapper"
        t-on-mouseover="() => this.onMouseOverMainMenu()"
        t-on-keydown="this.onKeydown">
        <Menu t-props="this.menuProps"/>
      </div>
      <MenuPopover
        t-if="this.subMenu.isOpen"
        t-key="this.subMenu.parentMenu.id"
        anchorRect="this.subMenuAnchorRect"
        menuItems="this.subMenu.menuItems"
        depth="this.props.depth + 1"
        maxHeight="this.props.maxHeight"
        onMenuClicked="this.props.onMenuClicked"
        onClose.bind="this.close"
        menuId="this.props.menuId"
        onMouseOver.bind="this.onMouseOverChildMenu"
        width="this.props.width"
        autoSelectFirstItem="this.subMenu.autoSelectFirstItem"
        onKeyboardNavigation.bind="this.onKeydown"
        disableKeyboardNavigation="this.props.disableKeyboardNavigation"
      />
    </Popover>
  </t>
</templates>
