Class ListboxPattern

src/aria/private/listbox/listbox.ts:24–302

/** Controls the state of a listbox. */
export class ListboxPattern<V> {
  readonly listBehavior: List<OptionPattern<V>, V>;

  /** Whether the listbox has been interacted with. */
  readonly hasBeenInteracted = signal(false);

  /** Whether the list is vertically or horizontally oriented. */
  readonly orientation: SignalLike<'vertical' | 'horizontal'>;

  /** Whether the listbox is disabled. */
  readonly disabled = computed(() => this.listBehavior.disabled());

  /** Whether the listbox is readonly. */
  readonly readonly: SignalLike<boolean>;

  /** The tab index of the listbox. */
  readonly tabIndex: SignalLike<-1 | 0> = computed(() => this.listBehavior.tabIndex());

  /** The id of the current active item. */
  readonly activeDescendant = computed(() => this.listBehavior.activeDescendant());

  /** Whether multiple items in the list can be selected at once. */
  multi: SignalLike<boolean>;

  /** The number of items in the listbox. */
  readonly setsize = computed(() => this.inputs.items().length);

  /** Whether the listbox selection follows focus. */
  readonly followFocus = computed(() => this.inputs.selectionMode() === 'follow');

  /** Whether the listbox should wrap. Used to disable wrapping while range selecting. */
  readonly wrap = signal(true);

  /** The key used to navigate to the previous item in the list. */
  readonly prevKey = computed(() => {
    if (this.inputs.orientation() === 'vertical') {
      return 'ArrowUp';
    }
    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
  });

  /** The key used to navigate to the next item in the list. */
  readonly nextKey = computed(() => {
    if (this.inputs.orientation() === 'vertical') {
      return 'ArrowDown';
    }
    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
  });

  /** Represents the space key. Does nothing when the user is actively using typeahead. */
  readonly dynamicSpaceKey = computed(() => (this.listBehavior.isTyping() ? '' : ' '));

  /** The regexp used to decide if a key should trigger typeahead. */
  readonly typeaheadRegexp = /^.$/;

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