[material-ui] Improve slot.transition and TransitionProps types

[DiegoAndai]

The TransitionProps is based on the type with the same name coming from react-transition-group/Transition. The children prop is optional. There are a bunch of places where we do this to make children required:

TransitionProps & { children: React.ReactElement<any, any> }

We should standardize how we treat children in TransitionProps across the codebase. Potential solutions that can be explored:

• Make children required in TransitionProps (material-ui).
• Update transition components and make children optional in all of them.

Other things to consider:

• Some slots.transition props (Accordion, Backdrop, SpeedDial) have the following type:

  transition?: React.JSXElementConstructor<
    TransitionProps & { children?: React.ReactElement<any, any> }
  >;
  

  The correct type should probably be:

  transition?: React.ElementType<TransitionProps>;
  

• Improving the types should fix this issue in an Accordion demo: [material-ui][docs] Revise the Accordion page #40284 (comment)

Search keywords: slots transition typescript

[hayzey]

Props specific to a certain transition type are also not recognised by default. For example...

Has error ❌

direction isn't recognised as a prop, because it's specific to Slide.

import Slide from '@mui/material/Slide';

function SnackbarComponent() {
  return (
    <Snackbar
      open={true}
      message={'Hello world!'}
      TransitionComponent={Slide}
      TransitionProps={{
        direction: 'right',
      }}
    />
  );
}

This works ✅

import Slide, { type SlideProps } from '@mui/material/Slide';

function SnackbarComponent() {
  return (
    <Snackbar
      open={true}
      message={'Hello world!'}
      TransitionComponent={Slide}
      TransitionProps={
        {
          direction: 'right',
        } as SlideProps
      }
    />
  );
}