@base-ui/react 1.6.0 → 1.7.0

package/drawer/viewport/DrawerViewport.mjs

@@ -6,15 +6,16 @@ import { isElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.mjs";
 import { DialogViewport } from "../../dialog/viewport/DialogViewport.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
 import { useDrawerRootContext } from "../root/DrawerRootContext.mjs";
-import { getSnapPointSwipeMovement, useDrawerSnapPoints } from "../root/useDrawerSnapPoints.mjs";
+import { closestSnapPointIndex, getSnapPointSwipeMovement, useDrawerSnapPoints } from "../root/useDrawerSnapPoints.mjs";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.mjs";
 import { clamp } from "../../internals/clamp.mjs";
-import { useSwipeDismiss } from "../../utils/useSwipeDismiss.mjs";
+import { getDisplacement, useSwipeDismiss } from "../../utils/useSwipeDismiss.mjs";
 import { DrawerPopupCssVars } from "../popup/DrawerPopupCssVars.mjs";
 import { DrawerPopupDataAttributes } from "../popup/DrawerPopupDataAttributes.mjs";
 import { DrawerBackdropCssVars } from "../backdrop/DrawerBackdropCssVars.mjs";
@@ -40,6 +41,8 @@ const MIN_SWIPE_RELEASE_DURATION_MS = 80;
 const MAX_SWIPE_RELEASE_DURATION_MS = 360;
 const MIN_SWIPE_RELEASE_SCALAR = 0.1;
 const MAX_SWIPE_RELEASE_SCALAR = 1;
+const AXIS_LOCK_SLOP = 6;
+const AXIS_LOCK_BIAS = 2;
 const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
@@ -55,9 +58,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     children,
     ...elementProps
   } = props;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const popupRef = store.context.popupRef;
   const backdropRef = store.context.backdropRef;
   const {
@@ -65,9 +66,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     notifyParentSwipingChange,
     notifyParentSwipeProgressChange,
     frontmostHeight,
-    snapToSequentialPoints
+    snapToSequentialPoints,
+    swipeAreaActiveRef
   } = useDrawerRootContext();
-  const providerContext = useDrawerProviderContext(true);
+  const providerContext = useDrawerProviderContext();
   const {
     snapPoints,
     resolvedSnapPoints,
@@ -99,30 +101,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   const touchScrollStateRef = React.useRef(null);
   const virtualKeyboard = useDrawerVirtualKeyboardContext();
   const snapPointRange = React.useMemo(() => {
-    if (!snapPoints || snapPoints.length < 2) {
-      return null;
-    }
-    if (swipeDirection !== 'down' && swipeDirection !== 'up') {
-      return null;
-    }
-    if (resolvedSnapPoints.length < 2) {
-      return null;
-    }
-    const offsets = resolvedSnapPoints.map(point => point.offset).filter(offset => Number.isFinite(offset)).sort((a, b) => a - b);
-    if (offsets.length < 2) {
+    if (!snapPoints || snapPoints.length < 2 || resolvedSnapPoints.length < 2 || swipeDirection !== 'down' && swipeDirection !== 'up') {
       return null;
     }
+    const offsets = resolvedSnapPoints.map(point => point.offset).sort((a, b) => a - b);
     const minOffset = offsets[0];
     const nextOffset = offsets[1];
-    const maxOffset = offsets[offsets.length - 1];
-    let range = nextOffset - minOffset;
-    if (!Number.isFinite(range) || range <= 0) {
-      const fallbackRange = maxOffset - minOffset;
-      if (!Number.isFinite(fallbackRange) || fallbackRange <= 0) {
-        return null;
-      }
-      range = fallbackRange;
-    }
+    const range = nextOffset - minOffset;
     return {
       minOffset,
       range
@@ -141,7 +126,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     return [swipeDirection];
   }, [snapPoints, swipeDirection]);
   const setSwipeDismissed = useStableCallback(dismissed => {
-    setSwipeDismissedElements(popupRef.current, backdropRef.current, dismissed);
+    popupRef.current?.toggleAttribute(DrawerPopupDataAttributes.swipeDismiss, dismissed);
+    backdropRef.current?.toggleAttribute(DrawerPopupDataAttributes.swipeDismiss, dismissed);
   });
   const clearSwipeRelease = useStableCallback(() => {
     setSwipeDismissed(false);
@@ -155,11 +141,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     nestedSwipeActiveRef.current = false;
     notifyParentSwipingChange?.(false);
   });
-  const applySwipeProgress = useStableCallback(({
-    resolvedProgress,
-    shouldTrackProgress,
-    notifyParent
-  }) => {
+  const applySwipeProgress = useStableCallback((resolvedProgress, shouldTrackProgress, notifyParent) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
     const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
@@ -177,78 +159,48 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     if (!backdropElement) {
       return;
     }
-    if (!isActive || swipeProgress <= 0) {
-      backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
-      backdropElement.style.removeProperty(DrawerPopupCssVars.height);
-      return;
-    }
-    backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
-    if (frontmostHeight > 0) {
+    const showProgress = isActive && swipeProgress > 0;
+    backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, showProgress ? `${swipeProgress}` : '0');
+    if (showProgress && frontmostHeight > 0) {
       backdropElement.style.setProperty(DrawerPopupCssVars.height, `${frontmostHeight}px`);
     } else {
       backdropElement.style.removeProperty(DrawerPopupCssVars.height);
     }
   });
-  function resolveSwipeRelease({
-    direction,
-    deltaX,
-    deltaY,
-    velocityX,
-    velocityY,
-    releaseVelocityX,
-    releaseVelocityY
-  }) {
-    if (!direction) {
+  function resolveSwipeRelease(popupElement, direction, deltaX, deltaY, velocityX, velocityY, releaseVelocityX, releaseVelocityY) {
+    const size = getBaseSwipeSize(popupElement, direction);
+    if (size <= 0) {
       return null;
     }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return null;
-    }
-    const size = direction === 'left' || direction === 'right' ? popupElement.offsetWidth : popupElement.offsetHeight;
-    if (!Number.isFinite(size) || size <= 0) {
-      return null;
-    }
-    const axisDelta = direction === 'left' || direction === 'right' ? deltaX : deltaY;
-    const snapPointBaseOffset = snapPoints && snapPoints.length > 0 ? activeSnapPointOffset ?? 0 : 0;
-    let baseOffset = 0;
-    if (direction === 'down') {
-      baseOffset = snapPointBaseOffset;
-    } else if (direction === 'up') {
-      baseOffset = -snapPointBaseOffset;
-    }
-    const translation = baseOffset + axisDelta;
-    const translationAlongDirection = direction === 'left' || direction === 'up' ? -translation : translation;
+
+    // The snap point base offset shifts the popup along the dismiss direction for both
+    // `down` (+offset) and `up` (-offset), so it always adds to the directional translation.
+    const snapPointBaseOffset = (direction === 'down' || direction === 'up') && snapPoints && snapPoints.length > 0 ? activeSnapPointOffset ?? 0 : 0;
+    const translationAlongDirection = snapPointBaseOffset + getDisplacement(direction, deltaX, deltaY);
     const remainingDistance = Math.max(0, size - translationAlongDirection);
-    if (!Number.isFinite(remainingDistance) || remainingDistance <= 0) {
+    if (remainingDistance <= 0) {
       return null;
     }
-    const axisVelocity = direction === 'left' || direction === 'right' ? releaseVelocityX : releaseVelocityY;
-    const fallbackVelocity = direction === 'left' || direction === 'right' ? velocityX : velocityY;
-    const resolvedVelocity = Math.abs(axisVelocity) > 0 && Number.isFinite(axisVelocity) ? axisVelocity : fallbackVelocity;
-    const directionalVelocity = direction === 'left' || direction === 'up' ? -resolvedVelocity : resolvedVelocity;
-    if (!Number.isFinite(directionalVelocity) || directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) {
+    const releaseVelocity = getDisplacement(direction, releaseVelocityX, releaseVelocityY);
+    const directionalVelocity = Math.abs(releaseVelocity) > 0 ? releaseVelocity : getDisplacement(direction, velocityX, velocityY);
+    if (directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) {
       return null;
     }
     const clampedVelocity = clamp(directionalVelocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);
+    // The gesture hook supplies finite deltas and velocities. The guards above keep the remaining
+    // distance and divisor positive, so the duration stays within [MIN, MAX] and the resulting
+    // scalar within (0, 1].
     const durationMs = clamp(remainingDistance / clampedVelocity, MIN_SWIPE_RELEASE_DURATION_MS, MAX_SWIPE_RELEASE_DURATION_MS);
-    if (!Number.isFinite(durationMs)) {
-      return null;
-    }
     const normalizedDuration = (durationMs - MIN_SWIPE_RELEASE_DURATION_MS) / (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS);
-    const durationScalar = clamp(MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR), MIN_SWIPE_RELEASE_SCALAR, MAX_SWIPE_RELEASE_SCALAR);
-    if (!Number.isFinite(durationScalar) || durationScalar <= 0) {
-      return null;
-    }
-    return durationScalar;
+    return MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR);
   }
   function updateNestedSwipeActive(details) {
     if (nestedSwipeActiveRef.current || !details) {
       return;
     }
     const direction = details.direction ?? swipeDirection;
-    const delta = direction === 'left' || direction === 'right' ? details.deltaX : details.deltaY;
-    if (!Number.isFinite(delta) || Math.abs(delta) < MIN_SWIPE_THRESHOLD) {
+    const delta = getDisplacement(direction, details.deltaX, details.deltaY);
+    if (Math.abs(delta) < MIN_SWIPE_THRESHOLD) {
       return;
     }
     nestedSwipeActiveRef.current = true;
@@ -265,13 +217,10 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       y: DrawerPopupCssVars.swipeMovementY
     },
     onSwipeStart(event) {
-      if ('touches' in event || 'pointerType' in event && event.pointerType === 'touch') {
+      if ('touches' in event || event.pointerType === 'touch') {
         return;
       }
       const popupElement = popupRef.current;
-      if (!popupElement) {
-        return;
-      }
       const doc = ownerDocument(popupElement);
       const selection = doc.getSelection?.();
       if (!selection || selection.isCollapsed) {
@@ -303,54 +252,38 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         return false;
       }
       const doc = popupElement.ownerDocument;
-      const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+      const elementAtPoint = getElementAtPoint(popupElement.getRootNode(), position.x, position.y);
       if (!elementAtPoint || !contains(popupElement, elementAtPoint)) {
         return false;
       }
       const nativeEvent = details.nativeEvent;
-      const touchLike = 'touches' in nativeEvent || 'pointerType' in nativeEvent && nativeEvent.pointerType === 'touch';
+      const touchLike = 'touches' in nativeEvent || nativeEvent.pointerType === 'touch';
       if (touchLike && shouldIgnoreSwipeForTextSelection(doc, popupElement)) {
         return false;
       }
-      if (nativeEvent.type === 'touchstart' && isSwipeIgnoredTarget(elementAtPoint)) {
-        return false;
-      }
       return true;
     },
     onProgress(progress, details) {
       updateNestedSwipeActive(details);
       const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0);
-      if (swipingRef.current && swipeDirection === 'down' && hasSnapPoints && details && Number.isFinite(details.deltaY)) {
+      if (swipingRef.current && swipeDirection === 'down' && hasSnapPoints && details) {
         const popupElement = store.context.popupRef.current;
         if (popupElement) {
           popupElement.style.removeProperty('transform');
           popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementY, `${getSnapPointSwipeMovement(activeSnapPointOffset ?? 0, details.deltaY)}px`);
         }
       }
-      const currentDirection = details?.direction ?? swipe.swipeDirection;
-      const isDismissSwipe = currentDirection === undefined || currentDirection === swipeDirection;
-      const isVerticalSwipe = swipeDirection === 'down' || swipeDirection === 'up';
-      const shouldTrackProgress = hasSnapPoints && isVerticalSwipe || !hasSnapPoints || swipeDirection === 'left' || swipeDirection === 'right' || isDismissSwipe;
       let resolvedProgress = progress;
       if (snapPointRange && popupHeight > 0) {
+        const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
+        const offsetToProgress = nextOffset => clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
         if (details && Number.isFinite(details.deltaY)) {
-          const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
-          const nextOffset = clamp(baseOffset + details.deltaY, 0, popupHeight);
-          resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
+          resolvedProgress = offsetToProgress(clamp(baseOffset + details.deltaY, 0, popupHeight));
         } else if (snapPointProgress !== null) {
           resolvedProgress = snapPointProgress;
-        } else if (currentDirection === 'down' || currentDirection === 'up') {
-          const displacement = progress * popupHeight;
-          const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
-          const nextOffset = currentDirection === 'down' ? baseOffset + displacement : baseOffset - displacement;
-          resolvedProgress = clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
         }
       }
-      applySwipeProgress({
-        resolvedProgress,
-        shouldTrackProgress,
-        notifyParent: true
-      });
+      applySwipeProgress(resolvedProgress, true, true);
     },
     onRelease({
       event,
@@ -362,30 +295,21 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       releaseVelocityX,
       releaseVelocityY
     }) {
-      const swipeReleasePayload = {
-        deltaX,
-        deltaY,
-        velocityX,
-        velocityY,
-        releaseVelocityX,
-        releaseVelocityY
-      };
+      const popupElement = store.context.popupRef.current;
+      if (!popupElement) {
+        clearSwipeRelease();
+        return undefined;
+      }
+      const releasePopupElement = popupElement;
       function startSwipeRelease(resolvedDirection) {
         // Start ending transition styles earlier and synchronously to prevent a period where
         // the popup appears stuck on release before the actual closing animation starts.
-        const popupElement = store.context.popupRef.current;
-        if (!popupElement) {
-          return;
-        }
         finishNestedSwipe();
         setSwipeDismissed(true);
-        popupElement.style.removeProperty('transition');
-        popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
+        releasePopupElement.style.removeProperty('transition');
+        releasePopupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
         ReactDOM.flushSync(() => {
-          setSwipeRelease(resolveSwipeRelease({
-            direction: resolvedDirection,
-            ...swipeReleasePayload
-          }));
+          setSwipeRelease(resolveSwipeRelease(releasePopupElement, resolvedDirection, deltaX, deltaY, velocityX, velocityY, releaseVelocityX, releaseVelocityY));
         });
       }
       if (!snapPoints || snapPoints.length === 0) {
@@ -393,29 +317,16 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           clearSwipeRelease();
           return undefined;
         }
-        const element = store.context.popupRef.current;
-        if (!element) {
-          clearSwipeRelease();
-          return undefined;
-        }
-        const baseThreshold = getBaseSwipeThreshold(element, direction);
-        const delta = direction === 'left' || direction === 'right' ? deltaX : deltaY;
-        if (!Number.isFinite(delta)) {
-          clearSwipeRelease();
-          return undefined;
-        }
-        const directionalDelta = direction === 'left' || direction === 'up' ? -delta : delta;
+        const directionalDelta = getDisplacement(direction, deltaX, deltaY);
         if (directionalDelta <= 0) {
           clearSwipeRelease();
           return false;
         }
-        const velocity = direction === 'left' || direction === 'right' ? velocityX : velocityY;
-        const directionalVelocity = direction === 'left' || direction === 'up' ? -velocity : velocity;
-        if (directionalVelocity >= FAST_SWIPE_VELOCITY && directionalDelta > 0) {
+        if (getDisplacement(direction, velocityX, velocityY) >= FAST_SWIPE_VELOCITY) {
           startSwipeRelease(direction);
           return true;
         }
-        const shouldClose = directionalDelta > baseThreshold;
+        const shouldClose = directionalDelta > getBaseSwipeThreshold(releasePopupElement, direction);
         if (shouldClose) {
           startSwipeRelease(direction);
         } else {
@@ -427,20 +338,20 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         clearSwipeRelease();
         return undefined;
       }
-      if (!popupHeight || resolvedSnapPoints.length === 0) {
+      if (!popupHeight) {
         clearSwipeRelease();
-        return undefined;
+        return false;
       }
-      const dragDelta = swipeDirection === 'down' ? deltaY : -deltaY;
-      if (!Number.isFinite(dragDelta)) {
+      if (resolvedSnapPoints.length === 0) {
         clearSwipeRelease();
         return undefined;
       }
+      const dragDelta = swipeDirection === 'down' ? deltaY : -deltaY;
       const dragDirection = Math.sign(dragDelta);
       const releaseDirectionalVelocity = swipeDirection === 'down' ? releaseVelocityY : -releaseVelocityY;
       const fallbackDirectionalVelocity = swipeDirection === 'down' ? velocityY : -velocityY;
-      let resolvedDirectionalVelocity = Number.isFinite(releaseDirectionalVelocity) ? releaseDirectionalVelocity : fallbackDirectionalVelocity;
-      if (dragDirection !== 0 && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD && Number.isFinite(resolvedDirectionalVelocity)) {
+      let resolvedDirectionalVelocity = releaseDirectionalVelocity;
+      if (dragDirection !== 0 && Math.abs(dragDelta) >= MIN_SWIPE_THRESHOLD) {
         const velocityDirection = Math.sign(resolvedDirectionalVelocity);
         if (velocityDirection !== 0 && velocityDirection !== dragDirection) {
           // Ignore touch reversals that would otherwise flip the snap decision.
@@ -449,39 +360,20 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       }
       const currentOffset = activeSnapPointOffset ?? 0;
       const dragTargetOffset = clamp(currentOffset + dragDelta, 0, popupHeight);
-      const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
+      const velocityOffset = Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
       const targetOffset = snapToSequentialPoints ? dragTargetOffset : clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
       const snapPointEventDetails = createChangeEventDetails(REASONS.swipe, event);
       const closeFromSnapPoints = () => {
         pendingSwipeCloseSnapPointRef.current = activeSnapPoint;
-        setActiveSnapPoint?.(null, snapPointEventDetails);
+        setActiveSnapPoint(null, snapPointEventDetails);
         startSwipeRelease(swipeDirection);
         return true;
       };
       if (snapToSequentialPoints) {
         const orderedSnapPoints = [...resolvedSnapPoints].sort((first, second) => first.offset - second.offset);
-        if (orderedSnapPoints.length === 0) {
-          clearSwipeRelease();
-          return false;
-        }
-        let currentIndex = 0;
-        let closestDistance = Math.abs(currentOffset - orderedSnapPoints[0].offset);
-        for (let index = 1; index < orderedSnapPoints.length; index += 1) {
-          const distance = Math.abs(currentOffset - orderedSnapPoints[index].offset);
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            currentIndex = index;
-          }
-        }
-        let targetSnapPoint = orderedSnapPoints[0];
-        closestDistance = Math.abs(targetOffset - targetSnapPoint.offset);
-        for (const snapPoint of orderedSnapPoints) {
-          const distance = Math.abs(targetOffset - snapPoint.offset);
-          if (distance < closestDistance) {
-            closestDistance = distance;
-            targetSnapPoint = snapPoint;
-          }
-        }
+        const orderedOffsets = orderedSnapPoints.map(point => point.offset);
+        const currentIndex = closestSnapPointIndex(orderedOffsets, currentOffset);
+        let targetSnapPoint = orderedSnapPoints[closestSnapPointIndex(orderedOffsets, targetOffset)];
         const velocityDirection = Math.sign(resolvedDirectionalVelocity);
         const shouldAdvance = dragDirection !== 0 && velocityDirection !== 0 && velocityDirection === dragDirection && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD;
         let effectiveTargetOffset = targetOffset;
@@ -498,34 +390,24 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
             return closeFromSnapPoints();
           }
         }
-        const closeOffset = popupHeight;
-        const closeDistance = Math.abs(effectiveTargetOffset - closeOffset);
+        const closeDistance = Math.abs(effectiveTargetOffset - popupHeight);
         const snapDistance = Math.abs(effectiveTargetOffset - targetSnapPoint.offset);
         if (closeDistance < snapDistance) {
           return closeFromSnapPoints();
         }
-        setActiveSnapPoint?.(targetSnapPoint.value, snapPointEventDetails);
+        setActiveSnapPoint(targetSnapPoint.value, snapPointEventDetails);
         clearSwipeRelease();
         return false;
       }
       if (resolvedDirectionalVelocity >= FAST_SWIPE_VELOCITY && dragDelta > 0) {
         return closeFromSnapPoints();
       }
-      let closestSnapPoint = resolvedSnapPoints[0];
-      let closestDistance = Math.abs(targetOffset - closestSnapPoint.offset);
-      for (const snapPoint of resolvedSnapPoints) {
-        const distance = Math.abs(targetOffset - snapPoint.offset);
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestSnapPoint = snapPoint;
-        }
-      }
-      const closeOffset = popupHeight;
-      const closeDistance = Math.abs(targetOffset - closeOffset);
-      if (closeDistance < closestDistance) {
+      const closestSnapPoint = resolvedSnapPoints[closestSnapPointIndex(resolvedSnapPoints.map(point => point.offset), targetOffset)];
+      const closeDistance = Math.abs(targetOffset - popupHeight);
+      if (closeDistance < Math.abs(targetOffset - closestSnapPoint.offset)) {
         return closeFromSnapPoints();
       }
-      setActiveSnapPoint?.(closestSnapPoint.value, snapPointEventDetails);
+      setActiveSnapPoint(closestSnapPoint.value, snapPointEventDetails);
       clearSwipeRelease();
       return false;
     },
@@ -544,7 +426,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       if (dismissEventDetails.isCanceled) {
         const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
         if (pendingSnapPoint !== undefined) {
-          setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(REASONS.swipe, event));
+          setActiveSnapPoint(pendingSnapPoint, createChangeEventDetails(REASONS.swipe, event));
         }
         pendingSwipeCloseSnapPointRef.current = undefined;
         resetSwipeRef.current?.();
@@ -566,7 +448,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
             // Parent rejected: revert animation and restore snap point.
             const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
             if (pendingSnapPoint !== undefined) {
-              setActiveSnapPoint?.(pendingSnapPoint, createChangeEventDetails(REASONS.swipe, savedEvent));
+              setActiveSnapPoint(pendingSnapPoint, createChangeEventDetails(REASONS.swipe, savedEvent));
             }
             pendingSwipeCloseSnapPointRef.current = undefined;
             clearSwipeRelease();
@@ -596,42 +478,18 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     }
     const resolvedRootElement = rootElement;
     const doc = ownerDocument(resolvedRootElement);
-    const win = ownerWindow(doc);
-    function handleNativeTouchMove(event) {
-      // The virtual keyboard provider observes the move to tell a tap apart from a drag.
-      // It must run even when the swipe gesture below claims the event with
-      // `stopPropagation()`, which would otherwise prevent React's delegated handlers
-      // (and the provider) from ever seeing the move.
-      virtualKeyboard?.onTouchMove(event);
-      if (ignoreTouchSwipeRef.current) {
-        return;
-      }
-      const touchState = touchScrollStateRef.current;
-      const touch = event.touches[0];
-      if (!touch || !touchState) {
-        return;
-      }
+    function processTouchMove(event, touchState, touch) {
       const drawerAxisDelta = isVerticalScrollAxis ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
 
-      // Preserve native range interaction by never locking touchmove for range inputs.
-      if (isEventOnRangeInput(event, win)) {
-        touchState.allowSwipe = false;
-        updateTouchScrollPosition(touchState, touch);
-        return;
-      }
-
       // Avoid blocking pinch zoom or text selection adjustments on iOS Safari.
       if (event.touches.length === 2) {
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
       if (allowTouchMove || !open || !mounted || nestedDrawerOpen) {
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) {
-        updateTouchScrollPosition(touchState, touch);
+      if (shouldYieldTouchMove(touchState, event, touch, isVerticalScrollAxis)) {
         return;
       }
       const scrollTarget = touchState.scrollTarget;
@@ -643,27 +501,21 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         // move through React re-rasterizes the popup content on every frame.
         event.stopPropagation();
         moveSwipeNative(event, resolvedRootElement);
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
-      if (!hasScrollableContent) {
+      if (!hasScrollableContentOnAxis(scrollTarget, scrollAxis)) {
         // If the scroll container doesn't overflow on the drawer axis, prevent the window from
         // scrolling instead.
         if (event.cancelable) {
           event.preventDefault();
         }
         event.stopPropagation();
-        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const delta = drawerAxisDelta;
-      if (delta !== 0) {
-        const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
+      if (drawerAxisDelta !== 0) {
+        const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, drawerAxisDelta);
         if (!touchState.allowSwipe) {
-          if (!event.cancelable) {
-            touchState.allowSwipe = false;
-          } else if (canSwipeFromScrollEdge) {
+          if (event.cancelable && canSwipeFromScrollEdge) {
             touchState.allowSwipe = true;
             event.preventDefault();
           } else {
@@ -677,6 +529,22 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         event.stopPropagation();
         moveSwipeNative(event, resolvedRootElement);
       }
+    }
+    function handleNativeTouchMove(event) {
+      // The virtual keyboard provider observes the move to tell a tap apart from a drag.
+      // It must run even when the swipe gesture below claims the event with
+      // `stopPropagation()`, which would otherwise prevent React's delegated handlers
+      // (and the provider) from ever seeing the move.
+      virtualKeyboard?.onTouchMove(event);
+      if (ignoreTouchSwipeRef.current) {
+        return;
+      }
+      const touchState = touchScrollStateRef.current;
+      const touch = event.touches[0];
+      if (!touch || !touchState) {
+        return;
+      }
+      processTouchMove(event, touchState, touch);
       updateTouchScrollPosition(touchState, touch);
     }
     return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
@@ -684,18 +552,13 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       capture: true
     });
   }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, moveSwipeNative, viewportElement, virtualKeyboard]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!snapPointRange || swipe.swiping) {
       return;
     }
-    const resolvedProgress = !open || nested ? 0 : snapPointProgress ?? 0;
-    applySwipeProgress({
-      resolvedProgress,
-      shouldTrackProgress: true,
-      notifyParent: false
-    });
+    applySwipeProgress(!open || nested ? 0 : snapPointProgress ?? 0, true, false);
   }, [applySwipeProgress, frontmostHeight, nested, notifyParentSwipeProgressChange, open, snapPointProgress, snapPointRange, swipe.swiping, store, visualStateStore]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (!notifyParentSwipeProgressChange) {
       return undefined;
     }
@@ -706,13 +569,19 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
       notifyParentSwipeProgressChange(0);
     };
   }, [notifyParentSwipeProgressChange, open]);
-  React.useEffect(() => {
+  useIsoLayoutEffect(() => {
     if (open) {
-      resetSwipe();
+      // Skip `resetSwipe` while `Drawer.SwipeArea` is driving the open: it zeroes the popup's
+      // `--swipe-movement-*` (via `syncDragStyles(false)`), flashing it fully open for a frame.
+      // `clearSwipeRelease` doesn't touch those vars, so always run it to clear any leftover
+      // release state from a prior dismiss (e.g. when the popup is kept mounted).
+      if (!swipeAreaActiveRef.current) {
+        resetSwipe();
+      }
       clearSwipeRelease();
     }
-  }, [clearSwipeRelease, open, resetSwipe]);
-  React.useEffect(() => {
+  }, [clearSwipeRelease, open, resetSwipe, swipeAreaActiveRef]);
+  useIsoLayoutEffect(() => {
     const backdropElement = backdropRef.current;
     return () => {
       visualStateStore?.set({
@@ -737,12 +606,19 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
     swipeStrength: swipeRelease ?? null,
     setSwipeDismissed
   }), [setSwipeDismissed, swipe.getDragStyles, swipe.swiping, swipeRelease]);
-  function resetTouchTrackingState() {
-    ignoreTouchSwipeRef.current = false;
+  function resetTouchSwipeState(ignoreSwipe) {
+    ignoreTouchSwipeRef.current = ignoreSwipe;
     touchScrollStateRef.current = null;
+  }
+  function resetTouchTrackingState() {
+    resetTouchSwipeState(false);
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
   }
+  function handlePointerEnd(event) {
+    lastPointerTypeRef.current = '';
+    return event.pointerType !== 'touch';
+  }
   return /*#__PURE__*/_jsx(DialogViewport, {
     ref: forwardedRef,
     className: className,
@@ -755,8 +631,7 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
-        const doc = ownerDocument(event.currentTarget);
-        const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
+        const elementAtPoint = getElementAtPoint(event.currentTarget.getRootNode(), event.clientX, event.clientY);
         if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
           return;
         }
@@ -772,34 +647,24 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
         swipePointerProps.onPointerMove?.(event);
       },
       onPointerUp(event) {
-        if (lastPointerTypeRef.current === event.pointerType) {
-          lastPointerTypeRef.current = '';
-        }
-        if (event.pointerType === 'touch') {
-          return;
+        if (handlePointerEnd(event)) {
+          swipePointerProps.onPointerUp?.(event);
         }
-        swipePointerProps.onPointerUp?.(event);
       },
       onPointerCancel(event) {
-        if (lastPointerTypeRef.current === event.pointerType) {
-          lastPointerTypeRef.current = '';
-        }
-        if (event.pointerType === 'touch') {
-          return;
+        if (handlePointerEnd(event)) {
+          swipePointerProps.onPointerCancel?.(event);
         }
-        swipePointerProps.onPointerCancel?.(event);
       },
       onTouchStart(event) {
         const startedFromPenPointerDown = lastPointerTypeRef.current === 'pen' && ignoreNextTouchStartFromPenRef.current;
         if (startedFromPenPointerDown) {
           ignoreNextTouchStartFromPenRef.current = false;
-          ignoreTouchSwipeRef.current = false;
-          touchScrollStateRef.current = null;
+          resetTouchSwipeState(false);
           return;
         }
         if (!open || !mounted || nestedDrawerOpen) {
-          ignoreTouchSwipeRef.current = false;
-          touchScrollStateRef.current = null;
+          resetTouchSwipeState(false);
           return;
         }
         const touch = event.touches[0];
@@ -807,32 +672,25 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           return;
         }
         if (isReactTouchEventOnRangeInput(event)) {
-          ignoreTouchSwipeRef.current = false;
-          touchScrollStateRef.current = null;
+          resetTouchSwipeState(false);
           return;
         }
-        const doc = ownerDocument(event.currentTarget);
-        const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
-        const rootElement = viewportElement ?? popupElementState;
+        const rootElement = event.currentTarget;
+        const elementAtPoint = getElementAtPoint(rootElement.getRootNode(), touch.clientX, touch.clientY);
         const eventTarget = getTarget(event.nativeEvent);
-        const target = isElement(eventTarget) ? eventTarget : null;
-        if (rootElement && target && !contains(rootElement, target)) {
-          ignoreTouchSwipeRef.current = true;
-          touchScrollStateRef.current = null;
+        const target = isElement(eventTarget) ? eventTarget : rootElement;
+        if (!contains(rootElement, target)) {
+          resetTouchSwipeState(true);
           return;
         }
         virtualKeyboard?.onTouchStart(event);
-        ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
-        if (ignoreTouchSwipeRef.current) {
-          touchScrollStateRef.current = null;
+        if (isSwipeIgnoredTarget(elementAtPoint)) {
+          resetTouchSwipeState(true);
           return;
         }
-        let scrollTarget = null;
-        let hasCrossAxisScrollableContent = false;
-        if (rootElement && target) {
-          scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
-          hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
-        }
+        ignoreTouchSwipeRef.current = false;
+        const scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
+        const hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         let allowSwipe = null;
         if (scrollTarget) {
           const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
@@ -846,7 +704,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
           scrollTarget,
           hasCrossAxisScrollableContent,
           allowSwipe,
-          preserveNativeCrossAxisScroll: false
+          preserveNativeCrossAxisScroll: false,
+          drawerAxisAttributed: false
         };
         swipeTouchProps.onTouchStart?.(event);
       },
@@ -871,24 +730,8 @@ export const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewp
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerViewport.displayName = "DrawerViewport";
-function setSwipeDismissedElements(popupElement, backdropElement, dismissed) {
-  if (dismissed) {
-    popupElement?.setAttribute(DrawerPopupDataAttributes.swipeDismiss, '');
-    backdropElement?.setAttribute(DrawerPopupDataAttributes.swipeDismiss, '');
-    return;
-  }
-  popupElement?.removeAttribute(DrawerPopupDataAttributes.swipeDismiss);
-  backdropElement?.removeAttribute(DrawerPopupDataAttributes.swipeDismiss);
-}
 function setBackdropSwipingAttribute(backdropElement, swiping) {
-  if (!backdropElement) {
-    return;
-  }
-  if (swiping) {
-    backdropElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
-    return;
-  }
-  backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
+  backdropElement?.toggleAttribute(DrawerPopupDataAttributes.swiping, swiping);
 }
 function isSwipeIgnoredTarget(target) {
   return Boolean(target?.closest(BASE_UI_SWIPE_IGNORE_SELECTOR));
@@ -896,17 +739,16 @@ function isSwipeIgnoredTarget(target) {
 function isDrawerContentTarget(target) {
   return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
 }
+function getBaseSwipeSize(element, direction) {
+  return direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
+}
 function getBaseSwipeThreshold(element, direction) {
-  const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
-  return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
+  return Math.max(getBaseSwipeSize(element, direction) * 0.5, MIN_SWIPE_THRESHOLD);
 }
 function isRangeInput(target, win) {
   return target instanceof win.HTMLInputElement && target.type === 'range';
 }
 function isTextSelectionControl(target) {
-  if (!isElement(target)) {
-    return false;
-  }
   return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
 }
 function hasExpandedSelectionWithinTarget(selection, target) {
@@ -916,8 +758,7 @@ function hasExpandedSelectionWithinTarget(selection, target) {
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   const activeEl = activeElement(doc);
-  const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
-  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
+  if (activeEl && contains(rootElement, activeEl) && isTextSelectionControl(activeEl)) {
     const {
       selectionStart,
       selectionEnd
@@ -933,11 +774,7 @@ function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   return hasExpandedSelectionWithinTarget(selection, rootElement);
 }
 function isEventOnRangeInput(event, win) {
-  const composedPath = event.composedPath();
-  if (composedPath) {
-    return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
-  }
-  return isRangeInput(getTarget(event), win);
+  return event.composedPath().some(pathTarget => isRangeInput(pathTarget, win));
 }
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, ownerWindow(event.currentTarget));
@@ -946,25 +783,51 @@ function updateTouchScrollPosition(touchState, touch) {
   touchState.lastX = touch.clientX;
   touchState.lastY = touch.clientY;
 }
-function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
+
+/**
+ * Arbitrates a touchmove between the drawer swipe and a native cross-axis scroll.
+ * Returns `true` when the move must be left alone — either because the cross axis already won the
+ * gesture, or because neither axis has passed the slop yet and the gesture cannot be attributed.
+ */
+function shouldYieldTouchMove(touchState, event, touch, isVerticalScrollAxis) {
   if (touchState.preserveNativeCrossAxisScroll) {
     return true;
   }
-  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
+
+  // Attribution happens once per gesture. Re-arbitrating after the drawer axis has won would let
+  // the pre-attribution branches below fire mid-drag (the slop is measured from the touch origin,
+  // which is never re-baselined), freezing the popup and dropping `preventDefault()`.
+  if (touchState.drawerAxisAttributed || touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
     return false;
   }
+
+  // A non-cancelable touchmove means the browser has already committed the gesture to a native
+  // scroll; claiming it for the swipe would drag the popup alongside the scrolling content.
+  if (!event.cancelable) {
+    touchState.preserveNativeCrossAxisScroll = true;
+    return true;
+  }
   const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
   const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
   const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
   const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
-  if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) {
+  if (absCrossAxisGestureDelta >= AXIS_LOCK_SLOP && absCrossAxisGestureDelta > absDrawerAxisGestureDelta + AXIS_LOCK_BIAS) {
+    touchState.preserveNativeCrossAxisScroll = true;
+    return true;
+  }
+  if (absDrawerAxisGestureDelta >= AXIS_LOCK_SLOP) {
+    touchState.drawerAxisAttributed = true;
     return false;
   }
-  touchState.preserveNativeCrossAxisScroll = true;
+
+  // Neither axis has traveled past the slop yet, so the gesture cannot be attributed. Leave the
+  // event alone: on iOS, `preventDefault()` on the first cancelable touchmove cancels native
+  // scrolling for the entire gesture, which would lock a cross-axis scroll that only passes the
+  // slop on a later move.
   return true;
 }
 function hasScrollableContentOnAxis(scrollTarget, axis) {
-  return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
+  return getScrollMetrics(scrollTarget, axis).max > 0;
 }
 function getScrollMetrics(scrollTarget, axis) {
   if (axis === 'vertical') {
@@ -981,46 +844,21 @@ function getScrollMetrics(scrollTarget, axis) {
   };
 }
 function isAtSwipeStartEdge(scrollTarget, axis, direction) {
+  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
   const {
     offset,
     max
   } = getScrollMetrics(scrollTarget, axis);
-  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
-  if (dismissFromStartEdge === null) {
-    return false;
-  }
   return dismissFromStartEdge ? offset <= 0 : offset >= max;
 }
 function canSwipeFromScrollEdgeOnMove(scrollTarget, axis, direction, delta) {
-  const {
-    offset,
-    max
-  } = getScrollMetrics(scrollTarget, axis);
   const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
-  if (dismissFromStartEdge === null) {
-    return false;
-  }
   const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
   if (!movingTowardDismiss) {
     return false;
   }
-  return dismissFromStartEdge ? offset <= 0 : offset >= max;
+  return isAtSwipeStartEdge(scrollTarget, axis, direction);
 }
 function shouldDismissFromStartEdge(direction, axis) {
-  if (axis === 'vertical') {
-    if (direction === 'down') {
-      return true;
-    }
-    if (direction === 'up') {
-      return false;
-    }
-    return null;
-  }
-  if (direction === 'right') {
-    return true;
-  }
-  if (direction === 'left') {
-    return false;
-  }
-  return null;
+  return axis === 'vertical' ? direction === 'down' : direction === 'right';
 }