@lodev09/react-native-true-sheet 4.0.0-beta.23 → 4.0.0-beta.25

package/src/web/keyboard.ts

@@ -0,0 +1,79 @@
+/// <reference lib="dom" />
+import { useEffect, useState } from 'react';
+
+import { FOOTER_INSET } from './layout';
+import { getScrollParent } from './vaul/use-prevent-scroll';
+import type { KeyboardViewport } from './vaul/types';
+
+// Subpixel tolerance between the visual and layout viewport heights
+const VIEWPORT_EPSILON = 1;
+
+const readKeyboardViewport = (): KeyboardViewport | undefined => {
+  const vv = window.visualViewport;
+  if (!vv) return undefined;
+  const layoutHeight = document.documentElement.clientHeight;
+  // Pinch-zoom shrinks the visual viewport too — scaling it back out leaves
+  // only what the keyboard covers.
+  if (vv.height * vv.scale >= layoutHeight - VIEWPORT_EPSILON) return undefined;
+  return { top: vv.offsetTop, height: vv.height, layoutHeight };
+};
+
+const isSameViewport = (a: KeyboardViewport | undefined, b: KeyboardViewport | undefined) =>
+  a === b ||
+  (a !== undefined &&
+    b !== undefined &&
+    a.top === b.top &&
+    a.height === b.height &&
+    a.layoutHeight === b.layoutHeight);
+
+/**
+ * Tracks the visual viewport while a soft keyboard shrinks it. iOS Safari and
+ * Chrome (default `interactive-widget`) keep the layout viewport — and every
+ * fixed element — full height under the keyboard, so the sheet has to be laid
+ * out against the visual viewport instead.
+ */
+export function useKeyboardViewport(enabled: boolean): KeyboardViewport | undefined {
+  const [viewport, setViewport] = useState<KeyboardViewport | undefined>();
+
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!enabled || !vv) {
+      setViewport(undefined);
+      return undefined;
+    }
+
+    const update = () => {
+      const next = readKeyboardViewport();
+      setViewport((current) => (isSameViewport(current, next) ? current : next));
+    };
+
+    update();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [enabled]);
+
+  return viewport;
+}
+
+/**
+ * Scrolls the focused field in `container` back above its scroll parent's
+ * bottom edge, clearing a floating footer. The browser only reveals it on
+ * focus — before the sheet fits above the keyboard.
+ */
+export function revealFocusedElement(container: HTMLElement) {
+  const focused = document.activeElement;
+  if (!(focused instanceof HTMLElement) || !container.contains(focused)) return;
+  const scroller = getScrollParent(focused);
+  if (!container.contains(scroller)) return;
+  const footerInset = parseFloat(getComputedStyle(scroller).getPropertyValue(FOOTER_INSET)) || 0;
+  const overflow =
+    focused.getBoundingClientRect().bottom -
+    (scroller.getBoundingClientRect().bottom - footerInset);
+  if (overflow > 0) scroller.scrollTop += overflow;
+}

package/src/web/layout.ts

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 
-const FOOTER_INSET = '--truesheet-footer-inset';
+export const FOOTER_INSET = '--truesheet-footer-inset';
 
 interface SheetLayoutOptions {
   drawer: HTMLElement;

package/src/web/vaul/context.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DrawerDirection } from './types';
+import type { DrawerDirection, KeyboardViewport } from './types';
 
 export interface DragEvent {
   target: EventTarget;
@@ -54,6 +54,7 @@ interface DrawerContextValue {
   detachedOffset: number;
   detachedRadius: number;
   detachedWrapperStyle?: React.CSSProperties;
+  keyboardViewport?: KeyboardViewport;
 }
 
 export const DrawerContext = React.createContext<DrawerContextValue>({

package/src/web/vaul/index.tsx

@@ -28,7 +28,7 @@ import {
   reset,
   set,
 } from './helpers';
-import type { DrawerDirection } from './types';
+import type { DrawerDirection, KeyboardViewport } from './types';
 import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
 import { usePositionFixed } from './use-position-fixed';
@@ -224,6 +224,12 @@ export type DialogProps = {
    * from natural flow.
    */
   contentHeight?: number;
+  /**
+   * Lays the drawer out in the visual viewport above a soft keyboard. The
+   * wrapper and snap offsets fit the visible area, while fractional snap
+   * points keep scaling against the full layout height.
+   */
+  keyboardViewport?: KeyboardViewport;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -269,6 +275,7 @@ export function Root({
   initialAnimated = true,
   onContentHeightChange,
   contentHeight: contentHeightProp,
+  keyboardViewport,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -352,6 +359,7 @@ export function Root({
     maxContentHeight,
     peekHeight,
     initialAnimated,
+    keyboardViewport,
   });
 
   usePreventScroll({
@@ -1049,6 +1057,7 @@ export function Root({
           detachedOffset: detached ? detachedOffset : 0,
           detachedRadius: detached ? detachedRadius : 0,
           detachedWrapperStyle,
+          keyboardViewport,
         }}
       >
         {children}
@@ -1191,6 +1200,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       detachedOffset,
       detachedRadius,
       detachedWrapperStyle: detachedWrapperStyleProp,
+      keyboardViewport,
     } = useDrawerContext();
     // Always measure the inner wrapper's natural height. The drawer itself may
     // be styled to a fixed viewport height, so we measure an inner wrapper
@@ -1393,14 +1403,19 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
     // with a bottom gap and rounded bottom corners; otherwise it sits flush.
     // Transform/transition are managed imperatively (via drag overshoot and the
     // dismiss effect) so React doesn't skip DOM writes for values it thinks it
-    // already owns.
+    // already owns. Above a soft keyboard the wrapper fits the visual viewport,
+    // which the full-height layout viewport extends behind.
     const wrapperStyle = React.useMemo<React.CSSProperties>(
       () => ({
         position: 'fixed',
-        top: 0,
         left: 0,
         right: 0,
-        bottom: detached ? detachedOffset : 0,
+        ...(keyboardViewport
+          ? {
+              top: keyboardViewport.top,
+              height: Math.max(0, keyboardViewport.height - (detached ? detachedOffset : 0)),
+            }
+          : { top: 0, bottom: detached ? detachedOffset : 0 }),
         overflow: 'hidden',
         contain: 'paint',
         pointerEvents: 'none',
@@ -1408,7 +1423,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         borderBottomRightRadius: detached ? detachedRadius : 0,
         ...detachedWrapperStyleProp,
       }),
-      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp]
+      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp, keyboardViewport]
     );
 
     // Translate the wrapper off-screen on dismiss so the whole card slides out

package/src/web/vaul/types.ts

@@ -5,3 +5,13 @@ export interface SnapPoint {
 }
 
 export type AnyFunction = (...args: any) => any;
+
+/**
+ * The visual viewport while a soft keyboard shrinks it, in layout-viewport px.
+ * `layoutHeight` is the full (keyboard-free) height.
+ */
+export interface KeyboardViewport {
+  top: number;
+  height: number;
+  layoutHeight: number;
+}

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

@@ -9,7 +9,7 @@ import {
   VELOCITY_THRESHOLD,
 } from './constants';
 import { useControllableState } from './use-controllable-state';
-import type { DrawerDirection } from './types';
+import type { DrawerDirection, KeyboardViewport } from './types';
 
 export function useSnapPoints({
   activeSnapPointProp,
@@ -28,6 +28,7 @@ export function useSnapPoints({
   maxContentHeight,
   peekHeight,
   initialAnimated = true,
+  keyboardViewport,
 }: {
   activeSnapPointProp?: number | string | null;
   setActiveSnapPointProp?(snapPoint: number | null | string): void;
@@ -45,6 +46,7 @@ export function useSnapPoints({
   maxContentHeight?: number;
   peekHeight?: number;
   initialAnimated?: boolean;
+  keyboardViewport?: KeyboardViewport;
 }) {
   const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
     prop: activeSnapPointProp,
@@ -98,13 +100,18 @@ export function useSnapPoints({
           height: container.getBoundingClientRect().height,
         }
       : typeof window !== 'undefined'
-        ? { width: window.innerWidth, height: window.innerHeight }
+        ? { width: window.innerWidth, height: keyboardViewport?.height ?? window.innerHeight }
         : { width: 0, height: 0 };
 
     // Shrink the effective vertical area by detachedOffset so snap math
     // reserves a fixed gap at the bottom — the floating card stays offset
     // from the viewport edge through drag, snap and resize.
     const effectiveHeight = Math.max(0, containerSize.height - (detachedOffset || 0));
+    // Above a keyboard, fractional snap points keep their full-height size and
+    // only cap at the visible area — mirrors native, where the sheet rises.
+    const fractionHeight = keyboardViewport
+      ? Math.max(0, keyboardViewport.layoutHeight - (detachedOffset || 0))
+      : effectiveHeight;
 
     return (
       snapPoints?.map((snapPoint) => {
@@ -129,11 +136,11 @@ export function useSnapPoints({
           const rawHeight = isPx
             ? snapPointAsNumber
             : windowDimensions
-              ? resolved * effectiveHeight
+              ? resolved * fractionHeight
               : 0;
-          // Cap px/'auto' snap points so a content taller than the viewport
-          // doesn't push the drawer past the top edge (offset would go
-          // negative). Fractional detents are already ≤ effectiveHeight.
+          // Cap snap points so content taller than the viewport (or a
+          // fraction above a keyboard) doesn't push the drawer past the top
+          // edge (offset would go negative).
           // `maxContentHeight`, when set, caps the visible sheet further so
           // full/'auto' detents respect the user's ceiling.
           const ceiling =
@@ -170,8 +177,11 @@ export function useSnapPoints({
     detachedOffset,
     maxContentHeight,
     peekHeight,
+    keyboardViewport,
   ]);
 
+  const getViewportHeight = () => keyboardViewport?.height ?? window.innerHeight;
+
   const activeSnapPointOffset = React.useMemo(
     () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),
     [snapPointsOffset, activeSnapPointIndex]
@@ -334,7 +344,7 @@ export function useSnapPoints({
       (direction === 'bottom' || direction === 'right') &&
       currentPosition > snapPointsOffset[0]
     ) {
-      const viewportDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+      const viewportDim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
       const effectiveDim = Math.max(0, viewportDim - (detachedOffset || 0));
       const visibleAtLowest = Math.max(0, effectiveDim - snapPointsOffset[0]);
       const overshoot = currentPosition - snapPointsOffset[0];
@@ -362,7 +372,7 @@ export function useSnapPoints({
       return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
     });
 
-    const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+    const dim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
     if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
       const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
 
@@ -444,7 +454,7 @@ export function useSnapPoints({
       if (activeSnapPointIndex === 0 && !isDraggingDown) {
         const activeOffset = snapPointsOffset[activeSnapPointIndex];
         if (activeOffset === undefined) return 0;
-        const windowDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+        const windowDim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
         const dismissOffset =
           direction === 'bottom' || direction === 'right' ? windowDim : -windowDim;
         const dismissRange = Math.abs(dismissOffset - activeOffset);