Auto close widget when another widget is opened (JS 4.x)

Question

I am looking for a way to add some script to my current application that will make widgets close when another widget is opened. The issue I am trying to avoid is having multiple widgets overlapping each other like this:

I found this post that has a solution, but it's using the JS 3.x library.

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/automatically-close-a-widget-when-opening-another/td-p/249642

UPDATE:

I have created this code. With only one reactiveUtils it works, but when I add in all of the reactiveUtils it does work. Any suggestions?

// configure auto close for widgets
    function closeWidget(esriWidget){
      esriWidget.expanded = false
    }

reactiveUtils.when(
      () => measureExpand.expanded,
      () => {
        closeWidget(eyeExpand)
        closeWidget(legendExpand)
        closeWidget(btnExpand)
      });

reactiveUtils.when(
      () => eyeExpand.expanded,
      () => {
        closeWidget(measureExpand)
        closeWidget(legendExpand)
        closeWidget(btnExpand)
      });

reactiveUtils.when(
      () => btnExpand.expanded,
      () => {
        closeWidget(measureExpand)
        closeWidget(legendExpand)
        closeWidget(eyeExpand)
      });

reactiveUtils.when(
      () => legendExpand.expanded,
      () => {
        closeWidget(eyeExpand)
        closeWidget(measureExpand)
        closeWidget(btnExpand)
      });

Thanks in advance!

ReneRubalcava · Accepted Answer

The Expand widget has a group property that will handle this for you.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html#group