[TabPanel] drop component prop (#37054)

docs/pages/base/api/tab-panel.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/tab-panel/tab-panel.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 TabPanel.",
     "slots": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See <a href=\"#slots\">Slots API</a> below for more details.",
     "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it&#39;s required for the tab panel to be rendered on the server."

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

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

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

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

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import composeClasses from '../composeClasses';
 import { getTabPanelUtilityClass } from './tabPanelClasses';
 import useTabPanel from '../useTabPanel/useTabPanel';
@@ -36,7 +35,7 @@ const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends Re
   props: TabPanelProps<RootComponentType>,
   forwardedRef: React.ForwardedRef<Element>,
 ) {
-  const { children, component, value, slotProps = {}, slots = {}, ...other } = props;
+  const { children, value, slotProps = {}, slots = {}, ...other } = props;
 
   const { hidden, getRootProps } = useTabPanel(props);
 
@@ -47,7 +46,7 @@ const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends Re
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabPanelRoot: React.ElementType = component ?? slots.root ?? 'div';
+  const TabPanelRoot: React.ElementType = slots.root ?? 'div';
   const tabPanelRootProps: WithOptionalOwnerState<TabPanelRootSlotProps> = useSlotProps({
     elementType: TabPanelRoot,
     getSlotProps: getRootProps,
@@ -62,7 +61,7 @@ const TabPanel = React.forwardRef(function TabPanel<RootComponentType extends Re
   });
 
   return <TabPanelRoot {...tabPanelRootProps}>{!hidden && children}</TabPanelRoot>;
-}) as OverridableComponent<TabPanelTypeMap>;
+}) as PolymorphicComponent<TabPanelTypeMap>;
 
 TabPanel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -73,11 +72,6 @@ TabPanel.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 TabPanel.
    * @default {}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { UseTabPanelRootSlotProps } from '../useTabPanel';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface TabPanelRootSlotPropsOverrides {}
 
@@ -50,9 +50,7 @@ export interface TabPanelTypeMap<
 
 export type TabPanelProps<
   RootComponentType extends React.ElementType = TabPanelTypeMap['defaultComponent'],
-> = OverrideProps<TabPanelTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<TabPanelTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TabPanelOwnerState = Simplify<
   TabPanelOwnProps & {