@digdir/designsystemet-react 0.58.0 → 0.59.1-alpha.0

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

@@ -2,14 +2,13 @@
 'use strict';
 
 var React = require('react');
-var floatingUi_react_utils = require('../utils/dist/floating-ui.react.utils.js');
-var floatingUi_utils = require('../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
+var floatingUi_react_utils = require('./floating-ui.react.utils.js');
+var floatingUi_utils = require('../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
 var floatingUi_reactDom = require('../../react-dom/dist/floating-ui.react-dom.js');
-var floatingUi_utils_dom$1 = require('../node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js');
+var floatingUi_utils_dom = require('../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js');
 var index_esm = require('../../../tabbable/dist/index.esm.js');
 var ReactDOM = require('react-dom');
 var floatingUi_dom = require('../../dom/dist/floating-ui.dom.js');
-var floatingUi_utils_dom = require('../../utils/dom/dist/floating-ui.utils.dom.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -32,7 +31,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /**
  * 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__namespace.useMemo(() => {
@@ -52,8 +51,12 @@ function useMergeRefs(refs) {
   }, refs);
 }
 
-// `toString()` prevents bundlers from trying to `import { useInsertionEffect } from 'react'`
-const useInsertionEffect = React__namespace[/*#__PURE__*/'useInsertionEffect'.toString()];
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const SafeReact = {
+  ...React__namespace
+};
+
+const useInsertionEffect = SafeReact.useInsertionEffect;
 const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
 function useEffectEvent(callback) {
   const ref = React__namespace.useRef(() => {
@@ -241,6 +244,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) {
@@ -281,7 +345,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__namespace.useState(() => serverHandoffComplete ? genId() : undefined);
   index(() => {
@@ -291,30 +357,55 @@ function useFloatingId() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   React__namespace.useEffect(() => {
-    if (!serverHandoffComplete) {
-      serverHandoffComplete = true;
-    }
+    serverHandoffComplete = true;
   }, []);
   return id;
 }
-
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const useReactId = React__namespace[/*#__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__namespace.forwardRef(function FloatingArrow(_ref, ref) {
-  let {
+const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function FloatingArrow(props, ref) {
+  const {
     context: {
       placement,
       elements: {
@@ -336,10 +427,10 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
       ...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();
@@ -349,8 +440,8 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
 
   // 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('-');
@@ -374,7 +465,7 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
   return /*#__PURE__*/React__namespace.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: {
@@ -382,27 +473,27 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
       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__namespace.createElement("path", {
+  }), computedStrokeWidth > 0 && /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
-    stroke: strokeWidth && !d ? rest.fill : 'none',
+    stroke: computedStrokeWidth && !d ? rest.fill : 'none',
     d: dValue
   }), /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: clipPathId
   }, /*#__PURE__*/React__namespace.createElement("rect", {
     x: -halfStrokeWidth,
     y: halfStrokeWidth * (isCustomShape ? -1 : 1),
-    width: width + strokeWidth,
+    width: width + computedStrokeWidth,
     height: width
   })));
 });
@@ -426,10 +517,19 @@ function createPubSub() {
 
 const FloatingNodeContext = /*#__PURE__*/React__namespace.createContext(null);
 const FloatingTreeContext = /*#__PURE__*/React__namespace.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__namespace.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
 };
+
+/**
+ * Returns the nearest floating tree context, if available.
+ */
 const useFloatingTree = () => React__namespace.useContext(FloatingTreeContext);
 
 function createAttribute(name) {
@@ -534,7 +634,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__namespace.useCallback(function (event, runElseBranch, reason) {
     if (runElseBranch === void 0) {
       runElseBranch = true;
@@ -648,7 +748,7 @@ function useHover(context, props) {
         }
       })(event);
     }
-    if (floatingUi_utils_dom$1.isElement(domReference)) {
+    if (floatingUi_utils_dom.isElement(domReference)) {
       const ref = domReference;
       open && ref.addEventListener('mouseleave', onScrollMouseLeave);
       floating == null || floating.addEventListener('mouseleave', onScrollMouseLeave);
@@ -681,7 +781,7 @@ function useHover(context, props) {
       body.setAttribute(safePolygonIdentifier, '');
       body.style.pointerEvents = 'none';
       performedPointerEventsMutationRef.current = true;
-      if (floatingUi_utils_dom$1.isElement(domReference) && floating) {
+      if (floatingUi_utils_dom.isElement(domReference) && floating) {
         var _tree$nodesRef$curren;
         const ref = 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;
@@ -696,7 +796,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;
@@ -724,15 +824,23 @@ function useHover(context, props) {
         onPointerDown: setPointerRef,
         onPointerEnter: setPointerRef,
         onMouseMove(event) {
+          function handleMouseMove() {
+            if (!blockMouseMoveRef.current) {
+              onOpenChange(true, event.nativeEvent, 'hover');
+            }
+          }
+          if (mouseOnly && !floatingUi_react_utils.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: {
@@ -744,7 +852,7 @@ function useHover(context, props) {
         }
       }
     };
-  }, [enabled, restMs, open, onOpenChange, closeWithDelay]);
+  }, [enabled, mouseOnly, open, restMs, onOpenChange, closeWithDelay]);
 }
 
 function getAncestors(nodes, id) {
@@ -999,75 +1107,81 @@ const FocusGuard = /*#__PURE__*/React__namespace.forwardRef(function FocusGuard(
 });
 
 const PortalContext = /*#__PURE__*/React__namespace.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__namespace.useState(null);
+  } = props;
   const uniqueId = useId();
   const portalContext = usePortalContext();
-  const data = React__namespace.useMemo(() => ({
-    id,
-    root,
-    portalContext,
-    uniqueId
-  }), [id, root, portalContext, uniqueId]);
-  const dataRef = React__namespace.useRef();
+  const [portalNode, setPortalNode] = React__namespace.useState(null);
+  const portalNodeRef = React__namespace.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 && !floatingUi_utils_dom$1.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 && !floatingUi_utils_dom.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
@@ -1157,11 +1271,16 @@ const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function addPreviouslyFocusedElement(element) {
   previouslyFocusedElements = previouslyFocusedElements.filter(el => el.isConnected);
-  if (element && floatingUi_utils_dom$1.getNodeName(element) !== 'body') {
-    previouslyFocusedElements.push(element);
-    if (previouslyFocusedElements.length > LIST_LIMIT) {
-      previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
-    }
+  let tabbableEl = element;
+  if (!tabbableEl || floatingUi_utils_dom.getNodeName(tabbableEl) === 'body') return;
+  if (!index_esm.isTabbable(tabbableEl, getTabbableOptions())) {
+    const tabbableChild = index_esm.tabbable(tabbableEl, getTabbableOptions())[0];
+    if (!tabbableChild) return;
+    tabbableEl = tabbableChild;
+  }
+  previouslyFocusedElements.push(tabbableEl);
+  if (previouslyFocusedElements.length > LIST_LIMIT) {
+    previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
   }
 }
 function getPreviouslyFocusedElement() {
@@ -1271,7 +1390,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__namespace.useEffect(() => {
     if (disabled || !closeOnFocusOut) return;
 
@@ -1303,7 +1422,7 @@ function FloatingFocusManager(props) {
         }
       });
     }
-    if (floating && floatingUi_utils_dom$1.isHTMLElement(domReference)) {
+    if (floating && floatingUi_utils_dom.isHTMLElement(domReference)) {
       domReference.addEventListener('focusout', handleFocusOutside);
       domReference.addEventListener('pointerdown', handlePointerDown);
       !modal && floating.addEventListener('focusout', handleFocusOutside);
@@ -1391,7 +1510,7 @@ function FloatingFocusManager(props) {
       const returnElement = getPreviouslyFocusedElement();
       if (
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      returnFocusRef.current && !preventReturnFocusRef.current && floatingUi_utils_dom$1.isHTMLElement(returnElement) && (
+      returnFocusRef.current && !preventReturnFocusRef.current && floatingUi_utils_dom.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
@@ -1499,7 +1618,7 @@ function FloatingFocusManager(props) {
 }
 
 function isButtonTarget(event) {
-  return floatingUi_utils_dom$1.isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+  return floatingUi_utils_dom.isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
 }
 function isSpaceIgnored(element) {
   return floatingUi_react_utils.isTypeableElement(element);
@@ -1723,19 +1842,18 @@ function useDismiss(context, props) {
     const target = floatingUi_react_utils.getTarget(event);
     const inertSelector = "[" + createAttribute('inert') + "]";
     const markers = floatingUi_react_utils.getDocument(floating).querySelectorAll(inertSelector);
-    let targetRootAncestor = floatingUi_utils_dom$1.isElement(target) ? target : null;
-    while (targetRootAncestor && !floatingUi_utils_dom$1.isLastTraversableNode(targetRootAncestor)) {
-      const nextParent = floatingUi_utils_dom$1.getParentNode(targetRootAncestor);
-      if (floatingUi_utils_dom$1.isLastTraversableNode(nextParent) || !floatingUi_utils_dom$1.isElement(nextParent)) {
+    let targetRootAncestor = floatingUi_utils_dom.isElement(target) ? target : null;
+    while (targetRootAncestor && !floatingUi_utils_dom.isLastTraversableNode(targetRootAncestor)) {
+      const nextParent = floatingUi_utils_dom.getParentNode(targetRootAncestor);
+      if (floatingUi_utils_dom.isLastTraversableNode(nextParent) || !floatingUi_utils_dom.isElement(nextParent)) {
         break;
-      } else {
-        targetRootAncestor = nextParent;
       }
+      targetRootAncestor = nextParent;
     }
 
     // Check if the click occurred on a third-party element injected after the
     // floating element rendered.
-    if (markers.length && floatingUi_utils_dom$1.isElement(target) && !floatingUi_react_utils.isRootElement(target) &&
+    if (markers.length && floatingUi_utils_dom.isElement(target) && !floatingUi_react_utils.isRootElement(target) &&
     // Clicked on a direct ancestor (e.g. FloatingOverlay).
     !floatingUi_react_utils.contains(target, floating) &&
     // If the target root element contains none of the markers, then the
@@ -1745,7 +1863,7 @@ function useDismiss(context, props) {
     }
 
     // Check if the click occurred on the scrollbar
-    if (floatingUi_utils_dom$1.isHTMLElement(target) && floating) {
+    if (floatingUi_utils_dom.isHTMLElement(target) && floating) {
       // In Firefox, `target.scrollWidth > target.clientWidth` for inline
       // elements.
       const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
@@ -1757,7 +1875,7 @@ function useDismiss(context, props) {
       // check for. Plus, for modal dialogs with backdrops, it is more
       // important that the backdrop is checked but not so much the window.
       if (canScrollY) {
-        const isRTL = floatingUi_utils_dom$1.getComputedStyle(target).direction === 'rtl';
+        const isRTL = floatingUi_utils_dom.getComputedStyle(target).direction === 'rtl';
         if (isRTL) {
           xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
         }
@@ -1812,13 +1930,13 @@ function useDismiss(context, props) {
     outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
     let ancestors = [];
     if (ancestorScroll) {
-      if (floatingUi_utils_dom$1.isElement(domReference)) {
+      if (floatingUi_utils_dom.isElement(domReference)) {
         ancestors = floatingUi_utils_dom.getOverflowAncestors(domReference);
       }
-      if (floatingUi_utils_dom$1.isElement(floating)) {
+      if (floatingUi_utils_dom.isElement(floating)) {
         ancestors = ancestors.concat(floatingUi_utils_dom.getOverflowAncestors(floating));
       }
-      if (!floatingUi_utils_dom$1.isElement(reference) && reference && reference.contextElement) {
+      if (!floatingUi_utils_dom.isElement(reference) && reference && reference.contextElement) {
         ancestors = ancestors.concat(floatingUi_utils_dom.getOverflowAncestors(reference.contextElement));
       }
     }
@@ -1873,17 +1991,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 = {};
   }
@@ -1892,27 +2005,33 @@ function useFloating(options) {
     onOpenChange: unstable_onOpenChange,
     nodeId
   } = options;
+  const [_domReference, setDomReference] = React__namespace.useState(null);
+  const [positionReference, _setPositionReference] = React__namespace.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 && !floatingUi_utils_dom$1.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 && !floatingUi_utils_dom.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__namespace.useState(null);
-  const domReference = ((_options$elements2 = options.elements) == null ? void 0 : _options$elements2.reference) || _domReference;
-  const position = floatingUi_reactDom.useFloating(options);
+  index(() => {
+    if (domReference) {
+      domReferenceRef.current = domReference;
+    }
+  }, [domReference]);
+  const position = floatingUi_reactDom.useFloating({
+    ...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,
@@ -1926,25 +2045,28 @@ function useFloating(options) {
   const events = React__namespace.useState(() => createPubSub())[0];
   const floatingId = useId();
   const setPositionReference = React__namespace.useCallback(node => {
-    const positionReference = floatingUi_utils_dom$1.isElement(node) ? {
+    const computedPositionReference = floatingUi_utils_dom.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__namespace.useCallback(node => {
-    if (floatingUi_utils_dom$1.isElement(node) || node === null) {
+    if (floatingUi_utils_dom.isElement(node) || node === null) {
       domReferenceRef.current = node;
       setDomReference(node);
     }
 
     // Backwards-compatibility for passing a virtual element to `reference`
     // after it has set the DOM reference.
-    if (floatingUi_utils_dom$1.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
+    if (floatingUi_utils_dom.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
     // Don't allow setting virtual elements using the old technique back to
     // `null` to support `positionReference` + an unstable `reference`
     // callback ref.
-    node !== null && !floatingUi_utils_dom$1.isElement(node)) {
+    node !== null && !floatingUi_utils_dom.isElement(node)) {
       position.refs.setReference(node);
     }
   }, [position.refs]);
@@ -1998,7 +2120,6 @@ function useFocus(context, props) {
     events,
     refs,
     elements: {
-      floating,
       domReference
     }
   } = context;
@@ -2013,13 +2134,13 @@ function useFocus(context, props) {
     if (!enabled) {
       return;
     }
-    const win = floatingUi_utils_dom$1.getWindow(domReference);
+    const win = floatingUi_utils_dom.getWindow(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 && floatingUi_utils_dom$1.isHTMLElement(domReference) && domReference === floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(domReference))) {
+      if (!open && floatingUi_utils_dom.isHTMLElement(domReference) && domReference === floatingUi_react_utils.activeElement(floatingUi_react_utils.getDocument(domReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -2032,7 +2153,7 @@ function useFocus(context, props) {
       win.removeEventListener('blur', onBlur);
       win.removeEventListener('keydown', onKeyDown, true);
     };
-  }, [floating, domReference, open, enabled]);
+  }, [domReference, open, enabled]);
   React__namespace.useEffect(() => {
     if (!enabled) {
       return;
@@ -2071,7 +2192,7 @@ function useFocus(context, props) {
         onFocus(event) {
           if (blockFocusRef.current) return;
           const target = floatingUi_react_utils.getTarget(event.nativeEvent);
-          if (visibleOnly && floatingUi_utils_dom$1.isElement(target)) {
+          if (visibleOnly && floatingUi_utils_dom.isElement(target)) {
             try {
               // Mac Safari unreliably matches `:focus-visible` on the reference
               // if focus was outside the page initially - use the fallback
@@ -2093,7 +2214,7 @@ function useFocus(context, props) {
 
           // Hit the non-modal focus management portal guard. Focus will be
           // moved into the floating element immediately after.
-          const movedToFocusGuard = floatingUi_utils_dom$1.isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+          const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
           // Wait for the window blur listener to fire.
           timeoutRef.current = window.setTimeout(() => {
@@ -2105,7 +2226,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 (floatingUi_react_utils.contains(refs.floating.current, relatedTarget) || floatingUi_react_utils.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 (floatingUi_react_utils.contains(refs.floating.current, activeEl) || floatingUi_react_utils.contains(domReference, activeEl) || movedToFocusGuard) {
               return;
             }
             onOpenChange(false, event.nativeEvent, 'focus');
@@ -2123,7 +2248,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]: __,
@@ -2227,7 +2351,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;
@@ -2272,19 +2396,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();
@@ -2362,6 +2488,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) {
@@ -2530,7 +2657,7 @@ function useListNavigation(context, props) {
       if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
         floatingUi_react_utils.stopEvent(event);
         onOpenChange(false, event.nativeEvent, 'list-navigation');
-        if (floatingUi_utils_dom$1.isHTMLElement(domReference) && !virtual) {
+        if (floatingUi_utils_dom.isHTMLElement(domReference) && !virtual) {
           domReference.focus();
         }
         return;
@@ -2551,17 +2678,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;
@@ -2720,7 +2868,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]]);
@@ -2889,10 +3037,9 @@ function useTransitionStatus(context, props) {
       return () => {
         cancelAnimationFrame(frame);
       };
-    } else {
-      setInitiated(true);
-      setStatus('close');
     }
+    setInitiated(true);
+    setStatus('close');
   }, [open, floating]);
   return {
     isMounted,
@@ -2980,10 +3127,13 @@ function useTransitionStyles(context, props) {
 }
 
 exports.arrow = floatingUi_reactDom.arrow;
+exports.getOverflowAncestors = floatingUi_utils_dom.getOverflowAncestors;
 exports.autoUpdate = floatingUi_dom.autoUpdate;
 exports.computePosition = floatingUi_dom.computePosition;
+exports.flip = floatingUi_dom.flip;
 exports.platform = floatingUi_dom.platform;
-exports.getOverflowAncestors = floatingUi_utils_dom.getOverflowAncestors;
+exports.shift = floatingUi_dom.shift;
+exports.size = floatingUi_dom.size;
 exports.FloatingArrow = FloatingArrow;
 exports.FloatingFocusManager = FloatingFocusManager;
 exports.FloatingPortal = FloatingPortal;