[menu] Support detached triggers

docs/reference/generated/context-menu-root.json

@@ -20,7 +20,7 @@
     },
     "actionsRef": {
       "type": "RefObject<Menu.Root.Actions>",
-      "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\nInstead, the `unmount` function must be called to unmount the menu manually.\nUseful when the menu's animation is controlled by an external library.",
+      "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\n   Instead, the `unmount` function must be called to unmount the menu manually.\n  Useful when the menu's animation is controlled by an external library.\n- `close`: When specified, the menu can be closed imperatively.",
       "detailedType": "React.RefObject<Menu.Root.Actions> | undefined"
     },
     "closeParentOnEsc": {
@@ -29,11 +29,26 @@
       "description": "When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu.",
       "detailedType": "boolean | undefined"
     },
+    "defaultTriggerId": {
+      "type": "string | null",
+      "description": "ID of the trigger that the popover is associated with.\nThis is useful in conjuntion with the `defaultOpen` prop to create an initially open popover.",
+      "detailedType": "string | null | undefined"
+    },
+    "handle": {
+      "type": "Menu.Handle<unknown>",
+      "description": "A handle to associate the popover with a trigger.\nIf specified, allows external triggers to control the popover's open state.",
+      "detailedType": "{} | undefined"
+    },
     "onOpenChangeComplete": {
       "type": "((open: boolean) => void)",
       "description": "Event handler called after any animations complete when the menu is closed.",
       "detailedType": "((open: boolean) => void) | undefined"
     },
+    "triggerId": {
+      "type": "string | null",
+      "description": "ID of the trigger that the popover is associated with.\nThis is useful in conjuntion with the `open` prop to create a controlled popover.\nThere's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).",
+      "detailedType": "string | null | undefined"
+    },
     "disabled": {
       "type": "boolean",
       "default": "false",
@@ -53,9 +68,9 @@
       "detailedType": "'horizontal' | 'vertical' | undefined"
     },
     "children": {
-      "type": "ReactNode",
-      "required": true,
-      "detailedType": "React.ReactNode"
+      "type": "ReactNode | PayloadChildRenderFunction<unknown>",
+      "description": "The content of the popover.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger.",
+      "detailedType": "| React.ReactNode\n| ((arg: { payload: unknown }) => ReactNode)"
     }
   },
   "dataAttributes": {},

docs/reference/generated/menu-root.json

@@ -20,7 +20,7 @@
     },
     "actionsRef": {
       "type": "RefObject<Menu.Root.Actions>",
-      "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\nInstead, the `unmount` function must be called to unmount the menu manually.\nUseful when the menu's animation is controlled by an external library.",
+      "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\n   Instead, the `unmount` function must be called to unmount the menu manually.\n  Useful when the menu's animation is controlled by an external library.\n- `close`: When specified, the menu can be closed imperatively.",
       "detailedType": "React.RefObject<Menu.Root.Actions> | undefined"
     },
     "closeParentOnEsc": {
@@ -29,6 +29,16 @@
       "description": "When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu.",
       "detailedType": "boolean | undefined"
     },
+    "defaultTriggerId": {
+      "type": "string | null",
+      "description": "ID of the trigger that the popover is associated with.\nThis is useful in conjuntion with the `defaultOpen` prop to create an initially open popover.",
+      "detailedType": "string | null | undefined"
+    },
+    "handle": {
+      "type": "Menu.Handle<Payload>",
+      "description": "A handle to associate the popover with a trigger.\nIf specified, allows external triggers to control the popover's open state.",
+      "detailedType": "{} | undefined"
+    },
     "modal": {
       "type": "boolean",
       "default": "true",
@@ -40,29 +50,17 @@
       "description": "Event handler called after any animations complete when the menu is closed.",
       "detailedType": "((open: boolean) => void) | undefined"
     },
+    "triggerId": {
+      "type": "string | null",
+      "description": "ID of the trigger that the popover is associated with.\nThis is useful in conjuntion with the `open` prop to create a controlled popover.\nThere's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).",
+      "detailedType": "string | null | undefined"
+    },
     "disabled": {
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction.",
       "detailedType": "boolean | undefined"
     },
-    "openOnHover": {
-      "type": "boolean",
-      "description": "Whether the menu should also open when the trigger is hovered.",
-      "detailedType": "boolean | undefined"
-    },
-    "delay": {
-      "type": "number",
-      "default": "100",
-      "description": "How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop.",
-      "detailedType": "number | undefined"
-    },
-    "closeDelay": {
-      "type": "number",
-      "default": "0",
-      "description": "How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop.",
-      "detailedType": "number | undefined"
-    },
     "loop": {
       "type": "boolean",
       "default": "true",
@@ -76,9 +74,9 @@
       "detailedType": "'horizontal' | 'vertical' | undefined"
     },
     "children": {
-      "type": "ReactNode",
-      "required": true,
-      "detailedType": "React.ReactNode"
+      "type": "ReactNode | PayloadChildRenderFunction<Payload>",
+      "description": "The content of the popover.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger.",
+      "detailedType": "| React.ReactNode\n| ((arg: { payload: Payload | undefined }) => ReactNode)"
     }
   },
   "dataAttributes": {},

docs/reference/generated/menu-submenu-root.json

@@ -20,7 +20,7 @@
     },
     "actionsRef": {
       "type": "RefObject<Menu.Root.Actions>",
-      "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\nInstead, the `unmount` function must be called to unmount the menu manually.\nUseful when the menu's animation is controlled by an external library.",
+      "description": "A ref to imperative actions.\n- `unmount`: When specified, the menu will not be unmounted when closed.\n   Instead, the `unmount` function must be called to unmount the menu manually.\n  Useful when the menu's animation is controlled by an external library.\n- `close`: When specified, the menu can be closed imperatively.",
       "detailedType": "React.RefObject<Menu.Root.Actions> | undefined"
     },
     "closeParentOnEsc": {
@@ -29,35 +29,32 @@
       "description": "When in a submenu, determines whether pressing the Escape key\ncloses the entire menu, or only the current child menu.",
       "detailedType": "boolean | undefined"
     },
+    "defaultTriggerId": {
+      "type": "string | null",
+      "description": "ID of the trigger that the popover is associated with.\nThis is useful in conjuntion with the `defaultOpen` prop to create an initially open popover.",
+      "detailedType": "string | null | undefined"
+    },
+    "handle": {
+      "type": "Menu.Handle<unknown>",
+      "description": "A handle to associate the popover with a trigger.\nIf specified, allows external triggers to control the popover's open state.",
+      "detailedType": "{} | undefined"
+    },
     "onOpenChangeComplete": {
       "type": "((open: boolean) => void)",
       "description": "Event handler called after any animations complete when the menu is closed.",
       "detailedType": "((open: boolean) => void) | undefined"
     },
+    "triggerId": {
+      "type": "string | null",
+      "description": "ID of the trigger that the popover is associated with.\nThis is useful in conjuntion with the `open` prop to create a controlled popover.\nThere's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).",
+      "detailedType": "string | null | undefined"
+    },
     "disabled": {
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction.",
       "detailedType": "boolean | undefined"
     },
-    "openOnHover": {
-      "type": "boolean",
-      "default": "true",
-      "description": "Whether the submenu should open when the trigger is hovered.",
-      "detailedType": "boolean | undefined"
-    },
-    "delay": {
-      "type": "number",
-      "default": "100",
-      "description": "How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop.",
-      "detailedType": "number | undefined"
-    },
-    "closeDelay": {
-      "type": "number",
-      "default": "0",
-      "description": "How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop.",
-      "detailedType": "number | undefined"
-    },
     "loop": {
       "type": "boolean",
       "default": "true",
@@ -71,9 +68,9 @@
       "detailedType": "'horizontal' | 'vertical' | undefined"
     },
     "children": {
-      "type": "ReactNode",
-      "required": true,
-      "detailedType": "React.ReactNode"
+      "type": "ReactNode | PayloadChildRenderFunction<unknown>",
+      "description": "The content of the popover.\nThis can be a regular React node or a render function that receives the `payload` of the active trigger.",
+      "detailedType": "| React.ReactNode\n| ((arg: { payload: unknown }) => ReactNode)"
     }
   },
   "dataAttributes": {},

docs/reference/generated/menu-submenu-trigger.json

@@ -17,6 +17,29 @@
       "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button.",
       "detailedType": "boolean | undefined"
     },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether the component should ignore user interaction.",
+      "detailedType": "boolean | undefined"
+    },
+    "openOnHover": {
+      "type": "boolean",
+      "description": "Whether the menu should also open when the trigger is hovered.",
+      "detailedType": "boolean | undefined"
+    },
+    "delay": {
+      "type": "number",
+      "default": "100",
+      "description": "How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop.",
+      "detailedType": "number | undefined"
+    },
+    "closeDelay": {
+      "type": "number",
+      "default": "0",
+      "description": "How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop.",
+      "detailedType": "number | undefined"
+    },
     "id": {
       "type": "string",
       "detailedType": "string | undefined"

docs/reference/generated/menu-trigger.json

@@ -2,18 +2,45 @@
   "name": "MenuTrigger",
   "description": "A button that opens the menu.\nRenders a `<button>` element.",
   "props": {
+    "handle": {
+      "type": "Menu.Handle<Payload>",
+      "description": "A handle to associate the trigger with a menu.",
+      "detailedType": "{} | undefined"
+    },
     "nativeButton": {
       "type": "boolean",
       "default": "true",
       "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
       "detailedType": "boolean | undefined"
     },
+    "payload": {
+      "type": "Payload",
+      "description": "A payload to pass to the menu when it is opened.",
+      "detailedType": "Payload | undefined"
+    },
     "disabled": {
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction.",
       "detailedType": "boolean | undefined"
     },
+    "openOnHover": {
+      "type": "boolean",
+      "description": "Whether the menu should also open when the trigger is hovered.",
+      "detailedType": "boolean | undefined"
+    },
+    "delay": {
+      "type": "number",
+      "default": "100",
+      "description": "How long to wait before the menu may be opened on hover. Specified in milliseconds.\n\nRequires the `openOnHover` prop.",
+      "detailedType": "number | undefined"
+    },
+    "closeDelay": {
+      "type": "number",
+      "default": "0",
+      "description": "How long to wait before closing the menu that was opened on hover.\nSpecified in milliseconds.\n\nRequires the `openOnHover` prop.",
+      "detailedType": "number | undefined"
+    },
     "children": {
       "type": "ReactNode",
       "detailedType": "React.ReactNode"

docs/src/app/(private)/experiments/menu/menu-fully-featured.tsx

@@ -35,15 +35,12 @@ export default function MenuFullyFeatured() {
   return (
     <div>
       <h1>Fully featured menu</h1>
-      <Menu.Root
-        openOnHover={settings.openOnHover}
-        modal={settings.modal}
-        disabled={settings.disabled}
-      >
+      <Menu.Root modal={settings.modal} disabled={settings.disabled}>
         <Menu.Trigger
           className={classes.Button}
           render={triggerRender}
           nativeButton={triggerRender === undefined}
+          openOnHover={settings.openOnHover}
         >
           Menu <ChevronDownIcon className={classes.ButtonIcon} />
         </Menu.Trigger>

docs/src/app/(private)/experiments/menu/menu-horizontal.tsx

@@ -19,8 +19,8 @@ export default function NestedMenu() {
         <Menu.Portal>
           <Menu.Positioner side="bottom" align="start" sideOffset={6} anchor={containerRef}>
             <Menu.Popup className={styles.MenuRootPopup}>
-              <Menu.SubmenuRoot openOnHover={false}>
-                <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
+              <Menu.SubmenuRoot>
+                <Menu.SubmenuTrigger openOnHover={false} className={styles.SubmenuTrigger}>
                   Text color
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
@@ -49,8 +49,10 @@ export default function NestedMenu() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.SubmenuRoot openOnHover={false}>
-                <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>Style</Menu.SubmenuTrigger>
+              <Menu.SubmenuRoot>
+                <Menu.SubmenuTrigger openOnHover={false} className={styles.SubmenuTrigger}>
+                  Style
+                </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner align="start" side="bottom" sideOffset={12}>
                     <Menu.Popup className={styles.MenuPopup}>