Balanced expression groups (JSX tags, maintaining parens?)

[mindplay-dk]

Could we have (or is there already) a way to balance JSX tags?

My input:

          <ScrollView ref={scrollViewRef}>
            {!allItems.length && (
              <NoResults>{t('No results found.')}</NoResults>
            )}

The output:

          <ScrollView ref={scrollViewRef}>
            {!allItems.length && <NoResults>{t("No results found.")}
            </NoResults>}

The <NoResults> tags seem oddly off balance here.

The issue appears to be a lack of consideration for "expression groups" such as <NoResult>...</NoResult>.

Despite that expression being explicitly grouped with parens in the input, for some reason the formatter prefers to raise the parens and break up the expression into two lines.

Does the formatter treat JSX expressions as individual expressions?

It seems to be really good at balancing and grouping parens - perhaps JSX tags could be treated more like parens in terms of grouping and balancing?