Class GridCellWidgetPattern

src/aria/private/grid/widget.ts:45–199

/** The UI pattern for a widget inside a grid cell. */
export class GridCellWidgetPattern {
  /** The html element that should receive focus. */
  readonly element: SignalLike<HTMLElement> = () => this.inputs.element();

  /** The element that should receive focus. */
  readonly widgetHost: SignalLike<HTMLElement> = () =>
    resolveElement(this.inputs.focusTarget(), this.element()) ?? this.element();

  /** Whether the widget is disabled. */
  readonly disabled: SignalLike<boolean> = computed(
    () => this.inputs.disabled() || this.inputs.cell().disabled(),
  );

  /** The tab index for the widget. */
  readonly tabIndex: SignalLike<-1 | 0> = computed(() => {
    if (this.inputs.focusTarget()) {
      return -1;
    }
    return this.inputs.cell().widgetTabIndex();
  });

  /** Whether the widget is the active widget in the cell. */
  readonly active: SignalLike<boolean> = computed(
    () => this.inputs.cell().active() && this.inputs.cell().widget() === this,
  );

  /** Whether the widget is currently activated. */
  readonly isActivated: WritableSignalLike<boolean> = signal(false);

  /** The last event that caused the widget to be activated. */
  readonly lastActivateEvent: WritableSignalLike<KeyboardEvent | FocusEvent | undefined> =
    signal(undefined);

  /** The last event that caused the widget to be deactivated. */
  readonly lastDeactivateEvent: WritableSignalLike<KeyboardEvent | FocusEvent | undefined> =
    signal(undefined);

  /** The keyboard event manager for the widget. */
  readonly keydown = computed(() => {
    const manager = new KeyboardEventManager();

    // Simple widgets emit notification on interaction without capturing event flow
    if (this.inputs.widgetType() === 'simple') {
      return manager
        .on('Enter', e => this.inputs.onActivate?.(e), {
          preventDefault: false,
          stopPropagation: false,
        })
        .on(' ', e => this.inputs.onActivate?.(e), {
          preventDefault: false,
          stopPropagation: false,
        });
    }

    // If a widget is activated, only listen to events that exits activate state.
    if (this.isActivated()) {
      manager.on('Escape', e => this.deactivate(e));