@base-ui/react 1.6.0 → 1.7.0

package/drawer/swipe-area/DrawerSwipeArea.js

@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.DrawerSwipeArea = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useTimeout = require("@base-ui/utils/useTimeout");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _owner = require("@base-ui/utils/owner");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
+var _noop = require("../../internals/noop");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _useSwipeDismiss = require("../../utils/useSwipeDismiss");
@@ -21,6 +23,7 @@ var _DrawerRootContext = require("../root/DrawerRootContext");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _popups = require("../../utils/popups");
 var _DrawerProviderContext = require("../provider/DrawerProviderContext");
+var _event = require("../../floating-ui-react/utils/event");
 var _DrawerSwipeAreaDataAttributes = require("./DrawerSwipeAreaDataAttributes");
 const DEFAULT_SWIPE_OPEN_RATIO = 0.5;
 const MIN_SWIPE_START_DISTANCE = 1;
@@ -46,9 +49,9 @@ const stateAttributesMapping = {
     return value ? SWIPE_AREA_SWIPING_HOOK : null;
   },
   swipeDirection(value) {
-    return value ? {
+    return {
       [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.swipeDirection]: value
-    } : null;
+    };
   },
   disabled(value) {
     return value ? SWIPE_AREA_DISABLED_HOOK : null;
@@ -79,16 +82,14 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     swipeDirection: swipeDirectionProp,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)();
   const {
     swipeDirection,
-    frontmostHeight
+    frontmostHeight,
+    swipeAreaActiveRef
   } = (0, _DrawerRootContext.useDrawerRootContext)();
-  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
+  const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)();
   const [swipeActive, setSwipeActive] = React.useState(false);
-  const releaseDismissTimeout = (0, _useTimeout.useTimeout)();
   const swipeAreaRef = React.useRef(null);
   const swipeStartEventRef = React.useRef(null);
   const openedBySwipeRef = React.useRef(false);
@@ -98,7 +99,10 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
   });
   const closedOffsetRef = React.useRef(null);
   const appliedSwipeStylesRef = React.useRef(false);
+  const swipePopupElementRef = React.useRef(null);
+  const swipeBackdropElementRef = React.useRef(null);
   const popupTransitionRef = React.useRef(null);
+  const releaseGuardCleanupRef = React.useRef(_noop.NOOP);
   const swipeAreaId = (0, _useBaseUiId.useBaseUiId)(componentProps.id);
   const registerTrigger = (0, _popups.useTriggerRegistration)(swipeAreaId, store);
   const open = store.useState('open');
@@ -110,21 +114,40 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
   const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
   const enabled = !disabled && (!open || swipeActive);
   function disableDismissForSwipe() {
-    releaseDismissTimeout.clear();
+    releaseGuardCleanupRef.current();
     store.context.outsidePressEnabledRef.current = false;
   }
-  function enableDismissAfterRelease() {
-    // Safari can dispatch outside-press for the same swipe-open gesture
-    // after release, so defer re-enabling dismissal to the next macrotask.
-    releaseDismissTimeout.start(0, () => {
+  const enableDismissAfterRelease = (0, _useStableCallback.useStableCallback)(() => {
+    releaseGuardCleanupRef.current();
+    const doc = (0, _owner.ownerDocument)(swipeAreaRef.current);
+    function restore(event) {
+      // The gesture's trailing release click is the one physical click with no `pointerdown` of
+      // its own. Ignore it and keep waiting, so it cannot dismiss the drawer it just opened,
+      // while a click-only activation (keyboard or assistive tech) still re-enables in time.
+      if (event?.type === 'click' && event.detail !== 0 && !(0, _event.isVirtualClick)(event)) {
+        return;
+      }
+      releaseGuardCleanupRef.current = _noop.NOOP;
+      doc.removeEventListener('pointerdown', restore, true);
+      doc.removeEventListener('click', restore, true);
       store.context.outsidePressEnabledRef.current = true;
-    });
-  }
-  function resolvePopupSize() {
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return null;
     }
+
+    // The pointerup that ends a swipe-open gesture synthesizes a `click`. When the drag released
+    // outside the popup (e.g. it was dragged past the popup's size), that click would be treated as
+    // an outside press and immediately dismiss the drawer that was just opened. Keep outside-press
+    // dismissal disabled until the next interaction that isn't that release click: a deliberate
+    // outside press starts with a `pointerdown`, and a click-only activation (keyboard or
+    // assistive tech) is distinguishable from a physical release. This is deterministic, unlike
+    // re-enabling on a timer that can race the synthesized click and dismiss at random.
+    //
+    // `restore` runs in document capture, ahead of floating-ui's own outside-press check (which
+    // happens on the event target, after capture), so the triggering press still dismisses.
+    releaseGuardCleanupRef.current = restore;
+    doc.addEventListener('pointerdown', restore, true);
+    doc.addEventListener('click', restore, true);
+  });
+  function getPopupSize(popupElement) {
     const isHorizontal = dismissDirection === 'left' || dismissDirection === 'right';
     const size = isHorizontal ? popupElement.offsetWidth : popupElement.offsetHeight;
     if (size <= 0) {
@@ -132,15 +155,15 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     }
     return size;
   }
-  function resolveClosedOffset() {
-    const offset = resolvePopupSize();
+  function resolvePopupSize() {
+    const popupElement = store.context.popupRef.current;
+    return popupElement ? getPopupSize(popupElement) : null;
+  }
+  function resolveClosedOffset(popupElement) {
+    const offset = getPopupSize(popupElement);
     if (offset == null) {
       return null;
     }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return offset;
-    }
     const isHorizontal = dismissDirection === 'left' || dismissDirection === 'right';
     const transform = (0, _useSwipeDismiss.getElementTransform)(popupElement);
     const transformOffset = isHorizontal ? transform.x : transform.y;
@@ -157,9 +180,6 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     return popupSize * DEFAULT_SWIPE_OPEN_RATIO;
   }
   function applySwipeMovement() {
-    if (!swipeActive) {
-      return;
-    }
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
       return;
@@ -168,10 +188,10 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       return;
     }
     if (closedOffsetRef.current == null) {
-      closedOffsetRef.current = resolveClosedOffset();
+      closedOffsetRef.current = resolveClosedOffset(popupElement);
     }
     const closedOffset = closedOffsetRef.current;
-    if (!closedOffset || !Number.isFinite(closedOffset) || closedOffset <= 0) {
+    if (closedOffset === null) {
       return;
     }
     const {
@@ -192,6 +212,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     popupElement.style.setProperty(_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementX, `${movementX}px`);
     popupElement.style.setProperty(_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY, `${movementY}px`);
     popupElement.setAttribute(_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping, '');
+    swipePopupElementRef.current = popupElement;
     if (popupTransitionRef.current === null) {
       popupTransitionRef.current = popupElement.style.transition;
     }
@@ -199,6 +220,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
     const backdropElement = store.context.backdropRef.current;
     if (backdropElement) {
       backdropElement.setAttribute(_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping, '');
+      swipeBackdropElementRef.current = backdropElement;
       backdropElement.style.setProperty(_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress, `${backdropProgress}`);
       if (openProgress > 0 && frontmostHeight > 0) {
         backdropElement.style.setProperty(_DrawerPopupCssVars.DrawerPopupCssVars.height, `${frontmostHeight}px`);
@@ -211,10 +233,11 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       frontmostHeight: openProgress > 0 ? frontmostHeight : 0
     });
     appliedSwipeStylesRef.current = true;
+    swipeAreaActiveRef.current = true;
   }
   const clearSwipeStyles = (0, _useStableCallback.useStableCallback)(() => {
-    const popupElement = store.context.popupRef.current;
-    if (popupElement && appliedSwipeStylesRef.current) {
+    const popupElement = swipePopupElementRef.current;
+    if (popupElement) {
       popupElement.style.removeProperty(_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementX);
       popupElement.style.removeProperty(_DrawerPopupCssVars.DrawerPopupCssVars.swipeMovementY);
       popupElement.removeAttribute(_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping);
@@ -223,7 +246,7 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       popupElement.style.transition = popupTransitionRef.current;
       popupTransitionRef.current = null;
     }
-    const backdropElement = store.context.backdropRef.current;
+    const backdropElement = swipeBackdropElementRef.current;
     if (backdropElement) {
       backdropElement.removeAttribute(_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping);
       backdropElement.style.setProperty(_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress, '0');
@@ -234,19 +257,16 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       frontmostHeight: 0
     });
     appliedSwipeStylesRef.current = false;
+    swipePopupElementRef.current = null;
+    swipeBackdropElementRef.current = null;
+    swipeAreaActiveRef.current = false;
   });
   function openDrawer(event) {
-    if (store.select('open')) {
-      return;
-    }
     openedBySwipeRef.current = true;
-    store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, event, swipeAreaRef.current));
   }
   function closeDrawer(event) {
-    if (!store.select('open')) {
-      return;
-    }
-    store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, event, swipeAreaRef.current));
   }
   function resetSwipeInteractionState() {
     swipeStartEventRef.current = null;
@@ -289,10 +309,10 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
         return;
       }
       const displacement = (0, _useSwipeDismiss.getDisplacement)(resolvedSwipeDirection, details.deltaX, details.deltaY);
-      if (displacement < MIN_SWIPE_START_DISTANCE && !openedBySwipeRef.current) {
+      if (!openedBySwipeRef.current && displacement < MIN_SWIPE_START_DISTANCE) {
         return;
       }
-      if (!openedBySwipeRef.current) {
+      if (!openedBySwipeRef.current && !store.select('open')) {
         openDrawer(swipeStartEventRef.current);
       }
       applySwipeMovement();
@@ -308,14 +328,14 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
       const displacement = (0, _useSwipeDismiss.getDisplacement)(resolvedSwipeDirection, deltaX, deltaY);
       const releaseVelocity = (0, _useSwipeDismiss.getDisplacement)(resolvedSwipeDirection, releaseVelocityX, releaseVelocityY);
       const threshold = resolveSwipeOpenThreshold();
-      const hasEnoughDistance = threshold != null && displacement >= threshold;
+      const hasEnoughDistance = displacement >= threshold;
       const hasEnoughVelocity = releaseVelocity >= VELOCITY_THRESHOLD;
-      const shouldOpen = threshold != null && direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
+      const shouldOpen = direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
       if (shouldOpen) {
         if (!store.select('open')) {
           openDrawer(event);
         }
-      } else if (openedBySwipeRef.current) {
+      } else if (openedBySwipeRef.current && store.select('open')) {
         closeDrawer(event);
       }
       finishSwipeInteraction();
@@ -326,16 +346,29 @@ const DrawerSwipeArea = exports.DrawerSwipeArea = /*#__PURE__*/React.forwardRef(
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
   const resetSwipe = swipe.reset;
-  React.useEffect(() => {
+
+  // The commit that opens the drawer re-renders the popup, resetting `--swipe-movement-*` to `0px`
+  // (the viewport isn't swiping). Re-assert after the DOM mutation but before paint. No deps: must
+  // run on every commit the swipe area participates in.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (swipeActive && appliedSwipeStylesRef.current) {
+      applySwipeMovement();
+    }
+  });
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!enabled) {
+      if (swipeActive) {
+        enableDismissAfterRelease();
+      }
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
       resetSwipeInteractionState();
     }
-  }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
+  }, [clearSwipeStyles, enableDismissAfterRelease, enabled, resetDragDelta, resetSwipe, swipeActive]);
   React.useEffect(() => {
     return () => {
+      releaseGuardCleanupRef.current();
       store.context.outsidePressEnabledRef.current = true;
     };
   }, [store]);

package/drawer/swipe-area/DrawerSwipeArea.mjs

@@ -2,9 +2,11 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { ownerDocument } from '@base-ui/utils/owner';
 import { useDialogRootContext } from "../../dialog/root/DialogRootContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { NOOP } from "../../internals/noop.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { getDisplacement, getElementTransform, useSwipeDismiss } from "../../utils/useSwipeDismiss.mjs";
@@ -15,6 +17,7 @@ import { useDrawerRootContext } from "../root/DrawerRootContext.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useTriggerRegistration } from "../../utils/popups/index.mjs";
 import { useDrawerProviderContext } from "../provider/DrawerProviderContext.mjs";
+import { isVirtualClick } from "../../floating-ui-react/utils/event.mjs";
 import { DrawerSwipeAreaDataAttributes } from "./DrawerSwipeAreaDataAttributes.mjs";
 const DEFAULT_SWIPE_OPEN_RATIO = 0.5;
 const MIN_SWIPE_START_DISTANCE = 1;
@@ -40,9 +43,9 @@ const stateAttributesMapping = {
     return value ? SWIPE_AREA_SWIPING_HOOK : null;
   },
   swipeDirection(value) {
-    return value ? {
+    return {
       [DrawerSwipeAreaDataAttributes.swipeDirection]: value
-    } : null;
+    };
   },
   disabled(value) {
     return value ? SWIPE_AREA_DISABLED_HOOK : null;
@@ -73,16 +76,14 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     swipeDirection: swipeDirectionProp,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const {
     swipeDirection,
-    frontmostHeight
+    frontmostHeight,
+    swipeAreaActiveRef
   } = useDrawerRootContext();
-  const providerContext = useDrawerProviderContext(true);
+  const providerContext = useDrawerProviderContext();
   const [swipeActive, setSwipeActive] = React.useState(false);
-  const releaseDismissTimeout = useTimeout();
   const swipeAreaRef = React.useRef(null);
   const swipeStartEventRef = React.useRef(null);
   const openedBySwipeRef = React.useRef(false);
@@ -92,7 +93,10 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
   });
   const closedOffsetRef = React.useRef(null);
   const appliedSwipeStylesRef = React.useRef(false);
+  const swipePopupElementRef = React.useRef(null);
+  const swipeBackdropElementRef = React.useRef(null);
   const popupTransitionRef = React.useRef(null);
+  const releaseGuardCleanupRef = React.useRef(NOOP);
   const swipeAreaId = useBaseUiId(componentProps.id);
   const registerTrigger = useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
@@ -104,21 +108,40 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
   const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
   const enabled = !disabled && (!open || swipeActive);
   function disableDismissForSwipe() {
-    releaseDismissTimeout.clear();
+    releaseGuardCleanupRef.current();
     store.context.outsidePressEnabledRef.current = false;
   }
-  function enableDismissAfterRelease() {
-    // Safari can dispatch outside-press for the same swipe-open gesture
-    // after release, so defer re-enabling dismissal to the next macrotask.
-    releaseDismissTimeout.start(0, () => {
+  const enableDismissAfterRelease = useStableCallback(() => {
+    releaseGuardCleanupRef.current();
+    const doc = ownerDocument(swipeAreaRef.current);
+    function restore(event) {
+      // The gesture's trailing release click is the one physical click with no `pointerdown` of
+      // its own. Ignore it and keep waiting, so it cannot dismiss the drawer it just opened,
+      // while a click-only activation (keyboard or assistive tech) still re-enables in time.
+      if (event?.type === 'click' && event.detail !== 0 && !isVirtualClick(event)) {
+        return;
+      }
+      releaseGuardCleanupRef.current = NOOP;
+      doc.removeEventListener('pointerdown', restore, true);
+      doc.removeEventListener('click', restore, true);
       store.context.outsidePressEnabledRef.current = true;
-    });
-  }
-  function resolvePopupSize() {
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return null;
     }
+
+    // The pointerup that ends a swipe-open gesture synthesizes a `click`. When the drag released
+    // outside the popup (e.g. it was dragged past the popup's size), that click would be treated as
+    // an outside press and immediately dismiss the drawer that was just opened. Keep outside-press
+    // dismissal disabled until the next interaction that isn't that release click: a deliberate
+    // outside press starts with a `pointerdown`, and a click-only activation (keyboard or
+    // assistive tech) is distinguishable from a physical release. This is deterministic, unlike
+    // re-enabling on a timer that can race the synthesized click and dismiss at random.
+    //
+    // `restore` runs in document capture, ahead of floating-ui's own outside-press check (which
+    // happens on the event target, after capture), so the triggering press still dismisses.
+    releaseGuardCleanupRef.current = restore;
+    doc.addEventListener('pointerdown', restore, true);
+    doc.addEventListener('click', restore, true);
+  });
+  function getPopupSize(popupElement) {
     const isHorizontal = dismissDirection === 'left' || dismissDirection === 'right';
     const size = isHorizontal ? popupElement.offsetWidth : popupElement.offsetHeight;
     if (size <= 0) {
@@ -126,15 +149,15 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     }
     return size;
   }
-  function resolveClosedOffset() {
-    const offset = resolvePopupSize();
+  function resolvePopupSize() {
+    const popupElement = store.context.popupRef.current;
+    return popupElement ? getPopupSize(popupElement) : null;
+  }
+  function resolveClosedOffset(popupElement) {
+    const offset = getPopupSize(popupElement);
     if (offset == null) {
       return null;
     }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return offset;
-    }
     const isHorizontal = dismissDirection === 'left' || dismissDirection === 'right';
     const transform = getElementTransform(popupElement);
     const transformOffset = isHorizontal ? transform.x : transform.y;
@@ -151,9 +174,6 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     return popupSize * DEFAULT_SWIPE_OPEN_RATIO;
   }
   function applySwipeMovement() {
-    if (!swipeActive) {
-      return;
-    }
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
       return;
@@ -162,10 +182,10 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       return;
     }
     if (closedOffsetRef.current == null) {
-      closedOffsetRef.current = resolveClosedOffset();
+      closedOffsetRef.current = resolveClosedOffset(popupElement);
     }
     const closedOffset = closedOffsetRef.current;
-    if (!closedOffset || !Number.isFinite(closedOffset) || closedOffset <= 0) {
+    if (closedOffset === null) {
       return;
     }
     const {
@@ -186,6 +206,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementX, `${movementX}px`);
     popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementY, `${movementY}px`);
     popupElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
+    swipePopupElementRef.current = popupElement;
     if (popupTransitionRef.current === null) {
       popupTransitionRef.current = popupElement.style.transition;
     }
@@ -193,6 +214,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
     const backdropElement = store.context.backdropRef.current;
     if (backdropElement) {
       backdropElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
+      swipeBackdropElementRef.current = backdropElement;
       backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${backdropProgress}`);
       if (openProgress > 0 && frontmostHeight > 0) {
         backdropElement.style.setProperty(DrawerPopupCssVars.height, `${frontmostHeight}px`);
@@ -205,10 +227,11 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       frontmostHeight: openProgress > 0 ? frontmostHeight : 0
     });
     appliedSwipeStylesRef.current = true;
+    swipeAreaActiveRef.current = true;
   }
   const clearSwipeStyles = useStableCallback(() => {
-    const popupElement = store.context.popupRef.current;
-    if (popupElement && appliedSwipeStylesRef.current) {
+    const popupElement = swipePopupElementRef.current;
+    if (popupElement) {
       popupElement.style.removeProperty(DrawerPopupCssVars.swipeMovementX);
       popupElement.style.removeProperty(DrawerPopupCssVars.swipeMovementY);
       popupElement.removeAttribute(DrawerPopupDataAttributes.swiping);
@@ -217,7 +240,7 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       popupElement.style.transition = popupTransitionRef.current;
       popupTransitionRef.current = null;
     }
-    const backdropElement = store.context.backdropRef.current;
+    const backdropElement = swipeBackdropElementRef.current;
     if (backdropElement) {
       backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
       backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
@@ -228,19 +251,16 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       frontmostHeight: 0
     });
     appliedSwipeStylesRef.current = false;
+    swipePopupElementRef.current = null;
+    swipeBackdropElementRef.current = null;
+    swipeAreaActiveRef.current = false;
   });
   function openDrawer(event) {
-    if (store.select('open')) {
-      return;
-    }
     openedBySwipeRef.current = true;
-    store.setOpen(true, createChangeEventDetails(REASONS.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(true, createChangeEventDetails(REASONS.swipe, event, swipeAreaRef.current));
   }
   function closeDrawer(event) {
-    if (!store.select('open')) {
-      return;
-    }
-    store.setOpen(false, createChangeEventDetails(REASONS.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(false, createChangeEventDetails(REASONS.swipe, event, swipeAreaRef.current));
   }
   function resetSwipeInteractionState() {
     swipeStartEventRef.current = null;
@@ -283,10 +303,10 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
         return;
       }
       const displacement = getDisplacement(resolvedSwipeDirection, details.deltaX, details.deltaY);
-      if (displacement < MIN_SWIPE_START_DISTANCE && !openedBySwipeRef.current) {
+      if (!openedBySwipeRef.current && displacement < MIN_SWIPE_START_DISTANCE) {
         return;
       }
-      if (!openedBySwipeRef.current) {
+      if (!openedBySwipeRef.current && !store.select('open')) {
         openDrawer(swipeStartEventRef.current);
       }
       applySwipeMovement();
@@ -302,14 +322,14 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
       const displacement = getDisplacement(resolvedSwipeDirection, deltaX, deltaY);
       const releaseVelocity = getDisplacement(resolvedSwipeDirection, releaseVelocityX, releaseVelocityY);
       const threshold = resolveSwipeOpenThreshold();
-      const hasEnoughDistance = threshold != null && displacement >= threshold;
+      const hasEnoughDistance = displacement >= threshold;
       const hasEnoughVelocity = releaseVelocity >= VELOCITY_THRESHOLD;
-      const shouldOpen = threshold != null && direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
+      const shouldOpen = direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
       if (shouldOpen) {
         if (!store.select('open')) {
           openDrawer(event);
         }
-      } else if (openedBySwipeRef.current) {
+      } else if (openedBySwipeRef.current && store.select('open')) {
         closeDrawer(event);
       }
       finishSwipeInteraction();
@@ -320,16 +340,29 @@ export const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwip
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
   const resetSwipe = swipe.reset;
-  React.useEffect(() => {
+
+  // The commit that opens the drawer re-renders the popup, resetting `--swipe-movement-*` to `0px`
+  // (the viewport isn't swiping). Re-assert after the DOM mutation but before paint. No deps: must
+  // run on every commit the swipe area participates in.
+  useIsoLayoutEffect(() => {
+    if (swipeActive && appliedSwipeStylesRef.current) {
+      applySwipeMovement();
+    }
+  });
+  useIsoLayoutEffect(() => {
     if (!enabled) {
+      if (swipeActive) {
+        enableDismissAfterRelease();
+      }
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
       resetSwipeInteractionState();
     }
-  }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
+  }, [clearSwipeStyles, enableDismissAfterRelease, enabled, resetDragDelta, resetSwipe, swipeActive]);
   React.useEffect(() => {
     return () => {
+      releaseGuardCleanupRef.current();
       store.context.outsidePressEnabledRef.current = true;
     };
   }, [store]);

package/drawer/trigger/DrawerTrigger.d.mts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { DialogHandle as DrawerHandle } from "../../dialog/store/DialogHandle.mjs";
+import type { DrawerHandle } from "../handle.mjs";
 import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.mjs";
 /**
  * A button that opens the drawer.

package/drawer/trigger/DrawerTrigger.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { DialogHandle as DrawerHandle } from "../../dialog/store/DialogHandle.js";
+import type { DrawerHandle } from "../handle.js";
 import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * A button that opens the drawer.