[Joy] Use native html for root slot

[siriwatknp]

Motivation

Our Input and Select requires a div for creating the layout because we want to make it easy to add styles and start/end decorators. Conventionally, all the props are spread to the div (defined as the root element), which makes the DX sometimes really bad:

<Input componentsProps={{ input: { aria-label: 'Search' } }} />
<Input componentsProps={{ input: { component: 'textarea' } }} /> // this makes typescript really hard

// or worse, Input is a slot in TextField
<TextField componentsProps={{ input: { componentsProps: { data-attribute: '' } } }} />
<TextField
    {...inputProps}
    componentsProps={{
      input: { componentsProps: { readOnly: true, input: { ref: inputRef } } },
    }}
  />
  
<Select componentsProps={{ button: { aria-label: '...', id: '...' } }} />

Related issues:

• [InputUnstyled] not forwarding textarea specific props (rows, maxRows, minRows) #33060
• [material-ui][TextField] InputProps vs inputProps confusion #11377

Proposal

I think 99.99% of developers want to pass props/ref to the input element, not the div so why don't we mark the input as the root slot so that it still follows our convention and add a special note that the root slot does not need to be the uppermost parent of the component.

This reduces some complexity in the code as well because we don't need to define which prop should be forwarded to input.

The result will be like this:

<Input aria-label="Search" />
<Input component="textarea"  /> // typescript just works

<TextField componentsProps={{ input: { data-attribute: '' } }} />
<TextField
    {...inputProps}
    componentsProps={{
      input: { readOnly: true, ref: inputRef },
    }}
  />
  
<Select aria-label="..." id="" />

However, the sx prop is a special prop. It always goes to the uppermost of the component for styling purposes. (I tried and it gives a lot better experience).

cc @flaviendelangle What do you think?

close #33738

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

@mui/joy: parsed: -0.22% 😍, gzip: -0.20% 😍

Generated by 🚫 dangerJS against ef67898

[siriwatknp]

Cleaner code 🎉

[siriwatknp]

No need for all of these anymore.

[siriwatknp]

Look at this mess 🥲

[oliviertassinari]

This conformance test

material-ui/test/utils/describeConformance.js

Line 99 in 198f679

export function testPropsSpread(element, getOptions) {

was created to fix the components that were not spreading props on the root 😁. The core idea was that exceptions have to be learned. If I recall correctly, we have one component in the codebase that currently skips this conformance test: Switch.

I wonder if the best solution here is to unbundle. If it's painful to target a child element, then maybe it should be its own React component? We encourage most people to use the TextField, and to look into Input when they need composition.

// or worse, Input is a slot in TextField
<TextField componentsProps={{ input: { componentsProps: { data-attribute: '' } } }} />

I think that regardless of this proposal, in some cases, it would be beneficial to flatten the slots, making child slots available to the parent.

---

If we move in this direction, to make sure it's compatible with making the same change in Material UI v6 (that there are no hidden constraints that we don't see). Also, I have an impression of déjà vu, I suspect we can find GitHub issues that talks about this problem in the history.