Primer Component’s 'SelectMenu' should support 'onOpen' and 'onClose' callback functions

[emplums]

(moved over from the ds repo thanks @smockle 👋 !)

Problem

In another project at GitHub there is a need to perform actions when opening or closing SelectMenus, such as closing other menus or moving the focus to another part of the application besides the SelectMenu trigger

These actions can be performed by calling functions when a SelectMenu opens or closes, but SelectMenu does not currently accept callback functions via props such as onOpen or onClose.

Solution

SelectMenu should accept a callback function via an onOpen prop (to be called when the menu opens) and another callback function via an onClose prop (to be called when the menu closes).

Alternatives

Similar to the approach described in https://github.com/github/design-systems/issues/861 for open support, it is possible to support onOpen/onClose callback functions 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.

When these values indicate a SelectMenu is newly in an open/visible state, useSelectMenuInternal invokes the onOpen callback function. Conversely, when these values indicate a SelectMenu is newly in a closed/hidden state, useSelectMenuInternal invokes the onClose callback function.

[colebemis]

We will soon be deprecating SelectMenu in favor of SelectPanel