@base-ui/react 1.6.0 → 1.7.0

package/floating-ui-react/hooks/useClick.js

@@ -69,7 +69,11 @@ function useClick(context, props = {}) {
     }
     return {
       onPointerDown(event) {
-        pointerTypeRef.current = event.pointerType;
+        // Screen reader activations (Android TalkBack, desktop screen readers) report a
+        // mouse-like `pointerType`, but `ignoreMouse` must not drop them: hover logic cannot
+        // open for a virtual press since there is no real pointer movement to wait for.
+        // Virtual `touch` presses (iOS VoiceOver) keep their type so `touchOpenDelay` applies.
+        pointerTypeRef.current = (0, _event.isMouseLikePointerType)(event.pointerType, true) && (0, _event.isVirtualPointerEvent)(event.nativeEvent) ? 'virtual' : event.pointerType;
       },
       onMouseDown(event) {
         const pointerType = pointerTypeRef.current;

package/floating-ui-react/hooks/useClick.mjs

@@ -5,7 +5,7 @@ import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { getTarget, isTypeableElement } from "../utils/element.mjs";
-import { isMouseLikePointerType } from "../utils/event.mjs";
+import { isMouseLikePointerType, isVirtualPointerEvent } from "../utils/event.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 /**
@@ -63,7 +63,11 @@ export function useClick(context, props = {}) {
     }
     return {
       onPointerDown(event) {
-        pointerTypeRef.current = event.pointerType;
+        // Screen reader activations (Android TalkBack, desktop screen readers) report a
+        // mouse-like `pointerType`, but `ignoreMouse` must not drop them: hover logic cannot
+        // open for a virtual press since there is no real pointer movement to wait for.
+        // Virtual `touch` presses (iOS VoiceOver) keep their type so `touchOpenDelay` applies.
+        pointerTypeRef.current = isMouseLikePointerType(event.pointerType, true) && isVirtualPointerEvent(event.nativeEvent) ? 'virtual' : event.pointerType;
       },
       onMouseDown(event) {
         const pointerType = pointerTypeRef.current;

package/floating-ui-react/hooks/useDismiss.js

@@ -145,7 +145,7 @@ function useDismiss(context, props = {}) {
   });
   React.useEffect(() => {
     if (!open || !enabled) {
-      return undefined;
+      return clearInsideReactTree;
     }
     dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
     dataRef.current.__outsidePressBubbles = outsidePressBubbles;
@@ -423,9 +423,9 @@ function useDismiss(context, props = {}) {
       preventedPressSuppressionTimeout.clear();
       resetPressStartState();
       suppressNextOutsideClickRef.current = false;
+      clearInsideReactTree();
     };
   }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, hasBlockingChild, isEventWithinOwnElements, tree, store, cancelDismissOnEndTimeout]);
-  React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
   const reference = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     onPointerDown: closeOnReferencePress,

package/floating-ui-react/hooks/useDismiss.mjs

@@ -138,7 +138,7 @@ export function useDismiss(context, props = {}) {
   });
   React.useEffect(() => {
     if (!open || !enabled) {
-      return undefined;
+      return clearInsideReactTree;
     }
     dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
     dataRef.current.__outsidePressBubbles = outsidePressBubbles;
@@ -416,9 +416,9 @@ export function useDismiss(context, props = {}) {
       preventedPressSuppressionTimeout.clear();
       resetPressStartState();
       suppressNextOutsideClickRef.current = false;
+      clearInsideReactTree();
     };
   }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, hasBlockingChild, isEventWithinOwnElements, tree, store, cancelDismissOnEndTimeout]);
-  React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
   const reference = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     onPointerDown: closeOnReferencePress,

package/floating-ui-react/hooks/useFloating.d.mts

@@ -1,6 +1,14 @@
+import { FloatingRootStore } from "../components/FloatingRootStore.mjs";
 import type { UseFloatingOptions, UseFloatingReturn } from "../types.mjs";
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/useFloating
  */
-export declare function useFloating(options?: UseFloatingOptions): UseFloatingReturn;
+export declare function useFloating(options?: UseFloatingOptions): UseFloatingReturn;
+/**
+ * Base UI's private `useFloating` path. The caller must supply the root store, so this skips the
+ * internal root-context hook used by the public Floating UI-compatible API.
+ */
+export declare function useBaseUIFloating(options: UseFloatingOptions & {
+  rootContext: FloatingRootStore;
+}): UseFloatingReturn;

package/floating-ui-react/hooks/useFloating.d.ts

@@ -1,6 +1,14 @@
+import { FloatingRootStore } from "../components/FloatingRootStore.js";
 import type { UseFloatingOptions, UseFloatingReturn } from "../types.js";
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/useFloating
  */
-export declare function useFloating(options?: UseFloatingOptions): UseFloatingReturn;
+export declare function useFloating(options?: UseFloatingOptions): UseFloatingReturn;
+/**
+ * Base UI's private `useFloating` path. The caller must supply the root store, so this skips the
+ * internal root-context hook used by the public Floating UI-compatible API.
+ */
+export declare function useBaseUIFloating(options: UseFloatingOptions & {
+  rootContext: FloatingRootStore;
+}): UseFloatingReturn;

package/floating-ui-react/hooks/useFloating.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useBaseUIFloating = useBaseUIFloating;
 exports.useFloating = useFloating;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
@@ -17,12 +18,23 @@ var _useFloatingRootContext = require("./useFloatingRootContext");
  * @see https://floating-ui.com/docs/useFloating
  */
 function useFloating(options = {}) {
+  const internalStore = (0, _useFloatingRootContext.useFloatingRootContext)(options);
+  const store = options.rootContext || internalStore;
+  return useFloatingWithStore(options, store);
+}
+
+/**
+ * Base UI's private `useFloating` path. The caller must supply the root store, so this skips the
+ * internal root-context hook used by the public Floating UI-compatible API.
+ */
+function useBaseUIFloating(options) {
+  return useFloatingWithStore(options, options.rootContext);
+}
+function useFloatingWithStore(options, store) {
   const {
     nodeId,
     externalTree
   } = options;
-  const internalStore = (0, _useFloatingRootContext.useFloatingRootContext)(options);
-  const store = options.rootContext || internalStore;
   const referenceElement = store.useState('referenceElement');
   const floatingElement = store.useState('floatingElement');
   const domReferenceElement = store.useState('domReferenceElement');

package/floating-ui-react/hooks/useFloating.mjs

@@ -12,12 +12,23 @@ import { useFloatingRootContext } from "./useFloatingRootContext.mjs";
  * @see https://floating-ui.com/docs/useFloating
  */
 export function useFloating(options = {}) {
+  const internalStore = useFloatingRootContext(options);
+  const store = options.rootContext || internalStore;
+  return useFloatingWithStore(options, store);
+}
+
+/**
+ * Base UI's private `useFloating` path. The caller must supply the root store, so this skips the
+ * internal root-context hook used by the public Floating UI-compatible API.
+ */
+export function useBaseUIFloating(options) {
+  return useFloatingWithStore(options, options.rootContext);
+}
+function useFloatingWithStore(options, store) {
   const {
     nodeId,
     externalTree
   } = options;
-  const internalStore = useFloatingRootContext(options);
-  const store = options.rootContext || internalStore;
   const referenceElement = store.useState('referenceElement');
   const floatingElement = store.useState('floatingElement');
   const domReferenceElement = store.useState('domReferenceElement');

package/floating-ui-react/hooks/useHoverReferenceInteraction.d.mts

@@ -26,6 +26,18 @@ export interface UseHoverReferenceInteractionProps {
    * paths). Return `false` to veto; any other return value permits the open.
    */
   shouldOpen?: (() => boolean) | undefined;
+  /**
+   * Regression workaround (#5152): also cancels a pending hover-open from the
+   * trigger's `mouseout`, backing up a `mouseleave` that Chrome can drop during
+   * a fast pointer sweep and leave a submenu stuck open.
+   *
+   * WARNING: only enable on single-trigger, hover-driven roots (e.g.
+   * `Menu.SubmenuTrigger`). It skips the `isClickLikeOpenEvent()` and
+   * `isInsideEnabledTrigger()` checks `mouseleave` applies, so on a
+   * multi-trigger or click-driven root it cancels legitimate opens/closes.
+   * @default false
+   */
+  guardStaleOpen?: boolean | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger

package/floating-ui-react/hooks/useHoverReferenceInteraction.d.ts

@@ -26,6 +26,18 @@ export interface UseHoverReferenceInteractionProps {
    * paths). Return `false` to veto; any other return value permits the open.
    */
   shouldOpen?: (() => boolean) | undefined;
+  /**
+   * Regression workaround (#5152): also cancels a pending hover-open from the
+   * trigger's `mouseout`, backing up a `mouseleave` that Chrome can drop during
+   * a fast pointer sweep and leave a submenu stuck open.
+   *
+   * WARNING: only enable on single-trigger, hover-driven roots (e.g.
+   * `Menu.SubmenuTrigger`). It skips the `isClickLikeOpenEvent()` and
+   * `isInsideEnabledTrigger()` checks `mouseleave` applies, so on a
+   * multi-trigger or click-driven root it cancels legitimate opens/closes.
+   * @default false
+   */
+  guardStaleOpen?: boolean | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger

package/floating-ui-react/hooks/useHoverReferenceInteraction.js

@@ -42,7 +42,8 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext,
     isClosing,
-    shouldOpen: shouldOpenProp
+    shouldOpen: shouldOpenProp,
+    guardStaleOpen = false
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const {
@@ -244,13 +245,24 @@ function useHoverReferenceInteraction(context, props = {}) {
         closeWithDelay(event);
       }
     }
+
+    // Backup cancellation for Chrome's dropped `mouseleave` — see `guardStaleOpen`.
+    function onMouseOut(event) {
+      if ((0, _element.contains)(trigger, event.relatedTarget)) {
+        return; // moved within the trigger's own subtree
+      }
+      instance.openChangeTimeout.clear();
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+    }
+    const staleOpenGuard = guardStaleOpen ? (0, _addEventListener.addEventListener)(trigger, 'mouseout', onMouseOut) : undefined;
     if (move) {
       return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(trigger, 'mousemove', onMouseEnter, {
         once: true
-      }), (0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onMouseLeave));
+      }), (0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
     }
-    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onMouseLeave));
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen]);
+    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen, guardStaleOpen]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;

package/floating-ui-react/hooks/useHoverReferenceInteraction.mjs

@@ -36,7 +36,8 @@ export function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext,
     isClosing,
-    shouldOpen: shouldOpenProp
+    shouldOpen: shouldOpenProp,
+    guardStaleOpen = false
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const {
@@ -238,13 +239,24 @@ export function useHoverReferenceInteraction(context, props = {}) {
         closeWithDelay(event);
       }
     }
+
+    // Backup cancellation for Chrome's dropped `mouseleave` — see `guardStaleOpen`.
+    function onMouseOut(event) {
+      if (contains(trigger, event.relatedTarget)) {
+        return; // moved within the trigger's own subtree
+      }
+      instance.openChangeTimeout.clear();
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+    }
+    const staleOpenGuard = guardStaleOpen ? addEventListener(trigger, 'mouseout', onMouseOut) : undefined;
     if (move) {
       return mergeCleanups(addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
+      }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
     }
-    return mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen]);
+    return mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave), staleOpenGuard);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen, guardStaleOpen]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;

package/floating-ui-react/hooks/useListNavigation.js

@@ -13,6 +13,7 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _platform = require("@base-ui/utils/platform");
 var _dom = require("@floating-ui/utils/dom");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
@@ -23,6 +24,13 @@ var _element = require("../utils/element");
 var _enqueueFocus = require("../utils/enqueueFocus");
 var _event = require("../utils/event");
 const ESCAPE = exports.ESCAPE = 'Escape';
+
+// WebKit fires zero-delta `mousemove`/`pointermove` events when the list scrolls
+// beneath a stationary pointer, moving the highlight during keyboard navigation.
+// https://github.com/mui/base-ui/issues/4002
+function isStationaryWebKitPointer(event) {
+  return _platform.platform.engine.webkit && event.movementX === 0 && event.movementY === 0;
+}
 function doSwitch(orientation, vertical, horizontal) {
   switch (orientation) {
     case 'vertical':
@@ -429,6 +437,9 @@ function useListNavigation(context, props) {
       }),
       // Safari
       onMouseMove(event) {
+        if (isStationaryWebKitPointer(event)) {
+          return;
+        }
         forceSyncFocusRef.current = true;
         forceScrollIntoViewRef.current = false;
         if (focusItemOnHover) {
@@ -492,7 +503,10 @@ function useListNavigation(context, props) {
         }
         commonOnKeyDown(event);
       },
-      onPointerMove() {
+      onPointerMove(event) {
+        if (isStationaryWebKitPointer(event)) {
+          return;
+        }
         isPointerModalityRef.current = true;
       }
     };

package/floating-ui-react/hooks/useListNavigation.mjs

@@ -6,6 +6,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { platform } from '@base-ui/utils/platform';
 import { isHTMLElement } from '@floating-ui/utils/dom';
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
@@ -16,6 +17,13 @@ import { activeElement, contains, getFloatingFocusElement, getTarget, isTypeable
 import { enqueueFocus } from "../utils/enqueueFocus.mjs";
 import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.mjs";
 export const ESCAPE = 'Escape';
+
+// WebKit fires zero-delta `mousemove`/`pointermove` events when the list scrolls
+// beneath a stationary pointer, moving the highlight during keyboard navigation.
+// https://github.com/mui/base-ui/issues/4002
+function isStationaryWebKitPointer(event) {
+  return platform.engine.webkit && event.movementX === 0 && event.movementY === 0;
+}
 function doSwitch(orientation, vertical, horizontal) {
   switch (orientation) {
     case 'vertical':
@@ -422,6 +430,9 @@ export function useListNavigation(context, props) {
       }),
       // Safari
       onMouseMove(event) {
+        if (isStationaryWebKitPointer(event)) {
+          return;
+        }
         forceSyncFocusRef.current = true;
         forceScrollIntoViewRef.current = false;
         if (focusItemOnHover) {
@@ -485,7 +496,10 @@ export function useListNavigation(context, props) {
         }
         commonOnKeyDown(event);
       },
-      onPointerMove() {
+      onPointerMove(event) {
+        if (isStationaryWebKitPointer(event)) {
+          return;
+        }
         isPointerModalityRef.current = true;
       }
     };

package/floating-ui-react/hooks/useTypeahead.d.mts

@@ -20,17 +20,17 @@ export interface UseTypeaheadProps {
   /**
    * Optional list of item elements that correspond to `listRef` indices.
    * When an element exists for an index, typeahead skips it if it is hidden by
-   * `display: none`, `visibility: hidden|collapse`, or other
-   * browser-reported visibility checks.
+   * `display: none`, `visibility: hidden|collapse`, other browser-reported
+   * visibility checks, or native disabled state.
    */
   elementsRef?: React.RefObject<Array<HTMLElement | null>> | undefined;
   /**
    * Indices that are disabled, either as an array or a predicate (the same shape as
    * `useListNavigation`'s `disabledIndices`). Disabled items are skipped while matching,
    * so a single keypress advances to the next selectable item (matching native `<select>`
-   * and arrow-key navigation). The disabled check doesn't read `elementsRef`, so consumers
-   * whose items stay mounted-but-hidden while closed can still skip disabled items without
-   * passing `elementsRef`.
+   * and arrow-key navigation). The explicit disabled check doesn't read `elementsRef`, so
+   * consumers whose items stay mounted-but-hidden while closed can still skip disabled items
+   * without passing `elementsRef`.
    */
   disabledIndices?: DisabledIndices | undefined;
   /**

package/floating-ui-react/hooks/useTypeahead.d.ts

@@ -20,17 +20,17 @@ export interface UseTypeaheadProps {
   /**
    * Optional list of item elements that correspond to `listRef` indices.
    * When an element exists for an index, typeahead skips it if it is hidden by
-   * `display: none`, `visibility: hidden|collapse`, or other
-   * browser-reported visibility checks.
+   * `display: none`, `visibility: hidden|collapse`, other browser-reported
+   * visibility checks, or native disabled state.
    */
   elementsRef?: React.RefObject<Array<HTMLElement | null>> | undefined;
   /**
    * Indices that are disabled, either as an array or a predicate (the same shape as
    * `useListNavigation`'s `disabledIndices`). Disabled items are skipped while matching,
    * so a single keypress advances to the next selectable item (matching native `<select>`
-   * and arrow-key navigation). The disabled check doesn't read `elementsRef`, so consumers
-   * whose items stay mounted-but-hidden while closed can still skip disabled items without
-   * passing `elementsRef`.
+   * and arrow-key navigation). The explicit disabled check doesn't read `elementsRef`, so
+   * consumers whose items stay mounted-but-hidden while closed can still skip disabled items
+   * without passing `elementsRef`.
    */
   disabledIndices?: DisabledIndices | undefined;
   /**

package/floating-ui-react/hooks/useTypeahead.js

@@ -38,18 +38,19 @@ function useTypeahead(context, props) {
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
   const onKeyDown = (0, _useStableCallback.useStableCallback)(event => {
-    function isVisible(index) {
-      const element = elementsRef?.current[index];
-      return !element || (0, _composite.isElementVisible)(element);
+    function getElement(index) {
+      return elementsRef?.current[index];
     }
     function isItemAvailable(index) {
-      if (!isVisible(index)) {
+      const element = getElement(index);
+      if (element && !(0, _composite.isElementVisible)(element) || element?.matches(':disabled')) {
         return false;
       }
-      // Visibility is handled above; pass an empty element list so `isListIndexDisabled`
-      // resolves only the explicit `disabledIndices` (array/predicate) and skips its own
-      // visibility/attribute fallbacks. Consumers that don't opt in keep matching every
-      // visible item.
+      // Visibility and native disabled state are handled above; pass an empty
+      // element list so `isListIndexDisabled` resolves only the explicit
+      // `disabledIndices` (array/predicate) and skips its own fallbacks.
+      // Consumers that don't pass `disabledIndices` keep matching every visible
+      // item except native disabled elements provided through `elementsRef`.
       return disabledIndices == null || !(0, _composite.isListIndexDisabled)(_empty.EMPTY_ARRAY, index, disabledIndices);
     }
     function getMatchingIndex(list, string, startIndex = 0) {
@@ -157,12 +158,6 @@ function useTypeahead(context, props) {
       stringRef.current = '';
     }
   }, [open, selectedIndex, timeout]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
   const sharedProps = React.useMemo(() => ({
     onKeyDown,
     onBlur

package/floating-ui-react/hooks/useTypeahead.mjs

@@ -32,18 +32,19 @@ export function useTypeahead(context, props) {
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
   const onKeyDown = useStableCallback(event => {
-    function isVisible(index) {
-      const element = elementsRef?.current[index];
-      return !element || isElementVisible(element);
+    function getElement(index) {
+      return elementsRef?.current[index];
     }
     function isItemAvailable(index) {
-      if (!isVisible(index)) {
+      const element = getElement(index);
+      if (element && !isElementVisible(element) || element?.matches(':disabled')) {
         return false;
       }
-      // Visibility is handled above; pass an empty element list so `isListIndexDisabled`
-      // resolves only the explicit `disabledIndices` (array/predicate) and skips its own
-      // visibility/attribute fallbacks. Consumers that don't opt in keep matching every
-      // visible item.
+      // Visibility and native disabled state are handled above; pass an empty
+      // element list so `isListIndexDisabled` resolves only the explicit
+      // `disabledIndices` (array/predicate) and skips its own fallbacks.
+      // Consumers that don't pass `disabledIndices` keep matching every visible
+      // item except native disabled elements provided through `elementsRef`.
       return disabledIndices == null || !isListIndexDisabled(EMPTY_ARRAY, index, disabledIndices);
     }
     function getMatchingIndex(list, string, startIndex = 0) {
@@ -151,12 +152,6 @@ export function useTypeahead(context, props) {
       stringRef.current = '';
     }
   }, [open, selectedIndex, timeout]);
-  useIsoLayoutEffect(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
   const sharedProps = React.useMemo(() => ({
     onKeyDown,
     onBlur

package/floating-ui-react/index.d.mts

@@ -1,7 +1,3 @@
-export { FloatingDelayGroup, useDelayGroup } from "./components/FloatingDelayGroup.mjs";
-export { FloatingFocusManager } from "./components/FloatingFocusManager.mjs";
-export { FloatingPortal, useFloatingPortalNode } from "./components/FloatingPortal.mjs";
-export { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree } from "./components/FloatingTree.mjs";
 export { FloatingTreeStore } from "./components/FloatingTreeStore.mjs";
 export { useClick } from "./hooks/useClick.mjs";
 export { useClientPoint } from "./hooks/useClientPoint.mjs";

package/floating-ui-react/index.d.ts

@@ -1,7 +1,3 @@
-export { FloatingDelayGroup, useDelayGroup } from "./components/FloatingDelayGroup.js";
-export { FloatingFocusManager } from "./components/FloatingFocusManager.js";
-export { FloatingPortal, useFloatingPortalNode } from "./components/FloatingPortal.js";
-export { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree } from "./components/FloatingTree.js";
 export { FloatingTreeStore } from "./components/FloatingTreeStore.js";
 export { useClick } from "./hooks/useClick.js";
 export { useClientPoint } from "./hooks/useClientPoint.js";

package/floating-ui-react/index.mjs

@@ -1,6 +1,18 @@
+/**
+ * @internal
+ */
 export { FloatingDelayGroup, useDelayGroup } from "./components/FloatingDelayGroup.mjs";
+/**
+ * @internal
+ */
 export { FloatingFocusManager } from "./components/FloatingFocusManager.mjs";
+/**
+ * @internal
+ */
 export { FloatingPortal, useFloatingPortalNode } from "./components/FloatingPortal.mjs";
+/**
+ * @internal
+ */
 export { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree } from "./components/FloatingTree.mjs";
 export { FloatingTreeStore } from "./components/FloatingTreeStore.mjs";
 export { useClick } from "./hooks/useClick.mjs";

package/floating-ui-react/utils/composite.js

@@ -387,6 +387,13 @@ function isListIndexDisabled(list, index, disabledIndices) {
   if (!isElementVisible(element)) {
     return true;
   }
+
+  // A natively disabled element can never receive focus, so it must always be
+  // skipped, even when `disabledIndices` marks it as enabled. Only
+  // `aria-disabled` items can be focusable-while-disabled.
+  if (element.matches(':disabled')) {
+    return true;
+  }
   return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
 }
 function isHiddenByStyles(styles) {

package/floating-ui-react/utils/composite.mjs

@@ -370,6 +370,13 @@ export function isListIndexDisabled(list, index, disabledIndices) {
   if (!isElementVisible(element)) {
     return true;
   }
+
+  // A natively disabled element can never receive focus, so it must always be
+  // skipped, even when `disabledIndices` marks it as enabled. Only
+  // `aria-disabled` items can be focusable-while-disabled.
+  if (element.matches(':disabled')) {
+    return true;
+  }
   return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
 }
 export function isHiddenByStyles(styles) {

package/form/Form.d.mts

@@ -21,7 +21,7 @@ export interface FormActions {
   validate: (fieldName?: string | undefined) => void;
 }
 export interface FormState {}
-export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState> {
+export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState, React.ComponentPropsWithRef<'form'>> {
   /**
    * Determines when the form should be validated.
    * The `validationMode` prop on `<Field.Root>` takes precedence over this.

package/form/Form.d.ts

@@ -21,7 +21,7 @@ export interface FormActions {
   validate: (fieldName?: string | undefined) => void;
 }
 export interface FormState {}
-export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState> {
+export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState, React.ComponentPropsWithRef<'form'>> {
   /**
    * Determines when the form should be validated.
    * The `validationMode` prop on `<Field.Root>` takes precedence over this.