@gryt/ui-native 0.7.0 → 0.8.1

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

@@ -1,5 +1,6 @@
-import { type ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
+import { FlatList as GestureFlatList, ScrollView as GestureScrollView } from "react-native-gesture-handler";
 import { type OpenStateProps } from "../../overlay/useOpenState.js";
 export type DrawerSide = "left" | "right" | "bottom";
 export interface DrawerRootProps extends OpenStateProps {
@@ -26,12 +27,28 @@ declare function Close({ children, style }: {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
 }): import("react").JSX.Element;
+export type DrawerScrollViewProps = ComponentProps<typeof GestureScrollView>;
+/**
+ * The scroll view to use inside a drawer.
+ *
+ * React Native's own will not scroll in there: the drawer's pan and the scroll
+ * view's native recogniser both want the touch, and gesture-handler settles
+ * that by reference — which means the two have to know about each other. This
+ * is that introduction, and it is why the drawer hands you a scrollable rather
+ * than taking a prop pointing at one.
+ */
+declare function DrawerScrollView(props: DrawerScrollViewProps): import("react").JSX.Element;
+export type DrawerFlatListProps<ItemT> = ComponentProps<typeof GestureFlatList<ItemT>>;
+/** The same, for a list long enough to deserve one. */
+declare function DrawerFlatList<ItemT>(props: DrawerFlatListProps<ItemT>): import("react").JSX.Element;
 export declare const Drawer: {
     Root: typeof Root;
     Trigger: typeof Trigger;
     Portal: typeof Portal;
     Popup: typeof Popup;
     Close: typeof Close;
+    ScrollView: typeof DrawerScrollView;
+    FlatList: typeof DrawerFlatList;
 };
 export {};
 //# sourceMappingURL=Drawer.d.ts.map

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,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"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,QAAQ,IAAI,eAAe,EAG3B,UAAU,IAAI,iBAAiB,EAChC,MAAM,8BAA8B,CAAC;AAWtC,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AA6CrD,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,+BA+WlB;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;AAuBD,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE7E;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BAIrD;AAED,MAAM,MAAM,mBAAmB,CAAC,KAAK,IAAI,cAAc,CACrD,OAAO,eAAe,CAAC,KAAK,CAAC,CAC9B,CAAC;AAEF,uDAAuD;AACvD,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC,+BAI/D;AAED,eAAO,MAAM,MAAM;;;;;;;;CAQlB,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Dimensions, Modal, Pressable } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { FlatList as GestureFlatList, Gesture, GestureDetector, ScrollView as GestureScrollView } 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";
@@ -10,6 +10,7 @@ import { durations, travel as travelTo } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
 const DrawerContext = createContext(null);
+const DrawerScrollContext = createContext(null);
 function useDrawer(part) {
     const value = useContext(DrawerContext);
     if (!value)
@@ -206,6 +207,20 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
      * 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.
      */
+    /**
+     * Scrollables that have announced themselves, and the pan is rebuilt when one
+     * does.
+     *
+     * State rather than a ref precisely so it rebuilds: gesture-handler resolves
+     * these when the gesture is attached, and a child's ref is still empty at the
+     * detector's first attach. Registering flips this, the memo below runs again,
+     * and the detector re-attaches with something to point at.
+     */
+    const [scrollables, setScrollables] = useState([]);
+    const scrollRegistry = useMemo(() => ({
+        register: (ref) => setScrollables((current) => current.includes(ref) ? current : [...current, ref]),
+        unregister: (ref) => setScrollables((current) => current.filter((r) => r !== ref))
+    }), []);
     const pan = useMemo(() => {
         const closingSign = side === "left" ? -1 : 1;
         const gesture = Gesture.Pan().enabled(dismissible);
@@ -221,6 +236,17 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
         else {
             gesture.activeOffsetX(closingSign * 8).failOffsetY([-12, 12]);
         }
+        /* Let the scrollables run. Without this the drawer's recogniser competes
+         * with the scroll view's and wins, so a list inside the panel cannot move —
+         * which it could not, on either `PanResponder` or a bare pan (GRYT-431).
+         *
+         * "Simultaneous" overstates what happens: the axis rules above mean this
+         * pan does not activate on a vertical drag at all, so in practice the
+         * scroll view has it alone. What this removes is the blocking that was
+         * happening before either of them had decided anything. */
+        if (scrollables.length > 0) {
+            gesture.simultaneousWithExternalGesture(...scrollables);
+        }
         return gesture
             .onUpdate((event) => {
             "worklet";
@@ -259,7 +285,7 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
             if (!success)
                 drag.value = travelTo(0, { duration: durations.springSoft });
         });
-    }, [dismissible, drag, extent, setOpen, side, vertical]);
+    }, [dismissible, drag, extent, scrollables, setOpen, side, vertical]);
     /**
      * Any leftover drag goes back as the panel opens, and is cleared once it is
      * gone.
@@ -320,10 +346,58 @@ function Popup({ children, side = "left", size = 0.8, dismissible = true, style
                                 paddingBottom: insets.bottom
                             },
                             style
-                        ], children: children }) }) }) }) }));
+                        ], children: _jsx(DrawerScrollContext.Provider, { value: scrollRegistry, children: children }) }) }) }) }) }));
 }
 function Close({ children, style }) {
     const { setOpen } = useDrawer("Close");
     return (_jsx(Pressable, { accessibilityRole: "button", onPress: () => setOpen(false), style: style, children: children }));
 }
-export const Drawer = { Root, Trigger, Portal, Popup, Close };
+/**
+ * Announce a scrollable to the drawer around it, for as long as it is mounted.
+ *
+ * Silently does nothing outside a `Drawer.Popup`, which is the right answer for
+ * a component that is only ever a scroll view with one extra job — throwing
+ * would make it unusable in any shared piece that might or might not be in a
+ * drawer.
+ */
+function useRegisterScrollable(ref) {
+    const asExternal = ref;
+    const registry = useContext(DrawerScrollContext);
+    const register = registry?.register;
+    const unregister = registry?.unregister;
+    useEffect(() => {
+        if (!register || !unregister)
+            return;
+        register(asExternal);
+        return () => unregister(asExternal);
+    }, [asExternal, register, unregister]);
+}
+/**
+ * The scroll view to use inside a drawer.
+ *
+ * React Native's own will not scroll in there: the drawer's pan and the scroll
+ * view's native recogniser both want the touch, and gesture-handler settles
+ * that by reference — which means the two have to know about each other. This
+ * is that introduction, and it is why the drawer hands you a scrollable rather
+ * than taking a prop pointing at one.
+ */
+function DrawerScrollView(props) {
+    const ref = useRef(null);
+    useRegisterScrollable(ref);
+    return _jsx(GestureScrollView, { ref: ref, ...props });
+}
+/** The same, for a list long enough to deserve one. */
+function DrawerFlatList(props) {
+    const ref = useRef(null);
+    useRegisterScrollable(ref);
+    return _jsx(GestureFlatList, { ref: ref, ...props });
+}
+export const Drawer = {
+    Root,
+    Trigger,
+    Portal,
+    Popup,
+    Close,
+    ScrollView: DrawerScrollView,
+    FlatList: DrawerFlatList
+};

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,+BA8LtD;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;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"}

package/dist/components/Sheet/Sheet.js

@@ -4,7 +4,7 @@ import { Pressable, Text, View } from "react-native";
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView, useBottomSheetTimingConfigs, } from "@gorhom/bottom-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { grytDrawerBleed } from "@gryt/theme";
-import { durations, easeSpring } from "../../motion/index.js";
+import { durations, easeSpringTight } from "../../motion/index.js";
 import { useOpenState } from "../../overlay/useOpenState.js";
 import { useTheme } from "../../theme/index.js";
 /** Mount once, at the root. See the note above for why it is required. */
@@ -147,10 +147,22 @@ function Content({ children, style }) {
      * bottom edge and covers nearly all of it. The same duration over a longer
      * distance is a faster animation, and at 700 this arrived quickly enough to
      * read as a snap rather than a slide.
+     *
+     * **`easeSpringTight`, not `easeSpring`.** This used the loose curve and
+     * bounced, and the two are labelled in `easing.ts` in a way that decides it:
+     * `easeSpring` "overshoots ~12%, for things that scale in place", and
+     * `easeSpringTight` is "critically damped, no overshoot, for things that
+     * travel inside bounds". A sheet sliding up from the bottom edge to a snap
+     * point is the second thing, not the first — so this was the wrong curve by
+     * the package's own rule, and it is the curve the Drawer already uses.
+     *
+     * Overshoot on a sheet is worse than on a button, too: the thing that
+     * overshoots is the top edge, so it travels past its snap point and comes
+     * back, which reads as the sheet failing to land rather than as bounce.
      */
     const animationConfigs = useBottomSheetTimingConfigs({
         duration: durations.springSlow,
-        easing: easeSpring,
+        easing: easeSpringTight,
     });
     const renderBackdrop = useCallback((props) => (_jsx(BottomSheetBackdrop, { ...props, appearsOnIndex: 0, disappearsOnIndex: -1, 
         // Tracks the drag, so dragging the sheet down lightens the scrim

package/package.json

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