Interface: Let CSS own the ComplementaryArea width and use AnimatePresence custom for exit

packages/interface/CHANGELOG.md

@@ -13,6 +13,7 @@
 
 ### Internal
 
+-   `ComplementaryArea`: Take the panel width from the stylesheet instead of a hardcoded inline style, and resolve the exit transition through `AnimatePresence`'s `custom` prop instead of a forced re-render ([#81363](https://github.com/WordPress/gutenberg/pull/81363)).
 -   Remove obsolete dependency grouping comments as part of the repository-wide separator-free import migration. ([#81248](https://github.com/WordPress/gutenberg/pull/81248))
 
 ## 9.37.0 (2026-07-29)

packages/interface/src/components/complementary-area/index.js

@@ -37,11 +37,14 @@ function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
 }
 
-const SIDEBAR_WIDTH = 280;
 const variants = {
-	open: { width: SIDEBAR_WIDTH },
-	closed: { width: 0 },
-	mobileOpen: { width: '100vw' },
+	// `auto` leaves the width to the area's own stylesheet, so it stays in one
+	// place. framer-motion measures the element to animate, then restores
+	// `auto`.
+	open: { width: 'auto' },
+	// Resolved with the `custom` value passed to `AnimatePresence`, which is
+	// the only way an already removed element can be given a fresh transition.
+	closed: ( transition ) => ( { width: 0, transition } ),
 };
 
 /**
@@ -77,49 +80,36 @@ function ComplementaryAreaFill( {
 } ) {
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	// 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.
+	// Swapping one open area straight for another should not animate.
 	const previousActiveArea = usePrevious( activeArea );
-	const previousIsActive = usePrevious( isActive );
-	const [ , setState ] = useState( {} );
-	useEffect( () => {
-		setState( {} );
-	}, [ isActive ] );
+	const isSwitchingAreas =
+		!! previousActiveArea &&
+		!! activeArea &&
+		activeArea !== previousActiveArea;
 	const transition = {
 		type: 'tween',
 		duration:
-			disableMotion ||
-			isMobileViewport ||
-			( !! previousActiveArea &&
-				!! activeArea &&
-				activeArea !== previousActiveArea )
+			disableMotion || isMobileViewport || isSwitchingAreas
 				? 0
 				: ANIMATION_DURATION,
 		ease: [ 0.6, 0, 0.4, 1 ],
 	};
 
 	return (
 		<Fill name={ `ComplementaryArea/${ scope }` }>
-			<AnimatePresence initial={ false }>
-				{ ( previousIsActive || isActive ) && (
+			<AnimatePresence initial={ false } custom={ transition }>
+				{ isActive && (
 					<motion.div
 						variants={ variants }
 						initial="closed"
-						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
+						animate="open"
 						exit="closed"
 						transition={ transition }
 						className="interface-complementary-area__fill"
 					>
 						{ renderContainer( render, {
 							id,
 							className,
-							style: {
-								width: isMobileViewport
-									? '100vw'
-									: SIDEBAR_WIDTH,
-							},
 							children,
 						} ) }
 					</motion.div>

packages/interface/src/components/complementary-area/style.scss

@@ -7,6 +7,7 @@
 	color: $gray-900;
 	height: 100%;
 	overflow: auto;
+	width: 100vw;
 
 	@include break-medium() {
 		width: $sidebar-width;