@msviderok/base-ui-solid 1.0.0-beta.1

package/esm/floating-ui-solid/hooks/useListNavigation.js

@@ -0,0 +1,673 @@
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { batch, createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js';
+import { activeElement, contains, createGridCellMap, findNonDisabledListIndex, getDeepestNode, getDocument, getFloatingFocusElement, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex, isIndexOutOfListBounds, isListIndexDisabled, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils.js";
+import { access } from "../../solid-helpers.js";
+import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from "../utils/constants.js";
+import { enqueueFocus } from "../utils/enqueueFocus.js";
+export 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
+ */
+export function useListNavigation(contextProp, props) {
+  const context = () => access(contextProp);
+  const enabled = () => access(props.enabled) ?? true;
+  const selectedIndex = () => access(props.selectedIndex) ?? null;
+  const allowEscape = () => access(props.allowEscape) ?? false;
+  const loop = () => access(props.loop) ?? false;
+  const nested = () => access(props.nested) ?? false;
+  const rtl = () => access(props.rtl) ?? false;
+  const virtual = () => access(props.virtual) ?? false;
+  const focusItemOnHover = () => access(props.focusItemOnHover) ?? true;
+  const openOnArrowKeyDown = () => access(props.openOnArrowKeyDown) ?? true;
+  const orientation = () => access(props.orientation) ?? 'vertical';
+  const cols = () => access(props.cols) ?? 1;
+  const scrollItemIntoView = () => access(props.scrollItemIntoView) ?? true;
+  const dense = () => access(props.dense) ?? false;
+  const listRef = () => access(props.listRef);
+  const focusItemOnOpenProp = () => access(props.focusItemOnOpen) ?? 'auto';
+  const activeIndex = () => access(props.activeIndex);
+  const disabledIndices = createMemo(() => {
+    if (typeof props.disabledIndices === 'function') {
+      return props.disabledIndices.length > 0 ? props.disabledIndices : props.disabledIndices();
+    }
+    return props.disabledIndices;
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    if (allowEscape()) {
+      if (!loop()) {
+        console.warn('`useListNavigation` looping must be enabled to allow escaping.');
+      }
+      if (!virtual()) {
+        console.warn('`useListNavigation` must be virtual to allow escaping.');
+      }
+    }
+    if (orientation() === 'vertical' && cols() > 1) {
+      console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
+    }
+  }
+  const floatingFocusElement = () => {
+    const floating = context().elements.floating();
+    return getFloatingFocusElement(floating);
+  };
+  const parentId = useFloatingParentNodeId();
+  const tree = useFloatingTree();
+  createEffect(() => {
+    context().dataRef.orientation = orientation();
+  });
+
+  /**
+   * TODO: this needs to be memoized as it causes an infinite loop
+   * with the MenuRoot triggerElement assignement
+   */
+  const typeableComboboxReference = createMemo(() => isTypeableCombobox(context().elements.domReference()));
+  let indexRef = selectedIndex() ?? -1;
+  let keyRef = null;
+  let isPointerModalityRef = true;
+  let forceSyncFocusRef = false;
+  let forceScrollIntoViewRef = false;
+  let previousMountedRef = false;
+  let previousOpenRef = false;
+  createEffect(on(() => context().elements.floating(), () => {
+    onCleanup(() => {
+      previousMountedRef = false;
+      previousOpenRef = false;
+    });
+  }));
+  const [focusItemOnOpen, setFocusItemOnOpen] = createSignal(focusItemOnOpenProp());
+  const [activeId, setActiveId] = createSignal();
+  const [virtualId, setVirtualId] = createSignal();
+  const onNavigate = () => {
+    props.onNavigate?.(indexRef === -1 ? null : indexRef);
+  };
+  const focusItem = () => {
+    function runFocus(item) {
+      if (virtual()) {
+        if (item.id?.endsWith('-fui-option')) {
+          item.id = `${context().floatingId()}-${Math.random().toString(16).slice(2, 10)}`;
+        }
+        setActiveId(item.id);
+        tree?.events.emit('virtualfocus', item);
+        if (props.refs) {
+          props.refs.virtualItemRef = item;
+        }
+      } else {
+        enqueueFocus(item, {
+          sync: forceSyncFocusRef,
+          preventScroll: true
+        });
+      }
+    }
+    const initialItem = listRef()?.[indexRef];
+    const forceScrollIntoView = forceScrollIntoViewRef;
+    if (initialItem) {
+      runFocus(initialItem);
+    }
+    const scheduler = forceSyncFocusRef ? v => v() : requestAnimationFrame;
+    scheduler(() => {
+      const waitedItem = listRef()[indexRef] || initialItem;
+      if (!waitedItem) {
+        return;
+      }
+      if (!initialItem) {
+        runFocus(waitedItem);
+      }
+      const scrollIntoViewOptions = scrollItemIntoView();
+      const shouldScrollIntoView =
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      scrollIntoViewOptions && item() && (forceScrollIntoView || !isPointerModalityRef);
+      if (shouldScrollIntoView) {
+        // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
+        // by all browsers.
+        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.
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    if (context().open() && context().elements.floating()) {
+      const selected = selectedIndex();
+      if (focusItemOnOpen() && selected != null) {
+        // Regardless of the pointer modality, we want to ensure the selected
+        // item comes into view when the floating element is opened.
+        forceScrollIntoViewRef = true;
+        indexRef = selected;
+        onNavigate();
+      }
+    } else if (previousMountedRef) {
+      indexRef = -1;
+      onNavigate();
+    }
+  });
+
+  // Sync `activeIndex` to be the focused item while the floating element is
+  // open.
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    const open = context().open();
+    if (!open) {
+      return;
+    }
+    const floating = context().elements.floating();
+    if (!floating) {
+      return;
+    }
+    const idx = activeIndex();
+    const list = listRef();
+    if (idx == null) {
+      forceSyncFocusRef = false;
+      if (selectedIndex() != null) {
+        return;
+      }
+
+      // Reset while the floating element was open (e.g. the list changed).
+      if (previousMountedRef) {
+        indexRef = -1;
+        focusItem();
+      }
+
+      // Initial sync.
+      if ((!previousOpenRef || !previousMountedRef) && focusItemOnOpen() && (keyRef != null || focusItemOnOpen() === true && keyRef == null)) {
+        let runs = 0;
+        const waitForListPopulated = () => {
+          if (list[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 += 1;
+          } else {
+            indexRef = keyRef == null || isMainOrientationToEndKey(keyRef, orientation(), rtl()) || nested() ? getMinListIndex(list, disabledIndices()) : getMaxListIndex(list, disabledIndices());
+            keyRef = null;
+            previousMountedRef = true;
+            previousOpenRef = true;
+            onNavigate();
+          }
+        };
+        waitForListPopulated();
+      }
+    } else if (!isIndexOutOfListBounds(list, idx)) {
+      indexRef = idx;
+      focusItem();
+      forceScrollIntoViewRef = false;
+      previousMountedRef = true;
+      previousOpenRef = true;
+    }
+  });
+
+  // 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.
+  createEffect(() => {
+    if (!enabled() || context().elements.floating() || !tree || virtual() || !previousMountedRef) {
+      return;
+    }
+    const nodes = tree.nodesRef;
+    const parentNode = nodes.find(node => node.id === parentId);
+    const parent = parentNode ? access(parentNode.context)?.elements.floating() : undefined;
+    const floating = context().elements.floating();
+    const activeEl = activeElement(getDocument(floating));
+    const treeContainsActiveEl = nodes.some(node => node.context && contains(access(node.context)?.elements.floating(), activeEl));
+    if (parent && !treeContainsActiveEl && isPointerModalityRef) {
+      parent.focus({
+        preventScroll: true
+      });
+    }
+  });
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    if (!tree) {
+      return;
+    }
+    if (!virtual()) {
+      return;
+    }
+    if (parentId) {
+      return;
+    }
+    function handleVirtualFocus(item) {
+      setVirtualId(item.id);
+      if (props.refs) {
+        props.refs.virtualItemRef = item;
+      }
+    }
+    tree.events.on('virtualfocus', handleVirtualFocus);
+    onCleanup(() => {
+      tree.events.off('virtualfocus', handleVirtualFocus);
+    });
+  });
+  createEffect(() => {
+    if (!context().open()) {
+      keyRef = null;
+      setFocusItemOnOpen(focusItemOnOpenProp());
+    }
+  });
+  const hasActiveIndex = () => activeIndex() != null;
+  const item = createMemo(() => {
+    function syncCurrentTarget(currentTarget) {
+      if (!context().open()) {
+        return;
+      }
+      const index = listRef().indexOf(currentTarget);
+      if (index !== -1 && indexRef !== index) {
+        indexRef = index;
+        onNavigate();
+      }
+    }
+    const itemProps = {
+      onFocus({
+        currentTarget
+      }) {
+        forceSyncFocusRef = true;
+        syncCurrentTarget(currentTarget);
+      },
+      onClick: ({
+        currentTarget
+      }) => currentTarget.focus({
+        preventScroll: true
+      }),
+      // Safari
+      onMouseMove({
+        currentTarget
+      }) {
+        forceSyncFocusRef = true;
+        forceScrollIntoViewRef = false;
+        if (focusItemOnHover()) {
+          syncCurrentTarget(currentTarget);
+        }
+      },
+      onPointerLeave({
+        pointerType
+      }) {
+        if (!isPointerModalityRef || pointerType === 'touch') {
+          return;
+        }
+        forceSyncFocusRef = true;
+        if (!focusItemOnHover()) {
+          return;
+        }
+        indexRef = -1;
+        onNavigate();
+        if (!virtual()) {
+          floatingFocusElement()?.focus({
+            preventScroll: true
+          });
+        }
+      }
+    };
+    return itemProps;
+  });
+  const getParentOrientation = () => {
+    const parentOrientation = access(props.parentOrientation);
+    if (parentOrientation) {
+      return parentOrientation;
+    }
+    const parentNode = tree?.nodesRef?.find(node => node.id === parentId);
+    return parentNode ? access(parentNode.context)?.dataRef?.orientation : undefined;
+  };
+  const commonOnKeyDown = event => {
+    isPointerModalityRef = false;
+    forceSyncFocusRef = 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 (!context().open() && event.currentTarget === floatingFocusElement() && !context().dataRef.__closing) {
+      return;
+    }
+    if (nested() && isCrossOrientationCloseKey(event.key, orientation(), rtl(), cols())) {
+      // If the nested list's close key is also the parent navigation key,
+      // let the parent navigate. Otherwise, stop propagating the event.
+      if (!isMainOrientationKey(event.key, getParentOrientation())) {
+        stopEvent(event);
+        if (context().dataRef.__closing) {
+          event.stopImmediatePropagation();
+          delete context().dataRef.__closing;
+        }
+      }
+
+      // TODO: explain this
+      queueMicrotask(() => {
+        context().onOpenChange(false, event, 'list-navigation');
+      });
+      const domReference = context().elements.domReference();
+      if (isHTMLElement(domReference)) {
+        if (virtual()) {
+          tree?.events.emit('virtualfocus', domReference);
+        } else {
+          domReference.focus();
+        }
+      }
+      return;
+    }
+    const currentIndex = indexRef;
+    const minIndex = getMinListIndex(listRef(), disabledIndices());
+    const maxIndex = getMaxListIndex(listRef(), disabledIndices());
+    if (!typeableComboboxReference()) {
+      if (event.key === 'Home') {
+        stopEvent(event);
+        indexRef = minIndex;
+        onNavigate();
+      }
+      if (event.key === 'End') {
+        stopEvent(event);
+        indexRef = maxIndex;
+        onNavigate();
+      }
+    }
+
+    // Grid navigation.
+    if (cols() > 1) {
+      const sizes = access(props.itemSizes) || Array.from({
+        length: listRef().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 = createGridCellMap(sizes, cols(), dense());
+      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef(), index, disabledIndices()));
+      // last enabled index
+      const maxGridIndex = cellMap.reduce(
+      // eslint-disable-next-line solid/reactivity
+      (foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef(), index, disabledIndices()) ? cellIndex : foundIndex, -1);
+      const index = cellMap[getGridNavigatedIndex(cellMap.map(itemIndex => itemIndex != null ? listRef()[itemIndex] : null), {
+        event,
+        orientation: orientation(),
+        loop: loop(),
+        rtl: rtl(),
+        cols: cols(),
+        // treat undefined (empty grid spaces) as disabled indices so we
+        // don't end up in them
+        // TODO: I'm not sure if this is "the best" way to do this
+        disabledIndices: () => getGridCellIndices([...listRef().map((_, listIndex) => isListIndexDisabled(listRef(), listIndex, disabledIndices()) ? listIndex : undefined), undefined], cellMap),
+        minIndex: minGridIndex,
+        maxIndex: maxGridIndex,
+        prevIndex: getGridCellIndexOfCorner(indexRef > maxIndex ? minIndex : indexRef, 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.
+        // eslint-disable-next-line no-nested-ternary
+        event.key === ARROW_DOWN ? 'bl' : event.key === (rtl() ? ARROW_LEFT : ARROW_RIGHT) ? 'tr' : 'tl'),
+        stopEvent: true
+      })];
+      if (index != null) {
+        indexRef = index;
+        onNavigate();
+      }
+      if (orientation() === 'both') {
+        return;
+      }
+    }
+    if (isMainOrientationKey(event.key, orientation())) {
+      stopEvent(event);
+
+      // Reset the index if no item is focused.
+      if (context().open() && !virtual() && activeElement(event.currentTarget?.ownerDocument) === event.currentTarget) {
+        const newIndex = isMainOrientationToEndKey(event.key, orientation(), rtl()) ? minIndex : maxIndex;
+        indexRef = newIndex;
+        onNavigate();
+        return;
+      }
+      if (isMainOrientationToEndKey(event.key, orientation(), rtl())) {
+        if (loop()) {
+          indexRef =
+          // eslint-disable-next-line no-nested-ternary
+          currentIndex >= maxIndex ? allowEscape() && currentIndex !== listRef().length ? -1 : minIndex : findNonDisabledListIndex(listRef(), {
+            startingIndex: currentIndex,
+            disabledIndices: disabledIndices()
+          });
+        } else {
+          const newIndex = Math.min(maxIndex, findNonDisabledListIndex(listRef(), {
+            startingIndex: currentIndex,
+            disabledIndices: disabledIndices()
+          }));
+          indexRef = newIndex;
+        }
+      }
+      if (!isMainOrientationToEndKey(event.key, orientation(), rtl())) {
+        if (loop()) {
+          indexRef =
+          // eslint-disable-next-line no-nested-ternary
+          currentIndex <= minIndex ? allowEscape() && currentIndex !== -1 ? listRef().length : maxIndex : findNonDisabledListIndex(listRef(), {
+            startingIndex: currentIndex,
+            decrement: true,
+            disabledIndices: disabledIndices()
+          });
+        } else {
+          const newIndex = Math.max(minIndex, findNonDisabledListIndex(listRef(), {
+            startingIndex: currentIndex,
+            decrement: true,
+            disabledIndices: disabledIndices()
+          }));
+          indexRef = newIndex;
+        }
+      }
+      if (isIndexOutOfListBounds(listRef(), indexRef)) {
+        indexRef = -1;
+      }
+      onNavigate();
+    }
+  };
+  const ariaActiveDescendantProp = () => {
+    return virtual() && context().open() && hasActiveIndex() && {
+      'aria-activedescendant': virtualId() || activeId()
+    };
+  };
+  const floating = createMemo(() => {
+    const typesafeOrientation = orientation();
+    return {
+      'aria-orientation': typesafeOrientation === 'both' ? undefined : typesafeOrientation,
+      ...(!typeableComboboxReference() ? ariaActiveDescendantProp() : {}),
+      onKeyDown: event => {
+        commonOnKeyDown(event);
+        // Manually bubble across portals only if propagation wasn't stopped
+        // by commonOnKeyDown (mirrors React's natural bubbling behavior).
+        if (parentId != null && !event.cancelBubble) {
+          const eventObject = new KeyboardEvent('keydown', {
+            key: event.key
+          });
+          const parentNode = tree && parentId != null ? tree?.nodesRef.find(node => node.id === parentId) : null;
+          if (parentNode) {
+            parentNode.context?.elements.floating()?.dispatchEvent(eventObject);
+          }
+        }
+      },
+      onPointerMove: () => {
+        isPointerModalityRef = true;
+      }
+    };
+  });
+  const reference = createMemo(() => {
+    // TODO: This is a hack to get the event type to work.
+    function checkVirtualMouse(event) {
+      if (focusItemOnOpen() === 'auto' && isVirtualClick(event)) {
+        setFocusItemOnOpen(true);
+      }
+    }
+    function checkVirtualPointer(event) {
+      // `pointerdown` fires first, reset the state then perform the checks.
+      batch(() => {
+        setFocusItemOnOpen(focusItemOnOpen());
+        if (focusItemOnOpen() === 'auto' && isVirtualPointerEvent(event)) {
+          setFocusItemOnOpen(true);
+        }
+      });
+    }
+
+    /**
+     * We need to store the open state at the start of the function
+     * because changes in Solid's state are synchronous, while the
+     * React's state is asynchronous.
+     */
+    const openAtStart = context().open();
+    return {
+      ...ariaActiveDescendantProp(),
+      onKeyDown: event => {
+        isPointerModalityRef = false;
+        const isArrowKey = event.key.startsWith('Arrow');
+        const isHomeOrEndKey = ['Home', 'End'].includes(event.key);
+        const isMoveKey = isArrowKey || isHomeOrEndKey;
+        const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation(), rtl());
+        const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation(), rtl(), cols());
+        const isParentCrossOpenKey = isCrossOrientationOpenKey(event.key, getParentOrientation(), rtl());
+        const isMainKey = isMainOrientationKey(event.key, orientation());
+        const isNavigationKey = (nested() ? isParentCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';
+        if (virtual() && openAtStart) {
+          const rootNode = tree?.nodesRef.find(node => node.parentId == null);
+          const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef, rootNode.id) : null;
+          if (isMoveKey && deepestNode && props.refs?.virtualItemRef) {
+            const eventObject = new KeyboardEvent('keydown', {
+              key: event.key,
+              bubbles: true
+            });
+            if (isCrossOpenKey || isCrossCloseKey) {
+              const isCurrentTarget = access(deepestNode.context)?.elements.domReference() === event.currentTarget;
+              const dispatchItem =
+              // eslint-disable-next-line no-nested-ternary
+              isCrossCloseKey && !isCurrentTarget ? access(deepestNode.context)?.elements.domReference() : isCrossOpenKey ? listRef().find(currentItem => currentItem?.id === activeId()) : null;
+              if (dispatchItem) {
+                stopEvent(event);
+                dispatchItem.dispatchEvent(eventObject);
+                setVirtualId(undefined);
+              }
+            }
+            const deepestNodeContext = access(deepestNode.context);
+            if ((isMainKey || isHomeOrEndKey) && deepestNodeContext) {
+              if (deepestNodeContext.open() && deepestNode.parentId && event.currentTarget !== access(deepestNodeContext)?.elements.domReference()) {
+                stopEvent(event);
+                access(deepestNodeContext)?.elements.domReference()?.dispatchEvent(eventObject);
+                return;
+              }
+            }
+          }
+          commonOnKeyDown(event);
+          return;
+        }
+
+        // If a floating element should not open on arrow key down, avoid
+        // setting `activeIndex` while it's closed.
+        if (!openAtStart && !openOnArrowKeyDown() && isArrowKey) {
+          return;
+        }
+        if (isNavigationKey) {
+          const isParentMainKey = isMainOrientationKey(event.key, getParentOrientation());
+          keyRef = nested() && isParentMainKey ? null : event.key;
+        }
+        if (nested()) {
+          if (isParentCrossOpenKey) {
+            stopEvent(event);
+            if (openAtStart) {
+              const newIndex = getMinListIndex(listRef(), disabledIndices());
+              indexRef = newIndex;
+              onNavigate();
+            } else {
+              context().onOpenChange(true, event, 'list-navigation');
+            }
+          }
+          return;
+        }
+        if (isMainKey) {
+          const selected = selectedIndex();
+          if (selected != null) {
+            indexRef = selected;
+          }
+          stopEvent(event);
+          if (!openAtStart && openOnArrowKeyDown()) {
+            /**
+             * This will cause a synchronous change in the open state which
+             * failes the next check for openAtStart.
+             */
+            context().onOpenChange(true, event, 'list-navigation');
+          } else {
+            commonOnKeyDown(event);
+          }
+          if (openAtStart) {
+            onNavigate();
+          }
+        }
+        return;
+      },
+      onFocus: _event => {
+        if (openAtStart && !virtual()) {
+          indexRef = -1;
+          onNavigate();
+        }
+      },
+      onPointerDown: checkVirtualPointer,
+      onPointerEnter: checkVirtualPointer,
+      onMouseDown: checkVirtualMouse,
+      onClick: checkVirtualMouse
+    };
+  });
+  const returnValue = createMemo(() => {
+    if (!enabled()) {
+      return {};
+    }
+    return {
+      reference: reference(),
+      floating: floating(),
+      item: item()
+    };
+  });
+  return returnValue;
+}

package/esm/floating-ui-solid/hooks/useRole.d.ts

@@ -0,0 +1,25 @@
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { ElementProps, FloatingRootContext } from "../types.js";
+type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
+type ComponentRole = 'select' | 'label' | 'combobox';
+export interface UseRoleProps {
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: MaybeAccessor<boolean>;
+  /**
+   * The role of the floating element.
+   * @default 'dialog'
+   */
+  role?: MaybeAccessor<AriaRole | ComponentRole>;
+}
+/**
+ * Adds base screen reader props to the reference and floating elements for a
+ * given floating element `role`.
+ * @see https://floating-ui.com/docs/useRole
+ */
+export declare function useRole(contextProp: MaybeAccessor<FloatingRootContext>, props?: UseRoleProps): Accessor<ElementProps>;
+export {};