diff --git a/docs/pages/base/api/modal.json b/docs/pages/base/api/modal.json
index 11a7469bb0d474..2993d0ee3210bf 100644
--- a/docs/pages/base/api/modal.json
+++ b/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
| func" } },
"disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
"disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },
diff --git a/docs/translations/api-docs-base/modal/modal.json b/docs/translations/api-docs-base/modal/modal.json
index 83c5cf84ab30ec..0ce4a100e2ce69 100644
--- a/docs/translations/api-docs-base/modal/modal.json
+++ b/docs/translations/api-docs-base/modal/modal.json
@@ -3,7 +3,6 @@
"propDescriptions": {
"children": "A single child content element.
⚠️ Needs to be able to hold a ref.",
"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 container
will have the portal children appended to it.
By default, it uses the body of the top-level document object, so it's simply document.body
most of the time.",
"disableAutoFocus": "If true
, 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 disableAutoFocus
prop.
Generally this should never be set to true
as it makes the modal less accessible to assistive technologies, like screen readers.",
"disableEnforceFocus": "If true
, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true
as it makes the modal less accessible to assistive technologies, like screen readers.",
diff --git a/packages/mui-base/src/Modal/Modal.spec.tsx b/packages/mui-base/src/Modal/Modal.spec.tsx
index 6e97a1c845ef2c..fe3f92641fb8f6 100644
--- a/packages/mui-base/src/Modal/Modal.spec.tsx
+++ b/packages/mui-base/src/Modal/Modal.spec.tsx
@@ -29,21 +29,41 @@ const polymorphicComponentTest = () => {
{/* @ts-expect-error */}
-
+
+ slots={{
+ root: 'a',
+ }}
+ href="#"
+ open
+ >
-
+
+ slots={{
+ root: CustomComponent,
+ }}
+ stringProp="test"
+ numberProp={0}
+ open
+ >
{/* @ts-expect-error */}
-
+
+ slots={{
+ root: CustomComponent,
+ }}
+ open
+ >
-
+ slots={{
+ root: 'button',
+ }}
onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()}
open
>
@@ -51,7 +71,9 @@ const polymorphicComponentTest = () => {
- component="button"
+ slots={{
+ root: 'button',
+ }}
ref={(elem) => {
expectType(elem);
}}
diff --git a/packages/mui-base/src/Modal/Modal.test.tsx b/packages/mui-base/src/Modal/Modal.test.tsx
index 8433e7c0374320..17f23cd4084270 100644
--- a/packages/mui-base/src/Modal/Modal.test.tsx
+++ b/packages/mui-base/src/Modal/Modal.test.tsx
@@ -31,6 +31,7 @@ describe('', () => {
},
},
skip: [
+ 'componentProp',
'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565
],
}),
diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx
index c2e95b3b85e416..69f78ab322a61a 100644
--- a/packages/mui-base/src/Modal/Modal.tsx
+++ b/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
);
-}) as OverridableComponent;
+}) as PolymorphicComponent;
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.
*/
diff --git a/packages/mui-base/src/Modal/Modal.types.ts b/packages/mui-base/src/Modal/Modal.types.ts
index 586d49124f4a3c..ba0cebbef10034 100644
--- a/packages/mui-base/src/Modal/Modal.types.ts
+++ b/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 {
defaultComponent: M['defaultComponent'];
}
-export type ExtendModal = OverridableComponent>;
+export type ExtendModal = PolymorphicComponent>;
export type ModalProps<
RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent'],
-> = OverrideProps, RootComponentType>;
+> = PolymorphicProps, RootComponentType>;
export type ModalOwnerState = Simplify<
ModalOwnProps & {