fixup! refactor(cdk-experimental/ui-patterns): add toolbar widget group to decouple toolbar and radio group

Author: ok7sai

src/cdk-experimental/radio-group/radio-group.ts

@@ -96,7 +96,12 @@ export function mapSignal<T, V>(
     '(pointerdown)': 'pattern.onPointerdown($event)',
     '(focusin)': 'onFocus()',
   },
-  hostDirectives: [CdkToolbarWidgetGroup],
+  hostDirectives: [
+    {
+      directive: CdkToolbarWidgetGroup,
+      inputs: ['disabled'],
+    },
+  ],
 })
 export class CdkRadioGroup<V> {
   /** A reference to the radio group element. */
@@ -118,22 +123,22 @@ export class CdkRadioGroup<V> {
   protected items = computed(() => this._cdkRadioButtons().map(radio => radio.pattern));
 
   /** Whether the radio group is vertically or horizontally oriented. */
-  orientation = input<'vertical' | 'horizontal'>('vertical');
+  readonly orientation = input<'vertical' | 'horizontal'>('vertical');
 
   /** Whether disabled items in the group should be skipped when navigating. */
-  skipDisabled = input(true, {transform: booleanAttribute});
+  readonly skipDisabled = input(true, {transform: booleanAttribute});
 
   /** The focus strategy used by the radio group. */
-  focusMode = input<'roving' | 'activedescendant'>('roving');
+  readonly focusMode = input<'roving' | 'activedescendant'>('roving');
 
   /** Whether the radio group is disabled. */
-  disabled = input(false, {transform: booleanAttribute});
+  readonly disabled = input(false, {transform: booleanAttribute});
 
   /** Whether the radio group is readonly. */
-  readonly = input(false, {transform: booleanAttribute});
+  readonly readonly = input(false, {transform: booleanAttribute});
 
   /** The value of the currently selected radio button. */
-  value = model<V | null>(null);
+  readonly value = model<V | null>(null);
 
   /** The internal selection state for the radio group. */
   private readonly _value = mapSignal<V | null, V[]>(this.value, {
@@ -183,16 +188,10 @@ export class CdkRadioGroup<V> {
     });
 
     afterRenderEffect(() => {
-      if (!this._hasFocused() && !this._hasToolbar()) {
+      if (!this._hasFocused() && this.pattern instanceof RadioGroupPattern) {
         this.pattern.setDefaultState();
       }
     });
-
-    afterRenderEffect(() => {
-      if (this._hasToolbar()) {
-        this._cdkToolbarWidgetGroup.disabled.set(this.disabled());
-      }
-    });
   }
 
   onFocus() {

src/cdk-experimental/toolbar/toolbar.spec.ts

@@ -1,4 +1,4 @@
-import {afterRenderEffect, Component, inject, signal} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Direction} from '@angular/cdk/bidi';
@@ -68,12 +68,15 @@ describe('CdkToolbar', () => {
   function updateToolbar(
     config: {
       disabled?: boolean;
+      widgetGroupDisabled?: boolean;
       orientation?: 'horizontal' | 'vertical';
       wrap?: boolean;
       skipDisabled?: boolean;
     } = {},
   ) {
     if (config.disabled !== undefined) testComponent.disabled.set(config.disabled);
+    if (config.widgetGroupDisabled !== undefined)
+      testComponent.widgetGroupDisabled.set(config.widgetGroupDisabled);
     if (config.orientation !== undefined) testComponent.orientation.set(config.orientation);
     if (config.wrap !== undefined) testComponent.wrap.set(config.wrap);
     if (config.skipDisabled !== undefined) testComponent.skipDisabled.set(config.skipDisabled);
@@ -145,7 +148,7 @@ describe('CdkToolbar', () => {
     describe('LTR', () => {
       beforeEach(() => {
         setupTestToolbar('ltr');
-        testWidgetGroupInstance.disabled.set(true);
+        updateToolbar({widgetGroupDisabled: true});
       });
 
       describe('vertical orientation', () => {
@@ -233,8 +236,7 @@ describe('CdkToolbar', () => {
     describe('RTL', () => {
       beforeEach(() => {
         setupTestToolbar('rtl');
-        testWidgetGroupInstance.disabled.set(true);
-        updateToolbar({orientation: 'horizontal'});
+        updateToolbar({widgetGroupDisabled: true, orientation: 'horizontal'});
       });
 
       describe('horizontal orientation', () => {
@@ -282,7 +284,9 @@ describe('CdkToolbar', () => {
     describe('LTR', () => {
       beforeEach(() => {
         setupTestToolbar('ltr');
-        click(testWidgetGroupInstance.cdkToolbarWidgetGroup.element());
+        const widgetGroupElement = testWidgetGroupInstance.cdkToolbarWidgetGroup.element();
+        click(widgetGroupElement);
+        testWidgetGroupInstance.lastAction.set(undefined);
       });
 
       describe('vertical orientation', () => {
@@ -380,7 +384,9 @@ describe('CdkToolbar', () => {
     describe('RTL', () => {
       beforeEach(() => {
         setupTestToolbar('rtl');
-        click(testWidgetGroupInstance.cdkToolbarWidgetGroup.element());
+        const widgetGroupElement = testWidgetGroupInstance.cdkToolbarWidgetGroup.element();
+        click(widgetGroupElement);
+        testWidgetGroupInstance.lastAction.set(undefined);
         updateToolbar({orientation: 'horizontal'});
       });
 
@@ -400,27 +406,28 @@ describe('CdkToolbar', () => {
 });
 
 @Component({
-  template: `inner UI patterns`,
+  template: 'a black box',
   selector: 'testWidgetGroup',
-  hostDirectives: [CdkToolbarWidgetGroup],
+  hostDirectives: [
+    {
+      directive: CdkToolbarWidgetGroup,
+      inputs: ['disabled'],
+    },
+  ],
 })
 class TestToolbarWidgetGroup {
   readonly cdkToolbarWidgetGroup = inject(CdkToolbarWidgetGroup);
-  readonly disabled = signal(false);
   readonly lastAction = signal<string | undefined>(undefined);
 
   constructor() {
-    afterRenderEffect(() => {
-      this.cdkToolbarWidgetGroup.disabled.set(this.disabled());
-    });
     this.cdkToolbarWidgetGroup.controls.set({
+      isOnFirstItem: () => false,
+      isOnLastItem: () => false,
       next: wrap => {
         this.lastAction.set(wrap ? 'nextWithWrap' : 'next');
-        return {leaveGroup: !wrap};
       },
       prev: wrap => {
         this.lastAction.set(wrap ? 'prevWithWrap' : 'prev');
-        return {leaveGroup: !wrap};
       },
       first: () => {
         this.lastAction.set('first');
@@ -455,7 +462,7 @@ class TestToolbarWidgetGroup {
     >
       <button cdkToolbarWidget data-value="widget">Widget Button 1</button>
       <button cdkToolbarWidget data-value="widget" [disabled]="true">Widget Button 2</button>
-      <testWidgetGroup></testWidgetGroup>
+      <testWidgetGroup [disabled]="widgetGroupDisabled()"></testWidgetGroup>
       <button cdkToolbarWidget data-value="widget">Widget Button 3</button>
     </div>
   `,
@@ -464,6 +471,7 @@ class TestToolbarWidgetGroup {
 class TestToolbarComponent {
   orientation = signal<'vertical' | 'horizontal'>('horizontal');
   disabled = signal(false);
+  widgetGroupDisabled = signal(false);
   wrap = signal(true);
   skipDisabled = signal(true);
 }

src/cdk-experimental/toolbar/toolbar.ts

@@ -250,7 +250,7 @@ export class CdkToolbarWidgetGroup<V> implements OnInit, OnDestroy {
   readonly element = computed(() => this._elementRef.nativeElement);
 
   /** Whether the widget group is disabled. */
-  readonly disabled = signal(false);
+  readonly disabled = input(false, {transform: booleanAttribute});
 
   /** The controls that can be performed on the widget group. */
   readonly controls = signal<ToolbarWidgetGroupControls | undefined>(undefined);

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

@@ -46,6 +46,12 @@ describe('List Navigation', () => {
       expect(nav.inputs.activeItem()).toBe(nav.inputs.items()[1]);
     });
 
+    it('should peek next item', () => {
+      const nav = getNavigation();
+      expect(nav.peekNext()).toBe(nav.inputs.items()[1]);
+      expect(nav.inputs.activeItem()).toBe(nav.inputs.items()[0]);
+    });
+
     it('should wrap', () => {
       const nav = getNavigation({wrap: signal(true)});
       nav.next(); // 0 -> 1
@@ -124,6 +130,13 @@ describe('List Navigation', () => {
       expect(nav.inputs.activeItem()).toBe(nav.inputs.items()[1]);
     });
 
+    it('should peek previous item', () => {
+      const nav = getNavigation();
+      nav.goto(nav.inputs.items()[2]);
+      expect(nav.peekPrev()).toBe(nav.inputs.items()[1]);
+      expect(nav.inputs.activeItem()).toBe(nav.inputs.items()[2]);
+    });
+
     it('should wrap', () => {
       const nav = getNavigation({wrap: signal(true)});
       nav.prev(); // 0 -> 4

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

@@ -38,11 +38,21 @@ export class ListNavigation<T extends ListNavigationItem> {
     return this._advance(1);
   }
 
+  /** Peeks the next item in the list. */
+  peekNext(): T | undefined {
+    return this._peek(1);
+  }
+
   /** Navigates to the previous item in the list. */
   prev(): boolean {
     return this._advance(-1);
   }
 
+  /** Peeks the previous item in the list. */
+  peekPrev(): T | undefined {
+    return this._peek(-1);
+  }
+
   /** Navigates to the first item in the list. */
   first(): boolean {
     const item = this.inputs.items().find(i => this.inputs.focusManager.isFocusable(i));
@@ -62,6 +72,12 @@ export class ListNavigation<T extends ListNavigationItem> {
 
   /** Advances to the next or previous focusable item in the list based on the given delta. */
   private _advance(delta: 1 | -1): boolean {
+    const item = this._peek(delta);
+    return item ? this.goto(item) : false;
+  }
+
+  /** Peeks the next or previous focusable item in the list based on the given delta. */
+  private _peek(delta: 1 | -1): T | undefined {
     const items = this.inputs.items();
     const itemCount = items.length;
     const startIndex = this.inputs.focusManager.activeIndex();
@@ -73,10 +89,10 @@ export class ListNavigation<T extends ListNavigationItem> {
     // when the index goes out of bounds.
     for (let i = step(startIndex); i !== startIndex && i < itemCount && i >= 0; i = step(i)) {
       if (this.inputs.focusManager.isFocusable(items[i])) {
-        return this.goto(items[i]);
+        return items[i];
       }
     }
 
-    return false;
+    return;
   }
 }

src/cdk-experimental/ui-patterns/radio-group/toolbar-radio-group.spec.ts

@@ -124,6 +124,20 @@ describe('ToolbarRadioGroup Pattern', () => {
       radioGroup.inputs.activeItem.set(radioButtons[0]);
     });
 
+    it('should correctly report when on the first item', () => {
+      radioGroup.inputs.activeItem.set(radioButtons[0]);
+      expect(radioGroup.isOnFirstItem()).toBe(true);
+      radioGroup.inputs.activeItem.set(radioButtons[1]);
+      expect(radioGroup.isOnFirstItem()).toBe(false);
+    });
+
+    it('should correctly report when on the last item', () => {
+      radioGroup.inputs.activeItem.set(radioButtons[4]);
+      expect(radioGroup.isOnLastItem()).toBe(true);
+      radioGroup.inputs.activeItem.set(radioButtons[3]);
+      expect(radioGroup.isOnLastItem()).toBe(false);
+    });
+
     it('should handle "next" control', () => {
       radioGroup.next(false);
       expect(radioGroup.inputs.activeItem()).toBe(radioButtons[1]);
@@ -184,19 +198,6 @@ describe('ToolbarRadioGroup Pattern', () => {
       expect(radioGroup.inputs.activeItem()).toBe(radioButtons[0]);
     });
 
-    it('should leave group on "next" at last item', () => {
-      radioGroup.inputs.activeItem.set(radioButtons[4]);
-      const result = radioGroup.next(false);
-      expect(result?.leaveGroup).toBe(true);
-      expect(radioGroup.inputs.activeItem()).toBe(undefined);
-    });
-
-    it('should leave group on "prev" at first item', () => {
-      const result = radioGroup.prev(false);
-      expect(result?.leaveGroup).toBe(true);
-      expect(radioGroup.inputs.activeItem()).toBe(undefined);
-    });
-
     it('should wrap on "next" with wrap', () => {
       radioGroup.inputs.activeItem.set(radioButtons[4]);
       radioGroup.next(true);

src/cdk-experimental/ui-patterns/radio-group/toolbar-radio-group.ts

@@ -37,36 +37,28 @@ export class ToolbarRadioGroupPattern<V>
   /** Noop. The toolbar handles pointerdown events. */
   override onPointerdown(_: PointerEvent): void {}
 
+  /** Whether the radio group is currently on the first item. */
+  isOnFirstItem() {
+    return this.listBehavior.navigationBehavior.peekPrev() === undefined;
+  }
+
+  /** Whether the radio group is currently on the last item. */
+  isOnLastItem() {
+    return this.listBehavior.navigationBehavior.peekNext() === undefined;
+  }
+
   /** Navigates to the next radio button in the group. */
   next(wrap: boolean) {
     this.wrap.set(wrap);
-    const item = this.inputs.activeItem();
     this.listBehavior.next();
-
-    const leaveGroup = item === this.inputs.activeItem();
-    if (leaveGroup) {
-      this.inputs.activeItem.set(undefined);
-    }
     this.wrap.set(false);
-    return {
-      leaveGroup,
-    };
   }
 
   /** Navigates to the previous radio button in the group. */
   prev(wrap: boolean) {
     this.wrap.set(wrap);
-    const item = this.inputs.activeItem();
     this.listBehavior.prev();
-
-    const leaveGroup = item === this.inputs.activeItem();
-    if (leaveGroup) {
-      this.inputs.activeItem.set(undefined);
-    }
     this.wrap.set(false);
-    return {
-      leaveGroup,
-    };
   }
 
   /** Navigates to the first radio button in the group. */

src/cdk-experimental/ui-patterns/toolbar/toolbar-widget-group.ts

@@ -13,11 +13,17 @@ import type {ToolbarPattern} from './toolbar';
 
 /** An interface that allows sub patterns to expose the necessary controls for the toolbar. */
 export interface ToolbarWidgetGroupControls {
+  /** Whether the widget group is currently on the first item. */
+  isOnFirstItem(): boolean;
+
+  /** Whether the widget group is currently on the last item. */
+  isOnLastItem(): boolean;
+
   /** Navigates to the next widget in the group. */
-  next(wrap: boolean): {leaveGroup: boolean} | undefined;
+  next(wrap: boolean): void;
 
   /** Navigates to the previous widget in the group. */
-  prev(wrap: boolean): {leaveGroup: boolean} | undefined;
+  prev(wrap: boolean): void;
 
   /** Navigates to the first widget in the group. */
   first(): void;
@@ -78,8 +84,10 @@ export class ToolbarWidgetGroupPattern<V> implements ListItem<V> {
 
   /** Default toolbar widget group controls when no controls provided. */
   private readonly _defaultControls: ToolbarWidgetGroupControls = {
-    next: wrap => ({leaveGroup: !wrap}),
-    prev: wrap => ({leaveGroup: !wrap}),
+    isOnFirstItem: () => true,
+    isOnLastItem: () => true,
+    next: () => {},
+    prev: () => {},
     first: () => {},
     last: () => {},
     unfocus: () => {},