refactor(aria/grid): simplify Grid cell to only support single widget

Too much overhead to support multi widgets in a cell, and it's not a
common use case. If a cell with multi widgets is desired, developers
should leverage the compelx widget type to support in cell widget
navigation.

Author: ok7sai

goldens/aria/grid/index.api.md

@@ -39,7 +39,6 @@ export class GridCell {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly id: _angular_core.InputSignal<string>;
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: GridCellPattern;
     readonly role: _angular_core.InputSignal<"gridcell" | "columnheader" | "rowheader">;
     readonly rowIndex: _angular_core.InputSignal<number | undefined>;
@@ -49,9 +48,8 @@ export class GridCell {
     protected readonly _tabIndex: Signal<number>;
     readonly tabindex: _angular_core.InputSignal<number | undefined>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
-    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["_widgets"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["_widget"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCell, never>;
 }

goldens/aria/private/index.api.md

@@ -292,20 +292,19 @@ export class DeferredContentAware {
 }
 
 // @public
-export interface GridCellInputs extends GridCell, Omit<ListNavigationInputs<GridCellWidgetPattern>, 'focusMode' | 'items' | 'activeItem' | 'softDisabled' | 'element'> {
+export interface GridCellInputs extends GridCell {
     colIndex: SignalLike<number | undefined>;
     getWidget: (e: Element | null) => GridCellWidgetPattern | undefined;
     grid: SignalLike<GridPattern>;
     row: SignalLike<GridRowPattern>;
     rowIndex: SignalLike<number | undefined>;
-    widgets: SignalLike<GridCellWidgetPattern[]>;
+    widget: SignalLike<GridCellWidgetPattern | undefined>;
 }
 
 // @public
 export class GridCellPattern implements GridCell {
     constructor(inputs: GridCellInputs);
     readonly active: SignalLike<boolean>;
-    readonly activeWidget: WritableSignalLike<GridCellWidgetPattern | undefined>;
     readonly anchor: SignalLike<true | undefined>;
     readonly ariaColIndex: SignalLike<number | undefined>;
     readonly ariaRowIndex: SignalLike<number | undefined>;
@@ -314,52 +313,40 @@ export class GridCellPattern implements GridCell {
     readonly disabled: SignalLike<boolean>;
     readonly element: SignalLike<HTMLElement>;
     focus(): void;
-    readonly focusBehavior: ListFocus<GridCellWidgetPattern>;
     readonly id: SignalLike<string>;
     // (undocumented)
     readonly inputs: GridCellInputs;
     readonly isActivated: SignalLike<boolean>;
     readonly isFocused: WritableSignalLike<boolean>;
-    readonly keydown: SignalLike<KeyboardEventManager<KeyboardEvent>>;
-    readonly multiWidgetMode: SignalLike<boolean>;
-    readonly navigationActivated: WritableSignalLike<boolean>;
-    readonly navigationBehavior: ListNavigation<GridCellWidgetPattern>;
-    readonly navigationDisabled: SignalLike<boolean>;
-    readonly nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
     onFocusIn(event: FocusEvent): void;
     onFocusOut(event: FocusEvent): void;
     onKeydown(event: KeyboardEvent): void;
-    readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
     readonly rowSpan: SignalLike<number>;
     readonly selectable: SignalLike<boolean>;
     readonly selected: WritableSignalLike<boolean>;
-    readonly singleWidgetMode: SignalLike<boolean>;
-    startNavigation(): void;
-    stopNavigation(): void;
     readonly tabIndex: SignalLike<-1 | 0>;
-    readonly widgetActivated: SignalLike<boolean>;
+    readonly widget: SignalLike<GridCellWidgetPattern | undefined>;
     widgetTabIndex(): -1 | 0;
 }
 
 // @public
-export interface GridCellWidgetInputs extends Omit<ListNavigationItem, 'index'> {
+export interface GridCellWidgetInputs {
     cell: SignalLike<GridCellPattern>;
+    disabled: SignalLike<boolean>;
     element: SignalLike<HTMLElement>;
     focusTarget: SignalLike<HTMLElement | undefined>;
     widgetType: SignalLike<'simple' | 'complex' | 'editable'>;
 }
 
 // @public
-export class GridCellWidgetPattern implements ListNavigationItem {
+export class GridCellWidgetPattern {
     constructor(inputs: GridCellWidgetInputs);
     activate(event?: KeyboardEvent | FocusEvent): void;
     readonly active: SignalLike<boolean>;
     deactivate(event?: KeyboardEvent | FocusEvent): void;
     readonly disabled: SignalLike<boolean>;
     readonly element: SignalLike<HTMLElement>;
     focus(): void;
-    readonly id: SignalLike<string>;
-    readonly index: SignalLike<number>;
     // (undocumented)
     readonly inputs: GridCellWidgetInputs;
     readonly isActivated: WritableSignalLike<boolean>;

src/aria/grid/grid-cell.ts

@@ -11,7 +11,7 @@ import {
   afterRenderEffect,
   booleanAttribute,
   computed,
-  contentChildren,
+  contentChild,
   Directive,
   ElementRef,
   inject,
@@ -21,7 +21,7 @@ import {
   Renderer2,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {GridCellPattern} from '../private';
+import {GridCellPattern, GridCellWidgetPattern} from '../private';
 import {GridCellWidget} from './grid-cell-widget';
 import {GRID_CELL, GRID_ROW} from './grid-tokens';
 
@@ -55,12 +55,12 @@ export class GridCell {
   /** Whether the cell is currently active (focused). */
   readonly active = computed(() => this._pattern.active());
 
-  /** The widgets contained within this cell, if any. */
-  private readonly _widgets = contentChildren(GridCellWidget, {descendants: true});
+  /** The widget contained within this cell, if any. */
+  private readonly _widget = contentChild(GridCellWidget, {descendants: true});
 
   /** The UI pattern for the widget in this cell. */
-  private readonly _widgetPatterns: Signal<any[]> = computed(() =>
-    this._widgets().map(w => w._pattern),
+  private readonly _widgetPattern: Signal<GridCellWidgetPattern | undefined> = computed(
+    () => this._widget()?._pattern,
   );
 
   /** The parent row. */
@@ -96,12 +96,6 @@ export class GridCell {
   /** Whether the cell is selectable. */
   readonly selectable = input<boolean>(true);
 
-  /** Orientation of the widgets in the cell. */
-  readonly orientation = input<'vertical' | 'horizontal'>('horizontal');
-
-  /** Whether widgets navigation wraps. */
-  readonly wrap = input(true, {transform: booleanAttribute});
-
   /** The tabindex override. */
   readonly tabindex = input<number | undefined>();
 
@@ -118,7 +112,7 @@ export class GridCell {
     ...this,
     grid: this._row._gridPattern,
     row: () => this._row._pattern,
-    widgets: this._widgetPatterns,
+    widget: this._widgetPattern,
     getWidget: e => this._getWidget(e),
     element: () => this.element,
   });
@@ -160,11 +154,13 @@ export class GridCell {
   /** Gets the cell widget pattern for a given element. */
   private _getWidget(element: Element | null | undefined): any | undefined {
     let target = element;
+    const widget = this._widgetPattern();
+
+    if (!widget) return undefined;
 
     while (target) {
-      const pattern = this._widgetPatterns().find(w => w.element() === target);
-      if (pattern) {
-        return pattern;
+      if (widget.element() === target) {
+        return widget;
       }
 
       target = target.parentElement?.closest('[ngGridCellWidget]');