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

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,
@@ -78,8 +82,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,
@@ -291,13 +295,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,6 +305,32 @@ 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';
@@ -354,10 +380,15 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const [hasBoundedScrollable, setHasBoundedScrollable] = useState(false);
   const [scrollableAutoHeight, setScrollableAutoHeight] = useState(0);
   const detectedScrollerRef = useRef<HTMLElement | null>(null);
+  // Bottom padding applied to the plugged scrollable for an absolute footer
+  // (see the footer inset effect below)
+  const footerInsetRef = useRef(0);
 
   // Natural content height (header + content + footer, with a detected
   // scrollable's viewport replaced by its content size) — the height the
-  // content wants regardless of the sheet's bounds.
+  // content wants regardless of the sheet's bounds. An absolute footer's inset
+  // on the scrollable counts like a relative footer's height, so the content
+  // ends above the footer (mirrors native's auto detent).
   const measureNaturalHeight = useCallback(() => {
     const contentEl = getDOMElement(contentRef.current);
     if (!contentEl || !contentEl.isConnected) return 0;
@@ -368,7 +399,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     const scroller = detectedScrollerRef.current;
     const scrollContent = scroller?.firstElementChild;
     if (scroller?.isConnected && scrollContent instanceof HTMLElement) {
-      height += scrollContent.offsetHeight - scroller.clientHeight;
+      height += scrollContent.offsetHeight - scroller.clientHeight + footerInsetRef.current;
     }
     return Math.max(0, height);
   }, []);
@@ -731,6 +762,99 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     [interpolateFromPosition, updateSizedLayoutHeight]
   );
 
+  // Web mirror of native's footer inset (`contentInsetAdjustment`
+  // 'automatic' | 'footer'): pad the plugged scrollable by how much the
+  // absolute footer covers it. Measured from layout offsets (not client rects)
+  // so in-flight transforms don't skew it — the footer's bottom sits at the
+  // visible bottom of the layout container, so only a scroller reaching that
+  // edge gets an inset, and a safe-area lift (or a short scroller) shrinks it.
+  // Padding on the scroll container extends its scrollable overflow, like a
+  // native content inset.
+  const insetBehavior = scrollableOptions?.contentInsetAdjustment ?? 'automatic';
+  const footerInsetAdjustment =
+    Boolean(footer) &&
+    absoluteFooter &&
+    (insetBehavior === 'automatic' || insetBehavior === 'footer');
+
+  useEffect(() => {
+    if (!isOpen || !footerInsetAdjustment || !scrollableRef) return undefined;
+
+    let canceled = false;
+    let rafId = 0;
+    let mutationObserver: MutationObserver | null = null;
+    let resizeObserver: ResizeObserver | null = null;
+    let scroller: HTMLElement | null = null;
+
+    const reset = () => {
+      if (scroller) scroller.style.paddingBottom = '';
+      footerInsetRef.current = 0;
+    };
+
+    const apply = () => {
+      const footerEl = getDOMElement(footerElRef.current);
+      const container = sizedLayoutRef.current ?? drawerContentRef.current;
+      if (!scroller?.isConnected || !footerEl || !container) return;
+
+      // Measure without our own padding so an unbounded scroller (sized by its
+      // content) doesn't grow by the inset and feed back into the overlap.
+      scroller.style.paddingBottom = '';
+      let bottom = scroller.offsetTop + scroller.offsetHeight;
+      let el = scroller.offsetParent as HTMLElement | null;
+      while (el && el !== container) {
+        bottom += el.offsetTop;
+        el = el.offsetParent as HTMLElement | null;
+      }
+      const footerTop = container.offsetHeight - footerEl.offsetHeight;
+      const inset = el ? Math.max(0, bottom - footerTop) : 0;
+      footerInsetRef.current = inset;
+      scroller.style.paddingBottom = inset > 0 ? `${inset}px` : '';
+    };
+
+    // (Re)resolve the plugged scrollable — a conditional remount swaps the node
+    const observe = () => {
+      const resolved = getScrollableElement(scrollableRef.current);
+      const next = resolved?.isConnected ? resolved : null;
+      if (next === scroller && resizeObserver) return;
+
+      reset();
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      scroller = next;
+      if (!scroller) return;
+
+      resizeObserver = new ResizeObserver(apply);
+      resizeObserver.observe(scroller);
+      const footerEl = getDOMElement(footerElRef.current);
+      if (footerEl) resizeObserver.observe(footerEl);
+      const container = sizedLayoutRef.current ?? drawerContentRef.current;
+      if (container) resizeObserver.observe(container);
+      apply();
+    };
+
+    const attach = () => {
+      if (canceled) return;
+      const drawerEl = drawerContentRef.current;
+      if (!drawerEl || !drawerEl.isConnected) {
+        // Radix Presence defers the portal mount; poll until the drawer is live.
+        rafId = window.requestAnimationFrame(attach);
+        return;
+      }
+      observe();
+      mutationObserver = new MutationObserver(observe);
+      mutationObserver.observe(drawerEl, { childList: true, subtree: true });
+    };
+
+    rafId = window.requestAnimationFrame(attach);
+
+    return () => {
+      canceled = true;
+      window.cancelAnimationFrame(rafId);
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
+      reset();
+    };
+  }, [isOpen, footerInsetAdjustment, scrollableRef]);
+
   // Fire onMount once after first render. React-mount is the earliest point
   // the component is ready for imperative calls, matching the native
   // "ready for present" contract. Declared before the present/dismiss effect
@@ -1128,13 +1252,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 +1269,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       footerOwnsInset,
       absoluteFooter,
       scrollableRef,
-      scrollableOptions,
+      insetBehavior,
     ]
   );
 
@@ -1184,7 +1308,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 +1327,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,
   ]);

package/src/TrueSheetPeek.web.tsx

@@ -1,16 +1,15 @@
-import { createContext, type RefObject, useContext, useEffect, useRef } from 'react';
+import { createContext, type RefObject, useContext, useLayoutEffect, useRef } from 'react';
 import { type LayoutChangeEvent, View, type ViewProps } from 'react-native';
 
-import { getDOMElement } from './web/dom';
-
 /**
- * Reports the measured peek content height to the owning TrueSheet.
+ * Registers a peek with the owning TrueSheet so it can measure the peek live.
  * @internal
  */
 export interface TrueSheetPeekContextValue {
   contentRef: RefObject<View | null>;
-  peekRef: RefObject<View | null>;
-  setPeekContentHeight: (height: number) => void;
+  attachPeek: (view: View) => void;
+  detachPeek: (view: View) => void;
+  measurePeek: (view: View) => void;
 }
 
 export const TrueSheetPeekContext = createContext<TrueSheetPeekContextValue | null>(null);
@@ -19,14 +18,19 @@ export const TrueSheetPeekContext = createContext<TrueSheetPeekContextValue | nu
  * Distance from the top of the content view to the bottom of the peek view,
  * so the peek view's offset within the content (padding, views above it)
  * counts toward the peek detent. Both rects live in the drawer's transformed
- * subtree, so an in-flight translate cancels out of the delta.
+ * subtree, so an in-flight translate cancels out of the delta. Rounded so the
+ * sub-pixel noise of a mid-transition measurement doesn't register as a
+ * change — the content re-measures every frame while the snap animates, and
+ * a new value would restart the snap.
  * @internal
  */
 export const measurePeekContentHeight = (
   peekElement: HTMLElement,
   contentElement: HTMLElement
 ): number =>
-  peekElement.getBoundingClientRect().bottom - contentElement.getBoundingClientRect().top;
+  Math.round(
+    peekElement.getBoundingClientRect().bottom - contentElement.getBoundingClientRect().top
+  );
 
 /**
  * Wrapper component that marks its children as the sheet's peek content.
@@ -36,25 +40,23 @@ export const measurePeekContentHeight = (
  */
 export const TrueSheetPeek = ({ onLayout, ...rest }: ViewProps) => {
   const context = useContext(TrueSheetPeekContext);
-  const localRef = useRef<View>(null);
+  const viewRef = useRef<View>(null);
 
-  // Register into the sheet's peek ref so it can measure the peek live
-  // during detent geometry computation (state lags the first willPresent).
-  const viewRef = context?.peekRef ?? localRef;
+  // Attach by instance rather than sharing a ref — during a screen swap the
+  // incoming peek mounts before the outgoing one unmounts, and a shared ref
+  // would be nulled by the outgoing unmount.
+  useLayoutEffect(() => {
+    const view = viewRef.current;
+    if (!context || !view) return;
 
-  useEffect(() => () => context?.setPeekContentHeight(0), [context]);
+    context.attachPeek(view);
+    return () => context.detachPeek(view);
+  }, [context]);
 
   const handleLayout = (event: LayoutChangeEvent) => {
-    if (context) {
-      const peekElement = getDOMElement(viewRef.current);
-      const contentElement = getDOMElement(context.contentRef.current);
-
-      const bottom =
-        peekElement && contentElement
-          ? measurePeekContentHeight(peekElement, contentElement)
-          : event.nativeEvent.layout.height;
-
-      context.setPeekContentHeight(bottom);
+    const view = viewRef.current;
+    if (context && view) {
+      context.measurePeek(view);
     }
 
     onLayout?.(event);

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -35,7 +35,7 @@ type BlurOptionsType = Readonly<{
 type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
 
 type ScrollableOptionsType = Readonly<{
-  contentInsetAdjustmentBehavior?: WithDefault<boolean, true>;
+  contentInsetAdjustment?: WithDefault<'automatic' | 'safe-area' | 'footer' | 'never', 'automatic'>;
   keyboardScrollOffset?: WithDefault<Double, 0>;
   keyboardOffset?: WithDefault<Double, 0>;
   scrollingExpandsSheet?: WithDefault<boolean, true>;
@@ -48,6 +48,7 @@ type FooterOptionsType = Readonly<{
   // the field name, so a second `position` would redefine TrueSheetViewPosition
   footerPosition?: WithDefault<'relative' | 'absolute', 'relative'>;
   keyboardOffset?: WithDefault<Double, 0>;
+  avoidKeyboard?: WithDefault<boolean, true>;
 }>;
 
 type HeaderOptionsType = Readonly<{
@@ -109,14 +110,15 @@ export interface NativeProps extends ViewProps {
     'none'
   >;
 
-  anchor?: WithDefault<'left' | 'center' | 'right', 'center'>;
-  anchorOffset?: WithDefault<Double, 16>;
+  placement?: WithDefault<'automatic' | 'leading' | 'center' | 'trailing', 'automatic'>;
+  placementOffset?: WithDefault<Double, 16>;
   insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>;
 
   // Blur options
   blurOptions?: BlurOptionsType;
 
   // Boolean properties - match defaults from TrueSheet.types.ts
+  glass?: WithDefault<boolean, true>;
   grabber?: WithDefault<boolean, true>;
   grabberOptions?: GrabberOptionsType;
   accessibilityOptions?: AccessibilityOptionsType;

package/src/navigation/expo-router/index.ts

@@ -22,12 +22,15 @@ const sheetRouter: TrueSheetRouterFactory = createTrueSheetRouter(
   StackRouter as StackRouterFactory
 );
 
+// `routes`/`dispatch` are injected by `createProps`, so they are declared as
+// CreateProps (last generic) and excluded from the public navigator props
 const SheetNavigator = unstable_integrateWithRouter<
   TrueSheetNavigationOptions,
   TrueSheetNavigationState<ParamListBase>,
   TrueSheetStandardEventMap,
-  TrueSheetNavigatorContentExtraProps,
-  TrueSheetRouterOptions
+  object,
+  TrueSheetRouterOptions,
+  TrueSheetNavigatorContentExtraProps
 >(trueSheetNavigator, sheetRouter, {
   createProps: ({ state, dispatch }) => ({
     routes: state.routes,
@@ -35,15 +38,9 @@ const SheetNavigator = unstable_integrateWithRouter<
   }),
 });
 
-// Public props: `routes`/`dispatch` are injected by `createProps` (optional here
-// so the navigator type stays comparable), and expo-router intersects the event
-// map with an index signature which breaks precisely typed `screenListeners`
-// callbacks - replace it with the exact map
-type SheetProps = Omit<
-  React.ComponentProps<typeof SheetNavigator>,
-  'screenListeners' | 'routes' | 'dispatch'
-> &
-  Partial<Pick<React.ComponentProps<typeof SheetNavigator>, 'routes' | 'dispatch'>> &
+// expo-router intersects the event map with an index signature which breaks
+// precisely typed `screenListeners` callbacks - replace it with the exact map
+type SheetProps = Omit<React.ComponentProps<typeof SheetNavigator>, 'screenListeners'> &
   Pick<TrueSheetNavigatorProps, 'screenListeners'>;
 
 /**

package/src/navigation/types.ts

@@ -216,6 +216,7 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'dimmedDetentIndex'
   | 'backgroundBlur'
   | 'blurOptions'
+  | 'glass'
   | 'maxContentHeight'
   | 'maxContentWidth'
   | 'presentation'
@@ -229,8 +230,8 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'scrollableRef'
   | 'scrollableOptions'
   | 'insetAdjustment'
-  | 'anchor'
-  | 'anchorOffset'
+  | 'placement'
+  | 'placementOffset'
   | 'elevation'
   | 'detached'
   | 'detachedOffset'

package/src/web/constants.ts

@@ -4,7 +4,7 @@ export const DEFAULT_FORM_SHEET_WIDTH = 580;
 export const DEFAULT_FORM_SHEET_HEIGHT_RATIO = 0.5;
 export const COLOR_SURFACE_CONTAINER_LOW_LIGHT = '#F7F2FA';
 export const COLOR_SURFACE_CONTAINER_LOW_DARK = '#1D1B20';
-export const DEFAULT_ANCHOR_OFFSET = 16;
+export const DEFAULT_PLACEMENT_OFFSET = 16;
 export const DEFAULT_DETACHED_OFFSET = 16;
 export const DEFAULT_GRABBER_COLOR_LIGHT = 'rgba(0, 0, 0, 0.3)';
 export const DEFAULT_GRABBER_COLOR_DARK = 'rgba(255, 255, 255, 0.3)';