Accept every node kind as the root trigger

`trigger` is typed as a node, but only some nodes worked. The check used
`React.isValidElement`, which is true for a fragment. A fragment then took
the render path, and it cannot take props or a ref, so no trigger element
rendered at all and React logged an error.

The root now treats a fragment as content, the same as text or several
nodes. A single element still becomes the trigger itself.

Corrects the prop documentation and the RFC. Both said the root "takes an
element", which hid this gap. They now say the prop takes a node, and they
name what each node kind does.

A test covers text, a fragment, and several nodes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: LukasTy

docs/pages/experiments/menu2-rfc.md

@@ -216,9 +216,9 @@ The trigger part and the popup part still exist, but they are internal. We expor
 
 Three results come from this work:
 
-- **The root `trigger` takes an element.** Base UI's `render` merges the behavior into that element. Thus the caller keeps their own component. Other content renders inside the default trigger.
-- **The submenu `trigger` takes content, not an element.** This is the one place where the two levels cannot match. A submenu trigger is already a menu item. A `<Menu2Item>` in the `trigger` puts an item inside an item, and the submenu does not open.
-- **A `Tooltip` around a submenu trigger is now more difficult.** The root `trigger` takes an element, so `trigger={<Tooltip><Button /></Tooltip>}` still works. The submenu `trigger` takes content, so the wrapper must move into the root slot of the trigger, and that needs a `forwardRef` component. The test suite and the recipes page both show this.
+- **Both `trigger` props take a node.** For the root, a single element becomes the trigger itself, and Base UI's `render` merges the behavior into it, so the caller keeps their own component. Any other node, such as text, a fragment, or several nodes, renders inside the default trigger. A fragment is a valid element, but it cannot take props or a ref, so the root treats it as content.
+- **The submenu `trigger` is always content.** This is the one place where the two levels cannot match. A submenu trigger is already a menu item, so an element in the `trigger` does not replace it. A `<Menu2Item>` there puts an item inside an item, and the submenu does not open. Use `slots.trigger` to change the component.
+- **A `Tooltip` around a submenu trigger is now more difficult.** The root `trigger` accepts an element, so `trigger={<Tooltip><Button /></Tooltip>}` still works. The submenu `trigger` is content, so the wrapper must move into the root slot of the trigger, and that needs a `forwardRef` component. The test suite and the recipes page both show this.
 
 For the classic controlled pattern, omit `trigger` and control the menu with `open` and `anchor`. The context-menu recipe uses this pattern.
 

packages/mui-material/src/Unstable_Menu2/Menu2.tsx

@@ -37,12 +37,13 @@ export interface Menu2Props
    */
   children?: React.ReactNode;
   /**
-   * The element that opens the menu.
+   * The content that opens the menu.
    *
-   * An element is rendered as-is with the trigger behavior merged into it, so
-   * it keeps whatever component you passed. Anything else renders inside the
-   * default trigger. Omit it and drive the menu with `open` and `anchor`
-   * instead, which is the classic controlled pattern.
+   * A single element becomes the trigger itself: the trigger behavior merges
+   * into it, so it keeps whatever component you passed. Any other node, such as
+   * text, a fragment, or several nodes, renders inside the default trigger.
+   * Omit it and drive the menu with `open` and `anchor` instead, which is the
+   * classic controlled pattern.
    */
   trigger?: React.ReactNode;
   /**
@@ -105,9 +106,13 @@ const Menu2 = React.forwardRef(function Menu2(
   const { trigger: triggerSlotProps, ...popupSlotProps } = slotProps ?? {};
   const resolvedTriggerProps = resolveComponentProps(triggerSlotProps, themedProps);
 
+  // A fragment is a valid element but cannot take the trigger's props or ref,
+  // so it counts as content and goes inside the default trigger.
+  const triggerIsElement = React.isValidElement(trigger) && trigger.type !== React.Fragment;
+
   let triggerNode: React.ReactNode = null;
   if (trigger != null) {
-    triggerNode = React.isValidElement(trigger) ? (
+    triggerNode = triggerIsElement ? (
       // Base UI's `render` merges the trigger behavior into the element, so the
       // caller keeps whatever component they passed.
       <BaseMenu.Trigger
@@ -199,12 +204,13 @@ Menu2.propTypes /* remove-proptypes */ = {
     trigger: PropTypes.elementType,
   }),
   /**
-   * The element that opens the menu.
+   * The content that opens the menu.
    *
-   * An element is rendered as-is with the trigger behavior merged into it, so
-   * it keeps whatever component you passed. Anything else renders inside the
-   * default trigger. Omit it and drive the menu with `open` and `anchor`
-   * instead, which is the classic controlled pattern.
+   * A single element becomes the trigger itself: the trigger behavior merges
+   * into it, so it keeps whatever component you passed. Any other node, such as
+   * text, a fragment, or several nodes, renders inside the default trigger.
+   * Omit it and drive the menu with `open` and `anchor` instead, which is the
+   * classic controlled pattern.
    */
   trigger: PropTypes.node,
 } as any;

packages/mui-material/src/Unstable_Menu2Submenu/Menu2Collapsed.test.tsx

@@ -174,6 +174,26 @@ describe('<Menu2 /> collapsed API', () => {
     expect(Math.round(submenu.top)).to.equal(Math.round(triggerRect.top) - 8);
   });
 
+  // `trigger` is typed as a node, so every node kind has to work. A fragment is
+  // a valid element but cannot take props or a ref, so it must count as content.
+  it.each([
+    ['text', 'Options'],
+    ['a fragment', <React.Fragment key="f">Options</React.Fragment>],
+    ['several nodes', ['Options', <span key="s" />]],
+  ])('accepts %s as the trigger', async (_name, triggerValue) => {
+    const { user } = render(
+      <Menu2 trigger={triggerValue as React.ReactNode}>
+        <Menu2Item>Profile</Menu2Item>
+      </Menu2>,
+    );
+
+    const trigger = screen.getByRole('button');
+    expect(trigger).to.have.class(menu2TriggerClasses.root);
+
+    await user.click(trigger);
+    expect(await screen.findByRole('menu')).not.to.equal(null);
+  });
+
   it('falls back to the default trigger for a non-element', async () => {
     const { user } = render(
       <Menu2 trigger="Options">