@digdir/designsystemet-react 1.0.0-next.15 → 1.0.0-next.16

package/dist/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js

@@ -2,14 +2,13 @@
 import * as React from 'react';
 import { useLayoutEffect, useEffect, useRef } from 'react';
 import { getDocument, isMouseLikePointerType, isTypeableCombobox, activeElement, contains, isVirtualClick, isVirtualPointerEvent, getTarget, isSafari, isMac, isTypeableElement, stopEvent, isReactEvent, isRootElement, isEventTargetWithin } from './floating-ui.react.utils.js';
-import { floor } from '../../utils/dist/floating-ui.utils.js';
-import { useFloating as useFloating$1 } from '../../react-dom/dist/floating-ui.react-dom.js';
-export { arrow } from '../../react-dom/dist/floating-ui.react-dom.js';
-import { isElement, isHTMLElement, getOverflowAncestors, getWindow, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } from '../../utils/dist/floating-ui.utils.dom.js';
+import { floor } from '../node_modules/@floating-ui/utils/dist/floating-ui.utils.js';
+import { getComputedStyle, isElement, isHTMLElement, getWindow, getNodeName, isLastTraversableNode, getParentNode } from '../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js';
 import { tabbable, isTabbable } from '../../../tabbable/dist/index.esm.js';
-import { createPortal } from 'react-dom';
-import { platform } from '../../dom/dist/floating-ui.dom.js';
-export { autoUpdate, computePosition, flip, shift, size } from '../../dom/dist/floating-ui.dom.js';
+import * as ReactDOM from 'react-dom';
+import { useFloating as useFloating$1 } from '../../react-dom/dist/floating-ui.react-dom.js';
+export { arrow, flip, offset, shift, size } from '../../react-dom/dist/floating-ui.react-dom.js';
+import { getOverflowAncestors } from '../../utils/dist/floating-ui.utils.dom.js';
 
 /**
  * Merges an array of refs into a single memoized callback ref or `null`.
@@ -87,14 +86,10 @@ function findNonDisabledIndex(listRef, _temp) {
     amount = 1
   } = _temp === void 0 ? {} : _temp;
   const list = listRef.current;
-  const isDisabledIndex = disabledIndices ? index => disabledIndices.includes(index) : index => {
-    const element = list[index];
-    return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
-  };
   let index = startingIndex;
   do {
     index += decrement ? -amount : amount;
-  } while (index >= 0 && index <= list.length - 1 && isDisabledIndex(index));
+  } while (index >= 0 && index <= list.length - 1 && isDisabled(list, index, disabledIndices));
   return index;
 }
 function getGridNavigatedIndex(elementsRef, _ref) {
@@ -190,8 +185,8 @@ function getGridNavigatedIndex(elementsRef, _ref) {
       if (prevIndex % cols !== 0) {
         nextIndex = findNonDisabledIndex(elementsRef, {
           startingIndex: prevIndex,
-          disabledIndices,
-          decrement: true
+          decrement: true,
+          disabledIndices
         });
         if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
           nextIndex = findNonDisabledIndex(elementsRef, {
@@ -270,13 +265,20 @@ function buildCellMap(sizes, cols, dense) {
 function getCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
   if (index === -1) return -1;
   const firstCellIndex = cellMap.indexOf(index);
+  const sizeItem = sizes[index];
   switch (corner) {
     case 'tl':
       return firstCellIndex;
     case 'tr':
-      return firstCellIndex + sizes[index].width - 1;
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + sizeItem.width - 1;
     case 'bl':
-      return firstCellIndex + (sizes[index].height - 1) * cols;
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + (sizeItem.height - 1) * cols;
     case 'br':
       return cellMap.lastIndexOf(index);
   }
@@ -286,6 +288,13 @@ function getCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
 function getCellIndices(indices, cellMap) {
   return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
 }
+function isDisabled(list, index, disabledIndices) {
+  if (disabledIndices) {
+    return disabledIndices.includes(index);
+  }
+  const element = list[index];
+  return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+}
 
 let rafId = 0;
 function enqueueFocus(el, options) {
@@ -416,6 +425,16 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props
     }
   }
   const clipPathId = useId();
+  const [isRTL, setIsRTL] = React.useState(false);
+
+  // https://github.com/floating-ui/floating-ui/issues/2932
+  index(() => {
+    if (!floating) return;
+    const isRTL = getComputedStyle(floating).direction === 'rtl';
+    if (isRTL) {
+      setIsRTL(true);
+    }
+  }, [floating]);
   if (!floating) {
     return null;
   }
@@ -427,7 +446,6 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props
   const svgX = width / 2 * (tipRadius / -8 + 1);
   const svgY = height / 2 * tipRadius / 4;
   const [side, alignment] = placement.split('-');
-  const isRTL = platform.isRTL(floating);
   const isCustomShape = !!d;
   const isVerticalSide = side === 'top' || side === 'bottom';
   const yOffsetProp = staticOffset && alignment === 'end' ? 'bottom' : 'top';
@@ -550,11 +568,7 @@ function useHover(context, props) {
     onOpenChange,
     dataRef,
     events,
-    elements: {
-      domReference,
-      floating
-    },
-    refs
+    elements
   } = context;
   const {
     enabled = true,
@@ -568,10 +582,11 @@ function useHover(context, props) {
   const parentId = useFloatingParentNodeId();
   const handleCloseRef = useLatestRef(handleClose);
   const delayRef = useLatestRef(delay);
+  const openRef = useLatestRef(open);
   const pointerTypeRef = React.useRef();
-  const timeoutRef = React.useRef();
+  const timeoutRef = React.useRef(-1);
   const handlerRef = React.useRef();
-  const restTimeoutRef = React.useRef();
+  const restTimeoutRef = React.useRef(-1);
   const blockMouseMoveRef = React.useRef(true);
   const performedPointerEventsMutationRef = React.useRef(false);
   const unbindMouseMoveRef = React.useRef(() => {});
@@ -584,9 +599,7 @@ function useHover(context, props) {
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
   React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
+    if (!enabled) return;
     function onOpenChange(_ref) {
       let {
         open
@@ -603,20 +616,20 @@ function useHover(context, props) {
     };
   }, [enabled, events]);
   React.useEffect(() => {
-    if (!enabled || !handleCloseRef.current || !open) {
-      return;
-    }
+    if (!enabled) return;
+    if (!handleCloseRef.current) return;
+    if (!open) return;
     function onLeave(event) {
       if (isHoverOpen()) {
         onOpenChange(false, event, 'hover');
       }
     }
-    const html = getDocument(floating).documentElement;
+    const html = getDocument(elements.floating).documentElement;
     html.addEventListener('mouseleave', onLeave);
     return () => {
       html.removeEventListener('mouseleave', onLeave);
     };
-  }, [floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
+  }, [elements.floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
   const closeWithDelay = React.useCallback(function (event, runElseBranch, reason) {
     if (runElseBranch === void 0) {
       runElseBranch = true;
@@ -627,64 +640,62 @@ function useHover(context, props) {
     const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
     if (closeDelay && !handlerRef.current) {
       clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => onOpenChange(false, event, reason), closeDelay);
+      timeoutRef.current = window.setTimeout(() => onOpenChange(false, event, reason), closeDelay);
     } else if (runElseBranch) {
       clearTimeout(timeoutRef.current);
       onOpenChange(false, event, reason);
     }
   }, [delayRef, onOpenChange]);
-  const cleanupMouseMoveHandler = React.useCallback(() => {
+  const cleanupMouseMoveHandler = useEffectEvent(() => {
     unbindMouseMoveRef.current();
     handlerRef.current = undefined;
-  }, []);
-  const clearPointerEvents = React.useCallback(() => {
+  });
+  const clearPointerEvents = useEffectEvent(() => {
     if (performedPointerEventsMutationRef.current) {
-      const body = getDocument(refs.floating.current).body;
+      const body = getDocument(elements.floating).body;
       body.style.pointerEvents = '';
       body.removeAttribute(safePolygonIdentifier);
       performedPointerEventsMutationRef.current = false;
     }
-  }, [refs]);
+  });
 
   // Registering the mouse events on the reference directly to bypass React's
   // delegation system. If the cursor was on a disabled element and then entered
   // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
   React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
+    if (!enabled) return;
     function isClickLikeOpenEvent() {
       return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
     }
     function onMouseEnter(event) {
       clearTimeout(timeoutRef.current);
       blockMouseMoveRef.current = false;
-      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && getDelay(delayRef.current, 'open') === 0) {
+      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && !getDelay(delayRef.current, 'open')) {
         return;
       }
       const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
       if (openDelay) {
-        timeoutRef.current = setTimeout(() => {
-          onOpenChange(true, event, 'hover');
+        timeoutRef.current = window.setTimeout(() => {
+          if (!openRef.current) {
+            onOpenChange(true, event, 'hover');
+          }
         }, openDelay);
       } else {
         onOpenChange(true, event, 'hover');
       }
     }
     function onMouseLeave(event) {
-      if (isClickLikeOpenEvent()) {
-        return;
-      }
+      if (isClickLikeOpenEvent()) return;
       unbindMouseMoveRef.current();
-      const doc = getDocument(floating);
+      const doc = getDocument(elements.floating);
       clearTimeout(restTimeoutRef.current);
-      if (handleCloseRef.current) {
+      if (handleCloseRef.current && dataRef.current.floatingContext) {
         // Prevent clearing `onScrollMouseLeave` timeout.
         if (!open) {
           clearTimeout(timeoutRef.current);
         }
         handlerRef.current = handleCloseRef.current({
-          ...context,
+          ...dataRef.current.floatingContext,
           tree,
           x: event.clientX,
           y: event.clientY,
@@ -705,7 +716,7 @@ function useHover(context, props) {
       // Allow interactivity without `safePolygon` on touch devices. With a
       // pointer, a short close delay is an alternative, so it should work
       // consistently.
-      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(floating, event.relatedTarget) : true;
+      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(elements.floating, event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -715,11 +726,10 @@ function useHover(context, props) {
     // did not move.
     // https://github.com/floating-ui/floating-ui/discussions/1692
     function onScrollMouseLeave(event) {
-      if (isClickLikeOpenEvent()) {
-        return;
-      }
+      if (isClickLikeOpenEvent()) return;
+      if (!dataRef.current.floatingContext) return;
       handleCloseRef.current == null || handleCloseRef.current({
-        ...context,
+        ...dataRef.current.floatingContext,
         tree,
         x: event.clientX,
         y: event.clientY,
@@ -730,24 +740,26 @@ function useHover(context, props) {
         }
       })(event);
     }
-    if (isElement(domReference)) {
-      const ref = domReference;
+    if (isElement(elements.domReference)) {
+      var _elements$floating;
+      const ref = elements.domReference;
       open && ref.addEventListener('mouseleave', onScrollMouseLeave);
-      floating == null || floating.addEventListener('mouseleave', onScrollMouseLeave);
+      (_elements$floating = elements.floating) == null || _elements$floating.addEventListener('mouseleave', onScrollMouseLeave);
       move && ref.addEventListener('mousemove', onMouseEnter, {
         once: true
       });
       ref.addEventListener('mouseenter', onMouseEnter);
       ref.addEventListener('mouseleave', onMouseLeave);
       return () => {
+        var _elements$floating2;
         open && ref.removeEventListener('mouseleave', onScrollMouseLeave);
-        floating == null || floating.removeEventListener('mouseleave', onScrollMouseLeave);
+        (_elements$floating2 = elements.floating) == null || _elements$floating2.removeEventListener('mouseleave', onScrollMouseLeave);
         move && ref.removeEventListener('mousemove', onMouseEnter);
         ref.removeEventListener('mouseenter', onMouseEnter);
         ref.removeEventListener('mouseleave', onMouseLeave);
       };
     }
-  }, [domReference, floating, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, tree, delayRef, handleCloseRef, dataRef]);
+  }, [elements, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, openRef, tree, delayRef, handleCloseRef, dataRef]);
 
   // Block pointer-events of every element other than the reference and floating
   // while the floating element is open and has a `handleClose` handler. Also
@@ -755,30 +767,29 @@ function useHover(context, props) {
   // https://github.com/floating-ui/floating-ui/issues/1722
   index(() => {
     var _handleCloseRef$curre;
-    if (!enabled) {
-      return;
-    }
+    if (!enabled) return;
     if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
-      const body = getDocument(floating).body;
+      const body = getDocument(elements.floating).body;
       body.setAttribute(safePolygonIdentifier, '');
       body.style.pointerEvents = 'none';
       performedPointerEventsMutationRef.current = true;
-      if (isElement(domReference) && floating) {
+      const floatingEl = elements.floating;
+      if (isElement(elements.domReference) && floatingEl) {
         var _tree$nodesRef$curren;
-        const ref = domReference;
+        const ref = elements.domReference;
         const parentFloating = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren.elements.floating;
         if (parentFloating) {
           parentFloating.style.pointerEvents = '';
         }
         ref.style.pointerEvents = 'auto';
-        floating.style.pointerEvents = 'auto';
+        floatingEl.style.pointerEvents = 'auto';
         return () => {
           ref.style.pointerEvents = '';
-          floating.style.pointerEvents = '';
+          floatingEl.style.pointerEvents = '';
         };
       }
     }
-  }, [enabled, open, parentId, floating, domReference, tree, handleCloseRef, isHoverOpen]);
+  }, [enabled, open, parentId, elements, tree, handleCloseRef, isHoverOpen]);
   index(() => {
     if (!open) {
       pointerTypeRef.current = undefined;
@@ -793,48 +804,50 @@ function useHover(context, props) {
       clearTimeout(restTimeoutRef.current);
       clearPointerEvents();
     };
-  }, [enabled, domReference, cleanupMouseMoveHandler, clearPointerEvents]);
-  return React.useMemo(() => {
-    if (!enabled) {
-      return {};
-    }
+  }, [enabled, elements.domReference, cleanupMouseMoveHandler, clearPointerEvents]);
+  const reference = React.useMemo(() => {
     function setPointerRef(event) {
       pointerTypeRef.current = event.pointerType;
     }
     return {
-      reference: {
-        onPointerDown: setPointerRef,
-        onPointerEnter: setPointerRef,
-        onMouseMove(event) {
-          function handleMouseMove() {
-            if (!blockMouseMoveRef.current) {
-              onOpenChange(true, event.nativeEvent, 'hover');
-            }
-          }
-          if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
-            return;
-          }
-          if (open || restMs === 0) {
-            return;
-          }
-          clearTimeout(restTimeoutRef.current);
-          if (pointerTypeRef.current === 'touch') {
-            handleMouseMove();
-          } else {
-            restTimeoutRef.current = setTimeout(handleMouseMove, restMs);
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+      onMouseMove(event) {
+        const {
+          nativeEvent
+        } = event;
+        function handleMouseMove() {
+          if (!blockMouseMoveRef.current && !openRef.current) {
+            onOpenChange(true, nativeEvent, 'hover');
           }
         }
-      },
-      floating: {
-        onMouseEnter() {
-          clearTimeout(timeoutRef.current);
-        },
-        onMouseLeave(event) {
-          closeWithDelay(event.nativeEvent, false);
+        if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+          return;
+        }
+        if (open || restMs === 0) {
+          return;
+        }
+        clearTimeout(restTimeoutRef.current);
+        if (pointerTypeRef.current === 'touch') {
+          handleMouseMove();
+        } else {
+          restTimeoutRef.current = window.setTimeout(handleMouseMove, restMs);
         }
       }
     };
-  }, [enabled, mouseOnly, open, restMs, onOpenChange, closeWithDelay]);
+  }, [mouseOnly, onOpenChange, open, openRef, restMs]);
+  const floating = React.useMemo(() => ({
+    onMouseEnter() {
+      clearTimeout(timeoutRef.current);
+    },
+    onMouseLeave(event) {
+      closeWithDelay(event.nativeEvent, false);
+    }
+  }), [closeWithDelay]);
+  return React.useMemo(() => enabled ? {
+    reference,
+    floating
+  } : {}, [enabled, reference, floating]);
 }
 
 function getAncestors(nodes, id) {
@@ -929,7 +942,8 @@ function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, iner
     if (!parent || elementsToStop.has(parent)) {
       return;
     }
-    Array.prototype.forEach.call(parent.children, node => {
+    [].forEach.call(parent.children, node => {
+      if (getNodeName(node) === 'script') return;
       if (elementsToKeep.has(node)) {
         deep(node);
       } else {
@@ -1036,6 +1050,32 @@ function enableFocusInside(container) {
     }
   });
 }
+function getClosestTabbableElement(tabbableElements, element, floating) {
+  const elementIndex = tabbableElements.indexOf(element);
+  function traverseTabbableElements(next) {
+    const attr = createAttribute('focus-guard');
+    let index = elementIndex + (next ? 1 : 0);
+    let currentElement = tabbableElements[index];
+    while (currentElement && (!currentElement.isConnected || currentElement.hasAttribute(attr) || contains(floating, currentElement))) {
+      if (next) {
+        index++;
+      } else {
+        index--;
+      }
+      currentElement = tabbableElements[index];
+    }
+    return currentElement;
+  }
+
+  // First, try to find the next tabbable element
+  const next = traverseTabbableElements(true);
+  if (next) {
+    return next;
+  }
+
+  // If we can't find a next tabbable element, try to find the previous one
+  return traverseTabbableElements(false);
+}
 
 // See Diego Haz's Sandbox for making this logic work well on Safari/iOS:
 // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/FocusTrap.tsx
@@ -1090,7 +1130,6 @@ const FocusGuard = /*#__PURE__*/React.forwardRef(function FocusGuard(props, ref)
 
 const PortalContext = /*#__PURE__*/React.createContext(null);
 const attr = /*#__PURE__*/createAttribute('portal');
-
 /**
  * @see https://floating-ui.com/docs/FloatingPortal#usefloatingportalnode
  */
@@ -1118,6 +1157,10 @@ function useFloatingPortalNode(props) {
     };
   }, [portalNode]);
   index(() => {
+    // Wait for the uniqueId to be generated before creating the portal node in
+    // React <18 (using `useFloatingId` instead of the native `useId`).
+    // https://github.com/floating-ui/floating-ui/issues/2778
+    if (!uniqueId) return;
     if (portalNodeRef.current) return;
     const existingIdRoot = id ? document.getElementById(id) : null;
     if (!existingIdRoot) return;
@@ -1129,6 +1172,7 @@ function useFloatingPortalNode(props) {
     setPortalNode(subRoot);
   }, [id, uniqueId]);
   index(() => {
+    if (!uniqueId) return;
     if (portalNodeRef.current) return;
     let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
     if (container && !isElement(container)) container = container.current;
@@ -1232,7 +1276,7 @@ function FloatingPortal(props) {
   }), shouldRenderGuards && portalNode && /*#__PURE__*/React.createElement("span", {
     "aria-owns": portalNode.id,
     style: HIDDEN_STYLES
-  }), portalNode && /*#__PURE__*/createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/React.createElement(FocusGuard, {
+  }), portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/React.createElement(FocusGuard, {
     "data-type": "outside",
     ref: afterOutsideRef,
     onFocus: event => {
@@ -1257,8 +1301,9 @@ function addPreviouslyFocusedElement(element) {
   if (!tabbableEl || getNodeName(tabbableEl) === 'body') return;
   if (!isTabbable(tabbableEl, getTabbableOptions())) {
     const tabbableChild = tabbable(tabbableEl, getTabbableOptions())[0];
-    if (!tabbableChild) return;
-    tabbableEl = tabbableChild;
+    if (tabbableChild) {
+      tabbableEl = tabbableChild;
+    }
   }
   previouslyFocusedElements.push(tabbableEl);
   if (previouslyFocusedElements.length > LIST_LIMIT) {
@@ -1289,6 +1334,7 @@ function FloatingFocusManager(props) {
     guards: _guards = true,
     initialFocus = 0,
     returnFocus = true,
+    restoreFocus = false,
     modal = true,
     visuallyHiddenDismiss = false,
     closeOnFocusOut = true
@@ -1300,6 +1346,7 @@ function FloatingFocusManager(props) {
     onOpenChange,
     events,
     dataRef,
+    floatingId,
     elements: {
       domReference,
       floating
@@ -1324,31 +1371,37 @@ function FloatingFocusManager(props) {
   const endDismissButtonRef = React.useRef(null);
   const preventReturnFocusRef = React.useRef(false);
   const isPointerDownRef = React.useRef(false);
+  const tabbableIndexRef = React.useRef(-1);
   const isInsidePortal = portalContext != null;
-  const getTabbableContent = React.useCallback(function (container) {
+  const firstElementChild = floating == null ? void 0 : floating.firstElementChild;
+  // If the floating element is acting as a positioning wrapper rather than the
+  // element that receives aria props, use it as the focus root instead.
+  const floatingFocusNode = (firstElementChild == null ? void 0 : firstElementChild.id) === floatingId ? firstElementChild : floating;
+  const getTabbableContent = useEffectEvent(function (container) {
     if (container === void 0) {
-      container = floating;
+      container = floatingFocusNode;
     }
     return container ? tabbable(container, getTabbableOptions()) : [];
-  }, [floating]);
-  const getTabbableElements = React.useCallback(container => {
+  });
+  const getTabbableElements = useEffectEvent(container => {
     const content = getTabbableContent(container);
     return orderRef.current.map(type => {
       if (domReference && type === 'reference') {
         return domReference;
       }
-      if (floating && type === 'floating') {
-        return floating;
+      if (floatingFocusNode && type === 'floating') {
+        return floatingFocusNode;
       }
       return content;
     }).filter(Boolean).flat();
-  }, [domReference, floating, orderRef, getTabbableContent]);
+  });
   React.useEffect(() => {
-    if (disabled || !modal) return;
+    if (disabled) return;
+    if (!modal) return;
     function onKeyDown(event) {
       if (event.key === 'Tab') {
         // The focus guards have nothing to focus, so we need to stop the event.
-        if (contains(floating, activeElement(getDocument(floating))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+        if (contains(floatingFocusNode, activeElement(getDocument(floatingFocusNode))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
           stopEvent(event);
         }
         const els = getTabbableElements();
@@ -1361,20 +1414,37 @@ function FloatingFocusManager(props) {
             enqueueFocus(els[1]);
           }
         }
-        if (orderRef.current[1] === 'floating' && target === floating && event.shiftKey) {
+        if (orderRef.current[1] === 'floating' && target === floatingFocusNode && event.shiftKey) {
           stopEvent(event);
           enqueueFocus(els[0]);
         }
       }
     }
-    const doc = getDocument(floating);
+    const doc = getDocument(floatingFocusNode);
     doc.addEventListener('keydown', onKeyDown);
     return () => {
       doc.removeEventListener('keydown', onKeyDown);
     };
-  }, [disabled, domReference, floating, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+  }, [disabled, domReference, floatingFocusNode, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+  React.useEffect(() => {
+    if (disabled) return;
+    if (!floating) return;
+    function handleFocusIn(event) {
+      const target = getTarget(event);
+      const tabbableContent = getTabbableContent();
+      const tabbableIndex = tabbableContent.indexOf(target);
+      if (tabbableIndex !== -1) {
+        tabbableIndexRef.current = tabbableIndex;
+      }
+    }
+    floating.addEventListener('focusin', handleFocusIn);
+    return () => {
+      floating.removeEventListener('focusin', handleFocusIn);
+    };
+  }, [disabled, floating, getTabbableContent]);
   React.useEffect(() => {
-    if (disabled || !closeOnFocusOut) return;
+    if (disabled) return;
+    if (!closeOnFocusOut) return;
 
     // In Safari, buttons lose focus when pressing them.
     function handlePointerDown() {
@@ -1394,9 +1464,25 @@ function FloatingFocusManager(props) {
           return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
         })));
 
+        // Restore focus to the previous tabbable element index to prevent
+        // focus from being lost outside the floating tree.
+        if (restoreFocus && movedToUnrelatedNode && activeElement(getDocument(floatingFocusNode)) === getDocument(floatingFocusNode).body) {
+          // Let `FloatingPortal` effect knows that focus is still inside the
+          // floating tree.
+          if (isHTMLElement(floatingFocusNode)) {
+            floatingFocusNode == null || floatingFocusNode.focus();
+          }
+          const prevTabbableIndex = tabbableIndexRef.current;
+          const tabbableContent = getTabbableContent();
+          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusNode;
+          if (isHTMLElement(nodeToFocus)) {
+            nodeToFocus.focus();
+          }
+        }
+
         // Focus did not move inside the floating tree, and there are no tabbable
         // portal guards to handle closing.
-        if (relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
+        if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
         // Fix React 18 Strict Mode returnFocus due to double rendering.
         relatedTarget !== getPreviouslyFocusedElement()) {
           preventReturnFocusRef.current = true;
@@ -1407,14 +1493,14 @@ function FloatingFocusManager(props) {
     if (floating && isHTMLElement(domReference)) {
       domReference.addEventListener('focusout', handleFocusOutside);
       domReference.addEventListener('pointerdown', handlePointerDown);
-      !modal && floating.addEventListener('focusout', handleFocusOutside);
+      floating.addEventListener('focusout', handleFocusOutside);
       return () => {
         domReference.removeEventListener('focusout', handleFocusOutside);
         domReference.removeEventListener('pointerdown', handlePointerDown);
-        !modal && floating.removeEventListener('focusout', handleFocusOutside);
+        floating.removeEventListener('focusout', handleFocusOutside);
       };
     }
-  }, [disabled, domReference, floating, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut]);
+  }, [disabled, domReference, floating, floatingFocusNode, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox]);
   React.useEffect(() => {
     var _portalContext$portal;
     if (disabled) return;
@@ -1430,39 +1516,45 @@ function FloatingFocusManager(props) {
     }
   }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
   index(() => {
-    if (disabled || !floating) return;
-    const doc = getDocument(floating);
+    if (disabled || !isHTMLElement(floatingFocusNode)) return;
+    const doc = getDocument(floatingFocusNode);
     const previouslyFocusedElement = activeElement(doc);
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floating);
+      const focusableElements = getTabbableElements(floatingFocusNode);
       const initialFocusValue = initialFocusRef.current;
-      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floating;
-      const focusAlreadyInsideFloatingEl = contains(floating, previouslyFocusedElement);
+      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusNode;
+      const focusAlreadyInsideFloatingEl = contains(floatingFocusNode, previouslyFocusedElement);
       if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
         enqueueFocus(elToFocus, {
-          preventScroll: elToFocus === floating
+          preventScroll: elToFocus === floatingFocusNode
         });
       }
     });
-  }, [disabled, open, floating, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
+  }, [disabled, open, floatingFocusNode, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
   index(() => {
-    if (disabled || !floating) return;
+    if (disabled || !floatingFocusNode) return;
     let preventReturnFocusScroll = false;
-    const doc = getDocument(floating);
+    const doc = getDocument(floatingFocusNode);
     const previouslyFocusedElement = activeElement(doc);
     const contextData = dataRef.current;
+    let openEvent = contextData.openEvent;
+    const domReference = refs.domReference.current;
     addPreviouslyFocusedElement(previouslyFocusedElement);
 
     // Dismissing via outside press should always ignore `returnFocus` to
     // prevent unwanted scrolling.
     function onOpenChange(_ref) {
       let {
+        open,
         reason,
         event,
         nested
       } = _ref;
+      if (open) {
+        openEvent = event;
+      }
       if (reason === 'escape-key' && refs.domReference.current) {
         addPreviouslyFocusedElement(refs.domReference.current);
       }
@@ -1485,34 +1577,40 @@ function FloatingFocusManager(props) {
         var _node$context5;
         return contains((_node$context5 = node.context) == null ? void 0 : _node$context5.elements.floating, activeEl);
       });
-      const shouldFocusReference = isFocusInsideFloatingTree || contextData.openEvent && ['click', 'mousedown'].includes(contextData.openEvent.type);
+      const shouldFocusReference = isFocusInsideFloatingTree || openEvent && ['click', 'mousedown'].includes(openEvent.type);
       if (shouldFocusReference && refs.domReference.current) {
         addPreviouslyFocusedElement(refs.domReference.current);
       }
-      const returnElement = getPreviouslyFocusedElement();
-      if (
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(returnElement) && (
-      // 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
-      returnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
-        enqueueFocus(returnElement, {
-          // When dismissing nested floating elements, by the time the rAF has
-          // executed, the menus will all have been unmounted. When they try
-          // to get focused, the calls get ignored — leaving the root
-          // reference focused as desired.
-          cancelPrevious: false,
-          preventScroll: preventReturnFocusScroll
-        });
-      }
+      const returnContextElement = domReference || previouslyFocusedElement;
+      const tabbableElements = tabbable(getDocument(returnContextElement).body, getTabbableOptions());
+
+      // Wait for the return element to get potentially disconnected before
+      // checking.
+      queueMicrotask(() => {
+        let returnElement = getPreviouslyFocusedElement();
+        if (!returnElement && isHTMLElement(returnContextElement) && floating) {
+          returnElement = getClosestTabbableElement(tabbableElements, returnContextElement, floating);
+        }
+        if (
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(returnElement) && (
+        // 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
+        returnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
+          returnElement.focus({
+            preventScroll: preventReturnFocusScroll
+          });
+        }
+      });
     };
-  }, [disabled, floating, returnFocusRef, dataRef, refs, events, tree, nodeId]);
+  }, [disabled, floating, floatingFocusNode, returnFocusRef, dataRef, refs, events, tree, nodeId]);
 
   // Synchronize the `context` & `modal` value to the FloatingPortal context.
   // It will decide whether or not it needs to render its own guards.
   index(() => {
-    if (disabled || !portalContext) return;
+    if (disabled) return;
+    if (!portalContext) return;
     portalContext.setFocusManagerState({
       modal,
       closeOnFocusOut,
@@ -1525,22 +1623,29 @@ function FloatingFocusManager(props) {
     };
   }, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
   index(() => {
-    if (disabled || !floating || typeof MutationObserver !== 'function' || ignoreInitialFocus) {
-      return;
-    }
+    if (disabled) return;
+    if (!floatingFocusNode) return;
+    if (typeof MutationObserver !== 'function') return;
+    if (ignoreInitialFocus) return;
     const handleMutation = () => {
-      const tabIndex = floating.getAttribute('tabindex');
-      if (orderRef.current.includes('floating') || activeElement(getDocument(floating)) !== refs.domReference.current && getTabbableContent().length === 0) {
+      const tabIndex = floatingFocusNode.getAttribute('tabindex');
+      const tabbableContent = getTabbableContent();
+      const activeEl = activeElement(getDocument(floating));
+      const tabbableIndex = tabbableContent.indexOf(activeEl);
+      if (tabbableIndex !== -1) {
+        tabbableIndexRef.current = tabbableIndex;
+      }
+      if (orderRef.current.includes('floating') || activeEl !== refs.domReference.current && tabbableContent.length === 0) {
         if (tabIndex !== '0') {
-          floating.setAttribute('tabindex', '0');
+          floatingFocusNode.setAttribute('tabindex', '0');
         }
       } else if (tabIndex !== '-1') {
-        floating.setAttribute('tabindex', '-1');
+        floatingFocusNode.setAttribute('tabindex', '-1');
       }
     };
     handleMutation();
     const observer = new MutationObserver(handleMutation);
-    observer.observe(floating, {
+    observer.observe(floatingFocusNode, {
       childList: true,
       subtree: true,
       attributes: true
@@ -1548,7 +1653,7 @@ function FloatingFocusManager(props) {
     return () => {
       observer.disconnect();
     };
-  }, [disabled, floating, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
+  }, [disabled, floating, floatingFocusNode, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
   function renderDismissButton(location) {
     if (disabled || !visuallyHiddenDismiss || !modal) {
       return null;
@@ -1558,7 +1663,7 @@ function FloatingFocusManager(props) {
       onClick: event => onOpenChange(false, event.nativeEvent)
     }, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss');
   }
-  const shouldRenderGuards = !disabled && guards && (isInsidePortal || modal);
+  const shouldRenderGuards = !disabled && guards && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
   return /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderGuards && /*#__PURE__*/React.createElement(FocusGuard, {
     "data-type": "inside",
     ref: portalContext == null ? void 0 : portalContext.beforeInsideRef,
@@ -1630,81 +1735,74 @@ function useClick(context, props) {
   } = props;
   const pointerTypeRef = React.useRef();
   const didKeyDownRef = React.useRef(false);
-  return React.useMemo(() => {
-    if (!enabled) return {};
-    return {
-      reference: {
-        onPointerDown(event) {
-          pointerTypeRef.current = event.pointerType;
-        },
-        onMouseDown(event) {
-          // Ignore all buttons except for the "main" button.
-          // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-          if (event.button !== 0) {
-            return;
-          }
-          if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {
-            return;
-          }
-          if (eventOption === 'click') {
-            return;
-          }
-          if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
-            onOpenChange(false, event.nativeEvent, 'click');
-          } else {
-            // Prevent stealing focus from the floating element
-            event.preventDefault();
-            onOpenChange(true, event.nativeEvent, 'click');
-          }
-        },
-        onClick(event) {
-          if (eventOption === 'mousedown' && pointerTypeRef.current) {
-            pointerTypeRef.current = undefined;
-            return;
-          }
-          if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {
-            return;
-          }
-          if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
-            onOpenChange(false, event.nativeEvent, 'click');
-          } else {
-            onOpenChange(true, event.nativeEvent, 'click');
-          }
-        },
-        onKeyDown(event) {
-          pointerTypeRef.current = undefined;
-          if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
-            return;
-          }
-          if (event.key === ' ' && !isSpaceIgnored(domReference)) {
-            // Prevent scrolling
-            event.preventDefault();
-            didKeyDownRef.current = true;
-          }
-          if (event.key === 'Enter') {
-            if (open && toggle) {
-              onOpenChange(false, event.nativeEvent, 'click');
-            } else {
-              onOpenChange(true, event.nativeEvent, 'click');
-            }
-          }
-        },
-        onKeyUp(event) {
-          if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
-            return;
-          }
-          if (event.key === ' ' && didKeyDownRef.current) {
-            didKeyDownRef.current = false;
-            if (open && toggle) {
-              onOpenChange(false, event.nativeEvent, 'click');
-            } else {
-              onOpenChange(true, event.nativeEvent, 'click');
-            }
-          }
+  const reference = React.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0) return;
+      if (eventOption === 'click') return;
+      if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        // Prevent stealing focus from the floating element
+        event.preventDefault();
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onClick(event) {
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerTypeRef.current) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onKeyDown(event) {
+      pointerTypeRef.current = undefined;
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+        return;
+      }
+      if (event.key === ' ' && !isSpaceIgnored(domReference)) {
+        // Prevent scrolling
+        event.preventDefault();
+        didKeyDownRef.current = true;
+      }
+      if (event.key === 'Enter') {
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
         }
       }
-    };
-  }, [enabled, dataRef, eventOption, ignoreMouse, keyboardHandlers, domReference, toggle, open, onOpenChange]);
+    },
+    onKeyUp(event) {
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
+        return;
+      }
+      if (event.key === ' ' && didKeyDownRef.current) {
+        didKeyDownRef.current = false;
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    }
+  }), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, toggle]);
+  return React.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
 }
 
 const bubbleHandlerKeys = {
@@ -1736,12 +1834,7 @@ function useDismiss(context, props) {
   const {
     open,
     onOpenChange,
-    nodeId,
-    elements: {
-      reference,
-      domReference,
-      floating
-    },
+    elements,
     dataRef
   } = context;
   const {
@@ -1769,9 +1862,11 @@ function useDismiss(context, props) {
     outsidePress: outsidePressCapture
   } = normalizeProp(capture);
   const closeOnEscapeKeyDown = useEffectEvent(event => {
+    var _dataRef$current$floa;
     if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
       return;
     }
+    const nodeId = (_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.nodeId;
     const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
     if (!escapeKeyBubbles) {
       event.stopPropagation();
@@ -1801,6 +1896,7 @@ function useDismiss(context, props) {
     (_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener('keydown', callback);
   });
   const closeOnPressOutside = useEffectEvent(event => {
+    var _dataRef$current$floa2;
     // Given developers can stop the propagation of the synthetic event,
     // we can only be confident with a positive value.
     const insideReactTree = insideReactTreeRef.current;
@@ -1823,7 +1919,7 @@ function useDismiss(context, props) {
     }
     const target = getTarget(event);
     const inertSelector = "[" + createAttribute('inert') + "]";
-    const markers = getDocument(floating).querySelectorAll(inertSelector);
+    const markers = getDocument(elements.floating).querySelectorAll(inertSelector);
     let targetRootAncestor = isElement(target) ? target : null;
     while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
       const nextParent = getParentNode(targetRootAncestor);
@@ -1837,7 +1933,7 @@ function useDismiss(context, props) {
     // floating element rendered.
     if (markers.length && isElement(target) && !isRootElement(target) &&
     // Clicked on a direct ancestor (e.g. FloatingOverlay).
-    !contains(target, floating) &&
+    !contains(target, elements.floating) &&
     // 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))) {
@@ -1866,11 +1962,12 @@ function useDismiss(context, props) {
         return;
       }
     }
+    const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId;
     const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
       var _node$context;
       return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
     });
-    if (isEventTargetWithin(event, floating) || isEventTargetWithin(event, domReference) || targetIsInsideChildren) {
+    if (isEventTargetWithin(event, elements.floating) || isEventTargetWithin(event, elements.domReference) || targetIsInsideChildren) {
       return;
     }
     const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
@@ -1907,19 +2004,19 @@ function useDismiss(context, props) {
     function onScroll(event) {
       onOpenChange(false, event, 'ancestor-scroll');
     }
-    const doc = getDocument(floating);
+    const doc = getDocument(elements.floating);
     escapeKey && doc.addEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
     outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
     let ancestors = [];
     if (ancestorScroll) {
-      if (isElement(domReference)) {
-        ancestors = getOverflowAncestors(domReference);
+      if (isElement(elements.domReference)) {
+        ancestors = getOverflowAncestors(elements.domReference);
       }
-      if (isElement(floating)) {
-        ancestors = ancestors.concat(getOverflowAncestors(floating));
+      if (isElement(elements.floating)) {
+        ancestors = ancestors.concat(getOverflowAncestors(elements.floating));
       }
-      if (!isElement(reference) && reference && reference.contextElement) {
-        ancestors = ancestors.concat(getOverflowAncestors(reference.contextElement));
+      if (!isElement(elements.reference) && elements.reference && elements.reference.contextElement) {
+        ancestors = ancestors.concat(getOverflowAncestors(elements.reference.contextElement));
       }
     }
 
@@ -1940,37 +2037,80 @@ function useDismiss(context, props) {
         ancestor.removeEventListener('scroll', onScroll);
       });
     };
-  }, [dataRef, floating, domReference, reference, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
+  }, [dataRef, elements, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
   React.useEffect(() => {
     insideReactTreeRef.current = false;
   }, [outsidePress, outsidePressEvent]);
-  return React.useMemo(() => {
-    if (!enabled) {
-      return {};
+  const reference = React.useMemo(() => ({
+    onKeyDown: closeOnEscapeKeyDown,
+    [bubbleHandlerKeys[referencePressEvent]]: event => {
+      if (referencePress) {
+        onOpenChange(false, event.nativeEvent, 'reference-press');
+      }
+    }
+  }), [closeOnEscapeKeyDown, onOpenChange, referencePress, referencePressEvent]);
+  const floating = React.useMemo(() => ({
+    onKeyDown: closeOnEscapeKeyDown,
+    onMouseDown() {
+      endedOrStartedInsideRef.current = true;
+    },
+    onMouseUp() {
+      endedOrStartedInsideRef.current = true;
+    },
+    [captureHandlerKeys[outsidePressEvent]]: () => {
+      insideReactTreeRef.current = true;
+    }
+  }), [closeOnEscapeKeyDown, outsidePressEvent]);
+  return React.useMemo(() => enabled ? {
+    reference,
+    floating
+  } : {}, [enabled, reference, floating]);
+}
+
+function useFloatingRootContext(options) {
+  const {
+    open = false,
+    onOpenChange: onOpenChangeProp,
+    elements: elementsProp
+  } = options;
+  const floatingId = useId();
+  const dataRef = React.useRef({});
+  const [events] = React.useState(() => createPubSub());
+  const nested = useFloatingParentNodeId() != null;
+  if (process.env.NODE_ENV !== "production") {
+    const optionDomReference = elementsProp.reference;
+    if (optionDomReference && !isElement(optionDomReference)) {
+      error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
     }
-    return {
-      reference: {
-        onKeyDown: closeOnEscapeKeyDown,
-        [bubbleHandlerKeys[referencePressEvent]]: event => {
-          if (referencePress) {
-            onOpenChange(false, event.nativeEvent, 'reference-press');
-          }
-        }
-      },
-      floating: {
-        onKeyDown: closeOnEscapeKeyDown,
-        onMouseDown() {
-          endedOrStartedInsideRef.current = true;
-        },
-        onMouseUp() {
-          endedOrStartedInsideRef.current = true;
-        },
-        [captureHandlerKeys[outsidePressEvent]]: () => {
-          insideReactTreeRef.current = true;
-        }
-      }
-    };
-  }, [enabled, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);
+  }
+  const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
+  const onOpenChange = useEffectEvent((open, event, reason) => {
+    dataRef.current.openEvent = open ? event : undefined;
+    events.emit('openchange', {
+      open,
+      event,
+      reason,
+      nested
+    });
+    onOpenChangeProp == null || onOpenChangeProp(open, event, reason);
+  });
+  const refs = React.useMemo(() => ({
+    setPositionReference
+  }), []);
+  const elements = React.useMemo(() => ({
+    reference: positionReference || elementsProp.reference || null,
+    floating: elementsProp.floating || null,
+    domReference: elementsProp.reference
+  }), [positionReference, elementsProp.reference, elementsProp.floating]);
+  return React.useMemo(() => ({
+    dataRef,
+    open,
+    onOpenChange,
+    elements,
+    events,
+    floatingId,
+    refs
+  }), [open, onOpenChange, elements, events, floatingId, refs]);
 }
 
 /**
@@ -1978,24 +2118,28 @@ function useDismiss(context, props) {
  * @see https://floating-ui.com/docs/useFloating
  */
 function useFloating(options) {
-  var _options$elements;
   if (options === void 0) {
     options = {};
   }
   const {
-    open = false,
-    onOpenChange: unstable_onOpenChange,
     nodeId
   } = options;
+  const internalRootContext = useFloatingRootContext({
+    ...options,
+    elements: {
+      reference: null,
+      floating: null,
+      ...options.elements
+    }
+  });
+  const rootContext = options.rootContext || internalRootContext;
+  const computedElements = rootContext.elements;
   const [_domReference, setDomReference] = React.useState(null);
   const [positionReference, _setPositionReference] = React.useState(null);
-  const optionDomReference = (_options$elements = options.elements) == null ? void 0 : _options$elements.reference;
+  const optionDomReference = computedElements == null ? void 0 : computedElements.reference;
   const domReference = optionDomReference || _domReference;
-  if (process.env.NODE_ENV !== "production") {
-    if (optionDomReference && !isElement(optionDomReference)) {
-      error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
-    }
-  }
+  const domReferenceRef = React.useRef(null);
+  const tree = useFloatingTree();
   index(() => {
     if (domReference) {
       domReferenceRef.current = domReference;
@@ -2004,28 +2148,12 @@ function useFloating(options) {
   const position = useFloating$1({
     ...options,
     elements: {
-      ...options.elements,
+      ...computedElements,
       ...(positionReference && {
         reference: positionReference
       })
     }
   });
-  const tree = useFloatingTree();
-  const nested = useFloatingParentNodeId() != null;
-  const onOpenChange = useEffectEvent((open, event, reason) => {
-    dataRef.current.openEvent = open ? event : undefined;
-    events.emit('openchange', {
-      open,
-      event,
-      reason,
-      nested
-    });
-    unstable_onOpenChange == null || unstable_onOpenChange(open, event, reason);
-  });
-  const domReferenceRef = React.useRef(null);
-  const dataRef = React.useRef({});
-  const events = React.useState(() => createPubSub())[0];
-  const floatingId = useId();
   const setPositionReference = React.useCallback(node => {
     const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -2064,16 +2192,13 @@ function useFloating(options) {
   }), [position.elements, domReference]);
   const context = React.useMemo(() => ({
     ...position,
+    ...rootContext,
     refs,
     elements,
-    dataRef,
-    nodeId,
-    floatingId,
-    events,
-    open,
-    onOpenChange
-  }), [position, nodeId, floatingId, events, open, onOpenChange, refs, elements]);
+    nodeId
+  }), [position, refs, elements, nodeId, rootContext]);
   index(() => {
+    rootContext.dataRef.current.floatingContext = context;
     const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
     if (node) {
       node.context = context;
@@ -2100,10 +2225,8 @@ function useFocus(context, props) {
     open,
     onOpenChange,
     events,
-    refs,
-    elements: {
-      domReference
-    }
+    dataRef,
+    elements
   } = context;
   const {
     enabled = true,
@@ -2113,16 +2236,14 @@ function useFocus(context, props) {
   const timeoutRef = React.useRef();
   const keyboardModalityRef = React.useRef(true);
   React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const win = getWindow(domReference);
+    if (!enabled) return;
+    const win = getWindow(elements.domReference);
 
     // If the reference was focused and the user left the tab/window, and the
     // floating element was not open, the focus should be blocked when they
     // return to the tab/window.
     function onBlur() {
-      if (!open && isHTMLElement(domReference) && domReference === activeElement(getDocument(domReference))) {
+      if (!open && isHTMLElement(elements.domReference) && elements.domReference === activeElement(getDocument(elements.domReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -2135,11 +2256,9 @@ function useFocus(context, props) {
       win.removeEventListener('blur', onBlur);
       win.removeEventListener('keydown', onKeyDown, true);
     };
-  }, [domReference, open, enabled]);
+  }, [elements.domReference, open, enabled]);
   React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
+    if (!enabled) return;
     function onOpenChange(_ref) {
       let {
         reason
@@ -2158,69 +2277,67 @@ function useFocus(context, props) {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return React.useMemo(() => {
-    if (!enabled) {
-      return {};
-    }
-    return {
-      reference: {
-        onPointerDown(event) {
-          if (isVirtualPointerEvent(event.nativeEvent)) return;
-          keyboardModalityRef.current = false;
-        },
-        onMouseLeave() {
-          blockFocusRef.current = false;
-        },
-        onFocus(event) {
-          if (blockFocusRef.current) return;
-          const target = getTarget(event.nativeEvent);
-          if (visibleOnly && isElement(target)) {
-            try {
-              // Mac Safari unreliably matches `:focus-visible` on the reference
-              // if focus was outside the page initially - use the fallback
-              // instead.
-              if (isSafari() && isMac()) throw Error();
-              if (!target.matches(':focus-visible')) return;
-            } catch (e) {
-              // Old browsers will throw an error when using `:focus-visible`.
-              if (!keyboardModalityRef.current && !isTypeableElement(target)) {
-                return;
-              }
-            }
+  const reference = React.useMemo(() => ({
+    onPointerDown(event) {
+      if (isVirtualPointerEvent(event.nativeEvent)) return;
+      keyboardModalityRef.current = false;
+    },
+    onMouseLeave() {
+      blockFocusRef.current = false;
+    },
+    onFocus(event) {
+      if (blockFocusRef.current) return;
+      const target = getTarget(event.nativeEvent);
+      if (visibleOnly && isElement(target)) {
+        try {
+          // Mac Safari unreliably matches `:focus-visible` on the reference
+          // if focus was outside the page initially - use the fallback
+          // instead.
+          if (isSafari() && isMac()) throw Error();
+          if (!target.matches(':focus-visible')) return;
+        } catch (e) {
+          // Old browsers will throw an error when using `:focus-visible`.
+          if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+            return;
           }
-          onOpenChange(true, event.nativeEvent, 'focus');
-        },
-        onBlur(event) {
-          blockFocusRef.current = false;
-          const relatedTarget = event.relatedTarget;
-
-          // Hit the non-modal focus management portal guard. Focus will be
-          // moved into the floating element immediately after.
-          const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
-
-          // Wait for the window blur listener to fire.
-          timeoutRef.current = window.setTimeout(() => {
-            const activeEl = activeElement(domReference ? domReference.ownerDocument : document);
-
-            // Focus left the page, keep it open.
-            if (!relatedTarget && activeEl === domReference) return;
-
-            // When focusing the reference element (e.g. regular click), then
-            // clicking into the floating element, prevent it from hiding.
-            // Note: it must be focusable, e.g. `tabindex="-1"`.
-            // We can not rely on relatedTarget to point to the correct element
-            // as it will only point to the shadow host of the newly focused element
-            // and not the element that actually has received focus if it is located
-            // inside a shadow root.
-            if (contains(refs.floating.current, activeEl) || contains(domReference, activeEl) || movedToFocusGuard) {
-              return;
-            }
-            onOpenChange(false, event.nativeEvent, 'focus');
-          });
         }
       }
-    };
-  }, [enabled, visibleOnly, domReference, refs, onOpenChange]);
+      onOpenChange(true, event.nativeEvent, 'focus');
+    },
+    onBlur(event) {
+      blockFocusRef.current = false;
+      const relatedTarget = event.relatedTarget;
+      const nativeEvent = event.nativeEvent;
+
+      // Hit the non-modal focus management portal guard. Focus will be
+      // moved into the floating element immediately after.
+      const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+
+      // Wait for the window blur listener to fire.
+      timeoutRef.current = window.setTimeout(() => {
+        var _dataRef$current$floa;
+        const activeEl = activeElement(elements.domReference ? elements.domReference.ownerDocument : document);
+
+        // Focus left the page, keep it open.
+        if (!relatedTarget && activeEl === elements.domReference) return;
+
+        // When focusing the reference element (e.g. regular click), then
+        // clicking into the floating element, prevent it from hiding.
+        // Note: it must be focusable, e.g. `tabindex="-1"`.
+        // We can not rely on relatedTarget to point to the correct element
+        // as it will only point to the shadow host of the newly focused element
+        // and not the element that actually has received focus if it is located
+        // inside a shadow root.
+        if (contains((_dataRef$current$floa = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa.refs.floating.current, activeEl) || contains(elements.domReference, activeEl) || movedToFocusGuard) {
+          return;
+        }
+        onOpenChange(false, nativeEvent, 'focus');
+      });
+    }
+  }), [dataRef, elements.domReference, onOpenChange, visibleOnly]);
+  return React.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
 }
 
 const ACTIVE_KEY = 'active';
@@ -2280,7 +2397,6 @@ function mergeProps(userProps, propsList, elementKey) {
     }, {})
   };
 }
-
 /**
  * Merges an array of interaction hooks' props into prop getters, allowing
  * event handler functions to be composed together without overwriting one
@@ -2291,22 +2407,18 @@ function useInteractions(propsList) {
   if (propsList === void 0) {
     propsList = [];
   }
-  // The dependencies are a dynamic array, so we can't use the linter's
-  // suggestion to add it to the deps array.
-  const deps = propsList;
+  const referenceDeps = propsList.map(key => key == null ? void 0 : key.reference);
+  const floatingDeps = propsList.map(key => key == null ? void 0 : key.floating);
+  const itemDeps = propsList.map(key => key == null ? void 0 : key.item);
   const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  deps);
+  referenceDeps);
   const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  deps);
+  floatingDeps);
   const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
-  // Granularly check for `item` changes, because the `getItemProps` getter
-  // should be as referentially stable as possible since it may be passed as
-  // a prop to many components. All `item` key values must therefore be
-  // memoized.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  propsList.map(key => key == null ? void 0 : key.item));
+  itemDeps);
   return React.useMemo(() => ({
     getReferenceProps,
     getFloatingProps,
@@ -2354,11 +2466,7 @@ function useListNavigation(context, props) {
   const {
     open,
     onOpenChange,
-    refs,
-    elements: {
-      domReference,
-      floating
-    }
+    elements
   } = context;
   const {
     listRef,
@@ -2403,47 +2511,59 @@ function useListNavigation(context, props) {
   const keyRef = React.useRef(null);
   const isPointerModalityRef = React.useRef(true);
   const previousOnNavigateRef = React.useRef(onNavigate);
-  const previousMountedRef = React.useRef(!!floating);
+  const previousMountedRef = React.useRef(!!elements.floating);
+  const previousOpenRef = React.useRef(open);
   const forceSyncFocus = React.useRef(false);
   const forceScrollIntoViewRef = React.useRef(false);
   const disabledIndicesRef = useLatestRef(disabledIndices);
   const latestOpenRef = useLatestRef(open);
   const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
+  const floatingRef = useLatestRef(elements.floating);
+  const selectedIndexRef = useLatestRef(selectedIndex);
   const [activeId, setActiveId] = React.useState();
   const [virtualId, setVirtualId] = React.useState();
   const focusItem = useEffectEvent(function (listRef, indexRef, forceScrollIntoView) {
     if (forceScrollIntoView === void 0) {
       forceScrollIntoView = false;
     }
-    const item = listRef.current[indexRef.current];
-    if (!item) return;
-    if (virtual) {
-      setActiveId(item.id);
-      tree == null || tree.events.emit('virtualfocus', item);
-      if (virtualItemRef) {
-        virtualItemRef.current = item;
+    function runFocus(item) {
+      if (virtual) {
+        setActiveId(item.id);
+        tree == null || tree.events.emit('virtualfocus', item);
+        if (virtualItemRef) {
+          virtualItemRef.current = item;
+        }
+      } else {
+        enqueueFocus(item, {
+          preventScroll: true,
+          // Mac Safari does not move the virtual cursor unless the focus call
+          // is sync. However, for the very first focus call, we need to wait
+          // for the position to be ready in order to prevent unwanted
+          // scrolling. This means the virtual cursor will not move to the first
+          // item when first opening the floating element, but will on
+          // subsequent calls. `preventScroll` is supported in modern Safari,
+          // so we can use that instead.
+          // iOS Safari must be async or the first item will not be focused.
+          sync: isMac() && isSafari() ? isPreventScrollSupported || forceSyncFocus.current : false
+        });
       }
-    } else {
-      enqueueFocus(item, {
-        preventScroll: true,
-        // Mac Safari does not move the virtual cursor unless the focus call
-        // is sync. However, for the very first focus call, we need to wait
-        // for the position to be ready in order to prevent unwanted
-        // scrolling. This means the virtual cursor will not move to the first
-        // item when first opening the floating element, but will on
-        // subsequent calls. `preventScroll` is supported in modern Safari,
-        // so we can use that instead.
-        // iOS Safari must be async or the first item will not be focused.
-        sync: isMac() && isSafari() ? isPreventScrollSupported || forceSyncFocus.current : false
-      });
+    }
+    const initialItem = listRef.current[indexRef.current];
+    if (initialItem) {
+      runFocus(initialItem);
     }
     requestAnimationFrame(() => {
+      const waitedItem = listRef.current[indexRef.current] || initialItem;
+      if (!waitedItem) return;
+      if (!initialItem) {
+        runFocus(waitedItem);
+      }
       const scrollIntoViewOptions = scrollItemIntoViewRef.current;
       const shouldScrollIntoView = scrollIntoViewOptions && item && (forceScrollIntoView || !isPointerModalityRef.current);
       if (shouldScrollIntoView) {
         // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
         // by all browsers.
-        item.scrollIntoView == null || item.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {
+        waitedItem.scrollIntoView == null || waitedItem.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {
           block: 'nearest',
           inline: 'nearest'
         } : scrollIntoViewOptions);
@@ -2462,10 +2582,8 @@ function useListNavigation(context, props) {
   // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
   // element. Also, reset `activeIndex` upon closing the floating element.
   index(() => {
-    if (!enabled) {
-      return;
-    }
-    if (open && floating) {
+    if (!enabled) return;
+    if (open && elements.floating) {
       if (focusItemOnOpenRef.current && selectedIndex != null) {
         // Regardless of the pointer modality, we want to ensure the selected
         // item comes into view when the floating element is opened.
@@ -2480,18 +2598,16 @@ function useListNavigation(context, props) {
       indexRef.current = -1;
       previousOnNavigateRef.current(null);
     }
-  }, [enabled, open, floating, selectedIndex, onNavigate]);
+  }, [enabled, open, elements.floating, selectedIndex, onNavigate]);
 
   // Sync `activeIndex` to be the focused item while the floating element is
   // open.
   index(() => {
-    if (!enabled) {
-      return;
-    }
-    if (open && floating) {
+    if (!enabled) return;
+    if (open && elements.floating) {
       if (activeIndex == null) {
         forceSyncFocus.current = false;
-        if (selectedIndex != null) {
+        if (selectedIndexRef.current != null) {
           return;
         }
 
@@ -2502,7 +2618,7 @@ function useListNavigation(context, props) {
         }
 
         // Initial sync.
-        if (!previousMountedRef.current && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
+        if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
           let runs = 0;
           const waitForListPopulated = () => {
             if (listRef.current[0] == null) {
@@ -2528,27 +2644,30 @@ function useListNavigation(context, props) {
         forceScrollIntoViewRef.current = false;
       }
     }
-  }, [enabled, open, floating, activeIndex, selectedIndex, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
+  }, [enabled, open, elements.floating, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
 
   // Ensure the parent floating element has focus when a nested child closes
   // to allow arrow key navigation to work after the pointer leaves the child.
   index(() => {
     var _nodes$find;
-    if (!enabled || floating || !tree || virtual || !previousMountedRef.current) {
+    if (!enabled || elements.floating || !tree || virtual || !previousMountedRef.current) {
       return;
     }
     const nodes = tree.nodesRef.current;
     const parent = (_nodes$find = nodes.find(node => node.id === parentId)) == null || (_nodes$find = _nodes$find.context) == null ? void 0 : _nodes$find.elements.floating;
-    const activeEl = activeElement(getDocument(floating));
+    const activeEl = activeElement(getDocument(elements.floating));
     const treeContainsActiveEl = nodes.some(node => node.context && contains(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
         preventScroll: true
       });
     }
-  }, [enabled, floating, tree, parentId, virtual]);
+  }, [enabled, elements.floating, tree, parentId, virtual]);
   index(() => {
-    if (!enabled || !tree || !virtual || parentId) return;
+    if (!enabled) return;
+    if (!tree) return;
+    if (!virtual) return;
+    if (parentId) return;
     function handleVirtualFocus(item) {
       setVirtualId(item.id);
       if (virtualItemRef) {
@@ -2562,13 +2681,16 @@ function useListNavigation(context, props) {
   }, [enabled, tree, virtual, parentId, virtualItemRef]);
   index(() => {
     previousOnNavigateRef.current = onNavigate;
-    previousMountedRef.current = !!floating;
+    previousMountedRef.current = !!elements.floating;
   });
   index(() => {
     if (!open) {
       keyRef.current = null;
     }
   }, [open]);
+  index(() => {
+    previousOpenRef.current = open;
+  }, [open]);
   const hasActiveIndex = activeIndex != null;
   const item = React.useMemo(() => {
     function syncCurrentTarget(currentTarget) {
@@ -2612,7 +2734,7 @@ function useListNavigation(context, props) {
           focusItem(listRef, indexRef);
           onNavigate(null);
           if (!virtual) {
-            enqueueFocus(refs.floating.current, {
+            enqueueFocus(floatingRef.current, {
               preventScroll: true
             });
           }
@@ -2620,126 +2742,137 @@ function useListNavigation(context, props) {
       })
     };
     return props;
-  }, [open, refs, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
-  return React.useMemo(() => {
-    if (!enabled) {
-      return {};
+  }, [open, floatingRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
+  const commonOnKeyDown = useEffectEvent(event => {
+    isPointerModalityRef.current = false;
+    forceSyncFocus.current = true;
+
+    // If the floating element is animating out, ignore navigation. Otherwise,
+    // the `activeIndex` gets set to 0 despite not being open so the next time
+    // the user ArrowDowns, the first item won't be focused.
+    if (!latestOpenRef.current && event.currentTarget === floatingRef.current) {
+      return;
     }
-    const disabledIndices = disabledIndicesRef.current;
-    function onKeyDown(event) {
-      isPointerModalityRef.current = false;
-      forceSyncFocus.current = true;
-
-      // If the floating element is animating out, ignore navigation. Otherwise,
-      // the `activeIndex` gets set to 0 despite not being open so the next time
-      // the user ArrowDowns, the first item won't be focused.
-      if (!latestOpenRef.current && event.currentTarget === refs.floating.current) {
-        return;
+    if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
+      stopEvent(event);
+      onOpenChange(false, event.nativeEvent, 'list-navigation');
+      if (isHTMLElement(elements.domReference) && !virtual) {
+        elements.domReference.focus();
       }
-      if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
-        stopEvent(event);
-        onOpenChange(false, event.nativeEvent, 'list-navigation');
-        if (isHTMLElement(domReference) && !virtual) {
-          domReference.focus();
-        }
+      return;
+    }
+    const currentIndex = indexRef.current;
+    const minIndex = getMinIndex(listRef, disabledIndices);
+    const maxIndex = getMaxIndex(listRef, disabledIndices);
+    if (event.key === 'Home') {
+      stopEvent(event);
+      indexRef.current = minIndex;
+      onNavigate(indexRef.current);
+    }
+    if (event.key === 'End') {
+      stopEvent(event);
+      indexRef.current = maxIndex;
+      onNavigate(indexRef.current);
+    }
+
+    // Grid navigation.
+    if (cols > 1) {
+      const sizes = itemSizes || Array.from({
+        length: listRef.current.length
+      }, () => ({
+        width: 1,
+        height: 1
+      }));
+      // To calculate movements on the grid, we use hypothetical cell indices
+      // as if every item was 1x1, then convert back to real indices.
+      const cellMap = buildCellMap(sizes, cols, dense);
+      const minGridIndex = cellMap.findIndex(index => index != null && !isDisabled(listRef.current, index, disabledIndices));
+      // last enabled index
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      indexRef.current = cellMap[getGridNavigatedIndex({
+        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
+      }, {
+        event,
+        orientation,
+        loop,
+        cols,
+        // treat undefined (empty grid spaces) as disabled indices so we
+        // don't end up in them
+        disabledIndices: getCellIndices([...(disabledIndices || listRef.current.map((_, index) => isDisabled(listRef.current, index) ? index : undefined)), undefined], cellMap),
+        minIndex: minGridIndex,
+        maxIndex: maxGridIndex,
+        prevIndex: getCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
+        // use a corner matching the edge closest to the direction
+        // we're moving in so we don't end up in the same item. Prefer
+        // top/left over bottom/right.
+        event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl'),
+        stopEvent: true
+      })]; // navigated cell will never be nullish
+
+      onNavigate(indexRef.current);
+      if (orientation === 'both') {
         return;
       }
-      const currentIndex = indexRef.current;
-      const minIndex = getMinIndex(listRef, disabledIndices);
-      const maxIndex = getMaxIndex(listRef, disabledIndices);
-      if (event.key === 'Home') {
-        stopEvent(event);
-        indexRef.current = minIndex;
-        onNavigate(indexRef.current);
-      }
-      if (event.key === 'End') {
-        stopEvent(event);
-        indexRef.current = maxIndex;
-        onNavigate(indexRef.current);
-      }
-
-      // Grid navigation.
-      if (cols > 1) {
-        const sizes = itemSizes || Array.from({
-          length: listRef.current.length
-        }, () => ({
-          width: 1,
-          height: 1
-        }));
-        // To calculate movements on the grid, we use hypothetical cell indices
-        // as if every item was 1x1, then convert back to real indices.
-        const cellMap = buildCellMap(sizes, cols, dense);
-        const minGridIndex = cellMap.findIndex(index => index != null && !(disabledIndices != null && disabledIndices.includes(index)));
-        // last enabled index
-        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(disabledIndices != null && disabledIndices.includes(index)) ? cellIndex : foundIndex, -1);
-        indexRef.current = cellMap[getGridNavigatedIndex({
-          current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-        }, {
-          event,
-          orientation,
-          loop,
-          cols,
-          // treat undefined (empty grid spaces) as disabled indices so we
-          // don't end up in them
-          disabledIndices: getCellIndices([...(disabledIndices || []), undefined], cellMap),
-          minIndex: minGridIndex,
-          maxIndex: maxGridIndex,
-          prevIndex: getCellIndexOfCorner(indexRef.current, sizes, cellMap, cols,
-          // use a corner matching the edge closest to the direction
-          // we're moving in so we don't end up in the same item. Prefer
-          // top/left over bottom/right.
-          event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl'),
-          stopEvent: true
-        })]; // navigated cell will never be nullish
+    }
+    if (isMainOrientationKey(event.key, orientation)) {
+      stopEvent(event);
 
+      // Reset the index if no item is focused.
+      if (open && !virtual && activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
+        indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
         onNavigate(indexRef.current);
-        if (orientation === 'both') {
-          return;
-        }
+        return;
       }
-      if (isMainOrientationKey(event.key, orientation)) {
-        stopEvent(event);
-
-        // Reset the index if no item is focused.
-        if (open && !virtual && activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
-          indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
-          onNavigate(indexRef.current);
-          return;
-        }
-        if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
-          if (loop) {
-            indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : findNonDisabledIndex(listRef, {
-              startingIndex: currentIndex,
-              disabledIndices
-            });
-          } else {
-            indexRef.current = Math.min(maxIndex, findNonDisabledIndex(listRef, {
-              startingIndex: currentIndex,
-              disabledIndices
-            }));
-          }
+      if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
+        if (loop) {
+          indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : findNonDisabledIndex(listRef, {
+            startingIndex: currentIndex,
+            disabledIndices
+          });
         } else {
-          if (loop) {
-            indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : findNonDisabledIndex(listRef, {
-              startingIndex: currentIndex,
-              decrement: true,
-              disabledIndices
-            });
-          } else {
-            indexRef.current = Math.max(minIndex, findNonDisabledIndex(listRef, {
-              startingIndex: currentIndex,
-              decrement: true,
-              disabledIndices
-            }));
-          }
+          indexRef.current = Math.min(maxIndex, findNonDisabledIndex(listRef, {
+            startingIndex: currentIndex,
+            disabledIndices
+          }));
         }
-        if (isIndexOutOfBounds(listRef, indexRef.current)) {
-          onNavigate(null);
+      } else {
+        if (loop) {
+          indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : findNonDisabledIndex(listRef, {
+            startingIndex: currentIndex,
+            decrement: true,
+            disabledIndices
+          });
         } else {
-          onNavigate(indexRef.current);
+          indexRef.current = Math.max(minIndex, findNonDisabledIndex(listRef, {
+            startingIndex: currentIndex,
+            decrement: true,
+            disabledIndices
+          }));
         }
       }
+      if (isIndexOutOfBounds(listRef, indexRef.current)) {
+        onNavigate(null);
+      } else {
+        onNavigate(indexRef.current);
+      }
     }
+  });
+  const ariaActiveDescendantProp = React.useMemo(() => {
+    return virtual && open && hasActiveIndex && {
+      'aria-activedescendant': virtualId || activeId
+    };
+  }, [virtual, open, hasActiveIndex, virtualId, activeId]);
+  const floating = React.useMemo(() => {
+    return {
+      'aria-orientation': orientation === 'both' ? undefined : orientation,
+      ...(!isTypeableCombobox(elements.domReference) && ariaActiveDescendantProp),
+      onKeyDown: commonOnKeyDown,
+      onPointerMove() {
+        isPointerModalityRef.current = true;
+      }
+    };
+  }, [ariaActiveDescendantProp, commonOnKeyDown, elements.domReference, orientation]);
+  const reference = React.useMemo(() => {
     function checkVirtualMouse(event) {
       if (focusItemOnOpen === 'auto' && isVirtualClick(event.nativeEvent)) {
         focusItemOnOpenRef.current = true;
@@ -2752,105 +2885,95 @@ function useListNavigation(context, props) {
         focusItemOnOpenRef.current = true;
       }
     }
-    const ariaActiveDescendantProp = virtual && open && hasActiveIndex && {
-      'aria-activedescendant': virtualId || activeId
-    };
-    const activeItem = listRef.current.find(item => (item == null ? void 0 : item.id) === activeId);
     return {
-      reference: {
-        ...ariaActiveDescendantProp,
-        onKeyDown(event) {
-          isPointerModalityRef.current = false;
-          const isArrowKey = event.key.indexOf('Arrow') === 0;
-          const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
-          const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl);
-          const isMainKey = isMainOrientationKey(event.key, orientation);
-          const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';
-          if (virtual && open) {
-            const rootNode = tree == null ? void 0 : tree.nodesRef.current.find(node => node.parentId == null);
-            const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;
-            if (isArrowKey && deepestNode && virtualItemRef) {
-              const eventObject = new KeyboardEvent('keydown', {
-                key: event.key,
-                bubbles: true
-              });
-              if (isCrossOpenKey || isCrossCloseKey) {
-                var _deepestNode$context, _deepestNode$context2;
-                const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;
-                const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? activeItem : null;
-                if (dispatchItem) {
-                  stopEvent(event);
-                  dispatchItem.dispatchEvent(eventObject);
-                  setVirtualId(undefined);
-                }
-              }
-              if (isMainKey && deepestNode.context) {
-                if (deepestNode.context.open && deepestNode.parentId && event.currentTarget !== deepestNode.context.elements.domReference) {
-                  var _deepestNode$context$;
-                  stopEvent(event);
-                  (_deepestNode$context$ = deepestNode.context.elements.domReference) == null || _deepestNode$context$.dispatchEvent(eventObject);
-                  return;
-                }
+      ...ariaActiveDescendantProp,
+      onKeyDown(event) {
+        isPointerModalityRef.current = false;
+        const isArrowKey = event.key.indexOf('Arrow') === 0;
+        const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
+        const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl);
+        const isMainKey = isMainOrientationKey(event.key, orientation);
+        const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';
+        if (virtual && open) {
+          const rootNode = tree == null ? void 0 : tree.nodesRef.current.find(node => node.parentId == null);
+          const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;
+          if (isArrowKey && deepestNode && virtualItemRef) {
+            const eventObject = new KeyboardEvent('keydown', {
+              key: event.key,
+              bubbles: true
+            });
+            if (isCrossOpenKey || isCrossCloseKey) {
+              var _deepestNode$context, _deepestNode$context2;
+              const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;
+              const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? listRef.current.find(item => (item == null ? void 0 : item.id) === activeId) : null;
+              if (dispatchItem) {
+                stopEvent(event);
+                dispatchItem.dispatchEvent(eventObject);
+                setVirtualId(undefined);
               }
             }
-            return onKeyDown(event);
-          }
-
-          // If a floating element should not open on arrow key down, avoid
-          // setting `activeIndex` while it's closed.
-          if (!open && !openOnArrowKeyDown && isArrowKey) {
-            return;
-          }
-          if (isNavigationKey) {
-            keyRef.current = nested && isMainKey ? null : event.key;
-          }
-          if (nested) {
-            if (isCrossOpenKey) {
-              stopEvent(event);
-              if (open) {
-                indexRef.current = getMinIndex(listRef, disabledIndices);
-                onNavigate(indexRef.current);
-              } else {
-                onOpenChange(true, event.nativeEvent, 'list-navigation');
+            if (isMainKey && deepestNode.context) {
+              if (deepestNode.context.open && deepestNode.parentId && event.currentTarget !== deepestNode.context.elements.domReference) {
+                var _deepestNode$context$;
+                stopEvent(event);
+                (_deepestNode$context$ = deepestNode.context.elements.domReference) == null || _deepestNode$context$.dispatchEvent(eventObject);
+                return;
               }
             }
-            return;
           }
-          if (isMainKey) {
-            if (selectedIndex != null) {
-              indexRef.current = selectedIndex;
-            }
+          return commonOnKeyDown(event);
+        }
+
+        // If a floating element should not open on arrow key down, avoid
+        // setting `activeIndex` while it's closed.
+        if (!open && !openOnArrowKeyDown && isArrowKey) {
+          return;
+        }
+        if (isNavigationKey) {
+          keyRef.current = nested && isMainKey ? null : event.key;
+        }
+        if (nested) {
+          if (isCrossOpenKey) {
             stopEvent(event);
-            if (!open && openOnArrowKeyDown) {
-              onOpenChange(true, event.nativeEvent, 'list-navigation');
-            } else {
-              onKeyDown(event);
-            }
             if (open) {
+              indexRef.current = getMinIndex(listRef, disabledIndicesRef.current);
               onNavigate(indexRef.current);
+            } else {
+              onOpenChange(true, event.nativeEvent, 'list-navigation');
             }
           }
-        },
-        onFocus() {
+          return;
+        }
+        if (isMainKey) {
+          if (selectedIndex != null) {
+            indexRef.current = selectedIndex;
+          }
+          stopEvent(event);
+          if (!open && openOnArrowKeyDown) {
+            onOpenChange(true, event.nativeEvent, 'list-navigation');
+          } else {
+            commonOnKeyDown(event);
+          }
           if (open) {
-            onNavigate(null);
+            onNavigate(indexRef.current);
           }
-        },
-        onPointerDown: checkVirtualPointer,
-        onMouseDown: checkVirtualMouse,
-        onClick: checkVirtualMouse
+        }
       },
-      floating: {
-        'aria-orientation': orientation === 'both' ? undefined : orientation,
-        ...(!isTypeableCombobox(domReference) && ariaActiveDescendantProp),
-        onKeyDown,
-        onPointerMove() {
-          isPointerModalityRef.current = true;
+      onFocus() {
+        if (open && !virtual) {
+          onNavigate(null);
         }
       },
-      item
+      onPointerDown: checkVirtualPointer,
+      onMouseDown: checkVirtualMouse,
+      onClick: checkVirtualMouse
     };
-  }, [domReference, refs, activeId, virtualId, disabledIndicesRef, latestOpenRef, listRef, enabled, orientation, rtl, virtual, open, hasActiveIndex, nested, selectedIndex, openOnArrowKeyDown, allowEscape, cols, loop, focusItemOnOpen, onNavigate, onOpenChange, item, tree, virtualItemRef, itemSizes, dense]);
+  }, [activeId, ariaActiveDescendantProp, commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, onOpenChange, open, openOnArrowKeyDown, orientation, rtl, selectedIndex, tree, virtual, virtualItemRef]);
+  return React.useMemo(() => enabled ? {
+    reference,
+    floating,
+    item
+  } : {}, [enabled, reference, floating, item]);
 }
 
 const componentRoleToAriaRoleMap = /*#__PURE__*/new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
@@ -2877,8 +3000,34 @@ function useRole(context, props) {
   const referenceId = useId();
   const parentId = useFloatingParentNodeId();
   const isNested = parentId != null;
-  return React.useMemo(() => {
-    if (!enabled) return {};
+  const reference = React.useMemo(() => {
+    if (ariaRole === 'tooltip' || role === 'label') {
+      return {
+        ["aria-" + (role === 'label' ? 'labelledby' : 'describedby')]: open ? floatingId : undefined
+      };
+    }
+    return {
+      'aria-expanded': open ? 'true' : 'false',
+      'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
+      'aria-controls': open ? floatingId : undefined,
+      ...(ariaRole === 'listbox' && {
+        role: 'combobox'
+      }),
+      ...(ariaRole === 'menu' && {
+        id: referenceId
+      }),
+      ...(ariaRole === 'menu' && isNested && {
+        role: 'menuitem'
+      }),
+      ...(role === 'select' && {
+        'aria-autocomplete': 'none'
+      }),
+      ...(role === 'combobox' && {
+        'aria-autocomplete': 'list'
+      })
+    };
+  }, [ariaRole, floatingId, isNested, open, referenceId, role]);
+  const floating = React.useMemo(() => {
     const floatingProps = {
       id: floatingId,
       ...(ariaRole && {
@@ -2886,75 +3035,53 @@ function useRole(context, props) {
       })
     };
     if (ariaRole === 'tooltip' || role === 'label') {
-      return {
-        reference: {
-          ["aria-" + (role === 'label' ? 'labelledby' : 'describedby')]: open ? floatingId : undefined
-        },
-        floating: floatingProps
-      };
+      return floatingProps;
     }
     return {
-      reference: {
-        'aria-expanded': open ? 'true' : 'false',
-        'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
-        'aria-controls': open ? floatingId : undefined,
-        ...(ariaRole === 'listbox' && {
-          role: 'combobox'
-        }),
-        ...(ariaRole === 'menu' && {
-          id: referenceId
-        }),
-        ...(ariaRole === 'menu' && isNested && {
-          role: 'menuitem'
-        }),
-        ...(role === 'select' && {
-          'aria-autocomplete': 'none'
-        }),
-        ...(role === 'combobox' && {
-          'aria-autocomplete': 'list'
-        })
-      },
-      floating: {
-        ...floatingProps,
-        ...(ariaRole === 'menu' && {
-          'aria-labelledby': referenceId
-        })
-      },
-      item(_ref) {
-        let {
-          active,
-          selected
-        } = _ref;
-        const commonProps = {
-          role: 'option',
-          ...(active && {
-            id: floatingId + "-option"
-          })
-        };
+      ...floatingProps,
+      ...(ariaRole === 'menu' && {
+        'aria-labelledby': referenceId
+      })
+    };
+  }, [ariaRole, floatingId, referenceId, role]);
+  const item = React.useCallback(_ref => {
+    let {
+      active,
+      selected
+    } = _ref;
+    const commonProps = {
+      role: 'option',
+      ...(active && {
+        id: floatingId + "-option"
+      })
+    };
 
-        // For `menu`, we are unable to tell if the item is a `menuitemradio`
-        // or `menuitemcheckbox`. For backwards-compatibility reasons, also
-        // avoid defaulting to `menuitem` as it may overwrite custom role props.
-        switch (role) {
-          case 'select':
-            return {
-              ...commonProps,
-              'aria-selected': active && selected
-            };
-          case 'combobox':
-            {
-              return {
-                ...commonProps,
-                ...(active && {
-                  'aria-selected': true
-                })
-              };
-            }
+    // For `menu`, we are unable to tell if the item is a `menuitemradio`
+    // or `menuitemcheckbox`. For backwards-compatibility reasons, also
+    // avoid defaulting to `menuitem` as it may overwrite custom role props.
+    switch (role) {
+      case 'select':
+        return {
+          ...commonProps,
+          'aria-selected': active && selected
+        };
+      case 'combobox':
+        {
+          return {
+            ...commonProps,
+            ...(active && {
+              'aria-selected': true
+            })
+          };
         }
-        return {};
-      }
-    };
-  }, [enabled, role, ariaRole, open, floatingId, referenceId, isNested]);
+    }
+    return {};
+  }, [floatingId, role]);
+  return React.useMemo(() => enabled ? {
+    reference,
+    floating,
+    item
+  } : {}, [enabled, reference, floating, item]);
 }
 
 // Converts a JS style key like `backgroundColor` to a CSS transition-property
@@ -2969,11 +3096,11 @@ function useDelayUnmount(open, durationMs) {
     setIsMounted(true);
   }
   React.useEffect(() => {
-    if (!open) {
+    if (!open && isMounted) {
       const timeout = setTimeout(() => setIsMounted(false), durationMs);
       return () => clearTimeout(timeout);
     }
-  }, [open, durationMs]);
+  }, [open, isMounted, durationMs]);
   return isMounted;
 }
 /**
@@ -2996,19 +3123,11 @@ function useTransitionStatus(context, props) {
   } = props;
   const isNumberDuration = typeof duration === 'number';
   const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
-  const [initiated, setInitiated] = React.useState(false);
   const [status, setStatus] = React.useState('unmounted');
   const isMounted = useDelayUnmount(open, closeDuration);
-
-  // `initiated` check prevents this `setState` call from breaking
-  // <FloatingPortal />. This call is necessary to ensure subsequent opens
-  // after the initial one allows the correct side animation to play when the
-  // placement has changed.
-  index(() => {
-    if (initiated && !isMounted) {
-      setStatus('unmounted');
-    }
-  }, [initiated, isMounted]);
+  if (!isMounted && status === 'close') {
+    setStatus('unmounted');
+  }
   index(() => {
     if (!floating) return;
     if (open) {
@@ -3020,7 +3139,6 @@ function useTransitionStatus(context, props) {
         cancelAnimationFrame(frame);
       };
     }
-    setInitiated(true);
     setStatus('close');
   }, [open, floating]);
   return {
@@ -3108,4 +3226,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingArrow, FloatingFocusManager, FloatingPortal, getOverflowAncestors, platform, useClick, useDismiss, useFloating, useFloatingParentNodeId, useFloatingPortalNode, useFloatingTree, useFocus, useHover, useId, useInteractions, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles };
+export { FloatingArrow, FloatingFocusManager, FloatingPortal, getOverflowAncestors, useClick, useDismiss, useFloating, useFloatingParentNodeId, useFloatingPortalNode, useFloatingRootContext, useFloatingTree, useFocus, useHover, useId, useInteractions, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles };