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

package/lib/module/TrueSheet.web.js

@@ -5,8 +5,9 @@ import { createElement, forwardRef, isValidElement, useCallback, useEffect, useI
 import { StyleSheet, useColorScheme, useWindowDimensions, View } from 'react-native';
 import { measurePeekContentHeight, TrueSheetPeekContext } from "./TrueSheetPeek.web.js";
 import { usePortalContainer, useRegisterSheet, useSheetStack } from "./TrueSheetProvider.web.js";
-import { COLOR_SURFACE_CONTAINER_LOW_DARK, COLOR_SURFACE_CONTAINER_LOW_LIGHT, DEFAULT_ANCHOR_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 { 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;
@@ -32,8 +33,8 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundColor: backgroundColorProp,
     maxContentHeight,
     maxContentWidth,
-    anchor = 'center',
-    anchorOffset = DEFAULT_ANCHOR_OFFSET,
+    placement = 'automatic',
+    placementOffset = DEFAULT_PLACEMENT_OFFSET,
     scrollableRef,
     scrollableOptions,
     grabber = true,
@@ -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);
   }, []);
@@ -201,16 +201,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const [peekContentHeight, setPeekContentHeight] = useState(0);
   const contentRef = useRef(null);
   const peekElRef = useRef(null);
-  const peekContext = useMemo(() => ({
-    contentRef,
-    peekRef: peekElRef,
-    setPeekContentHeight
-  }), []);
-
-  // 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) {
@@ -218,11 +209,32 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, []);
 
+  // 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(() => ({
+    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
@@ -249,114 +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);
-
-  // 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 = 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;
@@ -419,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;
@@ -436,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
@@ -472,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
@@ -559,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
@@ -611,7 +521,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
         realtime: true
       }
     });
-  }, [interpolateFromPosition, updateSizedLayoutHeight]);
+  }, [interpolateFromPosition]);
 
   // Fire onMount once after first render. React-mount is the earliest point
   // the component is ready for imperative calls, matching the native
@@ -757,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)
     });
@@ -784,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;
@@ -794,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)';
 
@@ -817,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
@@ -985,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
@@ -1023,11 +929,11 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     // 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.
-    paddingBottom: insetAdjustment === 'automatic' && !(footerOwnsInset && !absoluteFooter) && (!scrollableRef || (scrollableOptions?.contentInsetAdjustmentBehavior ?? true)) ? 'env(safe-area-inset-bottom, 0px)' : 0
-  }), [backgroundColor, effectiveCornerRadius, insetAdjustment, footerOwnsInset, absoluteFooter, scrollableRef, scrollableOptions]);
+    // 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 || insetBehavior === 'automatic' || insetBehavior === 'safe-area') ? 'env(safe-area-inset-bottom, 0px)' : 0
+  }), [backgroundColor, effectiveCornerRadius, insetAdjustment, footerOwnsInset, absoluteFooter, scrollableRef, insetBehavior]);
   const defaultGrabberColor = colorScheme === 'dark' ? DEFAULT_GRABBER_COLOR_DARK : DEFAULT_GRABBER_COLOR_LIGHT;
   const grabberHeight = grabberOptions?.height ?? DEFAULT_GRABBER_HEIGHT;
 
@@ -1058,7 +964,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   //   `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(() => {
     // Mobile portrait ignores width sizing entirely (matches iOS/Android:
@@ -1070,23 +976,23 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     const next = {};
     if (dropShadow) next.filter = dropShadow;
     if (!needsMargins) return next;
-    let marginLeft;
-    let marginRight;
+    let marginInlineStart;
+    let marginInlineEnd;
     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, effectiveDetached, dropShadow]);
+  }, [isLandscapeOrTablet, isFormSheet, maxContentWidth, presentation, placement, placementOffset, effectiveDetached, dropShadow]);
 
   // Absolute-position the grabber so it overlays the content top-edge
   // instead of consuming flow height — mirrors native iOS/Android, where
@@ -1128,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,
@@ -1158,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,
@@ -1177,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, {
@@ -1186,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)
-            })]
           })]
         })]
       })
@@ -1240,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 = {