@base-ui/react 1.2.0 → 1.3.0

package/esm/floating-ui-react/hooks/useDismiss.js

@@ -1,8 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { getOverflowAncestors } from '@floating-ui/react-dom';
-import { getComputedStyle, getParentNode, isElement, isHTMLElement, isLastTraversableNode, isWebKit } from '@floating-ui/utils/dom';
+import { getComputedStyle, getParentNode, isElement, isHTMLElement, isLastTraversableNode, isShadowRoot, isWebKit } from '@floating-ui/utils/dom';
 import { Timeout, useTimeout } from '@base-ui/utils/useTimeout';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
@@ -18,6 +17,9 @@ const bubbleHandlerKeys = {
   intentional: 'onClick',
   sloppy: 'onPointerDown'
 };
+function alwaysFalse() {
+  return false;
+}
 export function normalizeProp(normalizable) {
   return {
     escapeKey: typeof normalizable === 'boolean' ? normalizable : normalizable?.escapeKey ?? false,
@@ -33,10 +35,7 @@ export function useDismiss(context, props = {}) {
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floatingElement = store.useState('floatingElement');
-  const referenceElement = store.useState('referenceElement');
-  const domReferenceElement = store.useState('domReferenceElement');
   const {
-    onOpenChange,
     dataRef
   } = store.context;
   const {
@@ -44,16 +43,20 @@ export function useDismiss(context, props = {}) {
     escapeKey = true,
     outsidePress: outsidePressProp = true,
     outsidePressEvent = 'sloppy',
-    referencePress = false,
+    referencePress = alwaysFalse,
     referencePressEvent = 'sloppy',
-    ancestorScroll = false,
     bubbles,
     externalTree
   } = props;
   const tree = useFloatingTree(externalTree);
   const outsidePressFn = useStableCallback(typeof outsidePressProp === 'function' ? outsidePressProp : () => false);
   const outsidePress = typeof outsidePressProp === 'function' ? outsidePressFn : outsidePressProp;
-  const endedOrStartedInsideRef = React.useRef(false);
+  const outsidePressEnabled = outsidePress !== false;
+  const getOutsidePressEventProp = useStableCallback(() => outsidePressEvent);
+  const pressStartedInsideRef = React.useRef(false);
+  const pressStartPreventedRef = React.useRef(false);
+  // Ignore only the very next outside click after dragging from inside to outside.
+  const suppressNextOutsideClickRef = React.useRef(false);
   const {
     escapeKey: escapeKeyBubbles,
     outsidePress: outsidePressBubbles
@@ -67,18 +70,7 @@ export function useDismiss(context, props = {}) {
   });
   const isComposingRef = React.useRef(false);
   const currentPointerTypeRef = React.useRef('');
-  const trackPointerType = useStableCallback(event => {
-    currentPointerTypeRef.current = event.pointerType;
-  });
-  const getOutsidePressEvent = useStableCallback(() => {
-    const type = currentPointerTypeRef.current;
-    const computedType = type === 'pen' || !type ? 'mouse' : type;
-    const resolved = typeof outsidePressEvent === 'function' ? outsidePressEvent() : outsidePressEvent;
-    if (typeof resolved === 'string') {
-      return resolved;
-    }
-    return resolved[computedType];
-  });
+  const isReferencePressEnabled = useStableCallback(referencePress);
   const closeOnEscapeKeyDown = useStableCallback(event => {
     if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
       return;
@@ -111,321 +103,388 @@ export function useDismiss(context, props = {}) {
       event.stopPropagation();
     }
   });
-  const shouldIgnoreEvent = useStableCallback(event => {
-    const computedOutsidePressEvent = getOutsidePressEvent();
-    return computedOutsidePressEvent === 'intentional' && event.type !== 'click' || computedOutsidePressEvent === 'sloppy' && event.type === 'click';
-  });
   const markInsideReactTree = useStableCallback(() => {
     dataRef.current.insideReactTree = true;
     clearInsideReactTreeTimeout.start(0, clearInsideReactTree);
   });
-  const closeOnPressOutside = useStableCallback((event, endedOrStartedInside = false) => {
-    if (shouldIgnoreEvent(event)) {
-      clearInsideReactTree();
-      return;
-    }
-    if (dataRef.current.insideReactTree) {
-      clearInsideReactTree();
-      return;
+  React.useEffect(() => {
+    if (!open || !enabled) {
+      return undefined;
     }
-    if (getOutsidePressEvent() === 'intentional' && endedOrStartedInside) {
-      return;
+    dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
+    dataRef.current.__outsidePressBubbles = outsidePressBubbles;
+    const compositionTimeout = new Timeout();
+    const preventedPressSuppressionTimeout = new Timeout();
+    function handleCompositionStart() {
+      compositionTimeout.clear();
+      isComposingRef.current = true;
     }
-    if (typeof outsidePress === 'function' && !outsidePress(event)) {
-      return;
+    function handleCompositionEnd() {
+      // Safari fires `compositionend` before `keydown`, so we need to wait
+      // until the next tick to set `isComposing` to `false`.
+      // https://bugs.webkit.org/show_bug.cgi?id=165004
+      compositionTimeout.start(
+      // 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
+      // Only apply to WebKit for the test to remain 0ms.
+      isWebKit() ? 5 : 0, () => {
+        isComposingRef.current = false;
+      });
     }
-    const target = getTarget(event);
-    const inertSelector = `[${createAttribute('inert')}]`;
-    const markers = ownerDocument(store.select('floatingElement')).querySelectorAll(inertSelector);
-    const triggers = store.context.triggerElements;
-
-    // If another trigger is clicked, don't close the floating element.
-    if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => contains(trigger, target)))) {
-      return;
+    function suppressImmediateOutsideClickAfterPreventedStart() {
+      suppressNextOutsideClickRef.current = true;
+      // Firefox can emit the synthetic outside click in a later task after
+      // pointer lock exit, so microtask clearing is too early here.
+      preventedPressSuppressionTimeout.start(0, () => {
+        suppressNextOutsideClickRef.current = false;
+      });
     }
-    let targetRootAncestor = isElement(target) ? target : null;
-    while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
-      const nextParent = getParentNode(targetRootAncestor);
-      if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
-        break;
+    function resetPressStartState() {
+      pressStartedInsideRef.current = false;
+      pressStartPreventedRef.current = false;
+    }
+    function getOutsidePressEvent() {
+      const type = currentPointerTypeRef.current;
+      const computedType = type === 'pen' || !type ? 'mouse' : type;
+      const outsidePressEventValue = getOutsidePressEventProp();
+      const resolved = typeof outsidePressEventValue === 'function' ? outsidePressEventValue() : outsidePressEventValue;
+      if (typeof resolved === 'string') {
+        return resolved;
       }
-      targetRootAncestor = nextParent;
+      return resolved[computedType];
     }
-
-    // Check if the click occurred on a third-party element injected after the
-    // floating element rendered.
-    if (markers.length && isElement(target) && !isRootElement(target) &&
-    // Clicked on a direct ancestor (e.g. FloatingOverlay).
-    !contains(target, store.select('floatingElement')) &&
-    // If the target root element contains none of the markers, then the
-    // element was injected after the floating element rendered.
-    Array.from(markers).every(marker => !contains(targetRootAncestor, marker))) {
-      return;
+    function shouldIgnoreEvent(event) {
+      const computedOutsidePressEvent = getOutsidePressEvent();
+      return computedOutsidePressEvent === 'intentional' && event.type !== 'click' || computedOutsidePressEvent === 'sloppy' && event.type === 'click';
     }
+    function isEventWithinFloatingTree(event) {
+      const nodeId = dataRef.current.floatingContext?.nodeId;
+      const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some(node => isEventTargetWithin(event, node.context?.elements.floating));
+      return isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement')) || targetIsInsideChildren;
+    }
+    function closeOnPressOutside(event) {
+      if (shouldIgnoreEvent(event)) {
+        clearInsideReactTree();
+        return;
+      }
+      if (dataRef.current.insideReactTree) {
+        clearInsideReactTree();
+        return;
+      }
+      const target = getTarget(event);
+      const inertSelector = `[${createAttribute('inert')}]`;
+      let markers = Array.from(ownerDocument(store.select('floatingElement')).querySelectorAll(inertSelector));
+      const targetRoot = isElement(target) ? target.getRootNode() : null;
+      if (isShadowRoot(targetRoot)) {
+        markers = markers.concat(Array.from(targetRoot.querySelectorAll(inertSelector)));
+      }
+      const triggers = store.context.triggerElements;
 
-    // Check if the click occurred on the scrollbar
-    // Skip for touch events: scrollbars don't receive touch events on most platforms
-    if (isHTMLElement(target) && !('touches' in event)) {
-      const lastTraversableNode = isLastTraversableNode(target);
-      const style = getComputedStyle(target);
-      const scrollRe = /auto|scroll/;
-      const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
-      const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
-      const canScrollX = isScrollableX && target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
-      const canScrollY = isScrollableY && target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
-      const isRTL = style.direction === 'rtl';
+      // If another trigger is clicked, don't close the floating element.
+      if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => contains(trigger, target)))) {
+        return;
+      }
+      let targetRootAncestor = isElement(target) ? target : null;
+      while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
+        const nextParent = getParentNode(targetRootAncestor);
+        if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
+          break;
+        }
+        targetRootAncestor = nextParent;
+      }
 
-      // Check click position relative to scrollbar.
-      // In some browsers it is possible to change the <body> (or window)
-      // scrollbar to the left side, but is very rare and is difficult to
-      // check for. Plus, for modal dialogs with backdrops, it is more
-      // important that the backdrop is checked but not so much the window.
-      const pressedVerticalScrollbar = canScrollY && (isRTL ? event.offsetX <= target.offsetWidth - target.clientWidth : event.offsetX > target.clientWidth);
-      const pressedHorizontalScrollbar = canScrollX && event.offsetY > target.clientHeight;
-      if (pressedVerticalScrollbar || pressedHorizontalScrollbar) {
+      // Check if the click occurred on a third-party element injected after the
+      // floating element rendered.
+      if (markers.length && isElement(target) && !isRootElement(target) &&
+      // Clicked on a direct ancestor (e.g. FloatingOverlay).
+      !contains(target, store.select('floatingElement')) &&
+      // If the target root element contains none of the markers, then the
+      // element was injected after the floating element rendered.
+      markers.every(marker => !contains(targetRootAncestor, marker))) {
         return;
       }
-    }
-    const nodeId = dataRef.current.floatingContext?.nodeId;
-    const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some(node => isEventTargetWithin(event, node.context?.elements.floating));
-    if (isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement')) || targetIsInsideChildren) {
-      return;
-    }
-    const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
-    if (children.length > 0) {
-      let shouldDismiss = true;
-      children.forEach(child => {
-        if (child.context?.open && !child.context.dataRef.current.__outsidePressBubbles) {
-          shouldDismiss = false;
+
+      // Check if the click occurred on the scrollbar
+      // Skip for touch events: scrollbars don't receive touch events on most platforms
+      if (isHTMLElement(target) && !('touches' in event)) {
+        const lastTraversableNode = isLastTraversableNode(target);
+        const style = getComputedStyle(target);
+        const scrollRe = /auto|scroll/;
+        const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
+        const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
+        const canScrollX = isScrollableX && target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+        const canScrollY = isScrollableY && target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+        const isRTL = style.direction === 'rtl';
+
+        // Check click position relative to scrollbar.
+        // In some browsers it is possible to change the <body> (or window)
+        // scrollbar to the left side, but is very rare and is difficult to
+        // check for. Plus, for modal dialogs with backdrops, it is more
+        // important that the backdrop is checked but not so much the window.
+        const pressedVerticalScrollbar = canScrollY && (isRTL ? event.offsetX <= target.offsetWidth - target.clientWidth : event.offsetX > target.clientWidth);
+        const pressedHorizontalScrollbar = canScrollX && event.offsetY > target.clientHeight;
+        if (pressedVerticalScrollbar || pressedHorizontalScrollbar) {
+          return;
         }
-      });
-      if (!shouldDismiss) {
+      }
+      if (isEventWithinFloatingTree(event)) {
         return;
       }
-    }
-    store.setOpen(false, createChangeEventDetails(REASONS.outsidePress, event));
-    clearInsideReactTree();
-  });
-  const handlePointerDown = useStableCallback(event => {
-    if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
-      return;
-    }
-    closeOnPressOutside(event);
-  });
-  const handleTouchStart = useStableCallback(event => {
-    if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
-      return;
-    }
-    const touch = event.touches[0];
-    if (touch) {
-      touchStateRef.current = {
-        startTime: Date.now(),
-        startX: touch.clientX,
-        startY: touch.clientY,
-        dismissOnTouchEnd: false,
-        dismissOnMouseDown: true
-      };
-      cancelDismissOnEndTimeout.start(1000, () => {
-        if (touchStateRef.current) {
-          touchStateRef.current.dismissOnTouchEnd = false;
-          touchStateRef.current.dismissOnMouseDown = false;
+
+      // In intentional mode, a press that starts inside and ends outside gets
+      // one suppressed outside click. Run this after inside-target checks so
+      // inside clicks don't consume the one-shot suppression.
+      if (getOutsidePressEvent() === 'intentional' && suppressNextOutsideClickRef.current) {
+        preventedPressSuppressionTimeout.clear();
+        suppressNextOutsideClickRef.current = false;
+        return;
+      }
+      if (typeof outsidePress === 'function' && !outsidePress(event)) {
+        return;
+      }
+      const nodeId = dataRef.current.floatingContext?.nodeId;
+      const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
+      if (children.length > 0) {
+        let shouldDismiss = true;
+        children.forEach(child => {
+          if (child.context?.open && !child.context.dataRef.current.__outsidePressBubbles) {
+            shouldDismiss = false;
+          }
+        });
+        if (!shouldDismiss) {
+          return;
         }
-      });
+      }
+      store.setOpen(false, createChangeEventDetails(REASONS.outsidePress, event));
+      clearInsideReactTree();
     }
-  });
-  const handleTouchStartCapture = useStableCallback(event => {
-    const target = getTarget(event);
-    function callback() {
-      handleTouchStart(event);
-      target?.removeEventListener(event.type, callback);
+    function handlePointerDown(event) {
+      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+        return;
+      }
+      closeOnPressOutside(event);
     }
-    target?.addEventListener(event.type, callback);
-  });
-  const closeOnPressOutsideCapture = useStableCallback(event => {
-    // When click outside is lazy (`up` event), handle dragging.
-    // Don't close if:
-    // - The click started inside the floating element.
-    // - The click ended inside the floating element.
-    const endedOrStartedInside = endedOrStartedInsideRef.current;
-    endedOrStartedInsideRef.current = false;
-    cancelDismissOnEndTimeout.clear();
-    if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
-      return;
+    function handleTouchStart(event) {
+      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (touch) {
+        touchStateRef.current = {
+          startTime: Date.now(),
+          startX: touch.clientX,
+          startY: touch.clientY,
+          dismissOnTouchEnd: false,
+          dismissOnMouseDown: true
+        };
+        cancelDismissOnEndTimeout.start(1000, () => {
+          if (touchStateRef.current) {
+            touchStateRef.current.dismissOnTouchEnd = false;
+            touchStateRef.current.dismissOnMouseDown = false;
+          }
+        });
+      }
     }
-    const target = getTarget(event);
-    function callback() {
+    function handleTouchStartCapture(event) {
+      currentPointerTypeRef.current = 'touch';
+      const target = getTarget(event);
+      function callback() {
+        handleTouchStart(event);
+        target?.removeEventListener(event.type, callback);
+      }
+      target?.addEventListener(event.type, callback);
+    }
+    function closeOnPressOutsideCapture(event) {
+      cancelDismissOnEndTimeout.clear();
       if (event.type === 'pointerdown') {
-        handlePointerDown(event);
-      } else {
-        closeOnPressOutside(event, endedOrStartedInside);
+        currentPointerTypeRef.current = event.pointerType;
+      }
+      if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
+        return;
       }
-      target?.removeEventListener(event.type, callback);
+      const target = getTarget(event);
+      function callback() {
+        if (event.type === 'pointerdown') {
+          handlePointerDown(event);
+        } else {
+          closeOnPressOutside(event);
+        }
+        target?.removeEventListener(event.type, callback);
+      }
+      target?.addEventListener(event.type, callback);
     }
-    target?.addEventListener(event.type, callback);
-  });
-  const handleTouchMove = useStableCallback(event => {
-    if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
-      return;
+    function handlePressEndCapture(event) {
+      if (!pressStartedInsideRef.current) {
+        return;
+      }
+      const pressStartedInsideDefaultPrevented = pressStartPreventedRef.current;
+      resetPressStartState();
+      if (getOutsidePressEvent() !== 'intentional') {
+        return;
+      }
+      if (event.type === 'pointercancel') {
+        if (pressStartedInsideDefaultPrevented) {
+          suppressImmediateOutsideClickAfterPreventedStart();
+        }
+        return;
+      }
+      if (isEventWithinFloatingTree(event)) {
+        return;
+      }
+
+      // If pointerdown was prevented, no click may be generated for that
+      // interaction. However, Firefox may still emit an immediate click after
+      // pointerup (e.g. NumberField scrub with pointer lock), so suppress for
+      // one tick to absorb that synthetic click only.
+      if (pressStartedInsideDefaultPrevented) {
+        suppressImmediateOutsideClickAfterPreventedStart();
+        return;
+      }
+
+      // Avoid suppressing when outsidePress explicitly ignores this target.
+      if (typeof outsidePress === 'function' && !outsidePress(event)) {
+        return;
+      }
+      preventedPressSuppressionTimeout.clear();
+      suppressNextOutsideClickRef.current = true;
+      clearInsideReactTree();
     }
-    const touch = event.touches[0];
-    if (!touch) {
-      return;
+    function handleTouchMove(event) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) {
+        return;
+      }
+      const deltaX = Math.abs(touch.clientX - touchStateRef.current.startX);
+      const deltaY = Math.abs(touch.clientY - touchStateRef.current.startY);
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (distance > 5) {
+        touchStateRef.current.dismissOnTouchEnd = true;
+      }
+      if (distance > 10) {
+        closeOnPressOutside(event);
+        cancelDismissOnEndTimeout.clear();
+        touchStateRef.current = null;
+      }
     }
-    const deltaX = Math.abs(touch.clientX - touchStateRef.current.startX);
-    const deltaY = Math.abs(touch.clientY - touchStateRef.current.startY);
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    if (distance > 5) {
-      touchStateRef.current.dismissOnTouchEnd = true;
+    function handleTouchMoveCapture(event) {
+      const target = getTarget(event);
+      function callback() {
+        handleTouchMove(event);
+        target?.removeEventListener(event.type, callback);
+      }
+      target?.addEventListener(event.type, callback);
     }
-    if (distance > 10) {
-      closeOnPressOutside(event);
+    function handleTouchEnd(event) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+        return;
+      }
+      if (touchStateRef.current.dismissOnTouchEnd) {
+        closeOnPressOutside(event);
+      }
       cancelDismissOnEndTimeout.clear();
       touchStateRef.current = null;
     }
-  });
-  const handleTouchMoveCapture = useStableCallback(event => {
-    const target = getTarget(event);
-    function callback() {
-      handleTouchMove(event);
-      target?.removeEventListener(event.type, callback);
-    }
-    target?.addEventListener(event.type, callback);
-  });
-  const handleTouchEnd = useStableCallback(event => {
-    if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
-      return;
-    }
-    if (touchStateRef.current.dismissOnTouchEnd) {
-      closeOnPressOutside(event);
-    }
-    cancelDismissOnEndTimeout.clear();
-    touchStateRef.current = null;
-  });
-  const handleTouchEndCapture = useStableCallback(event => {
-    const target = getTarget(event);
-    function callback() {
-      handleTouchEnd(event);
-      target?.removeEventListener(event.type, callback);
-    }
-    target?.addEventListener(event.type, callback);
-  });
-  React.useEffect(() => {
-    if (!open || !enabled) {
-      return undefined;
-    }
-    dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
-    dataRef.current.__outsidePressBubbles = outsidePressBubbles;
-    const compositionTimeout = new Timeout();
-    function onScroll(event) {
-      store.setOpen(false, createChangeEventDetails(REASONS.none, event));
-    }
-    function handleCompositionStart() {
-      compositionTimeout.clear();
-      isComposingRef.current = true;
-    }
-    function handleCompositionEnd() {
-      // Safari fires `compositionend` before `keydown`, so we need to wait
-      // until the next tick to set `isComposing` to `false`.
-      // https://bugs.webkit.org/show_bug.cgi?id=165004
-      compositionTimeout.start(
-      // 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
-      // Only apply to WebKit for the test to remain 0ms.
-      isWebKit() ? 5 : 0, () => {
-        isComposingRef.current = false;
-      });
+    function handleTouchEndCapture(event) {
+      const target = getTarget(event);
+      function callback() {
+        handleTouchEnd(event);
+        target?.removeEventListener(event.type, callback);
+      }
+      target?.addEventListener(event.type, callback);
     }
     const doc = ownerDocument(floatingElement);
-    doc.addEventListener('pointerdown', trackPointerType, true);
     if (escapeKey) {
       doc.addEventListener('keydown', closeOnEscapeKeyDown);
       doc.addEventListener('compositionstart', handleCompositionStart);
       doc.addEventListener('compositionend', handleCompositionEnd);
     }
-    if (outsidePress) {
+    if (outsidePressEnabled) {
       doc.addEventListener('click', closeOnPressOutsideCapture, true);
       doc.addEventListener('pointerdown', closeOnPressOutsideCapture, true);
+      doc.addEventListener('pointerup', handlePressEndCapture, true);
+      doc.addEventListener('pointercancel', handlePressEndCapture, true);
+      doc.addEventListener('mousedown', closeOnPressOutsideCapture, true);
+      doc.addEventListener('mouseup', handlePressEndCapture, true);
       doc.addEventListener('touchstart', handleTouchStartCapture, true);
       doc.addEventListener('touchmove', handleTouchMoveCapture, true);
       doc.addEventListener('touchend', handleTouchEndCapture, true);
-      doc.addEventListener('mousedown', closeOnPressOutsideCapture, true);
-    }
-    let ancestors = [];
-    if (ancestorScroll) {
-      if (isElement(domReferenceElement)) {
-        ancestors = getOverflowAncestors(domReferenceElement);
-      }
-      if (isElement(floatingElement)) {
-        ancestors = ancestors.concat(getOverflowAncestors(floatingElement));
-      }
-      if (!isElement(referenceElement) && referenceElement && referenceElement.contextElement) {
-        ancestors = ancestors.concat(getOverflowAncestors(referenceElement.contextElement));
-      }
     }
-
-    // Ignore the visual viewport for scrolling dismissal (allow pinch-zoom)
-    ancestors = ancestors.filter(ancestor => ancestor !== doc.defaultView?.visualViewport);
-    ancestors.forEach(ancestor => {
-      ancestor.addEventListener('scroll', onScroll, {
-        passive: true
-      });
-    });
     return () => {
-      doc.removeEventListener('pointerdown', trackPointerType, true);
       if (escapeKey) {
         doc.removeEventListener('keydown', closeOnEscapeKeyDown);
         doc.removeEventListener('compositionstart', handleCompositionStart);
         doc.removeEventListener('compositionend', handleCompositionEnd);
       }
-      if (outsidePress) {
+      if (outsidePressEnabled) {
         doc.removeEventListener('click', closeOnPressOutsideCapture, true);
         doc.removeEventListener('pointerdown', closeOnPressOutsideCapture, true);
+        doc.removeEventListener('pointerup', handlePressEndCapture, true);
+        doc.removeEventListener('pointercancel', handlePressEndCapture, true);
+        doc.removeEventListener('mousedown', closeOnPressOutsideCapture, true);
+        doc.removeEventListener('mouseup', handlePressEndCapture, true);
         doc.removeEventListener('touchstart', handleTouchStartCapture, true);
         doc.removeEventListener('touchmove', handleTouchMoveCapture, true);
         doc.removeEventListener('touchend', handleTouchEndCapture, true);
-        doc.removeEventListener('mousedown', closeOnPressOutsideCapture, true);
       }
-      ancestors.forEach(ancestor => {
-        ancestor.removeEventListener('scroll', onScroll);
-      });
       compositionTimeout.clear();
-      endedOrStartedInsideRef.current = false;
+      preventedPressSuppressionTimeout.clear();
+      resetPressStartState();
+      suppressNextOutsideClickRef.current = false;
     };
-  }, [dataRef, floatingElement, referenceElement, domReferenceElement, escapeKey, outsidePress, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, closeOnPressOutside, closeOnPressOutsideCapture, handlePointerDown, handleTouchStartCapture, handleTouchMoveCapture, handleTouchEndCapture, trackPointerType, store]);
+  }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, tree, store, cancelDismissOnEndTimeout]);
   React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
   const reference = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
-    ...(referencePress && {
-      [bubbleHandlerKeys[referencePressEvent]]: event => {
-        store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
-      },
-      ...(referencePressEvent !== 'intentional' && {
-        onClick(event) {
-          store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
+    [bubbleHandlerKeys[referencePressEvent]]: event => {
+      if (!isReferencePressEnabled()) {
+        return;
+      }
+      store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
+    },
+    ...(referencePressEvent !== 'intentional' && {
+      onClick(event) {
+        if (!isReferencePressEnabled()) {
+          return;
         }
-      })
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
+      }
     })
-  }), [closeOnEscapeKeyDown, store, referencePress, referencePressEvent]);
-  const handlePressedInside = useStableCallback(event => {
+  }), [closeOnEscapeKeyDown, store, referencePressEvent, isReferencePressEnabled]);
+  const markPressStartedInsideReactTree = useStableCallback(event => {
+    if (!open || !enabled || event.button !== 0) {
+      return;
+    }
     const target = getTarget(event.nativeEvent);
-    if (!contains(store.select('floatingElement'), target) || event.button !== 0) {
+    // Only treat presses that start within the floating DOM subtree as inside.
+    // This avoids suppressing parent dismissal when interacting with nested portals.
+    if (!contains(store.select('floatingElement'), target)) {
       return;
     }
-    endedOrStartedInsideRef.current = true;
+    if (!pressStartedInsideRef.current) {
+      pressStartedInsideRef.current = true;
+      pressStartPreventedRef.current = false;
+    }
   });
-  const markPressStartedInsideReactTree = useStableCallback(event => {
-    if (!open || !enabled || event.button !== 0) {
+  const markInsidePressStartPrevented = useStableCallback(event => {
+    if (!open || !enabled) {
       return;
     }
-    endedOrStartedInsideRef.current = true;
+    if (!(event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
+      return;
+    }
+    if (pressStartedInsideRef.current) {
+      pressStartPreventedRef.current = true;
+    }
   });
   const floating = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     // `onMouseDown` may be blocked if `event.preventDefault()` is called in
     // `onPointerDown`, such as with <NumberField.ScrubArea>.
     // See https://github.com/mui/base-ui/pull/3379
-    onPointerDown: handlePressedInside,
-    onMouseDown: handlePressedInside,
-    onMouseUp: handlePressedInside,
+    onPointerDown: markInsidePressStartPrevented,
+    onMouseDown: markInsidePressStartPrevented,
     onClickCapture: markInsideReactTree,
     onMouseDownCapture(event) {
       markInsideReactTree();
@@ -438,7 +497,7 @@ export function useDismiss(context, props = {}) {
     onMouseUpCapture: markInsideReactTree,
     onTouchEndCapture: markInsideReactTree,
     onTouchMoveCapture: markInsideReactTree
-  }), [closeOnEscapeKeyDown, handlePressedInside, markInsideReactTree, markPressStartedInsideReactTree]);
+  }), [closeOnEscapeKeyDown, markInsideReactTree, markPressStartedInsideReactTree, markInsidePressStartPrevented]);
   return React.useMemo(() => enabled ? {
     reference,
     floating,