@base-ui/react 1.3.0 → 1.4.1

package/floating-ui-react/components/FloatingFocusManager.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingFocusManager = FloatingFocusManager;
 var React = _interopRequireWildcard(require("react"));
-var _tabbable = require("tabbable");
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -18,19 +19,23 @@ var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _owner = require("@base-ui/utils/owner");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _utils = require("../utils");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
+var _tabbable = require("../utils/tabbable");
+var _nodes = require("../utils/nodes");
+var _composite = require("../utils/composite");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _createAttribute = require("../utils/createAttribute");
 var _enqueueFocus = require("../utils/enqueueFocus");
 var _markOthers = require("../utils/markOthers");
 var _FloatingPortal = require("./FloatingPortal");
 var _FloatingTree = require("./FloatingTree");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _resolveRef = require("../../utils/resolveRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function getEventType(event, lastInteractionType) {
-  const win = (0, _owner.ownerWindow)(event.target);
+  const win = (0, _owner.ownerWindow)((0, _element.getTarget)(event));
   if (event instanceof win.KeyboardEvent) {
     return 'keyboard';
   }
@@ -75,30 +80,22 @@ function getFirstTabbableElement(container) {
   if (!container) {
     return null;
   }
-  const tabbableOptions = (0, _utils.getTabbableOptions)();
-  if ((0, _tabbable.isTabbable)(container, tabbableOptions)) {
+  if ((0, _tabbable.isTabbable)(container)) {
     return container;
   }
-  return (0, _tabbable.tabbable)(container, tabbableOptions)[0] || container;
-}
-function isFocusable(element) {
-  if (!element || !element.isConnected) {
-    return false;
-  }
-  if (typeof element.checkVisibility === 'function') {
-    return element.checkVisibility();
-  }
-  return (0, _utils.isElementVisible)(element);
+  return (0, _tabbable.tabbable)(container)[0] || container;
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
+  if (floatingFocusElement.hasAttribute('tabindex') && !floatingFocusElement.hasAttribute('data-tabindex')) {
+    return;
+  }
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
     return;
   }
-  const options = (0, _utils.getTabbableOptions)();
-  const focusableElements = (0, _tabbable.focusable)(floatingFocusElement, options);
+  const focusableElements = (0, _tabbable.focusable)(floatingFocusElement);
   const tabbableContent = focusableElements.filter(element => {
     const dataTabIndex = element.getAttribute('data-tabindex') || '';
-    return (0, _tabbable.isTabbable)(element, options) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
+    return (0, _tabbable.isTabbable)(element) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
   });
   const tabIndex = floatingFocusElement.getAttribute('tabindex');
   if (orderRef.current.includes('floating') || tabbableContent.length === 0) {
@@ -147,7 +144,7 @@ function FloatingFocusManager(props) {
   // aria-hidden should be applied to all nodes still. Further, the visually
   // hidden dismiss button should only appear at the end of the list, not the
   // start.
-  const isUntrappedTypeableCombobox = (0, _utils.isTypeableCombobox)(domReference) && ignoreInitialFocus;
+  const isUntrappedTypeableCombobox = (0, _element.isTypeableCombobox)(domReference) && ignoreInitialFocus;
   const orderRef = React.useRef(['content']);
   const initialFocusRef = (0, _useValueAsRef.useValueAsRef)(initialFocus);
   const returnFocusRef = (0, _useValueAsRef.useValueAsRef)(returnFocus);
@@ -157,7 +154,7 @@ function FloatingFocusManager(props) {
   const preventReturnFocusRef = React.useRef(false);
   const isPointerDownRef = React.useRef(false);
   const pointerDownOutsideRef = React.useRef(false);
-  const tabbableIndexRef = React.useRef(-1);
+  const lastFocusedTabbableRef = React.useRef(null);
   const closeTypeRef = React.useRef('');
   const lastInteractionTypeRef = React.useRef('');
   const beforeGuardRef = React.useRef(null);
@@ -168,15 +165,11 @@ function FloatingFocusManager(props) {
   const pointerDownTimeout = (0, _useTimeout.useTimeout)();
   const restoreFocusFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const isInsidePortal = portalContext != null;
-  const floatingFocusElement = (0, _utils.getFloatingFocusElement)(floating);
+  const floatingFocusElement = (0, _element.getFloatingFocusElement)(floating);
   const getTabbableContent = (0, _useStableCallback.useStableCallback)((container = floatingFocusElement) => {
-    return container ? (0, _tabbable.tabbable)(container, (0, _utils.getTabbableOptions)()) : [];
+    return container ? (0, _tabbable.tabbable)(container) : [];
   });
   const getResolvedInsideElements = (0, _useStableCallback.useStableCallback)(() => getInsideElements?.().filter(element => element != null) ?? []);
-  const getTabbableElements = (0, _useStableCallback.useStableCallback)(container => {
-    const content = getTabbableContent(container);
-    return orderRef.current.map(() => content).filter(Boolean).flat();
-  });
 
   // Prevent Tab from escaping the modal when there are no tabbable elements.
   React.useEffect(() => {
@@ -186,17 +179,14 @@ function FloatingFocusManager(props) {
     function onKeyDown(event) {
       if (event.key === 'Tab') {
         // The focus guards have nothing to focus, so we need to stop the event.
-        if ((0, _utils.contains)(floatingFocusElement, (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
-          (0, _utils.stopEvent)(event);
+        if ((0, _element.contains)(floatingFocusElement, (0, _element.activeElement)((0, _owner.ownerDocument)(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+          (0, _event.stopEvent)(event);
         }
       }
     }
     const doc = (0, _owner.ownerDocument)(floatingFocusElement);
-    doc.addEventListener('keydown', onKeyDown);
-    return () => {
-      doc.removeEventListener('keydown', onKeyDown);
-    };
-  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+    return (0, _addEventListener.addEventListener)(doc, 'keydown', onKeyDown);
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent]);
 
   // Track pointer/keyboard interactions to disambiguate focus and outside presses.
   React.useEffect(() => {
@@ -208,9 +198,9 @@ function FloatingFocusManager(props) {
       pointerDownOutsideRef.current = false;
     }
     function onPointerDown(event) {
-      const target = (0, _utils.getTarget)(event);
+      const target = (0, _element.getTarget)(event);
       const insideElements = getResolvedInsideElements();
-      const pointerTargetInside = (0, _utils.contains)(floating, target) || (0, _utils.contains)(domReference, target) || (0, _utils.contains)(portalContext?.portalNode, target) || insideElements.some(element => element === target || (0, _utils.contains)(element, target));
+      const pointerTargetInside = (0, _element.contains)(floating, target) || (0, _element.contains)(domReference, target) || (0, _element.contains)(portalContext?.portalNode, target) || insideElements.some(element => element === target || (0, _element.contains)(element, target));
       pointerDownOutsideRef.current = !pointerTargetInside;
       lastInteractionTypeRef.current = event.pointerType || 'keyboard';
       if (target?.closest(`[${_constants.CLICK_TRIGGER_IDENTIFIER}]`)) {
@@ -220,16 +210,7 @@ function FloatingFocusManager(props) {
     function onKeyDown() {
       lastInteractionTypeRef.current = 'keyboard';
     }
-    doc.addEventListener('pointerdown', onPointerDown, true);
-    doc.addEventListener('pointerup', clearPointerDownOutside, true);
-    doc.addEventListener('pointercancel', clearPointerDownOutside, true);
-    doc.addEventListener('keydown', onKeyDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', onPointerDown, true);
-      doc.removeEventListener('pointerup', clearPointerDownOutside, true);
-      doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
-      doc.removeEventListener('keydown', onKeyDown, true);
-    };
+    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(doc, 'pointerdown', onPointerDown, true), (0, _addEventListener.addEventListener)(doc, 'pointerup', clearPointerDownOutside, true), (0, _addEventListener.addEventListener)(doc, 'pointercancel', clearPointerDownOutside, true), (0, _addEventListener.addEventListener)(doc, 'keydown', onKeyDown, true));
   }, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
 
   // Close on focus out and restore focus within the floating tree when needed.
@@ -247,30 +228,28 @@ function FloatingFocusManager(props) {
       });
     }
     function handleFocusIn(event) {
-      const target = (0, _utils.getTarget)(event);
-      const tabbableContent = getTabbableContent();
-      const tabbableIndex = tabbableContent.indexOf(target);
-      if (tabbableIndex !== -1) {
-        tabbableIndexRef.current = tabbableIndex;
+      const target = (0, _element.getTarget)(event);
+      if ((0, _tabbable.isTabbable)(target)) {
+        lastFocusedTabbableRef.current = target;
       }
     }
     function handleFocusOutside(event) {
       const relatedTarget = event.relatedTarget;
       const currentTarget = event.currentTarget;
-      const target = (0, _utils.getTarget)(event);
+      const target = (0, _element.getTarget)(event);
       queueMicrotask(() => {
         const nodeId = getNodeId();
         const triggers = store.context.triggerElements;
         const insideElements = getResolvedInsideElements();
         const isRelatedFocusGuard = relatedTarget?.hasAttribute((0, _createAttribute.createAttribute)('focus-guard')) && [beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeInsideRef.current, portalContext?.afterInsideRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement)].includes(relatedTarget);
-        const movedToUnrelatedNode = !((0, _utils.contains)(domReference, relatedTarget) || (0, _utils.contains)(floating, relatedTarget) || (0, _utils.contains)(relatedTarget, floating) || (0, _utils.contains)(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || (0, _utils.contains)(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget) || (0, _utils.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _utils.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _utils.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+        const movedToUnrelatedNode = !((0, _element.contains)(domReference, relatedTarget) || (0, _element.contains)(floating, relatedTarget) || (0, _element.contains)(relatedTarget, floating) || (0, _element.contains)(portalContext?.portalNode, relatedTarget) || insideElements.some(element => element === relatedTarget || (0, _element.contains)(element, relatedTarget)) || relatedTarget != null && triggers.hasElement(relatedTarget) || triggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, relatedTarget)) || isRelatedFocusGuard || tree && ((0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId).find(node => (0, _element.contains)(node.context?.elements.floating, relatedTarget) || (0, _element.contains)(node.context?.elements.domReference, relatedTarget)) || (0, _nodes.getNodeAncestors)(tree.nodesRef.current, nodeId).find(node => [node.context?.elements.floating, (0, _element.getFloatingFocusElement)(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
         if (currentTarget === domReference && floatingFocusElement) {
           handleTabIndex(floatingFocusElement, orderRef);
         }
 
         // Restore focus to the previous tabbable element index to prevent
         // focus from being lost outside the floating tree.
-        if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && (0, _utils.activeElement)(doc) === doc.body) {
+        if (restoreFocus && currentTarget !== domReference && !(0, _composite.isElementVisible)(target) && (0, _element.activeElement)(doc) === doc.body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
           if ((0, _dom.isHTMLElement)(floatingFocusElement)) {
@@ -288,9 +267,9 @@ function FloatingFocusManager(props) {
               return;
             }
           }
-          const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
-          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
+          const prevTabbable = lastFocusedTabbableRef.current;
+          const nodeToFocus = (prevTabbable && tabbableContent.includes(prevTabbable) ? prevTabbable : null) || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
           if ((0, _dom.isHTMLElement)(nodeToFocus)) {
             nodeToFocus.focus();
           }
@@ -328,37 +307,10 @@ function FloatingFocusManager(props) {
       });
     }
     const domReferenceElement = (0, _dom.isHTMLElement)(domReference) ? domReference : null;
-    const cleanups = [];
     if (!floating && !domReferenceElement) {
       return undefined;
     }
-    if (domReferenceElement) {
-      domReferenceElement.addEventListener('focusout', handleFocusOutside);
-      domReferenceElement.addEventListener('pointerdown', handlePointerDown);
-      cleanups.push(() => {
-        domReferenceElement.removeEventListener('focusout', handleFocusOutside);
-        domReferenceElement.removeEventListener('pointerdown', handlePointerDown);
-      });
-    }
-    if (floating) {
-      floating.addEventListener('focusin', handleFocusIn);
-      floating.addEventListener('focusout', handleFocusOutside);
-      if (portalContext) {
-        floating.addEventListener('focusout', markInsideReactTree, true);
-        cleanups.push(() => {
-          floating.removeEventListener('focusout', markInsideReactTree, true);
-        });
-      }
-      cleanups.push(() => {
-        floating.removeEventListener('focusin', handleFocusIn);
-        floating.removeEventListener('focusout', handleFocusOutside);
-      });
-    }
-    return () => {
-      cleanups.forEach(cleanup => {
-        cleanup();
-      });
-    };
+    return (0, _mergeCleanups.mergeCleanups)(domReferenceElement && (0, _addEventListener.addEventListener)(domReferenceElement, 'focusout', handleFocusOutside), domReferenceElement && (0, _addEventListener.addEventListener)(domReferenceElement, 'pointerdown', handlePointerDown), floating && (0, _addEventListener.addEventListener)(floating, 'focusin', handleFocusIn), floating && (0, _addEventListener.addEventListener)(floating, 'focusout', handleFocusOutside), floating && portalContext && (0, _addEventListener.addEventListener)(floating, 'focusout', markInsideReactTree, true));
   }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Hide everything outside the floating tree from assistive tech while open.
@@ -369,8 +321,8 @@ function FloatingFocusManager(props) {
 
     // Don't hide portals nested within the parent portal.
     const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${(0, _createAttribute.createAttribute)('portal')}]`) || []);
-    const ancestors = tree ? (0, _utils.getNodeAncestors)(tree.nodesRef.current, getNodeId()) : [];
-    const rootAncestorComboboxDomReference = ancestors.find(node => (0, _utils.isTypeableCombobox)(node.context?.elements.domReference || null))?.context?.elements.domReference;
+    const ancestors = tree ? (0, _nodes.getNodeAncestors)(tree.nodesRef.current, getNodeId()) : [];
+    const rootAncestorComboboxDomReference = ancestors.find(node => (0, _element.isTypeableCombobox)(node.context?.elements.domReference || null))?.context?.elements.domReference;
     const controlInsideElements = [floating, ...portalNodes, beforeGuardRef.current, afterGuardRef.current, portalContext?.beforeOutsideRef.current, portalContext?.afterOutsideRef.current, ...getResolvedInsideElements()];
     const insideElements = [...controlInsideElements, rootAncestorComboboxDomReference, (0, _resolveRef.resolveRef)(previousFocusableElement), (0, _resolveRef.resolveRef)(nextFocusableElement), isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
     const ariaHiddenCleanup = (0, _markOthers.markOthers)(insideElements, {
@@ -391,11 +343,10 @@ function FloatingFocusManager(props) {
       return;
     }
     const doc = (0, _owner.ownerDocument)(floatingFocusElement);
-    const previouslyFocusedElement = (0, _utils.activeElement)(doc);
+    const previouslyFocusedElement = (0, _element.activeElement)(doc);
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floatingFocusElement);
       const initialFocusValueOrFn = initialFocusRef.current;
       const resolvedInitialFocus = typeof initialFocusValueOrFn === 'function' ? initialFocusValueOrFn(openInteractionTypeRef.current || '') : initialFocusValueOrFn;
 
@@ -403,22 +354,29 @@ function FloatingFocusManager(props) {
       if (resolvedInitialFocus === undefined || resolvedInitialFocus === false) {
         return;
       }
+      const focusAlreadyInsideFloatingEl = (0, _element.contains)(floatingFocusElement, previouslyFocusedElement);
+      if (focusAlreadyInsideFloatingEl) {
+        return;
+      }
+      let focusableElements = null;
+      const getDefaultFocusElement = () => {
+        if (focusableElements == null) {
+          focusableElements = getTabbableContent(floatingFocusElement);
+        }
+        return focusableElements[0] || floatingFocusElement;
+      };
       let elToFocus;
       if (resolvedInitialFocus === true || resolvedInitialFocus === null) {
-        elToFocus = focusableElements[0] || floatingFocusElement;
+        elToFocus = getDefaultFocusElement();
       } else {
         elToFocus = (0, _resolveRef.resolveRef)(resolvedInitialFocus);
       }
-      elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
-      const focusAlreadyInsideFloatingEl = (0, _utils.contains)(floatingFocusElement, previouslyFocusedElement);
-      if (focusAlreadyInsideFloatingEl) {
-        return;
-      }
+      elToFocus = elToFocus || getDefaultFocusElement();
       (0, _enqueueFocus.enqueueFocus)(elToFocus, {
         preventScroll: elToFocus === floatingFocusElement
       });
     });
-  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableContent, initialFocusRef, openInteractionTypeRef]);
 
   // Track return focus targets and restore focus on unmount/close.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -426,7 +384,7 @@ function FloatingFocusManager(props) {
       return undefined;
     }
     const doc = (0, _owner.ownerDocument)(floatingFocusElement);
-    const previouslyFocusedElement = (0, _utils.activeElement)(doc);
+    const previouslyFocusedElement = (0, _element.activeElement)(doc);
     addPreviouslyFocusedElement(previouslyFocusedElement);
 
     // Dismissing via outside press should always ignore `returnFocus` to
@@ -443,11 +401,11 @@ function FloatingFocusManager(props) {
       }
       if (details.nested) {
         preventReturnFocusRef.current = false;
-      } else if ((0, _utils.isVirtualClick)(details.nativeEvent) || (0, _utils.isVirtualPointerEvent)(details.nativeEvent)) {
+      } else if ((0, _event.isVirtualClick)(details.nativeEvent) || (0, _event.isVirtualPointerEvent)(details.nativeEvent)) {
         preventReturnFocusRef.current = false;
       } else {
         let isPreventScrollSupported = false;
-        document.createElement('div').focus({
+        (0, _owner.ownerDocument)(floatingFocusElement).createElement('div').focus({
           get preventScroll() {
             isPreventScrollSupported = true;
             return false;
@@ -481,17 +439,18 @@ function FloatingFocusManager(props) {
     }
     return () => {
       events.off('openchange', onOpenChangeLocal);
-      const activeEl = (0, _utils.activeElement)(doc);
+      const activeEl = (0, _element.activeElement)(doc);
       const insideElements = getResolvedInsideElements();
-      const isFocusInsideFloatingTree = (0, _utils.contains)(floating, activeEl) || insideElements.some(element => element === activeEl || (0, _utils.contains)(element, activeEl)) || tree && (0, _utils.getNodeChildren)(tree.nodesRef.current, getNodeId(), false).some(node => (0, _utils.contains)(node.context?.elements.floating, activeEl));
+      const isFocusInsideFloatingTree = (0, _element.contains)(floating, activeEl) || insideElements.some(element => element === activeEl || (0, _element.contains)(element, activeEl)) || tree && (0, _nodes.getNodeChildren)(tree.nodesRef.current, getNodeId(), false).some(node => (0, _element.contains)(node.context?.elements.floating, activeEl));
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const returnFocusValueOrFn = returnFocusRef.current;
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
-        const hasExplicitReturnFocus = typeof returnFocusRef.current !== 'boolean';
-        if (
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        returnFocusRef.current && !preventReturnFocusRef.current && (0, _dom.isHTMLElement)(tabbableReturnElement) && (
+        const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== 'boolean';
+        if (returnFocusValueOrFn && !preventReturnFocusRef.current && (0, _dom.isHTMLElement)(tabbableReturnElement) && (
         // If the focus moved somewhere else after mount, avoid returning focus
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
@@ -512,11 +471,11 @@ function FloatingFocusManager(props) {
     if (!_detectBrowser.isWebKit || open || !floating) {
       return;
     }
-    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floating));
-    if (!(0, _dom.isHTMLElement)(activeEl) || !(0, _utils.isTypeableElement)(activeEl)) {
+    const activeEl = (0, _element.activeElement)((0, _owner.ownerDocument)(floating));
+    if (!(0, _dom.isHTMLElement)(activeEl) || !(0, _element.isTypeableElement)(activeEl)) {
       return;
     }
-    if ((0, _utils.contains)(floating, activeEl)) {
+    if ((0, _element.contains)(floating, activeEl)) {
       activeEl.blur();
     }
   }, [open, floating]);
@@ -555,12 +514,12 @@ function FloatingFocusManager(props) {
       ref: mergedBeforeGuardRef,
       onFocus: event => {
         if (modal) {
-          const els = getTabbableElements();
+          const els = getTabbableContent();
           (0, _enqueueFocus.enqueueFocus)(els[els.length - 1]);
         } else if (portalContext?.portalNode) {
           preventReturnFocusRef.current = false;
-          if ((0, _utils.isOutsideEvent)(event, portalContext.portalNode)) {
-            const nextTabbable = (0, _utils.getNextTabbable)(domReference);
+          if ((0, _tabbable.isOutsideEvent)(event, portalContext.portalNode)) {
+            const nextTabbable = (0, _tabbable.getNextTabbable)(domReference);
             nextTabbable?.focus();
           } else {
             (0, _resolveRef.resolveRef)(previousFocusableElement ?? portalContext.beforeOutsideRef)?.focus();
@@ -572,13 +531,13 @@ function FloatingFocusManager(props) {
       ref: mergedAfterGuardRef,
       onFocus: event => {
         if (modal) {
-          (0, _enqueueFocus.enqueueFocus)(getTabbableElements()[0]);
+          (0, _enqueueFocus.enqueueFocus)(getTabbableContent()[0]);
         } else if (portalContext?.portalNode) {
           if (closeOnFocusOut) {
             preventReturnFocusRef.current = true;
           }
-          if ((0, _utils.isOutsideEvent)(event, portalContext.portalNode)) {
-            const prevTabbable = (0, _utils.getPreviousTabbable)(domReference);
+          if ((0, _tabbable.isOutsideEvent)(event, portalContext.portalNode)) {
+            const prevTabbable = (0, _tabbable.getPreviousTabbable)(domReference);
             prevTabbable?.focus();
           } else {
             (0, _resolveRef.resolveRef)(nextFocusableElement ?? portalContext.afterOutsideRef)?.focus();

package/floating-ui-react/components/FloatingPortal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type UseRenderElementComponentProps } from "../../utils/useRenderElement.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import { type UseRenderElementComponentProps } from "../../internals/useRenderElement.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 type FocusManagerState = null | {
   modal: boolean;
   open: boolean;

package/floating-ui-react/components/FloatingPortal.js

@@ -11,16 +11,19 @@ exports.usePortalContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useId = require("@base-ui/utils/useId");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _empty = require("@base-ui/utils/empty");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _utils = require("../utils");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _tabbable = require("../utils/tabbable");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _createAttribute = require("../utils/createAttribute");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _constants = require("../../utils/constants");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _constants = require("../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const PortalContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") PortalContext.displayName = "PortalContext";
@@ -31,7 +34,7 @@ function useFloatingPortalNode(props = {}) {
   const {
     ref,
     container: containerProp,
-    componentProps = _constants.EMPTY_OBJECT,
+    componentProps = _empty.EMPTY_OBJECT,
     elementProps
   } = props;
   const uniqueId = (0, _useId.useId)();
@@ -111,6 +114,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     renderGuards,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -127,6 +131,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
   const beforeInsideRef = React.useRef(null);
   const afterInsideRef = React.useRef(null);
   const [focusManagerState, setFocusManagerState] = React.useState(null);
+  const focusInsideDisabledRef = React.useRef(false);
   const modal = focusManagerState?.modal;
   const open = focusManagerState?.open;
   const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
@@ -141,27 +146,29 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     // portal has already been focused, either by tabbing into a focus trap
     // element outside or using the mouse.
     function onFocus(event) {
-      if (portalNode && event.relatedTarget && (0, _utils.isOutsideEvent)(event)) {
-        const focusing = event.type === 'focusin';
-        const manageFocus = focusing ? _utils.enableFocusInside : _utils.disableFocusInside;
-        manageFocus(portalNode);
+      if (portalNode && event.relatedTarget && (0, _tabbable.isOutsideEvent)(event)) {
+        if (event.type === 'focusin') {
+          if (focusInsideDisabledRef.current) {
+            (0, _tabbable.enableFocusInside)(portalNode);
+            focusInsideDisabledRef.current = false;
+          }
+        } else {
+          (0, _tabbable.disableFocusInside)(portalNode);
+          focusInsideDisabledRef.current = true;
+        }
       }
     }
 
     // Listen to the event on the capture phase so they run before the focus
     // trap elements onFocus prop is called.
-    portalNode.addEventListener('focusin', onFocus, true);
-    portalNode.addEventListener('focusout', onFocus, true);
-    return () => {
-      portalNode.removeEventListener('focusin', onFocus, true);
-      portalNode.removeEventListener('focusout', onFocus, true);
-    };
+    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(portalNode, 'focusin', onFocus, true), (0, _addEventListener.addEventListener)(portalNode, 'focusout', onFocus, true));
   }, [portalNode, modal]);
   React.useEffect(() => {
-    if (!portalNode || open) {
+    if (!portalNode || open !== false) {
       return;
     }
-    (0, _utils.enableFocusInside)(portalNode);
+    (0, _tabbable.enableFocusInside)(portalNode);
+    focusInsideDisabledRef.current = false;
   }, [open, portalNode]);
   const portalContextValue = React.useMemo(() => ({
     beforeOutsideRef,
@@ -178,11 +185,11 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
         "data-type": "outside",
         ref: beforeOutsideRef,
         onFocus: event => {
-          if ((0, _utils.isOutsideEvent)(event, portalNode)) {
+          if ((0, _tabbable.isOutsideEvent)(event, portalNode)) {
             beforeInsideRef.current?.focus();
           } else {
             const domReference = focusManagerState ? focusManagerState.domReference : null;
-            const prevTabbable = (0, _utils.getPreviousTabbable)(domReference);
+            const prevTabbable = (0, _tabbable.getPreviousTabbable)(domReference);
             prevTabbable?.focus();
           }
         }
@@ -193,11 +200,11 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
         "data-type": "outside",
         ref: afterOutsideRef,
         onFocus: event => {
-          if ((0, _utils.isOutsideEvent)(event, portalNode)) {
+          if ((0, _tabbable.isOutsideEvent)(event, portalNode)) {
             afterInsideRef.current?.focus();
           } else {
             const domReference = focusManagerState ? focusManagerState.domReference : null;
-            const nextTabbable = (0, _utils.getNextTabbable)(domReference);
+            const nextTabbable = (0, _tabbable.getNextTabbable)(domReference);
             nextTabbable?.focus();
             if (focusManagerState?.closeOnFocusOut) {
               focusManagerState?.onOpenChange(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));

package/floating-ui-react/components/FloatingRootStore.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
 import type { FloatingEvents, ContextData, ReferenceType } from "../types.js";
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export interface FloatingRootState {
   open: boolean;
+  transitionStatus: TransitionStatus | undefined;
   domReferenceElement: Element | null;
   referenceElement: ReferenceType | null;
   floatingElement: HTMLElement | null;
@@ -19,11 +21,11 @@ export interface FloatingRootStoreContext {
   readonly dataRef: React.RefObject<ContextData>;
   readonly events: FloatingEvents;
   nested: boolean;
-  noEmit: boolean;
   readonly triggerElements: PopupTriggerMap;
 }
 declare const selectors: {
   open: (state: FloatingRootState) => boolean;
+  transitionStatus: (state: FloatingRootState) => TransitionStatus;
   domReferenceElement: (state: FloatingRootState) => Element | null;
   referenceElement: (state: FloatingRootState) => ReferenceType | null;
   floatingElement: (state: FloatingRootState) => HTMLElement | null;
@@ -31,16 +33,30 @@ declare const selectors: {
 };
 interface FloatingRootStoreOptions {
   open: boolean;
+  transitionStatus: TransitionStatus | undefined;
   referenceElement: ReferenceType | null;
   floatingElement: HTMLElement | null;
   triggerElements: PopupTriggerMap;
   floatingId: string | undefined;
+  /**
+   * When true, `setOpen` only forwards to `onOpenChange`.
+   * The popup store owns `dispatchOpenChange(...)` in this mode.
+   */
+  syncOnly: boolean;
   nested: boolean;
-  noEmit: boolean;
   onOpenChange: ((open: boolean, eventDetails: BaseUIChangeEventDetails<string>) => void) | undefined;
 }
 export declare class FloatingRootStore extends ReactStore<Readonly<FloatingRootState>, FloatingRootStoreContext, typeof selectors> {
+  private readonly syncOnly;
   constructor(options: FloatingRootStoreOptions);
+  /**
+   * Syncs the event used by hover logic to distinguish hover-open from click-like interaction.
+   */
+  syncOpenEvent: (newOpen: boolean, event: Event | undefined) => void;
+  /**
+   * Runs the root-owned side effects for an open state change.
+   */
+  dispatchOpenChange: (newOpen: boolean, eventDetails: BaseUIChangeEventDetails<string>) => void;
   /**
    * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
    *