Merge branch 'angular:main' into chips-overflow

Author: adolgachev

.bazelrc

@@ -1,3 +1,6 @@
+# Frozen lockfile
+common --lockfile_mode=error
+
 # Required by `rules_ts`.
 common --@aspect_rules_ts//ts:skipLibCheck=always
 common --@aspect_rules_ts//ts:default_to_tsc_transpiler

CHANGELOG.md

@@ -138,6 +138,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
     getLabel(): string;
     getMenu(): Menu | undefined;
     getMenuTrigger(): CdkMenuTrigger | null;
+    protected _handleClick(event: MouseEvent): void;
     get hasMenu(): boolean;
     isMenuOpen(): boolean;
     // (undocumented)

goldens/cdk/menu/index.api.md

@@ -52,7 +52,7 @@
     "ci-docs-monitor-test": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only scripts/docs-deploy/monitoring/ci-test.mts",
     "prepare": "husky"
   },
-  "version": "20.3.0-next.0",
+  "version": "21.0.0-next.0",
   "dependencies": {
     "@angular-devkit/core": "catalog:",
     "@angular-devkit/schematics": "catalog:",

package.json

@@ -1,7 +1,17 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": ["github>angular/dev-infra//renovate-presets/default.json5"],
-  "packageRules": [],
+  "baseBranchPatterns": ["main", "20.2.x"],
   "ignoreDeps": ["stylelint", "selenium-webdriver", "@types/selenium-webdriver", "typescript"],
-  "ignorePaths": ["docs/src/assets/stackblitz/**", "integration/**"]
+  "ignorePaths": ["docs/src/assets/stackblitz/**", "integration/**"],
+  "packageRules": [
+    {
+      "matchBaseBranches": ["main"],
+      "addLabels": ["target: minor"]
+    },
+    {
+      "matchBaseBranches": ["!main"],
+      "addLabels": ["target: patch"]
+    }
+  ]
 }

renovate.json

@@ -168,6 +168,13 @@ describe('List Selection', () => {
       selection.deselectAll(); // []
       expect(selection.inputs.value().length).toBe(0);
     });
+
+    it('should deselect items that are not in the list', () => {
+      const selection = getSelection({multi: signal(true)});
+      selection.inputs.value.update(() => [5]);
+      selection.deselectAll();
+      expect(selection.inputs.value().length).toBe(0);
+    });
   });
 
   describe('#toggleAll', () => {

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts

@@ -102,8 +102,25 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
 
   /** Deselects all items in the list. */
   deselectAll() {
-    for (const item of this.inputs.items()) {
-      this.deselect(item);
+    // If an item is not in the list, it forcefully gets deselected.
+    // This actually creates a bug for the following edge case:
+    //
+    // Setup: An item is not in the list (maybe it's lazily loaded), and it is disabled & selected.
+    // Expected: If deselectAll() is called, it should NOT get deselected (because it is disabled).
+    // Actual: Calling deselectAll() will still deselect the item.
+    //
+    // Why? Because we can't check if the item is disabled if it's not in the list.
+    //
+    // Alternatively, we could NOT deselect items that are not in the list, but this has the
+    // inverse (and more common) effect of keeping enabled items selected when they aren't in the
+    // list.
+
+    for (const value of this.inputs.value()) {
+      const item = this.inputs.items().find(i => i.value() === value);
+
+      item
+        ? this.deselect(item)
+        : this.inputs.value.update(values => values.filter(v => v !== value));
     }
   }
 

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts

@@ -196,7 +196,11 @@ export abstract class CdkMenuBase
 
   /** Setup the FocusKeyManager with the correct orientation for the menu. */
   private _setKeyManager() {
-    this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();
+    this.keyManager = new FocusKeyManager(this.items)
+      .withWrap()
+      .withTypeAhead()
+      .withHomeAndEnd()
+      .skipPredicate(() => false);
 
     if (this.orientation === 'horizontal') {
       this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');

src/cdk/menu/menu-base.ts

@@ -1,6 +1,6 @@
 import {Component, Type} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {dispatchKeyboardEvent} from '../testing/private';
+import {dispatchFakeEvent, dispatchKeyboardEvent} from '../testing/private';
 import {By} from '@angular/platform-browser';
 import {ENTER} from '../keycodes';
 import {CdkMenuModule} from './menu-module';
@@ -44,6 +44,33 @@ describe('MenuItem', () => {
       expect(nativeButton.hasAttribute('aria-disabled')).toBeFalse();
     });
 
+    it('should toggle a class when the item is disabled', () => {
+      expect(nativeButton.classList).not.toContain('cdk-menu-item-disabled');
+
+      menuItem.disabled = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(nativeButton.classList).toContain('cdk-menu-item-disabled');
+
+      menuItem.disabled = false;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(nativeButton.classList).not.toContain('cdk-menu-item-disabled');
+    });
+
+    it('should prevent the default click action when clicking on a disabled button', () => {
+      menuItem.disabled = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      const event = dispatchFakeEvent(nativeButton, 'click');
+      fixture.detectChanges();
+
+      expect(event.defaultPrevented).toBe(true);
+    });
+
     it('should not have a menu', () => {
       expect(menuItem.hasMenu).toBeFalse();
     });

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

@@ -40,11 +40,12 @@ import {eventDispatchesNativeClick} from './event-detection';
   host: {
     'role': 'menuitem',
     'class': 'cdk-menu-item',
+    '[class.cdk-menu-item-disabled]': 'disabled',
     '[tabindex]': '_tabindex',
     '[attr.aria-disabled]': 'disabled || null',
     '(blur)': '_resetTabIndex()',
     '(focus)': '_setTabIndex()',
-    '(click)': 'trigger()',
+    '(click)': '_handleClick($event)',
     '(keydown)': '_onKeydown($event)',
   },
 })
@@ -181,6 +182,16 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
     }
   }
 
+  /** Handles click events on the item. */
+  protected _handleClick(event: MouseEvent) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      this.trigger();
+    }
+  }
+
   /**
    * Handles keyboard events for the menu item, specifically either triggering the user defined
    * callback or opening/closing the current menu based on whether the left or right arrow key was