@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Dialog/Dialog.Sheet.js

@@ -1,22 +1,274 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import BottomSheet, { BottomSheetView } from "@expo/ui/community/bottom-sheet";
+import { c as _c } from "react/compiler-runtime";
+import { OverlayPortal } from "./OverlayHost.js";
+import { SheetSurface, useSheetRestingOffset } from "./SheetSurface.js";
 import Pressable from "../primitives/Pressable.js";
-import { themeToVars, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { vars } from "nativewind";
+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({ visible, onClose, title, children, footer, snapPoints = SNAP_POINTS, scrollable = true, dismissible = true, testID, }) {
-    const theme = useTheme();
-    const close = () => {
-        if (visible && dismissible)
-            onClose();
+function Sheet(t0) {
+  const $ = _c(41);
+  const {
+    visible,
+    onClose,
+    onClosed,
+    title,
+    children,
+    footer,
+    snapPoints: t1,
+    scrollable: t2,
+    dismissible: t3,
+    testID
+  } = t0;
+  const snapPoints = t1 === undefined ? SNAP_POINTS : t1;
+  const scrollable = t2 === undefined ? true : t2;
+  const dismissible = t3 === undefined ? true : t3;
+  const [present, setPresent] = useState(visible);
+  if (visible && !present) {
+    setPresent(true);
+  }
+  if (!present) {
+    return null;
+  }
+  let t4;
+  if ($[0] !== dismissible || $[1] !== onClose || $[2] !== visible) {
+    t4 = () => {
+      if (visible && dismissible) {
+        onClose();
+      }
+    };
+    $[0] = dismissible;
+    $[1] = onClose;
+    $[2] = visible;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const close = t4;
+  let t5;
+  if ($[4] !== onClosed) {
+    t5 = () => {
+      setPresent(false);
+      onClosed?.();
+    };
+    $[4] = onClosed;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const exited = t5;
+  let t6;
+  if ($[6] !== close) {
+    t6 = () => {
+      close();
+      return true;
+    };
+    $[6] = close;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  const back = t6;
+  let t7;
+  if ($[8] !== title) {
+    t7 = title ? _jsx(Typography.Text, {
+      accessibilityRole: "header",
+      className: "flex-1 text-text-primary",
+      semibold: true,
+      variant: "subtitle",
+      children: title
+    }) : _jsx(View, {
+      className: "flex-1"
+    });
+    $[8] = title;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  const t8 = !dismissible;
+  let t9;
+  if ($[10] !== t8) {
+    t9 = {
+      disabled: t8
+    };
+    $[10] = t8;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const t10 = !dismissible;
+  let t11;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      minHeight: 48,
+      minWidth: 48,
+      alignItems: "center",
+      justifyContent: "center"
     };
-    return (_jsx(BottomSheet, { backgroundStyle: { backgroundColor: theme.bg.card }, enablePanDownToClose: dismissible, index: visible ? 0 : -1, onClose: close, snapPoints: snapPoints, children: _jsx(BottomSheetView, { style: { flex: 1 }, children: _jsxs(View, { accessibilityViewIsModal: true, importantForAccessibility: "yes", onAccessibilityEscape: close, style: [vars(themeToVars(theme)), { flex: 1, minHeight: 0 }], testID: testID, children: [_jsxs(View, { className: "flex-row items-center gap-3 px-4 pb-2", children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary", semibold: true, variant: "subtitle", children: title })) : (_jsx(View, { className: "flex-1" })), _jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", accessibilityState: { disabled: !dismissible }, disabled: !dismissible, onPress: close, style: {
-                                    minHeight: 48,
-                                    minWidth: 48,
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                }, children: _jsx(Typography.Text, { className: dismissible ? "text-text-accent" : "text-text-disabled", variant: "bodySmall", children: "Cerrar" }) })] }), scrollable ? (_jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 16 }, keyboardDismissMode: "on-drag", keyboardShouldPersistTaps: "handled", style: { flex: 1, minHeight: 0 }, children: children })) : (_jsx(View, { style: { flex: 1, minHeight: 0, paddingHorizontal: 16 }, children: children })), footer ? (_jsx(View, { className: "border-t border-border-light px-4 py-3", children: footer })) : null] }) }) }));
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const t12 = dismissible ? "text-text-accent" : "text-text-disabled";
+  let t13;
+  if ($[13] !== t12) {
+    t13 = _jsx(Typography.Text, {
+      className: t12,
+      variant: "bodySmall",
+      children: "Cerrar"
+    });
+    $[13] = t12;
+    $[14] = t13;
+  } else {
+    t13 = $[14];
+  }
+  let t14;
+  if ($[15] !== close || $[16] !== t10 || $[17] !== t13 || $[18] !== t9) {
+    t14 = _jsx(Pressable, {
+      accessibilityLabel: "Cerrar",
+      accessibilityRole: "button",
+      accessibilityState: t9,
+      disabled: t10,
+      onPress: close,
+      style: t11,
+      children: t13
+    });
+    $[15] = close;
+    $[16] = t10;
+    $[17] = t13;
+    $[18] = t9;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  let t15;
+  if ($[20] !== t14 || $[21] !== t7) {
+    t15 = _jsxs(View, {
+      className: "flex-row items-center gap-3 px-4 pb-2",
+      children: [t7, t14]
+    });
+    $[20] = t14;
+    $[21] = t7;
+    $[22] = t15;
+  } else {
+    t15 = $[22];
+  }
+  const header = t15;
+  const t16 = visible ? back : undefined;
+  let t17;
+  if ($[23] !== footer) {
+    t17 = footer ? _jsx(View, {
+      className: "border-t border-border-light px-4 py-3",
+      children: footer
+    }) : undefined;
+    $[23] = footer;
+    $[24] = t17;
+  } else {
+    t17 = $[24];
+  }
+  let t18;
+  if ($[25] !== children || $[26] !== scrollable) {
+    t18 = scrollable ? _jsx(SheetScroll, {
+      children: children
+    }) : _jsx(View, {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        paddingHorizontal: 16
+      },
+      children: children
+    });
+    $[25] = children;
+    $[26] = scrollable;
+    $[27] = t18;
+  } else {
+    t18 = $[27];
+  }
+  let t19;
+  if ($[28] !== close || $[29] !== dismissible || $[30] !== exited || $[31] !== header || $[32] !== snapPoints || $[33] !== t17 || $[34] !== t18 || $[35] !== testID || $[36] !== visible) {
+    t19 = _jsx(SheetSurface, {
+      dismissible: dismissible,
+      footer: t17,
+      header: header,
+      onExited: exited,
+      onRequestClose: close,
+      snapPoints: snapPoints,
+      testID: testID,
+      visible: visible,
+      children: t18
+    });
+    $[28] = close;
+    $[29] = dismissible;
+    $[30] = exited;
+    $[31] = header;
+    $[32] = snapPoints;
+    $[33] = t17;
+    $[34] = t18;
+    $[35] = testID;
+    $[36] = visible;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+  let t20;
+  if ($[38] !== t16 || $[39] !== t19) {
+    t20 = _jsx(OverlayPortal, {
+      onBack: t16,
+      children: t19
+    });
+    $[38] = t16;
+    $[39] = t19;
+    $[40] = t20;
+  } else {
+    t20 = $[40];
+  }
+  return t20;
 }
 export default Sheet;

package/dist/Dialog/OverlayHost.d.ts

@@ -0,0 +1,24 @@
+import { type OverlayLayer } from "./overlay.store.js";
+import { type ReactNode } from "react";
+/**
+ * Mount once at the app root, inside the theme and gesture roots.
+ * Every Dialog.Sheet, Confirmation, ActionSheet, picker and toast renders
+ * here, in the same native window as the screen.
+ */
+export declare function OverlayHost({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface OverlayPortalProps {
+    children: ReactNode;
+    layer?: OverlayLayer;
+    onBack?: () => boolean;
+}
+/**
+ * Sends its children to the OverlayHost. Without a host (tests, isolated
+ * 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 declare function OverlayPortal({ children, layer, onBack }: OverlayPortalProps): ReactNode;

package/dist/Dialog/OverlayHost.js

@@ -0,0 +1,230 @@
+import { c as _c } from "react/compiler-runtime";
+import { overlayStore } from "./overlay.store.js";
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useSyncExternalStore } from "react";
+import { BackHandler, StyleSheet, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const styles = StyleSheet.create({
+  root: {
+    flex: 1
+  }
+});
+
+/**
+ * Mount once at the app root, inside the theme and gesture roots.
+ * Every Dialog.Sheet, Confirmation, ActionSheet, picker and toast renders
+ * here, in the same native window as the screen.
+ */
+export function OverlayHost(t0) {
+  const $ = _c(17);
+  const {
+    children
+  } = t0;
+  const entries = useSyncExternalStore(overlayStore.subscribe, overlayStore.entries, overlayStore.entries);
+  let t1;
+  if ($[0] !== entries) {
+    t1 = entries.some(_temp);
+    $[0] = entries;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const blocking = t1;
+  let t2;
+  if ($[2] !== entries) {
+    t2 = entries.some(_temp2);
+    $[2] = entries;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const handlesBack = t2;
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  useLayoutEffect(_temp3, t3);
+  let t4;
+  let t5;
+  if ($[5] !== handlesBack) {
+    t4 = () => {
+      if (!handlesBack) {
+        return;
+      }
+      const subscription = BackHandler.addEventListener("hardwareBackPress", _temp4);
+      return () => subscription.remove();
+    };
+    t5 = [handlesBack];
+    $[5] = handlesBack;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t4 = $[6];
+    t5 = $[7];
+  }
+  useEffect(t4, t5);
+  const t6 = blocking ? "no-hide-descendants" : "auto";
+  let t7;
+  if ($[8] !== blocking || $[9] !== children || $[10] !== t6) {
+    t7 = _jsx(View, {
+      accessibilityElementsHidden: blocking,
+      importantForAccessibility: t6,
+      style: styles.root,
+      children: children
+    });
+    $[8] = blocking;
+    $[9] = children;
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== entries) {
+    t8 = entries.map(_temp5);
+    $[12] = entries;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== t7 || $[15] !== t8) {
+    t9 = _jsxs(View, {
+      style: styles.root,
+      children: [t7, t8]
+    });
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  return t9;
+}
+function _temp5(entry_1) {
+  return _jsx(View, {
+    pointerEvents: "box-none",
+    style: StyleSheet.absoluteFill,
+    children: entry_1.element
+  }, entry_1.key);
+}
+function _temp4() {
+  return overlayStore.handleBack();
+}
+function _temp3() {
+  return overlayStore.attachHost();
+}
+function _temp2(entry_0) {
+  return entry_0.onBack;
+}
+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, 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(16);
+  const {
+    children,
+    layer: t1,
+    onBack
+  } = t0;
+  const layer = t1 === undefined ? "sheet" : t1;
+  const key = useId();
+  const hosted = useSyncExternalStore(overlayStore.subscribe, overlayStore.hasHost, overlayStore.hasHost);
+  let t2;
+  if ($[0] !== onBack) {
+    t2 = () => onBack?.() ?? false;
+    $[0] = onBack;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const back = useEffectEvent(t2);
+  const listensToBack = onBack !== undefined;
+  let t3;
+  if ($[2] !== back || $[3] !== children || $[4] !== hosted || $[5] !== key || $[6] !== layer || $[7] !== listensToBack) {
+    t3 = () => {
+      if (!hosted) {
+        return;
+      }
+      overlayStore.upsert({
+        key,
+        layer,
+        element: children,
+        onBack: listensToBack ? () => back() : undefined
+      });
+    };
+    $[2] = back;
+    $[3] = children;
+    $[4] = hosted;
+    $[5] = key;
+    $[6] = layer;
+    $[7] = listensToBack;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  useLayoutEffect(t3);
+  let t4;
+  let t5;
+  if ($[9] !== hosted || $[10] !== key) {
+    t4 = () => {
+      if (!hosted) {
+        return;
+      }
+      return () => overlayStore.remove(key);
+    };
+    t5 = [hosted, key];
+    $[9] = hosted;
+    $[10] = key;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t4 = $[11];
+    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

@@ -0,0 +1,43 @@
+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;
+    snapPoints: SnapPoint[];
+    dismissible: boolean;
+    /** The user asked to close: backdrop, drag or accessibility escape. */
+    onRequestClose: () => void;
+    /** The exit animation finished and the surface can unmount. */
+    onExited: () => void;
+    /** Drag area at the top of the panel. */
+    header: ReactNode;
+    /** Actions pinned to the visible bottom of the sheet at every snap point. */
+    footer?: ReactNode;
+    children: ReactNode;
+    testID?: string;
+}
+/**
+ * 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 declare function SheetSurface({ visible, snapPoints, dismissible, onRequestClose, onExited, header, footer, children, testID, }: SheetSurfaceProps): import("react").JSX.Element;