[Select][base] Drop component prop

docs/data/base/components/select/select.md

@@ -112,27 +112,17 @@ Option renders as an `<li>`:
 </div>
 ```
 
-### Slot props
+### Custom structure
 
-:::info
-The following props are available on all non-utility Base components.
-See [Usage](/base/getting-started/usage/) for full details.
-:::
-
-Use the `component` prop to override the root slot with a custom element:
-
-```jsx
-<Select component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Select slots={{ root: 'div', listbox: 'ol' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -142,6 +132,20 @@ The following code snippet applies a CSS class called `my-listbox` to the listbo
 <Select slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Select<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Select<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ## Hooks
 
 ```js

docs/pages/base/api/select.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" }, "default": "false" },
-    "component": { "type": { "name": "elementType" } },
     "defaultListboxOpen": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs-base/select/select.json

@@ -2,7 +2,6 @@
   "componentDescription": "The foundation for building custom-styled select components.",
   "propDescriptions": {
     "autoFocus": "If <code>true</code>, the select element is focused during the first mount",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultListboxOpen": "If <code>true</code>, the select will be initially open.",
     "defaultValue": "The default selected value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the select is disabled.",

packages/mui-base/src/Select/Select.spec.tsx

@@ -93,19 +93,39 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Select invalidProp={0} />
 
-      <Select component="a" href="#" />
+      <Select<string, false, 'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
+
+      <Select<string, false, typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
 
-      <Select component={CustomComponent} stringProp="test" numberProp={0} />
       {/* @ts-expect-error */}
-      <Select component={CustomComponent} />
+      <Select<string, false, typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Select
-        component="button"
+      <Select<string, false, 'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
-      <Select<string, 'button'>
-        component="button"
+      <Select<string, false, 'button'>
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}

packages/mui-base/src/Select/Select.test.tsx

@@ -47,6 +47,7 @@ describe('<Select />', () => {
         testWithElement: null,
       },
     },
+    skip: ['componentProp'],
   }));
 
   describe('keyboard navigation', () => {

packages/mui-base/src/Select/Select.tsx

@@ -104,7 +104,6 @@ const Select = React.forwardRef(function Select<
   const {
     autoFocus,
     children,
-    component,
     defaultValue,
     defaultListboxOpen = false,
     disabled: disabledProp,
@@ -130,7 +129,7 @@ const Select = React.forwardRef(function Select<
   const buttonRef = React.useRef<HTMLElement | null>(null);
   const listboxRef = React.useRef<HTMLElement>(null);
 
-  const Button = component ?? slots.root ?? 'button';
+  const Button = slots.root ?? 'button';
   const ListboxRoot = slots.listbox ?? 'ul';
   const PopperComponent = slots.popper ?? Popper;
 
@@ -265,11 +264,6 @@ Select.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the select will be initially open.
    * @default false

packages/mui-base/src/Select/Select.types.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect';
 import { SelectOption } from '../useOption';
 import Popper, { PopperProps } from '../Popper';
-import { SlotComponentProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils';
 
 export interface SelectRootSlotPropsOverrides {}
 export interface SelectListboxSlotPropsOverrides {}
@@ -155,32 +155,25 @@ export type SelectProps<
     OptionValue,
     Multiple
   >['defaultComponent'],
-> = OverrideProps<
+> = PolymorphicProps<
   SelectTypeMap<OptionValue, Multiple, {}, RootComponentType>,
   RootComponentType
-> & {
-  component?: RootComponentType;
-};
+>;
 
 // OverridableComponent cannot be used below as Select's props are generic.
 export interface SelectType {
   <
     OptionValue extends {},
-    RootComponentType extends React.ElementType,
     Multiple extends boolean = false,
+    RootComponentType extends React.ElementType = SelectTypeMap<
+      OptionValue,
+      Multiple
+    >['defaultComponent'],
   >(
-    props: {
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: RootComponentType;
-    } & OverrideProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>,
-  ): JSX.Element | null;
-  <OptionValue extends {}, Multiple extends boolean = false>(
-    props: DefaultComponentProps<SelectTypeMap<OptionValue, Multiple>>,
+    props: PolymorphicProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>,
   ): JSX.Element | null;
   propTypes?: any;
+  displayName?: string | undefined;
 }
 
 export type SelectOwnerState<OptionValue extends {}, Multiple extends boolean> = Simplify<