From fb255ecde7f7c05a5018fffe2bc88c31fba25379 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 27 Apr 2023 11:10:07 +0100 Subject: [PATCH 1/4] [Modal][base] Drop component prop --- docs/pages/base/api/modal.json | 1 - .../api-docs-base/modal/modal.json | 1 - packages/mui-base/src/Modal/Modal.spec.tsx | 34 +++++++++++++++---- packages/mui-base/src/Modal/Modal.test.tsx | 1 + packages/mui-base/src/Modal/Modal.tsx | 16 ++------- packages/mui-base/src/Modal/Modal.types.ts | 8 ++--- 6 files changed, 36 insertions(+), 25 deletions(-) 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 & { From 34878fdbd94d56e457bd52a40ee78aa16c57aed6 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 28 Apr 2023 12:52:19 +0100 Subject: [PATCH 2/4] fix error --- packages/mui-base/src/Modal/Modal.types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-base/src/Modal/Modal.types.ts b/packages/mui-base/src/Modal/Modal.types.ts index ba0cebbef10034..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 { OverridableTypeMap, Simplify } from '@mui/types'; +import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types'; import { PortalProps } from '../Portal'; -import { PolymorphicComponent, PolymorphicProps, SlotComponentProps } from '../utils'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export interface ModalRootSlotPropsOverrides {} export interface ModalBackdropSlotPropsOverrides {} @@ -138,7 +138,7 @@ export interface ExtendModalTypeMap { defaultComponent: M['defaultComponent']; } -export type ExtendModal = PolymorphicComponent>; +export type ExtendModal = OverridableComponent>; export type ModalProps< RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent'], From c83ecead68f90fdf6a449ec91803bffe47e695c6 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 28 Apr 2023 17:02:10 +0100 Subject: [PATCH 3/4] fix type error --- packages/mui-base/src/Modal/Modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx index 69f78ab322a61a..84bdc99d612926 100644 --- a/packages/mui-base/src/Modal/Modal.tsx +++ b/packages/mui-base/src/Modal/Modal.tsx @@ -79,7 +79,7 @@ const Modal = React.forwardRef(function Modal Date: Sun, 30 Apr 2023 09:56:18 +0100 Subject: [PATCH 4/4] add comment --- packages/mui-base/src/Modal/Modal.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx index 84bdc99d612926..77339544c4bcbb 100644 --- a/packages/mui-base/src/Modal/Modal.tsx +++ b/packages/mui-base/src/Modal/Modal.tsx @@ -90,6 +90,8 @@ const Modal = React.forwardRef(function Modal