fixup! feat(aria/grid): create the aria grid

Author: ok7sai

src/aria/ui-patterns/behaviors/grid/grid-navigation.ts

@@ -19,8 +19,8 @@ type ExactlyOneKey<T, K extends keyof T = keyof T> = {
 /** Represents a directional change in the grid, either by row or by column. */
 type Delta = ExactlyOneKey<{row: -1 | 1; col: -1 | 1}>;
 
-/** */
-export const Direction: Record<'Up' | 'Down' | 'Left' | 'Right', Delta> = {
+/** Constants for the four cardinal directions. */
+export const direction: Record<'Up' | 'Down' | 'Left' | 'Right', Delta> = {
   Up: {row: -1},
   Down: {row: 1},
   Left: {col: -1},
@@ -67,13 +67,17 @@ export class GridNavigation<T extends GridNavigationCell> {
     return this.inputs.gridFocus.focusCoordinates(coords);
   }
 
-  /** */
+  /**
+   * Gets the coordinates of the next focusable cell in a given direction, without changing focus.
+   */
   peek(direction: Delta, fromCoords: RowCol): RowCol | undefined {
     const wrap = direction.row !== undefined ? this.inputs.rowWrap() : this.inputs.colWrap();
     return this._peekDirectional(direction, fromCoords, wrap);
   }
 
-  /** */
+  /**
+   * Navigates to the next focusable cell in a given direction.
+   */
   advance(direction: Delta): boolean {
     const nextCoords = this.peek(direction, this.inputs.gridFocus.activeCoords());
     return !!nextCoords && this.gotoCoords(nextCoords);
@@ -89,8 +93,8 @@ export class GridNavigation<T extends GridNavigationCell> {
       col: -1,
     };
     return row === undefined
-      ? this._peekDirectional(Direction.Right, fromCoords, 'continuous')
-      : this._peekDirectional(Direction.Right, fromCoords, 'nowrap');
+      ? this._peekDirectional(direction.Right, fromCoords, 'continuous')
+      : this._peekDirectional(direction.Right, fromCoords, 'nowrap');
   }
 
   /**
@@ -112,8 +116,8 @@ export class GridNavigation<T extends GridNavigationCell> {
       col: this.inputs.grid.maxColCount(),
     };
     return row === undefined
-      ? this._peekDirectional(Direction.Left, fromCoords, 'continuous')
-      : this._peekDirectional(Direction.Left, fromCoords, 'nowrap');
+      ? this._peekDirectional(direction.Left, fromCoords, 'continuous')
+      : this._peekDirectional(direction.Left, fromCoords, 'nowrap');
   }
 
   /**
@@ -138,7 +142,6 @@ export class GridNavigation<T extends GridNavigationCell> {
     const maxColCount = this.inputs.grid.maxColCount();
     const rowDelta = delta.row ?? 0;
     const colDelta = delta.col ?? 0;
-    const generalDelta = delta.row ?? delta.col;
     let nextCoords = {...fromCoords};
 
     for (let step = 0; step < this._maxSteps(); step++) {
@@ -151,6 +154,7 @@ export class GridNavigation<T extends GridNavigationCell> {
       if (wrap === 'nowrap' && isWrapping) return;
 
       if (wrap === 'continuous') {
+        const generalDelta = delta.row ?? delta.col;
         const rowStep = isWrapping ? generalDelta : rowDelta;
         const colStep = isWrapping ? generalDelta : colDelta;
 

src/aria/ui-patterns/behaviors/grid/grid.ts

@@ -11,7 +11,7 @@ import {SignalLike} from '../signal-like/signal-like';
 import {GridData, BaseGridCell, GridDataInputs, RowCol} from './grid-data';
 import {GridFocus, GridFocusCell, GridFocusInputs} from './grid-focus';
 import {
-  Direction,
+  direction,
   GridNavigation,
   GridNavigationCell,
   GridNavigationInputs,
@@ -91,51 +91,51 @@ export class Grid<T extends GridCell> {
 
   /** Navigates to the cell above the currently active cell. */
   up(): boolean {
-    return this.navigationBehavior.advance(Direction.Up);
+    return this.navigationBehavior.advance(direction.Up);
   }
 
   /** Extends the selection to the cell above the selection anchor. */
   rangeSelectUp(): void {
-    const coords = this.navigationBehavior.peek(Direction.Up, this.selectionAnchor());
+    const coords = this.navigationBehavior.peek(direction.Up, this.selectionAnchor());
     if (coords === undefined) return;
 
     this._rangeSelectCoords(coords);
   }
 
   /** Navigates to the cell below the currently active cell. */
   down(): boolean {
-    return this.navigationBehavior.advance(Direction.Down);
+    return this.navigationBehavior.advance(direction.Down);
   }
 
   /** Extends the selection to the cell below the selection anchor. */
   rangeSelectDown(): void {
-    const coords = this.navigationBehavior.peek(Direction.Down, this.selectionAnchor());
+    const coords = this.navigationBehavior.peek(direction.Down, this.selectionAnchor());
     if (coords === undefined) return;
 
     this._rangeSelectCoords(coords);
   }
 
   /** Navigates to the cell to the left of the currently active cell. */
   left(): boolean {
-    return this.navigationBehavior.advance(Direction.Left);
+    return this.navigationBehavior.advance(direction.Left);
   }
 
   /** Extends the selection to the cell to the left of the selection anchor. */
   rangeSelectLeft(): void {
-    const coords = this.navigationBehavior.peek(Direction.Left, this.selectionAnchor());
+    const coords = this.navigationBehavior.peek(direction.Left, this.selectionAnchor());
     if (coords === undefined) return;
 
     this._rangeSelectCoords(coords);
   }
 
   /** Navigates to the cell to the right of the currently active cell. */
   right(): boolean {
-    return this.navigationBehavior.advance(Direction.Right);
+    return this.navigationBehavior.advance(direction.Right);
   }
 
   /** Extends the selection to the cell to the right of the selection anchor. */
   rangeSelectRight(): void {
-    const coords = this.navigationBehavior.peek(Direction.Right, this.selectionAnchor());
+    const coords = this.navigationBehavior.peek(direction.Right, this.selectionAnchor());
     if (coords === undefined) return;
 
     this._rangeSelectCoords(coords);

src/aria/ui-patterns/grid/grid.ts

@@ -13,41 +13,41 @@ import {Grid, GridInputs as GridBehaviorInputs} from '../behaviors/grid';
 import type {GridRowPattern} from './row';
 import type {GridCellPattern} from './cell';
 
-/** */
+/** Represents the required inputs for the grid pattern. */
 export interface GridInputs extends Omit<GridBehaviorInputs<GridCellPattern>, 'cells'> {
-  /** */
+  /** The rows that make up the grid. */
   rows: SignalLike<GridRowPattern[]>;
 
-  /** */
+  /** A function that returns the grid cell associated with a given element. */
   getCell: (e: Element) => GridCellPattern | undefined;
 }
 
-/** */
+/** The UI pattern for a grid, handling keyboard navigation, focus, and selection. */
 export class GridPattern {
-  /** */
+  /** The underlying grid behavior that this pattern is built on. */
   readonly gridBehavior: Grid<GridCellPattern>;
 
-  /** */
+  /** The cells in the grid. */
   readonly cells = computed(() => this.gridBehavior.data.cells());
 
-  /** */
+  /** The tab index for the grid. */
   readonly tabIndex = computed(() => this.gridBehavior.gridTabIndex());
 
-  /** */
+  /** Whether the grid is disabled. */
   readonly disabled = computed(() => this.gridBehavior.gridDisabled());
 
-  /** */
+  /** The ID of the currently active descendant cell. */
   readonly activeDescendant = computed(() => this.gridBehavior.activeDescendant());
 
-  /** */
+  /** The currently active cell. */
   readonly activeCell = computed(() => this.gridBehavior.focusBehavior.activeCell());
 
-  /** */
+  /** Whether grid navigation is currently paused by a cell (e.g. an input field). */
   readonly pauseGridNavigation = computed(() =>
     this.gridBehavior.data.flattenCells().some(c => c.pauseGridNavigation()),
   );
 
-  /** */
+  /** Whether the user is currently dragging to select a range of cells. */
   readonly dragging = signal<boolean>(false);
 
   /** The keydown event manager for the grid. */
@@ -117,7 +117,7 @@ export class GridPattern {
     return manager;
   });
 
-  /** */
+  /** The pointerup event manager for the grid. */
   readonly pointerup = computed(() => {
     const manager = new PointerEventManager();