chore: add listener fn to menu

Author: segunadebayo

.changeset/cold-hornets-find.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/menu": patch
+---
+
+Add `addItemListener` function to allow listening for dispatched custom event

packages/machines/menu/src/index.ts

@@ -8,6 +8,7 @@ export type {
   HighlightChangeDetails,
   ItemGroupLabelProps,
   ItemGroupProps,
+  ItemListenerProps,
   ItemProps,
   ItemState,
   MenuMachine as Machine,

packages/machines/menu/src/menu.connect.ts

@@ -132,6 +132,13 @@ export function connect<T extends PropTypes>(service: Service<MenuSchema>, norma
     reposition(options = {}) {
       send({ type: "POSITIONING.SET", options })
     },
+    addItemListener(props) {
+      const node = dom.getItemEl(scope, props.id)
+      if (!node) return
+      const listener = () => props.onSelect?.()
+      node.addEventListener(dom.itemSelectEvent, listener)
+      return () => node.removeEventListener(dom.itemSelectEvent, listener)
+    },
 
     getContextTriggerProps() {
       return normalize.element({

packages/machines/menu/src/menu.dom.ts

@@ -75,9 +75,11 @@ export const getOptionFromItemEl = (el: HTMLElement) => {
   }
 }
 
+export const itemSelectEvent = "menu:select"
+
 export function dispatchSelectionEvent(el: HTMLElement | null, value: string) {
   if (!el) return
   const win = getWindow(el)
-  const event = new win.CustomEvent("menu:select", { detail: { value } })
+  const event = new win.CustomEvent(itemSelectEvent, { detail: { value } })
   el.dispatchEvent(event)
 }

packages/machines/menu/src/menu.types.ts

@@ -190,6 +190,17 @@ export interface ItemProps {
   closeOnSelect?: boolean | undefined
 }
 
+export interface ItemListenerProps {
+  /**
+   * The id of the item. Can be obtained from the `getItemState` function.
+   */
+  id: string
+  /**
+   * Function called when the item is selected
+   */
+  onSelect?: VoidFunction
+}
+
 export interface OptionItemProps extends Partial<ItemProps> {
   /**
    * Whether the option is checked
@@ -282,6 +293,11 @@ export interface MenuApi<T extends PropTypes = PropTypes> {
    * Returns the state of the menu item
    */
   getItemState(props: ItemProps): ItemState
+  /**
+   * Setup the custom event listener for item selection event
+   */
+  addItemListener(props: ItemListenerProps): VoidFunction | undefined
+
   getContextTriggerProps(): T["element"]
   getTriggerItemProps<A extends Api>(childApi: A): T["element"]
   getTriggerProps(): T["button"]