[TabsList] Drop component prop (#37042)

Author: sai6855

docs/pages/base/api/tabs-list.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "component": { "type": { "name": "elementType" } },
     "slotProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
       "default": "{}"

docs/translations/api-docs-base/tabs-list/tabs-list.json

@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "slotProps": "The props used for each slot inside the TabsList.",
     "slots": "The components used for each slot inside the TabsList. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details."
   },

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

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

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

@@ -52,6 +52,7 @@ describe('<TabsList />', () => {
     },
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
+      'componentProp',
     ],
   }));
 });

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { getTabsListUtilityClass } from './tabsListClasses';
 import {
   TabsListOwnerState,
@@ -38,7 +37,7 @@ const TabsList = React.forwardRef(function TabsList<RootComponentType extends Re
   props: TabsListProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
-  const { children, component, slotProps = {}, slots = {}, ...other } = props;
+  const { children, slotProps = {}, slots = {}, ...other } = props;
 
   const { isRtl, orientation, getRootProps, contextValue } = useTabsList({
     rootRef: forwardedRef,
@@ -52,7 +51,7 @@ const TabsList = React.forwardRef(function TabsList<RootComponentType extends Re
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabsListRoot: React.ElementType = component ?? slots.root ?? 'div';
+  const TabsListRoot: React.ElementType = slots.root ?? 'div';
   const tabsListRootProps: WithOptionalOwnerState<TabsListRootSlotProps> = useSlotProps({
     elementType: TabsListRoot,
     getSlotProps: getRootProps,
@@ -67,7 +66,7 @@ const TabsList = React.forwardRef(function TabsList<RootComponentType extends Re
       <TabsListRoot {...tabsListRootProps}>{children}</TabsListRoot>
     </TabsListProvider>
   );
-}) as OverridableComponent<TabsListTypeMap>;
+}) as PolymorphicComponent<TabsListTypeMap>;
 
 TabsList.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -78,11 +77,6 @@ TabsList.propTypes /* remove-proptypes */ = {
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The props used for each slot inside the TabsList.
    * @default {}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseTabsListRootSlotProps } from '../useTabsList';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface TabsListRootSlotPropsOverrides {}
 
@@ -44,9 +44,7 @@ export interface TabsListTypeMap<
 
 export type TabsListProps<
   RootComponentType extends React.ElementType = TabsListTypeMap['defaultComponent'],
-> = OverrideProps<TabsListTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TabsListTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TabsListOwnerState = Simplify<
   TabsListOwnProps & {