@jobber/components 6.85.2 → 6.86.0

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

@@ -230,6 +230,13 @@ function isTypeableCombobox(element) {
   return element.getAttribute('role') === 'combobox' && isTypeableElement(element);
 }
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const floor$1 = Math.floor;
+
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production_min = {};
@@ -4155,6 +4162,247 @@ function useEffectEvent(callback) {
   }, []);
 }
 
+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;
+  let index = startingIndex;
+  do {
+    index += decrement ? -amount : amount;
+  } while (index >= 0 && index <= list.length - 1 && isDisabled(list, index, disabledIndices));
+  return index;
+}
+function getGridNavigatedIndex(elementsRef, _ref) {
+  let {
+    event,
+    orientation,
+    loop,
+    rtl,
+    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$1(prevIndex / cols);
+    if (event.key === (rtl ? ARROW_LEFT : 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 === (rtl ? ARROW_RIGHT : ARROW_LEFT)) {
+      stop && stopEvent(event);
+      if (prevIndex % cols !== 0) {
+        nextIndex = findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex,
+          decrement: true,
+          disabledIndices
+        });
+        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$1(maxIndex / cols) === prevRow;
+    if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+      if (loop && lastRow) {
+        nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledIndex(elementsRef, {
+          startingIndex: prevIndex - prevIndex % cols - 1,
+          disabledIndices
+        });
+      } else {
+        nextIndex = prevIndex;
+      }
+    }
+  }
+  return nextIndex;
+}
+
+/** For each cell index, gets the item index that occupies that cell */
+function buildCellMap(sizes, cols, dense) {
+  const cellMap = [];
+  let startIndex = 0;
+  sizes.forEach((_ref2, index) => {
+    let {
+      width,
+      height
+    } = _ref2;
+    if (width > cols) {
+      if (process.env.NODE_ENV !== "production") {
+        throw new Error("[Floating UI]: Invalid grid - item width at index " + index + " is greater than grid columns");
+      }
+    }
+    let itemPlaced = false;
+    if (dense) {
+      startIndex = 0;
+    }
+    while (!itemPlaced) {
+      const targetCells = [];
+      for (let i = 0; i < width; i++) {
+        for (let j = 0; j < height; j++) {
+          targetCells.push(startIndex + i + j * cols);
+        }
+      }
+      if (startIndex % cols + width <= cols && targetCells.every(cell => cellMap[cell] == null)) {
+        targetCells.forEach(cell => {
+          cellMap[cell] = index;
+        });
+        itemPlaced = true;
+      } else {
+        startIndex++;
+      }
+    }
+  });
+
+  // convert into a non-sparse array
+  return [...cellMap];
+}
+
+/** Gets cell index of an item's corner or -1 when index is -1. */
+function getCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
+  if (index === -1) return -1;
+  const firstCellIndex = cellMap.indexOf(index);
+  const sizeItem = sizes[index];
+  switch (corner) {
+    case 'tl':
+      return firstCellIndex;
+    case 'tr':
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + sizeItem.width - 1;
+    case 'bl':
+      if (!sizeItem) {
+        return firstCellIndex;
+      }
+      return firstCellIndex + (sizeItem.height - 1) * cols;
+    case 'br':
+      return cellMap.lastIndexOf(index);
+  }
+}
+
+/** Gets all cell indices that correspond to the specified indices */
+function getCellIndices(indices, cellMap) {
+  return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
+}
+function isDisabled(list, index, disabledIndices) {
+  if (disabledIndices) {
+    return disabledIndices.includes(index);
+  }
+  const element = list[index];
+  return element == null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+}
+
 var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 let serverHandoffComplete = false;
@@ -4189,6 +4437,18 @@ let devMessageSet;
 if (process.env.NODE_ENV !== "production") {
   devMessageSet = /*#__PURE__*/new Set();
 }
+function warn() {
+  var _devMessageSet;
+  for (var _len = arguments.length, messages = new Array(_len), _key = 0; _key < _len; _key++) {
+    messages[_key] = arguments[_key];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(message))) {
+    var _devMessageSet2;
+    (_devMessageSet2 = devMessageSet) == null || _devMessageSet2.add(message);
+    console.warn(message);
+  }
+}
 function error() {
   var _devMessageSet3;
   for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
@@ -4374,6 +4634,22 @@ function getChildren(nodes, id) {
   }
   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
@@ -5942,6 +6218,574 @@ function useInteractions(propsList) {
   }), [getReferenceProps, getFloatingProps, getItemProps]);
 }
 
+const ESCAPE = 'Escape';
+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, cols) {
+  const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
+  const horizontal = key === ARROW_UP;
+  if (orientation === 'both' || orientation === 'horizontal' && cols && cols > 1) {
+    return key === ESCAPE;
+  }
+  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,
+    elements
+  } = 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,
+    itemSizes,
+    dense = false
+  } = props;
+  if (process.env.NODE_ENV !== "production") {
+    if (allowEscape) {
+      if (!loop) {
+        warn('`useListNavigation` looping must be enabled to allow escaping.');
+      }
+      if (!virtual) {
+        warn('`useListNavigation` must be virtual to allow escaping.');
+      }
+    }
+    if (orientation === 'vertical' && cols > 1) {
+      warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
+    }
+  }
+  const floatingFocusElement = getFloatingFocusElement(elements.floating);
+  const floatingFocusElementRef = useLatestRef(floatingFocusElement);
+  const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
+  index(() => {
+    context.dataRef.current.orientation = orientation;
+  }, [context, orientation]);
+  const onNavigate = useEffectEvent(() => {
+    unstable_onNavigate(indexRef.current === -1 ? null : indexRef.current);
+  });
+  const typeableComboboxReference = isTypeableCombobox(elements.domReference);
+  const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
+  const indexRef = React__namespace.useRef(selectedIndex != null ? selectedIndex : -1);
+  const keyRef = React__namespace.useRef(null);
+  const isPointerModalityRef = React__namespace.useRef(true);
+  const previousOnNavigateRef = React__namespace.useRef(onNavigate);
+  const previousMountedRef = React__namespace.useRef(!!elements.floating);
+  const previousOpenRef = React__namespace.useRef(open);
+  const forceSyncFocusRef = React__namespace.useRef(false);
+  const forceScrollIntoViewRef = React__namespace.useRef(false);
+  const disabledIndicesRef = useLatestRef(disabledIndices);
+  const latestOpenRef = useLatestRef(open);
+  const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
+  const selectedIndexRef = useLatestRef(selectedIndex);
+  const [activeId, setActiveId] = React__namespace.useState();
+  const [virtualId, setVirtualId] = React__namespace.useState();
+  const focusItem = useEffectEvent(() => {
+    function runFocus(item) {
+      if (virtual) {
+        setActiveId(item.id);
+        tree == null || tree.events.emit('virtualfocus', item);
+        if (virtualItemRef) {
+          virtualItemRef.current = item;
+        }
+      } else {
+        enqueueFocus(item, {
+          sync: forceSyncFocusRef.current,
+          preventScroll: true
+        });
+      }
+    }
+    const initialItem = listRef.current[indexRef.current];
+    if (initialItem) {
+      runFocus(initialItem);
+    }
+    const scheduler = forceSyncFocusRef.current ? v => v() : requestAnimationFrame;
+    scheduler(() => {
+      const waitedItem = listRef.current[indexRef.current] || initialItem;
+      if (!waitedItem) return;
+      if (!initialItem) {
+        runFocus(waitedItem);
+      }
+      const scrollIntoViewOptions = scrollItemIntoViewRef.current;
+      const shouldScrollIntoView = scrollIntoViewOptions && item && (forceScrollIntoViewRef.current || !isPointerModalityRef.current);
+      if (shouldScrollIntoView) {
+        // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
+        // by all browsers.
+        waitedItem.scrollIntoView == null || waitedItem.scrollIntoView(typeof scrollIntoViewOptions === 'boolean' ? {
+          block: 'nearest',
+          inline: 'nearest'
+        } : scrollIntoViewOptions);
+      }
+    });
+  });
+
+  // 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 && elements.floating) {
+      if (focusItemOnOpenRef.current && selectedIndex != null) {
+        // Regardless of the pointer modality, we want to ensure the selected
+        // item comes into view when the floating element is opened.
+        forceScrollIntoViewRef.current = true;
+        indexRef.current = selectedIndex;
+        onNavigate();
+      }
+    } 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();
+    }
+  }, [enabled, open, elements.floating, selectedIndex, onNavigate]);
+
+  // Sync `activeIndex` to be the focused item while the floating element is
+  // open.
+  index(() => {
+    if (!enabled) return;
+    if (!open) return;
+    if (!elements.floating) return;
+    if (activeIndex == null) {
+      forceSyncFocusRef.current = false;
+      if (selectedIndexRef.current != null) {
+        return;
+      }
+
+      // Reset while the floating element was open (e.g. the list changed).
+      if (previousMountedRef.current) {
+        indexRef.current = -1;
+        focusItem();
+      }
+
+      // Initial sync.
+      if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
+        let runs = 0;
+        const waitForListPopulated = () => {
+          if (listRef.current[0] == null) {
+            // 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();
+          }
+        };
+        waitForListPopulated();
+      }
+    } else if (!isIndexOutOfBounds(listRef, activeIndex)) {
+      indexRef.current = activeIndex;
+      focusItem();
+      forceScrollIntoViewRef.current = false;
+    }
+  }, [enabled, open, elements.floating, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
+
+  // Ensure the parent floating element has focus when a nested child closes
+  // to allow arrow key navigation to work after the pointer leaves the child.
+  index(() => {
+    var _nodes$find;
+    if (!enabled || elements.floating || !tree || virtual || !previousMountedRef.current) {
+      return;
+    }
+    const nodes = tree.nodesRef.current;
+    const parent = (_nodes$find = nodes.find(node => node.id === parentId)) == null || (_nodes$find = _nodes$find.context) == null ? void 0 : _nodes$find.elements.floating;
+    const activeEl = activeElement(getDocument(elements.floating));
+    const treeContainsActiveEl = nodes.some(node => node.context && contains(node.context.elements.floating, activeEl));
+    if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
+      parent.focus({
+        preventScroll: true
+      });
+    }
+  }, [enabled, elements.floating, tree, parentId, virtual]);
+  index(() => {
+    if (!enabled) return;
+    if (!tree) return;
+    if (!virtual) return;
+    if (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;
+    previousOpenRef.current = open;
+    previousMountedRef.current = !!elements.floating;
+  });
+  index(() => {
+    if (!open) {
+      keyRef.current = null;
+    }
+  }, [open]);
+  const hasActiveIndex = activeIndex != null;
+  const item = React__namespace.useMemo(() => {
+    function syncCurrentTarget(currentTarget) {
+      if (!open) return;
+      const index = listRef.current.indexOf(currentTarget);
+      if (index !== -1 && indexRef.current !== index) {
+        indexRef.current = index;
+        onNavigate();
+      }
+    }
+    const props = {
+      onFocus(_ref) {
+        let {
+          currentTarget
+        } = _ref;
+        forceSyncFocusRef.current = true;
+        syncCurrentTarget(currentTarget);
+      },
+      onClick: _ref2 => {
+        let {
+          currentTarget
+        } = _ref2;
+        return currentTarget.focus({
+          preventScroll: true
+        });
+      },
+      // Safari
+      ...(focusItemOnHover && {
+        onMouseMove(_ref3) {
+          let {
+            currentTarget
+          } = _ref3;
+          forceSyncFocusRef.current = true;
+          forceScrollIntoViewRef.current = false;
+          syncCurrentTarget(currentTarget);
+        },
+        onPointerLeave(_ref4) {
+          let {
+            pointerType
+          } = _ref4;
+          if (!isPointerModalityRef.current || pointerType === 'touch') {
+            return;
+          }
+          forceSyncFocusRef.current = true;
+          indexRef.current = -1;
+          onNavigate();
+          if (!virtual) {
+            var _floatingFocusElement;
+            (_floatingFocusElement = floatingFocusElementRef.current) == null || _floatingFocusElement.focus({
+              preventScroll: true
+            });
+          }
+        }
+      })
+    };
+    return props;
+  }, [open, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, virtual]);
+  const commonOnKeyDown = useEffectEvent(event => {
+    isPointerModalityRef.current = false;
+    forceSyncFocusRef.current = true;
+
+    // When composing a character, Chrome fires ArrowDown twice. Firefox/Safari
+    // don't appear to suffer from this. `event.isComposing` is avoided due to
+    // Safari not supporting it properly (although it's not needed in the first
+    // place for Safari, just avoiding any possible issues).
+    if (event.which === 229) {
+      return;
+    }
+
+    // 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 === floatingFocusElementRef.current) {
+      return;
+    }
+    if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl, cols)) {
+      stopEvent(event);
+      onOpenChange(false, event.nativeEvent, 'list-navigation');
+      if (isHTMLElement$1(elements.domReference)) {
+        if (virtual) {
+          tree == null || tree.events.emit('virtualfocus', elements.domReference);
+        } else {
+          elements.domReference.focus();
+        }
+      }
+      return;
+    }
+    const currentIndex = indexRef.current;
+    const minIndex = getMinIndex(listRef, disabledIndices);
+    const maxIndex = getMaxIndex(listRef, disabledIndices);
+    if (!typeableComboboxReference) {
+      if (event.key === 'Home') {
+        stopEvent(event);
+        indexRef.current = minIndex;
+        onNavigate();
+      }
+      if (event.key === 'End') {
+        stopEvent(event);
+        indexRef.current = maxIndex;
+        onNavigate();
+      }
+    }
+
+    // Grid navigation.
+    if (cols > 1) {
+      const sizes = itemSizes || Array.from({
+        length: listRef.current.length
+      }, () => ({
+        width: 1,
+        height: 1
+      }));
+      // To calculate movements on the grid, we use hypothetical cell indices
+      // as if every item was 1x1, then convert back to real indices.
+      const cellMap = buildCellMap(sizes, cols, dense);
+      const minGridIndex = cellMap.findIndex(index => index != null && !isDisabled(listRef.current, index, disabledIndices));
+      // last enabled index
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[getGridNavigatedIndex({
+        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
+      }, {
+        event,
+        orientation,
+        loop,
+        rtl,
+        cols,
+        // treat undefined (empty grid spaces) as disabled indices so we
+        // don't end up in them
+        disabledIndices: getCellIndices([...(disabledIndices || listRef.current.map((_, index) => isDisabled(listRef.current, index) ? index : undefined)), undefined], cellMap),
+        minIndex: minGridIndex,
+        maxIndex: maxGridIndex,
+        prevIndex: getCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
+        // use a corner matching the edge closest to the direction
+        // we're moving in so we don't end up in the same item. Prefer
+        // top/left over bottom/right.
+        event.key === ARROW_DOWN ? 'bl' : event.key === (rtl ? ARROW_LEFT : ARROW_RIGHT) ? 'tr' : 'tl'),
+        stopEvent: true
+      })];
+      if (index != null) {
+        indexRef.current = index;
+        onNavigate();
+      }
+      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();
+        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)) {
+        indexRef.current = -1;
+      }
+      onNavigate();
+    }
+  });
+  const ariaActiveDescendantProp = React__namespace.useMemo(() => {
+    return virtual && open && hasActiveIndex && {
+      'aria-activedescendant': virtualId || activeId
+    };
+  }, [virtual, open, hasActiveIndex, virtualId, activeId]);
+  const floating = React__namespace.useMemo(() => {
+    return {
+      'aria-orientation': orientation === 'both' ? undefined : orientation,
+      ...(!typeableComboboxReference ? ariaActiveDescendantProp : {}),
+      onKeyDown: commonOnKeyDown,
+      onPointerMove() {
+        isPointerModalityRef.current = true;
+      }
+    };
+  }, [ariaActiveDescendantProp, commonOnKeyDown, orientation, typeableComboboxReference]);
+  const reference = React__namespace.useMemo(() => {
+    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;
+      }
+    }
+    return {
+      ...ariaActiveDescendantProp,
+      onKeyDown(event) {
+        var _tree$nodesRef$curren;
+        isPointerModalityRef.current = false;
+        const isArrowKey = event.key.startsWith('Arrow');
+        const isHomeOrEndKey = ['Home', 'End'].includes(event.key);
+        const isMoveKey = isArrowKey || isHomeOrEndKey;
+        const parentOrientation = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.dataRef) == null ? void 0 : _tree$nodesRef$curren.current.orientation;
+        const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
+        const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl, cols);
+        const isParentCrossOpenKey = isCrossOrientationOpenKey(event.key, parentOrientation, rtl);
+        const isMainKey = isMainOrientationKey(event.key, orientation);
+        const isNavigationKey = (nested ? isParentCrossOpenKey : 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 (isMoveKey && deepestNode && virtualItemRef) {
+            const eventObject = new KeyboardEvent('keydown', {
+              key: event.key,
+              bubbles: true
+            });
+            if (isCrossOpenKey || isCrossCloseKey) {
+              var _deepestNode$context, _deepestNode$context2;
+              const isCurrentTarget = ((_deepestNode$context = deepestNode.context) == null ? void 0 : _deepestNode$context.elements.domReference) === event.currentTarget;
+              const dispatchItem = isCrossCloseKey && !isCurrentTarget ? (_deepestNode$context2 = deepestNode.context) == null ? void 0 : _deepestNode$context2.elements.domReference : isCrossOpenKey ? listRef.current.find(item => (item == null ? void 0 : item.id) === activeId) : null;
+              if (dispatchItem) {
+                stopEvent(event);
+                dispatchItem.dispatchEvent(eventObject);
+                setVirtualId(undefined);
+              }
+            }
+            if ((isMainKey || isHomeOrEndKey) && 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 commonOnKeyDown(event);
+        }
+        // If a floating element should not open on arrow key down, avoid
+        // setting `activeIndex` while it's closed.
+        if (!open && !openOnArrowKeyDown && isArrowKey) {
+          return;
+        }
+        if (isNavigationKey) {
+          const isParentMainKey = isMainOrientationKey(event.key, parentOrientation);
+          keyRef.current = nested && isParentMainKey ? null : event.key;
+        }
+        if (nested) {
+          if (isParentCrossOpenKey) {
+            stopEvent(event);
+            if (open) {
+              indexRef.current = getMinIndex(listRef, disabledIndicesRef.current);
+              onNavigate();
+            } 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 {
+            commonOnKeyDown(event);
+          }
+          if (open) {
+            onNavigate();
+          }
+        }
+      },
+      onFocus() {
+        if (open && !virtual) {
+          indexRef.current = -1;
+          onNavigate();
+        }
+      },
+      onPointerDown: checkVirtualPointer,
+      onPointerEnter: checkVirtualPointer,
+      onMouseDown: checkVirtualMouse,
+      onClick: checkVirtualMouse
+    };
+  }, [activeId, ariaActiveDescendantProp, cols, commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, onOpenChange, open, openOnArrowKeyDown, orientation, parentId, rtl, selectedIndex, tree, virtual, virtualItemRef]);
+  return React__namespace.useMemo(() => enabled ? {
+    reference,
+    floating,
+    item
+  } : {}, [enabled, reference, floating, item]);
+}
+
 const componentRoleToAriaRoleMap = /*#__PURE__*/new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
 
 /**
@@ -6050,6 +6894,148 @@ function useRole(context, props) {
   } : {}, [enabled, reference, floating, item]);
 }
 
+// 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__namespace.useState(open);
+  if (open && !isMounted) {
+    setIsMounted(true);
+  }
+  React__namespace.useEffect(() => {
+    if (!open && isMounted) {
+      const timeout = setTimeout(() => setIsMounted(false), durationMs);
+      return () => clearTimeout(timeout);
+    }
+  }, [open, isMounted, 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 [status, setStatus] = React__namespace.useState('unmounted');
+  const isMounted = useDelayUnmount(open, closeDuration);
+  if (!isMounted && status === 'close') {
+    setStatus('unmounted');
+  }
+  index(() => {
+    if (!floating) return;
+    if (open) {
+      setStatus('initial');
+      const frame = requestAnimationFrame(() => {
+        setStatus('open');
+      });
+      return () => {
+        cancelAnimationFrame(frame);
+      };
+    }
+    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__namespace.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__namespace.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
+  };
+}
+
 exports.FloatingFocusManager = FloatingFocusManager;
 exports.FloatingNode = FloatingNode;
 exports.FloatingOverlay = FloatingOverlay;
@@ -6069,4 +7055,6 @@ exports.useFloating = useFloating;
 exports.useFloatingNodeId = useFloatingNodeId;
 exports.useFloatingParentNodeId = useFloatingParentNodeId;
 exports.useInteractions = useInteractions;
+exports.useListNavigation = useListNavigation;
 exports.useRole = useRole;
+exports.useTransitionStyles = useTransitionStyles;