refactor(aria/grid): rework selection and add calendar example (#32210)

(cherry picked from commit 1092256)

Author: ok7sai

src/aria/grid/grid.ts

@@ -46,7 +46,7 @@ export class Grid {
   private readonly _elementRef = inject(ElementRef);
 
   /** The rows that make up the grid. */
-  private readonly _rows = contentChildren(GridRow);
+  private readonly _rows = contentChildren(GridRow, {descendants: true});
 
   /** The UI patterns for the rows in the grid. */
   private readonly _rowPatterns: Signal<GridRowPattern[]> = computed(() =>
@@ -77,6 +77,15 @@ export class Grid {
   /** The wrapping behavior for keyboard navigation along the column axis. */
   readonly colWrap = input<'continuous' | 'loop' | 'nowrap'>('loop');
 
+  /** Whether multiple cells in the grid can be selected. */
+  readonly multi = input(false, {transform: booleanAttribute});
+
+  /** The selection strategy used by the grid. */
+  readonly selectionMode = input<'follow' | 'explicit'>('follow');
+
+  /** Whether enable range selections (with modifier keys or dragging). */
+  readonly enableRangeSelection = input(false, {transform: booleanAttribute});
+
   /** The UI pattern for the grid. */
   readonly _pattern = new GridPattern({
     ...this,
@@ -85,6 +94,7 @@ export class Grid {
   });
 
   constructor() {
+    afterRenderEffect(() => this._pattern.setDefaultStateEffect());
     afterRenderEffect(() => this._pattern.resetStateEffect());
     afterRenderEffect(() => this._pattern.focusEffect());
   }
@@ -123,7 +133,7 @@ export class GridRow {
   private readonly _elementRef = inject(ElementRef);
 
   /** The cells that make up this row. */
-  private readonly _cells = contentChildren(GridCell);
+  private readonly _cells = contentChildren(GridCell, {descendants: true});
 
   /** The UI patterns for the cells in this row. */
   private readonly _cellPatterns: Signal<GridCellPattern[]> = computed(() =>
@@ -163,6 +173,7 @@ export class GridRow {
     '[attr.rowspan]': '_pattern.rowSpan()',
     '[attr.colspan]': '_pattern.colSpan()',
     '[attr.data-active]': '_pattern.active()',
+    '[attr.data-anchor]': '_pattern.anchor()',
     '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.aria-rowspan]': '_pattern.rowSpan()',
     '[attr.aria-colspan]': '_pattern.colSpan()',

src/aria/private/behaviors/grid/grid-navigation.spec.ts

@@ -177,6 +177,19 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true and softDisabled is false', () => {
+        const {gridNav, gridFocus} = setupGridNavigation(signal(cells), {
+          softDisabled: signal(false),
+        });
+        gridNav.gotoCoords({row: 1, col: 0});
+        cells[0][0].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Up, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 0, col: 0});
+        expect(gridNav.peek(direction.Up, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
 
     describe('down', () => {
@@ -216,6 +229,19 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true and softDisabled is false', () => {
+        const {gridNav, gridFocus} = setupGridNavigation(signal(cells), {
+          softDisabled: signal(false),
+        });
+        gridNav.gotoCoords({row: 1, col: 0});
+        cells[2][0].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Down, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 2, col: 0});
+        expect(gridNav.peek(direction.Down, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
 
     describe('left', () => {
@@ -237,9 +263,7 @@ describe('GridNavigation', () => {
       });
 
       it('should return the next coordinates even if all cells are disabled', () => {
-        cells.flat().forEach(function (cell) {
-          cell.disabled.set(true);
-        });
+        cells.flat().forEach(c => c.disabled.set(true));
         gridNav.gotoCoords({row: 1, col: 0});
 
         const nextCoords = gridNav.peek(direction.Left, gridFocus.activeCoords());
@@ -257,6 +281,19 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true when softDisabled is false', () => {
+        const {gridNav, gridFocus} = setupGridNavigation(signal(cells), {
+          softDisabled: signal(false),
+        });
+        gridNav.gotoCoords({row: 0, col: 1});
+        cells[0][0].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Left, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 0, col: 0});
+        expect(gridNav.peek(direction.Left, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
 
     describe('right', () => {
@@ -278,9 +315,7 @@ describe('GridNavigation', () => {
       });
 
       it('should return the next coordinates even if all cells are disabled', () => {
-        cells.flat().forEach(function (cell) {
-          cell.disabled.set(true);
-        });
+        cells.flat().forEach(c => c.disabled.set(true));
         gridNav.gotoCoords({row: 1, col: 0});
 
         const nextCoords = gridNav.peek(direction.Right, gridFocus.activeCoords());
@@ -298,6 +333,19 @@ describe('GridNavigation', () => {
 
         expect(nextCoords).toBeUndefined();
       });
+
+      it('should get disabled cells when allowDisabled is true and softDisabled is false', () => {
+        const {gridNav, gridFocus} = setupGridNavigation(signal(cells), {
+          softDisabled: signal(false),
+        });
+        gridNav.gotoCoords({row: 0, col: 1});
+        cells[0][2].disabled.set(true);
+
+        const nextCoords = gridNav.peek(direction.Right, gridFocus.activeCoords(), 'nowrap', true);
+
+        expect(nextCoords).toEqual({row: 0, col: 2});
+        expect(gridNav.peek(direction.Right, gridFocus.activeCoords(), 'nowrap')).toBeUndefined();
+      });
     });
   });
 
@@ -1971,6 +2019,17 @@ describe('GridNavigation', () => {
       expect(gridFocus.activeCell()).toBe(cells[1][0]);
       expect(gridFocus.activeCoords()).toEqual({row: 1, col: 0});
     });
+
+    it('should get disabled cells when allowDisabled is true and softDisabled is false', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridNav} = setupGridNavigation(signal(cells), {softDisabled: signal(false)});
+      cells[0][0].disabled.set(true);
+
+      const firstCoords = gridNav.peekFirst(undefined, true);
+
+      expect(firstCoords).toEqual({row: 0, col: 0});
+      expect(gridNav.peekFirst()).toEqual({row: 0, col: 1});
+    });
   });
 
   describe('last/peekLast', () => {
@@ -2049,5 +2108,16 @@ describe('GridNavigation', () => {
       expect(gridFocus.activeCell()!.id()).toBe('cell-1-3');
       expect(gridFocus.activeCoords()).toEqual({row: 1, col: 3});
     });
+
+    it('should get disabled cells when allowDisabled is true and softDisabled is false', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridNav} = setupGridNavigation(signal(cells), {softDisabled: signal(false)});
+      cells[2][2].disabled.set(true);
+
+      const lastCoords = gridNav.peekLast(undefined, true);
+
+      expect(lastCoords).toEqual({row: 2, col: 2});
+      expect(gridNav.peekLast()).toEqual({row: 2, col: 1});
+    });
   });
 });

src/aria/private/behaviors/grid/grid-navigation.ts

@@ -73,9 +73,14 @@ export class GridNavigation<T extends GridNavigationCell> {
   /**
    * Gets the coordinates of the next focusable cell in a given direction, without changing focus.
    */
-  peek(direction: Delta, fromCoords: RowCol, wrap?: WrapStrategy): RowCol | undefined {
+  peek(
+    direction: Delta,
+    fromCoords: RowCol,
+    wrap?: WrapStrategy,
+    allowDisabled?: boolean,
+  ): RowCol | undefined {
     wrap = wrap ?? (direction.row !== undefined ? this.inputs.rowWrap() : this.inputs.colWrap());
-    return this._peekDirectional(direction, fromCoords, wrap);
+    return this._peekDirectional(direction, fromCoords, wrap, allowDisabled);
   }
 
   /**
@@ -90,14 +95,14 @@ export class GridNavigation<T extends GridNavigationCell> {
    * Gets the coordinates of the first focusable cell.
    * If a row is not provided, searches the entire grid.
    */
-  peekFirst(row?: number): RowCol | undefined {
+  peekFirst(row?: number, allowDisabled?: boolean): RowCol | undefined {
     const fromCoords = {
       row: row ?? 0,
       col: -1,
     };
     return row === undefined
-      ? this._peekDirectional(direction.Right, fromCoords, 'continuous')
-      : this._peekDirectional(direction.Right, fromCoords, 'nowrap');
+      ? this._peekDirectional(direction.Right, fromCoords, 'continuous', allowDisabled)
+      : this._peekDirectional(direction.Right, fromCoords, 'nowrap', allowDisabled);
   }
 
   /**
@@ -113,14 +118,14 @@ export class GridNavigation<T extends GridNavigationCell> {
    * Gets the coordinates of the last focusable cell.
    * If a row is not provided, searches the entire grid.
    */
-  peekLast(row?: number): RowCol | undefined {
+  peekLast(row?: number, allowDisabled?: boolean): RowCol | undefined {
     const fromCoords = {
       row: row ?? this.inputs.grid.maxRowCount() - 1,
       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', allowDisabled)
+      : this._peekDirectional(direction.Left, fromCoords, 'nowrap', allowDisabled);
   }
 
   /**
@@ -139,6 +144,7 @@ export class GridNavigation<T extends GridNavigationCell> {
     delta: Delta,
     fromCoords: RowCol,
     wrap: 'continuous' | 'loop' | 'nowrap',
+    allowDisabled: boolean = false,
   ): RowCol | undefined {
     const fromCell = this.inputs.grid.getCell(fromCoords);
     const maxRowCount = this.inputs.grid.maxRowCount();
@@ -190,7 +196,7 @@ export class GridNavigation<T extends GridNavigationCell> {
       if (
         nextCell !== undefined &&
         nextCell !== fromCell &&
-        this.inputs.gridFocus.isFocusable(nextCell)
+        (allowDisabled || this.inputs.gridFocus.isFocusable(nextCell))
       ) {
         return nextCoords;
       }

src/aria/private/behaviors/grid/grid-selection.spec.ts

@@ -207,4 +207,97 @@ describe('GridSelection', () => {
       expect(validCellIds.length).toBe(allCellIds.length - 2);
     });
   });
+
+  describe('undo', () => {
+    it('should undo a select operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+
+      gridSelection.select({row: 1, col: 1});
+      expect(cells[1][1].selected()).toBe(true);
+
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(false);
+    });
+
+    it('should undo a deselect operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells[1][1].selected.set(true);
+
+      gridSelection.deselect({row: 1, col: 1});
+      expect(cells[1][1].selected()).toBe(false);
+
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(true);
+    });
+
+    it('should undo a toggle operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells[0][0].selected.set(true);
+
+      gridSelection.toggle({row: 0, col: 0}, {row: 0, col: 1});
+      expect(cells[0][0].selected()).toBe(false);
+      expect(cells[0][1].selected()).toBe(true);
+
+      gridSelection.undo();
+      expect(cells[0][0].selected()).toBe(true);
+      expect(cells[0][1].selected()).toBe(false);
+    });
+
+    it('should undo a selectAll operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+
+      gridSelection.selectAll();
+      expect(cells.flat().every(c => c.selected())).toBe(true);
+
+      gridSelection.undo();
+      expect(cells.flat().every(c => !c.selected())).toBe(true);
+    });
+
+    it('should undo a deselectAll operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells.flat().forEach(c => c.selected.set(true));
+
+      gridSelection.deselectAll();
+      expect(cells.flat().every(c => !c.selected())).toBe(true);
+
+      gridSelection.undo();
+      expect(cells.flat().every(c => c.selected())).toBe(true);
+    });
+
+    it('should do nothing if there is nothing to undo', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      cells[1][1].selected.set(true);
+
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(true);
+    });
+
+    it('should only undo the last operation', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+
+      gridSelection.select({row: 0, col: 0});
+      gridSelection.select({row: 1, col: 1});
+      expect(cells[1][1].selected()).toBe(true);
+
+      gridSelection.undo();
+      expect(cells[0][0].selected()).toBe(true);
+      expect(cells[1][1].selected()).toBe(false);
+    });
+
+    it('should do nothing after undoing once', () => {
+      const cells = createTestGrid(createGridA);
+      const {gridSelection} = setupGridSelection(signal(cells));
+      gridSelection.select({row: 1, col: 1});
+      gridSelection.undo();
+      gridSelection.undo();
+      expect(cells[1][1].selected()).toBe(false);
+    });
+  });
 });