@base-ui/react 1.4.0 → 1.5.0

package/floating-ui-react/hooks/useClick.js

@@ -9,18 +9,16 @@ exports.useClick = useClick;
 var React = _interopRequireWildcard(require("react"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _constants = require("../../utils/constants");
+var _empty = require("@base-ui/utils/empty");
 var _element = require("../utils/element");
 var _event = require("../utils/event");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 /**
  * Opens or closes the floating element when clicking the reference element.
  * @see https://floating-ui.com/docs/useClick
  */
 function useClick(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const dataRef = store.context.dataRef;
   const {
     enabled = true,
     event: eventOption = 'click',
@@ -30,90 +28,101 @@ function useClick(context, props = {}) {
     touchOpenDelay = 0,
     reason = _reasons.REASONS.triggerPress
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const dataRef = store.context.dataRef;
   const pointerTypeRef = React.useRef(undefined);
   const frame = (0, _useAnimationFrame.useAnimationFrame)();
   const touchOpenTimeout = (0, _useTimeout.useTimeout)();
-  const reference = React.useMemo(() => ({
-    onPointerDown(event) {
-      pointerTypeRef.current = event.pointerType;
-    },
-    onMouseDown(event) {
-      const pointerType = pointerTypeRef.current;
-      const nativeEvent = event.nativeEvent;
-      const open = store.select('open');
-
-      // Ignore all buttons except for the "main" button.
-      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-      if (event.button !== 0 || eventOption === 'click' || (0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
-        return;
+  const reference = React.useMemo(() => {
+    function setOpenWithTouchDelay(nextOpen, nativeEvent, target, pointerType) {
+      const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, target);
+      if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+        touchOpenTimeout.start(touchOpenDelay, () => {
+          store.setOpen(true, details);
+        });
+      } else {
+        store.setOpen(nextOpen, details);
       }
+    }
+    function getNextOpen(open, currentTarget, isClickLikeOpenEvent) {
       const openEvent = dataRef.current.openEvent;
-      const openEventType = openEvent?.type;
-      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? openEventType === 'click' || openEventType === 'mousedown' : true));
+      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== currentTarget;
+      if (open && hasClickedOnInactiveTrigger) {
+        // Moving between triggers should always open the newly active one.
+        return true;
+      }
+      if (!open) {
+        // A closed popup should open on the next press.
+        return true;
+      }
+      if (!toggle) {
+        // Non-toggle mode never closes on a repeated trigger press.
+        return true;
+      }
+      if (openEvent && stickIfOpen) {
+        // Preserve hover/focus-opened popups until the matching click-like event closes them.
+        return !isClickLikeOpenEvent(openEvent.type);
+      }
+
+      // Otherwise, a repeated click toggles the popup closed.
+      return false;
+    }
+    return {
+      onPointerDown(event) {
+        pointerTypeRef.current = event.pointerType;
+      },
+      onMouseDown(event) {
+        const pointerType = pointerTypeRef.current;
+        const nativeEvent = event.nativeEvent;
+        const open = store.select('open');
 
-      // Animations sometimes won't run on a typeable element if using a rAF.
-      // Focus is always set on these elements. For touch, we may delay opening.
-      const target = (0, _element.getTarget)(nativeEvent);
-      if ((0, _element.isTypeableElement)(target)) {
-        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, target);
-        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-          touchOpenTimeout.start(touchOpenDelay, () => {
-            store.setOpen(true, details);
-          });
-        } else {
-          store.setOpen(nextOpen, details);
+        // Ignore all buttons except for the "main" button.
+        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+        if (event.button !== 0 || eventOption === 'click' || (0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+          return;
+        }
+        const nextOpen = getNextOpen(open, event.currentTarget, openEventType => openEventType === 'click' || openEventType === 'mousedown');
+
+        // Animations sometimes won't run on a typeable element if using a rAF.
+        // Focus is always set on these elements. For touch, we may delay opening.
+        const target = (0, _element.getTarget)(nativeEvent);
+        if ((0, _element.isTypeableElement)(target)) {
+          setOpenWithTouchDelay(nextOpen, nativeEvent, target, pointerType);
+          return;
         }
-        return;
-      }
 
-      // Capture the currentTarget before the rAF.
-      // as React sets it to null after the event handler completes.
-      const eventCurrentTarget = event.currentTarget;
+        // Capture the currentTarget before the rAF.
+        // as React sets it to null after the event handler completes.
+        const eventCurrentTarget = event.currentTarget;
 
-      // Wait until focus is set on the element. This is an alternative to
-      // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
-      frame.request(() => {
-        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, eventCurrentTarget);
-        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-          touchOpenTimeout.start(touchOpenDelay, () => {
-            store.setOpen(true, details);
-          });
-        } else {
-          store.setOpen(nextOpen, details);
+        // Wait until focus is set on the element. This is an alternative to
+        // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
+        frame.request(() => {
+          setOpenWithTouchDelay(nextOpen, nativeEvent, eventCurrentTarget, pointerType);
+        });
+      },
+      onClick(event) {
+        if (eventOption === 'mousedown-only') {
+          return;
         }
-      });
-    },
-    onClick(event) {
-      if (eventOption === 'mousedown-only') {
-        return;
-      }
-      const pointerType = pointerTypeRef.current;
-      if (eventOption === 'mousedown' && pointerType) {
+        const pointerType = pointerTypeRef.current;
+        if (eventOption === 'mousedown' && pointerType) {
+          pointerTypeRef.current = undefined;
+          return;
+        }
+        if ((0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+          return;
+        }
+        const open = store.select('open');
+        const nextOpen = getNextOpen(open, event.currentTarget, openEventType => openEventType === 'click' || openEventType === 'mousedown' || openEventType === 'keydown' || openEventType === 'keyup');
+        setOpenWithTouchDelay(nextOpen, event.nativeEvent, event.currentTarget, pointerType);
+      },
+      onKeyDown() {
         pointerTypeRef.current = undefined;
-        return;
       }
-      if ((0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
-        return;
-      }
-      const open = store.select('open');
-      const openEvent = dataRef.current.openEvent;
-      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? (0, _event.isClickLikeEvent)(openEvent) : true));
-      const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, event.nativeEvent, event.currentTarget);
-      if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-        touchOpenTimeout.start(touchOpenDelay, () => {
-          store.setOpen(true, details);
-        });
-      } else {
-        store.setOpen(nextOpen, details);
-      }
-    },
-    onKeyDown() {
-      pointerTypeRef.current = undefined;
-    }
-  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
+    };
+  }, [dataRef, eventOption, ignoreMouse, reason, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay]);
   return React.useMemo(() => enabled ? {
     reference
-  } : _constants.EMPTY_OBJECT, [enabled, reference]);
+  } : _empty.EMPTY_OBJECT, [enabled, reference]);
 }

package/floating-ui-react/hooks/useClientPoint.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useClientPoint = useClientPoint;
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/utils/dom");
 var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _dom = require("@floating-ui/utils/dom");
 var _element = require("../utils/element");
 var _event = require("../utils/event");
 function createVirtualElement(domElement, data) {
@@ -74,19 +74,22 @@ function isMouseBasedEvent(event) {
  * @see https://floating-ui.com/docs/useClientPoint
  */
 function useClientPoint(context, props = {}) {
+  const {
+    enabled = true,
+    axis = 'both'
+  } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floating = store.useState('floatingElement');
   const domReference = store.useState('domReferenceElement');
   const dataRef = store.context.dataRef;
-  const {
-    enabled = true,
-    axis = 'both'
-  } = props;
   const initialRef = React.useRef(false);
   const cleanupListenerRef = React.useRef(null);
   const [pointerType, setPointerType] = React.useState();
   const [reactive, setReactive] = React.useState([]);
+  const resetReference = (0, _useStableCallback.useStableCallback)(reference => {
+    store.set('positionReference', reference);
+  });
   const setReference = (0, _useStableCallback.useStableCallback)((newX, newY, referenceElement) => {
     if (initialRef.current) {
       return;
@@ -113,6 +116,7 @@ function useClientPoint(context, props = {}) {
       // If there's no cleanup, there's no listener, but we want to ensure
       // we add the listener if the cursor landed on the floating element and
       // then back on the reference (i.e. it's interactive).
+      setReference(event.clientX, event.clientY, event.currentTarget);
       setReactive([]);
     }
   });
@@ -122,34 +126,39 @@ function useClientPoint(context, props = {}) {
   // devices, this is undesirable because the floating element will move to
   // the dismissal touch point.
   const openCheck = (0, _event.isMouseLikePointerType)(pointerType) ? floating : open;
-  const addListener = React.useCallback(() => {
-    if (!openCheck || !enabled) {
+  React.useEffect(() => {
+    if (!enabled) {
+      resetReference(domReference);
+      return undefined;
+    }
+    if (!openCheck) {
       return undefined;
     }
+    function cleanupListener() {
+      cleanupListenerRef.current?.();
+      cleanupListenerRef.current = null;
+    }
     const win = (0, _dom.getWindow)(floating);
     function handleMouseMove(event) {
       const target = (0, _element.getTarget)(event);
       if (!(0, _element.contains)(floating, target)) {
         setReference(event.clientX, event.clientY);
       } else {
-        cleanupListenerRef.current?.();
-        cleanupListenerRef.current = null;
+        cleanupListener();
       }
     }
     if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
-      const cleanup = () => {
-        cleanupListenerRef.current?.();
-        cleanupListenerRef.current = null;
-      };
       cleanupListenerRef.current = (0, _addEventListener.addEventListener)(win, 'mousemove', handleMouseMove);
-      return cleanup;
+    } else {
+      resetReference(domReference);
     }
-    store.set('positionReference', domReference);
-    return undefined;
-  }, [openCheck, enabled, floating, dataRef, domReference, store, setReference]);
-  React.useEffect(() => {
-    return addListener();
-  }, [addListener, reactive]);
+    return cleanupListener;
+  }, [openCheck, enabled, floating, dataRef, domReference, store, setReference, resetReference, reactive]);
+
+  // Clear virtual cursor references when the hook unmounts. Enabled flips are handled above.
+  React.useEffect(() => () => {
+    store.set('positionReference', null);
+  }, [store]);
   React.useEffect(() => {
     if (enabled && !floating) {
       initialRef.current = false;

package/floating-ui-react/hooks/useDismiss.d.ts

@@ -71,7 +71,7 @@ export interface UseDismissProps {
     outsidePress?: boolean | undefined;
   } | undefined;
   /**
-   * External FlatingTree to use when the one provided by context can't be used.
+   * External FloatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
 }

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

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+/* eslint-disable no-underscore-dangle */
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,21 +9,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.normalizeProp = normalizeProp;
 exports.useDismiss = useDismiss;
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/utils/dom");
 var _addEventListener = require("@base-ui/utils/addEventListener");
 var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
-var _useTimeout = require("@base-ui/utils/useTimeout");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _dom = require("@floating-ui/utils/dom");
+var _FloatingTree = require("../components/FloatingTree");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _createAttribute = require("../utils/createAttribute");
 var _element = require("../utils/element");
 var _event = require("../utils/event");
 var _nodes = require("../utils/nodes");
-var _FloatingTree = require("../components/FloatingTree");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _createAttribute = require("../utils/createAttribute");
-/* eslint-disable no-underscore-dangle */
-
 const bubbleHandlerKeys = {
   intentional: 'onClick',
   sloppy: 'onPointerDown'
@@ -42,12 +41,6 @@ function normalizeProp(normalizable) {
  * @see https://floating-ui.com/docs/useDismiss
  */
 function useDismiss(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const floatingElement = store.useState('floatingElement');
-  const {
-    dataRef
-  } = store.context;
   const {
     enabled = true,
     escapeKey = true,
@@ -58,19 +51,27 @@ function useDismiss(context, props = {}) {
     bubbles,
     externalTree
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
+  const floatingElement = store.useState('floatingElement');
+  const {
+    dataRef
+  } = store.context;
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
   const outsidePressFn = (0, _useStableCallback.useStableCallback)(typeof outsidePressProp === 'function' ? outsidePressProp : () => false);
   const outsidePress = typeof outsidePressProp === 'function' ? outsidePressFn : outsidePressProp;
   const outsidePressEnabled = outsidePress !== false;
   const getOutsidePressEventProp = (0, _useStableCallback.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
   } = normalizeProp(bubbles);
+  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 isComposingRef = React.useRef(false);
+  const currentPointerTypeRef = React.useRef('');
   const touchStateRef = React.useRef(null);
   const cancelDismissOnEndTimeout = (0, _useTimeout.useTimeout)();
   const clearInsideReactTreeTimeout = (0, _useTimeout.useTimeout)();
@@ -78,9 +79,20 @@ function useDismiss(context, props = {}) {
     clearInsideReactTreeTimeout.clear();
     dataRef.current.insideReactTree = false;
   });
-  const isComposingRef = React.useRef(false);
-  const currentPointerTypeRef = React.useRef('');
-  const isReferencePressEnabled = (0, _useStableCallback.useStableCallback)(referencePress);
+  const hasBlockingChild = (0, _useStableCallback.useStableCallback)(bubbleKey => {
+    const nodeId = dataRef.current.floatingContext?.nodeId;
+    const children = tree ? (0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
+    return children.some(child => child.context?.open && !child.context.dataRef.current[bubbleKey]);
+  });
+  const isEventWithinOwnElements = (0, _useStableCallback.useStableCallback)(event => {
+    return (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'));
+  });
+  const closeOnReferencePress = (0, _useStableCallback.useStableCallback)(event => {
+    if (!referencePress()) {
+      return;
+    }
+    store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event.nativeEvent));
+  });
   const closeOnEscapeKeyDown = (0, _useStableCallback.useStableCallback)(event => {
     if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
       return;
@@ -91,24 +103,15 @@ function useDismiss(context, props = {}) {
     if (isComposingRef.current) {
       return;
     }
-    const nodeId = dataRef.current.floatingContext?.nodeId;
-    const children = tree ? (0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
-    if (!escapeKeyBubbles) {
-      if (children.length > 0) {
-        let shouldDismiss = true;
-        children.forEach(child => {
-          if (child.context?.open && !child.context.dataRef.current.__escapeKeyBubbles) {
-            shouldDismiss = false;
-          }
-        });
-        if (!shouldDismiss) {
-          return;
-        }
-      }
+    if (!escapeKeyBubbles && hasBlockingChild('__escapeKeyBubbles')) {
+      return;
     }
     const native = (0, _event.isReactEvent)(event) ? event.nativeEvent : event;
     const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.escapeKey, native);
     store.setOpen(false, eventDetails);
+    if (!eventDetails.isCanceled) {
+      event.preventDefault();
+    }
     if (!escapeKeyBubbles && !eventDetails.isPropagationAllowed) {
       event.stopPropagation();
     }
@@ -117,6 +120,33 @@ function useDismiss(context, props = {}) {
     dataRef.current.insideReactTree = true;
     clearInsideReactTreeTimeout.start(0, clearInsideReactTree);
   });
+  const markPressStartedInsideReactTree = (0, _useStableCallback.useStableCallback)(event => {
+    if (!open || !enabled || event.button !== 0) {
+      return;
+    }
+    const target = (0, _element.getTarget)(event.nativeEvent);
+
+    // Only treat presses that start within the floating DOM subtree as inside.
+    // This avoids suppressing parent dismissal when interacting with nested portals.
+    if (!(0, _element.contains)(store.select('floatingElement'), target)) {
+      return;
+    }
+    if (!pressStartedInsideRef.current) {
+      pressStartedInsideRef.current = true;
+      pressStartPreventedRef.current = false;
+    }
+  });
+  const markInsidePressStartPrevented = (0, _useStableCallback.useStableCallback)(event => {
+    if (!open || !enabled) {
+      return;
+    }
+    if (!(event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
+      return;
+    }
+    if (pressStartedInsideRef.current) {
+      pressStartPreventedRef.current = true;
+    }
+  });
   React.useEffect(() => {
     if (!open || !enabled) {
       return undefined;
@@ -169,10 +199,16 @@ function useDismiss(context, props = {}) {
     function isEventWithinFloatingTree(event) {
       const nodeId = dataRef.current.floatingContext?.nodeId;
       const targetIsInsideChildren = tree && (0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId).some(node => (0, _element.isEventTargetWithin)(event, node.context?.elements.floating));
-      return (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement')) || targetIsInsideChildren;
+      return isEventWithinOwnElements(event) || targetIsInsideChildren;
     }
     function closeOnPressOutside(event) {
       if (shouldIgnoreEvent(event)) {
+        // A new press began outside the floating element and its trigger. Clear any
+        // leftover drag-out suppression so this press's eventual click can dismiss.
+        if (event.type !== 'click' && !isEventWithinOwnElements(event)) {
+          preventedPressSuppressionTimeout.clear();
+          suppressNextOutsideClickRef.current = false;
+        }
         clearInsideReactTree();
         return;
       }
@@ -248,30 +284,20 @@ function useDismiss(context, props = {}) {
       if (typeof outsidePress === 'function' && !outsidePress(event)) {
         return;
       }
-      const nodeId = dataRef.current.floatingContext?.nodeId;
-      const children = tree ? (0, _nodes.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;
-        }
+      if (hasBlockingChild('__outsidePressBubbles')) {
+        return;
       }
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.outsidePress, event));
       clearInsideReactTree();
     }
     function handlePointerDown(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || isEventWithinOwnElements(event)) {
         return;
       }
       closeOnPressOutside(event);
     }
     function handleTouchStart(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || isEventWithinOwnElements(event)) {
         return;
       }
       const touch = event.touches[0];
@@ -358,7 +384,7 @@ function useDismiss(context, props = {}) {
       clearInsideReactTree();
     }
     function handleTouchMove(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventWithinOwnElements(event)) {
         return;
       }
       const touch = event.touches[0];
@@ -381,7 +407,7 @@ function useDismiss(context, props = {}) {
       addTargetEventListenerOnce(event, handleTouchMove);
     }
     function handleTouchEnd(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventWithinOwnElements(event)) {
         return;
       }
       if (touchStateRef.current.dismissOnTouchEnd) {
@@ -402,51 +428,15 @@ function useDismiss(context, props = {}) {
       resetPressStartState();
       suppressNextOutsideClickRef.current = false;
     };
-  }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, tree, store, cancelDismissOnEndTimeout]);
+  }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, hasBlockingChild, isEventWithinOwnElements, tree, store, cancelDismissOnEndTimeout]);
   React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
   const reference = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
-    [bubbleHandlerKeys[referencePressEvent]]: event => {
-      if (!isReferencePressEnabled()) {
-        return;
-      }
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event.nativeEvent));
-    },
+    [bubbleHandlerKeys[referencePressEvent]]: closeOnReferencePress,
     ...(referencePressEvent !== 'intentional' && {
-      onClick(event) {
-        if (!isReferencePressEnabled()) {
-          return;
-        }
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event.nativeEvent));
-      }
+      onClick: closeOnReferencePress
     })
-  }), [closeOnEscapeKeyDown, store, referencePressEvent, isReferencePressEnabled]);
-  const markPressStartedInsideReactTree = (0, _useStableCallback.useStableCallback)(event => {
-    if (!open || !enabled || event.button !== 0) {
-      return;
-    }
-    const target = (0, _element.getTarget)(event.nativeEvent);
-    // Only treat presses that start within the floating DOM subtree as inside.
-    // This avoids suppressing parent dismissal when interacting with nested portals.
-    if (!(0, _element.contains)(store.select('floatingElement'), target)) {
-      return;
-    }
-    if (!pressStartedInsideRef.current) {
-      pressStartedInsideRef.current = true;
-      pressStartPreventedRef.current = false;
-    }
-  });
-  const markInsidePressStartPrevented = (0, _useStableCallback.useStableCallback)(event => {
-    if (!open || !enabled) {
-      return;
-    }
-    if (!(event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
-      return;
-    }
-    if (pressStartedInsideRef.current) {
-      pressStartPreventedRef.current = true;
-    }
-  });
+  }), [closeOnEscapeKeyDown, closeOnReferencePress, referencePressEvent]);
   const floating = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     // `onMouseDown` may be blocked if `event.preventDefault()` is called in