@digdir/designsystemet-react 0.59.0 → 0.59.1-alpha.1

package/dist/esm/{node_modules → packages/react/node_modules}/@floating-ui/react/dist/floating-ui.react.js

@@ -1,20 +1,19 @@
 'use client';
 import * as React from 'react';
 import { useLayoutEffect, useEffect, useRef } from 'react';
-import { getDocument, isTypeableCombobox, activeElement, contains, isVirtualClick, isVirtualPointerEvent, isMouseLikePointerType, getTarget, isSafari, isMac, isTypeableElement, stopEvent, isReactEvent, isRootElement, isEventTargetWithin } from '../utils/dist/floating-ui.react.utils.js';
-import { floor } from '../node_modules/@floating-ui/utils/dist/floating-ui.utils.js';
+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 '../../../../../../node_modules/@floating-ui/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, getWindow, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } from '../node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js';
-import { tabbable } from '../../../tabbable/dist/index.esm.js';
+import { isElement, isHTMLElement, getOverflowAncestors, getWindow, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } 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 } from '../../dom/dist/floating-ui.dom.js';
-import { getOverflowAncestors } from '../../utils/dom/dist/floating-ui.utils.dom.js';
+export { autoUpdate, computePosition, flip, shift, size } from '../../dom/dist/floating-ui.dom.js';
 
 /**
  * Merges an array of refs into a single memoized callback ref or `null`.
- * @see https://floating-ui.com/docs/useMergeRefs
+ * @see https://floating-ui.com/docs/react-utils#usemergerefs
  */
 function useMergeRefs(refs) {
   return React.useMemo(() => {
@@ -34,8 +33,12 @@ function useMergeRefs(refs) {
   }, refs);
 }
 
-// `toString()` prevents bundlers from trying to `import { useInsertionEffect } from 'react'`
-const useInsertionEffect = React[/*#__PURE__*/'useInsertionEffect'.toString()];
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const SafeReact = {
+  ...React
+};
+
+const useInsertionEffect = SafeReact.useInsertionEffect;
 const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
 function useEffectEvent(callback) {
   const ref = React.useRef(() => {
@@ -223,6 +226,67 @@ function getGridNavigatedIndex(elementsRef, _ref) {
   return nextIndex;
 }
 
+/** For each cell index, gets the item index that occupies that cell */
+function buildCellMap(sizes, cols, dense) {
+  const cellMap = [];
+  let startIndex = 0;
+  sizes.forEach((_ref2, index) => {
+    let {
+      width,
+      height
+    } = _ref2;
+    if (width > cols) {
+      if (process.env.NODE_ENV !== "production") {
+        throw new Error("[Floating UI]: Invalid grid - item width at index " + index + " is greater than grid columns");
+      }
+    }
+    let itemPlaced = false;
+    if (dense) {
+      startIndex = 0;
+    }
+    while (!itemPlaced) {
+      const targetCells = [];
+      for (let i = 0; i < width; i++) {
+        for (let j = 0; j < height; j++) {
+          targetCells.push(startIndex + i + j * cols);
+        }
+      }
+      if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
+        targetCells.forEach(cell => {
+          cellMap[cell] = index;
+        });
+        itemPlaced = true;
+      } else {
+        startIndex++;
+      }
+    }
+  });
+
+  // convert into a non-sparse array
+  return [...cellMap];
+}
+
+/** Gets cell index of an item's corner or -1 when index is -1. */
+function getCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
+  if (index === -1) return -1;
+  const firstCellIndex = cellMap.indexOf(index);
+  switch (corner) {
+    case 'tl':
+      return firstCellIndex;
+    case 'tr':
+      return firstCellIndex + sizes[index].width - 1;
+    case 'bl':
+      return firstCellIndex + (sizes[index].height - 1) * cols;
+    case 'br':
+      return cellMap.lastIndexOf(index);
+  }
+}
+
+/** Gets all cell indices that correspond to the specified indices */
+function getCellIndices(indices, cellMap) {
+  return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
+}
+
 let rafId = 0;
 function enqueueFocus(el, options) {
   if (options === void 0) {
@@ -263,7 +327,9 @@ function _extends() {
 
 let serverHandoffComplete = false;
 let count = 0;
-const genId = () => "floating-ui-" + count++;
+const genId = () => // Ensure the id is unique with multiple independent versions of Floating UI
+// on <React 18
+"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++;
 function useFloatingId() {
   const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : undefined);
   index(() => {
@@ -273,30 +339,55 @@ function useFloatingId() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React.useEffect(() => {
-    if (!serverHandoffComplete) {
-      serverHandoffComplete = true;
-    }
+    serverHandoffComplete = true;
   }, []);
   return id;
 }
-
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useReactId = React[/*#__PURE__*/'useId'.toString()];
+const useReactId = SafeReact.useId;
 
 /**
  * Uses React 18's built-in `useId()` when available, or falls back to a
  * slightly less performant (requiring a double render) implementation for
  * earlier React versions.
- * @see https://floating-ui.com/docs/useId
+ * @see https://floating-ui.com/docs/react-utils#useid
  */
 const useId = useReactId || useFloatingId;
 
+let devMessageSet;
+if (process.env.NODE_ENV !== "production") {
+  devMessageSet = /*#__PURE__*/new Set();
+}
+function warn() {
+  var _devMessageSet;
+  for (var _len = arguments.length, messages = new Array(_len), _key = 0; _key < _len; _key++) {
+    messages[_key] = arguments[_key];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(message))) {
+    var _devMessageSet2;
+    (_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(message);
+    console.warn(message);
+  }
+}
+function error() {
+  var _devMessageSet3;
+  for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    messages[_key2] = arguments[_key2];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
+    var _devMessageSet4;
+    (_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
+    console.error(message);
+  }
+}
+
 /**
  * Renders a pointing arrow triangle.
  * @see https://floating-ui.com/docs/FloatingArrow
  */
-const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(_ref, ref) {
-  let {
+const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props, ref) {
+  const {
     context: {
       placement,
       elements: {
@@ -318,10 +409,10 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(_ref,
       ...restStyle
     } = {},
     ...rest
-  } = _ref;
+  } = props;
   if (process.env.NODE_ENV !== "production") {
     if (!ref) {
-      console.warn('Floating UI: The `ref` prop is required for the `FloatingArrow`', 'component.');
+      warn('The `ref` prop is required for `FloatingArrow`.');
     }
   }
   const clipPathId = useId();
@@ -331,8 +422,8 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(_ref,
 
   // Strokes must be double the border width, this ensures the stroke's width
   // works as you'd expect.
-  strokeWidth *= 2;
-  const halfStrokeWidth = strokeWidth / 2;
+  const computedStrokeWidth = strokeWidth * 2;
+  const halfStrokeWidth = computedStrokeWidth / 2;
   const svgX = width / 2 * (tipRadius / -8 + 1);
   const svgY = height / 2 * tipRadius / 4;
   const [side, alignment] = placement.split('-');
@@ -356,7 +447,7 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(_ref,
   return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     "aria-hidden": true,
     ref: ref,
-    width: isCustomShape ? width : width + strokeWidth,
+    width: isCustomShape ? width : width + computedStrokeWidth,
     height: width,
     viewBox: "0 0 " + width + " " + (height > width ? height : width),
     style: {
@@ -364,27 +455,27 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(_ref,
       pointerEvents: 'none',
       [xOffsetProp]: arrowX,
       [yOffsetProp]: arrowY,
-      [side]: isVerticalSide || isCustomShape ? '100%' : "calc(100% - " + strokeWidth / 2 + "px)",
+      [side]: isVerticalSide || isCustomShape ? '100%' : "calc(100% - " + computedStrokeWidth / 2 + "px)",
       transform: "" + rotation + (transform != null ? transform : ''),
       ...restStyle
     }
-  }), strokeWidth > 0 && /*#__PURE__*/React.createElement("path", {
+  }), computedStrokeWidth > 0 && /*#__PURE__*/React.createElement("path", {
     clipPath: "url(#" + clipPathId + ")",
     fill: "none",
     stroke: stroke
     // Account for the stroke on the fill path rendered below.
     ,
-    strokeWidth: strokeWidth + (d ? 0 : 1),
+    strokeWidth: computedStrokeWidth + (d ? 0 : 1),
     d: dValue
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: strokeWidth && !d ? rest.fill : 'none',
+    stroke: computedStrokeWidth && !d ? rest.fill : 'none',
     d: dValue
   }), /*#__PURE__*/React.createElement("clipPath", {
     id: clipPathId
   }, /*#__PURE__*/React.createElement("rect", {
     x: -halfStrokeWidth,
     y: halfStrokeWidth * (isCustomShape ? -1 : 1),
-    width: width + strokeWidth,
+    width: width + computedStrokeWidth,
     height: width
   })));
 });
@@ -408,10 +499,19 @@ function createPubSub() {
 
 const FloatingNodeContext = /*#__PURE__*/React.createContext(null);
 const FloatingTreeContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
 const useFloatingParentNodeId = () => {
   var _React$useContext;
   return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
 };
+
+/**
+ * Returns the nearest floating tree context, if available.
+ */
 const useFloatingTree = () => React.useContext(FloatingTreeContext);
 
 function createAttribute(name) {
@@ -516,7 +616,7 @@ function useHover(context, props) {
     return () => {
       html.removeEventListener('mouseleave', onLeave);
     };
-  }, [floating, open, onOpenChange, enabled, handleCloseRef, dataRef, isHoverOpen]);
+  }, [floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
   const closeWithDelay = React.useCallback(function (event, runElseBranch, reason) {
     if (runElseBranch === void 0) {
       runElseBranch = true;
@@ -678,7 +778,7 @@ function useHover(context, props) {
         };
       }
     }
-  }, [enabled, open, parentId, floating, domReference, tree, handleCloseRef, dataRef, isHoverOpen]);
+  }, [enabled, open, parentId, floating, domReference, tree, handleCloseRef, isHoverOpen]);
   index(() => {
     if (!open) {
       pointerTypeRef.current = undefined;
@@ -706,15 +806,23 @@ function useHover(context, props) {
         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);
-          restTimeoutRef.current = setTimeout(() => {
-            if (!blockMouseMoveRef.current) {
-              onOpenChange(true, event.nativeEvent, 'hover');
-            }
-          }, restMs);
+          if (pointerTypeRef.current === 'touch') {
+            handleMouseMove();
+          } else {
+            restTimeoutRef.current = setTimeout(handleMouseMove, restMs);
+          }
         }
       },
       floating: {
@@ -726,7 +834,7 @@ function useHover(context, props) {
         }
       }
     };
-  }, [enabled, restMs, open, onOpenChange, closeWithDelay]);
+  }, [enabled, mouseOnly, open, restMs, onOpenChange, closeWithDelay]);
 }
 
 function getAncestors(nodes, id) {
@@ -981,75 +1089,81 @@ const FocusGuard = /*#__PURE__*/React.forwardRef(function FocusGuard(props, ref)
 });
 
 const PortalContext = /*#__PURE__*/React.createContext(null);
-function useFloatingPortalNode(_temp) {
-  let {
+const attr = /*#__PURE__*/createAttribute('portal');
+
+/**
+ * @see https://floating-ui.com/docs/FloatingPortal#usefloatingportalnode
+ */
+function useFloatingPortalNode(props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
     id,
     root
-  } = _temp === void 0 ? {} : _temp;
-  const [portalNode, setPortalNode] = React.useState(null);
+  } = props;
   const uniqueId = useId();
   const portalContext = usePortalContext();
-  const data = React.useMemo(() => ({
-    id,
-    root,
-    portalContext,
-    uniqueId
-  }), [id, root, portalContext, uniqueId]);
-  const dataRef = React.useRef();
+  const [portalNode, setPortalNode] = React.useState(null);
+  const portalNodeRef = React.useRef(null);
   index(() => {
     return () => {
       portalNode == null || portalNode.remove();
+      // Allow the subsequent layout effects to create a new node on updates.
+      // The portal node will still be cleaned up on unmount.
+      // https://github.com/floating-ui/floating-ui/issues/2454
+      queueMicrotask(() => {
+        portalNodeRef.current = null;
+      });
     };
-  }, [portalNode, data]);
+  }, [portalNode]);
   index(() => {
-    if (dataRef.current === data) return;
-    dataRef.current = data;
-    const {
-      id,
-      root,
-      portalContext,
-      uniqueId
-    } = data;
+    if (portalNodeRef.current) return;
     const existingIdRoot = id ? document.getElementById(id) : null;
-    const attr = createAttribute('portal');
-    if (existingIdRoot) {
-      const subRoot = document.createElement('div');
-      subRoot.id = uniqueId;
-      subRoot.setAttribute(attr, '');
-      existingIdRoot.appendChild(subRoot);
-      setPortalNode(subRoot);
-    } else {
-      let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
-      if (container && !isElement(container)) container = container.current;
-      container = container || document.body;
-      let idWrapper = null;
-      if (id) {
-        idWrapper = document.createElement('div');
-        idWrapper.id = id;
-        container.appendChild(idWrapper);
-      }
-      const subRoot = document.createElement('div');
-      subRoot.id = uniqueId;
-      subRoot.setAttribute(attr, '');
-      container = idWrapper || container;
-      container.appendChild(subRoot);
-      setPortalNode(subRoot);
-    }
-  }, [data]);
+    if (!existingIdRoot) return;
+    const subRoot = document.createElement('div');
+    subRoot.id = uniqueId;
+    subRoot.setAttribute(attr, '');
+    existingIdRoot.appendChild(subRoot);
+    portalNodeRef.current = subRoot;
+    setPortalNode(subRoot);
+  }, [id, uniqueId]);
+  index(() => {
+    if (portalNodeRef.current) return;
+    let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
+    if (container && !isElement(container)) container = container.current;
+    container = container || document.body;
+    let idWrapper = null;
+    if (id) {
+      idWrapper = document.createElement('div');
+      idWrapper.id = id;
+      container.appendChild(idWrapper);
+    }
+    const subRoot = document.createElement('div');
+    subRoot.id = uniqueId;
+    subRoot.setAttribute(attr, '');
+    container = idWrapper || container;
+    container.appendChild(subRoot);
+    portalNodeRef.current = subRoot;
+    setPortalNode(subRoot);
+  }, [id, root, uniqueId, portalContext]);
   return portalNode;
 }
 /**
  * Portals the floating element into a given container element — by default,
  * outside of the app root and into the body.
+ * This is necessary to ensure the floating element can appear outside any
+ * potential parent containers that cause clipping (such as `overflow: hidden`),
+ * while retaining its location in the React tree.
  * @see https://floating-ui.com/docs/FloatingPortal
  */
-function FloatingPortal(_ref) {
-  let {
+function FloatingPortal(props) {
+  const {
     children,
     id,
     root = null,
     preserveTabOrder = true
-  } = _ref;
+  } = props;
   const portalNode = useFloatingPortalNode({
     id,
     root
@@ -1139,11 +1253,16 @@ const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function addPreviouslyFocusedElement(element) {
   previouslyFocusedElements = previouslyFocusedElements.filter(el => el.isConnected);
-  if (element && getNodeName(element) !== 'body') {
-    previouslyFocusedElements.push(element);
-    if (previouslyFocusedElements.length > LIST_LIMIT) {
-      previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
-    }
+  let tabbableEl = element;
+  if (!tabbableEl || getNodeName(tabbableEl) === 'body') return;
+  if (!isTabbable(tabbableEl, getTabbableOptions())) {
+    const tabbableChild = tabbable(tabbableEl, getTabbableOptions())[0];
+    if (!tabbableChild) return;
+    tabbableEl = tabbableChild;
+  }
+  previouslyFocusedElements.push(tabbableEl);
+  if (previouslyFocusedElements.length > LIST_LIMIT) {
+    previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
   }
 }
 function getPreviouslyFocusedElement() {
@@ -1253,7 +1372,7 @@ function FloatingFocusManager(props) {
     return () => {
       doc.removeEventListener('keydown', onKeyDown);
     };
-  }, [disabled, domReference, floating, modal, orderRef, refs, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+  }, [disabled, domReference, floating, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
   React.useEffect(() => {
     if (disabled || !closeOnFocusOut) return;
 
@@ -1710,9 +1829,8 @@ function useDismiss(context, props) {
       const nextParent = getParentNode(targetRootAncestor);
       if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
         break;
-      } else {
-        targetRootAncestor = nextParent;
       }
+      targetRootAncestor = nextParent;
     }
 
     // Check if the click occurred on a third-party element injected after the
@@ -1855,17 +1973,12 @@ function useDismiss(context, props) {
   }, [enabled, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);
 }
 
-let devMessageSet;
-if (process.env.NODE_ENV !== "production") {
-  devMessageSet = /*#__PURE__*/new Set();
-}
-
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/useFloating
  */
 function useFloating(options) {
-  var _options$elements2;
+  var _options$elements;
   if (options === void 0) {
     options = {};
   }
@@ -1874,27 +1987,33 @@ function useFloating(options) {
     onOpenChange: unstable_onOpenChange,
     nodeId
   } = options;
+  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 domReference = optionDomReference || _domReference;
   if (process.env.NODE_ENV !== "production") {
-    var _options$elements;
-    const err = 'Floating UI: Cannot pass a virtual element to the ' + '`elements.reference` option, as it must be a real DOM element. ' + 'Use `refs.setPositionReference` instead.';
-    if ((_options$elements = options.elements) != null && _options$elements.reference && !isElement(options.elements.reference)) {
-      var _devMessageSet;
-      if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(err))) {
-        var _devMessageSet2;
-        (_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(err);
-        console.error(err);
-      }
+    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 [_domReference, setDomReference] = React.useState(null);
-  const domReference = ((_options$elements2 = options.elements) == null ? void 0 : _options$elements2.reference) || _domReference;
-  const position = useFloating$1(options);
+  index(() => {
+    if (domReference) {
+      domReferenceRef.current = domReference;
+    }
+  }, [domReference]);
+  const position = useFloating$1({
+    ...options,
+    elements: {
+      ...options.elements,
+      ...(positionReference && {
+        reference: positionReference
+      })
+    }
+  });
   const tree = useFloatingTree();
   const nested = useFloatingParentNodeId() != null;
   const onOpenChange = useEffectEvent((open, event, reason) => {
-    if (open) {
-      dataRef.current.openEvent = event;
-    }
+    dataRef.current.openEvent = open ? event : undefined;
     events.emit('openchange', {
       open,
       event,
@@ -1908,11 +2027,14 @@ function useFloating(options) {
   const events = React.useState(() => createPubSub())[0];
   const floatingId = useId();
   const setPositionReference = React.useCallback(node => {
-    const positionReference = isElement(node) ? {
+    const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       contextElement: node
     } : node;
-    position.refs.setReference(positionReference);
+    // Store the positionReference in state if the DOM reference is specified externally via the
+    // `elements.reference` option. This ensures that it won't be overridden on future renders.
+    _setPositionReference(computedPositionReference);
+    position.refs.setReference(computedPositionReference);
   }, [position.refs]);
   const setReference = React.useCallback(node => {
     if (isElement(node) || node === null) {
@@ -1980,7 +2102,6 @@ function useFocus(context, props) {
     events,
     refs,
     elements: {
-      floating,
       domReference
     }
   } = context;
@@ -2014,7 +2135,7 @@ function useFocus(context, props) {
       win.removeEventListener('blur', onBlur);
       win.removeEventListener('keydown', onKeyDown, true);
     };
-  }, [floating, domReference, open, enabled]);
+  }, [domReference, open, enabled]);
   React.useEffect(() => {
     if (!enabled) {
       return;
@@ -2087,7 +2208,11 @@ function useFocus(context, props) {
             // 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"`.
-            if (contains(refs.floating.current, relatedTarget) || contains(domReference, relatedTarget) || movedToFocusGuard) {
+            // 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');
@@ -2105,7 +2230,6 @@ function mergeProps(userProps, propsList, elementKey) {
   const isItem = elementKey === 'item';
   let domUserProps = userProps;
   if (isItem && userProps) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       [ACTIVE_KEY]: _,
       [SELECTED_KEY]: __,
@@ -2209,7 +2333,7 @@ function isMainOrientationKey(key, orientation) {
 function isMainOrientationToEndKey(key, orientation, rtl) {
   const vertical = key === ARROW_DOWN;
   const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
-  return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key == ' ' || key === '';
+  return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === '';
 }
 function isCrossOrientationOpenKey(key, orientation, rtl) {
   const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
@@ -2254,19 +2378,21 @@ function useListNavigation(context, props) {
     orientation = 'vertical',
     cols = 1,
     scrollItemIntoView = true,
-    virtualItemRef
+    virtualItemRef,
+    itemSizes,
+    dense = false
   } = props;
   if (process.env.NODE_ENV !== "production") {
     if (allowEscape) {
       if (!loop) {
-        console.warn(['Floating UI: `useListNavigation` looping must be enabled to allow', 'escaping.'].join(' '));
+        warn('`useListNavigation` looping must be enabled to allow escaping.');
       }
       if (!virtual) {
-        console.warn(['Floating UI: `useListNavigation` must be virtual to allow', 'escaping.'].join(' '));
+        warn('`useListNavigation` must be virtual to allow escaping.');
       }
     }
     if (orientation === 'vertical' && cols > 1) {
-      console.warn(['Floating UI: In grid list navigation mode (`cols` > 1), the', '`orientation` should be either "horizontal" or "both".'].join(' '));
+      warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
   const parentId = useFloatingParentNodeId();
@@ -2344,6 +2470,7 @@ function useListNavigation(context, props) {
         // Regardless of the pointer modality, we want to ensure the selected
         // item comes into view when the floating element is opened.
         forceScrollIntoViewRef.current = true;
+        indexRef.current = selectedIndex;
         onNavigate(selectedIndex);
       }
     } else if (previousMountedRef.current) {
@@ -2533,17 +2660,38 @@ function useListNavigation(context, props) {
 
       // Grid navigation.
       if (cols > 1) {
-        indexRef.current = getGridNavigatedIndex(listRef, {
+        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,
-          disabledIndices,
-          minIndex,
-          maxIndex,
-          prevIndex: indexRef.current,
+          // 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
+
         onNavigate(indexRef.current);
         if (orientation === 'both') {
           return;
@@ -2702,7 +2850,7 @@ function useListNavigation(context, props) {
       },
       item
     };
-  }, [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]);
+  }, [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]);
 }
 
 const componentRoleToAriaRoleMap = /*#__PURE__*/new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
@@ -2871,10 +3019,9 @@ function useTransitionStatus(context, props) {
       return () => {
         cancelAnimationFrame(frame);
       };
-    } else {
-      setInitiated(true);
-      setStatus('close');
     }
+    setInitiated(true);
+    setStatus('close');
   }, [open, floating]);
   return {
     isMounted,