javascript - radix-ui/react-menubar: ¿abrir al pasar el cursor?

¡Estoy usando un Menubar de radix-ui que funciona bien! El Menubar se abre usando el componente Menubar.Trigger de radix.

import * as Menubar from "@radix-ui/react-menubar";

<Menubar.Root
    onValueChange={(value) => {
        if (onOpenChange) onOpenChange(Boolean(value));
    }}
    >
  <Menubar.Menu>
    <div
      className={`relative inline-block idle`}
    >
    <IconV2 />
    </div>
    <Menubar.Trigger>
      <ChevronDown width={10} />
    </Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content align="start">
        <Menubar.Item onClick={onClick}>
           Option 1
        </Menubar.Item>
        <Menubar.Item onClick={onClick}>
           Option 2
        </MenubarItem>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

Sin embargo, este no es un componente controlado: ¿cómo puedo abrirlo onHover en el disparador?

Respuesta #1

Hola, aquí está la solución,

import { useState } from "react";
.........
const [open, setOpen] = useState(false);
..........
<Menubar.Root open={open} onOpenChange={setOpen}>
  <Menubar.Trigger onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
    <ChevronDown width={10} />
  </Menubar.Trigger>
........other code.......

Editado: El código anterior tiene algunos problemas, usa esto en su lugar

import { useState } from "react";
..............other code........
const [open, setOpen] = useState(false);
.....
<div onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
        <Menubar.Root modal={false} open={open} onOpenChange={setOpen}>
            .......other code same as yours...
        </Menubar.Root>
    </div>
......other code.....