@sincpro/mobile-ui 3.1.0 → 3.2.0

package/dist/Dialog/Dialog.EditValue.js

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { FlashList } from "@shopify/flash-list";
 import Sheet from "./Dialog.Sheet.js";
 import { DialogActions } from "./dialog-actions.js";
-import Pressable from "../primitives/Pressable.js";
+import { ChoiceRow } from "../Form/choice-row.js";
 import { fontFamilies, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { attempt, errorMessage } from "../utils/async.js";
@@ -245,29 +245,16 @@ function EditValueEditor(t0) {
       const {
         item
       } = t24;
-      return _jsx(Pressable, {
-        accessibilityLabel: item.label,
-        accessibilityRole: "radio",
-        accessibilityState: {
-          disabled: blocked || !!item.disabled,
-          selected: item.value === draft
-        },
-        className: "border-b border-border-light py-3",
-        disabled: blocked || item.disabled,
+      return _jsx(ChoiceRow, {
+        disabled: blocked || !!item.disabled,
+        label: item.label,
+        look: "list",
         onPress: () => {
           if (!item.disabled) {
             updateDraft(item.value);
           }
         },
-        style: {
-          minWidth: 48,
-          minHeight: 48
-        },
-        children: _jsx(Typography.Text, {
-          className: item.disabled ? "text-text-disabled" : "text-text-primary",
-          semibold: item.value === draft,
-          children: item.label
-        })
+        selected: item.value === draft
       });
     };
     $[40] = blocked;

package/dist/Dialog/Dialog.Sheet.js

@@ -1,11 +1,57 @@
 import { c as _c } from "react/compiler-runtime";
 import { OverlayPortal } from "./OverlayHost.js";
-import { SheetSurface } from "./SheetSurface.js";
+import { SheetSurface, useSheetRestingOffset } from "./SheetSurface.js";
 import Pressable from "../primitives/Pressable.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { ScrollView, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+/** Scroll content gets the hidden part of a resting panel as room at its end. */
+function SheetScroll(t0) {
+  const $ = _c(6);
+  const {
+    children
+  } = t0;
+  const restingOffset = useSheetRestingOffset();
+  const t1 = 16 + restingOffset;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      paddingHorizontal: 16,
+      paddingBottom: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      flex: 1,
+      minHeight: 0
+    };
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children || $[4] !== t2) {
+    t4 = _jsx(ScrollView, {
+      contentContainerStyle: t2,
+      keyboardDismissMode: "on-drag",
+      keyboardShouldPersistTaps: "handled",
+      style: t3,
+      children: children
+    });
+    $[3] = children;
+    $[4] = t2;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
 const SNAP_POINTS = ["60%", "90%"];
 function Sheet(t0) {
   const $ = _c(41);
@@ -169,17 +215,7 @@ function Sheet(t0) {
   }
   let t18;
   if ($[25] !== children || $[26] !== scrollable) {
-    t18 = scrollable ? _jsx(ScrollView, {
-      contentContainerStyle: {
-        paddingHorizontal: 16,
-        paddingBottom: 16
-      },
-      keyboardDismissMode: "on-drag",
-      keyboardShouldPersistTaps: "handled",
-      style: {
-        flex: 1,
-        minHeight: 0
-      },
+    t18 = scrollable ? _jsx(SheetScroll, {
       children: children
     }) : _jsx(View, {
       style: {

package/dist/Dialog/OverlayHost.d.ts

@@ -15,7 +15,8 @@ export interface OverlayPortalProps {
 }
 /**
  * Sends its children to the OverlayHost. Without a host (tests, isolated
- * stories) it renders in place so the content stays reachable.
+ * stories) it renders in place so the content stays reachable, and warns once in
+ * development, because an app without the host draws every overlay clipped.
  *
  * Content rendered in the host sees the providers above the host, not the
  * screen-level providers around the portal. Pass what it needs as props.

package/dist/Dialog/OverlayHost.js

@@ -122,15 +122,25 @@ function _temp2(entry_0) {
 function _temp(entry) {
   return entry.layer === "sheet";
 }
+let warnedMissingHost = false;
+
+/** Overlays without a host render in place, clipped by their container: say so once. */
+function warnMissingHost() {
+  if (warnedMissingHost || !__DEV__ || process.env.NODE_ENV === "test") return;
+  warnedMissingHost = true;
+  console.warn("[mobile-ui] A Sheet or dialog opened without <OverlayHost>: it renders in place, " + "clipped by its container. Mount <OverlayHost> once at the app root " + "(the @sincpro/mobile AppShell does it).");
+}
+
 /**
  * Sends its children to the OverlayHost. Without a host (tests, isolated
- * stories) it renders in place so the content stays reachable.
+ * stories) it renders in place so the content stays reachable, and warns once in
+ * development, because an app without the host draws every overlay clipped.
  *
  * Content rendered in the host sees the providers above the host, not the
  * screen-level providers around the portal. Pass what it needs as props.
  */
 export function OverlayPortal(t0) {
-  const $ = _c(13);
+  const $ = _c(16);
   const {
     children,
     layer: t1,
@@ -192,5 +202,29 @@ export function OverlayPortal(t0) {
     t5 = $[12];
   }
   useLayoutEffect(t4, t5);
+  let t6;
+  let t7;
+  if ($[13] !== hosted) {
+    t6 = () => {
+      if (hosted) {
+        return;
+      }
+      const timer = setTimeout(_temp6, 0);
+      return () => clearTimeout(timer);
+    };
+    t7 = [hosted];
+    $[13] = hosted;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t6 = $[14];
+    t7 = $[15];
+  }
+  useEffect(t6, t7);
   return hosted ? null : children;
 }
+function _temp6() {
+  if (!overlayStore.hasHost()) {
+    warnMissingHost();
+  }
+}

package/dist/Dialog/SheetSurface.d.ts

@@ -1,6 +1,25 @@
 import { type ReactNode } from "react";
 export type SnapPoint = string | number;
+/** The part of the sheet panel below the screen at rest (0 outside a sheet). */
+export declare function useSheetRestingOffset(): number;
 export declare function resolveSnapPoint(point: SnapPoint, windowHeight: number): number;
+/**
+ * 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 declare function sheetGeometry(snapPoints: SnapPoint[], height: number, topInset: number): {
+    ceiling: number;
+    panelHeight: number;
+    offsets: number[];
+    restOffset: number;
+};
+/**
+ * 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 declare function restingOffset(snapPoints: SnapPoint[], height: number, topInset: number): number;
 export interface SheetSurfaceProps {
     /** `false` starts the exit animation. */
     visible: boolean;