[Tabs][base] Drop component prop

docs/data/base/components/tabs/tabs.md

@@ -84,23 +84,37 @@ The Tab components are each composed of a root slot with no interior slots:
 </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:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
-<Tab component="span" />
+<Tab slots={{ root: 'span' }} />
 ```
 
 If you provide a non-interactive element such as a `<span>`, the Tab components will automatically add the necessary accessibility attributes.
 
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
+:::
+
 ## Customization
 
+### 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
+<Tab<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Tab<'button'> slots={{ root: 'button' }} onClick={() => {}} />
+```
+
 ### Third-party routing library
 
 A common use case for tabs is to implement client-side navigation that doesn't require an HTTP round-trip to the server.

docs/pages/base/api/tabs.json

@@ -1,7 +1,6 @@
 {
  "props": {
  "children": { "type": { "name": "node" } },
- "component": { "type": { "name": "elementType" } },
  "defaultValue": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
  "direction": {
  "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },

docs/translations/api-docs-base/tabs/tabs.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.",
  "defaultValue": "The default value. Use when the component is not controlled.",
  "direction": "The direction of the text.",
  "onChange": "Callback invoked when new value is being set.",

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

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

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

@@ -43,6 +43,7 @@ describe('<Tabs />', () => {
  expectedClassName: classes.root,
  },
  },
+ skip: ['componentProp'],
  }));
 
  it('can be named via `aria-label`', () => {

packages/mui-base/src/Tabs/Tabs.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 { getTabsUtilityClass } from './tabsClasses';
 import { TabsOwnerState, TabsProps, TabsRootSlotProps, TabsTypeMap } from './Tabs.types';
@@ -39,7 +38,6 @@ const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.Elem
  defaultValue,
  orientation = 'horizontal',
  direction = 'ltr',
- component,
  onChange,
  selectionFollowsFocus,
  slotProps = {},
@@ -57,7 +55,7 @@ const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.Elem
 
  const classes = useUtilityClasses(ownerState);
 
- const TabsRoot: React.ElementType = component ?? slots.root ?? 'div';
+ const TabsRoot: React.ElementType = slots.root ?? 'div';
  const tabsRootProps: WithOptionalOwnerState<TabsRootSlotProps> = useSlotProps({
  elementType: TabsRoot,
  externalSlotProps: slotProps.root,
@@ -74,7 +72,7 @@ const Tabs = React.forwardRef(function Tabs<RootComponentType extends React.Elem
  <TabsProvider value={contextValue}>{children}</TabsProvider>
  </TabsRoot>
  );
-}) as OverridableComponent<TabsTypeMap>;
+}) as PolymorphicComponent<TabsTypeMap>;
 
 Tabs.propTypes /* remove-proptypes */ = {
  // ----------------------------- Warning --------------------------------
@@ -85,11 +83,6 @@ Tabs.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 default value. Use when the component is not controlled.
  */

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import { SlotComponentProps } from '../utils';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface TabsRootSlotPropsOverrides {}
 
@@ -75,9 +76,7 @@ export interface TabsTypeMap<
 
 export type TabsProps<
  RootComponentType extends React.ElementType = TabsTypeMap['defaultComponent'],
-> = OverrideProps<TabsTypeMap<{}, RootComponentType>, RootComponentType> & {
- component?: RootComponentType;
-};
+> = PolymorphicProps<TabsTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type TabsOwnerState = Simplify<
  TabsOwnProps & {