diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index de7696ebdd9125..a7d56afcbe205e 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -72,7 +72,7 @@ { "name": "transition", "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.", - "default": "{}", + "default": "Zoom", "class": null } ], diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts index ece435b9108271..a237c737ca3f1a 100644 --- a/packages/mui-material/src/Accordion/Accordion.d.ts +++ b/packages/mui-material/src/Accordion/Accordion.d.ts @@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition'; import { AccordionClasses } from './accordionClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ExtendPaperTypeMap } from '../Paper/Paper'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface AccordionSlots { /** @@ -18,9 +18,7 @@ export interface AccordionSlots { * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Collapse */ - transition: React.JSXElementConstructor< - TransitionProps & { children?: React.ReactElement } - >; + transition: React.ElementType; } export interface AccordionTransitionSlotPropsOverrides {} @@ -29,14 +27,18 @@ export interface AccordionHeadingSlotPropsOverrides {} export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps< AccordionSlots, { - heading: SlotProps< - React.ElementType>, - AccordionHeadingSlotPropsOverrides, - AccordionOwnerState - >; - transition: SlotProps< - React.ElementType, - AccordionTransitionSlotPropsOverrides, + /** + * Props forwarded to the heading slot. + * By default, the avaible props are based on the h3 element. + */ + heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>; + /** + * Props forwarded to the transition slot. + * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component. + */ + transition: SlotComponentProps< + React.ElementType, + TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState >; } diff --git a/packages/mui-material/src/Accordion/Accordion.spec.tsx b/packages/mui-material/src/Accordion/Accordion.spec.tsx index 99c32c56d81119..f50715779d9cf1 100644 --- a/packages/mui-material/src/Accordion/Accordion.spec.tsx +++ b/packages/mui-material/src/Accordion/Accordion.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expectType } from '@mui/types'; -import Accordion from '@mui/material/Accordion'; +import Accordion, { AccordionProps } from '@mui/material/Accordion'; function testOnChange() { function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {} @@ -56,3 +56,29 @@ const AccordionComponentTest = () => {
; + +function Custom(props: AccordionProps) { + const { slotProps, ...dialogProps } = props; + return ( + { + const transitionProps = + typeof slotProps?.transition === 'function' + ? slotProps.transition(ownerState) + : slotProps?.transition; + return { + ...transitionProps, + onExited: (node) => { + transitionProps?.onExited?.(node); + }, + }; + }, + }} + {...dialogProps} + > + test + + ); +} diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts index 3ad7c14e13c2b7..b0d3fa2055bb36 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.d.ts +++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts @@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition'; import { Theme } from '../styles'; import { BackdropClasses } from './backdropClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface BackdropSlots { /** @@ -18,9 +18,7 @@ export interface BackdropSlots { * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Fade */ - transition: React.JSXElementConstructor< - TransitionProps & { children: React.ReactElement } - >; + transition: React.ElementType; } export interface BackdropComponentsPropsOverrides {} @@ -29,14 +27,18 @@ export interface BackdropTransitionSlotPropsOverrides {} export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps< BackdropSlots, { - root: SlotProps< - React.ElementType, - BackdropComponentsPropsOverrides, - BackdropOwnerState - >; - transition: SlotProps< - React.JSXElementConstructor, - BackdropTransitionSlotPropsOverrides, + /** + * Props forwarded to the transition slot. + * By default, the avaible props are based on the div element. + */ + root: SlotProps<'div', BackdropComponentsPropsOverrides, BackdropOwnerState>; + /** + * Props forwarded to the transition slot. + * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component. + */ + transition: SlotComponentProps< + React.ElementType, + TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState >; } diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts index dcbcfc7381ada7..9a22b90c73419b 100644 --- a/packages/mui-material/src/Dialog/Dialog.d.ts +++ b/packages/mui-material/src/Dialog/Dialog.d.ts @@ -6,7 +6,7 @@ import { PaperProps } from '../Paper'; import { ModalProps } from '../Modal'; import { TransitionProps } from '../transitions/transition'; import { DialogClasses } from './dialogClasses'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface DialogSlots { /** @@ -66,9 +66,9 @@ export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps< * Props forwarded to the transition slot. * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component. */ - transition: SlotProps< - React.ElementType, - DialogTransitionSlotPropsOverrides, + transition: SlotComponentProps< + React.ElementType, + TransitionProps & DialogTransitionSlotPropsOverrides, DialogOwnerState >; /** diff --git a/packages/mui-material/src/Dialog/Dialog.spec.tsx b/packages/mui-material/src/Dialog/Dialog.spec.tsx index 07a8be1e227925..28461da46c23d0 100644 --- a/packages/mui-material/src/Dialog/Dialog.spec.tsx +++ b/packages/mui-material/src/Dialog/Dialog.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expectType } from '@mui/types'; -import Dialog from '@mui/material/Dialog'; +import Dialog, { DialogProps } from '@mui/material/Dialog'; import { PaperProps } from '@mui/material/Paper'; const paperProps: PaperProps<'span'> = { @@ -17,3 +17,29 @@ function Test() { ); } + +function Custom(props: DialogProps) { + const { slotProps, ...dialogProps } = props; + return ( + { + const transitionProps = + typeof slotProps?.transition === 'function' + ? slotProps.transition(ownerState) + : slotProps?.transition; + return { + ...transitionProps, + onExited: (node) => { + transitionProps?.onExited?.(node); + }, + }; + }, + }} + {...dialogProps} + > + test + + ); +} diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts index b1dc6ef894ad5e..3ef040845d5332 100644 --- a/packages/mui-material/src/Popover/Popover.d.ts +++ b/packages/mui-material/src/Popover/Popover.d.ts @@ -56,8 +56,8 @@ export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps< */ transition: SlotComponentProps< // use SlotComponentProps because transition slot does not support `component` and `sx` prop - React.ElementType, - PopoverTransitionSlotPropsOverrides, + React.ElementType, + TransitionProps & PopoverTransitionSlotPropsOverrides, PopoverOwnerState >; /** diff --git a/packages/mui-material/src/Popover/Popover.spec.tsx b/packages/mui-material/src/Popover/Popover.spec.tsx index 823d9bb661f5df..25b7395f355e66 100644 --- a/packages/mui-material/src/Popover/Popover.spec.tsx +++ b/packages/mui-material/src/Popover/Popover.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expectType } from '@mui/types'; -import { Popover, PaperProps } from '@mui/material'; +import { Popover, PaperProps, PopoverProps } from '@mui/material'; const paperProps: PaperProps<'span'> = { component: 'span', @@ -25,3 +25,29 @@ function Test() { }, }} />; + +function Custom(props: PopoverProps) { + const { slotProps, ...dialogProps } = props; + return ( + { + const transitionProps = + typeof slotProps?.transition === 'function' + ? slotProps.transition(ownerState) + : slotProps?.transition; + return { + ...transitionProps, + onExited: (node) => { + transitionProps?.onExited?.(node); + }, + }; + }, + }} + {...dialogProps} + > + test + + ); +} diff --git a/packages/mui-material/src/Snackbar/Snackbar.d.ts b/packages/mui-material/src/Snackbar/Snackbar.d.ts index ddf6a7dd9e7935..4da7ac03a589a7 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.d.ts +++ b/packages/mui-material/src/Snackbar/Snackbar.d.ts @@ -66,11 +66,11 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps< >; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component. */ transition: SlotComponentProps< - React.ElementType, - SnackbarTransitionSlotPropsOverrides, + React.ElementType, + TransitionProps & SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState >; } diff --git a/packages/mui-material/src/Snackbar/Snackbar.spec.tsx b/packages/mui-material/src/Snackbar/Snackbar.spec.tsx index 77b6c4006b23c4..e561f276f63b16 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.spec.tsx +++ b/packages/mui-material/src/Snackbar/Snackbar.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Snackbar from '@mui/material/Snackbar'; +import Snackbar, { SnackbarProps } from '@mui/material/Snackbar'; import { expectType } from '@mui/types'; ; + +function Custom(props: SnackbarProps) { + const { slotProps, ...dialogProps } = props; + return ( + { + const transitionProps = + typeof slotProps?.transition === 'function' + ? slotProps.transition(ownerState) + : slotProps?.transition; + return { + ...transitionProps, + onExited: (node) => { + transitionProps?.onExited?.(node); + }, + }; + }, + }} + {...dialogProps} + /> + ); +} diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index e3f334a2e58c67..c8e7ed3e749dd6 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -5,7 +5,7 @@ import { InternalStandardProps as StandardProps } from '..'; import { FabProps } from '../Fab'; import { TransitionProps } from '../transitions'; import { SpeedDialClasses } from './speedDialClasses'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types'; export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown'; export type OpenReason = 'toggle' | 'focus' | 'mouseEnter'; @@ -14,17 +14,19 @@ export interface SpeedDialSlots { /** * The component that renders the transition. * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. - * @default {} + * @default Zoom */ - transition: React.JSXElementConstructor< - TransitionProps & { children: React.ReactElement } - >; + transition: React.ElementType; } export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps< SpeedDialSlots, { - transition: SlotProps, {}, SpeedDialOwnerState>; + /** + * Props forwarded to the transition slot. + * By default, the avaible props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component. + */ + transition: SlotComponentProps; } >; diff --git a/packages/mui-material/src/StepContent/StepContent.d.ts b/packages/mui-material/src/StepContent/StepContent.d.ts index d317469118a769..ddee12098b813d 100644 --- a/packages/mui-material/src/StepContent/StepContent.d.ts +++ b/packages/mui-material/src/StepContent/StepContent.d.ts @@ -4,7 +4,7 @@ import { CollapseProps, InternalStandardProps as StandardProps } from '..'; import { Theme } from '../styles'; import { TransitionProps } from '../transitions/transition'; import { StepContentClasses } from './stepContentClasses'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types'; export interface StepContentSlots { /** @@ -24,7 +24,7 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps< * Props forwared to the transition slot. * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component */ - transition: SlotProps, {}, StepContentOwnerState>; + transition: SlotComponentProps; } >; diff --git a/packages/mui-material/src/StepContent/StepContent.spec.tsx b/packages/mui-material/src/StepContent/StepContent.spec.tsx index 40838d21c3a17f..f0df3e6bed4270 100644 --- a/packages/mui-material/src/StepContent/StepContent.spec.tsx +++ b/packages/mui-material/src/StepContent/StepContent.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import StepContent from '@mui/material/StepContent'; +import StepContent, { StepContentProps } from '@mui/material/StepContent'; import Fade from '@mui/material/Fade'; import Collapse from '@mui/material/Collapse'; import Grow from '@mui/material/Grow'; @@ -11,3 +11,29 @@ import Zoom from '@mui/material/Zoom'; Step Content; Step Content; Step Content; + +function Custom(props: StepContentProps) { + const { slotProps, ...dialogProps } = props; + return ( + { + const transitionProps = + typeof slotProps?.transition === 'function' + ? slotProps.transition(ownerState) + : slotProps?.transition; + return { + ...transitionProps, + onExited: (node) => { + transitionProps?.onExited?.(node); + }, + }; + }, + }} + {...dialogProps} + > + test + + ); +} diff --git a/packages/mui-material/src/Tooltip/Tooltip.d.ts b/packages/mui-material/src/Tooltip/Tooltip.d.ts index 3c3637169111ec..68cca0ec49ff7b 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.d.ts +++ b/packages/mui-material/src/Tooltip/Tooltip.d.ts @@ -41,26 +41,34 @@ export interface TooltipSlots { export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps< TooltipSlots, { + /** + * Props forwarded to the popper slot. + * By default, the avaible props are based on the [Popper](https://mui.com/material-ui/api/popper/#props) component. + */ popper: SlotProps< React.ElementType, TooltipPopperSlotPropsOverrides, TooltipOwnerState >; + /** + * Props forwarded to the transition slot. + * By default, the avaible props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component. + */ transition: SlotProps< - React.ElementType, - TooltipTransitionSlotPropsOverrides, - TooltipOwnerState - >; - tooltip: SlotProps< - React.ElementType>, - TooltipTooltipSlotPropsOverrides, - TooltipOwnerState - >; - arrow: SlotProps< - React.ElementType>, - TooltipArrowSlotPropsOverrides, + React.ElementType, + TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState >; + /** + * Props forwarded to the tooltip slot. + * By default, the avaible props are based on the div element. + */ + tooltip: SlotProps<'div', TooltipTooltipSlotPropsOverrides, TooltipOwnerState>; + /** + * Props forwarded to the tooltip slot. + * By default, the avaible props are based on the span element. + */ + arrow: SlotProps<'span', TooltipArrowSlotPropsOverrides, TooltipOwnerState>; } >; diff --git a/packages/mui-material/src/Tooltip/Tooltip.spec.tsx b/packages/mui-material/src/Tooltip/Tooltip.spec.tsx index 29d61ae2ddb575..2ac800a5e40640 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.spec.tsx +++ b/packages/mui-material/src/Tooltip/Tooltip.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Tooltip from '@mui/material/Tooltip'; +import Tooltip, { TooltipProps } from '@mui/material/Tooltip'; @@ -51,3 +51,27 @@ const SlotComponentRef = React.forwardRef((props, ref) => { > ; + +function Custom(props: TooltipProps) { + const { slotProps, ...dialogProps } = props; + return ( + { + const transitionProps = + typeof slotProps?.transition === 'function' + ? slotProps.transition(ownerState) + : slotProps?.transition; + return { + ...transitionProps, + onExited: (node) => { + transitionProps?.onExited?.(node); + }, + }; + }, + }} + {...dialogProps} + /> + ); +}