diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index ebbb50c5a8a0e9..28914cb4bd286f 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -17,10 +17,14 @@ import { import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { check, starEmpty, starFilled } from '@wordpress/icons'; -import { useEffect, useRef } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { store as viewportStore } from '@wordpress/viewport'; import { store as preferencesStore } from '@wordpress/preferences'; -import { useReducedMotion, useViewportMatch } from '@wordpress/compose'; +import { + useReducedMotion, + useViewportMatch, + usePrevious, +} from '@wordpress/compose'; /** * Internal dependencies @@ -45,25 +49,49 @@ const variants = { mobileOpen: { width: '100vw' }, }; -function ComplementaryAreaFill( { isActive, scope, children, className, id } ) { +function ComplementaryAreaFill( { + activeArea, + isActive, + scope, + children, + className, + id, +} ) { const disableMotion = useReducedMotion(); const isMobileViewport = useViewportMatch( 'medium', '<' ); - const defaultTransition = { + // This is used to delay the exit animation to the next tick. + // The reason this is done is to allow us to apply the right transition properties + // When we switch from an open sidebar to another open sidebar. + // we don't want to animate in this case. + const previousActiveArea = usePrevious( activeArea ); + const previousIsActive = usePrevious( isActive ); + const [ , setState ] = useState( {} ); + useEffect( () => { + setState( {} ); + }, [ isActive ] ); + const transition = { type: 'tween', - duration: disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION, + duration: + disableMotion || + isMobileViewport || + ( !! previousActiveArea && + !! activeArea && + activeArea !== previousActiveArea ) + ? 0 + : ANIMATION_DURATION, ease: [ 0.6, 0, 0.4, 1 ], }; return ( - { isActive && ( + { ( previousIsActive || isActive ) && (
) }