[Modal][base] Drop component prop

docs/pages/base/api/modal.json

@@ -3,7 +3,6 @@
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "open": { "type": { "name": "bool" }, "required": true },
     "closeAfterTransition": { "type": { "name": "bool" }, "default": "false" },
-    "component": { "type": { "name": "elementType" } },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs-base/modal/modal.json

@@ -3,7 +3,6 @@
   "propDescriptions": {
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
     "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "disableAutoFocus": "If <code>true</code>, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the <code>disableAutoFocus</code> prop.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",
     "disableEnforceFocus": "If <code>true</code>, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to <code>true</code> as it makes the modal less accessible to assistive technologies, like screen readers.",

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

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

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

@@ -31,6 +31,7 @@ describe('<Modal />', () => {
         },
       },
       skip: [
+        'componentProp',
         'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565
       ],
     }),

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

@@ -8,7 +8,7 @@ import {
   unstable_createChainedFunction as createChainedFunction,
   unstable_useEventCallback as useEventCallback,
 } from '@mui/utils';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import { ModalOwnerState, ModalOwnProps, ModalProps, ModalTypeMap } from './Modal.types';
 import composeClasses from '../composeClasses';
 import Portal from '../Portal';
@@ -69,7 +69,6 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
   const {
     children,
     closeAfterTransition = false,
-    component,
     container,
     disableAutoFocus = false,
     disableEnforceFocus = false,
@@ -255,7 +254,7 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
     childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
   }
 
-  const Root = component ?? slots.root ?? 'div';
+  const Root = slots.root ?? 'div';
   const rootProps = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
@@ -313,7 +312,7 @@ const Modal = React.forwardRef(function Modal<RootComponentType extends React.El
       </Root>
     </Portal>
   );
-}) as OverridableComponent<ModalTypeMap>;
+}) as PolymorphicComponent<ModalTypeMap>;
 
 Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -329,11 +328,6 @@ Modal.propTypes /* remove-proptypes */ = {
    * @default false
    */
   closeAfterTransition: PropTypes.bool,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
@@ -409,10 +403,6 @@ Modal.propTypes /* remove-proptypes */ = {
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
   onClose: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
   /**
    * If `true`, the component is shown.
    */

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { OverridableComponent, OverridableTypeMap, OverrideProps, Simplify } from '@mui/types';
+import { OverridableTypeMap, Simplify } from '@mui/types';
 import { PortalProps } from '../Portal';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicComponent, PolymorphicProps, SlotComponentProps } from '../utils';
 
 export interface ModalRootSlotPropsOverrides {}
 export interface ModalBackdropSlotPropsOverrides {}
@@ -138,11 +138,11 @@ export interface ExtendModalTypeMap<M extends OverridableTypeMap> {
   defaultComponent: M['defaultComponent'];
 }
 
-export type ExtendModal<M extends OverridableTypeMap> = OverridableComponent<ExtendModalTypeMap<M>>;
+export type ExtendModal<M extends OverridableTypeMap> = PolymorphicComponent<ExtendModalTypeMap<M>>;
 
 export type ModalProps<
   RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent'],
-> = OverrideProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
+> = PolymorphicProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type ModalOwnerState = Simplify<
   ModalOwnProps & {