chakra-ui · segunadebayo · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024
diff --git a/.changeset/strong-dragons-smile.md b/.changeset/strong-dragons-smile.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/menu": minor
+---
+
+> Breaking changes to the menu component
+
+- Removed `value` and `onValueChange` in favor of using explicit state to manage option items.
+- Prefer `value` over `id` in `getItemProps` and `getOptionItemProps` for consistency with other machine.
+- `onSelect` now provides `value` not `id` in its details.
diff --git a/.xstate/menu.js b/.xstate/menu.js
@@ -79,11 +79,8 @@ const fetchMachine = createMachine({
       target: "closed",
       actions: "invokeOnClose"
     }],
-    RESTORE_FOCUS: {
-      actions: "restoreFocus"
-    },
-    "VALUE.SET": {
-      actions: ["setOptionValue", "invokeOnValueChange"]
+    "HIGHLIGHTED.RESTORE": {
+      actions: "restoreHighlightedItem"
     },
     "HIGHLIGHTED.SET": {
       actions: "setHighlightedItem"
@@ -190,14 +187,14 @@ const fetchMachine = createMachine({
           actions: ["invokeOnClose"]
         }, {
           target: "closed",
-          actions: ["focusParentMenu", "restoreParentFocus", "invokeOnClose"]
+          actions: ["focusParentMenu", "restoreParentHiglightedItem", "invokeOnClose"]
         }]
       },
       on: {
         "CONTROLLED.OPEN": "open",
         "CONTROLLED.CLOSE": {
           target: "closed",
-          actions: ["focusParentMenu", "restoreParentFocus"]
+          actions: ["focusParentMenu", "restoreParentHiglightedItem"]
         },
         // don't invoke on open here since the menu is still open (we're only keeping it open)
         MENU_POINTERENTER: {
@@ -209,7 +206,7 @@ const fetchMachine = createMachine({
           actions: "invokeOnClose"
         }, {
           target: "closed",
-          actions: ["focusParentMenu", "restoreParentFocus"]
+          actions: ["focusParentMenu", "restoreParentHiglightedItem"]
         }]
       }
     },
@@ -336,9 +333,9 @@ const fetchMachine = createMachine({
         }],
         ITEM_POINTERMOVE: [{
           cond: "!suspendPointer",
-          actions: ["highlightItem", "focusMenu"]
+          actions: ["setHighlightedItem", "focusMenu"]
         }, {
-          actions: "setHoveredItem"
+          actions: "setLastHighlightedItem"
         }],
         ITEM_POINTERLEAVE: {
           cond: "!suspendPointer && !isTriggerItem",
@@ -348,25 +345,25 @@ const fetchMachine = createMachine({
         // == grouped ==
         {
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable && closeOnSelect && isOpenControlled",
-          actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange", "closeRootMenu", "invokeOnClose"]
+          actions: ["invokeOnSelect", "setOptionState", "closeRootMenu", "invokeOnClose"]
         }, {
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable && closeOnSelect",
           target: "closed",
-          actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange", "closeRootMenu", "invokeOnClose"]
+          actions: ["invokeOnSelect", "setOptionState", "closeRootMenu", "invokeOnClose"]
         },
         //
         {
           cond: "!isTriggerItemHighlighted && !isHighlightedItemEditable",
-          actions: ["invokeOnSelect", "changeOptionValue", "invokeOnValueChange"]
+          actions: ["invokeOnSelect", "setOptionState"]
         }, {
-          actions: "highlightItem"
+          actions: "setHighlightedItem"
         }],
         TRIGGER_POINTERLEAVE: {
           target: "closing",
           actions: "setIntentPolygon"
         },
         ITEM_POINTERDOWN: {
-          actions: "highlightItem"
+          actions: "setHighlightedItem"
         },
         TYPEAHEAD: {
           actions: "highlightMatchedItem"

diff --git a/examples/next-ts/pages/context-menu.tsx b/examples/next-ts/pages/context-menu.tsx
@@ -21,10 +21,10 @@ export default function Page() {
         <Portal>
           <div {...api.positionerProps}>
             <ul {...api.contentProps}>
-              <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-              <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-              <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-              <li {...api.getItemProps({ id: "export" })}>Export...</li>
+              <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+              <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+              <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+              <li {...api.getItemProps({ value: "export" })}>Export...</li>
             </ul>
           </div>
         </Portal>

diff --git a/examples/next-ts/pages/menu-options.tsx b/examples/next-ts/pages/menu-options.tsx
@@ -1,25 +1,42 @@
 import * as menu from "@zag-js/menu"
 import { normalizeProps, Portal, useMachine } from "@zag-js/react"
-import { menuOptionData as data, menuControls } from "@zag-js/shared"
-import { useId } from "react"
+import { menuOptionData, menuControls } from "@zag-js/shared"
+import { useId, useState } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
   const controls = useControls(menuControls)
 
-  const [state, send] = useMachine(
-    menu.machine({
-      id: useId(),
-      value: { order: "", type: [] },
-      onValueChange: console.log,
-    }),
-    { context: controls.context },
-  )
+  const [order, setOrder] = useState("")
+  const [type, setType] = useState<string[]>([])
+
+  const [state, send] = useMachine(menu.machine({ id: useId() }), {
+    context: controls.context,
+  })
 
   const api = menu.connect(state, send, normalizeProps)
 
+  const radios = menuOptionData.order.map((item) => ({
+    type: "radio" as const,
+    name: "order",
+    value: item.value,
+    label: item.label,
+    checked: order === item.value,
+    onCheckedChange: (checked: boolean) => setOrder(checked ? item.value : ""),
+  }))
+
+  const checkboxes = menuOptionData.type.map((item) => ({
+    type: "checkbox" as const,
+    name: "type",
+    value: item.value,
+    label: item.label,
+    checked: type.includes(item.value),
+    onCheckedChange: (checked: boolean) =>
+      setType((prev) => (checked ? [...prev, item.value] : prev.filter((x) => x !== item.value))),
+  }))
+
   return (
     <>
       <main>
@@ -31,22 +48,20 @@ export default function Page() {
           <Portal>
             <div {...api.positionerProps}>
               <div {...api.contentProps}>
-                {data.order.map((item) => {
-                  const opts = { type: "radio", name: "order", value: item.id } as const
+                {radios.map((item) => {
                   return (
-                    <div key={item.id} {...api.getOptionItemProps(opts)}>
-                      <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                      <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
+                    <div key={item.value} {...api.getOptionItemProps(item)}>
+                      <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                      <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
                     </div>
                   )
                 })}
                 <hr />
-                {data.type.map((item) => {
-                  const opts = { type: "checkbox", name: "type", value: item.id } as const
+                {checkboxes.map((item) => {
                   return (
-                    <div key={item.id} {...api.getOptionItemProps(opts)}>
-                      <span {...api.getOptionItemIndicatorProps(opts)}>✅</span>
-                      <span {...api.getOptionItemTextProps(opts)}>{item.label}</span>
+                    <div key={item.value} {...api.getOptionItemProps(item)}>
+                      <span {...api.getOptionItemIndicatorProps(item)}>✅</span>
+                      <span {...api.getOptionItemTextProps(item)}>{item.label}</span>
                     </div>
                   )
                 })}

diff --git a/examples/next-ts/pages/menu.tsx b/examples/next-ts/pages/menu.tsx
@@ -24,10 +24,10 @@ export default function Page() {
           <Portal>
             <div {...api.positionerProps}>
               <ul {...api.contentProps}>
-                <li {...api.getItemProps({ id: "edit" })}>Edit</li>
-                <li {...api.getItemProps({ id: "duplicate" })}>Duplicate</li>
-                <li {...api.getItemProps({ id: "delete" })}>Delete</li>
-                <li {...api.getItemProps({ id: "export" })}>Export...</li>
+                <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+                <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+                <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+                <li {...api.getItemProps({ value: "export" })}>Export...</li>
               </ul>
             </div>
           </Portal>

diff --git a/examples/next-ts/pages/nested-menu.tsx b/examples/next-ts/pages/nested-menu.tsx
@@ -47,9 +47,9 @@ export default function Page() {
             <div {...root.positionerProps}>
               <ul data-testid="menu" {...root.contentProps}>
                 {level1.map((item) => {
-                  const props = item.trigger ? triggerItemProps : root.getItemProps({ id: item.id })
+                  const props = item.trigger ? triggerItemProps : root.getItemProps({ value: item.value })
                   return (
-                    <li key={item.id} data-testid={item.id} {...props}>
+                    <li key={item.value} data-testid={item.value} {...props}>
                       {item.label}
                     </li>
                   )
@@ -62,9 +62,9 @@ export default function Page() {
             <div {...sub.positionerProps}>
               <ul data-testid="more-tools-submenu" {...sub.contentProps}>
                 {level2.map((item) => {
-                  const props = item.trigger ? triggerItem2Props : sub.getItemProps({ id: item.id })
+                  const props = item.trigger ? triggerItem2Props : sub.getItemProps({ value: item.value })
                   return (
-                    <li key={item.id} data-testid={item.id} {...props}>
+                    <li key={item.value} data-testid={item.value} {...props}>
                       {item.label}
                     </li>
                   )
@@ -77,7 +77,7 @@ export default function Page() {
             <div {...sub2.positionerProps}>
               <ul data-testid="open-nested-submenu" {...sub2.contentProps}>
                 {level3.map((item) => (
-                  <li key={item.id} data-testid={item.id} {...sub2.getItemProps({ id: item.id })}>
+                  <li key={item.value} data-testid={item.value} {...sub2.getItemProps({ value: item.value })}>
                     {item.label}
                   </li>
                 ))}

diff --git a/examples/nuxt-ts/pages/context-menu.vue b/examples/nuxt-ts/pages/context-menu.vue
@@ -18,10 +18,10 @@ const api = computed(() => menu.connect(state.value, send, normalizeProps))
     <Teleport to="body">
       <div v-bind="api.positionerProps">
         <ul v-bind="api.contentProps">
-          <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
-          <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
-          <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
-          <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+          <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
+          <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
+          <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
+          <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
         </ul>
       </div>
     </Teleport>

diff --git a/examples/nuxt-ts/pages/menu-options.vue b/examples/nuxt-ts/pages/menu-options.vue
@@ -1,32 +1,41 @@
 <script setup lang="ts">
 import * as menu from "@zag-js/menu"
-import { menuControls, menuOptionData as data } from "@zag-js/shared"
+import { menuControls, menuOptionData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 
 const controls = useControls(menuControls)
-const [state, send] = useMachine(
-  menu.machine({
-    id: "1",
-    value: { order: "", type: [] },
-    onValueChange: console.log,
-  }),
-)
+const [state, send] = useMachine(menu.machine({ id: "1" }))
 
 const api = computed(() => menu.connect(state.value, send, normalizeProps))
 
-const radios = data.order.map((item) => ({
-  ...item,
-  type: "radio" as const,
-  name: "order",
-  value: item.id,
-}))
+const orderRef = ref("")
+const typeRef = ref<string[]>([])
+
+const radios = computed(() =>
+  menuOptionData.order.map((item) => ({
+    label: item.label,
+    id: item.value,
+    type: "radio" as const,
+    value: item.value,
+    checked: item.value === orderRef.value,
+    onCheckedChange(v: boolean) {
+      orderRef.value = v ? item.value : ""
+    },
+  })),
+)
 
-const checkboxes = data.type.map((item) => ({
-  ...item,
-  type: "checkbox" as const,
-  name: "type",
-  value: item.id,
-}))
+const checkboxes = computed(() =>
+  menuOptionData.type.map((item) => ({
+    id: item.value,
+    label: item.label,
+    type: "checkbox" as const,
+    value: item.value,
+    checked: typeRef.value.includes(item.value),
+    onCheckedChange(v: boolean) {
+      typeRef.value = v ? [...typeRef.value, item.value] : typeRef.value.filter((x) => x !== item.value)
+    },
+  })),
+)
 </script>
 
 <template>
@@ -36,12 +45,12 @@ const checkboxes = data.type.map((item) => ({
       <Teleport to="body">
         <div v-bind="api.positionerProps">
           <div v-bind="api.contentProps">
-            <div v-for="item in radios" :key="item.id" v-bind="api.getOptionItemProps(item)">
+            <div v-for="item in radios" :key="item.value" v-bind="api.getOptionItemProps(item)">
               <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
               <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
             </div>
-            <hr />
-            <div v-for="item in checkboxes" :key="item.id" v-bind="api.getOptionItemProps(item)">
+            <hr v-bind="api.separatorProps" />
+            <div v-for="item in checkboxes" :key="item.value" v-bind="api.getOptionItemProps(item)">
               <span v-bind="api.getOptionItemIndicatorProps(item)">✅</span>
               <span v-bind="api.getOptionItemTextProps(item)">{{ item.label }}</span>
             </div>

diff --git a/examples/nuxt-ts/pages/menu.vue b/examples/nuxt-ts/pages/menu.vue
@@ -17,10 +17,10 @@ const api = computed(() => menu.connect(state.value, send, normalizeProps))
       <Teleport to="body">
         <div v-bind="api.positionerProps">
           <ul v-bind="api.contentProps">
-            <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
-            <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
-            <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
-            <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+            <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>
+            <li v-bind="api.getItemProps({ value: 'duplicate' })">Duplicate</li>
+            <li v-bind="api.getItemProps({ value: 'delete' })">Delete</li>
+            <li v-bind="api.getItemProps({ value: 'export' })">Export...</li>
           </ul>
         </div>
       </Teleport>

diff --git a/examples/solid-ts/src/pages/context-menu.tsx b/examples/solid-ts/src/pages/context-menu.tsx
@@ -22,10 +22,10 @@ export default function Page() {
         <Portal>
           <div {...api().positionerProps}>
             <ul {...api().contentProps}>
-              <li {...api().getItemProps({ id: "edit" })}>Edit</li>
-              <li {...api().getItemProps({ id: "duplicate" })}>Duplicate</li>
-              <li {...api().getItemProps({ id: "delete" })}>Delete</li>
-              <li {...api().getItemProps({ id: "export" })}>Export...</li>
+              <li {...api().getItemProps({ value: "edit" })}>Edit</li>
+              <li {...api().getItemProps({ value: "duplicate" })}>Duplicate</li>
+              <li {...api().getItemProps({ value: "delete" })}>Delete</li>
+              <li {...api().getItemProps({ value: "export" })}>Export...</li>
             </ul>
           </div>
         </Portal>