feat(cdk/menu): move experimental CDK menu into stable (#24826)

Moves the code for the CDK experimental menu into the CDK.

.github/CODEOWNERS

@@ -77,6 +77,7 @@
 /src/cdk/drag-drop/**                              @crisbeto
 /src/cdk/keycodes/**                               @andrewseguin
 /src/cdk/layout/**                                 @andrewseguin
+/src/cdk/menu/**                                   @mmalerba @crisbeto
 /src/cdk/observers/**                              @andrewseguin @crisbeto
 /src/cdk/overlay/**                                @jelbourn @crisbeto
 /src/cdk/platform/**                               @andrewseguin @devversion
@@ -132,7 +133,6 @@
 /src/cdk-experimental/*                            @andrewseguin
 /src/cdk-experimental/column-resize/**             @andrewseguin
 /src/cdk-experimental/combobox/**                  @jelbourn
-/src/cdk-experimental/menu/**                      @jelbourn
 /src/cdk-experimental/popover-edit/**              @andrewseguin
 /src/cdk-experimental/scrolling/**                 @mmalerba
 /src/cdk-experimental/table-scroll-container/**    @andrewseguin
@@ -156,7 +156,6 @@
 /src/dev-app/cdk-dialog/**                         @crisbeto
 /src/dev-app/cdk-experimental-combobox/**          @jelbourn
 /src/dev-app/cdk-experimental-listbox/**           @jelbourn
-/src/dev-app/cdk-experimental-menu/**              @jelbourn
 /src/dev-app/checkbox/**                           @jelbourn @devversion
 /src/dev-app/chips/**                              @andrewseguin
 /src/dev-app/clipboard/**                          @andrewseguin
@@ -178,6 +177,7 @@
 /src/dev-app/icon/**                               @andrewseguin
 /src/dev-app/input/**                              @mmalerba
 /src/dev-app/layout/**                             @andrewseguin
+/src/dev-app/cdk-menu/**                           @mmalerba @crisbeto
 /src/dev-app/input-modality/**                     @jelbourn
 /src/dev-app/list/**                               @andrewseguin @crisbeto @devversion
 /src/dev-app/live-announcer/**                     @jelbourn

.ng-dev/commit-message.ts

@@ -12,7 +12,6 @@ export const commitMessage: CommitMessageConfig = {
     'cdk-experimental/column-resize',
     'cdk-experimental/combobox',
     'cdk-experimental/listbox',
-    'cdk-experimental/menu',
     'cdk-experimental/popover-edit',
     'cdk-experimental/scrolling',
     'cdk-experimental/selection',
@@ -27,6 +26,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk/drag-drop',
     'cdk/keycodes',
     'cdk/layout',
+    'cdk/menu',
     'cdk/observers',
     'cdk/overlay',
     'cdk/platform',

src/cdk-experimental/config.bzl

@@ -2,7 +2,6 @@
 CDK_EXPERIMENTAL_ENTRYPOINTS = [
     "column-resize",
     "combobox",
-    "menu",
     "listbox",
     "popover-edit",
     "scrolling",

src/cdk/config.bzl

@@ -10,6 +10,7 @@ CDK_ENTRYPOINTS = [
     "drag-drop",
     "keycodes",
     "layout",
+    "menu",
     "observers",
     "overlay",
     "platform",

src/cdk-experimental/menu/BUILD.bazel → src/cdk/menu/BUILD.bazel

@@ -1,4 +1,10 @@
-load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+load(
+    "//tools:defaults.bzl",
+    "markdown_to_html",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+)
 
 package(default_visibility = ["//visibility:public"])
 
@@ -41,3 +47,13 @@ ng_web_test_suite(
     name = "unit_tests",
     deps = [":unit_test_sources"],
 )
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":menu.md"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/cdk-experimental/menu/context-menu-trigger.spec.ts → src/cdk/menu/context-menu-trigger.spec.ts

@@ -3,7 +3,7 @@ import {CdkMenuModule} from './menu-module';
 import {TestBed, waitForAsync, ComponentFixture} from '@angular/core/testing';
 import {CdkMenu} from './menu';
 import {CdkContextMenuTrigger} from './context-menu-trigger';
-import {dispatchKeyboardEvent, dispatchMouseEvent} from '../../cdk/testing/private';
+import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {By} from '@angular/platform-browser';
 import {CdkMenuItem} from './menu-item';
 import {CdkMenuTrigger} from './menu-trigger';

src/cdk-experimental/menu/menu-item-checkbox.spec.ts → src/cdk/menu/menu-item-checkbox.spec.ts

@@ -5,7 +5,7 @@ import {CdkMenuModule} from './menu-module';
 import {CdkMenuItemCheckbox} from './menu-item-checkbox';
 import {CDK_MENU} from './menu-interface';
 import {CdkMenu} from './menu';
-import {MENU_STACK, MenuStack} from '@angular/cdk-experimental/menu/menu-stack';
+import {MENU_STACK, MenuStack} from './menu-stack';
 
 describe('MenuItemCheckbox', () => {
   let fixture: ComponentFixture<SingleCheckboxButton>;

src/cdk-experimental/menu/menu-item-radio.spec.ts → src/cdk/menu/menu-item-radio.spec.ts

@@ -6,7 +6,7 @@ import {CdkMenuModule} from './menu-module';
 import {CdkMenuItemRadio} from './menu-item-radio';
 import {CDK_MENU} from './menu-interface';
 import {CdkMenu} from './menu';
-import {MENU_STACK, MenuStack} from '@angular/cdk-experimental/menu/menu-stack';
+import {MENU_STACK, MenuStack} from './menu-stack';
 
 describe('MenuItemRadio', () => {
   let fixture: ComponentFixture<SimpleRadioButton>;

src/cdk-experimental/menu/menu-item.spec.ts → src/cdk/menu/menu-item.spec.ts

@@ -5,7 +5,7 @@ import {CdkMenuModule} from './menu-module';
 import {CdkMenuItem} from './menu-item';
 import {CDK_MENU} from './menu-interface';
 import {CdkMenu} from './menu';
-import {MENU_STACK, MenuStack} from '@angular/cdk-experimental/menu/menu-stack';
+import {MENU_STACK, MenuStack} from './menu-stack';
 
 describe('MenuItem', () => {
   describe('with no complex inner elements', () => {

src/cdk-experimental/menu/menu.md → src/cdk/menu/menu.md

@@ -1,13 +1,13 @@
-The `@angular/cdk-experimental/menu` module provides directives to help create custom menu
+The `@angular/cdk/menu` module provides directives to help create custom menu
 interactions based on the [WAI ARIA specification][aria].
 
-By using `@angular/cdk-experimental/menu` you get all of the expected behaviors for an accessible
+By using `@angular/cdk/menu` you get all of the expected behaviors for an accessible
 experience, including bidi layout support, keyboard interaction, and focus management. All
 directives apply their associated ARIA roles to their host element.
 
 ### Supported ARIA Roles
 
-The directives in `@angular/cdk-experimental/menu` set the appropriate roles on their host element.
+The directives in `@angular/cdk/menu` set the appropriate roles on their host element.
 
 | Directive           | ARIA Role        |
 | ------------------- | ---------------- |
@@ -196,9 +196,9 @@ Finally, you can provide state for each item using the `checked` attribute.
 
 ### Smart Menu Aim
 
-`@angular/cdk-experimental/menu` intelligently predicts when a user intends to navigate to an open
-submenu and prevent premature closeouts. This functionality prevents users from having to hunt
-through the open menus in a maze-like fashion to reach their destination.
+`@angular/cdk/menu` intelligently predicts when a user intends to navigate to an open submenu and
+prevent premature closeouts. This functionality prevents users from having to hunt through the open
+menus in a maze-like fashion to reach their destination.
 
 ![menu aim diagram][diagram]
 
@@ -214,12 +214,11 @@ detect this intention and will trigger the next menu.
 
 ### Accessibility
 
-The set of directives defined in `@angular/cdk-experimental/menu` follow accessibility best
-practices as defined in the [ARIA spec][menubar]. Specifically, the menus are aware of left-to-right
-and right-to-left layouts and opened appropriately. You should however add any necessary CSS styles.
-Menu items should always have meaningful labels, whether through text content, `aria-label`, or
-`aria-labelledby`. Finally, keyboard interaction is supported as defined in the [ARIA menubar
-keyboard interaction spec][keyboard].
+The set of directives defined in `@angular/cdk/menu` follow accessibility best practices as defined
+in the [ARIA spec][menubar]. Specifically, the menus are aware of left-to-right and right-to-left
+layouts and opened appropriately. You should however add any necessary CSS styles. Menu items should
+always have meaningful labels, whether through text content, `aria-label`, or `aria-labelledby`.
+Finally, keyboard interaction is supported as defined in the [ARIA menubar keyboard interaction spec][keyboard].
 
 <!-- links -->
 

src/components-examples/cdk-experimental/menu/BUILD.bazel → src/components-examples/cdk/menu/BUILD.bazel

@@ -10,7 +10,7 @@ ng_module(
         "**/*.css",
     ]),
     deps = [
-        "//src/cdk-experimental/menu",
+        "//src/cdk/menu",
         "@npm//@angular/forms",
     ],
 )

src/components-examples/cdk-experimental/menu/index.ts → src/components-examples/cdk/menu/index.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {CdkMenuModule} from '@angular/cdk-experimental/menu';
+import {CdkMenuModule} from '@angular/cdk/menu';
 import {CdkMenuStandaloneMenuExample} from './cdk-menu-standalone-menu/cdk-menu-standalone-menu-example';
 import {CdkMenuStandaloneStatefulMenuExample} from './cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example';
 import {CdkMenuMenubarExample} from './cdk-menu-menubar/cdk-menu-menubar-example';

src/components-examples/config.bzl

@@ -54,8 +54,8 @@ ALL_EXAMPLES = [
     "//src/components-examples/cdk/clipboard",
     "//src/components-examples/cdk/a11y",
     "//src/components-examples/cdk/layout",
+    "//src/components-examples/cdk/menu",
     "//src/components-examples/cdk/overlay",
-    "//src/components-examples/cdk-experimental/menu",
     "//src/components-examples/cdk-experimental/popover-edit",
     "//src/components-examples/cdk-experimental/selection",
 ]

src/dev-app/BUILD.bazel

@@ -26,7 +26,7 @@ ng_module(
         "//src/dev-app/cdk-dialog",
         "//src/dev-app/cdk-experimental-combobox",
         "//src/dev-app/cdk-experimental-listbox",
-        "//src/dev-app/cdk-experimental-menu",
+        "//src/dev-app/cdk-menu",
         "//src/dev-app/checkbox",
         "//src/dev-app/chips",
         "//src/dev-app/clipboard",

src/dev-app/cdk-experimental-menu/BUILD.bazel → src/dev-app/cdk-menu/BUILD.bazel

@@ -3,15 +3,15 @@ load("//tools:defaults.bzl", "ng_module")
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "cdk-experimental-menu",
+    name = "cdk-menu",
     srcs = glob(["**/*.ts"]),
     assets = [
         "cdk-menu-demo.html",
         "cdk-menu-demo.css",
     ],
     deps = [
-        "//src/cdk-experimental/menu",
-        "//src/components-examples/cdk-experimental/menu",
+        "//src/cdk/menu",
+        "//src/components-examples/cdk/menu",
         "@npm//@angular/router",
     ],
 )

src/dev-app/cdk-experimental-menu/cdk-menu-demo-module.ts → src/dev-app/cdk-menu/cdk-menu-demo-module.ts

@@ -9,8 +9,8 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
-import {CdkMenuModule} from '@angular/cdk-experimental/menu';
-import {CdkMenuExamplesModule} from '@angular/components-examples/cdk-experimental/menu';
+import {CdkMenuModule} from '@angular/cdk/menu';
+import {CdkMenuExamplesModule} from '@angular/components-examples/cdk/menu';
 
 import {CdkMenuDemo} from './cdk-menu-demo';
 

src/dev-app/dev-app/dev-app-layout.ts

@@ -37,9 +37,9 @@ export class DevAppLayout {
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},
     {name: 'CDK Dialog', route: '/cdk-dialog'},
+    {name: 'CDK Menu', route: '/cdk-menu'},
     {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
     {name: 'CDK Experimental Listbox', route: '/cdk-experimental-listbox'},
-    {name: 'CDK Experimental Menu', route: '/cdk-experimental-menu'},
     {name: 'Checkbox', route: '/checkbox'},
     {name: 'Chips', route: '/chips'},
     {name: 'Clipboard', route: '/clipboard'},

src/dev-app/menubar/BUILD.bazel

@@ -10,7 +10,7 @@ ng_module(
         ":mat_menubar_demo_scss",
     ],
     deps = [
-        "//src/cdk-experimental/menu",
+        "//src/cdk/menu",
         "//src/material-experimental/menubar",
         "@npm//@angular/router",
     ],

src/dev-app/menubar/mat-menubar-demo-module.ts

@@ -9,7 +9,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {MatMenuBarModule} from '@angular/material-experimental/menubar';
-import {CdkMenuModule} from '@angular/cdk-experimental/menu';
+import {CdkMenuModule} from '@angular/cdk/menu';
 import {MatMenuBarDemo, DemoMenu, DemoMenuItem} from './mat-menubar-demo';
 
 @NgModule({

src/dev-app/menubar/mat-menubar-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component, ViewEncapsulation} from '@angular/core';
-import {CdkMenu, CdkMenuItem, CdkMenuGroup, CDK_MENU} from '@angular/cdk-experimental/menu';
+import {CdkMenu, CdkMenuItem, CdkMenuGroup, CDK_MENU} from '@angular/cdk/menu';
 
 @Component({
   templateUrl: 'mat-menubar-demo.html',

src/dev-app/routes.ts

@@ -62,9 +62,8 @@ export const DEV_APP_ROUTES: Routes = [
       ),
   },
   {
-    path: 'cdk-experimental-menu',
-    loadChildren: () =>
-      import('./cdk-experimental-menu/cdk-menu-demo-module').then(m => m.CdkMenuDemoModule),
+    path: 'cdk-menu',
+    loadChildren: () => import('./cdk-menu/cdk-menu-demo-module').then(m => m.CdkMenuDemoModule),
   },
   {
     path: 'checkbox',

src/material-experimental/menubar/BUILD.bazel

@@ -20,7 +20,7 @@ ng_module(
         ":menubar-item.css",
     ] + glob(["**/*.html"]),
     deps = [
-        "//src/cdk-experimental/menu",
+        "//src/cdk/menu",
         "@npm//@angular/core",
     ],
 )
@@ -48,8 +48,8 @@ ng_test_library(
     ),
     deps = [
         ":menubar",
-        "//src/cdk-experimental/menu",
         "//src/cdk/keycodes",
+        "//src/cdk/menu",
         "//src/cdk/testing/private",
         "@npm//@angular/platform-browser",
     ],

src/material-experimental/menubar/menubar-item.spec.ts

@@ -1,6 +1,6 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, waitForAsync, TestBed} from '@angular/core/testing';
-import {CdkMenuItem, CdkMenuModule, CdkMenu} from '@angular/cdk-experimental/menu';
+import {CdkMenuItem, CdkMenuModule, CdkMenu} from '@angular/cdk/menu';
 import {MatMenuBarItem} from './menubar-item';
 import {MatMenuBarModule} from './menubar-module';
 

src/material-experimental/menubar/menubar-item.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
-import {CdkMenuItem} from '@angular/cdk-experimental/menu';
+import {CdkMenuItem} from '@angular/cdk/menu';
 
 /** Removes all icons from within the given element. */
 function removeIcons(element: Element) {

src/material-experimental/menubar/menubar-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CdkMenuModule} from '@angular/cdk-experimental/menu';
+import {CdkMenuModule} from '@angular/cdk/menu';
 import {MatMenuBar} from './menubar';
 import {MatMenuBarItem} from './menubar-item';
 

src/material-experimental/menubar/menubar.spec.ts

@@ -1,6 +1,6 @@
 import {Component, ViewChild, ElementRef} from '@angular/core';
 import {RIGHT_ARROW} from '@angular/cdk/keycodes';
-import {CdkMenuBar} from '@angular/cdk-experimental/menu';
+import {CdkMenuBar} from '@angular/cdk/menu';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
 import {MatMenuBarModule} from './menubar-module';

src/material-experimental/menubar/menubar.ts

@@ -7,13 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {
-  CDK_MENU,
-  CdkMenuBar,
-  CdkMenuGroup,
-  MenuStack,
-  MENU_STACK,
-} from '@angular/cdk-experimental/menu';
+import {CDK_MENU, CdkMenuBar, CdkMenuGroup, MenuStack, MENU_STACK} from '@angular/cdk/menu';
 
 /**
  * A material design Menubar adhering to the functionality of CdkMenuBar. MatMenubar