[base] Maintain nodes document order in compound components

[michaldudak]

Makes sure that the registered compound component's children are in document order, even if inserted in the middle of the existing collection.

Part of the fix for #36800

Before: https://codesandbox.io/s/modest-gates-zwyhbd?file=/demo.tsx
After: https://codesandbox.io/s/naughty-banzai-3d6e6z?file=/demo.tsx

[mui-bot]

Netlify deploy preview

https://deploy-preview-36857--material-ui.netlify.app/

@material-ui/unstyled: parsed: +0.39% , gzip: +0.45%
@mui/material-next: parsed: +0.23% , gzip: +0.28%
@mui/joy: parsed: +0.11% , gzip: +0.17%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against ac5a469

[sai6855]

@michaldudak i could still reproduce the issue though.

1. enter "d"
2. clear "d"
3. press "Tab"

here i think 1st option should be highlighted but right now 2nd option is highlighted

https://www.loom.com/share/912b0018a0b74204affba593f87b1b00

[michaldudak]

Ahh, OK, it's a different issue now (that's actually a feature in other cases). What happens is that the Menu tries to keep the highlighted item when options change. This is handy when you load more options lazily and don't want the scroll to reset (we recently had this issue in Material UI's Autocomplete).

Let me think for a bit about how to approach this to handle both cases. I suppose the lazy loading case won't be common for menus, so we can always reset the highlight. On the other hand, I didn't expect to see a Menu with filtering functionality...

[michaldudak]

@siriwatknp This should fix the problem with Base UI's marketing page's Select highlighting the middle item.
I'll fix the remainder of the #36800 issue in a separate PR, as it's a different problem.

[mnajdova]

Looks good 👍