@digdir/designsystemet-react 0.52.0-alpha.0

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

@@ -0,0 +1,2964 @@
+'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 { useFloating as useFloating$1 } from '../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+export { arrow } from '../node_modules/@floating-ui/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 { 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';
+
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ * @see https://floating-ui.com/docs/useMergeRefs
+ */
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return value => {
+      refs.forEach(ref => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref != null) {
+          ref.current = value;
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}
+
+// `toString()` prevents bundlers from trying to `import { useInsertionEffect } from 'react'`
+const useInsertionEffect = React[/*#__PURE__*/'useInsertionEffect'.toString()];
+const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
+function useEffectEvent(callback) {
+  const ref = React.useRef(() => {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error('Cannot call an event handler while rendering.');
+    }
+  });
+  useSafeInsertionEffect(() => {
+    ref.current = callback;
+  });
+  return React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return ref.current == null ? void 0 : ref.current(...args);
+  }, []);
+}
+
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+function isDifferentRow(index, cols, prevRow) {
+  return Math.floor(index / cols) !== prevRow;
+}
+function isIndexOutOfBounds(listRef, index) {
+  return index < 0 || index >= listRef.current.length;
+}
+function getMinIndex(listRef, disabledIndices) {
+  return findNonDisabledIndex(listRef, {
+    disabledIndices
+  });
+}
+function getMaxIndex(listRef, disabledIndices) {
+  return findNonDisabledIndex(listRef, {
+    decrement: true,
+    startingIndex: listRef.current.length,
+    disabledIndices
+  });
+}
+function findNonDisabledIndex(listRef, _temp) {
+  let {
+    startingIndex = -1,
+    decrement = false,
+    disabledIndices,
+    amount = 1
+  } = _temp === void 0 ? {} : _temp;
+  const list = listRef.current;
+  const isDisabledIndex = disabledIndices ? index => disabledIndices.includes(index) : index => {
+    const element = list[index];
+    return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+  };
+  let index = startingIndex;
+  do {
+    index += decrement ? -amount : amount;
+  } while (index >= 0 && index <= list.length - 1 && isDisabledIndex(index));
+  return index;
+}
+function getGridNavigatedIndex(elementsRef, _ref) {
+  let {
+    event,
+    orientation,
+    loop,
+    cols,
+    disabledIndices,
+    minIndex,
+    maxIndex,
+    prevIndex,
+    stopEvent: stop = false
+  } = _ref;
+  let nextIndex = prevIndex;
+  if (event.key === ARROW_UP) {
+    stop && stopEvent(event);
+    if (prevIndex === -1) {
+      nextIndex = maxIndex;
+    } else {
+      nextIndex = findNonDisabledIndex(elementsRef, {
+        startingIndex: nextIndex,
+        amount: cols,
+        decrement: true,
+        disabledIndices
+      });
+      if (loop && (prevIndex - cols < minIndex || nextIndex < 0)) {
+        const col = prevIndex % cols;
+        const maxCol = maxIndex % cols;
+        const offset = maxIndex - (maxCol - col);
+        if (maxCol === col) {
+          nextIndex = maxIndex;
+        } else {
+          nextIndex = maxCol > col ? offset : offset - cols;
+        }
+      }
+    }
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      nextIndex = prevIndex;
+    }
+  }
+  if (event.key === ARROW_DOWN) {
+    stop && stopEvent(event);
+    if (prevIndex === -1) {
+      nextIndex = minIndex;
+    } else {
+      nextIndex = findNonDisabledIndex(elementsRef, {
+        startingIndex: prevIndex,
+        amount: cols,
+        disabledIndices
+      });
+      if (loop && prevIndex + cols > maxIndex) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex % cols - cols,
+          amount: cols,
+          disabledIndices
+        });
+      }
+    }
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      nextIndex = prevIndex;
+    }
+  }
+
+  // Remains on the same row/column.
+  if (orientation === 'both') {
+    const prevRow = floor(prevIndex / cols);
+    if (event.key === ARROW_RIGHT) {
+      stop && stopEvent(event);
+      if (prevIndex % cols !== cols - 1) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex,
+          disabledIndices
+        });
+        if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
+          nextIndex = findNonDisabledIndex(elementsRef, {
+            startingIndex: prevIndex - prevIndex % cols - 1,
+            disabledIndices
+          });
+        }
+      } else if (loop) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+      }
+      if (isDifferentRow(nextIndex, cols, prevRow)) {
+        nextIndex = prevIndex;
+      }
+    }
+    if (event.key === ARROW_LEFT) {
+      stop && stopEvent(event);
+      if (prevIndex % cols !== 0) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex,
+          disabledIndices,
+          decrement: true
+        });
+        if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
+          nextIndex = findNonDisabledIndex(elementsRef, {
+            startingIndex: prevIndex + (cols - prevIndex % cols),
+            decrement: true,
+            disabledIndices
+          });
+        }
+      } else if (loop) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex + (cols - prevIndex % cols),
+          decrement: true,
+          disabledIndices
+        });
+      }
+      if (isDifferentRow(nextIndex, cols, prevRow)) {
+        nextIndex = prevIndex;
+      }
+    }
+    const lastRow = floor(maxIndex / cols) === prevRow;
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      if (loop && lastRow) {
+        nextIndex = event.key === ARROW_LEFT ? maxIndex : findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+      } else {
+        nextIndex = prevIndex;
+      }
+    }
+  }
+  return nextIndex;
+}
+
+let rafId = 0;
+function enqueueFocus(el, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    preventScroll = false,
+    cancelPrevious = true,
+    sync = false
+  } = options;
+  cancelPrevious && cancelAnimationFrame(rafId);
+  const exec = () => el == null ? void 0 : el.focus({
+    preventScroll
+  });
+  if (sync) {
+    exec();
+  } else {
+    rafId = requestAnimationFrame(exec);
+  }
+}
+
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+let serverHandoffComplete = false;
+let count = 0;
+const genId = () => "floating-ui-" + count++;
+function useFloatingId() {
+  const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : undefined);
+  index(() => {
+    if (id == null) {
+      setId(genId());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    if (!serverHandoffComplete) {
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return id;
+}
+
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const useReactId = React[/*#__PURE__*/'useId'.toString()];
+
+/**
+ * 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
+ */
+const useId = useReactId || useFloatingId;
+
+/**
+ * Renders a pointing arrow triangle.
+ * @see https://floating-ui.com/docs/FloatingArrow
+ */
+const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(_ref, ref) {
+  let {
+    context: {
+      placement,
+      elements: {
+        floating
+      },
+      middlewareData: {
+        arrow
+      }
+    },
+    width = 14,
+    height = 7,
+    tipRadius = 0,
+    strokeWidth = 0,
+    staticOffset,
+    stroke,
+    d,
+    style: {
+      transform,
+      ...restStyle
+    } = {},
+    ...rest
+  } = _ref;
+  if (process.env.NODE_ENV !== "production") {
+    if (!ref) {
+      console.warn('Floating UI: The `ref` prop is required for the `FloatingArrow`', 'component.');
+    }
+  }
+  const clipPathId = useId();
+  if (!floating) {
+    return null;
+  }
+
+  // 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 svgX = width / 2 * (tipRadius / -8 + 1);
+  const svgY = height / 2 * tipRadius / 4;
+  const [side, alignment] = placement.split('-');
+  const isRTL = platform.isRTL(floating);
+  const isCustomShape = !!d;
+  const isVerticalSide = side === 'top' || side === 'bottom';
+  const yOffsetProp = staticOffset && alignment === 'end' ? 'bottom' : 'top';
+  let xOffsetProp = staticOffset && alignment === 'end' ? 'right' : 'left';
+  if (staticOffset && 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 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)' : '',
+    left: isCustomShape ? 'rotate(90deg)' : 'rotate(-90deg)',
+    bottom: isCustomShape ? '' : 'rotate(180deg)',
+    right: isCustomShape ? 'rotate(-90deg)' : 'rotate(90deg)'
+  }[side];
+  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
+    "aria-hidden": true,
+    ref: ref,
+    width: isCustomShape ? width : width + strokeWidth,
+    height: width,
+    viewBox: "0 0 " + width + " " + (height > width ? height : width),
+    style: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      [xOffsetProp]: arrowX,
+      [yOffsetProp]: arrowY,
+      [side]: isVerticalSide || isCustomShape ? '100%' : "calc(100% - " + strokeWidth / 2 + "px)",
+      transform: "" + rotation + (transform != null ? transform : ''),
+      ...restStyle
+    }
+  }), strokeWidth > 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),
+    d: dValue
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: strokeWidth && !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,
+    height: width
+  })));
+});
+
+function createPubSub() {
+  const map = new Map();
+  return {
+    emit(event, data) {
+      var _map$get;
+      (_map$get = map.get(event)) == null || _map$get.forEach(handler => handler(data));
+    },
+    on(event, listener) {
+      map.set(event, [...(map.get(event) || []), listener]);
+    },
+    off(event, listener) {
+      var _map$get2;
+      map.set(event, ((_map$get2 = map.get(event)) == null ? void 0 : _map$get2.filter(l => l !== listener)) || []);
+    }
+  };
+}
+
+const FloatingNodeContext = /*#__PURE__*/React.createContext(null);
+const FloatingTreeContext = /*#__PURE__*/React.createContext(null);
+const useFloatingParentNodeId = () => {
+  var _React$useContext;
+  return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
+};
+const useFloatingTree = () => React.useContext(FloatingTreeContext);
+
+function createAttribute(name) {
+  return "data-floating-ui-" + name;
+}
+
+function useLatestRef(value) {
+  const ref = useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+const safePolygonIdentifier = /*#__PURE__*/createAttribute('safe-polygon');
+function getDelay(value, prop, pointerType) {
+  if (pointerType && !isMouseLikePointerType(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+  return value == null ? void 0 : value[prop];
+}
+/**
+ * Opens the floating element while hovering over the reference element, like
+ * CSS `:hover`.
+ * @see https://floating-ui.com/docs/useHover
+ */
+function useHover(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    events,
+    elements: {
+      domReference,
+      floating
+    },
+    refs
+  } = context;
+  const {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true
+  } = props;
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  const handleCloseRef = useLatestRef(handleClose);
+  const delayRef = useLatestRef(delay);
+  const pointerTypeRef = React.useRef();
+  const timeoutRef = React.useRef();
+  const handlerRef = React.useRef();
+  const restTimeoutRef = React.useRef();
+  const blockMouseMoveRef = React.useRef(true);
+  const performedPointerEventsMutationRef = React.useRef(false);
+  const unbindMouseMoveRef = React.useRef(() => {});
+  const isHoverOpen = React.useCallback(() => {
+    var _dataRef$current$open;
+    const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
+    return (type == null ? void 0 : type.includes('mouse')) && type !== 'mousedown';
+  }, [dataRef]);
+
+  // When closing before opening, clear the delay timeouts to cancel it
+  // from showing.
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function onOpenChange(_ref) {
+      let {
+        open
+      } = _ref;
+      if (!open) {
+        clearTimeout(timeoutRef.current);
+        clearTimeout(restTimeoutRef.current);
+        blockMouseMoveRef.current = true;
+      }
+    }
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+    };
+  }, [enabled, events]);
+  React.useEffect(() => {
+    if (!enabled || !handleCloseRef.current || !open) {
+      return;
+    }
+    function onLeave(event) {
+      if (isHoverOpen()) {
+        onOpenChange(false, event, 'hover');
+      }
+    }
+    const html = getDocument(floating).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    return () => {
+      html.removeEventListener('mouseleave', onLeave);
+    };
+  }, [floating, open, onOpenChange, enabled, handleCloseRef, dataRef, isHoverOpen]);
+  const closeWithDelay = React.useCallback(function (event, runElseBranch, reason) {
+    if (runElseBranch === void 0) {
+      runElseBranch = true;
+    }
+    if (reason === void 0) {
+      reason = 'hover';
+    }
+    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+    if (closeDelay && !handlerRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => onOpenChange(false, event, reason), closeDelay);
+    } else if (runElseBranch) {
+      clearTimeout(timeoutRef.current);
+      onOpenChange(false, event, reason);
+    }
+  }, [delayRef, onOpenChange]);
+  const cleanupMouseMoveHandler = React.useCallback(() => {
+    unbindMouseMoveRef.current();
+    handlerRef.current = undefined;
+  }, []);
+  const clearPointerEvents = React.useCallback(() => {
+    if (performedPointerEventsMutationRef.current) {
+      const body = getDocument(refs.floating.current).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      performedPointerEventsMutationRef.current = false;
+    }
+  }, [refs]);
+
+  // Registering the mouse events on the reference directly to bypass React's
+  // delegation system. If the cursor was on a disabled element and then entered
+  // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function isClickLikeOpenEvent() {
+      return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    }
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      blockMouseMoveRef.current = false;
+      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && getDelay(delayRef.current, 'open') === 0) {
+        return;
+      }
+      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+      if (openDelay) {
+        timeoutRef.current = setTimeout(() => {
+          onOpenChange(true, event, 'hover');
+        }, openDelay);
+      } else {
+        onOpenChange(true, event, 'hover');
+      }
+    }
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        return;
+      }
+      unbindMouseMoveRef.current();
+      const doc = getDocument(floating);
+      clearTimeout(restTimeoutRef.current);
+      if (handleCloseRef.current) {
+        // Prevent clearing `onScrollMouseLeave` timeout.
+        if (!open) {
+          clearTimeout(timeoutRef.current);
+        }
+        handlerRef.current = handleCloseRef.current({
+          ...context,
+          tree,
+          x: event.clientX,
+          y: event.clientY,
+          onClose() {
+            clearPointerEvents();
+            cleanupMouseMoveHandler();
+            closeWithDelay(event, true, 'safe-polygon');
+          }
+        });
+        const handler = handlerRef.current;
+        doc.addEventListener('mousemove', handler);
+        unbindMouseMoveRef.current = () => {
+          doc.removeEventListener('mousemove', handler);
+        };
+        return;
+      }
+
+      // Allow interactivity without `safePolygon` on touch devices. With a
+      // pointer, a short close delay is an alternative, so it should work
+      // consistently.
+      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(floating, event.relatedTarget) : true;
+      if (shouldClose) {
+        closeWithDelay(event);
+      }
+    }
+
+    // Ensure the floating element closes after scrolling even if the pointer
+    // did not move.
+    // https://github.com/floating-ui/floating-ui/discussions/1692
+    function onScrollMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        return;
+      }
+      handleCloseRef.current == null || handleCloseRef.current({
+        ...context,
+        tree,
+        x: event.clientX,
+        y: event.clientY,
+        onClose() {
+          clearPointerEvents();
+          cleanupMouseMoveHandler();
+          closeWithDelay(event);
+        }
+      })(event);
+    }
+    if (isElement(domReference)) {
+      const ref = domReference;
+      open && ref.addEventListener('mouseleave', onScrollMouseLeave);
+      floating == null || floating.addEventListener('mouseleave', onScrollMouseLeave);
+      move && ref.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+      ref.addEventListener('mouseenter', onMouseEnter);
+      ref.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        open && ref.removeEventListener('mouseleave', onScrollMouseLeave);
+        floating == null || floating.removeEventListener('mouseleave', onScrollMouseLeave);
+        move && ref.removeEventListener('mousemove', onMouseEnter);
+        ref.removeEventListener('mouseenter', onMouseEnter);
+        ref.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, [domReference, floating, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, tree, delayRef, handleCloseRef, dataRef]);
+
+  // Block pointer-events of every element other than the reference and floating
+  // while the floating element is open and has a `handleClose` handler. Also
+  // handles nested floating elements.
+  // https://github.com/floating-ui/floating-ui/issues/1722
+  index(() => {
+    var _handleCloseRef$curre;
+    if (!enabled) {
+      return;
+    }
+    if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
+      const body = getDocument(floating).body;
+      body.setAttribute(safePolygonIdentifier, '');
+      body.style.pointerEvents = 'none';
+      performedPointerEventsMutationRef.current = true;
+      if (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;
+        if (parentFloating) {
+          parentFloating.style.pointerEvents = '';
+        }
+        ref.style.pointerEvents = 'auto';
+        floating.style.pointerEvents = 'auto';
+        return () => {
+          ref.style.pointerEvents = '';
+          floating.style.pointerEvents = '';
+        };
+      }
+    }
+  }, [enabled, open, parentId, floating, domReference, tree, handleCloseRef, dataRef, isHoverOpen]);
+  index(() => {
+    if (!open) {
+      pointerTypeRef.current = undefined;
+      cleanupMouseMoveHandler();
+      clearPointerEvents();
+    }
+  }, [open, cleanupMouseMoveHandler, clearPointerEvents]);
+  React.useEffect(() => {
+    return () => {
+      cleanupMouseMoveHandler();
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+      clearPointerEvents();
+    };
+  }, [enabled, domReference, cleanupMouseMoveHandler, clearPointerEvents]);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    function setPointerRef(event) {
+      pointerTypeRef.current = event.pointerType;
+    }
+    return {
+      reference: {
+        onPointerDown: setPointerRef,
+        onPointerEnter: setPointerRef,
+        onMouseMove(event) {
+          if (open || restMs === 0) {
+            return;
+          }
+          clearTimeout(restTimeoutRef.current);
+          restTimeoutRef.current = setTimeout(() => {
+            if (!blockMouseMoveRef.current) {
+              onOpenChange(true, event.nativeEvent, 'hover');
+            }
+          }, restMs);
+        }
+      },
+      floating: {
+        onMouseEnter() {
+          clearTimeout(timeoutRef.current);
+        },
+        onMouseLeave(event) {
+          closeWithDelay(event.nativeEvent, false);
+        }
+      }
+    };
+  }, [enabled, restMs, open, onOpenChange, closeWithDelay]);
+}
+
+function getAncestors(nodes, id) {
+  var _nodes$find;
+  let allAncestors = [];
+  let currentParentId = (_nodes$find = nodes.find(node => node.id === id)) == null ? void 0 : _nodes$find.parentId;
+  while (currentParentId) {
+    const currentNode = nodes.find(node => node.id === currentParentId);
+    currentParentId = currentNode == null ? void 0 : currentNode.parentId;
+    if (currentNode) {
+      allAncestors = allAncestors.concat(currentNode);
+    }
+  }
+  return allAncestors;
+}
+
+function getChildren(nodes, id) {
+  let allChildren = nodes.filter(node => {
+    var _node$context;
+    return node.parentId === id && ((_node$context = node.context) == null ? void 0 : _node$context.open);
+  });
+  let currentChildren = allChildren;
+  while (currentChildren.length) {
+    currentChildren = nodes.filter(node => {
+      var _currentChildren;
+      return (_currentChildren = currentChildren) == null ? void 0 : _currentChildren.some(n => {
+        var _node$context2;
+        return node.parentId === n.id && ((_node$context2 = node.context) == null ? void 0 : _node$context2.open);
+      });
+    });
+    allChildren = allChildren.concat(currentChildren);
+  }
+  return allChildren;
+}
+function getDeepestNode(nodes, id) {
+  let deepestNodeId;
+  let maxDepth = -1;
+  function findDeepest(nodeId, depth) {
+    if (depth > maxDepth) {
+      deepestNodeId = nodeId;
+      maxDepth = depth;
+    }
+    const children = getChildren(nodes, nodeId);
+    children.forEach(child => {
+      findDeepest(child.id, depth + 1);
+    });
+  }
+  findDeepest(id, 0);
+  return nodes.find(node => node.id === deepestNodeId);
+}
+
+// Modified to add conditional `aria-hidden` support:
+// https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
+let counterMap = /*#__PURE__*/new WeakMap();
+let uncontrolledElementsSet = /*#__PURE__*/new WeakSet();
+let markerMap = {};
+let lockCount = 0;
+const supportsInert = () => typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
+const unwrapHost = node => node && (node.host || unwrapHost(node.parentNode));
+const correctElements = (parent, targets) => targets.map(target => {
+  if (parent.contains(target)) {
+    return target;
+  }
+  const correctedTarget = unwrapHost(target);
+  if (parent.contains(correctedTarget)) {
+    return correctedTarget;
+  }
+  return null;
+}).filter(x => x != null);
+function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
+  const markerName = 'data-floating-ui-inert';
+  const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
+  const avoidElements = correctElements(body, uncorrectedAvoidElements);
+  const elementsToKeep = new Set();
+  const elementsToStop = new Set(avoidElements);
+  const hiddenElements = [];
+  if (!markerMap[markerName]) {
+    markerMap[markerName] = new WeakMap();
+  }
+  const markerCounter = markerMap[markerName];
+  avoidElements.forEach(keep);
+  deep(body);
+  elementsToKeep.clear();
+  function keep(el) {
+    if (!el || elementsToKeep.has(el)) {
+      return;
+    }
+    elementsToKeep.add(el);
+    el.parentNode && keep(el.parentNode);
+  }
+  function deep(parent) {
+    if (!parent || elementsToStop.has(parent)) {
+      return;
+    }
+    Array.prototype.forEach.call(parent.children, node => {
+      if (elementsToKeep.has(node)) {
+        deep(node);
+      } else {
+        const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
+        const alreadyHidden = attr !== null && attr !== 'false';
+        const counterValue = (counterMap.get(node) || 0) + 1;
+        const markerValue = (markerCounter.get(node) || 0) + 1;
+        counterMap.set(node, counterValue);
+        markerCounter.set(node, markerValue);
+        hiddenElements.push(node);
+        if (counterValue === 1 && alreadyHidden) {
+          uncontrolledElementsSet.add(node);
+        }
+        if (markerValue === 1) {
+          node.setAttribute(markerName, '');
+        }
+        if (!alreadyHidden && controlAttribute) {
+          node.setAttribute(controlAttribute, 'true');
+        }
+      }
+    });
+  }
+  lockCount++;
+  return () => {
+    hiddenElements.forEach(element => {
+      const counterValue = (counterMap.get(element) || 0) - 1;
+      const markerValue = (markerCounter.get(element) || 0) - 1;
+      counterMap.set(element, counterValue);
+      markerCounter.set(element, markerValue);
+      if (!counterValue) {
+        if (!uncontrolledElementsSet.has(element) && controlAttribute) {
+          element.removeAttribute(controlAttribute);
+        }
+        uncontrolledElementsSet.delete(element);
+      }
+      if (!markerValue) {
+        element.removeAttribute(markerName);
+      }
+    });
+    lockCount--;
+    if (!lockCount) {
+      counterMap = new WeakMap();
+      counterMap = new WeakMap();
+      uncontrolledElementsSet = new WeakSet();
+      markerMap = {};
+    }
+  };
+}
+function markOthers(avoidElements, ariaHidden, inert) {
+  if (ariaHidden === void 0) {
+    ariaHidden = false;
+  }
+  if (inert === void 0) {
+    inert = false;
+  }
+  const body = getDocument(avoidElements[0]).body;
+  return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
+}
+
+const getTabbableOptions = () => ({
+  getShadowRoot: true,
+  displayCheck:
+  // JSDOM does not support the `tabbable` library. To solve this we can
+  // check if `ResizeObserver` is a real function (not polyfilled), which
+  // determines if the current environment is JSDOM-like.
+  typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
+});
+function getTabbableIn(container, direction) {
+  const allTabbable = tabbable(container, getTabbableOptions());
+  if (direction === 'prev') {
+    allTabbable.reverse();
+  }
+  const activeIndex = allTabbable.indexOf(activeElement(getDocument(container)));
+  const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+  return nextTabbableElements[0];
+}
+function getNextTabbable() {
+  return getTabbableIn(document.body, 'next');
+}
+function getPreviousTabbable() {
+  return getTabbableIn(document.body, 'prev');
+}
+function isOutsideEvent(event, container) {
+  const containerElement = container || event.currentTarget;
+  const relatedTarget = event.relatedTarget;
+  return !relatedTarget || !contains(containerElement, relatedTarget);
+}
+function disableFocusInside(container) {
+  const tabbableElements = tabbable(container, getTabbableOptions());
+  tabbableElements.forEach(element => {
+    element.dataset.tabindex = element.getAttribute('tabindex') || '';
+    element.setAttribute('tabindex', '-1');
+  });
+}
+function enableFocusInside(container) {
+  const elements = container.querySelectorAll('[data-tabindex]');
+  elements.forEach(element => {
+    const tabindex = element.dataset.tabindex;
+    delete element.dataset.tabindex;
+    if (tabindex) {
+      element.setAttribute('tabindex', tabindex);
+    } else {
+      element.removeAttribute('tabindex');
+    }
+  });
+}
+
+// See Diego Haz's Sandbox for making this logic work well on Safari/iOS:
+// https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/FocusTrap.tsx
+
+const HIDDEN_STYLES = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'fixed',
+  whiteSpace: 'nowrap',
+  width: '1px',
+  top: 0,
+  left: 0
+};
+let timeoutId;
+function setActiveElementOnTab(event) {
+  if (event.key === 'Tab') {
+    event.target;
+    clearTimeout(timeoutId);
+  }
+}
+const FocusGuard = /*#__PURE__*/React.forwardRef(function FocusGuard(props, ref) {
+  const [role, setRole] = React.useState();
+  index(() => {
+    if (isSafari()) {
+      // Unlike other screen readers such as NVDA and JAWS, the virtual cursor
+      // on VoiceOver does trigger the onFocus event, so we can use the focus
+      // trap element. On Safari, only buttons trigger the onFocus event.
+      // NB: "group" role in the Sandbox no longer appears to work, must be a
+      // button role.
+      setRole('button');
+    }
+    document.addEventListener('keydown', setActiveElementOnTab);
+    return () => {
+      document.removeEventListener('keydown', setActiveElementOnTab);
+    };
+  }, []);
+  const restProps = {
+    ref,
+    tabIndex: 0,
+    // Role is only for VoiceOver
+    role,
+    'aria-hidden': role ? undefined : true,
+    [createAttribute('focus-guard')]: '',
+    style: HIDDEN_STYLES
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, restProps));
+});
+
+const PortalContext = /*#__PURE__*/React.createContext(null);
+function useFloatingPortalNode(_temp) {
+  let {
+    id,
+    root
+  } = _temp === void 0 ? {} : _temp;
+  const [portalNode, setPortalNode] = React.useState(null);
+  const uniqueId = useId();
+  const portalContext = usePortalContext();
+  const data = React.useMemo(() => ({
+    id,
+    root,
+    portalContext,
+    uniqueId
+  }), [id, root, portalContext, uniqueId]);
+  const dataRef = React.useRef();
+  index(() => {
+    return () => {
+      portalNode == null || portalNode.remove();
+    };
+  }, [portalNode, data]);
+  index(() => {
+    if (dataRef.current === data) return;
+    dataRef.current = data;
+    const {
+      id,
+      root,
+      portalContext,
+      uniqueId
+    } = data;
+    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]);
+  return portalNode;
+}
+/**
+ * Portals the floating element into a given container element — by default,
+ * outside of the app root and into the body.
+ * @see https://floating-ui.com/docs/FloatingPortal
+ */
+function FloatingPortal(_ref) {
+  let {
+    children,
+    id,
+    root = null,
+    preserveTabOrder = true
+  } = _ref;
+  const portalNode = useFloatingPortalNode({
+    id,
+    root
+  });
+  const [focusManagerState, setFocusManagerState] = React.useState(null);
+  const beforeOutsideRef = React.useRef(null);
+  const afterOutsideRef = React.useRef(null);
+  const beforeInsideRef = React.useRef(null);
+  const afterInsideRef = React.useRef(null);
+  const shouldRenderGuards =
+  // The FocusManager and therefore floating element are currently open/
+  // rendered.
+  !!focusManagerState &&
+  // Guards are only for non-modal focus management.
+  !focusManagerState.modal &&
+  // Don't render if unmount is transitioning.
+  focusManagerState.open && preserveTabOrder && !!(root || portalNode);
+
+  // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
+  React.useEffect(() => {
+    if (!portalNode || !preserveTabOrder || focusManagerState != null && focusManagerState.modal) {
+      return;
+    }
+
+    // Make sure elements inside the portal element are tabbable only when the
+    // portal has already been focused, either by tabbing into a focus trap
+    // element outside or using the mouse.
+    function onFocus(event) {
+      if (portalNode && isOutsideEvent(event)) {
+        const focusing = event.type === 'focusin';
+        const manageFocus = focusing ? enableFocusInside : disableFocusInside;
+        manageFocus(portalNode);
+      }
+    }
+    // Listen to the event on the capture phase so they run before the focus
+    // trap elements onFocus prop is called.
+    portalNode.addEventListener('focusin', onFocus, true);
+    portalNode.addEventListener('focusout', onFocus, true);
+    return () => {
+      portalNode.removeEventListener('focusin', onFocus, true);
+      portalNode.removeEventListener('focusout', onFocus, true);
+    };
+  }, [portalNode, preserveTabOrder, focusManagerState == null ? void 0 : focusManagerState.modal]);
+  return /*#__PURE__*/React.createElement(PortalContext.Provider, {
+    value: React.useMemo(() => ({
+      preserveTabOrder,
+      beforeOutsideRef,
+      afterOutsideRef,
+      beforeInsideRef,
+      afterInsideRef,
+      portalNode,
+      setFocusManagerState
+    }), [preserveTabOrder, portalNode])
+  }, shouldRenderGuards && portalNode && /*#__PURE__*/React.createElement(FocusGuard, {
+    "data-type": "outside",
+    ref: beforeOutsideRef,
+    onFocus: event => {
+      if (isOutsideEvent(event, portalNode)) {
+        var _beforeInsideRef$curr;
+        (_beforeInsideRef$curr = beforeInsideRef.current) == null || _beforeInsideRef$curr.focus();
+      } else {
+        const prevTabbable = getPreviousTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
+        prevTabbable == null || prevTabbable.focus();
+      }
+    }
+  }), shouldRenderGuards && portalNode && /*#__PURE__*/React.createElement("span", {
+    "aria-owns": portalNode.id,
+    style: HIDDEN_STYLES
+  }), portalNode && /*#__PURE__*/createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/React.createElement(FocusGuard, {
+    "data-type": "outside",
+    ref: afterOutsideRef,
+    onFocus: event => {
+      if (isOutsideEvent(event, portalNode)) {
+        var _afterInsideRef$curre;
+        (_afterInsideRef$curre = afterInsideRef.current) == null || _afterInsideRef$curre.focus();
+      } 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));
+      }
+    }
+  }));
+}
+const usePortalContext = () => React.useContext(PortalContext);
+
+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);
+    }
+  }
+}
+function getPreviouslyFocusedElement() {
+  return previouslyFocusedElements.slice().reverse().find(el => el.isConnected);
+}
+const VisuallyHiddenDismiss = /*#__PURE__*/React.forwardRef(function VisuallyHiddenDismiss(props, ref) {
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+    type: "button",
+    ref: ref,
+    tabIndex: -1,
+    style: HIDDEN_STYLES
+  }));
+});
+/**
+ * Provides focus management for the floating element.
+ * @see https://floating-ui.com/docs/FloatingFocusManager
+ */
+function FloatingFocusManager(props) {
+  const {
+    context,
+    children,
+    disabled = false,
+    order = ['content'],
+    guards: _guards = true,
+    initialFocus = 0,
+    returnFocus = true,
+    modal = true,
+    visuallyHiddenDismiss = false,
+    closeOnFocusOut = true
+  } = props;
+  const {
+    open,
+    refs,
+    nodeId,
+    onOpenChange,
+    events,
+    dataRef,
+    elements: {
+      domReference,
+      floating
+    }
+  } = context;
+  const ignoreInitialFocus = typeof initialFocus === 'number' && initialFocus < 0;
+  // If the reference is a combobox and is typeable (e.g. input/textarea),
+  // there are different focus semantics. The guards should not be rendered, but
+  // aria-hidden should be applied to all nodes still. Further, the visually
+  // hidden dismiss button should only appear at the end of the list, not the
+  // start.
+  const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
+
+  // Force the guards to be rendered if the `inert` attribute is not supported.
+  const guards = supportsInert() ? _guards : true;
+  const orderRef = useLatestRef(order);
+  const initialFocusRef = useLatestRef(initialFocus);
+  const returnFocusRef = useLatestRef(returnFocus);
+  const tree = useFloatingTree();
+  const portalContext = usePortalContext();
+  const startDismissButtonRef = React.useRef(null);
+  const endDismissButtonRef = React.useRef(null);
+  const preventReturnFocusRef = React.useRef(false);
+  const isPointerDownRef = React.useRef(false);
+  const isInsidePortal = portalContext != null;
+  const getTabbableContent = React.useCallback(function (container) {
+    if (container === void 0) {
+      container = floating;
+    }
+    return container ? tabbable(container, getTabbableOptions()) : [];
+  }, [floating]);
+  const getTabbableElements = React.useCallback(container => {
+    const content = getTabbableContent(container);
+    return orderRef.current.map(type => {
+      if (domReference && type === 'reference') {
+        return domReference;
+      }
+      if (floating && type === 'floating') {
+        return floating;
+      }
+      return content;
+    }).filter(Boolean).flat();
+  }, [domReference, floating, orderRef, getTabbableContent]);
+  React.useEffect(() => {
+    if (disabled || !modal) return;
+    function onKeyDown(event) {
+      if (event.key === 'Tab') {
+        // The focus guards have nothing to focus, so we need to stop the event.
+        if (contains(floating, activeElement(getDocument(floating))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+          stopEvent(event);
+        }
+        const els = getTabbableElements();
+        const target = getTarget(event);
+        if (orderRef.current[0] === 'reference' && target === domReference) {
+          stopEvent(event);
+          if (event.shiftKey) {
+            enqueueFocus(els[els.length - 1]);
+          } else {
+            enqueueFocus(els[1]);
+          }
+        }
+        if (orderRef.current[1] === 'floating' && target === floating && event.shiftKey) {
+          stopEvent(event);
+          enqueueFocus(els[0]);
+        }
+      }
+    }
+    const doc = getDocument(floating);
+    doc.addEventListener('keydown', onKeyDown);
+    return () => {
+      doc.removeEventListener('keydown', onKeyDown);
+    };
+  }, [disabled, domReference, floating, modal, orderRef, refs, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+  React.useEffect(() => {
+    if (disabled || !closeOnFocusOut) return;
+
+    // In Safari, buttons lose focus when pressing them.
+    function handlePointerDown() {
+      isPointerDownRef.current = true;
+      setTimeout(() => {
+        isPointerDownRef.current = false;
+      });
+    }
+    function handleFocusOutside(event) {
+      const relatedTarget = event.relatedTarget;
+      queueMicrotask(() => {
+        const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute(createAttribute('focus-guard')) || tree && (getChildren(tree.nodesRef.current, nodeId).find(node => {
+          var _node$context, _node$context2;
+          return contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
+        }) || getAncestors(tree.nodesRef.current, nodeId).find(node => {
+          var _node$context3, _node$context4;
+          return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
+        })));
+
+        // Focus did not move inside the floating tree, and there are no tabbable
+        // portal guards to handle closing.
+        if (relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
+        // Fix React 18 Strict Mode returnFocus due to double rendering.
+        relatedTarget !== getPreviouslyFocusedElement()) {
+          preventReturnFocusRef.current = true;
+          onOpenChange(false, event);
+        }
+      });
+    }
+    if (floating && isHTMLElement(domReference)) {
+      domReference.addEventListener('focusout', handleFocusOutside);
+      domReference.addEventListener('pointerdown', handlePointerDown);
+      !modal && floating.addEventListener('focusout', handleFocusOutside);
+      return () => {
+        domReference.removeEventListener('focusout', handleFocusOutside);
+        domReference.removeEventListener('pointerdown', handlePointerDown);
+        !modal && floating.removeEventListener('focusout', handleFocusOutside);
+      };
+    }
+  }, [disabled, domReference, floating, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut]);
+  React.useEffect(() => {
+    var _portalContext$portal;
+    if (disabled) return;
+
+    // Don't hide portals nested within the parent portal.
+    const portalNodes = Array.from((portalContext == null || (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll("[" + createAttribute('portal') + "]")) || []);
+    if (floating) {
+      const insideElements = [floating, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, orderRef.current.includes('reference') || isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
+      const cleanup = modal || isUntrappedTypeableCombobox ? markOthers(insideElements, guards, !guards) : markOthers(insideElements);
+      return () => {
+        cleanup();
+      };
+    }
+  }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
+  index(() => {
+    if (disabled || !floating) return;
+    const doc = getDocument(floating);
+    const previouslyFocusedElement = activeElement(doc);
+
+    // Wait for any layout effect state setters to execute to set `tabIndex`.
+    queueMicrotask(() => {
+      const focusableElements = getTabbableElements(floating);
+      const initialFocusValue = initialFocusRef.current;
+      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floating;
+      const focusAlreadyInsideFloatingEl = contains(floating, previouslyFocusedElement);
+      if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
+        enqueueFocus(elToFocus, {
+          preventScroll: elToFocus === floating
+        });
+      }
+    });
+  }, [disabled, open, floating, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
+  index(() => {
+    if (disabled || !floating) return;
+    let preventReturnFocusScroll = false;
+    const doc = getDocument(floating);
+    const previouslyFocusedElement = activeElement(doc);
+    const contextData = dataRef.current;
+    addPreviouslyFocusedElement(previouslyFocusedElement);
+
+    // Dismissing via outside press should always ignore `returnFocus` to
+    // prevent unwanted scrolling.
+    function onOpenChange(_ref) {
+      let {
+        reason,
+        event,
+        nested
+      } = _ref;
+      if (reason === 'escape-key' && refs.domReference.current) {
+        addPreviouslyFocusedElement(refs.domReference.current);
+      }
+      if (reason === 'hover' && event.type === 'mouseleave') {
+        preventReturnFocusRef.current = true;
+      }
+      if (reason !== 'outside-press') return;
+      if (nested) {
+        preventReturnFocusRef.current = false;
+        preventReturnFocusScroll = true;
+      } else {
+        preventReturnFocusRef.current = !(isVirtualClick(event) || isVirtualPointerEvent(event));
+      }
+    }
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+      const activeEl = activeElement(doc);
+      const isFocusInsideFloatingTree = contains(floating, activeEl) || tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
+        var _node$context5;
+        return contains((_node$context5 = node.context) == null ? void 0 : _node$context5.elements.floating, activeEl);
+      });
+      const shouldFocusReference = isFocusInsideFloatingTree || contextData.openEvent && ['click', 'mousedown'].includes(contextData.openEvent.type);
+      if (shouldFocusReference && refs.domReference.current) {
+        addPreviouslyFocusedElement(refs.domReference.current);
+      }
+      const returnElement = getPreviouslyFocusedElement();
+      if (
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(returnElement) && (
+      // If the focus moved somewhere else after mount, avoid returning focus
+      // since it likely entered a different element which should be
+      // respected: https://github.com/floating-ui/floating-ui/issues/2607
+      returnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
+        enqueueFocus(returnElement, {
+          // When dismissing nested floating elements, by the time the rAF has
+          // executed, the menus will all have been unmounted. When they try
+          // to get focused, the calls get ignored — leaving the root
+          // reference focused as desired.
+          cancelPrevious: false,
+          preventScroll: preventReturnFocusScroll
+        });
+      }
+    };
+  }, [disabled, floating, returnFocusRef, dataRef, refs, events, tree, nodeId]);
+
+  // Synchronize the `context` & `modal` value to the FloatingPortal context.
+  // It will decide whether or not it needs to render its own guards.
+  index(() => {
+    if (disabled || !portalContext) return;
+    portalContext.setFocusManagerState({
+      modal,
+      closeOnFocusOut,
+      open,
+      onOpenChange,
+      refs
+    });
+    return () => {
+      portalContext.setFocusManagerState(null);
+    };
+  }, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
+  index(() => {
+    if (disabled || !floating || typeof MutationObserver !== 'function' || ignoreInitialFocus) {
+      return;
+    }
+    const handleMutation = () => {
+      const tabIndex = floating.getAttribute('tabindex');
+      if (orderRef.current.includes('floating') || activeElement(getDocument(floating)) !== refs.domReference.current && getTabbableContent().length === 0) {
+        if (tabIndex !== '0') {
+          floating.setAttribute('tabindex', '0');
+        }
+      } else if (tabIndex !== '-1') {
+        floating.setAttribute('tabindex', '-1');
+      }
+    };
+    handleMutation();
+    const observer = new MutationObserver(handleMutation);
+    observer.observe(floating, {
+      childList: true,
+      subtree: true,
+      attributes: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [disabled, floating, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
+  function renderDismissButton(location) {
+    if (disabled || !visuallyHiddenDismiss || !modal) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(VisuallyHiddenDismiss, {
+      ref: location === 'start' ? startDismissButtonRef : endDismissButtonRef,
+      onClick: event => onOpenChange(false, event.nativeEvent)
+    }, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss');
+  }
+  const shouldRenderGuards = !disabled && guards && (isInsidePortal || modal);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldRenderGuards && /*#__PURE__*/React.createElement(FocusGuard, {
+    "data-type": "inside",
+    ref: portalContext == null ? void 0 : portalContext.beforeInsideRef,
+    onFocus: event => {
+      if (modal) {
+        const els = getTabbableElements();
+        enqueueFocus(order[0] === 'reference' ? els[0] : els[els.length - 1]);
+      } else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
+        preventReturnFocusRef.current = false;
+        if (isOutsideEvent(event, portalContext.portalNode)) {
+          const nextTabbable = getNextTabbable() || domReference;
+          nextTabbable == null || nextTabbable.focus();
+        } else {
+          var _portalContext$before;
+          (_portalContext$before = portalContext.beforeOutsideRef.current) == null || _portalContext$before.focus();
+        }
+      }
+    }
+  }), !isUntrappedTypeableCombobox && renderDismissButton('start'), children, renderDismissButton('end'), shouldRenderGuards && /*#__PURE__*/React.createElement(FocusGuard, {
+    "data-type": "inside",
+    ref: portalContext == null ? void 0 : portalContext.afterInsideRef,
+    onFocus: event => {
+      if (modal) {
+        enqueueFocus(getTabbableElements()[0]);
+      } else if (portalContext != null && portalContext.preserveTabOrder && portalContext.portalNode) {
+        if (closeOnFocusOut) {
+          preventReturnFocusRef.current = true;
+        }
+        if (isOutsideEvent(event, portalContext.portalNode)) {
+          const prevTabbable = getPreviousTabbable() || domReference;
+          prevTabbable == null || prevTabbable.focus();
+        } else {
+          var _portalContext$afterO;
+          (_portalContext$afterO = portalContext.afterOutsideRef.current) == null || _portalContext$afterO.focus();
+        }
+      }
+    }
+  }));
+}
+
+function isButtonTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+}
+function isSpaceIgnored(element) {
+  return isTypeableElement(element);
+}
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+function useClick(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    keyboardHandlers = true
+  } = props;
+  const pointerTypeRef = React.useRef();
+  const didKeyDownRef = React.useRef(false);
+  return React.useMemo(() => {
+    if (!enabled) return {};
+    return {
+      reference: {
+        onPointerDown(event) {
+          pointerTypeRef.current = event.pointerType;
+        },
+        onMouseDown(event) {
+          // Ignore all buttons except for the "main" button.
+          // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+          if (event.button !== 0) {
+            return;
+          }
+          if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {
+            return;
+          }
+          if (eventOption === 'click') {
+            return;
+          }
+          if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+            onOpenChange(false, event.nativeEvent, 'click');
+          } else {
+            // Prevent stealing focus from the floating element
+            event.preventDefault();
+            onOpenChange(true, event.nativeEvent, 'click');
+          }
+        },
+        onClick(event) {
+          if (eventOption === 'mousedown' && pointerTypeRef.current) {
+            pointerTypeRef.current = undefined;
+            return;
+          }
+          if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {
+            return;
+          }
+          if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
+            onOpenChange(false, event.nativeEvent, 'click');
+          } else {
+            onOpenChange(true, event.nativeEvent, 'click');
+          }
+        },
+        onKeyDown(event) {
+          pointerTypeRef.current = undefined;
+          if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+            return;
+          }
+          if (event.key === ' ' && !isSpaceIgnored(domReference)) {
+            // Prevent scrolling
+            event.preventDefault();
+            didKeyDownRef.current = true;
+          }
+          if (event.key === 'Enter') {
+            if (open && toggle) {
+              onOpenChange(false, event.nativeEvent, 'click');
+            } else {
+              onOpenChange(true, event.nativeEvent, 'click');
+            }
+          }
+        },
+        onKeyUp(event) {
+          if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
+            return;
+          }
+          if (event.key === ' ' && didKeyDownRef.current) {
+            didKeyDownRef.current = false;
+            if (open && toggle) {
+              onOpenChange(false, event.nativeEvent, 'click');
+            } else {
+              onOpenChange(true, event.nativeEvent, 'click');
+            }
+          }
+        }
+      }
+    };
+  }, [enabled, dataRef, eventOption, ignoreMouse, keyboardHandlers, domReference, toggle, open, onOpenChange]);
+}
+
+const bubbleHandlerKeys = {
+  pointerdown: 'onPointerDown',
+  mousedown: 'onMouseDown',
+  click: 'onClick'
+};
+const captureHandlerKeys = {
+  pointerdown: 'onPointerDownCapture',
+  mousedown: 'onMouseDownCapture',
+  click: 'onClickCapture'
+};
+const normalizeProp = normalizable => {
+  var _normalizable$escapeK, _normalizable$outside;
+  return {
+    escapeKey: typeof normalizable === 'boolean' ? normalizable : (_normalizable$escapeK = normalizable == null ? void 0 : normalizable.escapeKey) != null ? _normalizable$escapeK : false,
+    outsidePress: typeof normalizable === 'boolean' ? normalizable : (_normalizable$outside = normalizable == null ? void 0 : normalizable.outsidePress) != null ? _normalizable$outside : true
+  };
+};
+/**
+ * Closes the floating element when a dismissal is requested — by default, when
+ * the user presses the `escape` key or outside of the floating element.
+ * @see https://floating-ui.com/docs/useDismiss
+ */
+function useDismiss(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    nodeId,
+    elements: {
+      reference,
+      domReference,
+      floating
+    },
+    dataRef
+  } = context;
+  const {
+    enabled = true,
+    escapeKey = true,
+    outsidePress: unstable_outsidePress = true,
+    outsidePressEvent = 'pointerdown',
+    referencePress = false,
+    referencePressEvent = 'pointerdown',
+    ancestorScroll = false,
+    bubbles,
+    capture
+  } = props;
+  const tree = useFloatingTree();
+  const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
+  const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;
+  const insideReactTreeRef = React.useRef(false);
+  const endedOrStartedInsideRef = React.useRef(false);
+  const {
+    escapeKey: escapeKeyBubbles,
+    outsidePress: outsidePressBubbles
+  } = normalizeProp(bubbles);
+  const {
+    escapeKey: escapeKeyCapture,
+    outsidePress: outsidePressCapture
+  } = normalizeProp(capture);
+  const closeOnEscapeKeyDown = useEffectEvent(event => {
+    if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
+      return;
+    }
+    const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+    if (!escapeKeyBubbles) {
+      event.stopPropagation();
+      if (children.length > 0) {
+        let shouldDismiss = true;
+        children.forEach(child => {
+          var _child$context;
+          if ((_child$context = child.context) != null && _child$context.open && !child.context.dataRef.current.__escapeKeyBubbles) {
+            shouldDismiss = false;
+            return;
+          }
+        });
+        if (!shouldDismiss) {
+          return;
+        }
+      }
+    }
+    onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, 'escape-key');
+  });
+  const closeOnEscapeKeyDownCapture = useEffectEvent(event => {
+    var _getTarget2;
+    const callback = () => {
+      var _getTarget;
+      closeOnEscapeKeyDown(event);
+      (_getTarget = getTarget(event)) == null || _getTarget.removeEventListener('keydown', callback);
+    };
+    (_getTarget2 = getTarget(event)) == null || _getTarget2.addEventListener('keydown', callback);
+  });
+  const closeOnPressOutside = useEffectEvent(event => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = insideReactTreeRef.current;
+    insideReactTreeRef.current = false;
+
+    // When click outside is lazy (`click` event), handle dragging.
+    // Don't close if:
+    // - The click started inside the floating element.
+    // - The click ended inside the floating element.
+    const endedOrStartedInside = endedOrStartedInsideRef.current;
+    endedOrStartedInsideRef.current = false;
+    if (outsidePressEvent === 'click' && endedOrStartedInside) {
+      return;
+    }
+    if (insideReactTree) {
+      return;
+    }
+    if (typeof outsidePress === 'function' && !outsidePress(event)) {
+      return;
+    }
+    const target = getTarget(event);
+    const inertSelector = "[" + createAttribute('inert') + "]";
+    const markers = getDocument(floating).querySelectorAll(inertSelector);
+    let targetRootAncestor = isElement(target) ? target : null;
+    while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
+      const nextParent = getParentNode(targetRootAncestor);
+      if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
+        break;
+      } else {
+        targetRootAncestor = nextParent;
+      }
+    }
+
+    // Check if the click occurred on a third-party element injected after the
+    // floating element rendered.
+    if (markers.length && isElement(target) && !isRootElement(target) &&
+    // Clicked on a direct ancestor (e.g. FloatingOverlay).
+    !contains(target, floating) &&
+    // If the target root element contains none of the markers, then the
+    // element was injected after the floating element rendered.
+    Array.from(markers).every(marker => !contains(targetRootAncestor, marker))) {
+      return;
+    }
+
+    // Check if the click occurred on the scrollbar
+    if (isHTMLElement(target) && floating) {
+      // In Firefox, `target.scrollWidth > target.clientWidth` for inline
+      // elements.
+      const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+      const canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+      let xCond = canScrollY && event.offsetX > target.clientWidth;
+
+      // In some browsers it is possible to change the <body> (or window)
+      // scrollbar to the left side, but is very rare and is difficult to
+      // 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 = getComputedStyle(target).direction === 'rtl';
+        if (isRTL) {
+          xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
+        }
+      }
+      if (xCond || canScrollX && event.offsetY > target.clientHeight) {
+        return;
+      }
+    }
+    const targetIsInsideChildren = tree && getChildren(tree.nodesRef.current, nodeId).some(node => {
+      var _node$context;
+      return isEventTargetWithin(event, (_node$context = node.context) == null ? void 0 : _node$context.elements.floating);
+    });
+    if (isEventTargetWithin(event, floating) || isEventTargetWithin(event, domReference) || targetIsInsideChildren) {
+      return;
+    }
+    const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+    if (children.length > 0) {
+      let shouldDismiss = true;
+      children.forEach(child => {
+        var _child$context2;
+        if ((_child$context2 = child.context) != null && _child$context2.open && !child.context.dataRef.current.__outsidePressBubbles) {
+          shouldDismiss = false;
+          return;
+        }
+      });
+      if (!shouldDismiss) {
+        return;
+      }
+    }
+    onOpenChange(false, event, 'outside-press');
+  });
+  const closeOnPressOutsideCapture = useEffectEvent(event => {
+    var _getTarget4;
+    const callback = () => {
+      var _getTarget3;
+      closeOnPressOutside(event);
+      (_getTarget3 = getTarget(event)) == null || _getTarget3.removeEventListener(outsidePressEvent, callback);
+    };
+    (_getTarget4 = getTarget(event)) == null || _getTarget4.addEventListener(outsidePressEvent, callback);
+  });
+  React.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
+    dataRef.current.__outsidePressBubbles = outsidePressBubbles;
+    function onScroll(event) {
+      onOpenChange(false, event, 'ancestor-scroll');
+    }
+    const doc = getDocument(floating);
+    escapeKey && doc.addEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
+    outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
+    let ancestors = [];
+    if (ancestorScroll) {
+      if (isElement(domReference)) {
+        ancestors = getOverflowAncestors(domReference);
+      }
+      if (isElement(floating)) {
+        ancestors = ancestors.concat(getOverflowAncestors(floating));
+      }
+      if (!isElement(reference) && reference && reference.contextElement) {
+        ancestors = ancestors.concat(getOverflowAncestors(reference.contextElement));
+      }
+    }
+
+    // Ignore the visual viewport for scrolling dismissal (allow pinch-zoom)
+    ancestors = ancestors.filter(ancestor => {
+      var _doc$defaultView;
+      return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
+    });
+    ancestors.forEach(ancestor => {
+      ancestor.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    });
+    return () => {
+      escapeKey && doc.removeEventListener('keydown', escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture);
+      outsidePress && doc.removeEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
+      ancestors.forEach(ancestor => {
+        ancestor.removeEventListener('scroll', onScroll);
+      });
+    };
+  }, [dataRef, floating, domReference, reference, escapeKey, outsidePress, outsidePressEvent, open, onOpenChange, ancestorScroll, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, escapeKeyCapture, closeOnEscapeKeyDownCapture, closeOnPressOutside, outsidePressCapture, closeOnPressOutsideCapture]);
+  React.useEffect(() => {
+    insideReactTreeRef.current = false;
+  }, [outsidePress, outsidePressEvent]);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onKeyDown: closeOnEscapeKeyDown,
+        [bubbleHandlerKeys[referencePressEvent]]: event => {
+          if (referencePress) {
+            onOpenChange(false, event.nativeEvent, 'reference-press');
+          }
+        }
+      },
+      floating: {
+        onKeyDown: closeOnEscapeKeyDown,
+        onMouseDown() {
+          endedOrStartedInsideRef.current = true;
+        },
+        onMouseUp() {
+          endedOrStartedInsideRef.current = true;
+        },
+        [captureHandlerKeys[outsidePressEvent]]: () => {
+          insideReactTreeRef.current = true;
+        }
+      }
+    };
+  }, [enabled, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);
+}
+
+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;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    open = false,
+    onOpenChange: unstable_onOpenChange,
+    nodeId
+  } = options;
+  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);
+      }
+    }
+  }
+  const [_domReference, setDomReference] = React.useState(null);
+  const domReference = ((_options$elements2 = options.elements) == null ? void 0 : _options$elements2.reference) || _domReference;
+  const position = useFloating$1(options);
+  const tree = useFloatingTree();
+  const nested = useFloatingParentNodeId() != null;
+  const onOpenChange = useEffectEvent((open, event, reason) => {
+    if (open) {
+      dataRef.current.openEvent = event;
+    }
+    events.emit('openchange', {
+      open,
+      event,
+      reason,
+      nested
+    });
+    unstable_onOpenChange == null || unstable_onOpenChange(open, event, reason);
+  });
+  const domReferenceRef = React.useRef(null);
+  const dataRef = React.useRef({});
+  const events = React.useState(() => createPubSub())[0];
+  const floatingId = useId();
+  const setPositionReference = React.useCallback(node => {
+    const positionReference = isElement(node) ? {
+      getBoundingClientRect: () => node.getBoundingClientRect(),
+      contextElement: node
+    } : node;
+    position.refs.setReference(positionReference);
+  }, [position.refs]);
+  const setReference = React.useCallback(node => {
+    if (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 (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 && !isElement(node)) {
+      position.refs.setReference(node);
+    }
+  }, [position.refs]);
+  const refs = React.useMemo(() => ({
+    ...position.refs,
+    setReference,
+    setPositionReference,
+    domReference: domReferenceRef
+  }), [position.refs, setReference, setPositionReference]);
+  const elements = React.useMemo(() => ({
+    ...position.elements,
+    domReference: domReference
+  }), [position.elements, domReference]);
+  const context = React.useMemo(() => ({
+    ...position,
+    refs,
+    elements,
+    dataRef,
+    nodeId,
+    floatingId,
+    events,
+    open,
+    onOpenChange
+  }), [position, nodeId, floatingId, events, open, onOpenChange, refs, elements]);
+  index(() => {
+    const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
+    if (node) {
+      node.context = context;
+    }
+  });
+  return React.useMemo(() => ({
+    ...position,
+    context,
+    refs,
+    elements
+  }), [position, refs, elements, context]);
+}
+
+/**
+ * Opens the floating element while the reference element has focus, like CSS
+ * `:focus`.
+ * @see https://floating-ui.com/docs/useFocus
+ */
+function useFocus(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    events,
+    refs,
+    elements: {
+      floating,
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    visibleOnly = true
+  } = props;
+  const blockFocusRef = React.useRef(false);
+  const timeoutRef = React.useRef();
+  const keyboardModalityRef = React.useRef(true);
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const win = 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 && isHTMLElement(domReference) && domReference === activeElement(getDocument(domReference))) {
+        blockFocusRef.current = true;
+      }
+    }
+    function onKeyDown() {
+      keyboardModalityRef.current = true;
+    }
+    win.addEventListener('blur', onBlur);
+    win.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      win.removeEventListener('blur', onBlur);
+      win.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [floating, domReference, open, enabled]);
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function onOpenChange(_ref) {
+      let {
+        reason
+      } = _ref;
+      if (reason === 'reference-press' || reason === 'escape-key') {
+        blockFocusRef.current = true;
+      }
+    }
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+    };
+  }, [events, enabled]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onPointerDown(event) {
+          if (isVirtualPointerEvent(event.nativeEvent)) return;
+          keyboardModalityRef.current = false;
+        },
+        onMouseLeave() {
+          blockFocusRef.current = false;
+        },
+        onFocus(event) {
+          if (blockFocusRef.current) return;
+          const target = getTarget(event.nativeEvent);
+          if (visibleOnly && isElement(target)) {
+            try {
+              // Mac Safari unreliably matches `:focus-visible` on the reference
+              // if focus was outside the page initially - use the fallback
+              // instead.
+              if (isSafari() && isMac()) throw Error();
+              if (!target.matches(':focus-visible')) return;
+            } catch (e) {
+              // Old browsers will throw an error when using `:focus-visible`.
+              if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+                return;
+              }
+            }
+          }
+          onOpenChange(true, event.nativeEvent, 'focus');
+        },
+        onBlur(event) {
+          blockFocusRef.current = false;
+          const relatedTarget = event.relatedTarget;
+
+          // Hit the non-modal focus management portal guard. Focus will be
+          // moved into the floating element immediately after.
+          const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+
+          // Wait for the window blur listener to fire.
+          timeoutRef.current = window.setTimeout(() => {
+            const activeEl = activeElement(domReference ? domReference.ownerDocument : document);
+
+            // Focus left the page, keep it open.
+            if (!relatedTarget && activeEl === domReference) return;
+
+            // When focusing the reference element (e.g. regular click), then
+            // clicking into the floating element, prevent it from hiding.
+            // Note: it must be focusable, e.g. `tabindex="-1"`.
+            if (contains(refs.floating.current, relatedTarget) || contains(domReference, relatedTarget) || movedToFocusGuard) {
+              return;
+            }
+            onOpenChange(false, event.nativeEvent, 'focus');
+          });
+        }
+      }
+    };
+  }, [enabled, visibleOnly, domReference, refs, onOpenChange]);
+}
+
+const ACTIVE_KEY = 'active';
+const SELECTED_KEY = 'selected';
+function mergeProps(userProps, propsList, elementKey) {
+  const map = new Map();
+  const isItem = elementKey === 'item';
+  let domUserProps = userProps;
+  if (isItem && userProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      [ACTIVE_KEY]: _,
+      [SELECTED_KEY]: __,
+      ...validProps
+    } = userProps;
+    domUserProps = validProps;
+  }
+  return {
+    ...(elementKey === 'floating' && {
+      tabIndex: -1
+    }),
+    ...domUserProps,
+    ...propsList.map(value => {
+      const propsOrGetProps = value ? value[elementKey] : null;
+      if (typeof propsOrGetProps === 'function') {
+        return userProps ? propsOrGetProps(userProps) : null;
+      }
+      return propsOrGetProps;
+    }).concat(userProps).reduce((acc, props) => {
+      if (!props) {
+        return acc;
+      }
+      Object.entries(props).forEach(_ref => {
+        let [key, value] = _ref;
+        if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
+          return;
+        }
+        if (key.indexOf('on') === 0) {
+          if (!map.has(key)) {
+            map.set(key, []);
+          }
+          if (typeof value === 'function') {
+            var _map$get;
+            (_map$get = map.get(key)) == null || _map$get.push(value);
+            acc[key] = function () {
+              var _map$get2;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              return (_map$get2 = map.get(key)) == null ? void 0 : _map$get2.map(fn => fn(...args)).find(val => val !== undefined);
+            };
+          }
+        } else {
+          acc[key] = value;
+        }
+      });
+      return acc;
+    }, {})
+  };
+}
+
+/**
+ * Merges an array of interaction hooks' props into prop getters, allowing
+ * event handler functions to be composed together without overwriting one
+ * another.
+ * @see https://floating-ui.com/docs/useInteractions
+ */
+function useInteractions(propsList) {
+  if (propsList === void 0) {
+    propsList = [];
+  }
+  // The dependencies are a dynamic array, so we can't use the linter's
+  // suggestion to add it to the deps array.
+  const deps = propsList;
+  const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  deps);
+  const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  deps);
+  const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
+  // Granularly check for `item` changes, because the `getItemProps` getter
+  // should be as referentially stable as possible since it may be passed as
+  // a prop to many components. All `item` key values must therefore be
+  // memoized.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  propsList.map(key => key == null ? void 0 : key.item));
+  return React.useMemo(() => ({
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  }), [getReferenceProps, getFloatingProps, getItemProps]);
+}
+
+let isPreventScrollSupported = false;
+function doSwitch(orientation, vertical, horizontal) {
+  switch (orientation) {
+    case 'vertical':
+      return vertical;
+    case 'horizontal':
+      return horizontal;
+    default:
+      return vertical || horizontal;
+  }
+}
+function isMainOrientationKey(key, orientation) {
+  const vertical = key === ARROW_UP || key === ARROW_DOWN;
+  const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
+  return doSwitch(orientation, vertical, horizontal);
+}
+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 === '';
+}
+function isCrossOrientationOpenKey(key, orientation, rtl) {
+  const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+  const horizontal = key === ARROW_DOWN;
+  return doSwitch(orientation, vertical, horizontal);
+}
+function isCrossOrientationCloseKey(key, orientation, rtl) {
+  const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
+  const horizontal = key === ARROW_UP;
+  return doSwitch(orientation, vertical, horizontal);
+}
+/**
+ * Adds arrow key-based navigation of a list of items, either using real DOM
+ * focus or virtual focus.
+ * @see https://floating-ui.com/docs/useListNavigation
+ */
+function useListNavigation(context, props) {
+  const {
+    open,
+    onOpenChange,
+    refs,
+    elements: {
+      domReference,
+      floating
+    }
+  } = context;
+  const {
+    listRef,
+    activeIndex,
+    onNavigate: unstable_onNavigate = () => {},
+    enabled = true,
+    selectedIndex = null,
+    allowEscape = false,
+    loop = false,
+    nested = false,
+    rtl = false,
+    virtual = false,
+    focusItemOnOpen = 'auto',
+    focusItemOnHover = true,
+    openOnArrowKeyDown = true,
+    disabledIndices = undefined,
+    orientation = 'vertical',
+    cols = 1,
+    scrollItemIntoView = true,
+    virtualItemRef
+  } = props;
+  if (process.env.NODE_ENV !== "production") {
+    if (allowEscape) {
+      if (!loop) {
+        console.warn(['Floating UI: `useListNavigation` looping must be enabled to allow', 'escaping.'].join(' '));
+      }
+      if (!virtual) {
+        console.warn(['Floating UI: `useListNavigation` must be virtual to allow', 'escaping.'].join(' '));
+      }
+    }
+    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(' '));
+    }
+  }
+  const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
+  const onNavigate = useEffectEvent(unstable_onNavigate);
+  const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
+  const indexRef = React.useRef(selectedIndex != null ? selectedIndex : -1);
+  const keyRef = React.useRef(null);
+  const isPointerModalityRef = React.useRef(true);
+  const previousOnNavigateRef = React.useRef(onNavigate);
+  const previousMountedRef = React.useRef(!!floating);
+  const forceSyncFocus = React.useRef(false);
+  const forceScrollIntoViewRef = React.useRef(false);
+  const disabledIndicesRef = useLatestRef(disabledIndices);
+  const latestOpenRef = useLatestRef(open);
+  const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
+  const [activeId, setActiveId] = React.useState();
+  const [virtualId, setVirtualId] = React.useState();
+  const focusItem = useEffectEvent(function (listRef, indexRef, forceScrollIntoView) {
+    if (forceScrollIntoView === void 0) {
+      forceScrollIntoView = false;
+    }
+    const item = listRef.current[indexRef.current];
+    if (!item) return;
+    if (virtual) {
+      setActiveId(item.id);
+      tree == null || tree.events.emit('virtualfocus', item);
+      if (virtualItemRef) {
+        virtualItemRef.current = item;
+      }
+    } else {
+      enqueueFocus(item, {
+        preventScroll: true,
+        // Mac Safari does not move the virtual cursor unless the focus call
+        // is sync. However, for the very first focus call, we need to wait
+        // for the position to be ready in order to prevent unwanted
+        // scrolling. This means the virtual cursor will not move to the first
+        // item when first opening the floating element, but will on
+        // subsequent calls. `preventScroll` is supported in modern Safari,
+        // so we can use that instead.
+        // iOS Safari must be async or the first item will not be focused.
+        sync: isMac() && isSafari() ? isPreventScrollSupported || forceSyncFocus.current : false
+      });
+    }
+    requestAnimationFrame(() => {
+      const scrollIntoViewOptions = scrollItemIntoViewRef.current;
+      const shouldScrollIntoView = scrollIntoViewOptions && item && (forceScrollIntoView || !isPointerModalityRef.current);
+      if (shouldScrollIntoView) {
+        // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
+        // by all browsers.
+        item.scrollIntoView == null || item.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {
+          block: 'nearest',
+          inline: 'nearest'
+        } : scrollIntoViewOptions);
+      }
+    });
+  });
+  index(() => {
+    document.createElement('div').focus({
+      get preventScroll() {
+        isPreventScrollSupported = true;
+        return false;
+      }
+    });
+  }, []);
+
+  // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
+  // element. Also, reset `activeIndex` upon closing the floating element.
+  index(() => {
+    if (!enabled) {
+      return;
+    }
+    if (open && floating) {
+      if (focusItemOnOpenRef.current && selectedIndex != null) {
+        // Regardless of the pointer modality, we want to ensure the selected
+        // item comes into view when the floating element is opened.
+        forceScrollIntoViewRef.current = true;
+        onNavigate(selectedIndex);
+      }
+    } else if (previousMountedRef.current) {
+      // Since the user can specify `onNavigate` conditionally
+      // (onNavigate: open ? setActiveIndex : setSelectedIndex),
+      // we store and call the previous function.
+      indexRef.current = -1;
+      previousOnNavigateRef.current(null);
+    }
+  }, [enabled, open, floating, selectedIndex, onNavigate]);
+
+  // Sync `activeIndex` to be the focused item while the floating element is
+  // open.
+  index(() => {
+    if (!enabled) {
+      return;
+    }
+    if (open && floating) {
+      if (activeIndex == null) {
+        forceSyncFocus.current = false;
+        if (selectedIndex != null) {
+          return;
+        }
+
+        // Reset while the floating element was open (e.g. the list changed).
+        if (previousMountedRef.current) {
+          indexRef.current = -1;
+          focusItem(listRef, indexRef);
+        }
+
+        // Initial sync.
+        if (!previousMountedRef.current && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
+          let runs = 0;
+          const waitForListPopulated = () => {
+            if (listRef.current[0] == null) {
+              // Avoid letting the browser paint if possible on the first try,
+              // otherwise use rAF. Don't try more than twice, since something
+              // is wrong otherwise.
+              if (runs < 2) {
+                const scheduler = runs ? requestAnimationFrame : queueMicrotask;
+                scheduler(waitForListPopulated);
+              }
+              runs++;
+            } else {
+              indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? getMinIndex(listRef, disabledIndicesRef.current) : getMaxIndex(listRef, disabledIndicesRef.current);
+              keyRef.current = null;
+              onNavigate(indexRef.current);
+            }
+          };
+          waitForListPopulated();
+        }
+      } else if (!isIndexOutOfBounds(listRef, activeIndex)) {
+        indexRef.current = activeIndex;
+        focusItem(listRef, indexRef, forceScrollIntoViewRef.current);
+        forceScrollIntoViewRef.current = false;
+      }
+    }
+  }, [enabled, open, floating, activeIndex, selectedIndex, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
+
+  // Ensure the parent floating element has focus when a nested child closes
+  // to allow arrow key navigation to work after the pointer leaves the child.
+  index(() => {
+    var _nodes$find;
+    if (!enabled || floating || !tree || virtual || !previousMountedRef.current) {
+      return;
+    }
+    const nodes = tree.nodesRef.current;
+    const parent = (_nodes$find = nodes.find(node => node.id === parentId)) == null || (_nodes$find = _nodes$find.context) == null ? void 0 : _nodes$find.elements.floating;
+    const activeEl = activeElement(getDocument(floating));
+    const treeContainsActiveEl = nodes.some(node => node.context && contains(node.context.elements.floating, activeEl));
+    if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
+      parent.focus({
+        preventScroll: true
+      });
+    }
+  }, [enabled, floating, tree, parentId, virtual]);
+  index(() => {
+    if (!enabled || !tree || !virtual || parentId) return;
+    function handleVirtualFocus(item) {
+      setVirtualId(item.id);
+      if (virtualItemRef) {
+        virtualItemRef.current = item;
+      }
+    }
+    tree.events.on('virtualfocus', handleVirtualFocus);
+    return () => {
+      tree.events.off('virtualfocus', handleVirtualFocus);
+    };
+  }, [enabled, tree, virtual, parentId, virtualItemRef]);
+  index(() => {
+    previousOnNavigateRef.current = onNavigate;
+    previousMountedRef.current = !!floating;
+  });
+  index(() => {
+    if (!open) {
+      keyRef.current = null;
+    }
+  }, [open]);
+  const hasActiveIndex = activeIndex != null;
+  const item = React.useMemo(() => {
+    function syncCurrentTarget(currentTarget) {
+      if (!open) return;
+      const index = listRef.current.indexOf(currentTarget);
+      if (index !== -1) {
+        onNavigate(index);
+      }
+    }
+    const props = {
+      onFocus(_ref) {
+        let {
+          currentTarget
+        } = _ref;
+        syncCurrentTarget(currentTarget);
+      },
+      onClick: _ref2 => {
+        let {
+          currentTarget
+        } = _ref2;
+        return currentTarget.focus({
+          preventScroll: true
+        });
+      },
+      // Safari
+      ...(focusItemOnHover && {
+        onMouseMove(_ref3) {
+          let {
+            currentTarget
+          } = _ref3;
+          syncCurrentTarget(currentTarget);
+        },
+        onPointerLeave(_ref4) {
+          let {
+            pointerType
+          } = _ref4;
+          if (!isPointerModalityRef.current || pointerType === 'touch') {
+            return;
+          }
+          indexRef.current = -1;
+          focusItem(listRef, indexRef);
+          onNavigate(null);
+          if (!virtual) {
+            enqueueFocus(refs.floating.current, {
+              preventScroll: true
+            });
+          }
+        }
+      })
+    };
+    return props;
+  }, [open, refs, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    const disabledIndices = disabledIndicesRef.current;
+    function onKeyDown(event) {
+      isPointerModalityRef.current = false;
+      forceSyncFocus.current = true;
+
+      // If the floating element is animating out, ignore navigation. Otherwise,
+      // the `activeIndex` gets set to 0 despite not being open so the next time
+      // the user ArrowDowns, the first item won't be focused.
+      if (!latestOpenRef.current && event.currentTarget === refs.floating.current) {
+        return;
+      }
+      if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
+        stopEvent(event);
+        onOpenChange(false, event.nativeEvent, 'list-navigation');
+        if (isHTMLElement(domReference) && !virtual) {
+          domReference.focus();
+        }
+        return;
+      }
+      const currentIndex = indexRef.current;
+      const minIndex = getMinIndex(listRef, disabledIndices);
+      const maxIndex = getMaxIndex(listRef, disabledIndices);
+      if (event.key === 'Home') {
+        stopEvent(event);
+        indexRef.current = minIndex;
+        onNavigate(indexRef.current);
+      }
+      if (event.key === 'End') {
+        stopEvent(event);
+        indexRef.current = maxIndex;
+        onNavigate(indexRef.current);
+      }
+
+      // Grid navigation.
+      if (cols > 1) {
+        indexRef.current = getGridNavigatedIndex(listRef, {
+          event,
+          orientation,
+          loop,
+          cols,
+          disabledIndices,
+          minIndex,
+          maxIndex,
+          prevIndex: indexRef.current,
+          stopEvent: true
+        });
+        onNavigate(indexRef.current);
+        if (orientation === 'both') {
+          return;
+        }
+      }
+      if (isMainOrientationKey(event.key, orientation)) {
+        stopEvent(event);
+
+        // Reset the index if no item is focused.
+        if (open && !virtual && activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
+          indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
+          onNavigate(indexRef.current);
+          return;
+        }
+        if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
+          if (loop) {
+            indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : findNonDisabledIndex(listRef, {
+              startingIndex: currentIndex,
+              disabledIndices
+            });
+          } else {
+            indexRef.current = Math.min(maxIndex, findNonDisabledIndex(listRef, {
+              startingIndex: currentIndex,
+              disabledIndices
+            }));
+          }
+        } else {
+          if (loop) {
+            indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : findNonDisabledIndex(listRef, {
+              startingIndex: currentIndex,
+              decrement: true,
+              disabledIndices
+            });
+          } else {
+            indexRef.current = Math.max(minIndex, findNonDisabledIndex(listRef, {
+              startingIndex: currentIndex,
+              decrement: true,
+              disabledIndices
+            }));
+          }
+        }
+        if (isIndexOutOfBounds(listRef, indexRef.current)) {
+          onNavigate(null);
+        } else {
+          onNavigate(indexRef.current);
+        }
+      }
+    }
+    function checkVirtualMouse(event) {
+      if (focusItemOnOpen === 'auto' && isVirtualClick(event.nativeEvent)) {
+        focusItemOnOpenRef.current = true;
+      }
+    }
+    function checkVirtualPointer(event) {
+      // `pointerdown` fires first, reset the state then perform the checks.
+      focusItemOnOpenRef.current = focusItemOnOpen;
+      if (focusItemOnOpen === 'auto' && isVirtualPointerEvent(event.nativeEvent)) {
+        focusItemOnOpenRef.current = true;
+      }
+    }
+    const ariaActiveDescendantProp = virtual && open && hasActiveIndex && {
+      'aria-activedescendant': virtualId || activeId
+    };
+    const activeItem = listRef.current.find(item => (item == null ? void 0 : item.id) === activeId);
+    return {
+      reference: {
+        ...ariaActiveDescendantProp,
+        onKeyDown(event) {
+          isPointerModalityRef.current = false;
+          const isArrowKey = event.key.indexOf('Arrow') === 0;
+          const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
+          const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl);
+          const isMainKey = isMainOrientationKey(event.key, orientation);
+          const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';
+          if (virtual && open) {
+            const rootNode = tree == null ? void 0 : tree.nodesRef.current.find(node => node.parentId == null);
+            const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;
+            if (isArrowKey && deepestNode && virtualItemRef) {
+              const eventObject = new KeyboardEvent('keydown', {
+                key: event.key,
+                bubbles: true
+              });
+              if (isCrossOpenKey || isCrossCloseKey) {
+                var _deepestNode$context, _deepestNode$context2;
+                const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;
+                const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? activeItem : null;
+                if (dispatchItem) {
+                  stopEvent(event);
+                  dispatchItem.dispatchEvent(eventObject);
+                  setVirtualId(undefined);
+                }
+              }
+              if (isMainKey && deepestNode.context) {
+                if (deepestNode.context.open && deepestNode.parentId && event.currentTarget !== deepestNode.context.elements.domReference) {
+                  var _deepestNode$context$;
+                  stopEvent(event);
+                  (_deepestNode$context$ = deepestNode.context.elements.domReference) == null || _deepestNode$context$.dispatchEvent(eventObject);
+                  return;
+                }
+              }
+            }
+            return onKeyDown(event);
+          }
+
+          // If a floating element should not open on arrow key down, avoid
+          // setting `activeIndex` while it's closed.
+          if (!open && !openOnArrowKeyDown && isArrowKey) {
+            return;
+          }
+          if (isNavigationKey) {
+            keyRef.current = nested && isMainKey ? null : event.key;
+          }
+          if (nested) {
+            if (isCrossOpenKey) {
+              stopEvent(event);
+              if (open) {
+                indexRef.current = getMinIndex(listRef, disabledIndices);
+                onNavigate(indexRef.current);
+              } else {
+                onOpenChange(true, event.nativeEvent, 'list-navigation');
+              }
+            }
+            return;
+          }
+          if (isMainKey) {
+            if (selectedIndex != null) {
+              indexRef.current = selectedIndex;
+            }
+            stopEvent(event);
+            if (!open && openOnArrowKeyDown) {
+              onOpenChange(true, event.nativeEvent, 'list-navigation');
+            } else {
+              onKeyDown(event);
+            }
+            if (open) {
+              onNavigate(indexRef.current);
+            }
+          }
+        },
+        onFocus() {
+          if (open) {
+            onNavigate(null);
+          }
+        },
+        onPointerDown: checkVirtualPointer,
+        onMouseDown: checkVirtualMouse,
+        onClick: checkVirtualMouse
+      },
+      floating: {
+        'aria-orientation': orientation === 'both' ? undefined : orientation,
+        ...(!isTypeableCombobox(domReference) && ariaActiveDescendantProp),
+        onKeyDown,
+        onPointerMove() {
+          isPointerModalityRef.current = true;
+        }
+      },
+      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]);
+}
+
+const componentRoleToAriaRoleMap = /*#__PURE__*/new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
+
+/**
+ * Adds base screen reader props to the reference and floating elements for a
+ * given floating element `role`.
+ * @see https://floating-ui.com/docs/useRole
+ */
+function useRole(context, props) {
+  var _componentRoleToAriaR;
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    floatingId
+  } = context;
+  const {
+    enabled = true,
+    role = 'dialog'
+  } = props;
+  const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
+  const referenceId = useId();
+  const parentId = useFloatingParentNodeId();
+  const isNested = parentId != null;
+  return React.useMemo(() => {
+    if (!enabled) return {};
+    const floatingProps = {
+      id: floatingId,
+      ...(ariaRole && {
+        role: ariaRole
+      })
+    };
+    if (ariaRole === 'tooltip' || role === 'label') {
+      return {
+        reference: {
+          ["aria-" + (role === 'label' ? 'labelledby' : 'describedby')]: open ? floatingId : undefined
+        },
+        floating: floatingProps
+      };
+    }
+    return {
+      reference: {
+        'aria-expanded': open ? 'true' : 'false',
+        'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
+        'aria-controls': open ? floatingId : undefined,
+        ...(ariaRole === 'listbox' && {
+          role: 'combobox'
+        }),
+        ...(ariaRole === 'menu' && {
+          id: referenceId
+        }),
+        ...(ariaRole === 'menu' && isNested && {
+          role: 'menuitem'
+        }),
+        ...(role === 'select' && {
+          'aria-autocomplete': 'none'
+        }),
+        ...(role === 'combobox' && {
+          'aria-autocomplete': 'list'
+        })
+      },
+      floating: {
+        ...floatingProps,
+        ...(ariaRole === 'menu' && {
+          'aria-labelledby': referenceId
+        })
+      },
+      item(_ref) {
+        let {
+          active,
+          selected
+        } = _ref;
+        const commonProps = {
+          role: 'option',
+          ...(active && {
+            id: floatingId + "-option"
+          })
+        };
+
+        // For `menu`, we are unable to tell if the item is a `menuitemradio`
+        // or `menuitemcheckbox`. For backwards-compatibility reasons, also
+        // avoid defaulting to `menuitem` as it may overwrite custom role props.
+        switch (role) {
+          case 'select':
+            return {
+              ...commonProps,
+              'aria-selected': active && selected
+            };
+          case 'combobox':
+            {
+              return {
+                ...commonProps,
+                ...(active && {
+                  'aria-selected': true
+                })
+              };
+            }
+        }
+        return {};
+      }
+    };
+  }, [enabled, role, ariaRole, open, floatingId, referenceId, isNested]);
+}
+
+// Converts a JS style key like `backgroundColor` to a CSS transition-property
+// like `background-color`.
+const camelCaseToKebabCase = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+function execWithArgsOrReturn(valueOrFn, args) {
+  return typeof valueOrFn === 'function' ? valueOrFn(args) : valueOrFn;
+}
+function useDelayUnmount(open, durationMs) {
+  const [isMounted, setIsMounted] = React.useState(open);
+  if (open && !isMounted) {
+    setIsMounted(true);
+  }
+  React.useEffect(() => {
+    if (!open) {
+      const timeout = setTimeout(() => setIsMounted(false), durationMs);
+      return () => clearTimeout(timeout);
+    }
+  }, [open, durationMs]);
+  return isMounted;
+}
+/**
+ * Provides a status string to apply CSS transitions to a floating element,
+ * correctly handling placement-aware transitions.
+ * @see https://floating-ui.com/docs/useTransition#usetransitionstatus
+ */
+function useTransitionStatus(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    elements: {
+      floating
+    }
+  } = context;
+  const {
+    duration = 250
+  } = props;
+  const isNumberDuration = typeof duration === 'number';
+  const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
+  const [initiated, setInitiated] = React.useState(false);
+  const [status, setStatus] = React.useState('unmounted');
+  const isMounted = useDelayUnmount(open, closeDuration);
+
+  // `initiated` check prevents this `setState` call from breaking
+  // <FloatingPortal />. This call is necessary to ensure subsequent opens
+  // after the initial one allows the correct side animation to play when the
+  // placement has changed.
+  index(() => {
+    if (initiated && !isMounted) {
+      setStatus('unmounted');
+    }
+  }, [initiated, isMounted]);
+  index(() => {
+    if (!floating) return;
+    if (open) {
+      setStatus('initial');
+      const frame = requestAnimationFrame(() => {
+        setStatus('open');
+      });
+      return () => {
+        cancelAnimationFrame(frame);
+      };
+    } else {
+      setInitiated(true);
+      setStatus('close');
+    }
+  }, [open, floating]);
+  return {
+    isMounted,
+    status
+  };
+}
+/**
+ * Provides styles to apply CSS transitions to a floating element, correctly
+ * handling placement-aware transitions. Wrapper around `useTransitionStatus`.
+ * @see https://floating-ui.com/docs/useTransition#usetransitionstyles
+ */
+function useTransitionStyles(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    initial: unstable_initial = {
+      opacity: 0
+    },
+    open: unstable_open,
+    close: unstable_close,
+    common: unstable_common,
+    duration = 250
+  } = props;
+  const placement = context.placement;
+  const side = placement.split('-')[0];
+  const fnArgs = React.useMemo(() => ({
+    side,
+    placement
+  }), [side, placement]);
+  const isNumberDuration = typeof duration === 'number';
+  const openDuration = (isNumberDuration ? duration : duration.open) || 0;
+  const closeDuration = (isNumberDuration ? duration : duration.close) || 0;
+  const [styles, setStyles] = React.useState(() => ({
+    ...execWithArgsOrReturn(unstable_common, fnArgs),
+    ...execWithArgsOrReturn(unstable_initial, fnArgs)
+  }));
+  const {
+    isMounted,
+    status
+  } = useTransitionStatus(context, {
+    duration
+  });
+  const initialRef = useLatestRef(unstable_initial);
+  const openRef = useLatestRef(unstable_open);
+  const closeRef = useLatestRef(unstable_close);
+  const commonRef = useLatestRef(unstable_common);
+  index(() => {
+    const initialStyles = execWithArgsOrReturn(initialRef.current, fnArgs);
+    const closeStyles = execWithArgsOrReturn(closeRef.current, fnArgs);
+    const commonStyles = execWithArgsOrReturn(commonRef.current, fnArgs);
+    const openStyles = execWithArgsOrReturn(openRef.current, fnArgs) || Object.keys(initialStyles).reduce((acc, key) => {
+      acc[key] = '';
+      return acc;
+    }, {});
+    if (status === 'initial') {
+      setStyles(styles => ({
+        transitionProperty: styles.transitionProperty,
+        ...commonStyles,
+        ...initialStyles
+      }));
+    }
+    if (status === 'open') {
+      setStyles({
+        transitionProperty: Object.keys(openStyles).map(camelCaseToKebabCase).join(','),
+        transitionDuration: openDuration + "ms",
+        ...commonStyles,
+        ...openStyles
+      });
+    }
+    if (status === 'close') {
+      const styles = closeStyles || initialStyles;
+      setStyles({
+        transitionProperty: Object.keys(styles).map(camelCaseToKebabCase).join(','),
+        transitionDuration: closeDuration + "ms",
+        ...commonStyles,
+        ...styles
+      });
+    }
+  }, [closeDuration, closeRef, initialRef, openRef, commonRef, openDuration, status, fnArgs]);
+  return {
+    isMounted,
+    styles
+  };
+}
+
+export { FloatingArrow, FloatingFocusManager, FloatingPortal, getOverflowAncestors, platform, useClick, useDismiss, useFloating, useFloatingParentNodeId, useFloatingPortalNode, useFloatingTree, useFocus, useHover, useId, useInteractions, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles };