@lodev09/react-native-true-sheet 4.0.0-beta.15 → 4.0.0-beta.16

package/android/src/main/java/com/lodev09/truesheet/TrueSheetOverlayView.kt

@@ -32,6 +32,11 @@ class TrueSheetOverlayView(private val reactContext: ThemedReactContext) :
   private var lastWidth = 0
   private var lastHeight = 0
 
+  // Fabric hands back a new StateWrapper on every state commit — including our
+  // own pushes — so pushState dedupes against the last pushed size to break the loop
+  private var lastStateWidth = 0
+  private var lastStateHeight = 0
+
   var stateWrapper: StateWrapper? = null
     set(value) {
       field = value
@@ -101,6 +106,11 @@ class TrueSheetOverlayView(private val reactContext: ThemedReactContext) :
 
   private fun pushState() {
     if (lastWidth == 0 && lastHeight == 0) return
-    stateWrapper?.let { TrueSheetStateUpdater.updateContainerSize(it, lastWidth, lastHeight) }
+    if (lastWidth == lastStateWidth && lastHeight == lastStateHeight) return
+    val sw = stateWrapper ?: return
+
+    lastStateWidth = lastWidth
+    lastStateHeight = lastHeight
+    TrueSheetStateUpdater.updateContainerSize(sw, lastWidth, lastHeight)
   }
 }

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetDimView.kt

@@ -139,6 +139,9 @@ class TrueSheetDimView(private val reactContext: ThemedReactContext) :
 
   override fun onTouchEvent(event: MotionEvent): Boolean {
     if (blockGestures) {
+      if (event.actionMasked == MotionEvent.ACTION_DOWN) {
+        parent?.requestDisallowInterceptTouchEvent(true)
+      }
       // When dimmed, consume touch and trigger click on ACTION_UP
       if (event.action == MotionEvent.ACTION_UP) {
         performClick()

package/ios/TrueSheetFooterView.mm

@@ -155,6 +155,8 @@ using namespace facebook::react;
     _lastHeight = height;
     [self.delegate footerViewDidChangeSize:CGSizeMake(layoutMetrics.frame.size.width, height)];
   }
+
+  [self applyKeyboardOffset];
 }
 
 - (void)prepareForRecycle {
@@ -184,6 +186,20 @@ using namespace facebook::react;
   return controller.absoluteFooter && controller.footerAvoidsKeyboard;
 }
 
+- (CGFloat)keyboardSlideForHeight:(CGFloat)height {
+  UIWindow *window = self.window;
+  if (!window) {
+    return 0;
+  }
+
+  // Measure in the transform's coordinate space, excluding the footer's current slide.
+  CGFloat footerBottom = self.center.y + self.bounds.size.height / 2;
+  CGPoint keyboardTopInWindow = CGPointMake(CGRectGetMidX(window.bounds), CGRectGetMaxY(window.bounds) - height);
+  CGFloat keyboardTop = [self.superview convertPoint:keyboardTopInWindow fromView:window].y;
+  CGFloat keyboardOffset = self.keyboardObserver.viewController.footerKeyboardOffset;
+  return MAX(0, footerBottom - keyboardTop + keyboardOffset);
+}
+
 // Yoga owns the footer's frame (pinned to the container's bottom edge), so the
 // keyboard slide is carried by a transform instead of layout.
 - (void)keyboardWillShow:(CGFloat)height duration:(NSTimeInterval)duration curve:(UIViewAnimationOptions)curve {
@@ -193,18 +209,19 @@ using namespace facebook::react;
 
   [self setKeyboardVisible:YES];
 
-  CGFloat keyboardOffset = self.keyboardObserver.viewController.footerKeyboardOffset;
-  CGFloat slide = MAX(0, height + keyboardOffset);
+  CGFloat slide = [self keyboardSlideForHeight:height];
   _currentKeyboardOffset = slide;
 
   [UIView animateWithDuration:duration
-                        delay:0
-                      options:curve | UIViewAnimationOptionBeginFromCurrentState
-                   animations:^{
-                     self.transform = CGAffineTransformMakeTranslation(0, -slide);
-                     [self syncEdgeEffect];
-                   }
-                   completion:nil];
+    delay:0
+    options:curve | UIViewAnimationOptionBeginFromCurrentState
+    animations:^{
+      self.transform = CGAffineTransformMakeTranslation(0, -slide);
+      [self syncEdgeEffect];
+    }
+    completion:^(BOOL finished) {
+      [self applyKeyboardOffset];
+    }];
 }
 
 - (void)keyboardWillHide:(NSTimeInterval)duration curve:(UIViewAnimationOptions)curve {
@@ -252,8 +269,7 @@ using namespace facebook::react;
 
   [self setKeyboardVisible:YES];
 
-  CGFloat keyboardOffset = self.keyboardObserver.viewController.footerKeyboardOffset;
-  CGFloat slide = MAX(0, height + keyboardOffset);
+  CGFloat slide = [self keyboardSlideForHeight:height];
   _currentKeyboardOffset = slide;
   self.transform = CGAffineTransformMakeTranslation(0, -slide);
 }

package/ios/TrueSheetView.mm

@@ -831,6 +831,7 @@ using namespace facebook::react;
 
 - (void)viewControllerSafeAreaInsetsDidChange {
   [self refreshFooterBottomInset];
+  [_containerView updateFooterKeyboardOffset];
 }
 
 - (void)viewControllerWillFocus {

package/lib/module/TrueSheet.web.js

@@ -7,6 +7,7 @@ import { measurePeekContentHeight, TrueSheetPeekContext } from "./TrueSheetPeek.
 import { usePortalContainer, useRegisterSheet, useSheetStack } from "./TrueSheetProvider.web.js";
 import { COLOR_SURFACE_CONTAINER_LOW_DARK, COLOR_SURFACE_CONTAINER_LOW_LIGHT, DEFAULT_PLACEMENT_OFFSET, DEFAULT_CORNER_RADIUS, DEFAULT_DETACHED_OFFSET, DEFAULT_FORM_SHEET_HEIGHT_RATIO, DEFAULT_FORM_SHEET_WIDTH, DEFAULT_GRABBER_COLOR_DARK, DEFAULT_GRABBER_COLOR_LIGHT, DEFAULT_GRABBER_HEIGHT, DEFAULT_GRABBER_TOP_MARGIN, DEFAULT_GRABBER_WIDTH, DEFAULT_MAX_WIDTH } from "./web/constants.js";
 import { getDOMElement } from "./web/dom.js";
+import { observeSheetLayout } from "./web/layout.js";
 import { Drawer } from "./web/vaul/index.js";
 import { DEFAULT_PEEK_HEIGHT, DRAG_CLASS, TRANSITIONS } from "./web/vaul/constants.js";
 
@@ -14,7 +15,7 @@ import { DEFAULT_PEEK_HEIGHT, DRAG_CLASS, TRANSITIONS } from "./web/vaul/constan
 // ScrollView refs expose the scroll node directly (with helpers attached);
 // list refs (e.g. FlatList) expose it via getScrollableNode(). The node's
 // first child is the content container.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getScrollableElement = scrollable => {
   if (!scrollable) return null;
   if (scrollable instanceof HTMLElement) return scrollable;
@@ -104,7 +105,6 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   }, [validDetents]);
   const validDetentsRef = useRef(validDetents);
   validDetentsRef.current = validDetents;
-  const hasAutoDetent = validDetents.includes('auto');
   const handleSetActiveSnapPoint = useCallback(snapPoint => {
     setActiveSnapPoint(snapPoint == null ? null : typeof snapPoint === 'number' || snapPoint === 'auto' || snapPoint === 'peek' ? snapPoint : null);
   }, []);
@@ -235,8 +235,6 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   // An absolute (floating) header overlaps the content, so it contributes no
   // height to the 'auto' detent measurement.
   const absoluteHeader = headerOptions?.position === 'absolute';
-  const absoluteHeaderRef = useRef(absoluteHeader);
-  absoluteHeaderRef.current = absoluteHeader;
   const resolvedHeaderStyle = absoluteHeader ? [absoluteHeaderStyle, headerStyle] : headerStyle;
 
   // Same for an absolute (floating) footer — rendered via vaul's
@@ -263,119 +261,54 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   // A relative footer is laid out below the content, so it's pushed off-screen
   // at the peek detent and contributes no height.
   const peekHeight = (header ? headerHeight : 0) + (footer && absoluteFooter ? footerHeight : 0) + peekContentHeight || DEFAULT_PEEK_HEIGHT;
-
-  // Web mirror of native's scrollable handling for 'auto' detents: a plugged
-  // scrollable keeps the sized (bounded) layout so its viewport is capped to
-  // the visible sheet and can scroll, while the 'auto' height is measured with
-  // the viewport replaced by the scrollable's content size — mirrors native
-  // `naturalHeight`.
-  const [hasBoundedScrollable, setHasBoundedScrollable] = useState(false);
-  const [scrollableAutoHeight, setScrollableAutoHeight] = useState(0);
-  const detectedScrollerRef = useRef(null);
-  // Bottom padding applied to the plugged scrollable for an absolute footer
-  // (see the footer inset effect below)
-  const footerInsetRef = useRef(0);
-
-  // Natural content height (header + content + footer, with a detected
-  // scrollable's viewport replaced by its content size) — the height the
-  // content wants regardless of the sheet's bounds. An absolute footer's inset
-  // on the scrollable counts like a relative footer's height, so the content
-  // ends above the footer (mirrors native's auto detent).
-  const measureNaturalHeight = useCallback(() => {
-    const contentEl = getDOMElement(contentRef.current);
-    if (!contentEl || !contentEl.isConnected) return 0;
-    const headerEl = absoluteHeaderRef.current ? null : getDOMElement(headerElRef.current);
-    const footerEl = absoluteFooterRef.current ? null : getDOMElement(footerElRef.current);
-    let height = (headerEl?.offsetHeight ?? 0) + (footerEl?.offsetHeight ?? 0) + contentEl.offsetHeight;
-    const scroller = detectedScrollerRef.current;
-    const scrollContent = scroller?.firstElementChild;
-    if (scroller?.isConnected && scrollContent instanceof HTMLElement) {
-      height += scrollContent.offsetHeight - scroller.clientHeight + footerInsetRef.current;
-    }
-    return Math.max(0, height);
-  }, []);
+  const [measuredContentHeight, setMeasuredContentHeight] = useState(0);
+  const naturalHeightRef = useRef(0);
+  const insetBehavior = scrollableOptions?.contentInsetAdjustment ?? 'automatic';
+  const footerInsetAdjustment = Boolean(footer) && absoluteFooter && (insetBehavior === 'automatic' || insetBehavior === 'footer');
+  const measureContent = validDetents.includes('auto') || isFormSheet;
   useEffect(() => {
-    if (!isOpen || !hasAutoDetent) return undefined;
+    if (!isOpen) return undefined;
     let canceled = false;
     let rafId = 0;
-    let mutationObserver = null;
-    let resizeObserver = null;
+    let observer;
     const attach = () => {
       if (canceled) return;
-      const drawerEl = drawerContentRef.current;
-      if (!drawerEl || !drawerEl.isConnected) {
+      const layoutEl = sizedLayoutRef.current;
+      const drawer = drawerContentRef.current;
+      if (!drawer || !layoutEl?.isConnected) {
         // Radix Presence defers the portal mount; poll until the drawer is live.
         rafId = window.requestAnimationFrame(attach);
         return;
       }
-      const measure = () => setScrollableAutoHeight(measureNaturalHeight());
-      let observed = null;
-
-      // (Re)resolve the plugged scrollable and observe the nodes whose size
-      // feeds the natural height — content growth inside a bounded scroller is
-      // invisible to the sheet's own layout (mirrors native's contentSize
-      // observation). Resolves the content node live: the layout-branch swap
-      // (natural flow ↔ sized) remounts it.
-      const observe = () => {
-        const contentEl = getDOMElement(contentRef.current);
-        const headerEl = getDOMElement(headerElRef.current);
-
-        // Skip mutations that don't change the observed topology — e.g. a
-        // virtualized list mounting rows inside the plugged scroller. Size
-        // changes are already covered by the ResizeObserver.
-        if (observed && observed.contentEl === contentEl && contentEl?.isConnected && observed.headerEl === headerEl && observed.scroller.isConnected && observed.scrollContent === observed.scroller.firstElementChild) {
-          return;
+      observer = observeSheetLayout({
+        drawer,
+        layout: layoutEl,
+        getContent: () => getDOMElement(contentRef.current),
+        getHeader: () => getDOMElement(headerElRef.current),
+        getFooter: () => getDOMElement(footerElRef.current),
+        getScrollable: () => getScrollableElement(scrollableRef?.current),
+        absoluteHeader,
+        absoluteFooter,
+        footerInsetAdjustment,
+        measureContent,
+        onHeightChange: height => {
+          naturalHeightRef.current = height;
+          setMeasuredContentHeight(height);
         }
-        const resolved = contentEl && contentEl.isConnected ? getScrollableElement(scrollableRef?.current) : null;
-        const scroller = resolved?.isConnected ? resolved : null;
-        detectedScrollerRef.current = scroller;
-        setHasBoundedScrollable(scroller != null);
-        observed = scroller ? {
-          contentEl,
-          headerEl,
-          scroller,
-          scrollContent: scroller.firstElementChild
-        } : null;
-        resizeObserver?.disconnect();
-        resizeObserver = new ResizeObserver(measure);
-        if (contentEl?.isConnected) resizeObserver.observe(contentEl);
-        if (headerEl) resizeObserver.observe(headerEl);
-        if (scroller) {
-          resizeObserver.observe(scroller);
-          if (scroller.firstElementChild) resizeObserver.observe(scroller.firstElementChild);
-        }
-        measure();
-      };
-      observe();
-      // Watch the whole drawer subtree — catches the scrollable mounting/
-      // unmounting AND the layout-branch swap, which remounts the content node
-      // (a content-scoped observer would go stale after the swap).
-      mutationObserver = new MutationObserver(observe);
-      mutationObserver.observe(drawerEl, {
-        childList: true,
-        subtree: true
       });
     };
     rafId = window.requestAnimationFrame(attach);
     return () => {
       canceled = true;
       window.cancelAnimationFrame(rafId);
-      mutationObserver?.disconnect();
-      resizeObserver?.disconnect();
+      observer?.disconnect();
     };
-  }, [isOpen, hasAutoDetent, measureNaturalHeight, scrollableRef]);
+  }, [isOpen, absoluteHeader, absoluteFooter, footerInsetAdjustment, measureContent, scrollableRef]);
 
   // Below the last detent a vertical touch pan moves the sheet, not the
   // content — `[data-vaul-scroll-locked]` disables vertical touch panning on
   // the scroll container and everything inside it (see vaul/style.css).
   const isScrollLocked = validDetents.length > 0 && activeSnapPoint !== validDetents[validDetents.length - 1];
-
-  // Vaul measures the auto-size wrapper's offsetHeight (always, post fork).
-  // Track it here so the form sheet can size its card to fit content,
-  // clamped between a minimum ratio of the viewport and a maximum derived
-  // from `detachedOffset` (the breathing room left at top + bottom of the
-  // floating card).
-  const [measuredContentHeight, setMeasuredContentHeight] = useState(0);
   const effectiveMaxContentHeight = useMemo(() => {
     if (maxContentHeight !== undefined) return maxContentHeight;
     if (!isFormSheet) return undefined;
@@ -438,16 +371,14 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     effectiveDetachedOffset,
     effectiveMaxContentHeight,
     peekHeight,
-    peekContentHeight,
-    measuredContentHeight
+    peekContentHeight
   });
   geometryInputsRef.current = {
     effectiveDetached,
     effectiveDetachedOffset,
     effectiveMaxContentHeight,
     peekHeight,
-    peekContentHeight,
-    measuredContentHeight
+    peekContentHeight
   };
   const computeDetentGeometry = useCallback(() => {
     const inputs = geometryInputsRef.current;
@@ -455,12 +386,9 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     const effectiveH = inputs.effectiveDetached ? windowH - inputs.effectiveDetachedOffset : windowH;
     // Matches vaul's height ceiling: min(effectiveH, maxContentHeight).
     const ceiling = inputs.effectiveMaxContentHeight !== undefined ? Math.min(effectiveH, inputs.effectiveMaxContentHeight) : effectiveH;
-    // 'auto' resolves to the content's natural height. Read it live — the
-    // `measuredContentHeight` state lags mount by a frame (vaul's initial
-    // ref-callback measure runs while the portal subtree is still detached,
-    // so it reads 0 until the ResizeObserver fires). Falls back to the state
-    // value, then to vaul's pre-measure fallback (effectiveHeight / 2).
-    const measuredHeight = measureNaturalHeight() || inputs.measuredContentHeight;
+    // Reuse the intrinsic measurement during position events so animation
+    // frames don't clone the content tree again.
+    const measuredHeight = naturalHeightRef.current;
     const autoHeight = Math.min(measuredHeight > 0 ? measuredHeight : effectiveH / 2, ceiling);
 
     // 'peek' is measured live from the DOM (offsetHeight is layout-based, so
@@ -491,7 +419,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       positions,
       values
     };
-  }, [measureNaturalHeight]);
+  }, []);
 
   // Detent info for lifecycle events. Position/detent come from the active
   // detent's target geometry — not the live DOM rect — so willPresent (drawer
@@ -578,46 +506,9 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       detent: values[count - 1]
     };
   }, [computeDetentGeometry]);
-
-  // Mirror native synchronous layout: while dragging (and through the post-
-  // release settle) the sized layout tracks the sheet's visible height in
-  // realtime, clamped to the smallest detent — dragging below it slides the
-  // sheet out without resizing. Once settled, the inline height is cleared so
-  // the CSS calc() owns sizing again (adapts to viewport resizes at rest).
   const sizedLayoutRef = useRef(null);
   const isDraggingRef = useRef(false);
-  const isSettlingAfterDragRef = useRef(false);
-  const updateSizedLayoutHeight = useCallback(position => {
-    const node = sizedLayoutRef.current;
-    if (!node) return;
-    const {
-      effectiveH,
-      ceiling,
-      positions
-    } = computeDetentGeometry();
-    if (positions.length === 0) return;
-    if (isSettlingAfterDragRef.current) {
-      const snap = activeSnapPointRef.current;
-      const index = snap != null ? validDetentsRef.current.indexOf(snap) : -1;
-      const target = index >= 0 ? positions[index] : null;
-      if (target != null && Math.abs(position - target) < 1) {
-        isSettlingAfterDragRef.current = false;
-        // Restore the calc — height is an inline style, so clearing it would
-        // leave the div unsized (React won't re-apply it without a render)
-        node.style.height = SIZED_LAYOUT_HEIGHT;
-        return;
-      }
-    }
-
-    // positions[0] is the smallest detent's top-Y — its height is the clamp floor.
-    const minHeight = effectiveH - positions[0];
-    const height = Math.min(Math.max(effectiveH - position, minHeight), ceiling);
-    node.style.height = `${height}px`;
-  }, [computeDetentGeometry]);
   const handlePositionChange = useCallback(position => {
-    if (isDraggingRef.current || isSettlingAfterDragRef.current) {
-      updateSizedLayoutHeight(position);
-    }
     const {
       index,
       detent
@@ -630,91 +521,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
         realtime: true
       }
     });
-  }, [interpolateFromPosition, updateSizedLayoutHeight]);
-
-  // Web mirror of native's footer inset (`contentInsetAdjustment`
-  // 'automatic' | 'footer'): pad the plugged scrollable by how much the
-  // absolute footer covers it. Measured from layout offsets (not client rects)
-  // so in-flight transforms don't skew it — the footer's bottom sits at the
-  // visible bottom of the layout container, so only a scroller reaching that
-  // edge gets an inset, and a safe-area lift (or a short scroller) shrinks it.
-  // Padding on the scroll container extends its scrollable overflow, like a
-  // native content inset.
-  const insetBehavior = scrollableOptions?.contentInsetAdjustment ?? 'automatic';
-  const footerInsetAdjustment = Boolean(footer) && absoluteFooter && (insetBehavior === 'automatic' || insetBehavior === 'footer');
-  useEffect(() => {
-    if (!isOpen || !footerInsetAdjustment || !scrollableRef) return undefined;
-    let canceled = false;
-    let rafId = 0;
-    let mutationObserver = null;
-    let resizeObserver = null;
-    let scroller = null;
-    const reset = () => {
-      if (scroller) scroller.style.paddingBottom = '';
-      footerInsetRef.current = 0;
-    };
-    const apply = () => {
-      const footerEl = getDOMElement(footerElRef.current);
-      const container = sizedLayoutRef.current ?? drawerContentRef.current;
-      if (!scroller?.isConnected || !footerEl || !container) return;
-
-      // Measure without our own padding so an unbounded scroller (sized by its
-      // content) doesn't grow by the inset and feed back into the overlap.
-      scroller.style.paddingBottom = '';
-      let bottom = scroller.offsetTop + scroller.offsetHeight;
-      let el = scroller.offsetParent;
-      while (el && el !== container) {
-        bottom += el.offsetTop;
-        el = el.offsetParent;
-      }
-      const footerTop = container.offsetHeight - footerEl.offsetHeight;
-      const inset = el ? Math.max(0, bottom - footerTop) : 0;
-      footerInsetRef.current = inset;
-      scroller.style.paddingBottom = inset > 0 ? `${inset}px` : '';
-    };
-
-    // (Re)resolve the plugged scrollable — a conditional remount swaps the node
-    const observe = () => {
-      const resolved = getScrollableElement(scrollableRef.current);
-      const next = resolved?.isConnected ? resolved : null;
-      if (next === scroller && resizeObserver) return;
-      reset();
-      resizeObserver?.disconnect();
-      resizeObserver = null;
-      scroller = next;
-      if (!scroller) return;
-      resizeObserver = new ResizeObserver(apply);
-      resizeObserver.observe(scroller);
-      const footerEl = getDOMElement(footerElRef.current);
-      if (footerEl) resizeObserver.observe(footerEl);
-      const container = sizedLayoutRef.current ?? drawerContentRef.current;
-      if (container) resizeObserver.observe(container);
-      apply();
-    };
-    const attach = () => {
-      if (canceled) return;
-      const drawerEl = drawerContentRef.current;
-      if (!drawerEl || !drawerEl.isConnected) {
-        // Radix Presence defers the portal mount; poll until the drawer is live.
-        rafId = window.requestAnimationFrame(attach);
-        return;
-      }
-      observe();
-      mutationObserver = new MutationObserver(observe);
-      mutationObserver.observe(drawerEl, {
-        childList: true,
-        subtree: true
-      });
-    };
-    rafId = window.requestAnimationFrame(attach);
-    return () => {
-      canceled = true;
-      window.cancelAnimationFrame(rafId);
-      mutationObserver?.disconnect();
-      resizeObserver?.disconnect();
-      reset();
-    };
-  }, [isOpen, footerInsetAdjustment, scrollableRef]);
+  }, [interpolateFromPosition]);
 
   // Fire onMount once after first render. React-mount is the earliest point
   // the component is ready for imperative calls, matching the native
@@ -860,12 +667,9 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       nativeEvent: computeDetentInfo(true)
     });
   }, [computeDetentInfo]);
-  const handleRelease = useCallback((_event, open) => {
+  const handleRelease = useCallback(() => {
     if (!isDraggingRef.current) return;
     isDraggingRef.current = false;
-    // Track the sized layout through the settle animation only when the sheet
-    // stays open — a dismissal slides out at the min-clamped height.
-    isSettlingAfterDragRef.current = open;
     onDragEndRef.current?.({
       nativeEvent: computeDetentInfo(true)
     });
@@ -887,6 +691,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   // Mirror Android: translate this sheet down to match the deepest descendant's
   // top so the whole stack visually aligns. Cascades because every ancestor
   // re-runs whenever the stack (and thus its descendants) changes.
+  const wasCascadedRef = useRef(false);
   useEffect(() => {
     const parent = drawerContentRef.current;
     if (!parent) return;
@@ -897,7 +702,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     // out — nothing to align with anymore.
     if (!isOpen) return;
     const parentWrapper = parent.closest('[data-vaul-detached-wrapper]');
-    const transition = `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
+    const transition = `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')}), --snap-point-height ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
     const wrapperTransition = `clip-path ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
     const CLIP_NONE = 'inset(0px round 0px)';
 
@@ -920,11 +725,14 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       parentWrapper.style.clipPath = next;
     };
     if (descendants.length === 0) {
+      if (!wasCascadedRef.current) return;
+      wasCascadedRef.current = false;
       parent.style.transition = transition;
       parent.style.transform = '';
       setClip(CLIP_NONE);
       return;
     }
+    wasCascadedRef.current = true;
 
     // Track the immediate child's *actual* top: its cascade transform when it
     // was itself pushed behind a grandchild, else its own snap point. Mirrors
@@ -1088,11 +896,6 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       window.cancelAnimationFrame(rafId);
     };
   }, [isOpen, descendants.length]);
-
-  // Definite-height flex layout (per-detent sizing) unless content must be
-  // measured in natural flow: 'auto' detents (without a plugged scrollable —
-  // those measure via `measureNaturalHeight`) and form-sheet content-fit sizing.
-  const useSizedLayout = (!hasAutoDetent || hasBoundedScrollable) && !isFormSheet;
   const effectiveCornerRadius = cornerRadius ?? DEFAULT_CORNER_RADIUS;
 
   // Shadow cast upward from the sheet's top edge toward the background. Matches
@@ -1231,11 +1034,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       peekHeight: peekHeight,
       initialAnimated: initialDetentAnimated,
       detachedWrapperStyle: wrapperStyle,
-      onContentHeightChange: setMeasuredContentHeight,
-      contentHeight:
-      // Bounded scrollable → the auto-size wrapper measures 0 (sized
-      // layout is absolute), so feed vaul the natural height instead.
-      hasAutoDetent && hasBoundedScrollable && scrollableAutoHeight > 0 ? scrollableAutoHeight : undefined,
+      contentHeight: measuredContentHeight,
       activeSnapPoint: activeSnapPoint,
       setActiveSnapPoint: handleSetActiveSnapPoint,
       ...snapPointsProps,
@@ -1261,15 +1060,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
             children: accessibilityOptions?.paneTitle ?? 'Sheet'
           }), grabber && /*#__PURE__*/_jsx(Drawer.Handle, {
             style: handleStyle
-          }), useSizedLayout ?
-          /*#__PURE__*/
-          // vaul wraps children in `[data-vaul-auto-size-wrapper]` (display:
-          // flow-root) which doesn't honor descendant flex layout. Use an
-          // absolute fill sized to the visible portion (via vaul's
-          // `--snap-point-height` var) so the inner flex column has a
-          // definite height for flex layouts to fill — mirrors native, where
-          // the container is sized to the sheet's visible height per detent.
-          _jsxs("div", {
+          }), /*#__PURE__*/_jsxs("div", {
             ref: sizedLayoutRef,
             style: sizedLayoutStyle,
             "data-vaul-scroll-locked": isScrollLocked ? '' : undefined,
@@ -1280,7 +1071,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
               children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
             }), /*#__PURE__*/_jsx(View, {
               ref: contentRef,
-              style: hasAutoDetent && hasBoundedScrollable ? [contentFillStyle, style] : style,
+              style: [contentStyle, style],
               onLayout: handleContentLayout,
               children: children
             }), footer && !absoluteFooter && /*#__PURE__*/_jsx(View, {
@@ -1289,27 +1080,6 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
               onLayout: handleFooterLayout,
               children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
             })]
-          }) :
-          /*#__PURE__*/
-          // Natural flow so vaul can measure content height — required for
-          // 'auto' detents and form-sheet content-fit sizing.
-          _jsxs(_Fragment, {
-            children: [header && /*#__PURE__*/_jsx(View, {
-              ref: headerElRef,
-              style: resolvedHeaderStyle,
-              onLayout: handleHeaderLayout,
-              children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
-            }), /*#__PURE__*/_jsx(View, {
-              ref: contentRef,
-              style: style,
-              onLayout: handleContentLayout,
-              children: children
-            }), footer && !absoluteFooter && /*#__PURE__*/_jsx(View, {
-              ref: footerElRef,
-              style: resolvedFooterStyle,
-              onLayout: handleFooterLayout,
-              children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
-            })]
           })]
         })]
       })
@@ -1343,10 +1113,12 @@ const sizedLayoutStyle = {
   right: 0,
   height: SIZED_LAYOUT_HEIGHT,
   display: 'flex',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  paddingBottom: 'inherit'
 };
-const contentFillStyle = {
-  flex: 1,
+const contentStyle = {
+  flexShrink: 1,
   minHeight: 0
 };
 const visuallyHiddenStyle = {