@lodev09/react-native-true-sheet 3.11.0-beta.1 → 3.11.0-beta.10

package/src/TrueSheet.web.tsx

@@ -76,8 +76,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     footer,
     footerStyle,
     scrollable = false,
-    scrollableOptions,
-    pageSizing = true,
+    presentation = 'page',
     detached = false,
     detachedOffset = DEFAULT_DETACHED_OFFSET,
     elevation = 4,
@@ -116,10 +115,11 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   const isLandscapeOrTablet = windowWidth >= 600 || windowWidth > windowHeight;
+  const isFormSheet = isLandscapeOrTablet && presentation === 'form';
 
-  // pageSizing=false implies a floating/detached sheet on web — mirrors iOS
+  // presentation='form' implies a floating/detached sheet on web — mirrors iOS
   // form-sheet semantics where the sheet is never edge-attached.
-  const effectiveDetached = !pageSizing || detached;
+  const effectiveDetached = presentation === 'form' || detached;
 
   const colorScheme = useColorScheme();
   const backgroundColor =
@@ -171,6 +171,17 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     // in another screen's tree when navigating) should not close the drawer.
     if (portalContainer && !portalContainer.contains(target)) {
       e.preventDefault();
+      return;
+    }
+    // The footer is rendered via vaul's `detachedSiblings` as a sibling of
+    // Drawer.Content inside [data-vaul-detached-wrapper], so Radix treats
+    // clicks on it as "outside" the content. Don't dismiss for clicks that
+    // landed inside the wrapper.
+    if (target instanceof Element) {
+      const wrapper = drawerContentRef.current?.closest('[data-vaul-detached-wrapper]');
+      if (wrapper && wrapper.contains(target)) {
+        e.preventDefault();
+      }
     }
   };
 
@@ -370,8 +381,15 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
     const present = !wasOpen && isOpen;
     if (present) {
+      // Pair willFocus with willPresent on initial present — mirrors native
+      // iOS where viewWillAppear dispatches both. The descendant-stack focus
+      // effect handles subsequent gained/lost transitions.
       onWillPresentRef.current?.({ nativeEvent: computeDetentInfo() } as WillPresentEvent);
+      onWillFocusRef.current?.({ nativeEvent: null } as WillFocusEvent);
     } else if (wasOpen && !isOpen) {
+      // Pair willBlur with willDismiss on dismiss — mirrors native iOS
+      // emitWillDismissEvents (blur fires before dismiss).
+      onWillBlurRef.current?.({ nativeEvent: null } as WillBlurEvent);
       onWillDismissRef.current?.({ nativeEvent: null } as WillDismissEvent);
     } else {
       return undefined;
@@ -380,7 +398,9 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     const fireDone = () => {
       if (present) {
         onDidPresentRef.current?.({ nativeEvent: computeDetentInfo() } as DidPresentEvent);
+        onDidFocusRef.current?.({ nativeEvent: null } as DidFocusEvent);
       } else {
+        onDidBlurRef.current?.({ nativeEvent: null } as DidBlurEvent);
         onDidDismissRef.current?.({ nativeEvent: null } as DidDismissEvent);
       }
     };
@@ -463,7 +483,8 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const { isNested, dismissAbove, descendants } = useSheetStack(
     methodsRef,
     drawerContentRef,
-    isOpen
+    isOpen,
+    isFormSheet
   );
   dismissAboveRef.current = dismissAbove;
 
@@ -473,28 +494,97 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   useEffect(() => {
     const parent = drawerContentRef.current;
     if (!parent) return;
+    // Skip while dismissing: this sheet's stack pop changes `descendants`,
+    // which would re-fire the effect and write `wrapper.style.transition =
+    // 'clip-path …'`, clobbering vaul's just-written `'transform …'` for the
+    // dismiss animation. Vaul fully owns this sheet's transitions on the way
+    // out — nothing to align with anymore.
+    if (!isOpen) return;
+    const parentWrapper = parent.closest<HTMLElement>('[data-vaul-detached-wrapper]');
 
     const transition = `transform ${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)';
+
+    // Animate clip-path on the wrapper. Dedupes via DOM read so repeat ticks
+    // (mutation observer) skip identical writes. Seeds CLIP_NONE before the
+    // first inset() so the browser interpolates between two inset() shapes —
+    // `none → inset()` interpolates inconsistently.
+    const setClip = (next: string) => {
+      if (!parentWrapper) return;
+      const current = parentWrapper.style.clipPath;
+      if (current === next) return;
+      if (next === CLIP_NONE && !current) return;
+      if (!current) {
+        parentWrapper.style.transition = '';
+        parentWrapper.style.clipPath = CLIP_NONE;
+        // eslint-disable-next-line no-void
+        void parentWrapper.offsetHeight;
+      }
+      parentWrapper.style.transition = wrapperTransition;
+      parentWrapper.style.clipPath = next;
+    };
 
     if (descendants.length === 0) {
       parent.style.transition = transition;
       parent.style.transform = '';
+      setClip(CLIP_NONE);
       return;
     }
 
+    // Track only the immediate child's snap point. Walking deeper descendants
+    // would push this sheet further when a grandchild opens, even when our
+    // own child didn't move (e.g., child skipped its cascade for a page
+    // grandchild) — leaving a visible gap between this sheet and its child.
     const computeTargetY = () => {
       const parentSnap = parseFloat(parent.style.getPropertyValue('--snap-point-height')) || 0;
-      let targetY = parentSnap;
-      for (const d of descendants) {
-        const node = d.nodeRef.current;
-        if (!node) continue;
-        const snap = parseFloat(node.style.getPropertyValue('--snap-point-height')) || 0;
-        if (snap > targetY) targetY = snap;
+      const node = descendants[0]?.nodeRef.current;
+      if (!node) return parentSnap;
+      const childSnap = parseFloat(node.style.getPropertyValue('--snap-point-height')) || 0;
+      return Math.max(parentSnap, childSnap);
+    };
+
+    // When a form-sheet parent has a form-sheet descendant, clip the parent to
+    // the child card's viewport box so it doesn't peek above/around. Only
+    // applies when this sheet is itself form — a page parent should remain
+    // visible behind/around a floating form child. Geometry comes from the
+    // child's inline styles (not getBoundingClientRect) to read the at-rest
+    // box, unskewed by vaul's slide-in.
+    const applyFormClip = () => {
+      const form = isFormSheet ? descendants.find((d) => d.isFormSheetRef.current) : undefined;
+      if (!form) {
+        setClip(CLIP_NONE);
+        return;
       }
-      return targetY;
+      const childDrawer = form.nodeRef.current;
+      const childWrapper = childDrawer?.closest<HTMLElement>('[data-vaul-detached-wrapper]');
+      if (!parentWrapper || !childDrawer || !childWrapper) return;
+      const snapY = parseFloat(childDrawer.style.getPropertyValue('--snap-point-height')) || 0;
+      const childBottomGap = parseFloat(childWrapper.style.bottom) || 0;
+      const childMaxW = parseFloat(childWrapper.style.maxWidth) || window.innerWidth;
+      const formLeft = (window.innerWidth - childMaxW) / 2;
+      const formRight = (window.innerWidth + childMaxW) / 2;
+      const formBottom = window.innerHeight - childBottomGap;
+      const rect = parentWrapper.getBoundingClientRect();
+      const top = Math.max(0, snapY - rect.top);
+      const left = Math.max(0, formLeft - rect.left);
+      const right = Math.max(0, rect.right - formRight);
+      const bottom = Math.max(0, rect.bottom - formBottom);
+      const radius = cornerRadius ?? DEFAULT_CORNER_RADIUS;
+      setClip(`inset(${top}px ${right}px ${bottom}px ${left}px round ${radius}px)`);
     };
 
     const apply = () => {
+      applyFormClip();
+      // Mirror iOS: a page-sheet child fully covers a form-sheet parent, so the
+      // cascade push-down has no visible effect — and would briefly peek above
+      // the page during the present animation. Leave the parent put.
+      const child = descendants[0];
+      if (isFormSheet && child && !child.isFormSheetRef.current) {
+        parent.style.transition = transition;
+        parent.style.transform = '';
+        return;
+      }
       const targetY = computeTargetY();
       const match = parent.style.transform.match(/translate3d\([^,]*,\s*(-?\d*\.?\d+)px/);
       const currentY = match ? parseFloat(match[1]!) : 0;
@@ -514,7 +604,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       cancelAnimationFrame(raf);
       observer.disconnect();
     };
-  }, [descendants, activeSnapPoint]);
+  }, [descendants, activeSnapPoint, cornerRadius, isFormSheet, isOpen]);
 
   // Focus/blur events fire when a descendant sheet appears on top of this one
   // (blur) or when all descendants are dismissed (focus). will-events fire
@@ -583,8 +673,17 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   // Shadow cast upward from the sheet's top edge toward the background. Matches
   // Android's `elevation` semantics roughly — the sheet "lifts" off whatever is
   // behind it. Scales linearly so higher elevation reads as more separation.
-  const boxShadow =
-    elevation > 0 ? `0 ${-elevation}px ${elevation * 3}px rgba(0, 0, 0, 0.15)` : undefined;
+  // Applied to the vaul wrapper (not the drawer) as `filter: drop-shadow`: the
+  // wrapper clips the drawer (overflow: hidden + contain: paint), which would
+  // cut off `box-shadow` on the drawer at the wrapper edges — visible in
+  // detached mode (bottom blur clipped in the floating gap) and when the
+  // wrapper is narrowed by maxWidth/anchor margins (lateral blur clipped at
+  // wrapper edges). drop-shadow on the wrapper follows the post-clip silhouette
+  // and isn't clipped by the wrapper itself.
+  const dropShadow =
+    elevation > 0
+      ? `drop-shadow(0 ${-elevation}px ${elevation * 3}px rgba(0, 0, 0, 0.15))`
+      : undefined;
 
   const mergedContentStyle = useMemo<React.CSSProperties>(
     () => ({
@@ -598,11 +697,13 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       borderTopLeftRadius: effectiveCornerRadius,
       borderTopRightRadius: effectiveCornerRadius,
       backgroundColor: backgroundColor as string,
-      boxShadow,
+      // Clip children to the rounded top so headers/content with their own
+      // background don't bleed past the corners.
+      overflow: 'hidden',
       // Lift content above iOS home indicator / bottom safe area when enabled.
       paddingBottom: insetAdjustment === 'automatic' ? 'env(safe-area-inset-bottom, 0px)' : 0,
     }),
-    [backgroundColor, effectiveCornerRadius, boxShadow, insetAdjustment]
+    [backgroundColor, effectiveCornerRadius, insetAdjustment]
   );
 
   const defaultGrabberColor =
@@ -626,36 +727,68 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     []
   );
 
-  // Form-sheet style (iOS pageSizing=false): centered floating card with a
-  // default width and a height capped to a fraction of the window. We reuse
-  // the existing detached mechanic so drag/snap math stays correct — the
-  // wrapper is bottom-attached with a computed offset that centers it
-  // vertically.
-  const isFormSheet = isLandscapeOrTablet && maxContentWidth == null && !pageSizing;
-
-  const effectiveMaxContentHeight =
-    maxContentHeight ?? (isFormSheet ? windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO : undefined);
-
-  const effectiveDetachedOffset = isFormSheet
-    ? Math.max(0, (windowHeight - (effectiveMaxContentHeight ?? 0)) / 2)
-    : detachedOffset;
+  // Form-sheet style (presentation='form'): centered floating card with a
+  // default width and a height fit to content. We reuse the existing detached
+  // mechanic so drag/snap math stays correct — the wrapper is bottom-attached
+  // with a computed offset that centers it vertically. `presentation` is
+  // absolute: when 'form', `maxContentWidth` is ignored and the card uses
+  // DEFAULT_FORM_SHEET_WIDTH.
+
+  // 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;
+    const min = windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO;
+    const max = Math.max(min, windowHeight - 2 * detachedOffset);
+    if (measuredContentHeight <= 0) return min;
+    return Math.max(min, Math.min(measuredContentHeight, max));
+  }, [maxContentHeight, isFormSheet, windowHeight, detachedOffset, measuredContentHeight]);
+
+  // Center the form sheet using the actual visible drawer height. Vaul
+  // auto-sizes to content (capped by `maxContentHeight`), so when content is
+  // shorter than `effectiveMaxContentHeight`'s min-clamped floor, using that
+  // for the offset would push a small sheet below the viewport center.
+  const effectiveDetachedOffset = useMemo(() => {
+    if (!isFormSheet) return detachedOffset;
+    const max = Math.max(0, windowHeight - 2 * detachedOffset);
+    const visibleHeight =
+      measuredContentHeight > 0
+        ? Math.min(measuredContentHeight, max)
+        : (effectiveMaxContentHeight ?? 0);
+    return Math.max(0, (windowHeight - visibleHeight) / 2);
+  }, [isFormSheet, windowHeight, detachedOffset, measuredContentHeight, effectiveMaxContentHeight]);
 
   // The wrapper holds all horizontal sizing/anchoring so its rounded-bottom
   // clip (when detached) aligns with the drawer's horizontal bounds on
   // desktop — otherwise its corners sit at the far viewport edges.
-  // Mirrors iOS setupSheetSizing: maxContentWidth wins (forces pageSizing
-  // off). pageSizing on → constrain to readable width (page-sheet);
-  // pageSizing off with no maxContentWidth → form-sheet width.
+  // - presentation='form' → DEFAULT_FORM_SHEET_WIDTH on tablet/landscape;
+  //   `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
   // the floating card breathes from the viewport sides.
   const wrapperStyle = useMemo<React.CSSProperties | undefined>(() => {
+    // Mobile portrait ignores width sizing entirely (matches iOS/Android:
+    // both apply `maxContentWidth` only when not on a portrait phone).
+    // `detached` + `detachedOffset` are still respected via the wrapper.
     const maxWidth = isLandscapeOrTablet
-      ? isFormSheet
+      ? presentation === 'form'
         ? DEFAULT_FORM_SHEET_WIDTH
-        : (maxContentWidth ?? (pageSizing ? DEFAULT_MAX_WIDTH : undefined))
+        : (maxContentWidth ?? DEFAULT_MAX_WIDTH)
       : undefined;
 
-    if (maxWidth == null && !effectiveDetached) return undefined;
+    const needsMargins = maxWidth != null || effectiveDetached;
+    if (!needsMargins && !dropShadow) return undefined;
+
+    const next: React.CSSProperties = {};
+    if (dropShadow) next.filter = dropShadow;
+    if (!needsMargins) return next;
 
     let marginLeft: number | string;
     let marginRight: number | string;
@@ -670,29 +803,40 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       marginRight = anchor === 'right' ? anchorOffset : 'auto';
     }
 
-    return {
-      ...(maxWidth != null && { maxWidth }),
-      marginLeft,
-      marginRight,
-    };
+    if (maxWidth != null) next.maxWidth = maxWidth;
+    next.marginLeft = marginLeft;
+    next.marginRight = marginRight;
+    return next;
   }, [
     isLandscapeOrTablet,
     isFormSheet,
     maxContentWidth,
-    pageSizing,
+    presentation,
     anchor,
     anchorOffset,
     effectiveDetached,
+    dropShadow,
   ]);
 
+  // Absolute-position the grabber so it overlays the content top-edge
+  // instead of consuming flow height — mirrors native iOS/Android, where
+  // the grabber sits in the rounded corner zone above the content and
+  // doesn't push the header down or inflate the 'auto' detent measurement.
   const handleStyle = useMemo<React.CSSProperties>(
     () => ({
+      position: 'absolute',
+      top: grabberOptions?.topMargin ?? DEFAULT_GRABBER_TOP_MARGIN,
+      left: '50%',
+      transform: 'translateX(-50%)',
       height: grabberHeight,
       width: grabberOptions?.width ?? DEFAULT_GRABBER_WIDTH,
       borderRadius: grabberOptions?.cornerRadius ?? grabberHeight / 2,
       backgroundColor: (grabberOptions?.color ?? defaultGrabberColor) as string,
       opacity: 1,
-      marginTop: grabberOptions?.topMargin ?? DEFAULT_GRABBER_TOP_MARGIN,
+      // Above absolute-positioned headers (which often use zIndex:1 to overlay
+      // scroll content) so the grabber stays draggable — critical when
+      // `handleOnly` mode means only the grabber can drag the sheet.
+      zIndex: 2,
     }),
     [grabberOptions, grabberHeight, defaultGrabberColor]
   );
@@ -706,7 +850,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       onRelease={handleRelease}
       dismissible={dismissible}
       draggable={draggable}
-      handleOnly={scrollable && scrollableOptions?.scrollingExpandsSheet === false}
       repositionInputs={false}
       modal={dimmed}
       nested={isNested}
@@ -716,6 +859,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       maxContentHeight={effectiveMaxContentHeight}
       initialAnimated={initialDetentAnimated}
       detachedWrapperStyle={wrapperStyle}
+      onContentHeightChange={setMeasuredContentHeight}
       activeSnapPoint={activeSnapPoint}
       setActiveSnapPoint={handleSetActiveSnapPoint}
       {...snapPointsProps}
@@ -738,17 +882,31 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         >
           <Drawer.Title style={visuallyHiddenStyle}>Sheet</Drawer.Title>
           {grabber && <Drawer.Handle style={handleStyle} />}
-          {header && (
-            <View style={headerStyle}>
-              {isValidElement(header) ? header : createElement(header)}
-            </View>
-          )}
           {scrollable ? (
-            <div style={scrollableContainerStyle}>
-              <View style={style}>{children}</View>
+            // 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.
+            <div style={scrollableLayoutStyle}>
+              {header && (
+                <View style={headerStyle}>
+                  {isValidElement(header) ? header : createElement(header)}
+                </View>
+              )}
+              <div style={scrollableContainerStyle}>
+                <View style={style}>{children}</View>
+              </div>
             </div>
           ) : (
-            <View style={style}>{children}</View>
+            <>
+              {header && (
+                <View style={headerStyle}>
+                  {isValidElement(header) ? header : createElement(header)}
+                </View>
+              )}
+              <View style={style}>{children}</View>
+            </>
           )}
         </Drawer.Content>
       </Drawer.Portal>
@@ -762,6 +920,16 @@ const overlayStyle: React.CSSProperties = {
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
 };
 
+const scrollableLayoutStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 'calc(100% - var(--snap-point-height, 0px))',
+  display: 'flex',
+  flexDirection: 'column',
+};
+
 const scrollableContainerStyle: React.CSSProperties = {
   flex: 1,
   minHeight: 0,

package/src/TrueSheetProvider.web.tsx

@@ -19,6 +19,7 @@ type NodeRef = RefObject<HTMLDivElement | null>;
 interface StackEntry {
   ref: SheetRef;
   nodeRef: NodeRef;
+  isFormSheetRef: RefObject<boolean>;
 }
 
 interface SheetContextValue {
@@ -166,10 +167,18 @@ export function useRegisterSheet(name: string | undefined, ref: SheetRef): void
  * Registers the sheet in the open stack while `isOpen` is true and returns
  * live data used by each sheet to render stacked visuals and dismiss children.
  */
-export function useSheetStack(ref: SheetRef, nodeRef: NodeRef, isOpen: boolean) {
+export function useSheetStack(
+  ref: SheetRef,
+  nodeRef: NodeRef,
+  isOpen: boolean,
+  isFormSheet: boolean
+) {
   const ctx = useContext(SheetContext);
 
-  const entry = useMemo<StackEntry>(() => ({ ref, nodeRef }), [ref, nodeRef]);
+  const isFormSheetRef = useRef(isFormSheet);
+  isFormSheetRef.current = isFormSheet;
+
+  const entry = useMemo<StackEntry>(() => ({ ref, nodeRef, isFormSheetRef }), [ref, nodeRef]);
 
   useEffect(() => {
     if (!ctx || !isOpen) return;

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -101,7 +101,7 @@ export interface NativeProps extends ViewProps {
   initialDetentAnimated?: WithDefault<boolean, true>;
   scrollable?: WithDefault<boolean, false>;
   scrollableOptions?: ScrollableOptionsType;
-  pageSizing?: WithDefault<boolean, true>;
+  presentation?: WithDefault<'page' | 'form', 'page'>;
 
   // Event handlers
   onMount?: DirectEventHandler<null>;

package/src/navigation/types.ts

@@ -136,7 +136,7 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'maxContentHeight'
   | 'maxContentWidth'
   | 'scrollable'
-  | 'pageSizing'
+  | 'presentation'
   | 'header'
   | 'headerStyle'
   | 'footer'

package/src/web/constants.ts

@@ -10,4 +10,4 @@ export const DEFAULT_GRABBER_COLOR_LIGHT = 'rgba(0, 0, 0, 0.3)';
 export const DEFAULT_GRABBER_COLOR_DARK = 'rgba(255, 255, 255, 0.3)';
 export const DEFAULT_GRABBER_WIDTH = 32;
 export const DEFAULT_GRABBER_HEIGHT = 4;
-export const DEFAULT_GRABBER_TOP_MARGIN = 16;
+export const DEFAULT_GRABBER_TOP_MARGIN = 8;