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

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`,
     });
   }