@gryt/ui-native 0.8.1 → 0.9.0

package/dist/components/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAerF,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAE7D;AAeD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,IAAI,CAAC,EACZ,UAAoB,EACpB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,+BAqBZ;AAWD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAOtD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BA0MtD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAOlD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAiBlD;AAED,eAAO,MAAM,KAAK;;;;;CAA0D,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAerF,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAE7D;AAeD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,IAAI,CAAC,EACZ,UAAoB,EACpB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,UAAU,+BAqBZ;AAWD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAOtD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAuNtD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAOlD;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,+BAiBlD;AAED,eAAO,MAAM,KAAK;;;;;CAA0D,CAAC"}

package/dist/components/Sheet/Sheet.js

@@ -7,6 +7,7 @@ import { grytDrawerBleed } from "@gryt/theme";
 import { durations, easeSpringTight } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
+import { nextPresentation } from "./presentation.js";
 /** Mount once, at the root. See the note above for why it is required. */
 export function SheetProvider({ children }) {
     return _jsx(BottomSheetModalProvider, { children: children });
@@ -87,17 +88,23 @@ function Content({ children, style }) {
      * has never been presented takes it *out* of the provider's registry — after
      * which `present()` is a no-op and the sheet never opens again. It looks like
      * the open prop being ignored, and it is not: it is the close that ran first.
+     *
+     * **It has to be cleared by `onDismiss` as well**, which is the other way a
+     * sheet stops being presented and the one this missed. A flick down dismisses
+     * the modal itself and *then* tells React, so the effect that follows finds
+     * `presented` still true and calls `dismiss()` on a modal that is already
+     * gone — the same unregistering call the ref exists to prevent, arriving by
+     * the other door. Every sheet in the app so far was opened by a trigger and
+     * closed for good, so nothing noticed until something wanted one back.
      */
     const presented = useRef(false);
     useEffect(() => {
-        if (isOpen) {
-            presented.current = true;
+        const next = nextPresentation(isOpen, presented.current);
+        presented.current = next.presented;
+        if (next.action === "present")
             ref.current?.present();
-        }
-        else if (presented.current) {
-            presented.current = false;
+        else if (next.action === "dismiss")
             ref.current?.dismiss();
-        }
     }, [isOpen, ref]);
     // The modal renders nothing until it is presented, so there is no invisible
     // backdrop sitting over the screen eating taps while it is closed. That was
@@ -184,7 +191,14 @@ function Content({ children, style }) {
         // React asking, so the state has to be told. Uncontrolled, this is what
         // makes the next `present` work; controlled, it is how the parent finds
         // out its sheet is gone.
-        onDismiss: () => setOpen(false), animationConfigs: animationConfigs, backdropComponent: renderBackdrop, backgroundComponent: renderBackground, handleIndicatorStyle: {
+        //
+        // `presented` first, and not as a tidy-up: the modal has already
+        // dismissed itself by the time this runs, and leaving the ref true lets
+        // the effect below dismiss it a second time. See the note on the ref.
+        onDismiss: () => {
+            presented.current = false;
+            setOpen(false);
+        }, animationConfigs: animationConfigs, backdropComponent: renderBackdrop, backgroundComponent: renderBackground, handleIndicatorStyle: {
             backgroundColor: theme.color.border,
             width: 36,
             height: 4,

package/dist/components/Sheet/presentation.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Whether a sheet should be presented, dismissed, or left alone.
+ *
+ * A three-line decision in its own file, for the reason `sliderValue.ts` and
+ * `placePopup.ts` are: it is the part a screenshot cannot check, and it is the
+ * part that has now been wrong twice.
+ *
+ * The rule the whole thing exists for is that **`dismiss()` must only be
+ * called on a modal that is actually presented**. `@gorhom/bottom-sheet`'s
+ * provider keeps a registry of presented sheets, and dismissing one that is not
+ * in it takes it out — after which `present()` is a no-op and the sheet never
+ * opens again. It looks exactly like the `open` prop being ignored.
+ *
+ * There are two ways to end up asking. One is a sheet that has never been on
+ * screen: it runs its effect once on mount with `open` false, and without this
+ * it would dismiss a modal the provider has never heard of. The other is a
+ * flick down, which dismisses the modal itself and *then* tells React — so the
+ * effect that follows would dismiss it a second time.
+ */
+export type SheetAction = "present" | "dismiss" | "none";
+export interface SheetPresentation {
+    action: SheetAction;
+    /** What `presented` becomes. The caller stores it. */
+    presented: boolean;
+}
+export declare function nextPresentation(open: boolean, presented: boolean): SheetPresentation;
+//# sourceMappingURL=presentation.d.ts.map

package/dist/components/Sheet/presentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/presentation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,sDAAsD;IACtD,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,iBAAiB,CAIrF"}

package/dist/components/Sheet/presentation.js

@@ -0,0 +1,7 @@
+export function nextPresentation(open, presented) {
+    if (open)
+        return { action: "present", presented: true };
+    if (presented)
+        return { action: "dismiss", presented: false };
+    return { action: "none", presented: false };
+}

package/dist/components/Toast/Toast.d.ts

@@ -16,9 +16,25 @@ interface ToastContextValue {
  * Toasts need somewhere to live, which on the web is a portal at the document
  * root and here is a provider near the top of the tree.
  *
+ * **Mount it above everything else it has to cover.** The viewport is rendered
+ * as a sibling *after* `children`, so it paints over anything inside them —
+ * including a `Sheet`, whose content goes through `@gorhom/portal` to a host
+ * that is itself inside those children. Put `ToastProvider` below
+ * `SheetProvider` and the sheet wins instead, which is the wrong way round: a
+ * sheet is a surface you are working in, and a toast is the app telling you
+ * something happened while you work.
+ *
  * They are deliberately not built on `Modal` like the dialogs are. A modal
  * intercepts touches for the whole screen, and a toast that blocked the app
  * until it faded would be worse than no toast.
+ *
+ * **What that costs, stated rather than discovered:** a `Modal` is a separate
+ * native window, so anything built on one — `Dialog`, `AlertDialog`, `Drawer`,
+ * and the platform's own `ActionSheetIOS` — draws *over* a toast, whatever the
+ * z-index says. React Native has no z-index across windows. A flow that raises
+ * a dialog and toasts at the same moment should toast after the dialog closes;
+ * there is nothing this component can do about it from inside the tree, and
+ * the alternative is a toast that can block the app, which is worse.
  */
 export declare function ToastProvider({ children }: {
     children?: ReactNode;

package/dist/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5G,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQrF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,UAAU,iBAAiB;IACzB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAoBnE;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAuGD,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5G,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AASrF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAMD,UAAU,iBAAiB;IACzB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAoBnE;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AAyHD,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/dist/components/Toast/Toast.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Pressable, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { grytScaleSteps } from "@gryt/theme";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
@@ -11,9 +12,25 @@ const ToastContext = createContext(null);
  * Toasts need somewhere to live, which on the web is a portal at the document
  * root and here is a provider near the top of the tree.
  *
+ * **Mount it above everything else it has to cover.** The viewport is rendered
+ * as a sibling *after* `children`, so it paints over anything inside them —
+ * including a `Sheet`, whose content goes through `@gorhom/portal` to a host
+ * that is itself inside those children. Put `ToastProvider` below
+ * `SheetProvider` and the sheet wins instead, which is the wrong way round: a
+ * sheet is a surface you are working in, and a toast is the app telling you
+ * something happened while you work.
+ *
  * They are deliberately not built on `Modal` like the dialogs are. A modal
  * intercepts touches for the whole screen, and a toast that blocked the app
  * until it faded would be worse than no toast.
+ *
+ * **What that costs, stated rather than discovered:** a `Modal` is a separate
+ * native window, so anything built on one — `Dialog`, `AlertDialog`, `Drawer`,
+ * and the platform's own `ActionSheetIOS` — draws *over* a toast, whatever the
+ * z-index says. React Native has no z-index across windows. A flow that raises
+ * a dialog and toasts at the same moment should toast after the dialog closes;
+ * there is nothing this component can do about it from inside the tree, and
+ * the alternative is a toast that can block the app, which is worse.
  */
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
@@ -42,6 +59,7 @@ const RAMP = {
 };
 function Viewport({ toasts, onDismiss, }) {
     const theme = useTheme();
+    const insets = useSafeAreaInsets();
     if (toasts.length === 0)
         return null;
     return (_jsx(View
@@ -52,9 +70,26 @@ function Viewport({ toasts, onDismiss, }) {
             position: "absolute",
             left: 0,
             right: 0,
-            bottom: theme.space(6),
+            /* The top, which on a phone is the only edge that is reliably free.
+             *
+             * The bottom is where a tab bar sits, where the home indicator sits,
+             * and where every sheet in the app rises from — so a toast there is
+             * either under the chrome or in the way of the gesture. It is also
+             * where iOS puts nothing of its own, precisely because that edge is
+             * the user's.
+             *
+             * Below the status bar rather than over it: the clock and the battery
+             * are not ours to cover, and a toast that starts under the notch reads
+             * as a system banner rather than as this app talking. */
+            top: insets.top + theme.space(2),
             paddingHorizontal: theme.space(4),
             gap: theme.space(2),
+            /* Explicit rather than relying on paint order. Within this tree the
+             * viewport is already last, but a caller can put something absolutely
+             * positioned after it — a floating bar, a call pill — and the toast
+             * has to win. `elevation` is the Android half of the same statement. */
+            zIndex: 1000,
+            elevation: 24,
         }, children: toasts.map((toast) => (_jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
 }
 function ToastItem({ toast, onDismiss, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gryt/ui-native",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "license": "MIT",
   "description": "Gryt's design system on React Native. Same tokens as @gryt/ui, a different renderer.",