@sincpro/mobile-ui 3.1.0 → 3.2.0

package/dist/Dialog/SheetSurface.js

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useTheme } from "../theme/index.js";
 import { SCRIM } from "../theme/on-dark-surface.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { useEffect, useEffectEvent } from "react";
+import { createContext, useContext, useEffect, useEffectEvent, useRef, useState } from "react";
 import { Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
 import { GestureDetector, usePanGesture } from "react-native-gesture-handler";
 import { KeyboardToolbar, useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
@@ -13,17 +13,50 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const DURATION_MS = 260;
 const CLOSE_VELOCITY = 900;
 const MIN_CONTENT_ABOVE_KEYBOARD = 240;
+const RestingOffsetContext = createContext(0);
+
+/** The part of the sheet panel below the screen at rest (0 outside a sheet). */
+export function useSheetRestingOffset() {
+  return useContext(RestingOffsetContext);
+}
 export function resolveSnapPoint(point, windowHeight) {
   if (typeof point === "number") return point;
   const percent = Number.parseFloat(point);
   return Number.isFinite(percent) ? windowHeight * percent / 100 : windowHeight * 0.6;
 }
+
+/**
+ * Panel geometry for a host of `height` whose top `topInset` points are covered (status
+ * bar, notch). The panel is as tall as the highest snap point and never reaches into the
+ * inset; it rests pushed down `restOffset` so only the lowest snap point shows.
+ */
+export function sheetGeometry(snapPoints, height, topInset) {
+  const ceiling = height - topInset - 8;
+  const snaps = snapPoints.map(point => Math.min(resolveSnapPoint(point, height), ceiling)).sort((a, b) => a - b);
+  const panelHeight = snaps[snaps.length - 1] ?? height * 0.6;
+  const offsets = snaps.map(snap => panelHeight - snap).sort((a, b) => b - a);
+  return {
+    ceiling,
+    panelHeight,
+    offsets,
+    restOffset: offsets[0] ?? 0
+  };
+}
+
+/**
+ * How much of the panel sits below the screen while it rests at its lowest snap point.
+ * Scroll content needs this much extra room at its end, or its last rows stay off screen
+ * until the sheet is dragged up.
+ */
+export function restingOffset(snapPoints, height, topInset) {
+  return sheetGeometry(snapPoints, height, topInset).restOffset;
+}
 /**
  * Bottom sheet drawn in the app window. While it exits it ignores touches,
  * so a tap during the close animation never lands on a view that unmounts.
  */
 export function SheetSurface(t0) {
-  const $ = _c(89);
+  const $ = _c(88);
   const {
     visible,
     snapPoints,
@@ -42,49 +75,57 @@ export function SheetSurface(t0) {
   } = useWindowDimensions();
   const reducedMotion = useReducedMotion();
   const keyboard = useReanimatedKeyboardAnimation();
-  const ceiling = windowHeight - insets.top - 8;
-  let panelHeight;
+  const frame = useRef(null);
+  const [host, setHost] = useState(null);
+  const available = host?.height ?? windowHeight;
+  const topInset = Math.max(0, insets.top - (host?.top ?? 0));
   let t1;
-  if ($[0] !== ceiling || $[1] !== snapPoints || $[2] !== windowHeight) {
-    let t2;
-    if ($[5] !== ceiling || $[6] !== windowHeight) {
-      t2 = point => Math.min(resolveSnapPoint(point, windowHeight), ceiling);
-      $[5] = ceiling;
-      $[6] = windowHeight;
-      $[7] = t2;
-    } else {
-      t2 = $[7];
-    }
-    const snaps = snapPoints.map(t2).sort(_temp);
-    panelHeight = snaps[snaps.length - 1] ?? windowHeight * 0.6;
-    t1 = snaps.map(snap => panelHeight - snap).sort(_temp2);
-    $[0] = ceiling;
-    $[1] = snapPoints;
-    $[2] = windowHeight;
-    $[3] = panelHeight;
-    $[4] = t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => frame.current?.measureInWindow((_x, top, _width, height) => {
+      if (height > 0) {
+        setHost({
+          top,
+          height
+        });
+      }
+    });
+    $[0] = t1;
   } else {
-    panelHeight = $[3];
-    t1 = $[4];
+    t1 = $[0];
   }
-  const offsets = t1;
-  const restOffset = offsets[0] ?? 0;
+  const measureHost = t1;
+  let t2;
+  if ($[1] !== available || $[2] !== snapPoints || $[3] !== topInset) {
+    t2 = sheetGeometry(snapPoints, available, topInset);
+    $[1] = available;
+    $[2] = snapPoints;
+    $[3] = topInset;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const {
+    ceiling,
+    panelHeight,
+    offsets,
+    restOffset
+  } = t2;
   const hiddenOffset = panelHeight + insets.bottom;
   const duration = reducedMotion ? 0 : DURATION_MS;
   const translateY = useSharedValue(hiddenOffset);
   const dragStart = useSharedValue(0);
-  let t2;
-  if ($[8] !== onExited) {
-    t2 = () => onExited();
-    $[8] = onExited;
-    $[9] = t2;
+  let t3;
+  if ($[5] !== onExited) {
+    t3 = () => onExited();
+    $[5] = onExited;
+    $[6] = t3;
   } else {
-    t2 = $[9];
+    t3 = $[6];
   }
-  const exited = useEffectEvent(t2);
-  let t3;
-  if ($[10] !== duration || $[11] !== exited || $[12] !== hiddenOffset || $[13] !== restOffset || $[14] !== translateY || $[15] !== visible) {
-    t3 = () => {
+  const exited = useEffectEvent(t3);
+  let t4;
+  if ($[7] !== duration || $[8] !== exited || $[9] !== hiddenOffset || $[10] !== restOffset || $[11] !== translateY || $[12] !== visible) {
+    t4 = () => {
       if (visible) {
         translateY.set(withTiming(restOffset, {
           duration,
@@ -103,84 +144,84 @@ export function SheetSurface(t0) {
       const timer = setTimeout(() => exited(), duration);
       return () => clearTimeout(timer);
     };
-    $[10] = duration;
-    $[11] = exited;
-    $[12] = hiddenOffset;
-    $[13] = restOffset;
-    $[14] = translateY;
-    $[15] = visible;
-    $[16] = t3;
+    $[7] = duration;
+    $[8] = exited;
+    $[9] = hiddenOffset;
+    $[10] = restOffset;
+    $[11] = translateY;
+    $[12] = visible;
+    $[13] = t4;
   } else {
-    t3 = $[16];
+    t4 = $[13];
   }
-  let t4;
-  if ($[17] !== duration || $[18] !== hiddenOffset || $[19] !== restOffset || $[20] !== translateY || $[21] !== visible) {
-    t4 = [visible, restOffset, hiddenOffset, duration, translateY];
-    $[17] = duration;
-    $[18] = hiddenOffset;
-    $[19] = restOffset;
-    $[20] = translateY;
-    $[21] = visible;
-    $[22] = t4;
+  let t5;
+  if ($[14] !== duration || $[15] !== hiddenOffset || $[16] !== restOffset || $[17] !== translateY || $[18] !== visible) {
+    t5 = [visible, restOffset, hiddenOffset, duration, translateY];
+    $[14] = duration;
+    $[15] = hiddenOffset;
+    $[16] = restOffset;
+    $[17] = translateY;
+    $[18] = visible;
+    $[19] = t5;
   } else {
-    t4 = $[22];
+    t5 = $[19];
   }
-  useEffect(t3, t4);
-  let t5;
-  if ($[23] !== dismissible || $[24] !== onRequestClose || $[25] !== visible) {
-    t5 = () => {
+  useEffect(t4, t5);
+  let t6;
+  if ($[20] !== dismissible || $[21] !== onRequestClose || $[22] !== visible) {
+    t6 = () => {
       if (visible && dismissible) {
         onRequestClose();
       }
     };
-    $[23] = dismissible;
-    $[24] = onRequestClose;
-    $[25] = visible;
-    $[26] = t5;
+    $[20] = dismissible;
+    $[21] = onRequestClose;
+    $[22] = visible;
+    $[23] = t6;
   } else {
-    t5 = $[26];
+    t6 = $[23];
   }
-  const requestClose = t5;
-  let t6;
-  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = [-8, 8];
-    $[27] = t6;
+  const requestClose = t6;
+  let t7;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = [-8, 8];
+    $[24] = t7;
   } else {
-    t6 = $[27];
+    t7 = $[24];
   }
-  let t7;
-  if ($[28] !== dragStart || $[29] !== translateY) {
-    t7 = () => {
+  let t8;
+  if ($[25] !== dragStart || $[26] !== translateY) {
+    t8 = () => {
       "worklet";
 
       dragStart.set(translateY.get());
     };
-    $[28] = dragStart;
-    $[29] = translateY;
-    $[30] = t7;
+    $[25] = dragStart;
+    $[26] = translateY;
+    $[27] = t8;
   } else {
-    t7 = $[30];
+    t8 = $[27];
   }
-  let t8;
-  if ($[31] !== dismissible || $[32] !== dragStart || $[33] !== hiddenOffset || $[34] !== restOffset || $[35] !== translateY) {
-    t8 = event => {
+  let t9;
+  if ($[28] !== dismissible || $[29] !== dragStart || $[30] !== hiddenOffset || $[31] !== restOffset || $[32] !== translateY) {
+    t9 = event => {
       "worklet";
 
       const lowest = dismissible ? hiddenOffset : restOffset + 40;
       translateY.set(Math.min(Math.max(dragStart.get() + event.translationY, 0), lowest));
     };
-    $[31] = dismissible;
-    $[32] = dragStart;
-    $[33] = hiddenOffset;
-    $[34] = restOffset;
-    $[35] = translateY;
-    $[36] = t8;
+    $[28] = dismissible;
+    $[29] = dragStart;
+    $[30] = hiddenOffset;
+    $[31] = restOffset;
+    $[32] = translateY;
+    $[33] = t9;
   } else {
-    t8 = $[36];
+    t9 = $[33];
   }
-  let t9;
-  if ($[37] !== dismissible || $[38] !== offsets || $[39] !== onRequestClose || $[40] !== panelHeight || $[41] !== restOffset || $[42] !== translateY) {
-    t9 = event_0 => {
+  let t10;
+  if ($[34] !== dismissible || $[35] !== offsets || $[36] !== onRequestClose || $[37] !== panelHeight || $[38] !== restOffset || $[39] !== translateY) {
+    t10 = event_0 => {
       "worklet";
 
       const position = translateY.get();
@@ -200,37 +241,37 @@ export function SheetSurface(t0) {
         duration: DURATION_MS
       }));
     };
-    $[37] = dismissible;
-    $[38] = offsets;
-    $[39] = onRequestClose;
-    $[40] = panelHeight;
-    $[41] = restOffset;
-    $[42] = translateY;
-    $[43] = t9;
+    $[34] = dismissible;
+    $[35] = offsets;
+    $[36] = onRequestClose;
+    $[37] = panelHeight;
+    $[38] = restOffset;
+    $[39] = translateY;
+    $[40] = t10;
   } else {
-    t9 = $[43];
+    t10 = $[40];
   }
-  let t10;
-  if ($[44] !== t7 || $[45] !== t8 || $[46] !== t9) {
-    t10 = {
-      activeOffsetY: t6,
-      onActivate: t7,
-      onUpdate: t8,
-      onDeactivate: t9
+  let t11;
+  if ($[41] !== t10 || $[42] !== t8 || $[43] !== t9) {
+    t11 = {
+      activeOffsetY: t7,
+      onActivate: t8,
+      onUpdate: t9,
+      onDeactivate: t10
     };
-    $[44] = t7;
-    $[45] = t8;
-    $[46] = t9;
-    $[47] = t10;
+    $[41] = t10;
+    $[42] = t8;
+    $[43] = t9;
+    $[44] = t11;
   } else {
-    t10 = $[47];
+    t11 = $[44];
   }
-  const pan = usePanGesture(t10);
+  const pan = usePanGesture(t11);
   const panelStyle = useAnimatedStyle(() => {
     const lifted = Math.abs(keyboard.height.get());
-    const height = lifted > 0 ? Math.max(panelHeight, Math.min(ceiling, lifted + MIN_CONTENT_ABOVE_KEYBOARD)) : panelHeight;
+    const height_0 = lifted > 0 ? Math.max(panelHeight, Math.min(ceiling, lifted + MIN_CONTENT_ABOVE_KEYBOARD)) : panelHeight;
     return {
-      height,
+      height: height_0,
       paddingBottom: Math.max(insets.bottom, lifted),
       transform: [{
         translateY: translateY.get()
@@ -245,171 +286,178 @@ export function SheetSurface(t0) {
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: interpolate(translateY.get(), [restOffset, hiddenOffset], [1, 0], "clamp")
   }));
-  const t11 = visible ? "box-none" : "none";
-  let t12;
-  if ($[48] !== backdropStyle) {
-    t12 = [StyleSheet.absoluteFill, styles.backdrop, backdropStyle];
-    $[48] = backdropStyle;
-    $[49] = t12;
+  const t12 = visible ? "box-none" : "none";
+  let t13;
+  if ($[45] !== backdropStyle) {
+    t13 = [StyleSheet.absoluteFill, styles.backdrop, backdropStyle];
+    $[45] = backdropStyle;
+    $[46] = t13;
   } else {
-    t12 = $[49];
+    t13 = $[46];
   }
-  const t13 = dismissible ? "Cerrar" : undefined;
-  const t14 = dismissible ? "button" : undefined;
-  const t15 = testID ? `${testID}-backdrop` : undefined;
-  let t16;
-  if ($[50] !== dismissible || $[51] !== requestClose || $[52] !== t13 || $[53] !== t14 || $[54] !== t15) {
-    t16 = _jsx(Pressable, {
-      accessibilityLabel: t13,
-      accessibilityRole: t14,
+  const t14 = dismissible ? "Cerrar" : undefined;
+  const t15 = dismissible ? "button" : undefined;
+  const t16 = testID ? `${testID}-backdrop` : undefined;
+  let t17;
+  if ($[47] !== dismissible || $[48] !== requestClose || $[49] !== t14 || $[50] !== t15 || $[51] !== t16) {
+    t17 = _jsx(Pressable, {
+      accessibilityLabel: t14,
+      accessibilityRole: t15,
       accessible: dismissible,
       onPress: requestClose,
       style: StyleSheet.absoluteFill,
-      testID: t15
+      testID: t16
     });
-    $[50] = dismissible;
-    $[51] = requestClose;
-    $[52] = t13;
-    $[53] = t14;
-    $[54] = t15;
-    $[55] = t16;
+    $[47] = dismissible;
+    $[48] = requestClose;
+    $[49] = t14;
+    $[50] = t15;
+    $[51] = t16;
+    $[52] = t17;
   } else {
-    t16 = $[55];
+    t17 = $[52];
   }
-  let t17;
-  if ($[56] !== t12 || $[57] !== t16) {
-    t17 = _jsx(Animated.View, {
-      style: t12,
-      children: t16
+  let t18;
+  if ($[53] !== t13 || $[54] !== t17) {
+    t18 = _jsx(Animated.View, {
+      style: t13,
+      children: t17
     });
-    $[56] = t12;
-    $[57] = t16;
-    $[58] = t17;
+    $[53] = t13;
+    $[54] = t17;
+    $[55] = t18;
   } else {
-    t17 = $[58];
+    t18 = $[55];
   }
-  let t18;
-  if ($[59] !== theme.bg.card) {
-    t18 = {
+  let t19;
+  if ($[56] !== theme.bg.card) {
+    t19 = {
       backgroundColor: theme.bg.card
     };
-    $[59] = theme.bg.card;
-    $[60] = t18;
+    $[56] = theme.bg.card;
+    $[57] = t19;
   } else {
-    t18 = $[60];
+    t19 = $[57];
   }
-  let t19;
-  if ($[61] !== panelStyle || $[62] !== t18) {
-    t19 = [styles.panel, t18, panelStyle];
-    $[61] = panelStyle;
-    $[62] = t18;
-    $[63] = t19;
+  let t20;
+  if ($[58] !== panelStyle || $[59] !== t19) {
+    t20 = [styles.panel, t19, panelStyle];
+    $[58] = panelStyle;
+    $[59] = t19;
+    $[60] = t20;
   } else {
-    t19 = $[63];
+    t20 = $[60];
   }
-  let t20;
-  if ($[64] !== theme.border.default) {
-    t20 = _jsx(View, {
+  let t21;
+  if ($[61] !== theme.border.default) {
+    t21 = _jsx(View, {
       style: [styles.handle, {
         backgroundColor: theme.border.default
       }]
     });
-    $[64] = theme.border.default;
-    $[65] = t20;
+    $[61] = theme.border.default;
+    $[62] = t21;
   } else {
-    t20 = $[65];
+    t21 = $[62];
   }
-  let t21;
-  if ($[66] !== header || $[67] !== t20) {
-    t21 = _jsxs(View, {
+  let t22;
+  if ($[63] !== header || $[64] !== t21) {
+    t22 = _jsxs(View, {
       style: styles.handleArea,
-      children: [t20, header]
+      children: [t21, header]
     });
-    $[66] = header;
-    $[67] = t20;
-    $[68] = t21;
+    $[63] = header;
+    $[64] = t21;
+    $[65] = t22;
   } else {
-    t21 = $[68];
+    t22 = $[65];
   }
-  let t22;
-  if ($[69] !== pan || $[70] !== t21) {
-    t22 = _jsx(GestureDetector, {
+  let t23;
+  if ($[66] !== pan || $[67] !== t22) {
+    t23 = _jsx(GestureDetector, {
       gesture: pan,
-      children: t21
+      children: t22
     });
-    $[69] = pan;
-    $[70] = t21;
-    $[71] = t22;
+    $[66] = pan;
+    $[67] = t22;
+    $[68] = t23;
   } else {
-    t22 = $[71];
+    t23 = $[68];
   }
-  let t23;
-  if ($[72] !== children) {
-    t23 = _jsx(KeyboardToolbar.Group, {
+  let t24;
+  if ($[69] !== children || $[70] !== restOffset) {
+    t24 = _jsx(KeyboardToolbar.Group, {
       style: styles.content,
-      children: children
+      children: _jsx(RestingOffsetContext, {
+        value: restOffset,
+        children: children
+      })
     });
-    $[72] = children;
-    $[73] = t23;
+    $[69] = children;
+    $[70] = restOffset;
+    $[71] = t24;
   } else {
-    t23 = $[73];
+    t24 = $[71];
   }
-  let t24;
-  if ($[74] !== footer || $[75] !== footerStyle || $[76] !== theme.bg.card) {
-    t24 = footer ? _jsx(Animated.View, {
+  let t25;
+  if ($[72] !== available || $[73] !== footer || $[74] !== footerStyle || $[75] !== theme.bg.card) {
+    t25 = footer ? _jsxs(Animated.View, {
       style: [{
         backgroundColor: theme.bg.card
       }, footerStyle],
-      children: footer
+      children: [footer, _jsx(View, {
+        pointerEvents: "none",
+        style: [styles.footerSkirt, {
+          backgroundColor: theme.bg.card,
+          height: available
+        }]
+      })]
     }) : null;
-    $[74] = footer;
-    $[75] = footerStyle;
-    $[76] = theme.bg.card;
-    $[77] = t24;
+    $[72] = available;
+    $[73] = footer;
+    $[74] = footerStyle;
+    $[75] = theme.bg.card;
+    $[76] = t25;
   } else {
-    t24 = $[77];
+    t25 = $[76];
   }
-  let t25;
-  if ($[78] !== requestClose || $[79] !== t19 || $[80] !== t22 || $[81] !== t23 || $[82] !== t24 || $[83] !== testID) {
-    t25 = _jsxs(Animated.View, {
+  let t26;
+  if ($[77] !== requestClose || $[78] !== t20 || $[79] !== t23 || $[80] !== t24 || $[81] !== t25 || $[82] !== testID) {
+    t26 = _jsxs(Animated.View, {
       accessibilityViewIsModal: true,
       importantForAccessibility: "yes",
       onAccessibilityEscape: requestClose,
-      style: t19,
+      style: t20,
       testID: testID,
-      children: [t22, t23, t24]
+      children: [t23, t24, t25]
     });
-    $[78] = requestClose;
-    $[79] = t19;
-    $[80] = t22;
-    $[81] = t23;
-    $[82] = t24;
-    $[83] = testID;
-    $[84] = t25;
+    $[77] = requestClose;
+    $[78] = t20;
+    $[79] = t23;
+    $[80] = t24;
+    $[81] = t25;
+    $[82] = testID;
+    $[83] = t26;
   } else {
-    t25 = $[84];
+    t26 = $[83];
   }
-  let t26;
-  if ($[85] !== t11 || $[86] !== t17 || $[87] !== t25) {
-    t26 = _jsxs(View, {
-      pointerEvents: t11,
+  let t27;
+  if ($[84] !== t12 || $[85] !== t18 || $[86] !== t26) {
+    t27 = _jsxs(View, {
+      onLayout: measureHost,
+      pointerEvents: t12,
+      ref: frame,
       style: StyleSheet.absoluteFill,
-      children: [t17, t25]
+      children: [t18, t26]
     });
-    $[85] = t11;
-    $[86] = t17;
-    $[87] = t25;
-    $[88] = t26;
+    $[84] = t12;
+    $[85] = t18;
+    $[86] = t26;
+    $[87] = t27;
   } else {
-    t26 = $[88];
+    t27 = $[87];
   }
-  return t26;
-}
-function _temp2(a_0, b_0) {
-  return b_0 - a_0;
-}
-function _temp(a, b) {
-  return a - b;
+  return t27;
 }
 const styles = StyleSheet.create({
   backdrop: {
@@ -428,6 +476,12 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: 0
   },
+  footerSkirt: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: "100%"
+  },
   handleArea: {
     paddingTop: 8
   },