@base-ui/react 1.6.0 → 1.7.0

package/utils/useSwipeDismiss.js

@@ -159,6 +159,7 @@ function useSwipeDismiss(options) {
   });
   const swipeProgressRef = React.useRef(0);
   const swipeThresholdRef = React.useRef(swipeThresholdDefault);
+  const swipeThresholdFunctionRef = React.useRef(null);
   const swipeStartTimeRef = React.useRef(null);
   const lastDragSampleRef = React.useRef(null);
   const lastDragVelocityRef = React.useRef({
@@ -180,15 +181,12 @@ function useSwipeDismiss(options) {
     if (!direction) {
       return;
     }
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-      return;
-    }
     const element = elementRef.current;
-    if (!element) {
+    const thresholdFunction = swipeThresholdFunctionRef.current;
+    if (!element || !thresholdFunction) {
       return;
     }
-    const value = swipeThresholdProp({
+    const value = thresholdFunction({
       element,
       direction
     });
@@ -266,6 +264,7 @@ function useSwipeDismiss(options) {
     setDragDismissed(false);
     updateSwipeProgress(0);
     swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = null;
     dragStartPosRef.current = {
       x: 0,
       y: 0
@@ -306,11 +305,6 @@ function useSwipeDismiss(options) {
     lastProgressDetailsRef.current = null;
     syncDragStyles(false);
   }, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
-  React.useEffect(() => {
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-    }
-  }, [swipeThresholdDefault, swipeThresholdProp]);
   function getPrimaryPointerPosition(event) {
     if ('touches' in event) {
       const touch = event.touches[0];
@@ -331,8 +325,8 @@ function useSwipeDismiss(options) {
     return event.pointerType === 'touch';
   }
   function getTargetAtPoint(position, nativeEvent) {
-    const doc = (0, _owner.ownerDocument)(elementRef.current);
-    const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, position.x, position.y);
+    const root = elementRef.current?.getRootNode();
+    const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(root, position.x, position.y);
     const target = elementAtPoint ?? (0, _utils.getTarget)(nativeEvent);
     return target;
   }
@@ -375,6 +369,8 @@ function useSwipeDismiss(options) {
     swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
     swipeCancelBaselineRef.current = position;
     lastMovePosRef.current = position;
+    swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = typeof swipeThresholdProp === 'function' ? swipeThresholdProp : null;
     if (element) {
       elementSizeRef.current = {
         width: element.offsetWidth,
@@ -439,12 +435,9 @@ function useSwipeDismiss(options) {
     onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
-    const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
+    const exponent = value => Math.sign(value) * Math.abs(value) ** 0.5;
     const dampAxis = (delta, allowNegative, allowPositive) => {
-      if (!allowNegative && delta < 0) {
-        return exponent(delta);
-      }
-      if (!allowPositive && delta > 0) {
+      if (!allowNegative && delta < 0 || !allowPositive && delta > 0) {
         return exponent(delta);
       }
       return delta;
@@ -457,29 +450,16 @@ function useSwipeDismiss(options) {
     };
   }
   function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
+    // Swiping toward the axis start edge (down/right) is allowed when scrolled to the start;
+    // toward the end edge (up/left) when scrolled to the end.
+    const canSwipeOnAxis = (delta, scrollOffset, maxScrollOffset, allowTowardStart, allowTowardEnd) => delta > 0 && scrollOffset <= 0 && allowTowardStart || delta < 0 && scrollOffset >= Math.max(0, maxScrollOffset) && allowTowardEnd;
     const absDeltaX = Math.abs(deltaX);
     const absDeltaY = Math.abs(deltaY);
-    const useVerticalAxis = hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX);
-    if (useVerticalAxis) {
-      const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
-      const atTop = scrollTarget.scrollTop <= 0;
-      const atBottom = scrollTarget.scrollTop >= maxScrollTop;
-      const movingDown = deltaY > 0;
-      const movingUp = deltaY < 0;
-      const canSwipeDown = movingDown && atTop && allowDown;
-      const canSwipeUp = movingUp && atBottom && allowUp;
-      return canSwipeDown || canSwipeUp;
-    }
-    const useHorizontalAxis = hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY);
-    if (useHorizontalAxis) {
-      const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
-      const atLeft = scrollTarget.scrollLeft <= 0;
-      const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
-      const movingRight = deltaX > 0;
-      const movingLeft = deltaX < 0;
-      const canSwipeRight = movingRight && atLeft && allowRight;
-      const canSwipeLeft = movingLeft && atRight && allowLeft;
-      return canSwipeRight || canSwipeLeft;
+    if (hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX)) {
+      return canSwipeOnAxis(deltaY, scrollTarget.scrollTop, scrollTarget.scrollHeight - scrollTarget.clientHeight, allowDown, allowUp);
+    }
+    if (hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY)) {
+      return canSwipeOnAxis(deltaX, scrollTarget.scrollLeft, scrollTarget.scrollWidth - scrollTarget.clientWidth, allowRight, allowLeft);
     }
     return null;
   }
@@ -500,7 +480,7 @@ function useSwipeDismiss(options) {
     pendingSwipeRef.current = true;
     pendingSwipeStartPosRef.current = startPos;
     swipeFromScrollableRef.current = false;
-    sawPrimaryButtonsOnMoveRef.current = false;
+    sawPrimaryButtonsOnMoveRef.current = !('touches' in event);
     const allowedToStart = canStart ? canStart(startPos, {
       nativeEvent: event.nativeEvent,
       direction: primaryDirection
@@ -528,14 +508,21 @@ function useSwipeDismiss(options) {
       event.preventDefault();
     }
     if (isFirstPointerMoveRef.current) {
-      // Adjust the starting position to the current position on the first move
-      // to account for the delay between pointerdown and the first pointermove on iOS.
-      dragStartPosRef.current = position;
-      const moveTime = getValidTimeStamp(event.timeStamp);
-      if (moveTime !== null) {
-        swipeStartTimeRef.current = moveTime;
-      }
       isFirstPointerMoveRef.current = false;
+      // Reset the drag origin to the first move's position to absorb the gap between the press and
+      // the first move event — notably on iOS touch, where the first `touchmove` arrives already
+      // offset from the `touchstart` — which would otherwise make the dragged element jump. This
+      // only matters when an element follows the pointer; when `trackDrag` is false (e.g. the
+      // swipe-area, which only opens the drawer) keep the original press position so a quick flick
+      // still registers: on a low-refresh-rate display the whole travel can land in this single
+      // first move, and discarding it would drop the gesture.
+      if (trackDrag) {
+        dragStartPosRef.current = position;
+        const moveTime = getValidTimeStamp(event.timeStamp);
+        if (moveTime !== null) {
+          swipeStartTimeRef.current = moveTime;
+        }
+      }
     }
     const clientX = position.x;
     const clientY = position.y;
@@ -623,51 +610,45 @@ function useSwipeDismiss(options) {
         newOffsetY += dampedDelta.y;
       }
     }
+
+    // Only rewrite drag styles when the drag offset actually changed. `syncDragStyles` writes the
+    // raw (undamped) frozen transform and movement vars, relying on the consumer's `onProgress`
+    // to overwrite them with damped styles — but `updateSwipeProgress` dedupes unchanged
+    // deltas and skips `onProgress`. A move that doesn't change the offset (e.g. the cursor
+    // pinned at a screen edge during an off-screen drag, jittering only on the ignored axis)
+    // would otherwise reinstate the raw styles with no correction, jumping the element to the
+    // undamped position.
+    const previousOffset = dragOffsetRef.current;
+    const offsetChanged = newOffsetX !== previousOffset.x || newOffsetY !== previousOffset.y;
     dragOffsetRef.current = {
       x: newOffsetX,
       y: newOffsetY
     };
-    syncDragStyles(true);
+    if (offsetChanged) {
+      syncDragStyles(true);
+    }
     recordDragSample({
       x: newOffsetX,
       y: newOffsetY
     }, getValidTimeStamp(event.timeStamp));
     const dragDeltaX = newOffsetX - initialTransformRef.current.x;
     const dragDeltaY = newOffsetY - initialTransformRef.current.y;
-    const swipeDirectionDetails = intendedSwipeDirectionRef.current;
-    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
-    if (!progressDirection) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
-    const scale = initialTransformRef.current.scale || 1;
-    if (size <= 0 || scale <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
-    if (progressDisplacement <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    updateSwipeProgress(progressDisplacement / (size * scale), {
+    const progressDetails = {
       deltaX: dragDeltaX,
       deltaY: dragDeltaY,
-      direction: swipeDirectionDetails
-    });
+      direction: intendedSwipeDirectionRef.current
+    };
+    let progress = 0;
+    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
+    if (progressDirection) {
+      const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
+      const scale = initialTransformRef.current.scale || 1;
+      const progressDisplacement = getDisplacement(progressDirection, dragDeltaX, dragDeltaY);
+      if (size > 0 && scale > 0 && progressDisplacement > 0) {
+        progress = progressDisplacement / (size * scale);
+      }
+    }
+    updateSwipeProgress(progress, progressDetails);
   }
   const handleEnd = (0, _useStableCallback.useStableCallback)(event => {
     if (!enabled) {
@@ -755,35 +736,9 @@ function useSwipeDismiss(options) {
       dismissDirection = intendedSwipeDirectionRef.current ?? primaryDirection;
     } else {
       for (const direction of directions) {
-        switch (direction) {
-          case 'right':
-            if (deltaX > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'right';
-            }
-            break;
-          case 'left':
-            if (deltaX < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'left';
-            }
-            break;
-          case 'down':
-            if (deltaY > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'down';
-            }
-            break;
-          case 'up':
-            if (deltaY < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'up';
-            }
-            break;
-          default:
-            break;
-        }
-        if (shouldClose) {
+        if (getDisplacement(direction, deltaX, deltaY) > swipeThresholdRef.current) {
+          shouldClose = true;
+          dismissDirection = direction;
           break;
         }
       }
@@ -925,25 +880,29 @@ function useSwipeDismiss(options) {
     });
   });
   const getDragStyles = React.useCallback(() => {
+    // Read `isSwipingRef`, not the lagging `isSwiping` state, to match the imperative writer
+    // `syncDragStyles`. Otherwise a render that commits before `setSwiping(true)` flushes strips the
+    // transform it just wrote, flashing the popup to its resting position for a frame.
+    const swiping = isSwipingRef.current;
     const dragOffset = dragOffsetRef.current;
     const initialTransform = initialTransformRef.current;
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
-    if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
+    if (!swiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
       return {
         [movementCssVars.x]: '0px',
         [movementCssVars.y]: '0px'
       };
     }
     return {
-      transition: isSwiping ? 'none' : undefined,
+      transition: swiping ? 'none' : undefined,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
-      transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
+      transform: swiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
       [movementCssVars.x]: `${deltaX}px`,
       [movementCssVars.y]: `${deltaY}px`
     };
-  }, [dragDismissed, isSwiping, movementCssVars]);
+  }, [dragDismissed, movementCssVars]);
   const getPointerProps = React.useCallback(() => {
     if (!enabled) {
       return {};

package/utils/useSwipeDismiss.mjs

@@ -151,6 +151,7 @@ export function useSwipeDismiss(options) {
   });
   const swipeProgressRef = React.useRef(0);
   const swipeThresholdRef = React.useRef(swipeThresholdDefault);
+  const swipeThresholdFunctionRef = React.useRef(null);
   const swipeStartTimeRef = React.useRef(null);
   const lastDragSampleRef = React.useRef(null);
   const lastDragVelocityRef = React.useRef({
@@ -172,15 +173,12 @@ export function useSwipeDismiss(options) {
     if (!direction) {
       return;
     }
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-      return;
-    }
     const element = elementRef.current;
-    if (!element) {
+    const thresholdFunction = swipeThresholdFunctionRef.current;
+    if (!element || !thresholdFunction) {
       return;
     }
-    const value = swipeThresholdProp({
+    const value = thresholdFunction({
       element,
       direction
     });
@@ -258,6 +256,7 @@ export function useSwipeDismiss(options) {
     setDragDismissed(false);
     updateSwipeProgress(0);
     swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = null;
     dragStartPosRef.current = {
       x: 0,
       y: 0
@@ -298,11 +297,6 @@ export function useSwipeDismiss(options) {
     lastProgressDetailsRef.current = null;
     syncDragStyles(false);
   }, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
-  React.useEffect(() => {
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-    }
-  }, [swipeThresholdDefault, swipeThresholdProp]);
   function getPrimaryPointerPosition(event) {
     if ('touches' in event) {
       const touch = event.touches[0];
@@ -323,8 +317,8 @@ export function useSwipeDismiss(options) {
     return event.pointerType === 'touch';
   }
   function getTargetAtPoint(position, nativeEvent) {
-    const doc = ownerDocument(elementRef.current);
-    const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+    const root = elementRef.current?.getRootNode();
+    const elementAtPoint = getElementAtPoint(root, position.x, position.y);
     const target = elementAtPoint ?? getTarget(nativeEvent);
     return target;
   }
@@ -367,6 +361,8 @@ export function useSwipeDismiss(options) {
     swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
     swipeCancelBaselineRef.current = position;
     lastMovePosRef.current = position;
+    swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = typeof swipeThresholdProp === 'function' ? swipeThresholdProp : null;
     if (element) {
       elementSizeRef.current = {
         width: element.offsetWidth,
@@ -431,12 +427,9 @@ export function useSwipeDismiss(options) {
     onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
-    const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
+    const exponent = value => Math.sign(value) * Math.abs(value) ** 0.5;
     const dampAxis = (delta, allowNegative, allowPositive) => {
-      if (!allowNegative && delta < 0) {
-        return exponent(delta);
-      }
-      if (!allowPositive && delta > 0) {
+      if (!allowNegative && delta < 0 || !allowPositive && delta > 0) {
         return exponent(delta);
       }
       return delta;
@@ -449,29 +442,16 @@ export function useSwipeDismiss(options) {
     };
   }
   function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
+    // Swiping toward the axis start edge (down/right) is allowed when scrolled to the start;
+    // toward the end edge (up/left) when scrolled to the end.
+    const canSwipeOnAxis = (delta, scrollOffset, maxScrollOffset, allowTowardStart, allowTowardEnd) => delta > 0 && scrollOffset <= 0 && allowTowardStart || delta < 0 && scrollOffset >= Math.max(0, maxScrollOffset) && allowTowardEnd;
     const absDeltaX = Math.abs(deltaX);
     const absDeltaY = Math.abs(deltaY);
-    const useVerticalAxis = hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX);
-    if (useVerticalAxis) {
-      const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
-      const atTop = scrollTarget.scrollTop <= 0;
-      const atBottom = scrollTarget.scrollTop >= maxScrollTop;
-      const movingDown = deltaY > 0;
-      const movingUp = deltaY < 0;
-      const canSwipeDown = movingDown && atTop && allowDown;
-      const canSwipeUp = movingUp && atBottom && allowUp;
-      return canSwipeDown || canSwipeUp;
-    }
-    const useHorizontalAxis = hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY);
-    if (useHorizontalAxis) {
-      const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
-      const atLeft = scrollTarget.scrollLeft <= 0;
-      const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
-      const movingRight = deltaX > 0;
-      const movingLeft = deltaX < 0;
-      const canSwipeRight = movingRight && atLeft && allowRight;
-      const canSwipeLeft = movingLeft && atRight && allowLeft;
-      return canSwipeRight || canSwipeLeft;
+    if (hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX)) {
+      return canSwipeOnAxis(deltaY, scrollTarget.scrollTop, scrollTarget.scrollHeight - scrollTarget.clientHeight, allowDown, allowUp);
+    }
+    if (hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY)) {
+      return canSwipeOnAxis(deltaX, scrollTarget.scrollLeft, scrollTarget.scrollWidth - scrollTarget.clientWidth, allowRight, allowLeft);
     }
     return null;
   }
@@ -492,7 +472,7 @@ export function useSwipeDismiss(options) {
     pendingSwipeRef.current = true;
     pendingSwipeStartPosRef.current = startPos;
     swipeFromScrollableRef.current = false;
-    sawPrimaryButtonsOnMoveRef.current = false;
+    sawPrimaryButtonsOnMoveRef.current = !('touches' in event);
     const allowedToStart = canStart ? canStart(startPos, {
       nativeEvent: event.nativeEvent,
       direction: primaryDirection
@@ -520,14 +500,21 @@ export function useSwipeDismiss(options) {
       event.preventDefault();
     }
     if (isFirstPointerMoveRef.current) {
-      // Adjust the starting position to the current position on the first move
-      // to account for the delay between pointerdown and the first pointermove on iOS.
-      dragStartPosRef.current = position;
-      const moveTime = getValidTimeStamp(event.timeStamp);
-      if (moveTime !== null) {
-        swipeStartTimeRef.current = moveTime;
-      }
       isFirstPointerMoveRef.current = false;
+      // Reset the drag origin to the first move's position to absorb the gap between the press and
+      // the first move event — notably on iOS touch, where the first `touchmove` arrives already
+      // offset from the `touchstart` — which would otherwise make the dragged element jump. This
+      // only matters when an element follows the pointer; when `trackDrag` is false (e.g. the
+      // swipe-area, which only opens the drawer) keep the original press position so a quick flick
+      // still registers: on a low-refresh-rate display the whole travel can land in this single
+      // first move, and discarding it would drop the gesture.
+      if (trackDrag) {
+        dragStartPosRef.current = position;
+        const moveTime = getValidTimeStamp(event.timeStamp);
+        if (moveTime !== null) {
+          swipeStartTimeRef.current = moveTime;
+        }
+      }
     }
     const clientX = position.x;
     const clientY = position.y;
@@ -615,51 +602,45 @@ export function useSwipeDismiss(options) {
         newOffsetY += dampedDelta.y;
       }
     }
+
+    // Only rewrite drag styles when the drag offset actually changed. `syncDragStyles` writes the
+    // raw (undamped) frozen transform and movement vars, relying on the consumer's `onProgress`
+    // to overwrite them with damped styles — but `updateSwipeProgress` dedupes unchanged
+    // deltas and skips `onProgress`. A move that doesn't change the offset (e.g. the cursor
+    // pinned at a screen edge during an off-screen drag, jittering only on the ignored axis)
+    // would otherwise reinstate the raw styles with no correction, jumping the element to the
+    // undamped position.
+    const previousOffset = dragOffsetRef.current;
+    const offsetChanged = newOffsetX !== previousOffset.x || newOffsetY !== previousOffset.y;
     dragOffsetRef.current = {
       x: newOffsetX,
       y: newOffsetY
     };
-    syncDragStyles(true);
+    if (offsetChanged) {
+      syncDragStyles(true);
+    }
     recordDragSample({
       x: newOffsetX,
       y: newOffsetY
     }, getValidTimeStamp(event.timeStamp));
     const dragDeltaX = newOffsetX - initialTransformRef.current.x;
     const dragDeltaY = newOffsetY - initialTransformRef.current.y;
-    const swipeDirectionDetails = intendedSwipeDirectionRef.current;
-    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
-    if (!progressDirection) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
-    const scale = initialTransformRef.current.scale || 1;
-    if (size <= 0 || scale <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
-    if (progressDisplacement <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    updateSwipeProgress(progressDisplacement / (size * scale), {
+    const progressDetails = {
       deltaX: dragDeltaX,
       deltaY: dragDeltaY,
-      direction: swipeDirectionDetails
-    });
+      direction: intendedSwipeDirectionRef.current
+    };
+    let progress = 0;
+    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
+    if (progressDirection) {
+      const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
+      const scale = initialTransformRef.current.scale || 1;
+      const progressDisplacement = getDisplacement(progressDirection, dragDeltaX, dragDeltaY);
+      if (size > 0 && scale > 0 && progressDisplacement > 0) {
+        progress = progressDisplacement / (size * scale);
+      }
+    }
+    updateSwipeProgress(progress, progressDetails);
   }
   const handleEnd = useStableCallback(event => {
     if (!enabled) {
@@ -747,35 +728,9 @@ export function useSwipeDismiss(options) {
       dismissDirection = intendedSwipeDirectionRef.current ?? primaryDirection;
     } else {
       for (const direction of directions) {
-        switch (direction) {
-          case 'right':
-            if (deltaX > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'right';
-            }
-            break;
-          case 'left':
-            if (deltaX < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'left';
-            }
-            break;
-          case 'down':
-            if (deltaY > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'down';
-            }
-            break;
-          case 'up':
-            if (deltaY < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'up';
-            }
-            break;
-          default:
-            break;
-        }
-        if (shouldClose) {
+        if (getDisplacement(direction, deltaX, deltaY) > swipeThresholdRef.current) {
+          shouldClose = true;
+          dismissDirection = direction;
           break;
         }
       }
@@ -917,25 +872,29 @@ export function useSwipeDismiss(options) {
     });
   });
   const getDragStyles = React.useCallback(() => {
+    // Read `isSwipingRef`, not the lagging `isSwiping` state, to match the imperative writer
+    // `syncDragStyles`. Otherwise a render that commits before `setSwiping(true)` flushes strips the
+    // transform it just wrote, flashing the popup to its resting position for a frame.
+    const swiping = isSwipingRef.current;
     const dragOffset = dragOffsetRef.current;
     const initialTransform = initialTransformRef.current;
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
-    if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
+    if (!swiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
       return {
         [movementCssVars.x]: '0px',
         [movementCssVars.y]: '0px'
       };
     }
     return {
-      transition: isSwiping ? 'none' : undefined,
+      transition: swiping ? 'none' : undefined,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
-      transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
+      transform: swiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
       [movementCssVars.x]: `${deltaX}px`,
       [movementCssVars.y]: `${deltaY}px`
     };
-  }, [dragDismissed, isSwiping, movementCssVars]);
+  }, [dragDismissed, movementCssVars]);
   const getPointerProps = React.useCallback(() => {
     if (!enabled) {
       return {};

package/checkbox/utils/useStateAttributesMapping.js

@@ -1,30 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useStateAttributesMapping = useStateAttributesMapping;
-var React = _interopRequireWildcard(require("react"));
-var _CheckboxRootDataAttributes = require("../root/CheckboxRootDataAttributes");
-var _constants = require("../../internals/field-constants/constants");
-function useStateAttributesMapping(state) {
-  return React.useMemo(() => ({
-    checked(value) {
-      if (state.indeterminate) {
-        // `data-indeterminate` is already handled by the `indeterminate` prop.
-        return {};
-      }
-      if (value) {
-        return {
-          [_CheckboxRootDataAttributes.CheckboxRootDataAttributes.checked]: ''
-        };
-      }
-      return {
-        [_CheckboxRootDataAttributes.CheckboxRootDataAttributes.unchecked]: ''
-      };
-    },
-    ..._constants.fieldValidityMapping
-  }), [state.indeterminate]);
-}

package/number-field/root/useNumberFieldButton.d.mts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.mjs";
-import type { NumberFieldRoot } from "./NumberFieldRoot.mjs";
-export declare function useNumberFieldButton(params: UseNumberFieldButtonParameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-export interface UseNumberFieldButtonParameters {
-  allowInputSyncRef: React.RefObject<boolean | null>;
-  disabled: boolean;
-  formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
-  getStepAmount: (event?: EventWithOptionalKeyState) => number;
-  id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  inputValue: string;
-  isIncrement: boolean;
-  locale?: Intl.LocalesArgument | undefined;
-  readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  valueRef: React.RefObject<number | null>;
-  lastChangedValueRef: React.RefObject<number | null>;
-  onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
-}