Class MenuPattern

src/aria/private/menu/menu.ts:81–490

/** The menu ui pattern class. */
export class MenuPattern<V> {
  /** The unique ID of the menu. */
  readonly id: SignalLike<string>;

  /** The role of the menu. */
  readonly role = () => 'menu';

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

  /** Whether the menu is visible. */
  readonly visible = computed(() =>
    this.inputs.parent() ? !!this.inputs.parent()?.expanded() : true,
  );

  /** Controls list behavior for the menu items. */
  readonly listBehavior: List<MenuItemPattern<V>, V | undefined>;

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

  /** Whether the menu has received interaction. */
  readonly hasBeenInteracted = signal(false);

  /** Whether the menu trigger has been hovered. */
  readonly hasBeenHovered = signal(false);

  /** Items currently inside the menu. */
  readonly items = () => this.inputs.items();

  /** Timeout used to open sub-menus on hover. */
  private _openTimeout: ReturnType<typeof setTimeout> | undefined;

  /** Timeout used to close sub-menus on hover out. */
  private _closeTimeout: ReturnType<typeof setTimeout> | undefined;

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

  /** Whether the menu should be focused on mouse over. */
  readonly shouldFocus = computed(() => {
    const root = this.root();

    if (root instanceof MenuTriggerPattern) {
      return true;
    }

    if (root instanceof MenuBarPattern || root instanceof MenuPattern) {
      return root.isFocused();
    }

    return false;
  });

  /** The key used to expand sub-menus. */
  private readonly _expandKey = computed(() => {
    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
  });