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

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)';

package/src/web/layout.ts

@@ -0,0 +1,196 @@
+/// <reference lib="dom" />
+
+const FOOTER_INSET = '--truesheet-footer-inset';
+
+interface SheetLayoutOptions {
+  drawer: HTMLElement;
+  layout: HTMLElement;
+  getContent: () => HTMLElement | null;
+  getHeader: () => HTMLElement | null;
+  getFooter: () => HTMLElement | null;
+  getScrollable: () => HTMLElement | null;
+  absoluteHeader: boolean;
+  absoluteFooter: boolean;
+  footerInsetAdjustment: boolean;
+  measureContent: boolean;
+  onHeightChange: (height: number) => void;
+}
+
+export function observeSheetLayout({
+  drawer,
+  layout,
+  getContent,
+  getHeader,
+  getFooter,
+  getScrollable,
+  absoluteHeader,
+  absoluteFooter,
+  footerInsetAdjustment,
+  measureContent,
+  onHeightChange,
+}: SheetLayoutOptions) {
+  let frame = 0;
+  let disposed = false;
+  let width = -1;
+  let height = -1;
+  let scroller: HTMLElement | null = null;
+  let originalPadding = '';
+  let insetPadding = '';
+  let appliedInset = 0;
+  const observed = new Set<Element>();
+
+  // This tree has no viewport constraint or injected footer inset. Its resize
+  // observer catches intrinsic changes without observing the live flex layout.
+  const measurement = measureContent ? document.createElement('div') : null;
+  if (measurement) {
+    Object.assign(measurement.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      visibility: 'hidden',
+      pointerEvents: 'none',
+    });
+    measurement.style.setProperty(FOOTER_INSET, '0px');
+    measurement.inert = true;
+    measurement.setAttribute('aria-hidden', 'true');
+    measurement.setAttribute('data-truesheet-measure', '');
+    drawer.appendChild(measurement);
+  }
+
+  const measure = () => {
+    if (!measurement?.isConnected) return;
+    const headerHeight = absoluteHeader ? 0 : (getHeader()?.offsetHeight ?? 0);
+    const footerHeight =
+      !absoluteFooter || (footerInsetAdjustment && scroller) ? (getFooter()?.offsetHeight ?? 0) : 0;
+    const next = measurement.offsetHeight + headerHeight + footerHeight;
+    if (height === next) return;
+    height = next;
+    onHeightChange(next);
+  };
+
+  const updateInset = () => {
+    let inset = 0;
+    const footer = getFooter();
+    if (footerInsetAdjustment && scroller && footer) {
+      let bottom = scroller.offsetTop + scroller.offsetHeight;
+      let parent = scroller.offsetParent;
+      while (parent instanceof HTMLElement && parent !== layout) {
+        bottom += parent.offsetTop;
+        parent = parent.offsetParent;
+      }
+      if (parent === layout) {
+        inset = Math.min(
+          footer.offsetHeight,
+          Math.max(0, bottom - (layout.clientHeight - footer.offsetHeight))
+        );
+      }
+    }
+    if (inset === appliedInset) return;
+    appliedInset = inset;
+    layout.style.setProperty(FOOTER_INSET, `${inset}px`);
+  };
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (measurement && width !== layout.clientWidth) {
+      width = layout.clientWidth;
+      measurement.style.width = `${width}px`;
+    }
+    updateInset();
+    measure();
+  });
+  const measurementObserver = new ResizeObserver(measure);
+  if (measurement) measurementObserver.observe(measurement);
+
+  const restorePadding = () => {
+    if (scroller && scroller.style.paddingBottom === insetPadding) {
+      scroller.style.paddingBottom = originalPadding;
+    }
+  };
+
+  const sync = () => {
+    if (disposed) return;
+    const content = getContent();
+    const nextScroller = getScrollable();
+    if (nextScroller !== scroller) {
+      restorePadding();
+      scroller = nextScroller;
+      insetPadding = '';
+    }
+    if (
+      footerInsetAdjustment &&
+      scroller &&
+      (!insetPadding || scroller.style.paddingBottom !== insetPadding)
+    ) {
+      originalPadding = scroller.style.paddingBottom;
+      const base = getComputedStyle(scroller).paddingBottom;
+      insetPadding = `calc(${base} + var(${FOOTER_INSET}, 0px))`;
+      scroller.style.paddingBottom = insetPadding;
+      insetPadding = scroller.style.paddingBottom;
+    }
+
+    const nodes = new Set<Element>([layout]);
+    for (const node of [getHeader(), getFooter(), scroller]) {
+      if (node) nodes.add(node);
+    }
+    for (const node of observed) {
+      if (!nodes.has(node)) {
+        resizeObserver.unobserve(node);
+        observed.delete(node);
+      }
+    }
+    for (const node of nodes) {
+      if (!observed.has(node)) {
+        resizeObserver.observe(node);
+        observed.add(node);
+      }
+    }
+
+    if (measurement && content) {
+      width = layout.clientWidth;
+      measurement.style.width = `${width}px`;
+      measurement.replaceChildren(content.cloneNode(true));
+    }
+    updateInset();
+    measure();
+  };
+
+  const mutationObserver = new MutationObserver((mutations) => {
+    const changed = mutations.some(
+      (mutation) => mutation.target !== layout || mutation.type === 'childList'
+    );
+    if (!changed || frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      sync();
+    });
+  });
+
+  sync();
+  mutationObserver.observe(layout, {
+    childList: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ['style', 'class'],
+    subtree: true,
+  });
+  const footer = getFooter();
+  if (absoluteFooter && footer) {
+    mutationObserver.observe(footer, { childList: true, characterData: true, subtree: true });
+  }
+
+  return {
+    measure,
+    disconnect: () => {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      measurementObserver.disconnect();
+      restorePadding();
+      layout.style.removeProperty(FOOTER_INSET);
+      measurement?.remove();
+    },
+  };
+}

package/src/web/vaul/helpers.ts

@@ -80,6 +80,11 @@ export const isVertical = (direction: DrawerDirection) => {
   }
 };
 
+export const getSnapPointTransform = (direction: DrawerDirection) =>
+  isVertical(direction)
+    ? 'translate3d(0, var(--snap-point-height), 0)'
+    : 'translate3d(var(--snap-point-height), 0, 0)';
+
 export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
   if (!element) {
     return null;

package/src/web/vaul/index.tsx

@@ -20,7 +20,14 @@ import {
   VELOCITY_THRESHOLD,
   WINDOW_TOP_OFFSET,
 } from './constants';
-import { dampenValue, getTranslate, isVertical, reset, set } from './helpers';
+import {
+  dampenValue,
+  getSnapPointTransform,
+  getTranslate,
+  isVertical,
+  reset,
+  set,
+} from './helpers';
 import type { DrawerDirection } from './types';
 import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
@@ -1301,11 +1308,17 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       // same detent). Without this, position goes stale mid-animation because
       // the drawer's `transitionrun` never fires.
       const onTransitionRun = (e: TransitionEvent) => {
-        if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
+        if (
+          (e.target === drawer || e.target === wrapper) &&
+          (e.propertyName === 'transform' || e.propertyName === '--snap-point-height')
+        )
           state.start();
       };
       const onTransitionDone = (e: TransitionEvent) => {
-        if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
+        if (
+          (e.target === drawer || e.target === wrapper) &&
+          (e.propertyName === 'transform' || e.propertyName === '--snap-point-height')
+        )
           state.stop();
       };
       const onAnimationStart = (e: AnimationEvent) => {
@@ -1412,6 +1425,9 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       wasOpenRef.current = isOpen;
     }, [isOpen, detached, drawerRef]);
 
+    // Subsequent snap writes belong to useSnapPoints. A React style update on
+    // release would overwrite the live drag value before its transition starts.
+    const initialSnapPointOffset = React.useRef(snapPointsOffset?.[activeSnapPointIndex ?? 0] ?? 0);
     const contentNode = (
       <DialogPrimitive.Content
         data-vaul-drawer-direction={direction}
@@ -1426,7 +1442,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         style={
           snapPointsOffset && snapPointsOffset.length > 0
             ? ({
-                '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
+                '--snap-point-height': `${initialSnapPointOffset.current}px`,
+                'transform': getSnapPointTransform(direction),
                 ...style,
                 'pointerEvents': 'auto',
               } as React.CSSProperties)

package/src/web/vaul/use-snap-points.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck — vendored upstream, incompatible with noUncheckedIndexedAccess
 import React from 'react';
-import { set, isVertical } from './helpers';
+import { set, isVertical, getSnapPointTransform } from './helpers';
 import { DEFAULT_PEEK_HEIGHT, TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
 import { useControllableState } from './use-controllable-state';
 import type { DrawerDirection } from './types';
@@ -198,16 +198,12 @@ export function useSnapPoints({
 
       const animateThisSnap = hasSnappedRef.current || initialAnimated;
       hasSnappedRef.current = true;
-      // `--snap-point-height` transitions alongside `transform` (registered via
-      // @property) so layouts derived from it (e.g. the scrollable fill) resize
-      // in sync with the drawer's slide instead of jumping to the target.
+      // One animated value drives both the translation and the visible height.
       set(drawerRef.current, {
         'transition': animateThisSnap
-          ? `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')}), --snap-point-height ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+          ? `--snap-point-height ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
           : 'none',
-        'transform': isVertical(direction)
-          ? `translate3d(0, ${dimension}px, 0)`
-          : `translate3d(${dimension}px, 0, 0)`,
+        'transform': getSnapPointTransform(direction),
         '--snap-point-height': `${dimension}px`,
       });
 
@@ -364,9 +360,7 @@ export function useSnapPoints({
     if ((direction === 'bottom' || direction === 'right') && newValue > snapPointsOffset[0]) {
       const excess = newValue - snapPointsOffset[0];
       set(drawerRef.current, {
-        'transform': isVertical(direction)
-          ? `translate3d(0, ${snapPointsOffset[0]}px, 0)`
-          : `translate3d(${snapPointsOffset[0]}px, 0, 0)`,
+        'transform': getSnapPointTransform(direction),
         '--snap-point-height': `${snapPointsOffset[0]}px`,
       });
       setDetachedWrapperTransform(excess, false);
@@ -378,9 +372,7 @@ export function useSnapPoints({
     // derived from it (e.g. the scrollable fill) resize with the drawer
     // instead of staying cut off at the last detent's visible height.
     set(drawerRef.current, {
-      'transform': isVertical(direction)
-        ? `translate3d(0, ${newValue}px, 0)`
-        : `translate3d(${newValue}px, 0, 0)`,
+      'transform': getSnapPointTransform(direction),
       '--snap-point-height': `${newValue}px`,
     });
   }