refactor: remove onNavigate output

Author: ok7sai

src/aria/grid/grid.ts

@@ -21,15 +21,7 @@ import {
   Signal,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {
-  GridPattern,
-  GridRowPattern,
-  GridCellPattern,
-  GridCellWidgetPattern,
-  NavigateEvent,
-} from '../private';
-
-export {NavigateEvent} from '../private';
+import {GridPattern, GridRowPattern, GridCellPattern, GridCellWidgetPattern} from '../private';
 
 /**
  * The container for a grid. It provides keyboard navigation and focus management for the grid's
@@ -135,9 +127,6 @@ export class Grid {
   /** Whether enable range selections (with modifier keys or dragging). */
   readonly enableRangeSelection = input(false, {transform: booleanAttribute});
 
-  /** Emits when navigation occurs within the grid. */
-  readonly onNavigate = output<NavigateEvent>();
-
   /** The UI pattern for the grid. */
   readonly _pattern = new GridPattern({
     ...this,
@@ -151,12 +140,6 @@ export class Grid {
     afterRenderEffect(() => this._pattern.resetFocusEffect());
     afterRenderEffect(() => this._pattern.restoreFocusEffect());
     afterRenderEffect(() => this._pattern.focusEffect());
-    afterRenderEffect(() => {
-      const navigateEvent = this._pattern.lastNavigateEvent();
-      if (navigateEvent) {
-        this.onNavigate.emit(navigateEvent);
-      }
-    });
   }
 
   /** Gets the cell pattern for a given element. */

src/aria/private/grid/grid.ts

@@ -6,20 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {computed, signal, untracked, WritableSignal} from '@angular/core';
+import {computed, signal, untracked} from '@angular/core';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {KeyboardEventManager, PointerEventManager, Modifier} from '../behaviors/event-manager';
 import {NavOptions, Grid, GridInputs as GridBehaviorInputs} from '../behaviors/grid';
 import type {GridRowPattern} from './row';
 import type {GridCellPattern} from './cell';
 
-/** An event that represents navigation within the grid. */
-export interface NavigateEvent {
-  prev?: HTMLElement;
-  next?: HTMLElement;
-  rawEvent?: KeyboardEvent | PointerEvent;
-}
-
 /** Represents the required inputs for the grid pattern. */
 export interface GridInputs extends Omit<GridBehaviorInputs<GridCellPattern>, 'cells'> {
   /** The html element of the grid. */
@@ -74,9 +67,6 @@ export class GridPattern {
       : undefined,
   );
 
-  /** The last navigation event that occurred in the grid. */
-  readonly lastNavigateEvent: WritableSignal<NavigateEvent | undefined> = signal(undefined);
-
   /** Whether to pause grid navigation and give the keyboard control to cell or widget. */
   readonly pauseNavigation: SignalLike<boolean> = computed(() =>
     this.gridBehavior.data
@@ -117,14 +107,14 @@ export class GridPattern {
       selectOne: this.inputs.enableSelection() && this.inputs.selectionMode() === 'follow',
     };
     manager
-      .on('ArrowUp', e => this._advance(() => this.gridBehavior.up(opts), e))
-      .on('ArrowDown', e => this._advance(() => this.gridBehavior.down(opts), e))
-      .on(this.prevColKey(), e => this._advance(() => this.gridBehavior.left(opts), e))
-      .on(this.nextColKey(), e => this._advance(() => this.gridBehavior.right(opts), e))
-      .on('Home', e => this._advance(() => this.gridBehavior.firstInRow(opts), e))
-      .on('End', e => this._advance(() => this.gridBehavior.lastInRow(opts), e))
-      .on([Modifier.Ctrl], 'Home', e => this._advance(() => this.gridBehavior.first(opts), e))
-      .on([Modifier.Ctrl], 'End', e => this._advance(() => this.gridBehavior.last(opts), e));
+      .on('ArrowUp', () => this.gridBehavior.up(opts))
+      .on('ArrowDown', () => this.gridBehavior.down(opts))
+      .on(this.prevColKey(), () => this.gridBehavior.left(opts))
+      .on(this.nextColKey(), () => this.gridBehavior.right(opts))
+      .on('Home', () => this.gridBehavior.firstInRow(opts))
+      .on('End', () => this.gridBehavior.lastInRow(opts))
+      .on([Modifier.Ctrl], 'Home', () => this.gridBehavior.first(opts))
+      .on([Modifier.Ctrl], 'End', () => this.gridBehavior.last(opts));
 
     // Basic explicit selection handlers.
     if (this.inputs.enableSelection() && this.inputs.selectionMode() === 'explicit') {
@@ -164,14 +154,12 @@ export class GridPattern {
 
     // Navigation without selection.
     if (!this.inputs.enableSelection()) {
-      manager.on(e =>
-        this._advance(() => {
-          const cell = this.inputs.getCell(e.target as Element);
-          if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
+      manager.on(e => {
+        const cell = this.inputs.getCell(e.target as Element);
+        if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
 
-          this.gridBehavior.gotoCell(cell);
-        }, e),
-      );
+        this.gridBehavior.gotoCell(cell);
+      });
     }
 
     // Navigation with selection.
@@ -406,16 +394,4 @@ export class GridPattern {
       activeCell.focus();
     }
   }
-
-  /** Performs a navigation operation and emits a navigate event. */
-  private _advance(op: () => void, event?: KeyboardEvent | PointerEvent): void {
-    const prev = this.activeCell()?.element();
-    op();
-    const next = this.activeCell()?.element();
-    this.lastNavigateEvent.set({
-      prev,
-      next,
-      rawEvent: event,
-    });
-  }
 }

src/components-examples/aria/grid/grid-calendar/grid-calendar-example.html

@@ -18,7 +18,6 @@
     [enableSelection]="true"
     [softDisabled]="false"
     selectionMode="explicit"
-    (onNavigate)="onNavigate($event)"
   >
     <thead>
       <tr>

src/components-examples/aria/grid/grid-calendar/grid-calendar-example.ts

@@ -14,10 +14,9 @@ import {
   computed,
   untracked,
   afterRenderEffect,
-  viewChildren,
 } from '@angular/core';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
-import {Grid, GridRow, GridCell, GridCellWidget, NavigateEvent} from '@angular/aria/grid';
+import {Grid, GridRow, GridCell, GridCellWidget} from '@angular/aria/grid';
 
 const DAYS_PER_WEEK = 7;
 
@@ -36,7 +35,6 @@ interface CalendarCell<D = any> {
   imports: [Grid, GridRow, GridCell, GridCellWidget],
 })
 export class GridCalendarExample<D> {
-  private readonly _buttons = viewChildren(GridCellWidget);
   private readonly _dateAdapter = inject<DateAdapter<D>>(DateAdapter, {optional: true})!;
   private readonly _dateFormats = inject<MatDateFormats>(MAT_DATE_FORMATS, {optional: true})!;
   private readonly _firstWeekOffset: Signal<number> = computed(() => {
@@ -102,26 +100,6 @@ export class GridCalendarExample<D> {
         }
       }
     });
-
-    afterRenderEffect(() => {
-      const buttons = this._buttons();
-      const scrollUp = untracked(() => this.scrolledUp());
-
-      if (scrollUp) {
-        buttons[buttons.length - 1].element().focus();
-        this.scrolledUp.set(false);
-      }
-    });
-
-    afterRenderEffect(() => {
-      const buttons = this._buttons();
-      const scrollDown = untracked(() => this.scrolledDown());
-
-      if (scrollDown) {
-        buttons[0].element().focus();
-        this.scrolledDown.set(false);
-      }
-    });
   }
 
   nextMonth(): void {
@@ -132,26 +110,6 @@ export class GridCalendarExample<D> {
     this.viewMonth.set(this._dateAdapter.addCalendarMonths(this.viewMonth(), -1));
   }
 
-  onNavigate(event: NavigateEvent) {
-    const prev = event.prev;
-    const next = event.next;
-    if (prev === undefined || next == undefined) return;
-    if (!(event.rawEvent instanceof KeyboardEvent)) return;
-
-    const key = event.rawEvent.key;
-    // Hitting edge
-    if (prev === next) {
-      if (key === 'ArrowUp' || key === 'ArrowLeft') {
-        this.prevMonth();
-        this.scrolledUp.set(true);
-      }
-      if (key === 'ArrowDown' || key === 'ArrowRight') {
-        this.nextMonth();
-        this.scrolledDown.set(true);
-      }
-    }
-  }
-
   private _createWeekCells(viewMonth: D): CalendarCell[][] {
     const daysInMonth = this._dateAdapter.getNumDaysInMonth(viewMonth);
     const dateNames = this._dateAdapter.getDateNames();