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..77339544c4bcbb 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 +330,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 +405,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..5062fc72410767 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 { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types'; import { PortalProps } from '../Portal'; -import { SlotComponentProps } from '../utils'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export interface ModalRootSlotPropsOverrides {} export interface ModalBackdropSlotPropsOverrides {} @@ -142,7 +142,7 @@ export type ExtendModal = OverridableComponent = OverrideProps, RootComponentType>; +> = PolymorphicProps, RootComponentType>; export type ModalOwnerState = Simplify< ModalOwnProps & {