@base-ui/react 1.6.0 → 1.7.0

package/navigation-menu/trigger/NavigationMenuTrigger.mjs

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { isHTMLElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerWindow } from '@base-ui/utils/owner';
@@ -105,7 +104,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   const interactionsEnabled = (positionerElement != null || value == null) && !disabled;
   const hoverFloatingElement = positionerElement || viewportElement;
   const hoverInteractionsEnabled = (hoverFloatingElement != null || value == null) && !disabled;
-  const runOnceAnimationsFinish = useAnimationsFinished(popupElement, false, false);
+  const runOnceAnimationsFinish = useAnimationsFinished(popupElement);
   const handleTriggerElement = React.useCallback(element => {
     triggerElementRef.current = element;
     setTriggerElement(element);
@@ -126,114 +125,89 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     sizeFrame.cancel();
     cancelAutoSizeReset();
   }, [isActiveItem, mutationFrame, sizeFrame, cancelAutoSizeReset]);
-  function setAutoSizes() {
-    if (!popupElement) {
-      return;
-    }
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, 'auto');
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, 'auto');
+  function setAutoSizes(element) {
+    element.style.setProperty(NavigationMenuPopupCssVars.popupWidth, 'auto');
+    element.style.setProperty(NavigationMenuPopupCssVars.popupHeight, 'auto');
   }
-  function clearFixedSizes() {
-    if (!popupElement || !positionerElement) {
-      return;
-    }
-    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);
-    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);
-    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);
-    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);
+  function clearFixedSizes(popup, positioner) {
+    popup.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);
+    popup.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);
+    positioner.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);
+    positioner.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);
   }
-  function scheduleAutoSizeReset() {
+  function scheduleAutoSizeReset(popup) {
     cancelAutoSizeReset(true);
     const abortController = new AbortController();
     popupAutoSizeResetRef.current.abortController = abortController;
     popupAutoSizeResetRef.current.owner = itemValue;
     runOnceAnimationsFinish(() => {
-      if (popupAutoSizeResetRef.current.abortController !== abortController || popupAutoSizeResetRef.current.owner !== itemValue) {
-        return;
-      }
       popupAutoSizeResetRef.current.abortController = null;
       popupAutoSizeResetRef.current.owner = null;
-      setAutoSizes();
+      setAutoSizes(popup);
     }, abortController.signal);
   }
-  const handleValueChange = useStableCallback((currentWidth, currentHeight, options = {}) => {
-    if (!popupElement || !positionerElement) {
-      return;
-    }
+  const handleValueChange = useStableCallback((popup, positioner, currentWidth, currentHeight) => {
     cancelAutoSizeReset(true);
-    const {
-      syncPositioner = false
-    } = options;
-    clearFixedSizes();
+    clearFixedSizes(popup, positioner);
     const {
       width,
       height
-    } = getCssDimensions(popupElement);
+    } = getCssDimensions(popup);
     const measuredWidth = width || prevSizeRef.current.width;
     const measuredHeight = height || prevSizeRef.current.height;
     if (currentHeight === 0 || currentWidth === 0) {
       currentWidth = measuredWidth;
       currentHeight = measuredHeight;
     }
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
-    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
-    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${syncPositioner ? currentWidth : measuredWidth}px`);
-    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${syncPositioner ? currentHeight : measuredHeight}px`);
+    popup.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
+    popup.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
+    positioner.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
+    positioner.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
     sizeFrame.request(() => {
       if (!isActiveItemRef.current) {
         return;
       }
-      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
-      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
-      if (syncPositioner) {
-        positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
-        positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
-      }
-      scheduleAutoSizeReset();
+      popup.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
+      popup.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
+      scheduleAutoSizeReset(popup);
     });
   });
-  const handleInterruptedMutationResize = useStableCallback((currentWidth, currentHeight) => {
-    if (!popupElement || !positionerElement) {
-      return;
-    }
+  const handleInterruptedMutationResize = useStableCallback((popup, positioner, currentWidth, currentHeight) => {
     sizeFrame.cancel();
     mutationFrame.cancel();
     cancelAutoSizeReset(true);
     if (currentWidth === 0 || currentHeight === 0) {
       return;
     }
-    setSharedFixedSize(popupElement, positionerElement, currentWidth, currentHeight);
+    setSharedFixedSize(popup, positioner, currentWidth, currentHeight);
     mutationFrame.request(() => {
       mutationFrame.request(() => {
-        clearFixedSizes();
+        clearFixedSizes(popup, positioner);
         const {
           width,
           height
-        } = getCssDimensions(popupElement);
-        const measuredWidth = width || currentWidth || prevSizeRef.current.width;
-        const measuredHeight = height || currentHeight || prevSizeRef.current.height;
-        setSharedFixedSize(popupElement, positionerElement, currentWidth, currentHeight);
+        } = getCssDimensions(popup);
+        const measuredWidth = width || currentWidth;
+        const measuredHeight = height || currentHeight;
+        setSharedFixedSize(popup, positioner, currentWidth, currentHeight);
         sizeFrame.request(() => {
           if (!isActiveItemRef.current) {
             return;
           }
-          setSharedFixedSize(popupElement, positionerElement, measuredWidth, measuredHeight);
-          scheduleAutoSizeReset();
+          setSharedFixedSize(popup, positioner, measuredWidth, measuredHeight);
+          scheduleAutoSizeReset(popup);
         });
       });
     });
   });
-  const syncCurrentSize = useStableCallback(() => {
-    if (!popupElement || !positionerElement) {
-      return;
-    }
+  const syncCurrentSize = useStableCallback((popup, positioner) => {
     sizeFrame.cancel();
     cancelAutoSizeReset(true);
-    clearFixedSizes();
+    clearFixedSizes(popup, positioner);
     const {
       width,
       height
-    } = getCssDimensions(popupElement);
+    } = getCssDimensions(popup);
     if (width === 0 || height === 0) {
       return;
     }
@@ -241,19 +215,13 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       width,
       height
     };
-    setAutoSizes();
-    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
-    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+    setAutoSizes(popup);
+    positioner.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+    positioner.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
   });
-  const getMutationBaseline = useStableCallback(() => {
-    if (!popupElement) {
-      return {
-        size: prevSizeRef.current,
-        syncPositioner: false
-      };
-    }
-    const popupWidth = popupElement.style.getPropertyValue(NavigationMenuPopupCssVars.popupWidth);
-    const popupHeight = popupElement.style.getPropertyValue(NavigationMenuPopupCssVars.popupHeight);
+  const getMutationBaseline = useStableCallback(popup => {
+    const popupWidth = popup.style.getPropertyValue(NavigationMenuPopupCssVars.popupWidth);
+    const popupHeight = popup.style.getPropertyValue(NavigationMenuPopupCssVars.popupHeight);
     const isResizing = popupWidth !== '' && popupWidth !== 'auto' && popupHeight !== '' && popupHeight !== 'auto';
     if (!isResizing) {
       return {
@@ -263,8 +231,8 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     }
     return {
       size: {
-        width: popupElement.offsetWidth || prevSizeRef.current.width,
-        height: popupElement.offsetHeight || prevSizeRef.current.height
+        width: popup.offsetWidth || prevSizeRef.current.width,
+        height: popup.offsetHeight || prevSizeRef.current.height
       },
       syncPositioner: true
     };
@@ -304,10 +272,12 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     if (!open || !isActiveItem || !popupElement || !positionerElement) {
       return undefined;
     }
-    const win = ownerWindow(positionerElement);
+    const popup = popupElement;
+    const positioner = positionerElement;
+    const win = ownerWindow(positioner);
     function handleResize() {
       resizeFrame.cancel();
-      resizeFrame.request(syncCurrentSize);
+      resizeFrame.request(() => syncCurrentSize(popup, positioner));
     }
     const unsubscribe = addEventListener(win, 'resize', handleResize);
     return () => {
@@ -317,23 +287,23 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   }, [open, isActiveItem, popupElement, positionerElement, resizeFrame, syncCurrentSize]);
   React.useEffect(() => {
     const observedElement = currentContentRef.current;
-    if (!observedElement || !popupElement || !isActiveItem || typeof MutationObserver !== 'function') {
+    if (!observedElement || !popupElement || !positionerElement || !isActiveItem || typeof MutationObserver !== 'function') {
       return undefined;
     }
     const mutationObserver = new MutationObserver(() => {
       if (transitionStatus === 'starting' || popupElement.hasAttribute(TransitionStatusDataAttributes.startingStyle)) {
-        syncCurrentSize();
+        syncCurrentSize(popupElement, positionerElement);
         return;
       }
       const {
         size,
         syncPositioner
-      } = getMutationBaseline();
+      } = getMutationBaseline(popupElement);
       if (syncPositioner) {
-        handleInterruptedMutationResize(size.width, size.height);
+        handleInterruptedMutationResize(popupElement, positionerElement, size.width, size.height);
         return;
       }
-      handleValueChange(size.width, size.height);
+      handleValueChange(popupElement, positionerElement, size.width, size.height);
     });
     mutationObserver.observe(observedElement, {
       childList: true,
@@ -347,7 +317,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     return () => {
       mutationObserver.disconnect();
     };
-  }, [currentContentRef, popupElement, isActiveItem, transitionStatus, getMutationBaseline, handleInterruptedMutationResize, handleValueChange, syncCurrentSize]);
+  }, [currentContentRef, popupElement, positionerElement, isActiveItem, transitionStatus, getMutationBaseline, handleInterruptedMutationResize, handleValueChange, syncCurrentSize]);
   React.useEffect(() => {
     if (isActiveItem && open && popupElement && allowFocusRef.current) {
       allowFocusRef.current = false;
@@ -360,17 +330,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     };
   }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
   useIsoLayoutEffect(() => {
-    if (isActiveItemRef.current && open && popupElement) {
-      const hasNestedMenu = currentContentRef.current?.querySelector('[data-nested]') != null;
-      if (transitionStatus === 'starting' && hasNestedMenu) {
-        // Inline nested menus can reveal their default content after the
-        // top-level content enters the viewport. Defer once so the opening
-        // size is measured from the final nested content, not the shell.
-        sizeFrame.request(syncCurrentSize);
-        return () => {
-          sizeFrame.cancel();
-        };
-      }
+    if (isActiveItemRef.current && open && popupElement && positionerElement) {
       if (skipAutoSizeSyncRef.current) {
         skipAutoSizeSyncRef.current = false;
         return undefined;
@@ -379,10 +339,10 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
         width,
         height
       } = getCssDimensions(popupElement);
-      handleValueChange(width, height);
+      handleValueChange(popupElement, positionerElement, width, height);
     }
     return undefined;
-  }, [currentContentRef, handleValueChange, isActiveItemRef, open, popupElement, sizeFrame, syncCurrentSize, transitionStatus]);
+  }, [currentContentRef, handleValueChange, isActiveItemRef, open, popupElement, positionerElement, transitionStatus]);
   function handleOpenChange(nextOpen, eventDetails) {
     const isHover = eventDetails.reason === REASONS.triggerHover;
     if (!interactionsEnabled) {
@@ -435,8 +395,10 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       hoverInteractionState.restTimeoutPending = false;
       hoverInteractionState.openChangeTimeout.clear();
       hoverInteractionState.restTimeout.clear();
-      clearSafePolygonPointerEventsMutation(hoverInteractionState);
     }
+    return () => {
+      clearSafePolygonPointerEventsMutation(hoverInteractionState);
+    };
   }, [context, hoverInteractionState, open]);
   const getInlineHandleCloseContext = useStableCallback(() => {
     if (!nested || positionerElement || !triggerElementRef.current || !hoverFloatingElement) {
@@ -445,10 +407,10 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     return getHandleCloseContext(triggerElementRef.current, hoverFloatingElement, nodeId);
   });
   function getScope() {
-    if (!nested || !positionerElement) {
-      return triggerElementRef.current?.closest('ul') ?? null;
+    if (nested && positionerElement) {
+      return null;
     }
-    return null;
+    return triggerElementRef.current?.closest('ul') ?? null;
   }
   const hoverProps = useHoverReferenceInteraction(context, {
     enabled: hoverInteractionsEnabled,
@@ -481,7 +443,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
   function handleActivation(event) {
     ReactDOM.flushSync(() => {
-      const currentTarget = isHTMLElement(event.currentTarget) ? event.currentTarget : null;
+      const currentTarget = event.currentTarget;
       const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
       if (mounted && prevTriggerRect && triggerElement) {
         const nextTriggerRect = triggerElement.getBoundingClientRect();
@@ -509,7 +471,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       if (value != null && event.type !== 'keydown') {
         setValue(itemValue, createChangeEventDetails(event.type === 'mouseenter' ? REASONS.triggerHover : REASONS.triggerPress, event.nativeEvent));
       }
-      if (event.type === 'mouseenter' && shouldBlockSafePolygonPointerEvents && (!nested || !positionerElement) && hoverFloatingElement && currentTarget) {
+      if (event.type === 'mouseenter' && shouldBlockSafePolygonPointerEvents && (!nested || !positionerElement) && hoverFloatingElement) {
         const applyPointerEventsMutation = () => {
           const scopeElement = getScope() ?? currentTarget.ownerDocument.body;
           applySafePolygonPointerEventsMutation(hoverInteractionState, {
@@ -543,7 +505,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     if (shouldSkipAutoSizeSync) {
       skipAutoSizeSyncRef.current = true;
     }
-    handleValueChange(width, height);
+    handleValueChange(popupElement, positionerElement, width, height);
   });
   const state = {
     open: isActiveItem

package/navigation-menu/utils/isOutsideMenuEvent.js

@@ -15,12 +15,9 @@ function isOutsideMenuEvent({
     tree,
     nodeId
   } = params;
-  const nodeChildrenContains = tree ? (0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).some(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget)) : [];
-
-  // For nested scenarios without popupElement, we need to be more lenient
-  // and only close if we're definitely outside the root
+  const nodeChildrenContains = tree ? (0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).some(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget)) : false;
   if (!popupElement) {
     return !(0, _utils.contains)(rootRef.current, relatedTarget) && !nodeChildrenContains;
   }
-  return !(0, _utils.contains)(popupElement, currentTarget) && !(0, _utils.contains)(popupElement, relatedTarget) && !(0, _utils.contains)(rootRef.current, relatedTarget) && !nodeChildrenContains && !((0, _utils.contains)(popupElement, relatedTarget) && relatedTarget?.hasAttribute('data-base-ui-focus-guard'));
+  return !(0, _utils.contains)(popupElement, currentTarget) && !(0, _utils.contains)(popupElement, relatedTarget) && !(0, _utils.contains)(rootRef.current, relatedTarget) && !nodeChildrenContains;
 }

package/navigation-menu/utils/isOutsideMenuEvent.mjs

@@ -9,12 +9,9 @@ export function isOutsideMenuEvent({
     tree,
     nodeId
   } = params;
-  const nodeChildrenContains = tree ? getNodeChildren(tree.nodesRef.current, nodeId).some(node => contains(node.context?.elements.floating, relatedTarget)) : [];
-
-  // For nested scenarios without popupElement, we need to be more lenient
-  // and only close if we're definitely outside the root
+  const nodeChildrenContains = tree ? getNodeChildren(tree.nodesRef.current, nodeId).some(node => contains(node.context?.elements.floating, relatedTarget)) : false;
   if (!popupElement) {
     return !contains(rootRef.current, relatedTarget) && !nodeChildrenContains;
   }
-  return !contains(popupElement, currentTarget) && !contains(popupElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains && !(contains(popupElement, relatedTarget) && relatedTarget?.hasAttribute('data-base-ui-focus-guard'));
+  return !contains(popupElement, currentTarget) && !contains(popupElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains;
 }

package/navigation-menu/utils/useNavigationMenuAnchorPositioning.d.mts

@@ -0,0 +1,6 @@
+import { type UseAnchorPositioningParameters, type UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.mjs";
+/**
+ * Positioning path for the Navigation Menu, whose active trigger supplies its root store after the
+ * positioner has already rendered.
+ */
+export declare function useNavigationMenuAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;

package/navigation-menu/utils/useNavigationMenuAnchorPositioning.d.ts

@@ -0,0 +1,6 @@
+import { type UseAnchorPositioningParameters, type UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.js";
+/**
+ * Positioning path for the Navigation Menu, whose active trigger supplies its root store after the
+ * positioner has already rendered.
+ */
+export declare function useNavigationMenuAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;

package/navigation-menu/utils/useNavigationMenuAnchorPositioning.js

@@ -0,0 +1,16 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigationMenuAnchorPositioning = useNavigationMenuAnchorPositioning;
+var _useFloating = require("../../floating-ui-react/hooks/useFloating");
+var _useAnchorPositioning = require("../../internals/useAnchorPositioning");
+/**
+ * Positioning path for the Navigation Menu, whose active trigger supplies its root store after the
+ * positioner has already rendered.
+ */
+function useNavigationMenuAnchorPositioning(params) {
+  return (0, _useAnchorPositioning.useAnchorPositioningWithHook)(params, _useFloating.useFloating);
+}

package/navigation-menu/utils/useNavigationMenuAnchorPositioning.mjs

@@ -0,0 +1,12 @@
+'use client';
+
+import { useFloating } from "../../floating-ui-react/hooks/useFloating.mjs";
+import { useAnchorPositioningWithHook } from "../../internals/useAnchorPositioning.mjs";
+
+/**
+ * Positioning path for the Navigation Menu, whose active trigger supplies its root store after the
+ * positioner has already rendered.
+ */
+export function useNavigationMenuAnchorPositioning(params) {
+  return useAnchorPositioningWithHook(params, useFloating);
+}

package/number-field/input/NumberFieldInput.d.mts

@@ -9,7 +9,7 @@ import type { NumberFieldRootState } from "../root/NumberFieldRoot.mjs";
  */
 export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface NumberFieldInputState extends NumberFieldRootState {}
-export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInputState> {
+export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInputState, React.ComponentPropsWithRef<'input'>> {
   /**
    * A user-friendly description of the input's role for assistive tech. This is a role
    * description, not an accessible name — use `Field.Label` or `aria-label` to name the control.

package/number-field/input/NumberFieldInput.d.ts

@@ -9,7 +9,7 @@ import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
  */
 export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface NumberFieldInputState extends NumberFieldRootState {}
-export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInputState> {
+export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInputState, React.ComponentPropsWithRef<'input'>> {
   /**
    * A user-friendly description of the input's role for assistive tech. This is a role
    * description, not an accessible name — use `Field.Label` or `aria-label` to name the control.

package/number-field/input/NumberFieldInput.js

@@ -10,7 +10,6 @@ var React = _interopRequireWildcard(require("react"));
 var _safeReact = require("@base-ui/utils/safeReact");
 var _warn = require("@base-ui/utils/warn");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _utils = require("../../floating-ui-react/utils");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
@@ -41,31 +40,33 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
   } = componentProps;
   const {
     allowInputSyncRef,
-    disabled,
     formatOptionsRef,
     getAllowedNonNumericKeys,
     getStepAmount,
     id,
     incrementValue,
     inputMode,
-    inputValue,
     max,
     min,
     name,
     nameProp,
-    readOnly,
-    required,
     setValue,
     state,
     setInputValue,
     locale,
     inputRef,
-    value,
     onValueCommitted,
     lastChangedValueRef,
     hasPendingCommitRef,
     valueRef
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
+  const {
+    disabled,
+    readOnly,
+    required,
+    value,
+    inputValue
+  } = state;
   const {
     clearErrors
   } = (0, _FormContext.useFormContext)();
@@ -200,7 +201,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
           blockRevalidationRef.current = false;
           return;
         }
-        committedValue = lastChangedValueRef.current ?? committed;
+        committedValue = lastChangedValueRef.current;
         // If validation normalized back to the current value, `useValueChanged` won't fire to
         // reset the flag, so reset it here or the next external change won't revalidate.
         if (committedValue === value) {
@@ -221,7 +222,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       }
     },
     onChange(event) {
-      // Workaround for https://github.com/facebook/react/issues/9023
+      // Workaround for https://github.com/react/react/issues/9023
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
@@ -237,7 +238,10 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       // currently parseable into a number. This preserves good UX for IME
       // composition/partial input while still providing live numeric updates when possible.
       const allowedNonNumericKeys = getAllowedNonNumericKeys();
-      const isValidCharacterString = Array.from(targetValue).every(ch => (0, _parse.isNumeralChar)(ch) || _parse.ANY_MINUS_DETECT_RE.test(ch) || allowedNonNumericKeys.has(ch));
+      const isValidCharacterString = Array.from(targetValue).every(ch => (0, _parse.isNumeralChar)(ch) || _parse.ANY_MINUS_DETECT_RE.test(ch) || allowedNonNumericKeys.has(ch) ||
+      // Bidi/format controls are stripped by `parseNumber`; don't let them reject the string
+      // (RTL locales insert them around exponent/currency signs, e.g. scientific notation).
+      _parse.FORMAT_CONTROL_DETECT_RE.test(ch));
       if (!isValidCharacterString) {
         return;
       }
@@ -287,7 +291,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
         if (event.key === symbol) {
           const symbolIndex = inputValue.indexOf(symbol);
           const isSymbolHighlighted = selectionContainsIndex(symbolIndex);
-          isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
+          isAllowedNonNumericKey = symbolIndex === -1 || isAllSelected || isSymbolHighlighted;
         }
       });
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
@@ -300,12 +304,18 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       event.which === 229 || event.altKey && !isStepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || (0, _parse.isNumeralChar)(event.key) || isNavigateKey) {
         return;
       }
-      const willSetHome = event.key === 'Home' && min != null;
-      const willSetEnd = event.key === 'End' && max != null;
+
+      // Home/End jump to the corresponding bound, but only when that bound is defined.
+      let boundaryValue = null;
+      if (event.key === 'Home' && min != null) {
+        boundaryValue = min;
+      } else if (event.key === 'End' && max != null) {
+        boundaryValue = max;
+      }
 
       // Let the browser handle multi-character keys we don't act on (PageUp, Insert, F-keys,
       // Home/End without min/max); invalid single characters are still blocked below.
-      if (event.key.length > 1 && !isStepKey && !willSetHome && !willSetEnd) {
+      if (event.key.length > 1 && !isStepKey && boundaryValue === null) {
         return;
       }
 
@@ -317,12 +327,14 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       const amount = getStepAmount(event);
 
       // Prevent insertion of text or caret from moving.
-      (0, _utils.stopEvent)(event);
+      event.preventDefault();
+      event.stopPropagation();
       const commitDetails = (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.keyboard, nativeEvent);
       let changed = false;
-      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      if (isStepKey || boundaryValue !== null) {
         allowInputSyncRef.current = true;
-
+      }
+      if (isStepKey) {
         // When stepping from the synced numeric state, refresh the commit ref to the current
         // value so a canceled step can't commit a stale `lastChangedValueRef` left over from an
         // earlier change (mirrors the button path).
@@ -335,15 +347,14 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
           event: nativeEvent,
           reason: _reasons.REASONS.keyboard
         });
-      } else if (willSetHome) {
-        allowInputSyncRef.current = true;
-        changed = setValue(min, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.keyboard, nativeEvent));
-      } else if (willSetEnd) {
-        allowInputSyncRef.current = true;
-        changed = setValue(max, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.keyboard, nativeEvent));
+      } else if (boundaryValue !== null) {
+        changed = setValue(boundaryValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.keyboard, nativeEvent));
       }
+
+      // `changed` is only true when `setValue` applied the change, which records the stored
+      // (clamped/snapped) value, so commit that rather than the pre-validation input.
       if (changed) {
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+        onValueCommitted(lastChangedValueRef.current, commitDetails);
       }
     },
     onPaste(event) {
@@ -354,6 +365,7 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       try {
         pastedData = event.clipboardData?.getData('text/plain') ?? '';
       } catch {
+        /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
         if (process.env.NODE_ENV !== 'production') {
           const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
           (0, _warn.warn)('<NumberField.Input> could not read clipboard text during paste handling.', ownerStackMessage);
@@ -366,9 +378,12 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
 
       // Insert the pasted text at the caret/selection instead of replacing the entire value,
       // matching native input behavior (e.g. pasting "5" into "123|" yields "1235").
+      // The component renders `type="text"`, which always reports a selection range. Overriding
+      // `type` with a selection-less one (`email`, `number`) is unsupported either way: the caret
+      // restore above throws on those, so there is no working behavior to preserve here.
       const input = event.currentTarget;
-      const selectionStart = input.selectionStart ?? inputValue.length;
-      const selectionEnd = input.selectionEnd ?? inputValue.length;
+      const selectionStart = input.selectionStart;
+      const selectionEnd = input.selectionEnd;
       const nextText = inputValue.slice(0, selectionStart) + pastedData + inputValue.slice(selectionEnd);
       const parsedValue = (0, _parse.parseNumber)(nextText, locale, formatOptionsRef.current);
       if (parsedValue !== null) {