@digdir/designsystemet-react 1.0.0-next.17 → 1.0.0-next.33

package/dist/cjs/node_modules/@floating-ui/dom/dist/floating-ui.dom.js

@@ -2,8 +2,9 @@
 'use strict';
 
 var floatingUi_core = require('../../core/dist/floating-ui.core.js');
-var floatingUi_utils = require('../../utils/dist/floating-ui.utils.js');
-var floatingUi_utils_dom = require('../../utils/dist/floating-ui.utils.dom.js');
+var floatingUi_utils = require('../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
+var floatingUi_utils_dom = require('../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js');
+var floatingUi_utils$1 = require('../../utils/dist/floating-ui.utils.js');
 
 function getCssDimensions(element) {
   const css = floatingUi_utils_dom.getComputedStyle(element);
@@ -107,7 +108,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     const win = floatingUi_utils_dom.getWindow(domElement);
     const offsetWin = offsetParent && floatingUi_utils_dom.isElement(offsetParent) ? floatingUi_utils_dom.getWindow(offsetParent) : offsetParent;
     let currentWin = win;
-    let currentIFrame = currentWin.frameElement;
+    let currentIFrame = floatingUi_utils_dom.getFrameElement(currentWin);
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
@@ -121,10 +122,10 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       x += left;
       y += top;
       currentWin = floatingUi_utils_dom.getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = floatingUi_utils_dom.getFrameElement(currentWin);
     }
   }
-  return floatingUi_utils.rectToClientRect({
+  return floatingUi_utils$1.rectToClientRect({
     width,
     height,
     x,
@@ -260,7 +261,7 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
       y: clippingAncestor.y - visualOffsets.y
     };
   }
-  return floatingUi_utils.rectToClientRect(rect);
+  return floatingUi_utils$1.rectToClientRect(rect);
 }
 function hasFixedPositionAncestor(element, stopNode) {
   const parentNode = floatingUi_utils_dom.getParentNode(element);
@@ -628,21 +629,6 @@ const shift = floatingUi_core.shift;
  */
 const flip = floatingUi_core.flip;
 
-/**
- * Provides data that allows you to change the size of the floating element —
- * for instance, prevent it from overflowing the clipping boundary or match the
- * width of the reference element.
- * @see https://floating-ui.com/docs/size
- */
-const size = floatingUi_core.size;
-
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = floatingUi_core.arrow;
-
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -667,11 +653,9 @@ const computePosition = (reference, floating, options) => {
 };
 
 exports.getOverflowAncestors = floatingUi_utils_dom.getOverflowAncestors;
-exports.arrow = arrow;
 exports.autoUpdate = autoUpdate;
 exports.computePosition = computePosition;
 exports.flip = flip;
 exports.offset = offset;
 exports.platform = platform;
 exports.shift = shift;
-exports.size = size;

package/dist/cjs/node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js

@@ -0,0 +1,164 @@
+'use client';
+'use strict';
+
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  // Browsers without `ShadowRoot` support.
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+}
+function isTableElement(element) {
+  return ['table', 'td', 'th'].includes(getNodeName(element));
+}
+function isTopLayer(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+function isLastTraversableNode(node) {
+  return ['html', 'body', '#document'].includes(getNodeName(node));
+}
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+exports.getComputedStyle = getComputedStyle;
+exports.getContainingBlock = getContainingBlock;
+exports.getDocumentElement = getDocumentElement;
+exports.getFrameElement = getFrameElement;
+exports.getNearestOverflowAncestor = getNearestOverflowAncestor;
+exports.getNodeName = getNodeName;
+exports.getNodeScroll = getNodeScroll;
+exports.getOverflowAncestors = getOverflowAncestors;
+exports.getParentNode = getParentNode;
+exports.getWindow = getWindow;
+exports.isContainingBlock = isContainingBlock;
+exports.isElement = isElement;
+exports.isHTMLElement = isHTMLElement;
+exports.isLastTraversableNode = isLastTraversableNode;
+exports.isNode = isNode;
+exports.isOverflowElement = isOverflowElement;
+exports.isShadowRoot = isShadowRoot;
+exports.isTableElement = isTableElement;
+exports.isTopLayer = isTopLayer;
+exports.isWebKit = isWebKit;

package/dist/cjs/node_modules/@floating-ui/dom/node_modules/@floating-ui/utils/dist/floating-ui.utils.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+
+exports.createCoords = createCoords;
+exports.floor = floor;
+exports.max = max;
+exports.min = min;
+exports.round = round;

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

@@ -423,7 +423,8 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
         floating
       },
       middlewareData: {
-        arrow
+        arrow,
+        shift
       }
     },
     width = 14,
@@ -458,6 +459,12 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
   if (!floating) {
     return null;
   }
+  const [side, alignment] = placement.split('-');
+  const isVerticalSide = side === 'top' || side === 'bottom';
+  let computedStaticOffset = staticOffset;
+  if (isVerticalSide && shift != null && shift.x || !isVerticalSide && shift != null && shift.y) {
+    computedStaticOffset = null;
+  }
 
   // Strokes must be double the border width, this ensures the stroke's width
   // works as you'd expect.
@@ -465,16 +472,14 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
   const halfStrokeWidth = computedStrokeWidth / 2;
   const svgX = width / 2 * (tipRadius / -8 + 1);
   const svgY = height / 2 * tipRadius / 4;
-  const [side, alignment] = placement.split('-');
   const isCustomShape = !!d;
-  const isVerticalSide = side === 'top' || side === 'bottom';
-  const yOffsetProp = staticOffset && alignment === 'end' ? 'bottom' : 'top';
-  let xOffsetProp = staticOffset && alignment === 'end' ? 'right' : 'left';
-  if (staticOffset && isRTL) {
+  const yOffsetProp = computedStaticOffset && alignment === 'end' ? 'bottom' : 'top';
+  let xOffsetProp = computedStaticOffset && alignment === 'end' ? 'right' : 'left';
+  if (computedStaticOffset && isRTL) {
     xOffsetProp = alignment === 'end' ? 'left' : 'right';
   }
-  const arrowX = (arrow == null ? void 0 : arrow.x) != null ? staticOffset || arrow.x : '';
-  const arrowY = (arrow == null ? void 0 : arrow.y) != null ? staticOffset || arrow.y : '';
+  const arrowX = (arrow == null ? void 0 : arrow.x) != null ? computedStaticOffset || arrow.x : '';
+  const arrowY = (arrow == null ? void 0 : arrow.y) != null ? computedStaticOffset || arrow.y : '';
   const dValue = d || 'M0,0' + (" H" + width) + (" L" + (width - svgX) + "," + (height - svgY)) + (" Q" + width / 2 + "," + height + " " + svgX + "," + (height - svgY)) + ' Z';
   const rotation = {
     top: isCustomShape ? 'rotate(180deg)' : '',
@@ -789,21 +794,22 @@ function useHover(context, props) {
     var _handleCloseRef$curre;
     if (!enabled) return;
     if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
-      const body = floatingUi_react_utils.getDocument(elements.floating).body;
-      body.setAttribute(safePolygonIdentifier, '');
-      body.style.pointerEvents = 'none';
       performedPointerEventsMutationRef.current = true;
       const floatingEl = elements.floating;
       if (floatingUi_utils_dom$1.isElement(elements.domReference) && floatingEl) {
         var _tree$nodesRef$curren;
+        const body = floatingUi_react_utils.getDocument(elements.floating).body;
+        body.setAttribute(safePolygonIdentifier, '');
         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 = '';
         }
+        body.style.pointerEvents = 'none';
         ref.style.pointerEvents = 'auto';
         floatingEl.style.pointerEvents = 'auto';
         return () => {
+          body.style.pointerEvents = '';
           ref.style.pointerEvents = '';
           floatingEl.style.pointerEvents = '';
         };
@@ -1237,6 +1243,8 @@ function FloatingPortal(props) {
   const afterOutsideRef = React__namespace.useRef(null);
   const beforeInsideRef = React__namespace.useRef(null);
   const afterInsideRef = React__namespace.useRef(null);
+  const modal = focusManagerState == null ? void 0 : focusManagerState.modal;
+  const open = focusManagerState == null ? void 0 : focusManagerState.open;
   const shouldRenderGuards =
   // The FocusManager and therefore floating element are currently open/
   // rendered.
@@ -1248,7 +1256,7 @@ function FloatingPortal(props) {
 
   // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
   React__namespace.useEffect(() => {
-    if (!portalNode || !preserveTabOrder || focusManagerState != null && focusManagerState.modal) {
+    if (!portalNode || !preserveTabOrder || modal) {
       return;
     }
 
@@ -1270,7 +1278,12 @@ function FloatingPortal(props) {
       portalNode.removeEventListener('focusin', onFocus, true);
       portalNode.removeEventListener('focusout', onFocus, true);
     };
-  }, [portalNode, preserveTabOrder, focusManagerState == null ? void 0 : focusManagerState.modal]);
+  }, [portalNode, preserveTabOrder, modal]);
+  React__namespace.useEffect(() => {
+    if (!portalNode) return;
+    if (open) return;
+    enableFocusInside(portalNode);
+  }, [open, portalNode]);
   return /*#__PURE__*/React__namespace.createElement(PortalContext.Provider, {
     value: React__namespace.useMemo(() => ({
       preserveTabOrder,
@@ -1306,13 +1319,25 @@ function FloatingPortal(props) {
       } else {
         const nextTabbable = getNextTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
         nextTabbable == null || nextTabbable.focus();
-        (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent));
+        (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent, 'focus-out'));
       }
     }
   }));
 }
 const usePortalContext = () => React__namespace.useContext(PortalContext);
 
+const FOCUSABLE_ATTRIBUTE = 'data-floating-ui-focusable';
+function getFloatingFocusElement(floatingElement) {
+  if (!floatingElement) {
+    return null;
+  }
+  // Try to find the element that has `{...getFloatingProps()}` spread on it.
+  // This indicates the floating element is acting as a positioning wrapper, and
+  // so focus should be managed on the child element with the event handlers and
+  // aria props.
+  return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector("[" + FOCUSABLE_ATTRIBUTE + "]") || floatingElement;
+}
+
 const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function addPreviouslyFocusedElement(element) {
@@ -1393,13 +1418,10 @@ function FloatingFocusManager(props) {
   const isPointerDownRef = React__namespace.useRef(false);
   const tabbableIndexRef = React__namespace.useRef(-1);
   const isInsidePortal = portalContext != null;
-  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 floatingFocusElement = getFloatingFocusElement(floating);
   const getTabbableContent = useEffectEvent(function (container) {
     if (container === void 0) {
-      container = floatingFocusNode;
+      container = floatingFocusElement;
     }
     return container ? index_esm.tabbable(container, getTabbableOptions()) : [];
   });
@@ -1409,19 +1431,22 @@ function FloatingFocusManager(props) {
       if (domReference && type === 'reference') {
         return domReference;
       }
-      if (floatingFocusNode && type === 'floating') {
-        return floatingFocusNode;
+      if (floatingFocusElement && type === 'floating') {
+        return floatingFocusElement;
       }
       return content;
     }).filter(Boolean).flat();
   });
+  React__namespace.useEffect(() => {
+    preventReturnFocusRef.current = false;
+  }, [disabled]);
   React__namespace.useEffect(() => {
     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 (floatingUi_react_utils.contains(floatingFocusNode, floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floatingFocusNode))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+        if (floatingUi_react_utils.contains(floatingFocusElement, floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
           floatingUi_react_utils.stopEvent(event);
         }
         const els = getTabbableElements();
@@ -1434,18 +1459,18 @@ function FloatingFocusManager(props) {
             enqueueFocus(els[1]);
           }
         }
-        if (orderRef.current[1] === 'floating' && target === floatingFocusNode && event.shiftKey) {
+        if (orderRef.current[1] === 'floating' && target === floatingFocusElement && event.shiftKey) {
           floatingUi_react_utils.stopEvent(event);
           enqueueFocus(els[0]);
         }
       }
     }
-    const doc = floatingUi_react_utils.getDocument(floatingFocusNode);
+    const doc = floatingUi_react_utils.getDocument(floatingFocusElement);
     doc.addEventListener('keydown', onKeyDown);
     return () => {
       doc.removeEventListener('keydown', onKeyDown);
     };
-  }, [disabled, domReference, floatingFocusNode, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
   React__namespace.useEffect(() => {
     if (disabled) return;
     if (!floating) return;
@@ -1486,15 +1511,15 @@ function FloatingFocusManager(props) {
 
         // Restore focus to the previous tabbable element index to prevent
         // focus from being lost outside the floating tree.
-        if (restoreFocus && movedToUnrelatedNode && floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floatingFocusNode)) === floatingUi_react_utils.getDocument(floatingFocusNode).body) {
+        if (restoreFocus && movedToUnrelatedNode && floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floatingFocusElement)) === floatingUi_react_utils.getDocument(floatingFocusElement).body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
-          if (floatingUi_utils_dom$1.isHTMLElement(floatingFocusNode)) {
-            floatingFocusNode == null || floatingFocusNode.focus();
+          if (floatingUi_utils_dom$1.isHTMLElement(floatingFocusElement)) {
+            floatingFocusElement.focus();
           }
           const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
-          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusNode;
+          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
           if (floatingUi_utils_dom$1.isHTMLElement(nodeToFocus)) {
             nodeToFocus.focus();
           }
@@ -1506,7 +1531,7 @@ function FloatingFocusManager(props) {
         // Fix React 18 Strict Mode returnFocus due to double rendering.
         relatedTarget !== getPreviouslyFocusedElement()) {
           preventReturnFocusRef.current = true;
-          onOpenChange(false, event);
+          onOpenChange(false, event, 'focus-out');
         }
       });
     }
@@ -1520,7 +1545,7 @@ function FloatingFocusManager(props) {
         floating.removeEventListener('focusout', handleFocusOutside);
       };
     }
-  }, [disabled, domReference, floating, floatingFocusNode, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox]);
+  }, [disabled, domReference, floating, floatingFocusElement, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox]);
   React__namespace.useEffect(() => {
     var _portalContext$portal;
     if (disabled) return;
@@ -1536,27 +1561,27 @@ function FloatingFocusManager(props) {
     }
   }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
   index(() => {
-    if (disabled || !floatingUi_utils_dom$1.isHTMLElement(floatingFocusNode)) return;
-    const doc = floatingUi_react_utils.getDocument(floatingFocusNode);
+    if (disabled || !floatingUi_utils_dom$1.isHTMLElement(floatingFocusElement)) return;
+    const doc = floatingUi_react_utils.getDocument(floatingFocusElement);
     const previouslyFocusedElement = floatingUi_react_utils.activeElement(doc);
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floatingFocusNode);
+      const focusableElements = getTabbableElements(floatingFocusElement);
       const initialFocusValue = initialFocusRef.current;
-      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusNode;
-      const focusAlreadyInsideFloatingEl = floatingUi_react_utils.contains(floatingFocusNode, previouslyFocusedElement);
+      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusElement;
+      const focusAlreadyInsideFloatingEl = floatingUi_react_utils.contains(floatingFocusElement, previouslyFocusedElement);
       if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
         enqueueFocus(elToFocus, {
-          preventScroll: elToFocus === floatingFocusNode
+          preventScroll: elToFocus === floatingFocusElement
         });
       }
     });
-  }, [disabled, open, floatingFocusNode, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
   index(() => {
-    if (disabled || !floatingFocusNode) return;
+    if (disabled || !floatingFocusElement) return;
     let preventReturnFocusScroll = false;
-    const doc = floatingUi_react_utils.getDocument(floatingFocusNode);
+    const doc = floatingUi_react_utils.getDocument(floatingFocusElement);
     const previouslyFocusedElement = floatingUi_react_utils.activeElement(doc);
     const contextData = dataRef.current;
     let openEvent = contextData.openEvent;
@@ -1624,7 +1649,7 @@ function FloatingFocusManager(props) {
         }
       });
     };
-  }, [disabled, floating, floatingFocusNode, returnFocusRef, dataRef, refs, events, tree, nodeId]);
+  }, [disabled, floating, floatingFocusElement, 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.
@@ -1644,11 +1669,11 @@ function FloatingFocusManager(props) {
   }, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
   index(() => {
     if (disabled) return;
-    if (!floatingFocusNode) return;
+    if (!floatingFocusElement) return;
     if (typeof MutationObserver !== 'function') return;
     if (ignoreInitialFocus) return;
     const handleMutation = () => {
-      const tabIndex = floatingFocusNode.getAttribute('tabindex');
+      const tabIndex = floatingFocusElement.getAttribute('tabindex');
       const tabbableContent = getTabbableContent();
       const activeEl = floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(floating));
       const tabbableIndex = tabbableContent.indexOf(activeEl);
@@ -1657,15 +1682,15 @@ function FloatingFocusManager(props) {
       }
       if (orderRef.current.includes('floating') || activeEl !== refs.domReference.current && tabbableContent.length === 0) {
         if (tabIndex !== '0') {
-          floatingFocusNode.setAttribute('tabindex', '0');
+          floatingFocusElement.setAttribute('tabindex', '0');
         }
       } else if (tabIndex !== '-1') {
-        floatingFocusNode.setAttribute('tabindex', '-1');
+        floatingFocusElement.setAttribute('tabindex', '-1');
       }
     };
     handleMutation();
     const observer = new MutationObserver(handleMutation);
-    observer.observe(floatingFocusNode, {
+    observer.observe(floatingFocusElement, {
       childList: true,
       subtree: true,
       attributes: true
@@ -1673,7 +1698,7 @@ function FloatingFocusManager(props) {
     return () => {
       observer.disconnect();
     };
-  }, [disabled, floating, floatingFocusNode, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
+  }, [disabled, floating, floatingFocusElement, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
   function renderDismissButton(location) {
     if (disabled || !visuallyHiddenDismiss || !modal) {
       return null;
@@ -2376,7 +2401,8 @@ function mergeProps(userProps, propsList, elementKey) {
   }
   return {
     ...(elementKey === 'floating' && {
-      tabIndex: -1
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ''
     }),
     ...domUserProps,
     ...propsList.map(value => {
@@ -2523,6 +2549,8 @@ function useListNavigation(context, props) {
       warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
+  const floatingFocusElement = getFloatingFocusElement(elements.floating);
+  const floatingFocusElementRef = useLatestRef(floatingFocusElement);
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();
   const onNavigate = useEffectEvent(unstable_onNavigate);
@@ -2538,7 +2566,6 @@ function useListNavigation(context, props) {
   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__namespace.useState();
   const [virtualId, setVirtualId] = React__namespace.useState();
@@ -2754,7 +2781,7 @@ function useListNavigation(context, props) {
           focusItem(listRef, indexRef);
           onNavigate(null);
           if (!virtual) {
-            enqueueFocus(floatingRef.current, {
+            enqueueFocus(floatingFocusElementRef.current, {
               preventScroll: true
             });
           }
@@ -2762,7 +2789,7 @@ function useListNavigation(context, props) {
       })
     };
     return props;
-  }, [open, floatingRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
+  }, [open, floatingFocusElementRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
   const commonOnKeyDown = useEffectEvent(event => {
     isPointerModalityRef.current = false;
     forceSyncFocus.current = true;
@@ -2770,7 +2797,7 @@ function useListNavigation(context, props) {
     // 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) {
+    if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
       return;
     }
     if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
@@ -2809,7 +2836,7 @@ function useListNavigation(context, props) {
       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({
+      const index = cellMap[getGridNavigatedIndex({
         current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
       }, {
         event,
@@ -2827,9 +2854,11 @@ function useListNavigation(context, props) {
         // 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 (index != null) {
+        indexRef.current = index;
+        onNavigate(indexRef.current);
+      }
       if (orientation === 'both') {
         return;
       }

package/dist/cjs/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var floatingUi_dom = require('../../dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var React = require('react');
 var ReactDOM = require('react-dom');