fix(menu): avoid mixing framework agnostic and specific prop handling

Author: nikparo

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

@@ -1,5 +1,6 @@
 import type { Service } from "@zag-js/core"
 import { mergeProps } from "@zag-js/core"
+import { createNormalizer } from "@zag-js/types"
 import {
   ariaAttr,
   dataAttr,
@@ -23,6 +24,9 @@ import { parts } from "./menu.anatomy"
 import * as dom from "./menu.dom"
 import type { ItemProps, ItemState, MenuApi, MenuSchema, OptionItemProps, OptionItemState } from "./menu.types"
 
+// We need to avoid mixing framework-agnostic logic with framework-specific prop handling
+const identityProps = createNormalizer<PropTypes>((v) => v)
+
 export function connect<T extends PropTypes>(service: Service<MenuSchema>, normalize: NormalizeProps<T>): MenuApi<T> {
   const { context, send, state, computed, prop, scope } = service
 
@@ -62,11 +66,12 @@ export function connect<T extends PropTypes>(service: Service<MenuSchema>, norma
     }
   }
 
-  function getItemProps(props: ItemProps) {
+  function getItemProps(props: ItemProps, normalized = true) {
     const { closeOnSelect, valueText, value } = props
     const itemState = getItemState(props)
     const id = dom.getItemId(scope, value)
-    return normalize.element({
+
+    const itemProps = identityProps.element({
       ...parts.item.attrs,
       id,
       role: "menuitem",
@@ -111,6 +116,8 @@ export function connect<T extends PropTypes>(service: Service<MenuSchema>, norma
         send({ type: "ITEM_CLICK", target, id, closeOnSelect })
       },
     })
+
+    return normalized ? normalize.element(itemProps) : itemProps
   }
 
   return {
@@ -178,12 +185,13 @@ export function connect<T extends PropTypes>(service: Service<MenuSchema>, norma
     },
 
     getTriggerItemProps(childApi) {
-      const triggerProps = childApi.getTriggerProps()
-      return mergeProps(getItemProps({ value: triggerProps.id }), triggerProps) as T["element"]
+      const triggerProps = childApi.getTriggerProps(false)
+      const itemProps = getItemProps({ value: triggerProps.id }, false)
+      return normalize.element(mergeProps(itemProps, triggerProps))
     },
 
-    getTriggerProps() {
-      return normalize.button({
+    getTriggerProps(normalized = true) {
+      const triggerProps = identityProps.button({
         ...(isSubmenu ? parts.triggerItem.attrs : parts.trigger.attrs),
         "data-placement": context.get("currentPlacement"),
         type: "button",
@@ -257,6 +265,8 @@ export function connect<T extends PropTypes>(service: Service<MenuSchema>, norma
           }
         },
       })
+
+      return normalized ? normalize.button(triggerProps) : triggerProps
     },
 
     getIndicatorProps() {

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

@@ -167,8 +167,8 @@ export type MenuMachine = Machine<MenuSchema>
  * -----------------------------------------------------------------------------*/
 
 export interface Api {
-  getItemProps: (props: ItemProps) => Record<string, any>
-  getTriggerProps: () => Record<string, any>
+  getItemProps: (props: ItemProps, normalized?: boolean) => Record<string, any>
+  getTriggerProps: (normalized?: boolean) => Record<string, any>
 }
 
 export interface ItemProps {
@@ -308,14 +308,14 @@ export interface MenuApi<T extends PropTypes = PropTypes> {
 
   getContextTriggerProps: () => T["element"]
   getTriggerItemProps: <A extends Api>(childApi: A) => T["element"]
-  getTriggerProps: () => T["button"]
+  getTriggerProps: (normalized?: boolean) => T["button"]
   getIndicatorProps: () => T["element"]
   getPositionerProps: () => T["element"]
   getArrowProps: () => T["element"]
   getArrowTipProps: () => T["element"]
   getContentProps: () => T["element"]
   getSeparatorProps: () => T["element"]
-  getItemProps: (options: ItemProps) => T["element"]
+  getItemProps: (options: ItemProps, normalized?: boolean) => T["element"]
   getOptionItemProps: (option: OptionItemProps) => T["element"]
   getItemIndicatorProps: (option: ItemBaseProps) => T["element"]
   getItemTextProps: (option: ItemBaseProps) => T["element"]

packages/machines/tour/src/tour.connect.ts

@@ -71,6 +71,7 @@ export function connect<T extends PropTypes>(service: TourService, normalize: No
       send({ type: "STEPS.SET", value: next, src: "removeStep" })
     },
     updateStep(id, stepOverrides) {
+      // Should mergeProps here merge the effect functions? It does not, it takes the last it finds.
       const next = steps.map((step) => (step.id === id ? mergeProps(step, stepOverrides) : step))
       send({ type: "STEPS.SET", value: next, src: "updateStep" })
     },