[ContextMenu][DropdownMenu] Integrate new submenu parts

[andy-hook]

Builds on #627

Description

This PR uses the new submenu primitives from Menu to provide submenu support in ContextMenu and DropdownMenu

Approach

Menus can be nested to create sub menus.

Basic example

<ContextMenu>
  <ContextMenuTrigger/>
  <ContextMenuContent>
    <ContextMenuItem>Item 1</ContextMenuItem>
    <ContextMenuItem>Item 2</ContextMenuItem>
    
    <ContextMenu>
      <ContextMenuTrigger>
         Open Sub Menu
      </ContextMenuTrigger>

      <ContextMenuContent>
        <ContextMenuItem>Sub Item 1</ContextMenuItem>
        <ContextMenuItem>Sub Item 2</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  </ContextMenuContent>
</ContextMenu>

submenu-mouse-kb.mov

[andy-hook]

@jjenzz @benoitgrelard – This one is also ready. Might be easier to review after we've worked through #627 though!

[jjenzz]

Initial bits. Love how simple these changes were! Although, I'm a bit worried about the TS issues with the trigger parts, need to think about that some 😬

[jjenzz]

In fact.... 💭

const SubmenuContext = React.createContext(false);
// ...
const isSubmenu = React.useContext(SubmenuContext);
<SubmenuContext.Provider value={isSubmenu}>

I remember we did this undefined check for ContextMenu because we needed to check if it was undefined to determine isRoot but we don't need that in DropdownMenu right?

[andy-hook]

The same applies here, we need undefined to determine the root, else it'll always fall one way or the other.

[jjenzz]

I can't see a const isRoot = parentContext === undefined check anywhere in dropdown menu hence my confusion as to why we need parentMenuContext to be undefined. Can you help me understand this part?

[andy-hook]

In the previous config we needed to have an additional state available for the first render to know if the context even exists, hence the undefined, but wrapping the content means we can do it after that point, so we implicitly know it's root. f9061af