Skip to content

Commit 533aee3

Browse files
siriwatknpsiriwatknp
committed
[material-ui] Fix slotProps.transition types (#45214)
1 parent d06c212 commit 533aee3

File tree

15 files changed

+344
-60
lines changed

15 files changed

+344
-60
lines changed

‎docs/pages/material-ui/api/speed-dial.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
{
7373
"name": "transition",
7474
"description": "The component that renders the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
75-
"default": "{}",
75+
"default": "Zoom",
7676
"class": null
7777
}
7878
],

‎packages/mui-material/src/Accordion/Accordion.d.ts

+14-12
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
55
import { AccordionClasses } from './accordionClasses';
66
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
77
import { ExtendPaperTypeMap } from '../Paper/Paper';
8-
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
8+
import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
99

1010
export interface AccordionSlots {
1111
/**
@@ -18,9 +18,7 @@ export interface AccordionSlots {
1818
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
1919
* @default Collapse
2020
*/
21-
transition: React.JSXElementConstructor<
22-
TransitionProps & { children?: React.ReactElement<unknown, any> }
23-
>;
21+
transition: React.ElementType;
2422
}
2523

2624
export interface AccordionTransitionSlotPropsOverrides {}
@@ -29,14 +27,18 @@ export interface AccordionHeadingSlotPropsOverrides {}
2927
export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
3028
AccordionSlots,
3129
{
32-
heading: SlotProps<
33-
React.ElementType<React.HTMLProps<HTMLHeadingElement>>,
34-
AccordionHeadingSlotPropsOverrides,
35-
AccordionOwnerState
36-
>;
37-
transition: SlotProps<
38-
React.ElementType<TransitionProps>,
39-
AccordionTransitionSlotPropsOverrides,
30+
/**
31+
* Props forwarded to the heading slot.
32+
* By default, the avaible props are based on the h3 element.
33+
*/
34+
heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>;
35+
/**
36+
* Props forwarded to the transition slot.
37+
* By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
38+
*/
39+
transition: SlotComponentProps<
40+
React.ElementType,
41+
TransitionProps & AccordionTransitionSlotPropsOverrides,
4042
AccordionOwnerState
4143
>;
4244
}

‎packages/mui-material/src/Accordion/Accordion.spec.tsx

+47-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { expectType } from '@mui/types';
3-
import Accordion from '@mui/material/Accordion';
3+
import { mergeSlotProps } from '@mui/material/utils';
4+
import Accordion, { AccordionProps } from '@mui/material/Accordion';
45

56
function testOnChange() {
67
function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {}
@@ -56,3 +57,48 @@ const AccordionComponentTest = () => {
5657
<Accordion slotProps={{ heading: { component: 'h4' } }}>
5758
<div />
5859
</Accordion>;
60+
61+
function Custom(props: AccordionProps) {
62+
const { slotProps, ...other } = props;
63+
return (
64+
<Accordion
65+
slotProps={{
66+
...slotProps,
67+
transition: (ownerState) => {
68+
const transitionProps =
69+
typeof slotProps?.transition === 'function'
70+
? slotProps.transition(ownerState)
71+
: slotProps?.transition;
72+
return {
73+
...transitionProps,
74+
onExited: (node) => {
75+
transitionProps?.onExited?.(node);
76+
},
77+
};
78+
},
79+
}}
80+
{...other}
81+
>
82+
test
83+
</Accordion>
84+
);
85+
}
86+
87+
function Custom2(props: AccordionProps) {
88+
const { slotProps, ...other } = props;
89+
return (
90+
<Accordion
91+
slotProps={{
92+
...slotProps,
93+
transition: mergeSlotProps(slotProps?.transition, {
94+
onExited: (node) => {
95+
expectType<HTMLElement, typeof node>(node);
96+
},
97+
}),
98+
}}
99+
{...other}
100+
>
101+
test
102+
</Accordion>
103+
);
104+
}

‎packages/mui-material/src/Backdrop/Backdrop.d.ts

+14-12
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
55
import { Theme } from '../styles';
66
import { BackdropClasses } from './backdropClasses';
77
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
8-
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
8+
import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
99

1010
export interface BackdropSlots {
1111
/**
@@ -18,9 +18,7 @@ export interface BackdropSlots {
1818
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
1919
* @default Fade
2020
*/
21-
transition: React.JSXElementConstructor<
22-
TransitionProps & { children: React.ReactElement<unknown, any> }
23-
>;
21+
transition: React.ElementType;
2422
}
2523
export interface BackdropComponentsPropsOverrides {}
2624

@@ -29,14 +27,18 @@ export interface BackdropTransitionSlotPropsOverrides {}
2927
export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
3028
BackdropSlots,
3129
{
32-
root: SlotProps<
33-
React.ElementType<HTMLDivElement>,
34-
BackdropComponentsPropsOverrides,
35-
BackdropOwnerState
36-
>;
37-
transition: SlotProps<
38-
React.JSXElementConstructor<TransitionProps>,
39-
BackdropTransitionSlotPropsOverrides,
30+
/**
31+
* Props forwarded to the transition slot.
32+
* By default, the avaible props are based on the div element.
33+
*/
34+
root: SlotProps<'div', BackdropComponentsPropsOverrides, BackdropOwnerState>;
35+
/**
36+
* Props forwarded to the transition slot.
37+
* By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
38+
*/
39+
transition: SlotComponentProps<
40+
React.ElementType,
41+
TransitionProps & BackdropTransitionSlotPropsOverrides,
4042
BackdropOwnerState
4143
>;
4244
}

‎packages/mui-material/src/Dialog/Dialog.d.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { PaperProps } from '../Paper';
66
import { ModalProps } from '../Modal';
77
import { TransitionProps } from '../transitions/transition';
88
import { DialogClasses } from './dialogClasses';
9-
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
9+
import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
1010

1111
export interface DialogSlots {
1212
/**
@@ -66,9 +66,9 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
6666
* Props forwarded to the transition slot.
6767
* By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
6868
*/
69-
transition: SlotProps<
70-
React.ElementType<TransitionProps>,
71-
DialogTransitionSlotPropsOverrides,
69+
transition: SlotComponentProps<
70+
React.ElementType,
71+
TransitionProps & DialogTransitionSlotPropsOverrides,
7272
DialogOwnerState
7373
>;
7474
/**

‎packages/mui-material/src/Dialog/Dialog.spec.tsx

+47-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { expectType } from '@mui/types';
3-
import Dialog from '@mui/material/Dialog';
3+
import { mergeSlotProps } from '@mui/material/utils';
4+
import Dialog, { DialogProps } from '@mui/material/Dialog';
45
import { PaperProps } from '@mui/material/Paper';
56

67
const paperProps: PaperProps<'span'> = {
@@ -17,3 +18,48 @@ function Test() {
1718
</React.Fragment>
1819
);
1920
}
21+
22+
function Custom(props: DialogProps) {
23+
const { slotProps, ...other } = props;
24+
return (
25+
<Dialog
26+
slotProps={{
27+
...slotProps,
28+
transition: (ownerState) => {
29+
const transitionProps =
30+
typeof slotProps?.transition === 'function'
31+
? slotProps.transition(ownerState)
32+
: slotProps?.transition;
33+
return {
34+
...transitionProps,
35+
onExited: (node) => {
36+
transitionProps?.onExited?.(node);
37+
},
38+
};
39+
},
40+
}}
41+
{...other}
42+
>
43+
test
44+
</Dialog>
45+
);
46+
}
47+
48+
function Custom2(props: DialogProps) {
49+
const { slotProps, ...other } = props;
50+
return (
51+
<Dialog
52+
slotProps={{
53+
...slotProps,
54+
transition: mergeSlotProps(slotProps?.transition, {
55+
onExited: (node) => {
56+
expectType<HTMLElement, typeof node>(node);
57+
},
58+
}),
59+
}}
60+
{...other}
61+
>
62+
test
63+
</Dialog>
64+
);
65+
}

‎packages/mui-material/src/Popover/Popover.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<
5656
*/
5757
transition: SlotComponentProps<
5858
// use SlotComponentProps because transition slot does not support `component` and `sx` prop
59-
React.ElementType<TransitionProps>,
60-
PopoverTransitionSlotPropsOverrides,
59+
React.ElementType,
60+
TransitionProps & PopoverTransitionSlotPropsOverrides,
6161
PopoverOwnerState
6262
>;
6363
/**

‎packages/mui-material/src/Popover/Popover.spec.tsx

+47-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { expectType } from '@mui/types';
3-
import { Popover, PaperProps } from '@mui/material';
3+
import { mergeSlotProps } from '@mui/material/utils';
4+
import { Popover, PaperProps, PopoverProps } from '@mui/material';
45

56
const paperProps: PaperProps<'span'> = {
67
component: 'span',
@@ -25,3 +26,48 @@ function Test() {
2526
},
2627
}}
2728
/>;
29+
30+
function Custom(props: PopoverProps) {
31+
const { slotProps, ...other } = props;
32+
return (
33+
<Popover
34+
slotProps={{
35+
...slotProps,
36+
transition: (ownerState) => {
37+
const transitionProps =
38+
typeof slotProps?.transition === 'function'
39+
? slotProps.transition(ownerState)
40+
: slotProps?.transition;
41+
return {
42+
...transitionProps,
43+
onExited: (node) => {
44+
transitionProps?.onExited?.(node);
45+
},
46+
};
47+
},
48+
}}
49+
{...other}
50+
>
51+
test
52+
</Popover>
53+
);
54+
}
55+
56+
function Custom2(props: PopoverProps) {
57+
const { slotProps, ...other } = props;
58+
return (
59+
<Popover
60+
slotProps={{
61+
...slotProps,
62+
transition: mergeSlotProps(slotProps?.transition, {
63+
onExited: (node) => {
64+
expectType<HTMLElement, typeof node>(node);
65+
},
66+
}),
67+
}}
68+
{...other}
69+
>
70+
test
71+
</Popover>
72+
);
73+
}

‎packages/mui-material/src/Snackbar/Snackbar.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,11 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<
6666
>;
6767
/**
6868
* Props applied to the transition element.
69-
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
69+
* By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
7070
*/
7171
transition: SlotComponentProps<
72-
React.ElementType<TransitionProps>,
73-
SnackbarTransitionSlotPropsOverrides,
72+
React.ElementType,
73+
TransitionProps & SnackbarTransitionSlotPropsOverrides,
7474
SnackbarOwnerState
7575
>;
7676
}

‎packages/mui-material/src/Snackbar/Snackbar.spec.tsx

+43-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import Snackbar from '@mui/material/Snackbar';
2+
import { mergeSlotProps } from '@mui/material/utils';
3+
import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
34
import { expectType } from '@mui/types';
45

56
<Snackbar
@@ -36,3 +37,44 @@ import { expectType } from '@mui/types';
3637
},
3738
}}
3839
/>;
40+
41+
function Custom(props: SnackbarProps) {
42+
const { slotProps, ...other } = props;
43+
return (
44+
<Snackbar
45+
slotProps={{
46+
...slotProps,
47+
transition: (ownerState) => {
48+
const transitionProps =
49+
typeof slotProps?.transition === 'function'
50+
? slotProps.transition(ownerState)
51+
: slotProps?.transition;
52+
return {
53+
...transitionProps,
54+
onExited: (node) => {
55+
transitionProps?.onExited?.(node);
56+
},
57+
};
58+
},
59+
}}
60+
{...other}
61+
/>
62+
);
63+
}
64+
65+
function Custom2(props: SnackbarProps) {
66+
const { slotProps, ...other } = props;
67+
return (
68+
<Snackbar
69+
slotProps={{
70+
...slotProps,
71+
transition: mergeSlotProps(slotProps?.transition, {
72+
onExited: (node) => {
73+
expectType<HTMLElement, typeof node>(node);
74+
},
75+
}),
76+
}}
77+
{...other}
78+
/>
79+
);
80+
}

0 commit comments

Comments
 (0)