fix(TransitionView): handle parent without definite height (#2584)

packages/core/src/components/SlideTransition/SlideTransition.module.scss

@@ -1,5 +1,4 @@
 .slide {
   position: absolute;
   width: 100%;
-  height: 100%;
 }

packages/core/src/components/SlideTransition/SlideTransition.tsx

@@ -6,7 +6,7 @@ import { SlideTransitionProps } from "./SlideTransition.types";
 import styles from "./SlideTransition.module.scss";
 
 const SlideTransition = forwardRef(
-  ({ direction, children, className }: SlideTransitionProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+  ({ direction, style, children, className }: SlideTransitionProps, ref: React.ForwardedRef<HTMLDivElement>) => {
     return (
       <motion.div
         ref={ref}
@@ -17,6 +17,7 @@ const SlideTransition = forwardRef(
         exit="exit"
         transition={slideAnimationTransition}
         className={cx(styles.slide, className)}
+        style={style}
       >
         {children}
       </motion.div>

packages/core/src/components/SlideTransition/SlideTransition.types.ts

@@ -3,6 +3,7 @@ import { VibeComponentProps } from "../../types";
 
 export interface SlideTransitionProps extends VibeComponentProps {
   direction: SlideDirection;
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }
 

packages/core/src/components/SlideTransition/utils/animationVariants.ts

@@ -2,17 +2,20 @@ import { SlideDirection } from "../SlideTransition.types";
 
 export const slideAnimationVariants = {
   initial: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "10%" : "-10%"
+    x: direction === "forward" ? "10%" : "-10%",
+    opacity: 0
   }),
   enter: {
-    x: 0
+    x: 0,
+    opacity: 1
   },
   exit: (direction: SlideDirection) => ({
-    x: direction === "forward" ? "-100%" : "100%"
+    x: direction === "forward" ? "-10%" : "10%",
+    opacity: 0
   })
 };
 
 export const slideAnimationTransition = {
-  duration: 0.2,
+  duration: 0.1,
   ease: [0.0, 0.0, 0.4, 1.0]
 };

packages/core/src/components/TransitionView/TransitionView.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import cx from "classnames";
 import { AnimatePresence } from "framer-motion";
 import { TransitionViewProps } from "./TransitionView.types";
@@ -9,18 +9,34 @@ import SlideTransition from "../SlideTransition/SlideTransition";
 
 const TransitionView = forwardRef(
   (
-    { activeStep, direction, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
+    { activeStep, direction, height, id, className, "data-testid": dataTestId, children }: TransitionViewProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
+    const slideTransitionRef = useRef<HTMLDivElement>(null);
+    const [contentHeight, setContentHeight] = useState<number>(height);
+    const slideTransitionHeight = height || contentHeight > 0 ? "100%" : "auto";
+
+    useEffect(() => {
+      if (!slideTransitionRef.current) return;
+      setContentHeight(slideTransitionRef.current.scrollHeight);
+    }, [height, slideTransitionRef]);
+
     return (
       <div
         id={id}
         className={cx(styles.slideshow, className)}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TRANSITION_VIEW, id)}
         ref={ref}
+        style={{ height: height ?? contentHeight }}
       >
         <AnimatePresence initial={false} custom={direction}>
-          <SlideTransition key={activeStep} direction={direction}>
+          <SlideTransition
+            key={activeStep}
+            direction={direction}
+            // it must be "auto" on initial load to consider scrollable content in contentHeight calculation
+            style={{ height: slideTransitionHeight }}
+            ref={slideTransitionRef}
+          >
             {children[activeStep]}
           </SlideTransition>
         </AnimatePresence>

packages/core/src/components/TransitionView/TransitionView.types.ts

@@ -5,6 +5,7 @@ import { SlideDirection } from "../SlideTransition/SlideTransition.types";
 export interface TransitionViewProps extends VibeComponentProps {
   activeStep: number;
   direction: TransitionDirection;
+  height?: number;
   children: React.ReactNode[];
 }