Class GridPattern

src/aria/private/grid/grid.ts:40–343

/** 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());

  /** Whether the grid is multi-selectable. */
  readonly multiSelectable = computed(() =>
    this.inputs.enableSelection() ? this.inputs.multi() : undefined,
  );

  /** 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());

  /** The current selection anchor cell. */
  readonly anchorCell: SignalLike<GridCellPattern | undefined> = computed(() =>
    this.multiSelectable() ? this.gridBehavior.selectionAnchorCell() : undefined,
  );

  /** Whether to pause grid navigation and give the keyboard control to cell or widget. */
  readonly pauseNavigation: SignalLike<boolean> = computed(() =>
    this.gridBehavior.data
      .cells()
      .flat()
      .reduce((res, c) => res || c.isActivated(), false),
  );

  /** Whether the focus is in the grid. */
  readonly isFocused = signal(false);

  /** Whether the grid has received focus once. */
  readonly hasBeenInteracted = signal(false);

  /** Whether the user is currently dragging to select a range of cells. */
  readonly dragging = signal(false);

  /** The key for navigating to the previous column. */
  readonly prevColKey = computed(() =>
    this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft',
  );

  /** The key for navigating to the next column. */
  readonly nextColKey = computed(() =>
    this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight',
  );

  /** The keydown event manager for the grid. */
  readonly keydown = computed(() => {