@expofp/ui 3.42.1 → 3.43.1

package/dist/components/Overlay/Overlay.js

@@ -130,7 +130,7 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
     const { onPointerDown } = useSheetDrag({
         enabled: mobile && !disableDrag && !forceFull,
         panelRef: overlayPanelRef,
-        scrollRef,
+        scrollElement,
         snapPoints,
         current: currentSnap,
         openedAtRef,

package/dist/shared/hooks/useSheetDrag.d.ts

@@ -6,7 +6,8 @@ export interface SnapPoint<T extends string> {
 interface UseSheetDragOptions<T extends string> {
     enabled: boolean;
     panelRef: RefObject<HTMLDivElement | null>;
-    scrollRef: RefObject<HTMLDivElement | null>;
+    /** An element, not a ref: the touchmove listener has to follow it as it mounts. */
+    scrollElement: HTMLDivElement | null;
     /** Ascending by height; the last one is the tallest. */
     snapPoints: readonly SnapPoint<T>[];
     current: T;
@@ -20,7 +21,7 @@ interface UseSheetDragOptions<T extends string> {
     onSettle: () => void;
     onHandleTap: () => void;
 }
-export declare function useSheetDrag<T extends string>({ enabled, panelRef, scrollRef, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }: UseSheetDragOptions<T>): {
+export declare function useSheetDrag<T extends string>({ enabled, panelRef, scrollElement, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }: UseSheetDragOptions<T>): {
     onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
 };
 export {};

package/dist/shared/hooks/useSheetDrag.js

@@ -31,7 +31,20 @@ const readOffset = (panel) => {
         return null;
     }
 };
-export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }) {
+/** Whether a horizontal scroller — a chip row, a gallery strip — sits under the finger. */
+const scrollsSideways = (target, panel) => {
+    let element = target instanceof Element ? target : null;
+    while (element && panel?.contains(element)) {
+        if (element.scrollWidth > element.clientWidth) {
+            const { overflowX } = getComputedStyle(element);
+            if (overflowX === 'auto' || overflowX === 'scroll')
+                return true;
+        }
+        element = element.parentElement;
+    }
+    return false;
+};
+export function useSheetDrag({ enabled, panelRef, scrollElement, snapPoints, current, openedAtRef, onDragStart, onSnap, onSettle, onHandleTap, }) {
     const gestureRef = useRef(null);
     const scrollBlockedAtRef = useRef(0);
     const settleRef = useRef(null);
@@ -142,11 +155,44 @@ export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current
         const startOffset = liveOffset ?? offsetOf(stateRef.current.current);
         const gesture = {
             pointerId: event.pointerId,
+            startX: event.clientX,
             startY: event.clientY,
+            lastY: event.clientY,
             startTime: performance.now(),
             startOffset,
             offset: startOffset,
             committed: false,
+            commit: (clientX, clientY) => {
+                if (gesture.committed)
+                    return true;
+                const deltaX = clientX - gesture.startX;
+                const deltaY = clientY - gesture.startY;
+                if (Math.hypot(deltaX, deltaY) < MOVE_TOLERANCE)
+                    return false;
+                if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                    // A sideways move belongs to a chip row or gallery strip under the finger. Anywhere
+                    // else it is the finger settling, which says nothing about the direction yet.
+                    if (scrollsSideways(event.target, panelRef.current))
+                        stop();
+                    return false;
+                }
+                if (!shouldDrag(event.target, deltaY > 0)) {
+                    stop();
+                    return false;
+                }
+                gesture.committed = true;
+                try {
+                    panelRef.current?.setPointerCapture(gesture.pointerId);
+                }
+                catch {
+                    // Throws when the pointer is already gone; the window listeners
+                    // below carry the gesture either way.
+                }
+                if (scrollElement)
+                    scrollElement.style.overflow = 'hidden';
+                callbacksRef.current.onDragStart();
+                return true;
+            },
         };
         gestureRef.current = gesture;
         const stop = () => {
@@ -161,9 +207,8 @@ export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current
             if (endEvent.pointerId !== gesture.pointerId)
                 return;
             stop();
-            const scrollEl = scrollRef.current;
-            if (scrollEl)
-                scrollEl.style.removeProperty('overflow');
+            if (scrollElement)
+                scrollElement.style.removeProperty('overflow');
             if (!gesture.committed) {
                 const target = event.target;
                 if (target instanceof Element && target.closest('[data-sheet-handle]')) {
@@ -171,7 +216,7 @@ export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current
                 }
                 return;
             }
-            const distance = gesture.startY - endEvent.clientY;
+            const distance = gesture.startY - gesture.lastY;
             const elapsed = Math.max(performance.now() - gesture.startTime, 1);
             const velocity = Math.abs(distance) / elapsed;
             const target = resolveTarget(gesture.offset, distance, velocity);
@@ -182,27 +227,10 @@ export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current
         const handleMove = (moveEvent) => {
             if (moveEvent.pointerId !== gesture.pointerId)
                 return;
+            gesture.lastY = moveEvent.clientY;
+            if (!gesture.commit(moveEvent.clientX, moveEvent.clientY))
+                return;
             const delta = moveEvent.clientY - gesture.startY;
-            if (!gesture.committed) {
-                if (Math.abs(delta) < MOVE_TOLERANCE)
-                    return;
-                if (!shouldDrag(event.target, delta > 0)) {
-                    stop();
-                    return;
-                }
-                gesture.committed = true;
-                try {
-                    panelRef.current?.setPointerCapture(gesture.pointerId);
-                }
-                catch {
-                    // Throws when the pointer is already gone; the window listeners
-                    // below carry the gesture either way.
-                }
-                const scrollEl = scrollRef.current;
-                if (scrollEl)
-                    scrollEl.style.overflow = 'hidden';
-                callbacksRef.current.onDragStart();
-            }
             const limit = offsetOf(stateRef.current.snapPoints[0].name);
             const raw = gesture.startOffset + delta;
             const offset = raw < 0 ? -dampen(-raw) : raw > limit ? limit + dampen(raw - limit) : raw;
@@ -219,9 +247,28 @@ export function useSheetDrag({ enabled, panelRef, scrollRef, snapPoints, current
         panelRef,
         resolveTarget,
         scheduleSettle,
-        scrollRef,
+        scrollElement,
         shouldDrag,
         writeOffset,
     ]);
+    // Non-passive, so bound natively (React's touch listeners are passive), and in place before the
+    // touch starts. A drag that starts on the content must keep the browser from scrolling it: a
+    // native scroll takes the touch over and cancels the pointer mid-drag (#1686). Once that scroll
+    // starts, touchmoves are no longer cancelable, and a pointermove can arrive a frame after its
+    // touchmove, so the drag is decided here as well.
+    useEffect(() => {
+        if (!scrollElement || !enabled)
+            return;
+        const handleTouchMove = (event) => {
+            const gesture = gestureRef.current;
+            const touch = event.targetTouches[0];
+            if (!gesture || !touch || !event.cancelable)
+                return;
+            if (gesture.commit(touch.clientX, touch.clientY))
+                event.preventDefault();
+        };
+        scrollElement.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => scrollElement.removeEventListener('touchmove', handleTouchMove);
+    }, [scrollElement, enabled]);
     return { onPointerDown };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/ui",
-  "version": "3.42.1",
+  "version": "3.43.1",
   "type": "module",
   "description": "ExpoFP SDK internal: shared pure React UI components",
   "homepage": "https://developer.expofp.com/",