[core] Fix incorrect typings regarding transition components a… (#20306)

mui · Mar 27, 2020 · 74625ab · 74625ab
1 parent 7c66428
commit 74625ab
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 11 deletions.
diff --git a/docs/src/pages/components/dialogs/AlertDialogSlide.tsx b/docs/src/pages/components/dialogs/AlertDialogSlide.tsx
@@ -8,7 +8,10 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import Slide from '@material-ui/core/Slide';
 import { TransitionProps } from '@material-ui/core/transitions';
 
-const Transition = React.forwardRef<unknown, TransitionProps>(function Transition(props, ref) {
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & { children?: React.ReactElement<any, any> },
+  ref: React.Ref<unknown>,
+) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 

diff --git a/docs/src/pages/components/dialogs/FullScreenDialog.tsx b/docs/src/pages/components/dialogs/FullScreenDialog.tsx
@@ -26,7 +26,10 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-const Transition = React.forwardRef<unknown, TransitionProps>(function Transition(props, ref) {
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & { children?: React.ReactElement },
+  ref: React.Ref<unknown>,
+) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 

diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
-import Slide from '@material-ui/core/Slide';
-import { TransitionProps } from '@material-ui/core/transitions';
+import Slide, { SlideProps } from '@material-ui/core/Slide';
+
+type TransitionProps = Omit<SlideProps, 'direction'>;
 
 function TransitionLeft(props: TransitionProps) {
   return <Slide {...props} direction="left" />;

diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
@@ -17,13 +17,15 @@ function GrowTransition(props: TransitionProps) {
 export default function TransitionsSnackbar() {
   const [state, setState] = React.useState<{
     open: boolean;
-    Transition: React.ComponentType<TransitionProps>;
+    Transition: React.ComponentType<TransitionProps & { children?: React.ReactElement<any, any> }>;
   }>({
     open: false,
     Transition: Fade,
   });
 
-  const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
+  const handleClick = (
+    Transition: React.ComponentType<TransitionProps & { children?: React.ReactElement<any, any> }>,
+  ) => () => {
     setState({
       open: true,
       Transition,

diff --git a/packages/material-ui/src/Dialog/Dialog.d.ts b/packages/material-ui/src/Dialog/Dialog.d.ts
@@ -102,7 +102,9 @@ export interface DialogProps
    * The component used for the transition.
    * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    */
-  TransitionComponent?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts
@@ -9,7 +9,9 @@ export interface ExpansionPanelProps
   disabled?: boolean;
   expanded?: boolean;
   onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
-  TransitionComponent?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
   TransitionProps?: TransitionProps;
 }
 

diff --git a/packages/material-ui/src/Popover/Popover.d.ts b/packages/material-ui/src/Popover/Popover.d.ts
@@ -31,7 +31,9 @@ export interface PopoverProps
   PaperProps?: Partial<PaperProps>;
   role?: string;
   transformOrigin?: PopoverOrigin;
-  TransitionComponent?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
   TransitionProps?: TransitionProps;
 }

diff --git a/packages/material-ui/src/Slide/Slide.d.ts b/packages/material-ui/src/Slide/Slide.d.ts
@@ -3,6 +3,7 @@ import { Theme } from '../styles/createMuiTheme';
 import { TransitionProps } from '../transitions/transition';
 
 export interface SlideProps extends TransitionProps {
+  children?: React.ReactElement<any, any>;
   direction: 'left' | 'right' | 'up' | 'down';
   ref?: React.Ref<unknown>;
   theme?: Theme;

diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts
@@ -111,7 +111,9 @@ export interface SnackbarProps
    * The component used for the transition.
    * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    */
-  TransitionComponent?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts
@@ -35,7 +35,9 @@ export interface TooltipProps
     | 'top';
   PopperProps?: Partial<PopperProps>;
   title: React.ReactNode;
-  TransitionComponent?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;
   TransitionProps?: TransitionProps;
 }