[Flyout System] Integrate unmanaged EuiFlyout animations with state transition animations of managed flyouts

packages/eui/src/components/flyout/manager/activity_stage.ts

@@ -96,24 +96,44 @@ export const useFlyoutActivityStage = ({
   }, [isActive, hasChild, layoutMode, level, ctx, flyoutId, stage]);
 
   /**
-   * OPENING / RETURNING -> ACTIVE
-   * CLOSING -> INACTIVE
-   * BACKGROUNDING -> BACKGROUNDED
+   * Get the stage to transition to for given current stage.
+   * Returns `null` if stage should remain unchanged.
+   *
+   * Stage transitions:
+   *  - OPENING / RETURNING -> ACTIVE
+   *  - CLOSING -> INACTIVE
+   *  - BACKGROUNDING -> BACKGROUNDED
+   */
+  const getNextStage = (
+    stage: EuiFlyoutActivityStage
+  ): EuiFlyoutActivityStage | null => {
+    switch (stage) {
+      case STAGE_OPENING:
+      case STAGE_RETURNING:
+        return STAGE_ACTIVE;
+
+      case STAGE_CLOSING:
+        return STAGE_INACTIVE;
+
+      case STAGE_BACKGROUNDING:
+        return STAGE_BACKGROUNDED;
+    }
+
+    return null;
+  };
+
+  /**
+   * onAnimationEnd event handler that must be passed to EuiFlyout.
+   * It handles transitions between stages and updates activity stage
+   * in EuiFlyoutManagerContext.
    */
   const onAnimationEnd = useCallback(() => {
-    const s = stageRef.current;
-    const next: EuiFlyoutActivityStage | null =
-      s === STAGE_OPENING || s === STAGE_RETURNING
-        ? STAGE_ACTIVE
-        : s === STAGE_CLOSING
-        ? STAGE_INACTIVE
-        : s === STAGE_BACKGROUNDING
-        ? STAGE_BACKGROUNDED
-        : null;
+    const currentStage = stageRef.current;
+    const nextStage = getNextStage(currentStage);
 
-    if (next && next !== s) {
-      ctx?.dispatch?.(setActivityStage(flyoutId, next));
-      stageRef.current = next;
+    if (nextStage && nextStage !== currentStage) {
+      ctx?.dispatch?.(setActivityStage(flyoutId, nextStage));
+      stageRef.current = nextStage;
     }
   }, [ctx, flyoutId]);
 

packages/eui/src/components/flyout/manager/flyout_child.stories.tsx

@@ -225,86 +225,84 @@ const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
         <EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
       )}
 
-      {isMainOpen && (
-        <EuiFlyout
-          session={true}
-          id="flyout-manager-playground-main"
-          size={mainSize}
-          type={mainFlyoutType}
-          pushMinBreakpoint={pushMinBreakpoint}
-          maxWidth={mainMaxWidth}
-          ownFocus={false}
-          resizable={mainFlyoutResizable}
-          {...args}
-          aria-label={`Main Flyout Menu (${mainSize})`}
-          onClose={closeMain}
-        >
-          <EuiFlyoutBody>
-            <EuiText>
-              <p>This is the main flyout content.</p>
-              <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
-                neque sequi illo, cum rerum quia ab animi velit sit incidunt
-                inventore temporibus eaque nam veritatis amet maxime maiores
-                optio quam?
-              </p>
-            </EuiText>
-            <EuiSpacer />
+      <EuiFlyout
+        isOpen={isMainOpen}
+        session={true}
+        id="flyout-manager-playground-main"
+        size={mainSize}
+        type={mainFlyoutType}
+        pushMinBreakpoint={pushMinBreakpoint}
+        maxWidth={mainMaxWidth}
+        ownFocus={false}
+        resizable={mainFlyoutResizable}
+        {...args}
+        aria-label={`Main Flyout Menu (${mainSize})`}
+        onClose={closeMain}
+      >
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>This is the main flyout content.</p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+              neque sequi illo, cum rerum quia ab animi velit sit incidunt
+              inventore temporibus eaque nam veritatis amet maxime maiores optio
+              quam?
+            </p>
+          </EuiText>
+          <EuiSpacer />
 
-            {!isChildOpen ? (
-              <EuiButton onClick={openChild}>Open child panel</EuiButton>
-            ) : (
-              <EuiButton onClick={closeChild}>Close child panel</EuiButton>
-            )}
-            {isChildOpen && (
-              <EuiFlyout
-                id="flyout-manager-playground-child"
-                size={childSize}
-                backgroundStyle={childBackgroundStyle}
-                maxWidth={childMaxWidth}
-                ownFocus={false}
-                resizable={childFlyoutResizable}
-                {...args}
-                aria-label={`Child Flyout Panel (${childSize})`}
-                onClose={closeChild}
-              >
-                <EuiFlyoutBody>
-                  <EuiText>
-                    <p>This is the child flyout content.</p>
-                    <p>Size restrictions apply:</p>
-                    <ul>
-                      <li>When main panel is 's', child can be 's', or 'm'</li>
-                      <li>When main panel is 'm', child is limited to 's'</li>
-                    </ul>
-                    <EuiSpacer />
-                    <p>
-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                      Dolorum neque sequi illo, cum rerum quia ab animi velit
-                      sit incidunt inventore temporibus eaque nam veritatis amet
-                      maxime maiores optio quam?
-                    </p>
-                  </EuiText>
-                </EuiFlyoutBody>
-                {showFooter && (
-                  <EuiFlyoutFooter>
-                    <EuiText>
-                      <p>Child flyout footer</p>
-                    </EuiText>
-                  </EuiFlyoutFooter>
-                )}
-                {/* Footer is optional */}
-              </EuiFlyout>
-            )}
-          </EuiFlyoutBody>
-          {showFooter && (
-            <EuiFlyoutFooter>
+          {!isChildOpen ? (
+            <EuiButton onClick={openChild}>Open child panel</EuiButton>
+          ) : (
+            <EuiButton onClick={closeChild}>Close child panel</EuiButton>
+          )}
+          <EuiFlyout
+            isOpen={isChildOpen}
+            id="flyout-manager-playground-child"
+            size={childSize}
+            backgroundStyle={childBackgroundStyle}
+            maxWidth={childMaxWidth}
+            ownFocus={false}
+            resizable={childFlyoutResizable}
+            {...args}
+            aria-label={`Child Flyout Panel (${childSize})`}
+            onClose={closeChild}
+          >
+            <EuiFlyoutBody>
               <EuiText>
-                <p>Main flyout footer</p>
+                <p>This is the child flyout content.</p>
+                <p>Size restrictions apply:</p>
+                <ul>
+                  <li>When main panel is 's', child can be 's', or 'm'</li>
+                  <li>When main panel is 'm', child is limited to 's'</li>
+                </ul>
+                <EuiSpacer />
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Dolorum neque sequi illo, cum rerum quia ab animi velit sit
+                  incidunt inventore temporibus eaque nam veritatis amet maxime
+                  maiores optio quam?
+                </p>
               </EuiText>
-            </EuiFlyoutFooter>
-          )}
-        </EuiFlyout>
-      )}
+            </EuiFlyoutBody>
+            {showFooter && (
+              <EuiFlyoutFooter>
+                <EuiText>
+                  <p>Child flyout footer</p>
+                </EuiText>
+              </EuiFlyoutFooter>
+            )}
+            {/* Footer is optional */}
+          </EuiFlyout>
+        </EuiFlyoutBody>
+        {showFooter && (
+          <EuiFlyoutFooter>
+            <EuiText>
+              <p>Main flyout footer</p>
+            </EuiText>
+          </EuiFlyoutFooter>
+        )}
+      </EuiFlyout>
     </>
   );
 };

packages/eui/src/components/flyout/manager/flyout_fill_mode.stories.tsx

@@ -185,61 +185,59 @@ const Session: React.FC<FlyoutChildStoryArgs> = (args) => {
         <EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
       )}
 
-      {isMainOpen && (
+      <EuiFlyout
+        isOpen={isMainOpen}
+        session={true}
+        size={mainSize}
+        type={mainFlyoutType}
+        maxWidth={mainMaxWidth}
+        ownFocus={false}
+        aria-label={`Main Flyout Menu (${mainSize})`}
+        {...rest}
+        onClose={closeMain}
+      >
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>This is the main flyout content.</p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+              neque sequi illo, cum rerum quia ab animi velit sit incidunt
+              inventore temporibus eaque nam veritatis amet maxime maiores optio
+              quam?
+            </p>
+          </EuiText>
+          <EuiSpacer />
+
+          {!isChildOpen ? (
+            <EuiButton onClick={openChild}>Open child panel</EuiButton>
+          ) : (
+            <EuiButton onClick={closeChild}>Close child panel</EuiButton>
+          )}
+        </EuiFlyoutBody>
         <EuiFlyout
-          session={true}
-          size={mainSize}
-          type={mainFlyoutType}
-          maxWidth={mainMaxWidth}
+          isOpen={isChildOpen}
+          size={childSize}
+          backgroundStyle={childBackgroundStyle}
+          maxWidth={childMaxWidth}
           ownFocus={false}
-          aria-label={`Main Flyout Menu (${mainSize})`}
+          aria-label={`Child Flyout Menu (${childSize})`}
           {...rest}
-          onClose={closeMain}
+          onClose={closeChild}
         >
           <EuiFlyoutBody>
             <EuiText>
-              <p>This is the main flyout content.</p>
+              <p>This is the child flyout content.</p>
+              <EuiSpacer />
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
                 neque sequi illo, cum rerum quia ab animi velit sit incidunt
                 inventore temporibus eaque nam veritatis amet maxime maiores
                 optio quam?
               </p>
             </EuiText>
-            <EuiSpacer />
-
-            {!isChildOpen ? (
-              <EuiButton onClick={openChild}>Open child panel</EuiButton>
-            ) : (
-              <EuiButton onClick={closeChild}>Close child panel</EuiButton>
-            )}
           </EuiFlyoutBody>
-          {isChildOpen && (
-            <EuiFlyout
-              size={childSize}
-              backgroundStyle={childBackgroundStyle}
-              maxWidth={childMaxWidth}
-              ownFocus={false}
-              aria-label={`Child Flyout Menu (${childSize})`}
-              {...rest}
-              onClose={closeChild}
-            >
-              <EuiFlyoutBody>
-                <EuiText>
-                  <p>This is the child flyout content.</p>
-                  <EuiSpacer />
-                  <p>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Dolorum neque sequi illo, cum rerum quia ab animi velit sit
-                    incidunt inventore temporibus eaque nam veritatis amet
-                    maxime maiores optio quam?
-                  </p>
-                </EuiText>
-              </EuiFlyoutBody>
-            </EuiFlyout>
-          )}
         </EuiFlyout>
-      )}
+      </EuiFlyout>
     </>
   );
 };

packages/eui/src/components/flyout/manager/flyout_managed.styles.ts

@@ -10,6 +10,7 @@ import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate, logicalCSS } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 import {
+  LEVEL_MAIN,
   STAGE_ACTIVE,
   STAGE_BACKGROUNDED,
   STAGE_BACKGROUNDING,
@@ -18,9 +19,8 @@ import {
   STAGE_OPENING,
   STAGE_RETURNING,
 } from './const';
-import { euiFlyoutSlideInLeft, euiFlyoutSlideInRight } from '../flyout.styles';
 import { _EuiFlyoutSide, DEFAULT_SIDE } from '../const';
-import { EuiFlyoutActivityStage } from './types';
+import type { EuiFlyoutActivityStage, EuiFlyoutLevel } from './types';
 
 /**
  * Emotion styles for managed flyouts.
@@ -33,7 +33,8 @@ export const euiManagedFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
   return {
     stage: (
       activeStage: EuiFlyoutActivityStage,
-      side: _EuiFlyoutSide = DEFAULT_SIDE
+      side: _EuiFlyoutSide = DEFAULT_SIDE,
+      level: EuiFlyoutLevel
     ) => {
       // Animation for moving flyout backwards in 3D space (z-axis) when inactive
       const euiFlyoutSlideBack3D = keyframes`
@@ -83,16 +84,6 @@ export const euiManagedFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `;
 
-      const openingTransition = css`
-        ${euiCanAnimate} {
-          animation: ${side === 'left'
-              ? euiFlyoutSlideInLeft
-              : euiFlyoutSlideInRight}
-            ${euiTheme.animation.normal} ${euiTheme.animation.resistance}
-            forwards;
-        }
-      `;
-
       const noTransition = css`
         ${euiCanAnimate} {
           animation: none;
@@ -116,21 +107,27 @@ export const euiManagedFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
 
       switch (activeStage) {
         case STAGE_OPENING:
-          return [activeFlyout, openingTransition];
+          // Apply a higher z-index to opening main flyouts for seamless
+          // transitions from previously active main flyouts
+          return [level === LEVEL_MAIN && activeFlyout];
 
         case STAGE_ACTIVE:
           return [activeFlyout, noTransition];
 
-        case STAGE_CLOSING:
         case STAGE_BACKGROUNDING:
           return [inactiveTransition];
 
-        case STAGE_INACTIVE:
         case STAGE_BACKGROUNDED:
           return [inactiveFlyout, noTransition];
 
         case STAGE_RETURNING:
           return [activeFlyout, returningTransition];
+
+        case STAGE_INACTIVE:
+          return [inactiveFlyout, noTransition];
+
+        case STAGE_CLOSING:
+          return [inactiveTransition];
       }
     },
     managedFlyout: css`