From 1b9c8ab5a7c0125fa411f46ffafba76f04fc6eae Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Wed, 19 Jul 2023 01:34:50 +0530 Subject: [PATCH] [core] Adds `component` prop to `OverrideProps` type (#35924) --- .../guides/routing/LinkRouterWithTheme.tsx | 4 +- docs/data/material/guides/routing/routing.md | 2 +- docs/src/modules/components/Link.tsx | 2 +- packages/mui-material/src/Button/Button.js | 2 +- .../mui-material/src/Button/Button.spec.tsx | 33 +++++ packages/mui-material/src/Card/Card.d.ts | 4 +- packages/mui-material/src/Card/Card.spec.tsx | 33 +++++ .../src/CardHeader/CardHeader.spec.tsx | 13 +- packages/mui-material/src/Dialog/Dialog.d.ts | 2 +- .../mui-material/src/Dialog/Dialog.spec.tsx | 19 ++- packages/mui-material/src/Drawer/Drawer.d.ts | 2 +- .../mui-material/src/Drawer/Drawer.spec.tsx | 19 +++ packages/mui-material/src/Fab/Fab.js | 2 +- .../FormHelperText/FormHelperText.spec.tsx | 66 +++++++++ packages/mui-material/src/Grid/Grid.spec.tsx | 65 ++++++++- packages/mui-material/src/Link/Link.d.ts | 16 ++- packages/mui-material/src/Link/Link.spec.tsx | 44 +++++- .../mui-material/src/ListItem/ListItem.js | 2 +- .../src/ListItemButton/ListItemButton.js | 2 +- .../mui-material/src/MenuItem/MenuItem.js | 2 +- .../src/MenuItem/MenuItem.spec.tsx | 71 ++++++++++ .../src/OverridableComponent.d.ts | 7 + packages/mui-material/src/Paper/Paper.d.ts | 62 +++++---- .../mui-material/src/Paper/Paper.spec.tsx | 40 +++++- packages/mui-material/src/Paper/index.d.ts | 2 +- .../mui-material/src/Popover/Popover.d.ts | 2 +- .../mui-material/src/Popover/Popover.spec.tsx | 18 +++ .../src/Typography/Typography.d.ts | 131 +++++++++--------- packages/mui-material/src/styles/props.d.ts | 2 +- 29 files changed, 540 insertions(+), 129 deletions(-) create mode 100644 packages/mui-material/src/Card/Card.spec.tsx create mode 100644 packages/mui-material/src/Drawer/Drawer.spec.tsx create mode 100644 packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx create mode 100644 packages/mui-material/src/MenuItem/MenuItem.spec.tsx create mode 100644 packages/mui-material/src/Popover/Popover.spec.tsx diff --git a/docs/data/material/guides/routing/LinkRouterWithTheme.tsx b/docs/data/material/guides/routing/LinkRouterWithTheme.tsx index 0772e53f7f1598..b8ebf7d0f06af7 100644 --- a/docs/data/material/guides/routing/LinkRouterWithTheme.tsx +++ b/docs/data/material/guides/routing/LinkRouterWithTheme.tsx @@ -8,7 +8,7 @@ import { StaticRouter } from 'react-router-dom/server'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; -import Link, { LinkProps } from '@mui/material/Link'; +import Link from '@mui/material/Link'; const LinkBehavior = React.forwardRef< HTMLAnchorElement, @@ -33,7 +33,7 @@ const theme = createTheme({ MuiLink: { defaultProps: { component: LinkBehavior, - } as LinkProps, + }, }, MuiButtonBase: { defaultProps: { diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md index f29106b32227ca..ff2ca38cedad7c 100644 --- a/docs/data/material/guides/routing/routing.md +++ b/docs/data/material/guides/routing/routing.md @@ -41,7 +41,7 @@ const theme = createTheme({ MuiLink: { defaultProps: { component: LinkBehavior, - } as LinkProps, + }, }, MuiButtonBase: { defaultProps: { diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx index e3859925a20a19..c1d2938ae2f1eb 100644 --- a/docs/src/modules/components/Link.tsx +++ b/docs/src/modules/components/Link.tsx @@ -64,7 +64,7 @@ export type LinkProps = { linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled(). noLinkStyle?: boolean; } & Omit & - Omit; + Omit; // A styled version of the Next.js Link component: // https://nextjs.org/docs/api-reference/next/link diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 94f62bc229c36b..91b4f4dc4be0fd 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -396,7 +396,7 @@ Button.propTypes /* remove-proptypes */ = { * The component used for the root node. * Either a string to use a HTML element or a component. */ - component: PropTypes.elementType, + component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx index 1250869cfb83d9..7d1aa8a8841364 100644 --- a/packages/mui-material/src/Button/Button.spec.tsx +++ b/packages/mui-material/src/Button/Button.spec.tsx @@ -13,6 +13,39 @@ function FakeIcon() { return
Icon
; } +const props1: ButtonProps<'div'> = { + component: 'div', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: ButtonProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: ButtonProps<'span'> = { + // @ts-expect-error + component: 'div', +}; + +const props4: ButtonProps = { + component: TestOverride, + x: 2, +}; + +const props5: ButtonProps = { + component: TestOverride, + // @ts-expect-error + inCorrectProp: 3, +}; + +const props6: ButtonProps = { + component: TestOverride, +}; + const buttonTest = () => (
diff --git a/packages/mui-material/src/Card/Card.d.ts b/packages/mui-material/src/Card/Card.d.ts index 474db55d4b62f0..310d25f99a4e4b 100644 --- a/packages/mui-material/src/Card/Card.d.ts +++ b/packages/mui-material/src/Card/Card.d.ts @@ -3,7 +3,7 @@ import { SxProps } from '@mui/system'; import { DistributiveOmit } from '@mui/types'; import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent'; import { Theme } from '..'; -import { PaperProps } from '../Paper'; +import { PaperOwnProps } from '../Paper'; import { CardClasses } from './cardClasses'; // TODO: v6 remove this interface, it is not used @@ -11,7 +11,7 @@ export interface CardPropsColorOverrides {} export interface CardTypeMap

{ props: P & - DistributiveOmit & { + DistributiveOmit & { /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/Card/Card.spec.tsx b/packages/mui-material/src/Card/Card.spec.tsx new file mode 100644 index 00000000000000..dc49f316293481 --- /dev/null +++ b/packages/mui-material/src/Card/Card.spec.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import Card from '@mui/material/Card'; +import { expectType } from '@mui/types'; + +const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = + function CustomComponent() { + return

; + }; + +function CardTest() { + return ( +
+ + + { + expectType, typeof event>(event); + }} + /> + { + expectType, typeof event>(event); + }} + /> + + + {/* @ts-expect-error missing stringProp and numberProp */} + +
+ ); +} diff --git a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx index 8bce33b41c52b3..47562dde371054 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.spec.tsx +++ b/packages/mui-material/src/CardHeader/CardHeader.spec.tsx @@ -12,18 +12,23 @@ interface ComponentProp { component?: React.ElementType; } +; + function createElementBasePropMixedTest() { React.createElement>(CardHeader); React.createElement>(CardHeader, { component: 'div', }); // ExpectError: type system should be demanding the required props of "CustomComponent" - React.createElement>(CardHeader, { + // @ts-expect-error + React.createElement>(CardHeader, { component: CustomComponent, + stringProp: '2', + numberProp: 3, + incorrectProp: 3, }); - // @ts-expect-error - React.createElement>(CardHeader, { - // This test shouldn't fail but does; stringProp & numberProp are required props of CustomComponent + + React.createElement>(CardHeader, { component: CustomComponent, stringProp: '', numberProp: 0, diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts index 45fbf07fd32403..7e37f1e50058aa 100644 --- a/packages/mui-material/src/Dialog/Dialog.d.ts +++ b/packages/mui-material/src/Dialog/Dialog.d.ts @@ -72,7 +72,7 @@ export interface DialogProps extends StandardProps { * Props applied to the [`Paper`](/material-ui/api/paper/) element. * @default {} */ - PaperProps?: Partial; + PaperProps?: Partial>; /** * Determine the container for scrolling the dialog. * @default 'paper' diff --git a/packages/mui-material/src/Dialog/Dialog.spec.tsx b/packages/mui-material/src/Dialog/Dialog.spec.tsx index 50e3c59a898fde..0464e8cf8bcc33 100644 --- a/packages/mui-material/src/Dialog/Dialog.spec.tsx +++ b/packages/mui-material/src/Dialog/Dialog.spec.tsx @@ -1,6 +1,19 @@ import * as React from 'react'; -import { Dialog } from '@mui/material'; +import Dialog from '@mui/material/Dialog'; +import { PaperProps } from '@mui/material/Paper'; +import { expectType } from '@mui/types'; -function optionalChildrenTest() { - ; +const paperProps: PaperProps<'span'> = { + component: 'span', + onClick: (event) => { + expectType, typeof event>(event); + }, +}; +function Test() { + return ( + + ; + ; + + ); } diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts index c25f3390693d1a..296ca1c0545346 100644 --- a/packages/mui-material/src/Drawer/Drawer.d.ts +++ b/packages/mui-material/src/Drawer/Drawer.d.ts @@ -46,7 +46,7 @@ export interface DrawerProps extends StandardProps; + PaperProps?: Partial>; /** * Props applied to the [`Slide`](/material-ui/api/slide/) element. */ diff --git a/packages/mui-material/src/Drawer/Drawer.spec.tsx b/packages/mui-material/src/Drawer/Drawer.spec.tsx new file mode 100644 index 00000000000000..8a9149262d2433 --- /dev/null +++ b/packages/mui-material/src/Drawer/Drawer.spec.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Drawer from '@mui/material/Drawer'; +import { PaperProps } from '@mui/material/Paper'; +import { expectType } from '@mui/types'; + +const paperProps: PaperProps<'span'> = { + component: 'span', + onClick: (event) => { + expectType, typeof event>(event); + }, +}; +function Test() { + return ( + + ; + ; + + ); +} diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 335cff571e03ab..3fc679c9103dea 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -221,7 +221,7 @@ Fab.propTypes /* remove-proptypes */ = { * The component used for the root node. * Either a string to use a HTML element or a component. */ - component: PropTypes.elementType, + component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx b/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx new file mode 100644 index 00000000000000..754688ff6286ea --- /dev/null +++ b/packages/mui-material/src/FormHelperText/FormHelperText.spec.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText'; +import { expectType } from '@mui/types'; + +const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = + function CustomComponent() { + return
; + }; + +const props: FormHelperTextProps<'div'> = { + component: 'div', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: FormHelperTextProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: FormHelperTextProps<'span'> = { + // @ts-expect-error + component: 'div', +}; + +const props4: FormHelperTextProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, +}; + +const props5: FormHelperTextProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, + // @ts-expect-error + inCorrectProp: 3, +}; + +// @ts-expect-error +const props6: FormHelperTextProps = { + component: CustomComponent, +}; + +const TestComponent = () => { + return ( + + + + + + { + // @ts-expect-error + + } + { + expectType, typeof event>(event); + }} + /> + + ); +}; diff --git a/packages/mui-material/src/Grid/Grid.spec.tsx b/packages/mui-material/src/Grid/Grid.spec.tsx index 83e6063587ba69..d6eadcff3391bb 100644 --- a/packages/mui-material/src/Grid/Grid.spec.tsx +++ b/packages/mui-material/src/Grid/Grid.spec.tsx @@ -1,7 +1,68 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; +import Grid, { GridProps } from '@mui/material/Grid'; +import { expectType } from '@mui/types'; + +const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = + function CustomComponent() { + return
; + }; + +const props: GridProps<'span'> = { + component: 'span', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: GridProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: GridProps<'span'> = { + // @ts-expect-error + component: 'div', +}; + +const props4: GridProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, +}; + +const props5: GridProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, + // @ts-expect-error + inCorrectProp: 3, +}; + +// @ts-expect-error +const props6: GridProps = { + component: CustomComponent, +}; function ResponsiveTest() { - ; + return ( + + + + + + { + // @ts-expect-error + + } + { + expectType, typeof event>(event); + }} + /> + + ); } diff --git a/packages/mui-material/src/Link/Link.d.ts b/packages/mui-material/src/Link/Link.d.ts index 83a4cdcbab7918..b4a0f4ed0cb856 100644 --- a/packages/mui-material/src/Link/Link.d.ts +++ b/packages/mui-material/src/Link/Link.d.ts @@ -3,12 +3,12 @@ import { DistributiveOmit } from '@mui/types'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Theme } from '../styles'; -import { TypographyProps } from '../Typography'; +import { TypographyOwnProps } from '../Typography'; import { LinkClasses } from './linkClasses'; export interface LinkTypeMap

{ props: P & - DistributiveOmit & { + LinkBaseProps & { /** * The content of the component. */ @@ -21,7 +21,7 @@ export interface LinkTypeMap

{ * The color of the link. * @default 'primary' */ - color?: TypographyProps['color']; + color?: TypographyOwnProps['color']; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -29,7 +29,7 @@ export interface LinkTypeMap

{ /** * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element. */ - TypographyClasses?: TypographyProps['classes']; + TypographyClasses?: TypographyOwnProps['classes']; /** * Controls when the link should have an underline. * @default 'always' @@ -39,7 +39,7 @@ export interface LinkTypeMap

{ * Applies the theme typography styles. * @default 'inherit' */ - variant?: TypographyProps['variant']; + variant?: TypographyOwnProps['variant']; }; defaultComponent: D; } @@ -58,8 +58,10 @@ export interface LinkTypeMap

{ */ declare const Link: OverridableComponent; -export type LinkBaseProps = Omit, 'color'> & - DistributiveOmit; +export type LinkBaseProps = DistributiveOmit< + TypographyOwnProps, + 'children' | 'color' | 'variant' | 'classes' +>; export type LinkProps< D extends React.ElementType = LinkTypeMap['defaultComponent'], diff --git a/packages/mui-material/src/Link/Link.spec.tsx b/packages/mui-material/src/Link/Link.spec.tsx index ab9b7838c4b218..d31af182876649 100644 --- a/packages/mui-material/src/Link/Link.spec.tsx +++ b/packages/mui-material/src/Link/Link.spec.tsx @@ -1,7 +1,49 @@ import * as React from 'react'; -import Link from '@mui/material/Link'; +import Link, { LinkProps } from '@mui/material/Link'; import { expectType } from '@mui/types'; +const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = + function CustomComponent() { + return

; + }; + +const props1: LinkProps<'div'> = { + component: 'div', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: LinkProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: LinkProps<'span'> = { + // @ts-expect-error + component: 'div', +}; + +const props4: LinkProps = { + component: CustomComponent, + stringProp: '1', + numberProp: 2, +}; + +const props5: LinkProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, + // @ts-expect-error + inCorrectProp: 3, +}; + +// @ts-expect-error +const props6: LinkProps = { + component: CustomComponent, +}; + { expectType(elem); diff --git a/packages/mui-material/src/ListItem/ListItem.js b/packages/mui-material/src/ListItem/ListItem.js index 8b00bb27e7f3ed..5d2efa60258526 100644 --- a/packages/mui-material/src/ListItem/ListItem.js +++ b/packages/mui-material/src/ListItem/ListItem.js @@ -385,7 +385,7 @@ ListItem.propTypes /* remove-proptypes */ = { * The component used for the root node. * Either a string to use a HTML element or a component. */ - component: PropTypes.elementType, + component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** * The components used for each slot inside. * diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.js b/packages/mui-material/src/ListItemButton/ListItemButton.js index 5183e9ac25ec32..3fa47abba18c9d 100644 --- a/packages/mui-material/src/ListItemButton/ListItemButton.js +++ b/packages/mui-material/src/ListItemButton/ListItemButton.js @@ -229,7 +229,7 @@ ListItemButton.propTypes /* remove-proptypes */ = { * The component used for the root node. * Either a string to use a HTML element or a component. */ - component: PropTypes.elementType, + component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** * If `true`, compact vertical padding designed for keyboard and mouse input is used. * The prop defaults to the value inherited from the parent List component. diff --git a/packages/mui-material/src/MenuItem/MenuItem.js b/packages/mui-material/src/MenuItem/MenuItem.js index 5a0e35bc74903f..abf4069ff0a161 100644 --- a/packages/mui-material/src/MenuItem/MenuItem.js +++ b/packages/mui-material/src/MenuItem/MenuItem.js @@ -243,7 +243,7 @@ MenuItem.propTypes /* remove-proptypes */ = { * The component used for the root node. * Either a string to use a HTML element or a component. */ - component: PropTypes.elementType, + component: PropTypes /* @typescript-to-proptypes-ignore */.elementType, /** * If `true`, compact vertical padding designed for keyboard and mouse input is used. * The prop defaults to the value inherited from the parent Menu component. diff --git a/packages/mui-material/src/MenuItem/MenuItem.spec.tsx b/packages/mui-material/src/MenuItem/MenuItem.spec.tsx new file mode 100644 index 00000000000000..de8b0d53896f0a --- /dev/null +++ b/packages/mui-material/src/MenuItem/MenuItem.spec.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import MenuItem, { MenuItemProps } from '@mui/material/MenuItem'; +import { expectType } from '@mui/types'; + +const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = + function CustomComponent() { + return
; + }; + +const props: MenuItemProps<'div'> = { + component: 'div', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: MenuItemProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: MenuItemProps<'span'> = { + // @ts-expect-error + component: 'div', +}; + +const props4: MenuItemProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, +}; + +const props5: MenuItemProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, + // @ts-expect-error + inCorrectProp: 3, +}; + +// @ts-expect-error +const props6: MenuItemProps = { + component: CustomComponent, +}; + +const TestComponent = () => { + return ( + + + + + + { + // @ts-expect-error + + } + { + expectType, typeof event>(event); + }} + /> + { + expectType, typeof event>(event); + }} + /> + + ); +}; diff --git a/packages/mui-material/src/OverridableComponent.d.ts b/packages/mui-material/src/OverridableComponent.d.ts index efcb9f425fe9fc..c5c9965c31543f 100644 --- a/packages/mui-material/src/OverridableComponent.d.ts +++ b/packages/mui-material/src/OverridableComponent.d.ts @@ -34,6 +34,13 @@ export type OverrideProps< > = ( & BaseProps & DistributiveOmit, keyof BaseProps> + & { + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component?: C + } ); /** diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts index 3fdf79c2528e79..7bd140928465ab 100644 --- a/packages/mui-material/src/Paper/Paper.d.ts +++ b/packages/mui-material/src/Paper/Paper.d.ts @@ -7,37 +7,39 @@ import { PaperClasses } from './paperClasses'; export interface PaperPropsVariantOverrides {} +export interface PaperOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Shadow depth, corresponds to `dp` in the spec. + * It accepts values between 0 and 24 inclusive. + * @default 1 + */ + elevation?: number; + /** + * If `true`, rounded corners are disabled. + * @default false + */ + square?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + * @default 'elevation' + */ + variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>; +} + export interface PaperTypeMap

{ - props: P & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Shadow depth, corresponds to `dp` in the spec. - * It accepts values between 0 and 24 inclusive. - * @default 1 - */ - elevation?: number; - /** - * If `true`, rounded corners are disabled. - * @default false - */ - square?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - * @default 'elevation' - */ - variant?: OverridableStringUnion<'elevation' | 'outlined', PaperPropsVariantOverrides>; - }; + props: P & PaperOwnProps; defaultComponent: D; } diff --git a/packages/mui-material/src/Paper/Paper.spec.tsx b/packages/mui-material/src/Paper/Paper.spec.tsx index d1ac34ce0d91aa..05ad6d1ededbab 100644 --- a/packages/mui-material/src/Paper/Paper.spec.tsx +++ b/packages/mui-material/src/Paper/Paper.spec.tsx @@ -1,11 +1,49 @@ import * as React from 'react'; -import Paper from '@mui/material/Paper'; +import Paper, { PaperProps } from '@mui/material/Paper'; +import { expectType } from '@mui/types'; const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = function CustomComponent() { return

; }; +const props: PaperProps<'div'> = { + component: 'div', + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props2: PaperProps = { + onChange: (event) => { + expectType, typeof event>(event); + }, +}; + +const props3: PaperProps<'span'> = { + // @ts-expect-error + component: 'div', +}; + +const props4: PaperProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, +}; + +const props5: PaperProps = { + component: CustomComponent, + stringProp: '2', + numberProp: 2, + // @ts-expect-error + inCorrectProp: 3, +}; + +// @ts-expect-error +const props6: PaperProps = { + component: CustomComponent, +}; + function PaperTest() { return (
diff --git a/packages/mui-material/src/Paper/index.d.ts b/packages/mui-material/src/Paper/index.d.ts index 1b44a26a195c1c..2dea1f17591e25 100644 --- a/packages/mui-material/src/Paper/index.d.ts +++ b/packages/mui-material/src/Paper/index.d.ts @@ -1,5 +1,5 @@ export { default } from './Paper'; -export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper'; +export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap, PaperOwnProps } from './Paper'; export { default as paperClasses } from './paperClasses'; export * from './paperClasses'; diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts index 3c532098b404f5..8735a0dd97b0c8 100644 --- a/packages/mui-material/src/Popover/Popover.d.ts +++ b/packages/mui-material/src/Popover/Popover.d.ts @@ -107,7 +107,7 @@ export interface PopoverProps * * @default {} */ - PaperProps?: Partial; + PaperProps?: Partial>; /** * The components used for each slot inside. * diff --git a/packages/mui-material/src/Popover/Popover.spec.tsx b/packages/mui-material/src/Popover/Popover.spec.tsx new file mode 100644 index 00000000000000..181fc7f686d7ab --- /dev/null +++ b/packages/mui-material/src/Popover/Popover.spec.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { Popover, PaperProps } from '@mui/material'; +import { expectType } from '@mui/types'; + +const paperProps: PaperProps<'span'> = { + component: 'span', + onClick: (event) => { + expectType, typeof event>(event); + }, +}; +function Test() { + return ( + + ; + ; + + ); +} diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts index 2eceb2149c303c..483a1735550200 100644 --- a/packages/mui-material/src/Typography/Typography.d.ts +++ b/packages/mui-material/src/Typography/Typography.d.ts @@ -8,72 +8,73 @@ import { TypographyClasses } from './typographyClasses'; export interface TypographyPropsVariantOverrides {} +export interface TypographyOwnProps extends SystemProps { + /** + * Set the text-align on the component. + * @default 'inherit' + */ + align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the text will have a bottom margin. + * @default false + */ + gutterBottom?: boolean; + /** + * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis. + * + * Note that text overflow can only happen with block or inline-block level elements + * (the element needs to have a width in order to overflow). + * @default false + */ + noWrap?: boolean; + /** + * If `true`, the element will be a paragraph element. + * @default false + */ + paragraph?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * Applies the theme typography styles. + * @default 'body1' + */ + variant?: OverridableStringUnion; + /** + * The component maps the variant prop to a range of different HTML element types. + * For instance, subtitle1 to `
`. + * If you wish to change that mapping, you can provide your own. + * Alternatively, you can use the `component` prop. + * @default { + * h1: 'h1', + * h2: 'h2', + * h3: 'h3', + * h4: 'h4', + * h5: 'h5', + * h6: 'h6', + * subtitle1: 'h6', + * subtitle2: 'h6', + * body1: 'p', + * body2: 'p', + * inherit: 'p', + * } + */ + variantMapping?: Partial< + Record, string> + >; +} + export interface TypographyTypeMap

{ - props: P & - SystemProps & { - /** - * Set the text-align on the component. - * @default 'inherit' - */ - align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the text will have a bottom margin. - * @default false - */ - gutterBottom?: boolean; - /** - * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis. - * - * Note that text overflow can only happen with block or inline-block level elements - * (the element needs to have a width in order to overflow). - * @default false - */ - noWrap?: boolean; - /** - * If `true`, the element will be a paragraph element. - * @default false - */ - paragraph?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * Applies the theme typography styles. - * @default 'body1' - */ - variant?: OverridableStringUnion; - /** - * The component maps the variant prop to a range of different HTML element types. - * For instance, subtitle1 to `

`. - * If you wish to change that mapping, you can provide your own. - * Alternatively, you can use the `component` prop. - * @default { - * h1: 'h1', - * h2: 'h2', - * h3: 'h3', - * h4: 'h4', - * h5: 'h5', - * h6: 'h6', - * subtitle1: 'h6', - * subtitle2: 'h6', - * body1: 'p', - * body2: 'p', - * inherit: 'p', - * } - */ - variantMapping?: Partial< - Record, string> - >; - }; + props: P & TypographyOwnProps; defaultComponent: D; } diff --git a/packages/mui-material/src/styles/props.d.ts b/packages/mui-material/src/styles/props.d.ts index f8f08561c9c7d3..931f7be8792fde 100644 --- a/packages/mui-material/src/styles/props.d.ts +++ b/packages/mui-material/src/styles/props.d.ts @@ -179,7 +179,7 @@ export interface ComponentsPropsList { MuiInputBase: InputBaseProps; MuiInputLabel: InputLabelProps; MuiLinearProgress: LinearProgressProps; - MuiLink: LinkProps; + MuiLink: LinkProps; MuiList: ListProps; MuiListItem: ListItemProps; MuiListItemButton: ListItemButtonProps;