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

package/src/TrueSheet.web.tsx

@@ -35,12 +35,16 @@ import type {
   WillFocusEvent,
   WillPresentEvent,
 } from './TrueSheet.types';
-import { measurePeekContentHeight, TrueSheetPeekContext } from './TrueSheetPeek.web';
+import {
+  measurePeekContentHeight,
+  TrueSheetPeekContext,
+  type TrueSheetPeekContextValue,
+} from './TrueSheetPeek.web';
 import { usePortalContainer, useRegisterSheet, useSheetStack } from './TrueSheetProvider.web';
 import {
   COLOR_SURFACE_CONTAINER_LOW_DARK,
   COLOR_SURFACE_CONTAINER_LOW_LIGHT,
-  DEFAULT_ANCHOR_OFFSET,
+  DEFAULT_PLACEMENT_OFFSET,
   DEFAULT_CORNER_RADIUS,
   DEFAULT_DETACHED_OFFSET,
   DEFAULT_FORM_SHEET_HEIGHT_RATIO,
@@ -53,6 +57,7 @@ import {
   DEFAULT_MAX_WIDTH,
 } from './web/constants';
 import { getDOMElement } from './web/dom';
+import { observeSheetLayout } from './web/layout';
 import { Drawer } from './web/vaul';
 import { DEFAULT_PEEK_HEIGHT, DRAG_CLASS, TRANSITIONS } from './web/vaul/constants';
 
@@ -78,8 +83,8 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     backgroundColor: backgroundColorProp,
     maxContentHeight,
     maxContentWidth,
-    anchor = 'center',
-    anchorOffset = DEFAULT_ANCHOR_OFFSET,
+    placement = 'automatic',
+    placementOffset = DEFAULT_PLACEMENT_OFFSET,
     scrollableRef,
     scrollableOptions,
     grabber = true,
@@ -168,8 +173,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const validDetentsRef = useRef(validDetents);
   validDetentsRef.current = validDetents;
 
-  const hasAutoDetent = validDetents.includes('auto');
-
   const handleSetActiveSnapPoint = useCallback((snapPoint: number | string | null) => {
     setActiveSnapPoint(
       snapPoint == null
@@ -291,13 +294,9 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   // within the content — measured by the peek against `contentRef`.
   const [peekContentHeight, setPeekContentHeight] = useState(0);
   const contentRef = useRef<View>(null);
-  const peekElRef = useRef<View>(null);
-  const peekContext = useMemo(() => ({ contentRef, peekRef: peekElRef, setPeekContentHeight }), []);
+  const peekElRef = useRef<View | null>(null);
 
-  // The peek's own onLayout only fires when *it* resizes. Content added above
-  // it moves it without resizing it, so re-measure its offset whenever the
-  // content view's layout changes.
-  const handleContentLayout = useCallback(() => {
+  const measurePeek = useCallback(() => {
     const peekEl = getDOMElement(peekElRef.current);
     const contentEl = getDOMElement(contentRef.current);
     if (peekEl && contentEl) {
@@ -305,12 +304,35 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     }
   }, []);
 
+  // Last-attached wins — during a screen swap the incoming peek mounts before
+  // the outgoing one unmounts, so the outgoing detach must not clear it.
+  const peekContext = useMemo<TrueSheetPeekContextValue>(
+    () => ({
+      contentRef,
+      attachPeek: (view) => {
+        peekElRef.current = view;
+        measurePeek();
+      },
+      detachPeek: (view) => {
+        if (peekElRef.current !== view) return;
+        peekElRef.current = null;
+        setPeekContentHeight(0);
+      },
+      measurePeek: (view) => {
+        if (peekElRef.current === view) measurePeek();
+      },
+    }),
+    [measurePeek]
+  );
+
+  // The peek's own onLayout only fires when *it* resizes. Content added above
+  // it moves it without resizing it, so re-measure its offset whenever the
+  // content view's layout changes.
+  const handleContentLayout = measurePeek;
+
   // 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
@@ -346,108 +368,48 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       (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<HTMLElement | null>(null);
-
-  // 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.
-  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;
-    }
-    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: MutationObserver | null = null;
-    let resizeObserver: ResizeObserver | null = null;
+    let observer: ReturnType<typeof observeSheetLayout> | undefined;
 
     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: {
-        contentEl: HTMLElement | null;
-        headerEl: HTMLElement | null;
-        scroller: HTMLElement;
-        scrollContent: Element | null;
-      } | null = 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;
-        }
-
-        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 });
+      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);
+        },
+      });
     };
 
     rafId = window.requestAnimationFrame(attach);
@@ -455,10 +417,16 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     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
@@ -466,13 +434,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   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<number | undefined>(() => {
     if (maxContentHeight !== undefined) return maxContentHeight;
     if (!isFormSheet) return undefined;
@@ -539,7 +500,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     effectiveMaxContentHeight,
     peekHeight,
     peekContentHeight,
-    measuredContentHeight,
   });
   geometryInputsRef.current = {
     effectiveDetached,
@@ -547,7 +507,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     effectiveMaxContentHeight,
     peekHeight,
     peekContentHeight,
-    measuredContentHeight,
   };
 
   const computeDetentGeometry = useCallback(() => {
@@ -561,12 +520,9 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       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
@@ -602,7 +558,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       values.push(effectiveH > 0 ? h / effectiveH : 0);
     }
     return { windowH, effectiveH, ceiling, 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
@@ -681,54 +637,17 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     [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<HTMLDivElement>(null);
   const isDraggingRef = useRef(false);
-  const isSettlingAfterDragRef = useRef(false);
-  const updateSizedLayoutHeight = useCallback(
-    (position: number) => {
-      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: number) => {
-      if (isDraggingRef.current || isSettlingAfterDragRef.current) {
-        updateSizedLayoutHeight(position);
-      }
       const { index, detent } = interpolateFromPosition(position);
       onPositionChangeRef.current?.({
         nativeEvent: { index, position, detent, realtime: true },
       } as PositionChangeEvent);
     },
-    [interpolateFromPosition, updateSizedLayoutHeight]
+    [interpolateFromPosition]
   );
 
   // Fire onMount once after first render. React-mount is the earliest point
@@ -856,17 +775,11 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     }
     onDragChangeRef.current?.({ nativeEvent: computeDetentInfo(true) } as DragChangeEvent);
   }, [computeDetentInfo]);
-  const handleRelease = useCallback(
-    (_event: unknown, open: boolean) => {
-      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) } as DragEndEvent);
-    },
-    [computeDetentInfo]
-  );
+  const handleRelease = useCallback(() => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    onDragEndRef.current?.({ nativeEvent: computeDetentInfo(true) } as DragEndEvent);
+  }, [computeDetentInfo]);
 
   const { isNested, dismissAbove, descendants } = useSheetStack(
     methodsRef,
@@ -886,6 +799,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   // 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 +811,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     if (!isOpen) return;
     const parentWrapper = parent.closest<HTMLElement>('[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)';
 
@@ -921,11 +835,14 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     };
 
     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
@@ -1085,11 +1002,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     };
   }, [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
@@ -1128,13 +1040,13 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       // Lift content above iOS home indicator / bottom safe area when enabled.
       // A relative footer owns the inset instead (see resolvedFooterStyle); an
       // absolute footer floats over the content, so the content keeps its lift.
-      // A plugged scrollable keeps the lift too (contentInsetAdjustmentBehavior,
-      // default on) — disable it to scroll edge-to-edge behind the indicator
-      // with user-applied content padding.
+      // A plugged scrollable keeps the lift too (contentInsetAdjustment
+      // 'automatic' | 'safe-area') — 'footer' | 'never' scroll edge-to-edge
+      // behind the indicator with user-applied content padding.
       paddingBottom:
         insetAdjustment === 'automatic' &&
         !(footerOwnsInset && !absoluteFooter) &&
-        (!scrollableRef || (scrollableOptions?.contentInsetAdjustmentBehavior ?? true))
+        (!scrollableRef || insetBehavior === 'automatic' || insetBehavior === 'safe-area')
           ? 'env(safe-area-inset-bottom, 0px)'
           : 0,
     }),
@@ -1145,7 +1057,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       footerOwnsInset,
       absoluteFooter,
       scrollableRef,
-      scrollableOptions,
+      insetBehavior,
     ]
   );
 
@@ -1184,7 +1096,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   //   `maxContentWidth` is ignored ('form' is absolute).
   // - presentation='page' → `maxContentWidth` (any viewport) or
   //   DEFAULT_MAX_WIDTH (tablet/landscape readability cap).
-  // Detached without a width constraint applies anchorOffset on both edges so
+  // Detached without a width constraint applies placementOffset on both edges so
   // the floating card breathes from the viewport sides.
   const wrapperStyle = useMemo<React.CSSProperties | undefined>(() => {
     // Mobile portrait ignores width sizing entirely (matches iOS/Android:
@@ -1203,30 +1115,30 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     if (dropShadow) next.filter = dropShadow;
     if (!needsMargins) return next;
 
-    let marginLeft: number | string;
-    let marginRight: number | string;
+    let marginInlineStart: number | string;
+    let marginInlineEnd: number | string;
     if (isFormSheet) {
-      marginLeft = 'auto';
-      marginRight = 'auto';
+      marginInlineStart = 'auto';
+      marginInlineEnd = 'auto';
     } else if (maxWidth == null) {
-      marginLeft = anchorOffset;
-      marginRight = anchorOffset;
+      marginInlineStart = placementOffset;
+      marginInlineEnd = placementOffset;
     } else {
-      marginLeft = anchor === 'left' ? anchorOffset : 'auto';
-      marginRight = anchor === 'right' ? anchorOffset : 'auto';
+      marginInlineStart = placement === 'leading' ? placementOffset : 'auto';
+      marginInlineEnd = placement === 'trailing' ? placementOffset : 'auto';
     }
 
     if (maxWidth != null) next.maxWidth = maxWidth;
-    next.marginLeft = marginLeft;
-    next.marginRight = marginRight;
+    next.marginInlineStart = marginInlineStart;
+    next.marginInlineEnd = marginInlineEnd;
     return next;
   }, [
     isLandscapeOrTablet,
     isFormSheet,
     maxContentWidth,
     presentation,
-    anchor,
-    anchorOffset,
+    placement,
+    placementOffset,
     effectiveDetached,
     dropShadow,
   ]);
@@ -1275,14 +1187,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         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}
@@ -1307,64 +1212,29 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
               {accessibilityOptions?.paneTitle ?? 'Sheet'}
             </Drawer.Title>
             {grabber && <Drawer.Handle style={handleStyle} />}
-            {useSizedLayout ? (
-              // 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.
-              <div
-                ref={sizedLayoutRef}
-                style={sizedLayoutStyle}
-                data-vaul-scroll-locked={isScrollLocked ? '' : undefined}
-              >
-                {header && (
-                  <View ref={headerElRef} style={resolvedHeaderStyle} onLayout={handleHeaderLayout}>
-                    {isValidElement(header) ? header : createElement(header)}
-                  </View>
-                )}
-                {/* Content lays out naturally like native — fill only for auto
-                    detents with a plugged scrollable, where natural layout is
-                    circular (sheet height derives from the scroll content size).
-                    Unlike native, CSS won't cap the content to the container
-                    (no fit-content flex basis), so the fill is still needed here. */}
+            <div
+              ref={sizedLayoutRef}
+              style={sizedLayoutStyle}
+              data-vaul-scroll-locked={isScrollLocked ? '' : undefined}
+            >
+              {header && (
+                <View ref={headerElRef} style={resolvedHeaderStyle} onLayout={handleHeaderLayout}>
+                  {isValidElement(header) ? header : createElement(header)}
+                </View>
+              )}
+              <View ref={contentRef} style={[contentStyle, style]} onLayout={handleContentLayout}>
+                {children}
+              </View>
+              {footer && !absoluteFooter && (
                 <View
-                  ref={contentRef}
-                  style={hasAutoDetent && hasBoundedScrollable ? [contentFillStyle, style] : style}
-                  onLayout={handleContentLayout}
+                  ref={footerElRef}
+                  style={[relativeFooterStyle, resolvedFooterStyle]}
+                  onLayout={handleFooterLayout}
                 >
-                  {children}
+                  {isValidElement(footer) ? footer : createElement(footer)}
                 </View>
-                {footer && !absoluteFooter && (
-                  <View
-                    ref={footerElRef}
-                    style={[relativeFooterStyle, resolvedFooterStyle]}
-                    onLayout={handleFooterLayout}
-                  >
-                    {isValidElement(footer) ? footer : createElement(footer)}
-                  </View>
-                )}
-              </div>
-            ) : (
-              // Natural flow so vaul can measure content height — required for
-              // 'auto' detents and form-sheet content-fit sizing.
-              <>
-                {header && (
-                  <View ref={headerElRef} style={resolvedHeaderStyle} onLayout={handleHeaderLayout}>
-                    {isValidElement(header) ? header : createElement(header)}
-                  </View>
-                )}
-                <View ref={contentRef} style={style} onLayout={handleContentLayout}>
-                  {children}
-                </View>
-                {footer && !absoluteFooter && (
-                  <View ref={footerElRef} style={resolvedFooterStyle} onLayout={handleFooterLayout}>
-                    {isValidElement(footer) ? footer : createElement(footer)}
-                  </View>
-                )}
-              </>
-            )}
+              )}
+            </div>
           </Drawer.Content>
         </Drawer.Portal>
       </Drawer.Root>
@@ -1402,12 +1272,11 @@ const sizedLayoutStyle: React.CSSProperties = {
   height: SIZED_LAYOUT_HEIGHT,
   display: 'flex',
   flexDirection: 'column',
+  boxSizing: 'border-box',
+  paddingBottom: 'inherit',
 };
 
-const contentFillStyle = {
-  flex: 1,
-  minHeight: 0,
-} as const;
+const contentStyle = { flexShrink: 1, minHeight: 0 } as const;
 
 const visuallyHiddenStyle: React.CSSProperties = {
   position: 'absolute',