@base-ui/react 1.2.0 → 1.3.0

package/drawer/root/DrawerRoot.js

@@ -11,6 +11,7 @@ var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _useId = require("@base-ui/utils/useId");
 var _DrawerRootContext = require("./DrawerRootContext");
 var _dialog = require("../../dialog");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -189,7 +190,7 @@ function createNestedSwipeProgressStore() {
   };
 }
 function DrawerProviderReporter() {
-  const drawerId = React.useId();
+  const drawerId = (0, _useId.useId)();
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(false);
   const open = dialogRootContext.store.useState('open');
@@ -197,7 +198,7 @@ function DrawerProviderReporter() {
   const popupElement = dialogRootContext.store.useState('popupElement');
   const isTopmost = nestedOpenDialogCount === 0;
   React.useEffect(() => {
-    if (!providerContext) {
+    if (!providerContext || drawerId == null) {
       return undefined;
     }
     return () => {
@@ -205,6 +206,9 @@ function DrawerProviderReporter() {
     };
   }, [drawerId, providerContext]);
   React.useEffect(() => {
+    if (drawerId == null) {
+      return;
+    }
     providerContext?.setDrawerOpen(drawerId, open);
   }, [drawerId, open, providerContext]);
   React.useEffect(() => {

package/drawer/swipe-area/DrawerSwipeArea.d.ts

@@ -9,7 +9,7 @@ import { type DrawerSwipeDirection } from "../root/DrawerRootContext.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerSwipeArea: React.ForwardRefExoticComponent<Omit<DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeArea.State> {
+export interface DrawerSwipeAreaProps extends BaseUIComponentProps<'div', DrawerSwipeAreaState> {
   /**
    * Whether the swipe area is disabled.
    * @default false

package/drawer/swipe-area/DrawerSwipeArea.js

@@ -21,35 +21,37 @@ var _DrawerRootContext = require("../root/DrawerRootContext");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _popups = require("../../utils/popups");
 var _DrawerProviderContext = require("../provider/DrawerProviderContext");
-var _popupStateMapping = require("../../utils/popupStateMapping");
+var _DrawerSwipeAreaDataAttributes = require("./DrawerSwipeAreaDataAttributes");
 const DEFAULT_SWIPE_OPEN_RATIO = 0.5;
 const MIN_SWIPE_START_DISTANCE = 1;
 const VELOCITY_THRESHOLD = 0.1;
 const FALLBACK_SWIPE_OPEN_THRESHOLD = 40;
 const SWIPE_AREA_OPEN_HOOK = {
-  [_popupStateMapping.CommonPopupDataAttributes.open]: ''
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.open]: ''
 };
 const SWIPE_AREA_CLOSED_HOOK = {
-  [_popupStateMapping.CommonPopupDataAttributes.closed]: ''
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.closed]: ''
+};
+const SWIPE_AREA_SWIPING_HOOK = {
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.swiping]: ''
+};
+const SWIPE_AREA_DISABLED_HOOK = {
+  [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.disabled]: ''
 };
 const stateAttributesMapping = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
   swiping(value) {
-    return value ? {
-      'data-swiping': ''
-    } : null;
+    return value ? SWIPE_AREA_SWIPING_HOOK : null;
   },
   swipeDirection(value) {
     return value ? {
-      'data-swipe-direction': value
+      [_DrawerSwipeAreaDataAttributes.DrawerSwipeAreaDataAttributes.swipeDirection]: value
     } : null;
   },
   disabled(value) {
-    return value ? {
-      'data-disabled': ''
-    } : null;
+    return value ? SWIPE_AREA_DISABLED_HOOK : null;
   }
 };
 const oppositeSwipeDirection = {

package/drawer/swipe-area/DrawerSwipeAreaDataAttributes.d.ts

@@ -0,0 +1,23 @@
+export declare enum DrawerSwipeAreaDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the swipe area is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = "data-swipe-direction",
+  /**
+   * Present when the drawer is being swiped.
+   */
+  swiping = "data-swiping",
+}

package/drawer/swipe-area/DrawerSwipeAreaDataAttributes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerSwipeAreaDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerSwipeAreaDataAttributes = exports.DrawerSwipeAreaDataAttributes = function (DrawerSwipeAreaDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the swipe area is disabled.
+   */
+  DrawerSwipeAreaDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Indicates the swipe direction.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  DrawerSwipeAreaDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the drawer is being swiped.
+   */
+  DrawerSwipeAreaDataAttributes["swiping"] = "data-swiping";
+  return DrawerSwipeAreaDataAttributes;
+}({});

package/drawer/title/DrawerTitle.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerTitle: DrawerTitle;
-export interface DrawerTitleProps extends BaseUIComponentProps<'h2', DrawerTitle.State> {}
+export interface DrawerTitleProps extends BaseUIComponentProps<'h2', DrawerTitleState> {}
 export interface DrawerTitleState {}
 export interface DrawerTitle {
   (componentProps: DrawerTitleProps): React.JSX.Element;

package/drawer/trigger/DrawerTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const DrawerTrigger: DrawerTrigger;
 export interface DrawerTrigger {
   <Payload>(componentProps: DrawerTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface DrawerTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DrawerTrigger.State> {
+export interface DrawerTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DrawerTriggerState> {
   /**
    * A handle to associate the trigger with a drawer.
    * Can be created with the Drawer.createHandle() method.

package/drawer/viewport/DrawerViewport.d.ts

@@ -13,6 +13,9 @@ export interface DrawerViewportState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the drawer is nested within another drawer.
@@ -23,7 +26,7 @@ export interface DrawerViewportState {
    */
   nestedDialogOpen: boolean;
 }
-export interface DrawerViewportProps extends BaseUIComponentProps<'div', DrawerViewport.State> {}
+export interface DrawerViewportProps extends BaseUIComponentProps<'div', DrawerViewportState> {}
 export declare namespace DrawerViewport {
   type Props = DrawerViewportProps;
   type State = DrawerViewportState;

package/drawer/viewport/DrawerViewport.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
 var _owner = require("@base-ui/utils/owner");
+var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _DialogViewport = require("../../dialog/viewport/DialogViewport");
@@ -22,12 +23,15 @@ var _useSwipeDismiss = require("../../utils/useSwipeDismiss");
 var _DrawerPopupCssVars = require("../popup/DrawerPopupCssVars");
 var _DrawerPopupDataAttributes = require("../popup/DrawerPopupDataAttributes");
 var _DrawerBackdropCssVars = require("../backdrop/DrawerBackdropCssVars");
+var _DrawerContentDataAttributes = require("../content/DrawerContentDataAttributes");
 var _reasons = require("../../utils/reasons");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _utils = require("../../floating-ui-react/utils");
 var _DrawerViewportContext = require("./DrawerViewportContext");
 var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _scrollable = require("../../utils/scrollable");
+var _constants = require("../../utils/constants");
+var _getElementAtPoint = require("../../utils/getElementAtPoint");
 var _jsxRuntime = require("react/jsx-runtime");
 const MIN_SWIPE_THRESHOLD = 10;
 const FAST_SWIPE_VELOCITY = 0.5;
@@ -40,7 +44,7 @@ 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 DRAWER_CONTENT_SELECTOR = `[${_DrawerContentDataAttributes.DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -74,6 +78,8 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   const popupElementState = store.useState('popupElement');
   const nestedDrawerOpen = nestedOpenDialogCount > 0;
   const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
+  const isVerticalScrollAxis = scrollAxis === 'vertical';
+  const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
   const {
     snapPoints,
     resolvedSnapPoints,
@@ -85,9 +91,11 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
+  const controlledDismissFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const nestedSwipeActiveRef = React.useRef(false);
   const lastPointerTypeRef = React.useRef('');
   const ignoreNextTouchStartFromPenRef = React.useRef(false);
+  const ignoreTouchSwipeRef = React.useRef(false);
   const touchScrollStateRef = React.useRef(null);
   const snapPointRange = React.useMemo(() => {
     if (!snapPoints || snapPoints.length < 2) {
@@ -278,14 +286,25 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     }) {
       return getBaseSwipeThreshold(element, direction);
     },
-    canStart(position) {
+    canStart(position, details) {
       const popupElement = store.context.popupRef.current;
       if (!popupElement) {
         return false;
       }
       const doc = popupElement.ownerDocument;
-      const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(position.x, position.y) : null;
-      return !!(elementAtPoint && (0, _utils.contains)(popupElement, elementAtPoint));
+      const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, position.x, position.y);
+      if (!elementAtPoint || !(0, _utils.contains)(popupElement, elementAtPoint)) {
+        return false;
+      }
+      const nativeEvent = details.nativeEvent;
+      const touchLike = 'touches' in nativeEvent || 'pointerType' 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);
@@ -514,6 +533,33 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         clearSwipeRelease();
         return;
       }
+
+      // In controlled mode, the effective open state may not have changed yet
+      // (openProp takes precedence over state.open). Proceed optimistically with the
+      // dismiss animation — React's Scheduler flushes before the next rAF, so we can
+      // reliably check whether the parent accepted or rejected the close.
+      // Note: if onOpenChange is asynchronous (e.g., closes the drawer after a network
+      // call), the rAF check will see open === true, revert the animation, and the
+      // drawer will close without animation when the parent eventually sets open={false}.
+      if (store.select('open')) {
+        const savedEvent = event;
+        controlledDismissFrame.request(() => {
+          if (store.select('open')) {
+            // Parent rejected: revert animation and restore snap point.
+            const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
+            if (pendingSnapPoint !== undefined) {
+              setActiveSnapPoint?.(pendingSnapPoint, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.swipe, savedEvent));
+            }
+            pendingSwipeCloseSnapPointRef.current = undefined;
+            clearSwipeRelease();
+            resetSwipeRef.current?.();
+          } else {
+            // Parent accepted: clean up the ref.
+            pendingSwipeCloseSnapPointRef.current = undefined;
+          }
+        });
+        return;
+      }
       pendingSwipeCloseSnapPointRef.current = undefined;
       setSwipeDismissed(true);
     }
@@ -527,51 +573,39 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     if (!rootElement) {
       return undefined;
     }
-    const doc = (0, _owner.ownerDocument)(rootElement);
+    const resolvedRootElement = rootElement;
+    const doc = (0, _owner.ownerDocument)(resolvedRootElement);
     const win = (0, _owner.ownerWindow)(doc);
     function handleNativeTouchMove(event) {
+      if (ignoreTouchSwipeRef.current) {
+        return;
+      }
       const touchState = touchScrollStateRef.current;
       const touch = event.touches[0];
       if (!touch || !touchState) {
         return;
       }
-      const target = (0, _dom.isElement)(event.target) ? event.target : null;
-      const updateTouchPosition = () => {
-        touchState.lastX = touch.clientX;
-        touchState.lastY = touch.clientY;
-      };
+      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;
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
 
       // Avoid blocking pinch zoom or text selection adjustments on iOS Safari.
       if (event.touches.length === 2) {
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      let allowTouchMove = false;
-
-      // Allow the ability to adjust text selection.
-      if (target) {
-        const selection = target.ownerDocument.defaultView?.getSelection();
-        if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
-          allowTouchMove = true;
-        }
-      }
-
-      // Allow user to drag the selection handles in an input element.
-      if (target instanceof win.HTMLInputElement) {
-        const input = target;
-        if (input.selectionStart != null && input.selectionEnd != null && input.selectionStart < input.selectionEnd && doc.activeElement === input) {
-          allowTouchMove = true;
-        }
-      }
+      const allowTouchMove = shouldIgnoreSwipeForTextSelection(doc, resolvedRootElement);
       if (allowTouchMove || !open || !mounted || nestedDrawerOpen) {
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
+        return;
+      }
+      if (preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis)) {
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const scrollTarget = touchState.scrollTarget;
@@ -579,7 +613,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
       const hasScrollableContent = hasScrollableContentOnAxis(scrollTarget, scrollAxis);
@@ -589,13 +623,13 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         if (event.cancelable) {
           event.preventDefault();
         }
-        updateTouchPosition();
+        updateTouchScrollPosition(touchState, touch);
         return;
       }
-      const delta = scrollAxis === 'vertical' ? touch.clientY - touchState.lastY : touch.clientX - touchState.lastX;
+      const delta = drawerAxisDelta;
       if (delta !== 0) {
         const canSwipeFromScrollEdge = canSwipeFromScrollEdgeOnMove(scrollTarget, scrollAxis, swipeDirection, delta);
-        if (touchState.allowSwipe !== true) {
+        if (!touchState.allowSwipe) {
           if (!event.cancelable) {
             touchState.allowSwipe = false;
           } else if (canSwipeFromScrollEdge) {
@@ -608,7 +642,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
           event.preventDefault();
         }
       }
-      updateTouchPosition();
+      updateTouchScrollPosition(touchState, touch);
     }
     doc.addEventListener('touchmove', handleNativeTouchMove, {
       passive: false,
@@ -619,7 +653,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         capture: true
       });
     };
-  }, [mounted, nestedDrawerOpen, open, popupElementState, scrollAxis, swipeDirection, viewportElement]);
+  }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
   React.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
       return;
@@ -667,6 +701,7 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
     }
   }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
+    ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
     lastPointerTypeRef.current = '';
     ignoreNextTouchStartFromPenRef.current = false;
@@ -679,12 +714,15 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
       onPointerDown(event) {
         lastPointerTypeRef.current = event.pointerType;
         ignoreNextTouchStartFromPenRef.current = event.pointerType === 'pen';
-        if (!open || !mounted || nestedDrawerOpen || event.pointerType === 'touch') {
+        if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
         const doc = (0, _owner.ownerDocument)(event.currentTarget);
-        const elementAtPoint = typeof doc.elementFromPoint === 'function' ? doc.elementFromPoint(event.clientX, event.clientY) : null;
-        if (elementAtPoint?.closest('[data-swipe-ignore]')) {
+        const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, event.clientX, event.clientY);
+        if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
+          return;
+        }
+        if (event.pointerType === 'touch') {
           return;
         }
         swipePointerProps.onPointerDown?.(event);
@@ -717,10 +755,12 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
         const startedFromPenPointerDown = lastPointerTypeRef.current === 'pen' && ignoreNextTouchStartFromPenRef.current;
         if (startedFromPenPointerDown) {
           ignoreNextTouchStartFromPenRef.current = false;
+          ignoreTouchSwipeRef.current = false;
           touchScrollStateRef.current = null;
           return;
         }
         if (!open || !mounted || nestedDrawerOpen) {
+          ignoreTouchSwipeRef.current = false;
           touchScrollStateRef.current = null;
           return;
         }
@@ -729,31 +769,54 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
           return;
         }
         if (isReactTouchEventOnRangeInput(event)) {
+          ignoreTouchSwipeRef.current = false;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        const doc = (0, _owner.ownerDocument)(event.currentTarget);
+        const elementAtPoint = (0, _getElementAtPoint.getElementAtPoint)(doc, touch.clientX, touch.clientY);
+        ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
+        if (ignoreTouchSwipeRef.current) {
           touchScrollStateRef.current = null;
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
         const target = (0, _dom.isElement)(event.target) ? event.target : null;
-        const scrollTarget = rootElement && target && (0, _utils.contains)(rootElement, target) ? (0, _scrollable.findScrollableTouchTarget)(target, rootElement, scrollAxis) : null;
+        let scrollTarget = null;
+        let hasCrossAxisScrollableContent = false;
+        if (rootElement && target && (0, _utils.contains)(rootElement, target)) {
+          scrollTarget = (0, _scrollable.findScrollableTouchTarget)(target, rootElement, scrollAxis);
+          hasCrossAxisScrollableContent = (0, _scrollable.findScrollableTouchTarget)(target, rootElement, crossScrollAxis) != null;
+        }
         let allowSwipe = null;
         if (scrollTarget) {
           const canSwipeFromEdge = isAtSwipeStartEdge(scrollTarget, scrollAxis, swipeDirection);
           allowSwipe = canSwipeFromEdge ? null : false;
         }
         touchScrollStateRef.current = {
+          startX: touch.clientX,
+          startY: touch.clientY,
           lastX: touch.clientX,
           lastY: touch.clientY,
           scrollTarget,
-          allowSwipe
+          hasCrossAxisScrollableContent,
+          allowSwipe,
+          preserveNativeCrossAxisScroll: false
         };
         swipeTouchProps.onTouchStart?.(event);
       },
       onTouchMove(event) {
+        if (ignoreTouchSwipeRef.current) {
+          return;
+        }
         if (isReactTouchEventOnRangeInput(event)) {
           return;
         }
         const touchState = touchScrollStateRef.current;
-        if (touchState?.scrollTarget && touchState.allowSwipe !== true) {
+        if (touchState?.preserveNativeCrossAxisScroll) {
+          return;
+        }
+        if (touchState?.allowSwipe === false || touchState?.scrollTarget != null && !touchState.allowSwipe) {
           return;
         }
         swipeTouchProps.onTouchMove?.(event);
@@ -765,7 +828,10 @@ const DrawerViewport = exports.DrawerViewport = /*#__PURE__*/React.forwardRef(fu
       onTouchCancel(event) {
         resetTouchTrackingState();
         swipeTouchProps.onTouchCancel?.(event);
-      }
+      },
+      // Drawer popups use drawer-specific nested state attributes.
+      // Suppress DialogViewport's generic nested dialog attribute.
+      ['data-nested-dialog-open']: undefined
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerViewportContext.DrawerViewportContext.Provider, {
       value: swipeProviderValue,
@@ -793,6 +859,12 @@ function setBackdropSwipingAttribute(backdropElement, swiping) {
   }
   backdropElement.removeAttribute(_DrawerPopupDataAttributes.DrawerPopupDataAttributes.swiping);
 }
+function isSwipeIgnoredTarget(target) {
+  return Boolean(target?.closest(_constants.BASE_UI_SWIPE_IGNORE_SELECTOR));
+}
+function isDrawerContentTarget(target) {
+  return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
+}
 function getBaseSwipeThreshold(element, direction) {
   const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
   return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
@@ -800,6 +872,35 @@ function getBaseSwipeThreshold(element, direction) {
 function isRangeInput(target, win) {
   return target instanceof win.HTMLInputElement && target.type === 'range';
 }
+function isTextSelectionControl(target) {
+  if (!(0, _dom.isElement)(target)) {
+    return false;
+  }
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+}
+function hasExpandedSelectionWithinTarget(selection, target) {
+  const anchorElement = (0, _dom.isElement)(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+  const focusElement = (0, _dom.isElement)(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+  return selection.containsNode(target, true) || (0, _utils.contains)(target, anchorElement) || (0, _utils.contains)(target, focusElement);
+}
+function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
+  const activeElement = doc.activeElement;
+  const activeElementWithinRoot = Boolean(activeElement && (0, _utils.contains)(rootElement, activeElement));
+  if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
+    const {
+      selectionStart,
+      selectionEnd
+    } = activeElement;
+    if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
+      return true;
+    }
+  }
+  const selection = doc.getSelection?.();
+  if (!selection || selection.isCollapsed) {
+    return false;
+  }
+  return hasExpandedSelectionWithinTarget(selection, rootElement);
+}
 function isEventOnRangeInput(event, win) {
   const composedPath = event.composedPath();
   if (composedPath) {
@@ -810,6 +911,27 @@ function isEventOnRangeInput(event, win) {
 function isReactTouchEventOnRangeInput(event) {
   return isEventOnRangeInput(event.nativeEvent, (0, _owner.ownerWindow)(event.currentTarget));
 }
+function updateTouchScrollPosition(touchState, touch) {
+  touchState.lastX = touch.clientX;
+  touchState.lastY = touch.clientY;
+}
+function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
+  if (touchState.preserveNativeCrossAxisScroll) {
+    return true;
+  }
+  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
+    return false;
+  }
+  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) {
+    return false;
+  }
+  touchState.preserveNativeCrossAxisScroll = true;
+  return true;
+}
 function hasScrollableContentOnAxis(scrollTarget, axis) {
   return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
 }

package/drawer/viewport/DrawerViewportDataAttributes.d.ts

@@ -0,0 +1,22 @@
+export declare enum DrawerViewportDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  nested = "data-nested",
+}

package/drawer/viewport/DrawerViewportDataAttributes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerViewportDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerViewportDataAttributes = exports.DrawerViewportDataAttributes = function (DrawerViewportDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerViewportDataAttributes[DrawerViewportDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the drawer is nested within another drawer.
+   */
+  DrawerViewportDataAttributes["nested"] = "data-nested";
+  return DrawerViewportDataAttributes;
+}({});