[Menu] Bring your own Popover

[bengry]

Is it possible to use a non-Ariakit Popover for Ariakit Menu (and other components)? I didn't see any example like this or references in GitHub.

My use case is gradually adopting Ariakit, and since I already have a Popover component, it would be great not to have two different ways to lay out floating elements, etc.

I tried to combine the two via Ariakit's render prop. and also via Radix's asChild. In either case, it seems like there are issues.
E.g. in this Stackblitz things seem to work, but if you play around with the example a bit, you'll notice that they get out of sync:

CleanShot.2024-03-11.at.21.13.20.mp4

I also tried a few other ways to compose the two libraries, but only one seemed to somewhat work (App3 in the linked Stackblitz), but there I manage the state myself, which I'd prefer to avoid, and also - the portal is Ariakit's one, not my own.

The ideal situation is allowing Ariakit to control everything - the open state included, but offload the positioning logic into another component (e.g. placement has no relevancy). The other is to let the other library control the open state, and then Ariakit is in an "always visible" mode as far as it's concerned, or at least the Menu component is, since it's no longer in charge of controlling whether or not it shows any content conditionally.

Any advice on how (if at all) it's recommended to compose Ariakit with other libraries like this would be much appreciated.

[diegohaz]

If you don't want to manage the state with React, you can rely on Ariakit stores:

// You can optionally pass `open` and `setOpen` from external props to the menu store
const menu = Ariakit.useMenuStore({ open: props.open, setOpen: props.onClose });
const internalOpen = menu.useState("open");

<Ariakit.MenuProvider store={menu}>
  <RadixPopover.Root open={internalOpen} onOpenChange={menu.setOpen}>

For the content element, you can either use the MenuList component, or use Menu with updatePosition={() => {}} and delegate the auto focus control to Ariakit by disabling it on the Radix side:

<RadixPopover.Content
  onOpenAutoFocus={(event) => event.preventDefault()}
>

There's a few Radix UI examples on the site.