Merge branch 'rc/v12.0.0' into develop-v12-merge

core/menu.ts

@@ -12,10 +12,10 @@
 // Former goog.module ID: Blockly.Menu
 
 import * as browserEvents from './browser_events.js';
-import type {MenuItem} from './menuitem.js';
+import type {MenuSeparator} from './menu_separator.js';
+import {MenuItem} from './menuitem.js';
 import * as aria from './utils/aria.js';
 import {Coordinate} from './utils/coordinate.js';
-import * as dom from './utils/dom.js';
 import type {Size} from './utils/size.js';
 import * as style from './utils/style.js';
 
@@ -24,11 +24,9 @@ import * as style from './utils/style.js';
  */
 export class Menu {
   /**
-   * Array of menu items.
-   * (Nulls are never in the array, but typing the array as nullable prevents
-   * the compiler from objecting to .indexOf(null))
+   * Array of menu items and separators.
    */
-  private readonly menuItems: MenuItem[] = [];
+  private readonly menuItems: Array<MenuItem | MenuSeparator> = [];
 
   /**
    * Coordinates of the pointerdown event that caused this menu to open. Used to
@@ -70,10 +68,10 @@ export class Menu {
   /**
    * Add a new menu item to the bottom of this menu.
    *
-   * @param menuItem Menu item to append.
+   * @param menuItem Menu item or separator to append.
    * @internal
    */
-  addChild(menuItem: MenuItem) {
+  addChild(menuItem: MenuItem | MenuSeparator) {
     this.menuItems.push(menuItem);
   }
 
@@ -83,10 +81,10 @@ export class Menu {
    * @param container Element upon which to append this menu.
    * @returns The menu's root DOM element.
    */
+
   render(container: Element): HTMLDivElement {
     const element = document.createElement('div');
-    // goog-menu is deprecated, use blocklyMenu.  May 2020.
-    element.className = 'blocklyMenu goog-menu blocklyNonSelectable';
+    element.className = 'blocklyMenu';
     element.tabIndex = 0;
     if (this.roleName) {
       aria.setRole(element, this.roleName);
@@ -157,7 +155,6 @@ export class Menu {
     const el = this.getElement();
     if (el) {
       el.focus({preventScroll: true});
-      dom.addClass(el, 'blocklyFocused');
     }
   }
 
@@ -166,7 +163,6 @@ export class Menu {
     const el = this.getElement();
     if (el) {
       el.blur();
-      dom.removeClass(el, 'blocklyFocused');
     }
   }
 
@@ -230,7 +226,8 @@ export class Menu {
     while (currentElement && currentElement !== menuElem) {
       if (currentElement.classList.contains('blocklyMenuItem')) {
         // Having found a menu item's div, locate that menu item in this menu.
-        for (let i = 0, menuItem; (menuItem = this.menuItems[i]); i++) {
+        const items = this.getMenuItems();
+        for (let i = 0, menuItem; (menuItem = items[i]); i++) {
           if (menuItem.getElement() === currentElement) {
             return menuItem;
           }
@@ -252,11 +249,9 @@ export class Menu {
   setHighlighted(item: MenuItem | null) {
     const currentHighlighted = this.highlightedItem;
     if (currentHighlighted) {
-      currentHighlighted.setHighlighted(false);
       this.highlightedItem = null;
     }
     if (item) {
-      item.setHighlighted(true);
       this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.
@@ -316,7 +311,8 @@ export class Menu {
   private highlightHelper(startIndex: number, delta: number) {
     let index = startIndex + delta;
     let menuItem;
-    while ((menuItem = this.menuItems[index])) {
+    const items = this.getMenuItems();
+    while ((menuItem = items[index])) {
       if (menuItem.isEnabled()) {
         this.setHighlighted(menuItem);
         break;
@@ -408,9 +404,7 @@ export class Menu {
   // Keyboard events.
 
   /**
-   * Attempts to handle a keyboard event, if the menu item is enabled, by
-   * calling
-   * {@link Menu#handleKeyEventInternal_}.
+   * Attempts to handle a keyboard event.
    *
    * @param e Key event to handle.
    */
@@ -479,4 +473,13 @@ export class Menu {
     menuSize.height = menuDom.scrollHeight;
     return menuSize;
   }
+
+  /**
+   * Returns the action menu items (omitting separators) in this menu.
+   *
+   * @returns The MenuItem objects displayed in this menu.
+   */
+  private getMenuItems(): MenuItem[] {
+    return this.menuItems.filter((item) => item instanceof MenuItem);
+  }
 }