@lodev09/react-native-true-sheet 3.11.10 → 4.0.0-beta.1

package/lib/module/TrueSheet.web.js

@@ -2,13 +2,26 @@
 
 /// <reference lib="dom" />
 import { createElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useColorScheme, useWindowDimensions, View } from 'react-native';
+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 { Drawer } from "./web/vaul/index.js";
 import { DEFAULT_PEEK_HEIGHT, TRANSITIONS } from "./web/vaul/constants.js";
+
+// First vertically scrollable descendant — web mirror of native's
+// findScrollView (RN-web ScrollView/FlatList render a node with
+// `overflow-y: auto`; its first child is the content container).
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const findVerticalScroller = root => {
+  for (const el of root.querySelectorAll('*')) {
+    const {
+      overflowY
+    } = window.getComputedStyle(el);
+    if (overflowY === 'auto' || overflowY === 'scroll') return el;
+  }
+  return null;
+};
 const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -31,9 +44,10 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     initialDetentIndex = -1,
     header,
     headerStyle,
+    headerOptions,
     footer,
     footerStyle,
-    scrollable = false,
+    footerOptions,
     presentation = 'page',
     detached = false,
     detachedOffset = DEFAULT_DETACHED_OFFSET,
@@ -88,6 +102,7 @@ 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);
   }, []);
@@ -174,7 +189,134 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     peekRef: peekElRef,
     setPeekContentHeight
   }), []);
-  const peekHeight = (header ? headerHeight : 0) + (footer ? footerHeight : 0) + peekContentHeight || DEFAULT_PEEK_HEIGHT;
+
+  // 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
+  // `detachedSiblings` instead of in the content flow.
+  const absoluteFooter = footerOptions?.position === 'absolute';
+  const absoluteFooterRef = useRef(absoluteFooter);
+  absoluteFooterRef.current = absoluteFooter;
+
+  // The footer owns the sheet's bottom edge, so it absorbs the bottom
+  // safe-area inset as padding (on top of its own) — mirrors native, where the
+  // footer shadow node pads the inset so its background fills it.
+  const footerOwnsInset = Boolean(footer) && insetAdjustment === 'automatic';
+  const resolvedFooterStyle = useMemo(() => {
+    if (!footerOwnsInset) return footerStyle;
+    const flat = StyleSheet.flatten(footerStyle);
+    const base = flat?.paddingBottom ?? flat?.paddingVertical ?? flat?.padding;
+    const baseCss = typeof base === 'number' ? `${base}px` : typeof base === 'string' ? base : '0px';
+    return [footerStyle, {
+      paddingBottom: `calc(${baseCss} + env(safe-area-inset-bottom, 0px))`
+    }];
+  }, [footerOwnsInset, footerStyle]);
+
+  // 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 pinnedScrollerRef = useRef(null);
+
+  // Natural content height (header + content + footer, with a pinned
+  // scrollable's viewport replaced by its content size) — the height the
+  // content wants regardless of the sheet's bounds.
+  const measureNaturalHeight = useCallback(() => {
+    const contentEl = contentRef.current;
+    if (!contentEl || !contentEl.isConnected) return 0;
+    const headerEl = absoluteHeaderRef.current ? null : headerElRef.current;
+    const footerEl = absoluteFooterRef.current ? null : footerElRef.current;
+    let height = (headerEl?.offsetHeight ?? 0) + (footerEl?.offsetHeight ?? 0) + contentEl.offsetHeight;
+    const scroller = pinnedScrollerRef.current;
+    const scrollContent = scroller?.firstElementChild;
+    if (scroller?.isConnected && scrollContent instanceof HTMLElement) {
+      height += scrollContent.offsetHeight - scroller.clientHeight;
+    }
+    return Math.max(0, height);
+  }, []);
+  useEffect(() => {
+    if (!isOpen || !hasAutoDetent) return undefined;
+    let canceled = false;
+    let rafId = 0;
+    let mutationObserver = null;
+    let resizeObserver = null;
+    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;
+      }
+      const measure = () => setScrollableAutoHeight(measureNaturalHeight());
+      let observed = null;
+
+      // (Re)pin the first vertical 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 = contentRef.current;
+        const headerEl = headerElRef.current;
+
+        // Skip mutations that don't change the observed topology — e.g. a
+        // virtualized list mounting rows inside the pinned scroller, which
+        // would otherwise trigger a full-subtree rescan (findVerticalScroller
+        // resolves computed styles) on every scroll frame. 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 scroller = contentEl && contentEl.isConnected ? findVerticalScroller(contentEl) : null;
+        pinnedScrollerRef.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();
+    };
+  }, [isOpen, hasAutoDetent, measureNaturalHeight]);
 
   // Below the last detent a vertical touch pan moves the sheet, not the
   // content — `[data-vaul-scroll-locked]` disables vertical touch panning on
@@ -266,13 +408,12 @@ 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 auto-size wrapper's height. Read it live — the
+    // '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 autoWrapper = drawerContentRef.current?.querySelector('[data-vaul-auto-size-wrapper]');
-    const measuredHeight = autoWrapper?.offsetHeight || inputs.measuredContentHeight;
+    const measuredHeight = measureNaturalHeight() || inputs.measuredContentHeight;
     const autoHeight = Math.min(measuredHeight > 0 ? measuredHeight : effectiveH / 2, ceiling);
 
     // 'peek' is measured live from the DOM (offsetHeight is layout-based, so
@@ -283,7 +424,8 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     // Geometry only runs while the drawer is mounted, so the elements are
     // measurable here; fall back to the state value when they're absent.
     const headerEl = headerElRef.current;
-    const footerEl = footerElRef.current;
+    // A relative footer is pushed off-screen at the peek detent — excluded
+    const footerEl = absoluteFooterRef.current ? footerElRef.current : null;
     const peekEl = peekElRef.current;
     const contentEl = contentRef.current;
     const livePeekContentHeight = peekEl && contentEl ? measurePeekContentHeight(peekEl, contentEl) : inputs.peekContentHeight;
@@ -297,10 +439,12 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     }
     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
@@ -387,7 +531,46 @@ 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
@@ -400,7 +583,7 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
         realtime: true
       }
     });
-  }, [interpolateFromPosition]);
+  }, [interpolateFromPosition, updateSizedLayoutHeight]);
 
   // Fire onMount once after first render. React-mount is the earliest point
   // the component is ready for imperative calls, matching the native
@@ -532,7 +715,6 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Vaul's `onDrag` fires once per pointermove while dragging; the first tick
   // after an idle gap marks the drag boundary, so track it via a ref.
-  const isDraggingRef = useRef(false);
   const handleDrag = useCallback(() => {
     if (!isDraggingRef.current) {
       isDraggingRef.current = true;
@@ -544,9 +726,12 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       nativeEvent: computeDetentInfo(true)
     });
   }, [computeDetentInfo]);
-  const handleRelease = useCallback(() => {
+  const handleRelease = useCallback((_event, open) => {
     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)
     });
@@ -737,6 +922,11 @@ 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
@@ -762,11 +952,16 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
     borderTopRightRadius: effectiveCornerRadius,
     backgroundColor: backgroundColor,
     // Clip children to the rounded top so headers/content with their own
-    // background don't bleed past the corners.
-    overflow: 'hidden',
+    // background don't bleed past the corners. `clip` (not `hidden`): a
+    // hidden box is still a scroll container, so browser focus-reveal (e.g.
+    // tapping a button near the sheet bottom) can scroll-offset the drawer —
+    // shifting content and blocking vaul's shouldDrag walk (scrollTop > 0).
+    overflow: 'clip',
     // Lift content above iOS home indicator / bottom safe area when enabled.
-    paddingBottom: insetAdjustment === 'automatic' ? 'env(safe-area-inset-bottom, 0px)' : 0
-  }), [backgroundColor, effectiveCornerRadius, insetAdjustment]);
+    // A relative footer owns the inset instead (see resolvedFooterStyle); an
+    // absolute footer floats over the content, so the content keeps its lift.
+    paddingBottom: insetAdjustment === 'automatic' && !(footerOwnsInset && !absoluteFooter) ? 'env(safe-area-inset-bottom, 0px)' : 0
+  }), [backgroundColor, effectiveCornerRadius, insetAdjustment, footerOwnsInset, absoluteFooter]);
   const defaultGrabberColor = colorScheme === 'dark' ? DEFAULT_GRABBER_COLOR_DARK : DEFAULT_GRABBER_COLOR_LIGHT;
   const grabberHeight = grabberOptions?.height ?? DEFAULT_GRABBER_HEIGHT;
 
@@ -867,6 +1062,10 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
       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,
       activeSnapPoint: activeSnapPoint,
       setActiveSnapPoint: handleSetActiveSnapPoint,
       ...snapPointsProps,
@@ -878,11 +1077,11 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
           ref: drawerContentRef,
           style: mergedContentStyle,
           onPointerDownOutside: handlePointerDownOutside,
-          detachedSiblings: footer ? /*#__PURE__*/_jsx("div", {
+          detachedSiblings: footer && absoluteFooter ? /*#__PURE__*/_jsx("div", {
             style: footerFloatStyle,
             children: /*#__PURE__*/_jsx(View, {
               ref: footerElRef,
-              style: footerStyle,
+              style: resolvedFooterStyle,
               onLayout: handleFooterLayout,
               children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
             })
@@ -892,39 +1091,52 @@ const TrueSheetComponent = /*#__PURE__*/forwardRef((props, ref) => {
             children: accessibilityOptions?.paneTitle ?? 'Sheet'
           }), grabber && /*#__PURE__*/_jsx(Drawer.Handle, {
             style: handleStyle
-          }), scrollable ?
+          }), 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 the scroll container's flex:1 to fill.
+          // definite height for flex layouts to fill — mirrors native, where
+          // the container is sized to the sheet's visible height per detent.
           _jsxs("div", {
-            style: scrollableLayoutStyle,
+            ref: sizedLayoutRef,
+            style: sizedLayoutStyle,
+            "data-vaul-scroll-locked": isScrollLocked ? '' : undefined,
             children: [header && /*#__PURE__*/_jsx(View, {
               ref: headerElRef,
-              style: headerStyle,
+              style: resolvedHeaderStyle,
               onLayout: handleHeaderLayout,
               children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
-            }), /*#__PURE__*/_jsx("div", {
-              style: scrollableContainerStyle,
-              "data-vaul-scroll-locked": isScrollLocked ? '' : undefined,
-              children: /*#__PURE__*/_jsx(View, {
-                ref: contentRef,
-                style: style,
-                children: children
-              })
+            }), /*#__PURE__*/_jsx(View, {
+              ref: contentRef,
+              style: hasAutoDetent && hasBoundedScrollable ? [contentFillStyle, style] : style,
+              children: children
+            }), footer && !absoluteFooter && /*#__PURE__*/_jsx(View, {
+              ref: footerElRef,
+              style: [relativeFooterStyle, resolvedFooterStyle],
+              onLayout: handleFooterLayout,
+              children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
             })]
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
+          }) :
+          /*#__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: headerStyle,
+              style: resolvedHeaderStyle,
               onLayout: handleHeaderLayout,
               children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
             }), /*#__PURE__*/_jsx(View, {
               ref: contentRef,
               style: style,
               children: children
+            }), footer && !absoluteFooter && /*#__PURE__*/_jsx(View, {
+              ref: footerElRef,
+              style: resolvedFooterStyle,
+              onLayout: handleFooterLayout,
+              children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
             })]
           })]
         })]
@@ -937,21 +1149,33 @@ const overlayStyle = {
   inset: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.5)'
 };
-const scrollableLayoutStyle = {
+
+// Pinned to the sheet's bottom edge — takes up layout space below the content
+const relativeFooterStyle = {
+  marginTop: 'auto'
+};
+
+// Floats over the content so it doesn't take up layout space
+const absoluteHeaderStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1
+};
+const SIZED_LAYOUT_HEIGHT = 'calc(100% - var(--snap-point-height, 0px))';
+const sizedLayoutStyle = {
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
-  height: 'calc(100% - var(--snap-point-height, 0px))',
+  height: SIZED_LAYOUT_HEIGHT,
   display: 'flex',
   flexDirection: 'column'
 };
-const scrollableContainerStyle = {
+const contentFillStyle = {
   flex: 1,
-  minHeight: 0,
-  overflowY: 'auto',
-  overscrollBehavior: 'contain',
-  touchAction: 'pan-y'
+  minHeight: 0
 };
 const visuallyHiddenStyle = {
   position: 'absolute',