Class MenuBarPattern

src/aria/private/menu/menu.ts:481–635

/** The menubar ui pattern class. */
export class MenuBarPattern<V> {
  /** Controls list behavior for the menu items. */
  readonly listBehavior: List<MenuItemPattern<V>, V>;

  /** The tab index of the menu. */
  readonly tabIndex = () => this.listBehavior.tabIndex();

  /** The key used to navigate to the next item. */
  private readonly _nextKey = computed(() => {
    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
  });

  /** The key used to navigate to the previous item. */
  private readonly _previousKey = computed(() => {
    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
  });

  /** 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 = /^.$/;

  /** Whether the menubar or any of its children are currently focused. */
  readonly isFocused = signal(false);

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

  /** Whether the menubar is disabled. */
  readonly disabled = () => this.inputs.disabled();

  /** Handles keyboard events for the menu. */
  readonly keydownManager = computed(() => {
    return new KeyboardEventManager()
      .on(this._nextKey, () => this.next(), {ignoreRepeat: false})
      .on(this._previousKey, () => this.prev(), {ignoreRepeat: false})
      .on('End', () => this.listBehavior.last())
      .on('Home', () => this.listBehavior.first())
      .on('Enter', () => this.inputs.activeItem()?.open({first: true}))
      .on('ArrowUp', () => this.inputs.activeItem()?.open({last: true}))
      .on('ArrowDown', () => this.inputs.activeItem()?.open({first: true}))
      .on(this.dynamicSpaceKey, () => this.inputs.activeItem()?.open({first: true}))
      .on(this.typeaheadRegexp, e => this.listBehavior.search(e.key));
  });

  constructor(readonly inputs: MenuBarInputs<V>) {
    this.listBehavior = new List<MenuItemPattern<V>, V>(inputs);
  }

  /** Sets the default state for the menubar. */
  setDefaultState() {
    const firstFocusable = this.listBehavior.navigationBehavior.peekFirst();
    if (firstFocusable) {
      this.inputs.activeItem.set(firstFocusable);
    }
  }