feat(aria/menu): Extend public api with open/close methods

Author: adolgachev

src/aria/menu/menu.ts

@@ -71,6 +71,16 @@ export class MenuTrigger<V> {
     element: computed(() => this._elementRef.nativeElement),
     submenu: computed(() => this.submenu()?._pattern),
   });
+
+  /** Opens the menu. */
+  open(opts?: {first?: boolean; last?: boolean}) {
+    this._pattern.open(opts);
+  }
+
+  /** Closes the menu. */
+  close(opts: {refocus?: boolean} = {}) {
+    this._pattern.close(opts);
+  }
 }
 
 /**
@@ -193,24 +203,34 @@ export class Menu<V> {
     });
   }
 
-  // TODO(wagnermaciel): Author close, closeAll, and open methods for each directive.
+  /** Focuses the previous menu item. */
+  prev() {
+    this._pattern.prev();
+  }
+
+  /** Focuses the next menu item. */
+  next() {
+    this._pattern.next();
+  }
+
+  /** Focuses the first menu item. */
+  first() {
+    this._pattern.first();
+  }
+
+  /** Focuses the last menu item. */
+  last() {
+    this._pattern.last();
+  }
 
   /** Closes the menu. */
   close(opts?: {refocus?: boolean}) {
-    this._pattern.inputs.parent()?.close(opts);
+    this._pattern.close(opts);
   }
 
   /** Closes all parent menus. */
   closeAll(opts?: {refocus?: boolean}) {
-    const root = this._pattern.root();
-
-    if (root instanceof MenuTriggerPattern) {
-      root.close(opts);
-    }
-
-    if (root instanceof MenuPattern || root instanceof MenuBarPattern) {
-      root.inputs.activeItem()?.close(opts);
-    }
+    this._pattern.closeAll(opts);
   }
 }
 
@@ -296,6 +316,21 @@ export class MenuBar<V> {
       }
     });
   }
+
+  /** Focuses the previous menu item. */
+  prev() {
+    this._pattern.prev();
+  }
+
+  /** Focuses the next menu item. */
+  next() {
+    this._pattern.next();
+  }
+
+  /** Closes the menubar and refocuses the root menu bar item. */
+  close(opts?: {refocus?: boolean}) {
+    this._pattern.close(opts);
+  }
 }
 
 /**
@@ -360,4 +395,14 @@ export class MenuItem<V> {
     parent: computed(() => this.parent?._pattern),
     submenu: computed(() => this.submenu()?._pattern),
   });
+
+  /** Opens the submenu. */
+  open(opts?: {first?: boolean; last?: boolean}) {
+    this._pattern.open(opts);
+  }
+
+  /** Closes the submenu. */
+  close(opts: {refocus?: boolean} = {}) {
+    this._pattern.close(opts);
+  }
 }

src/aria/private/menu/menu.ts

@@ -344,20 +344,25 @@ export class MenuPattern<V> {
     }
   }
 
+  /** Closes the menu. */
+  close(opts?: {refocus?: boolean}) {
+    this.inputs.parent()?.close(opts);
+  }
+
   /** Closes the menu and all parent menus. */
-  closeAll() {
+  closeAll(opts?: {refocus?: boolean}) {
     const root = this.root();
 
     if (root instanceof MenuTriggerPattern) {
-      root.close({refocus: true});
+      root.close(opts);
     }
 
     if (root instanceof MenuBarPattern) {
       root.close();
     }
 
     if (root instanceof MenuPattern) {
-      root.inputs.activeItem()?.close({refocus: true});
+      root.inputs.activeItem()?.close(opts);
     }
   }
 }
@@ -495,8 +500,8 @@ export class MenuBarPattern<V> {
   }
 
   /** Closes the menubar and refocuses the root menu bar item. */
-  close() {
-    this.inputs.activeItem()?.close({refocus: this.isFocused()});
+  close(opts?: {refocus?: boolean}) {
+    this.inputs.activeItem()?.close(opts);
   }
 }
 

src/components-examples/aria/menu/menu-context/menu-context-example.ts

@@ -47,7 +47,7 @@ export class MenuContextExample {
       menu.element.style.top = `${event.clientY}px`;
       menu.element.style.left = `${event.clientX}px`;
 
-      setTimeout(() => menu._pattern.first());
+      setTimeout(() => menu.first());
     }
   }
 }