From 0476b666e4127f7de73371a16d85c6a072bc7383 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Fri, 28 Apr 2023 17:04:41 +0530
Subject: [PATCH] [TabsList] Drop component prop (#37042)

---
 docs/pages/base/api/tabs-list.json               |  1 -
 .../api-docs-base/tabs-list/tabs-list.json       |  1 -
 packages/mui-base/src/TabsList/TabsList.spec.tsx | 16 ++++++++++------
 packages/mui-base/src/TabsList/TabsList.test.tsx |  1 +
 packages/mui-base/src/TabsList/TabsList.tsx      | 14 ++++----------
 packages/mui-base/src/TabsList/TabsList.types.ts |  8 +++-----
 6 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/docs/pages/base/api/tabs-list.json b/docs/pages/base/api/tabs-list.json
index e888c35fb22d1b..44664ef547e1de 100644
--- a/docs/pages/base/api/tabs-list.json
+++ b/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": "{}"
diff --git a/docs/translations/api-docs-base/tabs-list/tabs-list.json b/docs/translations/api-docs-base/tabs-list/tabs-list.json
index 0067df3d304aa5..9d459303149ef5 100644
--- a/docs/translations/api-docs-base/tabs-list/tabs-list.json
+++ b/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."
   },
diff --git a/packages/mui-base/src/TabsList/TabsList.spec.tsx b/packages/mui-base/src/TabsList/TabsList.spec.tsx
index fed31f225b8814..665323c1571114 100644
--- a/packages/mui-base/src/TabsList/TabsList.spec.tsx
+++ b/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);
         }}
diff --git a/packages/mui-base/src/TabsList/TabsList.test.tsx b/packages/mui-base/src/TabsList/TabsList.test.tsx
index d004e1b04601a3..858ac44140b579 100644
--- a/packages/mui-base/src/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.test.tsx
@@ -52,6 +52,7 @@ describe('<TabsList />', () => {
     },
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
+      'componentProp',
     ],
   }));
 });
diff --git a/packages/mui-base/src/TabsList/TabsList.tsx b/packages/mui-base/src/TabsList/TabsList.tsx
index b49e0b7eb63d41..2fc5a8fed7f8b9 100644
--- a/packages/mui-base/src/TabsList/TabsList.tsx
+++ b/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 {}
diff --git a/packages/mui-base/src/TabsList/TabsList.types.ts b/packages/mui-base/src/TabsList/TabsList.types.ts
index 8b1e4a4475b67b..f96d9695ee312e 100644
--- a/packages/mui-base/src/TabsList/TabsList.types.ts
+++ b/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 & {