onChange handler for MenuButton

[bezreyhan]

First off, thanks for all of the work that you are doing!

Looking at the MenuButton example: https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react#basic-example-1

I'm wondering how I could get notified when the selected MenuItem has changed?

One idea would be to add an onChange prop to the MenuItems component. Each MenuItem would have to have some unique identifier.

This would also enable a different implementation other than renderProps. The consumer of MenuItems would be responsible for determining which item is currently selected. e.g

const [selectedId, setSelectedId] = useState();

<MenuItems onChange={(id) => setSelectedItem(id)}>
  <MenuItem className={cx(['text-red']: 'some_id' === selectedId)}>...
</MenuItems>

While it does require slightly more work to implement, it gives the consumer of this component a lot more control to do things when the Menu changes (e.g fire analytics event, api requests to fetch data). This would also allow users to set the menu to be opened on hover or to have the menu be open by default.