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

fix

fix

Author: adolgachev

src/aria/menu/menu.ts

@@ -83,6 +83,16 @@ export class MenuTrigger<V> {
   onFocusIn() {
     this.hasBeenFocused.set(true);
   }
+
+  /** Opens the menu. */
+  open(opts?: {first?: boolean; last?: boolean}) {
+    this._pattern.open(opts);
+  }
+
+  /** Closes the menu. */
+  close(opts: {refocus?: boolean} = {}) {
+    this._pattern.close(opts);
+  }
 }
 
 /**
@@ -222,24 +232,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);
   }
 }
 
@@ -325,6 +345,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);
+  }
 }
 
 /**
@@ -402,6 +437,16 @@ export class MenuItem<V> {
   onFocusIn() {
     this.hasBeenFocused.set(true);
   }
+
+  /** Opens the submenu. */
+  open(opts?: {first?: boolean; last?: boolean}) {
+    this._pattern.open(opts);
+  }
+
+  /** Closes the submenu. */
+  close(opts: {refocus?: boolean} = {}) {
+    this._pattern.close(opts);
+  }
 }
 
 /** Defers the rendering of the menu content. */

src/aria/private/menu/menu.ts

@@ -136,7 +136,7 @@ export class MenuPattern<V> {
       .on('Home', () => this.first())
       .on('End', () => this.last())
       .on('Enter', () => this.trigger())
-      .on('Escape', () => this.closeAll())
+      .on('Escape', () => this.closeAll({refocus: true}))
       .on(this._expandKey, () => this.expand())
       .on(this._collapseKey, () => this.collapse())
       .on(this.dynamicSpaceKey, () => this.trigger())
@@ -345,20 +345,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);
     }
   }
 }
@@ -496,8 +501,10 @@ 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}) {
+    opts = opts ?? {refocus: this.isFocused()};
+
+    this.inputs.activeItem()?.close(opts);
   }
 }
 

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

@@ -48,7 +48,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());
     }
   }
 }