import * as React from "react" ; import { Transition } from "react-transition-group" ; import { debounce , ownerWindow , useForkRef , useTheme } from "@mui/material" ; function getTranslateValue ( node ) { const rect = node . getBoundingClientRect ( ) ; const containerWindow = ownerWindow ( node ) ; let transform ; if ( node . fakeTransform ) { transform = node . fakeTransform ; } else { const computedStyle = containerWindow . getComputedStyle ( node ) ; transform = computedStyle . getPropertyValue ( "-webkit-transform" ) || computedStyle . getPropertyValue ( "transform" ) ; } let offsetX = 0 ; if ( transform && transform !== "none" && typeof transform === "string" ) { const transformValues = transform . split ( "(" ) [ 1 ] . split ( ")" ) [ 0 ] . split ( "," ) ; offsetX = parseInt ( transformValues [ 4 ] , 10 ) ; } return `translateX(${ containerWindow . innerWidth }px) translateX(${ offsetX - rect . left }px)` ; } export function setTranslateValue ( node ) { const transform = getTranslateValue ( node ) ; if ( transform ) { node . style . webkitTransform = transform ; node . style . transform = transform ; } } /**
 * The Slide transition is used by the [Drawer](/components/drawers/) component.
 * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
 */ export const SlideFade = React . forwardRef ( function SlideFade ( props , ref ) { const { children , in : inProp , timeout , onExitAnimation , ... other } = props ; const theme = useTheme ( ) ; const childrenRef = React . useRef < any > ( null ) ; const handleRefIntermediary = useForkRef ( children . ref , childrenRef ) ; const handleRef = useForkRef ( handleRefIntermediary , ref ) ; const normalizedTransitionCallback = ( callback ) => ( isAppearing ) => { if ( callback ) { if ( isAppearing === undefined ) { callback ( childrenRef . current ) ; } else { callback ( childrenRef . current , isAppearing ) ; } } } ; const handleEnter = normalizedTransitionCallback ( ( node ) => { setTranslateValue ( node ) ; reflow ( node ) ; } ) ; const handleEntering = normalizedTransitionCallback ( ( node ) => { const transitionProps = getTransitionProps ( { timeout } , { mode : "enter" } ) ; node . style . webkitTransition = theme . transitions . create ( "-webkit-transform" , { ... transitionProps , easing : theme . transitions . easing . easeOut } ) ; node . style . transition = theme . transitions . create ( "transform" , { ... transitionProps , easing : theme . transitions . easing . easeOut } ) ; node . style . webkitTransform = "none" ; node . style . transform = "none" ; node . style . opacity = 1 ; } ) ; const handleExit = normalizedTransitionCallback ( ( node ) => { const transitionProps = getTransitionProps ( { timeout } , { mode : "exit" } ) ; node . style . opacity = 0.5 ; node . style . webkitTransition = theme . transitions . create ( [ "-webkit-transform" , "opacity" ] , { ... transitionProps , easing : theme . transitions . easing . sharp } ) ; node . style . transition = theme . transitions . create ( [ "transform" , "opacity" ] , { ... transitionProps , easing : theme . transitions . easing . sharp } ) ; setTranslateValue ( node ) ; } ) ; const handleExited = normalizedTransitionCallback ( ( node ) => { node . style . webkitTransition = "" ; node . style . transition = "" ; } ) ; const updatePosition = React . useCallback ( ( ) => { if ( childrenRef . current ) { setTranslateValue ( childrenRef . current ) ; } } , [ ] ) ; React . useEffect ( ( ) => { if ( inProp ) { return undefined ; } const handleResize = debounce ( ( ) => { if ( childrenRef . current ) { setTranslateValue ( childrenRef . current ) ; } } ) ; const containerWindow = ownerWindow ( childrenRef . current ) ; containerWindow . addEventListener ( "resize" , handleResize ) ; return ( ) => { handleResize . clear ( ) ; containerWindow . removeEventListener ( "resize" , handleResize ) ; } ; } , [ inProp ] ) ; React . useEffect ( ( ) => { if ( ! inProp ) { updatePosition ( ) ; } } , [ inProp , updatePosition ] ) ; return ( < Transition nodeRef = { childrenRef } onEnter = { handleEnter } onEntering = { handleEntering } onExit = { handleExit } onExited = { handleExited } appear = { true } in = { inProp } timeout = { timeout } { ... other } > { ( state , childProps ) => { return React . cloneElement ( children , { ref : handleRef , style : { visibility : state === "exited" && ! inProp ? "hidden" : undefined , ... children . props . style } , ... childProps } ) ; } } < /Transition>); } ) ; interface SlideProps { /**
     * A single child content element.
     */ children : any ; /**
     * If `true`, the component will transition in.
     */ in : boolean ; default timeout : { enter : number ; exit : number ; } ; onExitAnimation ? : ( ) => void ; } const reflow = ( node ) => node . scrollTop ; function getTransitionProps ( props , options ) { const { timeout } = props ; return { duration : typeof timeout === "number" ? timeout : timeout [ options . mode ] || 0 } ; }