Class GridCellPattern

src/aria/private/grid/cell.ts:42–162

/** The UI pattern for a grid cell. */
export class GridCellPattern implements GridCell {
  /** A unique identifier for the cell. */
  readonly id: SignalLike<string> = () => this.inputs.id();

  /** The html element that should receive focus. */
  readonly element: SignalLike<HTMLElement> = () => this.inputs.element();

  /** Whether the cell has focus. */
  readonly isFocused: WritableSignalLike<boolean> = signal(false);

  /** Whether the cell is selected. */
  readonly selected: WritableSignalLike<boolean>;

  /** Whether the cell is selectable. */
  readonly selectable: SignalLike<boolean> = () => this.inputs.selectable();

  /** Whether a cell is disabled. */
  readonly disabled: SignalLike<boolean> = () => this.inputs.disabled();

  /** The number of rows the cell should span. */
  readonly rowSpan: SignalLike<number> = () => this.inputs.rowSpan();

  /** The number of columns the cell should span. */
  readonly colSpan: SignalLike<number> = () => this.inputs.colSpan();

  /** Whether the cell is active. */
  readonly active: SignalLike<boolean> = computed(() => this.inputs.grid().activeCell() === this);

  /** Whether the cell is a selection anchor. */
  readonly anchor: SignalLike<true | undefined> = computed(() =>
    this.inputs.grid().anchorCell() === this ? true : undefined,
  );

  /** The `aria-selected` attribute for the cell. */
  readonly ariaSelected: SignalLike<boolean | undefined> = computed(() =>
    this.inputs.grid().inputs.enableSelection() && this.selectable() ? this.selected() : undefined,
  );

  /** The `aria-rowindex` attribute for the cell. */
  readonly ariaRowIndex: SignalLike<number | undefined> = computed(
    () =>
      this.inputs.row().rowIndex() ??
      this.inputs.rowIndex() ??
      this.inputs.grid().gridBehavior.rowIndex(this),
  );

  /** The `aria-colindex` attribute for the cell. */
  readonly ariaColIndex: SignalLike<number | undefined> = computed(
    () => this.inputs.colIndex() ?? this.inputs.grid().gridBehavior.colIndex(this),
  );

  /** The internal tab index calculation for the cell. */
  private readonly _tabIndex: SignalLike<-1 | 0> = computed(() =>
    this.inputs.grid().gridBehavior.cellTabIndex(this),
  );

  /** The tab index for the cell. If the cell contains a widget, the cell's tab index is -1. */
  readonly tabIndex: SignalLike<-1 | 0> = computed(() => {