drop component prop

Author: sai6855

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

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

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

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

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import composeClasses from '../composeClasses';
 import { getTabUtilityClass } from './tabClasses';
 import { TabProps, TabTypeMap, TabRootSlotProps, TabOwnerState } from './Tab.types';
 import useTab from '../useTab';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = (ownerState: TabOwnerState) => {
@@ -40,7 +39,6 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
     onChange,
     onClick,
     onFocus,
-    component,
     slotProps = {},
     slots = {},
     ...other
@@ -64,7 +62,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabRoot: React.ElementType = component ?? slots.root ?? 'button';
+  const TabRoot: React.ElementType =slots.root ?? 'button';
   const tabRootProps: WithOptionalOwnerState<TabRootSlotProps> = useSlotProps({
     elementType: TabRoot,
     getSlotProps: getRootProps,
@@ -78,7 +76,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
   });
 
   return <TabRoot {...tabRootProps}>{children}</TabRoot>;
-}) as OverridableComponent<TabTypeMap>;
+}) as PolymorphicComponent<TabTypeMap>;
 
 Tab.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

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

@@ -1,8 +1,9 @@
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import * as React from 'react';
 import { ButtonOwnProps } from '../Button';
 import { SlotComponentProps } from '../utils';
 import { UseTabRootSlotProps } from '../useTab';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface TabRootSlotPropsOverrides {}
 
@@ -39,9 +40,7 @@ export interface TabSlots {
 }
 
 export type TabProps<RootComponentType extends React.ElementType = TabTypeMap['defaultComponent']> =
-  OverrideProps<TabTypeMap<{}, RootComponentType>, RootComponentType> & {
-    component?: RootComponentType;
-  };
+  PolymorphicProps<TabTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface TabTypeMap<
   AdditionalProps = {},