@gryt/ui-native 0.6.0 → 0.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAC/F,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAgBrD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAKxD;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgBD,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,IAAa,EACb,IAAU,EACV,WAAkB,EAClB,KAAK,EACN,EAAE,gBAAgB,+BAiSlB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,eAAO,MAAM,MAAM;;;;;;CAA0C,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAYtB,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAgBrD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,+BAKxD;AAED,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAErD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgBD,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,IAAa,EACb,IAAU,EACV,WAAkB,EAClB,KAAK,EACN,EAAE,gBAAgB,+BA0UlB;AAED,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,KAAK,EACN,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAWA;AAED,eAAO,MAAM,MAAM;;;;;;CAA0C,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { Dimensions, PanResponder, Modal, Pressable } from "react-native";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Dimensions, Modal, Pressable } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useReducedMotion } from "../../hooks/useReducedMotion.js";
@@ -79,7 +80,11 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
     const panelExtent = extent + bleed;
     // Measured against the bleed panel, so the panel's *visible* edge lands
     // exactly off-screen rather than the overhang doing it.
-    const hidden = side === "right" ? panelExtent : side === "left" ? -panelExtent : panelExtent;
+    const hidden = side === "right"
+        ? panelExtent
+        : side === "left"
+            ? -panelExtent
+            : panelExtent;
     /**
      * 700ms on the *tight* curve, and this changed on both platforms at once.
      *
@@ -150,141 +155,172 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
         };
     });
     /**
-     * The scrim thins as the panel is dragged away, and does not fade in or out.
+     * The scrim fades with the panel, and thins further as it is dragged away.
      *
-     * A drawer opens by sliding and nothing about it fades — that is the whole
-     * distinction from a dialog, and a scrim that fades up alongside the panel
-     * puts a second, slower animation on top of the one that matters. It is up
-     * when the drawer is up.
+     * Two separate rules, both the web's:
      *
-     * The drag term stays, and it is a different thing: pushing the panel off
-     * lightens the scrim in proportion, so a half-gone drawer does not sit under
-     * a full-strength one. The web's own rule, in its own words.
+     * ```
+     * "[opacity:calc(1-var(--drawer-swipe-progress,0))]",
+     * "transition-opacity duration-(--gryt-dur-spring-soft) ease-spring-tight",
+     * "data-starting-style:opacity-0 data-ending-style:opacity-0",
+     * ```
      *
-     * The Modal unmounts once the panel has finished travelling, which is what
-     * takes the scrim with it. Earlier this was a flat colour that vanished with
-     * the Modal *before* the panel had moved, so a drawer animating out sat under
-     * a full-strength scrim for 700ms and then blinked off — that was the bug,
-     * and keeping the scrim up for exactly as long as the panel is on screen is
-     * the fix rather than fading it.
+     * The first is the drag term. The other two are the fade: the backdrop
+     * starts and ends at zero, over the same duration and easing as the panel's
+     * slide. `progress` already runs on `travel`, which is `easeSpringTight` at
+     * `springSoft` — so multiplying by it is the same curve, not a new one.
+     *
+     * GRYT-408 took the fade out, on the grounds that "the web's Popup declares
+     * `transition-transform` and nothing else". That is true, and it is about
+     * `Drawer.Popup` — the panel, which still only translates. The backdrop is a
+     * different element and says the opposite. Without the fade the scrim was at
+     * full strength before the panel was on screen and stayed there while it slid
+     * away, then blinked off with the Modal.
      */
     const scrimStyle = useAnimatedStyle(() => {
         const dragged = extent > 0 ? Math.min(1, Math.abs(drag.value) / extent) : 0;
-        return { opacity: 1 - dragged };
+        return { opacity: progress.value * (1 - dragged) };
     });
     /**
      * Swipe to dismiss, which the web has had from Base UI's drawer primitive
      * and this did not have at all (GRYT-395). A drawer you cannot push back is
      * the thing a drawer is for.
      *
-     * `PanResponder` rather than react-native-gesture-handler: the Slider proved
-     * this path works from this package's prebuilt output today, and an attempt
-     * at gesture-handler from here failed for reasons still not understood
-     * (GRYT-393). This is not the place to retry that.
+     * `react-native-gesture-handler` rather than `PanResponder`. That was the
+     * other way round because gesture callbacks from this package's prebuilt
+     * output were measured doing nothing (GRYT-393) — the babel plugin was not
+     * reaching `node_modules`, so nothing became a worklet. Measured again on
+     * 2026-08-21 with a probe built inside this package: both worklet and
+     * `runOnJS` callbacks report correctly. Whatever it was, it is fixed, and
+     * `PanResponder` was only ever the fallback.
+     *
+     * The reason to move is what the axis constraints below buy. `PanResponder`
+     * cannot negotiate with a native scroll recogniser, so the old version kept
+     * the drag with `onPanResponderTerminationRequest: () => false` — which
+     * works by never handing the gesture back, and stops a `ScrollView` inside
+     * the drawer scrolling at all. Here the pan simply fails on a cross-axis
+     * drag and the scrollable gets it, which is the same rule the web relies on
+     * the browser for.
+     *
+     * The callbacks stay worklets. Running them on the JS thread would be
+     * simpler and would give up the whole point: the panel tracks the finger on
+     * the UI thread, with nothing to be blocked by a busy bridge.
      */
-    const gesture = useRef({ extent, side, vertical, dismissible, setOpen });
-    useEffect(() => {
-        gesture.current = { extent, side, vertical, dismissible, setOpen };
-    }, [extent, side, vertical, dismissible, setOpen]);
-    /* eslint-disable react-hooks/refs */
-    const [responder] = useState(() => PanResponder.create({
-        // Claimed on move, not on start. Claiming on start would swallow every
-        // tap on the panel's own content — buttons inside a drawer would stop
-        // working, which is a far worse bug than not being able to swipe.
-        onStartShouldSetPanResponder: () => false,
-        onMoveShouldSetPanResponder: (_e, g) => {
-            if (!gesture.current.dismissible)
-                return false;
-            // Only once the drag is clearly along the axis the panel closes on,
-            // and clearly a drag rather than a slow press. Anything else belongs
-            // to whatever is inside.
-            const along = gesture.current.vertical ? g.dy : g.dx;
-            const across = gesture.current.vertical ? g.dx : g.dy;
-            return Math.abs(along) > 8 && Math.abs(along) > Math.abs(across);
-        },
-        // Once it is ours it stays ours, for the same reason the Slider needs
-        // this: the default is to grant, and a ScrollView inside the drawer
-        // would take the drag back mid-swipe.
-        onPanResponderTerminationRequest: () => false,
-        onPanResponderMove: (_e, g) => {
-            const { vertical: v, side: sd } = gesture.current;
-            const raw = v ? g.dy : g.dx;
+    const pan = useMemo(() => {
+        const closingSign = side === "left" ? -1 : 1;
+        const gesture = Gesture.Pan().enabled(dismissible);
+        /* Claim only a drag heading the way the panel closes, and only once it is
+         * clearly a drag rather than a slow press — 8pt, the same threshold the
+         * old responder used. `failOffset` on the other axis is the half that
+         * `PanResponder` had no answer for: a finger moving across the panel is
+         * somebody scrolling its contents, and this hands that over rather than
+         * swallowing it. */
+        if (vertical) {
+            gesture.activeOffsetY(8).failOffsetX([-12, 12]);
+        }
+        else {
+            gesture.activeOffsetX(closingSign * 8).failOffsetY([-12, 12]);
+        }
+        return gesture
+            .onUpdate((event) => {
+            "worklet";
+            const raw = vertical ? event.translationY : event.translationX;
             // Clamped to the closing direction. Dragging a left drawer rightwards
             // should do nothing, not tear it off its edge.
-            const closing = sd === "left" ? Math.min(0, raw) : Math.max(0, raw);
-            // eslint-disable-next-line react-hooks/immutability
-            drag.value = closing;
-        },
-        onPanResponderRelease: (_e, g) => {
-            const { vertical: v, side: sd, extent: ex } = gesture.current;
-            const moved = Math.abs(v ? g.dy : g.dx);
-            const speed = Math.abs(v ? g.vy : g.vx);
-            // Half the panel, or a flick. The velocity term is what makes a short
-            // sharp swipe work — without it you have to drag the whole way, which
-            // is the difference between a drawer and a slow puzzle.
-            const dismiss = moved > ex / 2 || speed > 0.5;
-            if (dismiss) {
-                gesture.current.setOpen(false);
-                // Left where it is: the close animation runs from here, and resetting
-                // it first would snap the panel back before it left.
+            drag.value = closingSign < 0 ? Math.min(0, raw) : Math.max(0, raw);
+        })
+            .onEnd((event) => {
+            "worklet";
+            const moved = Math.abs(vertical ? event.translationY : event.translationX);
+            const speed = Math.abs(vertical ? event.velocityY : event.velocityX);
+            /* Half the panel, or a flick. The velocity term is what makes a short
+             * sharp swipe work — without it you have to drag the whole way, which
+             * is the difference between a drawer and a slow puzzle.
+             *
+             * Gesture-handler reports velocity in points per second where
+             * `PanResponder` reported points per millisecond, so the old `0.5`
+             * became 500. Same gesture, different unit — worth stating, because
+             * carrying the number across unchanged would have made a flick need to
+             * be a thousand times faster and looked like the velocity term simply
+             * not working.
+             */
+            if (moved > extent / 2 || speed > 500) {
+                // Left where it is: the close animation runs from here, and snapping
+                // it back first would show the panel returning before it left.
+                runOnJS(setOpen)(false);
                 return;
             }
-            // eslint-disable-next-line react-hooks/immutability
             drag.value = travelTo(0, { duration: durations.springSoft });
-        },
-        onPanResponderTerminate: () => {
+        })
+            .onFinalize((_event, success) => {
+            "worklet";
+            // A gesture cancelled by the system — an incoming call, a parent
+            // taking over — leaves the panel wherever the finger was.
+            if (!success)
+                drag.value = travelTo(0, { duration: durations.springSoft });
+        });
+    }, [dismissible, drag, extent, setOpen, side, vertical]);
+    /**
+     * Any leftover drag goes back as the panel opens, and is cleared once it is
+     * gone.
+     *
+     * Two moments, deliberately. Clearing on `open` going false was wrong: that
+     * happens the instant a swipe dismisses, so the panel jumped back to fully
+     * open and then slid out — exactly what the release handler above says must
+     * not happen (GRYT-429). `mounted` is the moment the panel is actually off
+     * screen, where a hard reset costs nothing to look at.
+     */
+    useEffect(() => {
+        if (open) {
             // eslint-disable-next-line react-hooks/immutability
             drag.value = travelTo(0, { duration: durations.springSoft });
         }
-    }));
-    /* eslint-enable react-hooks/refs */
-    // Cleared once the panel is closed, so the next open does not start from
-    // wherever the last swipe left it.
+    }, [open, drag]);
     useEffect(() => {
-        if (!open) {
+        if (!mounted) {
             // eslint-disable-next-line react-hooks/immutability
             drag.value = 0;
         }
-    }, [open, drag]);
-    return (_jsx(Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(AnimatedPressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: [{ flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, scrimStyle], children: _jsx(Animated.View, { accessibilityViewIsModal: true, ...responder.panHandlers, style: [
-                    {
-                        position: "absolute",
-                        // The overhang hangs *off* the edge the panel comes from, which
-                        // is the only direction that helps. It used to be added to the
-                        // width instead, so the panel grew inwards — 64pt more of the
-                        // screen covered, and the seam it was meant to hide still there,
-                        // because the gap opens on the entering edge and that is the edge
-                        // the extra material was not on.
-                        top: side === "bottom" ? undefined : 0,
-                        bottom: vertical ? -bleed : 0,
-                        left: side === "right" ? undefined : side === "left" ? -bleed : 0,
-                        right: side === "left" ? undefined : side === "right" ? -bleed : 0,
-                        width: vertical ? "100%" : panelExtent,
-                        height: vertical ? panelExtent : "100%",
-                        // Puts the content back where it would have been without the
-                        // overhang, so `size` still means what it says.
-                        paddingLeft: side === "left" ? bleed : 0,
-                        paddingRight: side === "right" ? bleed : 0,
-                        paddingBottom: vertical ? bleed : 0,
-                        backgroundColor: theme.color.surface,
-                        borderColor: theme.color.border,
-                        borderRightWidth: side === "left" ? 1 : 0,
-                        borderLeftWidth: side === "right" ? 1 : 0,
-                        borderTopWidth: vertical ? 1 : 0,
-                        borderTopLeftRadius: vertical ? theme.radius.lg : 0,
-                        borderTopRightRadius: vertical ? theme.radius.lg : 0
-                    },
-                    panelStyle
-                ], children: _jsx(Pressable, { onPress: () => { }, style: [
+    }, [mounted, drag]);
+    return (_jsx(Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: dismissible ? () => setOpen(false) : undefined, children: _jsx(AnimatedPressable, { onPress: dismissible ? () => setOpen(false) : undefined, style: [{ flex: 1, backgroundColor: "rgba(0,0,0,0.6)" }, scrimStyle], children: _jsx(GestureDetector, { gesture: pan, children: _jsx(Animated.View, { accessibilityViewIsModal: true, style: [
                         {
-                            flex: 1,
-                            // Before the caller's style, so a drawer that wants to run
-                            // under the island — a full-bleed image, say — still can.
-                            paddingTop: vertical ? 0 : insets.top,
-                            paddingBottom: insets.bottom
+                            position: "absolute",
+                            // The overhang hangs *off* the edge the panel comes from, which
+                            // is the only direction that helps. It used to be added to the
+                            // width instead, so the panel grew inwards — 64pt more of the
+                            // screen covered, and the seam it was meant to hide still there,
+                            // because the gap opens on the entering edge and that is the edge
+                            // the extra material was not on.
+                            top: side === "bottom" ? undefined : 0,
+                            bottom: vertical ? -bleed : 0,
+                            left: side === "right" ? undefined : side === "left" ? -bleed : 0,
+                            right: side === "left" ? undefined : side === "right" ? -bleed : 0,
+                            width: vertical ? "100%" : panelExtent,
+                            height: vertical ? panelExtent : "100%",
+                            // Puts the content back where it would have been without the
+                            // overhang, so `size` still means what it says.
+                            paddingLeft: side === "left" ? bleed : 0,
+                            paddingRight: side === "right" ? bleed : 0,
+                            paddingBottom: vertical ? bleed : 0,
+                            backgroundColor: theme.color.surface,
+                            borderColor: theme.color.border,
+                            borderRightWidth: side === "left" ? 1 : 0,
+                            borderLeftWidth: side === "right" ? 1 : 0,
+                            borderTopWidth: vertical ? 1 : 0,
+                            borderTopLeftRadius: vertical ? theme.radius.lg : 0,
+                            borderTopRightRadius: vertical ? theme.radius.lg : 0
                         },
-                        style
-                    ], children: children }) }) }) }));
+                        panelStyle
+                    ], children: _jsx(Pressable, { onPress: () => { }, style: [
+                            {
+                                flex: 1,
+                                // Before the caller's style, so a drawer that wants to run
+                                // under the island — a full-bleed image, say — still can.
+                                paddingTop: vertical ? 0 : insets.top,
+                                paddingBottom: insets.bottom
+                            },
+                            style
+                        ], children: children }) }) }) }) }));
 }
 function Close({ children, style }) {
     const { setOpen } = useDrawer("Close");

package/package.json

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