Primer Component’s 'SelectMenu' should be usable as a controlled component

[emplums]

(Moved over from the ds repo thanks @smockle !)

Problem

Currently, SelectMenu manages its own open/closed state. By calling setOpen from SelectMenu.Context, a component descendent of SelectMenu can open or close the menu. But it’s currently difficult for a component outside SelectMenu’s render tree to open or close it.

In another project at GitHub using PRC, there is a need to be able to open SelectMenu components from places outside of the SelectMenu hierarchy.

Solution

SelectMenu should accept an open prop, which controls whether the menu is open/visible or closed/hidden.

Alternatives

Another project at GitHub using PRC is able to auto-open the SelectMenu s by defining a custom SelectMenu component which renders a SelectMenuInternal component which consumes a useSelectMenuInternal hook.

Because useSelectMenuInternal is called by SelectMenuInternal (a child of SelectMenu), it has access to both SelectMenu.Context and a set of propagated props (specifically, open, onOpen and onClose).

By using useEffect to respond to changes in SelectMenu.Context and props, useSelectMenuInternal is able to synchronize the SelectMenu.Context’s internal open value with the value of the open prop.

This effectively allows the SelectMenu component to be controlled.

[colebemis]

We will soon be deprecating SelectMenu in favor of SelectPanel