[Select][material-next] Add Select component

[mj12albert]

Part of https://github.com/mui/material-ui/issues/29345

Material You specs: https://m3.material.io/components/menus/specs

Migration Guide checklist

• [x] Copy component files from material (v5) to material-next, including tests, types, and utils: PR: #39188
• [ ] Migrate component to Typescript
• [ ] Remove deprecated components and componentsProps props, leaving only slots and slotProps
• [ ] Drop support for ThemeProvider in favor of CssVarsProvider
• [ ] Refactor component to use Base UI’s useSelect: WIP #39591
• [ ] Implement Material You design specs
• [ ] Add component playground to v5 docs
• [ ] Refactor styles to use component CSS Variables

Other features & related tasks

• Introduce a new Option component based on @mui/base/useOption
• Introduce a new (internal) Menu based on @mui/base/useMenu for the Select's listbox
• native prop for native select isn't provided by Base yet
• FormControl integration https://github.com/mui/material-ui/issues/38411
• Replace Input dependencies with material-next Input components when those are done: https://github.com/mui/material-ui/issues/38374
• useSelect uses useControlledReducer internally, the warning when switching between controlled/uncontrolled needs to be added back (this comment)
• Support for Divider https://github.com/mui/material-ui/issues/39007
• Option grouping - v5 uses ListSubheader, should v6 replace it with a OptionGroup component? (This would be a breaking change, and also not in the MD3 spec)
• New SelectField component https://github.com/mui/material-ui/issues/21782
• Avoid native label with non-native Select https://github.com/mui/material-ui/issues/38869#issuecomment-1792184844

[mj12albert]

Some open questions I have on my mind:

1. New Option component

v5 uses the same MenuItem component for Select options and items in Menu, Base has a new useOption that is distinct from useMenu so we could introduce a new Option component for material-next (this would be it's own separate issue)

2. Do not rely on Menu, introduce Listbox component?

v5 uses the Menu component for the listbox, if v6 were to use useSelect it wouldn't make sense as Base's useMenu has it's own prop getters with a different context. This new component can be completely internal, the important part is detaching from the v5 Menu/MenuList/List structure

Maybe we just need to share the styles between Menu and the select Listbox since they should be identical in terms of the MD3 specs

[mj12albert]

I think the v6 Select will still depend on InputBase (and therefore also depends on FormControl) for the select trigger, since internally it uses OutlinedInput (or filled) to share styles with text fields:

// heavily simplified version of what https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Select/Select.js
// would look like in v6
function Select() {
  return (
    <OutlinedInput // it's essentially `InputBase` with a layer of styles
      slots={{
        input: SelectInput, // most of the refactoring with useSelect would happen here
      }}
      slotProps={{
        input: {
          children,
          multiple,
          // more props
        },
      }}
    />
  );
}

[DiegoAndai]

@mj12albert I agree with both your points 🙌🏼 This would mean trying to get as close as possible to Joy's implementation (which uses Option and ListBox components) without breaking changes 🚀