feat(cdk-experimental/ui-patterns) toolbar inner group wrap navigation

Author: demanr

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

@@ -14,17 +14,22 @@ import {List, ListItem} from '../behaviors/list/list';
  * Represents the properties exposed by a radio group that need to be accessed by a radio button.
  * This exists to avoid circular dependency errors between the radio group and radio button.
  */
-type GeneralWidget = {
+type ToolbarWidget = {
   id: SignalLike<string>;
+  index: SignalLike<number>;
   element: SignalLike<HTMLElement>;
   disabled: SignalLike<boolean>;
+  searchTerm: SignalLike<any>;
+  value: SignalLike<any>;
 };
 
 interface RadioGroupLike<V> {
   /** The list behavior for the radio group. */
-  listBehavior: List<RadioButtonPattern<V>, V>;
+  listBehavior: List<RadioButtonPattern<V> | ToolbarWidget, V>;
   /** Whether the list is readonly */
   readonly: SignalLike<boolean>;
+  /** Whether the radio group is disabled. */
+  disabled: SignalLike<boolean>;
 }
 
 /** Represents the required inputs for a radio button in a radio group. */
@@ -42,7 +47,9 @@ export class RadioButtonPattern<V> {
   value: SignalLike<V>;
 
   /** The position of the radio button within the group. */
-  index = computed(() => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1);
+  index: SignalLike<number> = computed(
+    () => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1,
+  );
 
   /** Whether the radio button is currently the active one (focused). */
   active = computed(() => this.group()?.listBehavior.inputs.activeItem() === this);
@@ -75,5 +82,3 @@ export class RadioButtonPattern<V> {
     this.disabled = inputs.disabled;
   }
 }
-
-export type RadioButtonPatternType<V> = InstanceType<typeof RadioButtonPattern<V>>;

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

@@ -112,10 +112,10 @@ export class RadioGroupPattern<V> {
   pointerdown = computed(() => {
     const manager = new PointerEventManager();
 
-    // // If within a disabled toolbar relinquish pointer control
-    // if (this.inputs.toolbar() && this.inputs.toolbar()!.disabled()) {
-    //   return manager;
-    // }
+    // When within a toolbar relinquish pointer control
+    if (this.inputs.toolbar()) {
+      return manager;
+    }
 
     if (this.readonly()) {
       // Navigate focus only in readonly mode.

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

@@ -16,7 +16,7 @@ import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-mana
 // } from '../behaviors/list-navigation/list-navigation';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 
-import {RadioButtonPatternType, RadioButtonPattern} from '../radio-group/radio-button';
+import {RadioButtonPattern} from '../radio-group/radio-button';
 
 import {List, ListInputs, ListItem} from '../behaviors/list/list';
 
@@ -59,24 +59,47 @@ export class ToolbarPattern<V> {
     return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
   });
 
+  /** The alternate key used to navigate to the previous widget */
+  altPrevKey = computed(() => {
+    if (this.inputs.orientation() === 'vertical') {
+      return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    }
+    return 'ArrowUp';
+  });
+
+  /** The alternate key used to navigate to the next widget. */
+  altNextKey = computed(() => {
+    if (this.inputs.orientation() === 'vertical') {
+      return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    }
+    return 'ArrowDown';
+  });
+
   /** The keydown event manager for the toolbar. */
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
-    console.log(' all curent itmes', this.inputs.items());
 
     return manager
       .on(' ', () => this.toolbarSelectOverride())
       .on('Enter', () => this.toolbarSelectOverride())
       .on(this.prevKey, () => this.listBehavior.prev())
-      .on('ArrowDown', () => {
+      .on(this.nextKey, () => this.listBehavior.next())
+      .on(this.altNextKey, () => {
         const activeItem = this.inputs.activeItem();
         if (activeItem instanceof RadioButtonPattern && activeItem.group()!!) {
           activeItem.group()?.listBehavior.next();
         } else {
           this.listBehavior.next();
         }
       })
-      .on('ArrowRight', () => this.listBehavior.next())
+      .on(this.altPrevKey, () => {
+        const activeItem = this.inputs.activeItem();
+        if (activeItem instanceof RadioButtonPattern && activeItem.group()!!) {
+          activeItem.group()?.listBehavior.prev();
+        } else {
+          this.listBehavior.prev();
+        }
+      })
       .on('Home', () => this.listBehavior.first())
       .on('End', () => this.listBehavior.last());
   });
@@ -87,10 +110,9 @@ export class ToolbarPattern<V> {
     /** If the active item is a Radio Button, indicate to the group the selection */
     if (activeItem instanceof RadioButtonPattern) {
       const group = activeItem.group();
-      if (group && !group.readonly()) {
+      if (group && !group.readonly() && !group.disabled()) {
         group.listBehavior.selectOne();
       }
-      // todo fix
     } else {
       /** Item is a Toolbar Widget, manually select it */
       if (activeItem && activeItem.element() && !activeItem.disabled())
@@ -112,9 +134,13 @@ export class ToolbarPattern<V> {
     if (!item) return;
 
     if (item instanceof RadioButtonPattern) {
-      // have the radio group handle the selection
+      const group = item.group();
+      if (group && !group.readonly() && !group.disabled()) {
+        group.listBehavior.goto(item, {selectOne: true});
+      }
+    } else {
+      this.listBehavior.goto(item);
     }
-    this.listBehavior.goto(item);
   }
 
   /** Handles keydown events for the toolbar. */
@@ -126,7 +152,6 @@ export class ToolbarPattern<V> {
 
   /** Handles pointerdown events for the toolbar. */
   onPointerdown(event: PointerEvent) {
-    console.log('this disabled', this.disabled());
     if (!this.disabled()) {
       this.pointerdown().handle(event);
     }
@@ -177,7 +202,6 @@ export class ToolbarPattern<V> {
     }
 
     if (firstItem) {
-      console.log('setting active item to', firstItem);
       this.inputs.activeItem.set(firstItem);
     }
   }