@base-ui/react 1.0.0 → 1.2.0

package/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -9,11 +9,9 @@ exports.NavigationMenuTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _tabbable = require("tabbable");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
 var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
@@ -24,20 +22,11 @@ var _constants = require("../../utils/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
-var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
-var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
 var _CompositeItem = require("../../composite/item/CompositeItem");
 var _useButton = require("../../use-button");
-var _getCssDimensions = require("../../utils/getCssDimensions");
 var _constants2 = require("../utils/constants");
 var _NavigationMenuDismissContext = require("../list/NavigationMenuDismissContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const DEFAULT_SIZE = {
-  width: 0,
-  height: 0
-};
-
 /**
  * Opens the navigation menu popup when hovered or clicked, revealing the
  * associated content.
@@ -83,104 +72,17 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   const dismissProps = (0, _NavigationMenuDismissContext.useNavigationMenuDismissContext)();
   const stickIfOpenTimeout = (0, _useTimeout.useTimeout)();
   const focusFrame = (0, _useAnimationFrame.useAnimationFrame)();
-  const sizeFrame1 = (0, _useAnimationFrame.useAnimationFrame)();
-  const sizeFrame2 = (0, _useAnimationFrame.useAnimationFrame)();
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [stickIfOpen, setStickIfOpen] = React.useState(true);
   const [pointerType, setPointerType] = React.useState('');
   const allowFocusRef = React.useRef(false);
-  const prevSizeRef = React.useRef(DEFAULT_SIZE);
-  const animationAbortControllerRef = React.useRef(null);
   const isActiveItem = open && value === itemValue;
-  const isActiveItemRef = (0, _useValueAsRef.useValueAsRef)(isActiveItem);
   const interactionsEnabled = positionerElement ? true : !value;
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement);
-  React.useEffect(() => {
-    animationAbortControllerRef.current?.abort();
-  }, [isActiveItem]);
-  function setAutoSizes() {
-    if (!popupElement) {
-      return;
-    }
-    popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, 'auto');
-    popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, 'auto');
-  }
-  const handleValueChange = (0, _useStableCallback.useStableCallback)((currentWidth, currentHeight) => {
-    if (!popupElement || !positionerElement) {
-      return;
-    }
-    popupElement.style.removeProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth);
-    popupElement.style.removeProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight);
-    positionerElement.style.removeProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth);
-    positionerElement.style.removeProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight);
-    const {
-      width,
-      height
-    } = (0, _getCssDimensions.getCssDimensions)(popupElement);
-    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.NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
-    popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
-    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
-    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
-    sizeFrame1.request(() => {
-      popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
-      popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
-      sizeFrame2.request(() => {
-        animationAbortControllerRef.current = new AbortController();
-        runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
-      });
-    });
-  });
   React.useEffect(() => {
     if (!open) {
       stickIfOpenTimeout.clear();
-      sizeFrame1.cancel();
-      sizeFrame2.cancel();
-    }
-  }, [stickIfOpenTimeout, open, sizeFrame1, sizeFrame2]);
-  React.useEffect(() => {
-    if (!mounted) {
-      prevSizeRef.current = DEFAULT_SIZE;
-    }
-  }, [mounted]);
-  React.useEffect(() => {
-    if (!popupElement || typeof ResizeObserver !== 'function') {
-      return undefined;
     }
-    const resizeObserver = new ResizeObserver(() => {
-      // Using `getCssDimensions` here causes issues due to fractional values.
-      prevSizeRef.current = {
-        width: popupElement.offsetWidth,
-        height: popupElement.offsetHeight
-      };
-    });
-    resizeObserver.observe(popupElement);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [popupElement]);
-  React.useEffect(() => {
-    if (!popupElement || !isActiveItem || typeof MutationObserver !== 'function') {
-      return undefined;
-    }
-    const mutationObserver = new MutationObserver(() => {
-      animationAbortControllerRef.current?.abort();
-      handleValueChange(prevSizeRef.current.width, prevSizeRef.current.height);
-    });
-    mutationObserver.observe(popupElement, {
-      childList: true,
-      subtree: true,
-      characterData: true
-    });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [popupElement, positionerElement, isActiveItem, handleValueChange]);
+  }, [stickIfOpenTimeout, open]);
   React.useEffect(() => {
     if (isActiveItem && open && popupElement && allowFocusRef.current) {
       allowFocusRef.current = false;
@@ -191,12 +93,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     return () => {
       focusFrame.cancel();
     };
-  }, [beforeOutsideRef, focusFrame, handleValueChange, isActiveItem, open, popupElement]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (isActiveItemRef.current && open && popupElement) {
-      handleValueChange(0, 0);
-    }
-  }, [isActiveItemRef, open, popupElement, handleValueChange]);
+  }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
   function handleOpenChange(nextOpen, eventDetails) {
     const isHover = eventDetails.reason === _reasons.REASONS.triggerHover;
     if (!interactionsEnabled) {
@@ -291,30 +188,16 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       }
     });
   }
-  const handleOpenEvent = (0, _useStableCallback.useStableCallback)(event => {
-    // For nested scenarios without positioner/popup, we can still open the menu
-    // but we can't do size calculations
-    if (!popupElement || !positionerElement) {
-      handleActivation(event);
-      return;
-    }
-    const {
-      width,
-      height
-    } = (0, _getCssDimensions.getCssDimensions)(popupElement);
-    handleActivation(event);
-    handleValueChange(width, height);
-  });
-  const state = React.useMemo(() => ({
+  const state = {
     open: isActiveItem
-  }), [isActiveItem]);
+  };
   function handleSetPointerType(event) {
     setPointerType(event.pointerType);
   }
   const defaultProps = {
     tabIndex: 0,
-    onMouseEnter: handleOpenEvent,
-    onClick: handleOpenEvent,
+    onMouseEnter: handleActivation,
+    onClick: handleActivation,
     onPointerEnter: handleSetPointerType,
     onPointerDown: handleSetPointerType,
     'aria-expanded': isActiveItem,
@@ -342,7 +225,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       const openVertical = orientation === 'vertical' && event.key === 'ArrowRight';
       if (openHorizontal || openVertical) {
         setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent));
-        handleOpenEvent(event);
+        handleActivation(event);
         (0, _utils.stopEvent)(event);
       }
     },

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

@@ -5,7 +5,7 @@ interface Targets {
 }
 interface Params {
   popupElement: HTMLElement | null;
-  viewportElement?: HTMLElement | null;
+  viewportElement?: (HTMLElement | null) | undefined;
   rootRef: React.RefObject<HTMLDivElement | null>;
   tree: FloatingTreeType | null;
   nodeId: string | undefined;

package/navigation-menu/viewport/NavigationMenuViewport.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuViewportState {}
 export interface NavigationMenuViewportProps extends BaseUIComponentProps<'div', NavigationMenuViewport.State> {}
 export declare namespace NavigationMenuViewport {

package/navigation-menu/viewport/NavigationMenuViewport.js

@@ -10,12 +10,15 @@ var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useId = require("@base-ui/utils/useId");
 var _inertValue = require("@base-ui/utils/inertValue");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _FocusGuard = require("../../utils/FocusGuard");
+var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
 var _utils = require("../../floating-ui-react/utils");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
 var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_ROOT_CONTEXT = (0, _getEmptyRootContext.getEmptyRootContext)();
 function Guards({
@@ -75,6 +78,11 @@ const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/Rea
   } = componentProps;
   const id = (0, _useId.useId)(idProp);
   const {
+    open,
+    mounted,
+    value,
+    popupElement,
+    positionerElement,
     setViewportElement,
     setViewportTargetElement,
     floatingRootContext,
@@ -82,7 +90,19 @@ const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/Rea
     viewportInert,
     setViewportInert
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const hasPositioner = Boolean((0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true));
+  const positioning = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true);
+  const hasPositioner = Boolean(positioning);
+  const direction = (0, _DirectionContext.useDirection)();
+  const enableAutoResize = (0, _useStableCallback.useStableCallback)(() => open);
+  (0, _usePopupAutoResize.usePopupAutoResize)({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: value,
+    enabled: enableAutoResize,
+    side: positioning?.side ?? 'bottom',
+    direction
+  });
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (domReference) {

package/number-field/decrement/NumberFieldDecrement.d.ts

@@ -7,7 +7,7 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<NumberFieldDecrementProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface NumberFieldDecrementState extends NumberFieldRoot.State {}
 export interface NumberFieldDecrementProps extends NativeButtonProps, BaseUIComponentProps<'button', NumberFieldDecrement.State> {}
 export declare namespace NumberFieldDecrement {

package/number-field/decrement/NumberFieldDecrement.js

@@ -37,7 +37,6 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
     inputValue,
     intentionalTouchCheckTimeout,
     isPressedRef,
-    maxWithDefault,
     minWithDefault,
     movesAfterTouchRef,
     readOnly,
@@ -51,15 +50,13 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
     lastChangedValueRef,
     onValueCommitted
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
-  const disabled = disabledProp || contextDisabled;
+  const isMin = value != null && value <= minWithDefault;
+  const disabled = disabledProp || contextDisabled || isMin;
   const props = (0, _useNumberFieldButton.useNumberFieldButton)({
     isIncrement: false,
     inputRef,
     startAutoChange,
     stopAutoChange,
-    minWithDefault,
-    maxWithDefault,
-    value,
     inputValue,
     disabled,
     readOnly,
@@ -82,7 +79,8 @@ const NumberFieldDecrement = exports.NumberFieldDecrement = /*#__PURE__*/React.f
     buttonRef
   } = (0, _useButton.useButton)({
     disabled,
-    native: nativeButton
+    native: nativeButton,
+    focusableWhenDisabled: true
   });
   const buttonState = React.useMemo(() => ({
     ...state,

package/number-field/group/NumberFieldGroup.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldGroup: React.ForwardRefExoticComponent<NumberFieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberFieldGroup: React.ForwardRefExoticComponent<Omit<NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NumberFieldGroupState extends NumberFieldRoot.State {}
 export interface NumberFieldGroupProps extends BaseUIComponentProps<'div', NumberFieldGroup.State> {}
 export declare namespace NumberFieldGroup {

package/number-field/increment/NumberFieldIncrement.d.ts

@@ -7,7 +7,7 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<NumberFieldIncrementProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface NumberFieldIncrementState extends NumberFieldRoot.State {}
 export interface NumberFieldIncrementProps extends NativeButtonProps, BaseUIComponentProps<'button', NumberFieldIncrement.State> {}
 export declare namespace NumberFieldIncrement {

package/number-field/increment/NumberFieldIncrement.js

@@ -39,7 +39,6 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
     isPressedRef,
     locale,
     maxWithDefault,
-    minWithDefault,
     movesAfterTouchRef,
     readOnly,
     setValue,
@@ -51,15 +50,13 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
     lastChangedValueRef,
     onValueCommitted
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
-  const disabled = disabledProp || contextDisabled;
+  const isMax = value != null && value >= maxWithDefault;
+  const disabled = disabledProp || contextDisabled || isMax;
   const props = (0, _useNumberFieldButton.useNumberFieldButton)({
     isIncrement: true,
     inputRef,
     startAutoChange,
     stopAutoChange,
-    minWithDefault,
-    maxWithDefault,
-    value,
     inputValue,
     disabled,
     readOnly,
@@ -82,7 +79,8 @@ const NumberFieldIncrement = exports.NumberFieldIncrement = /*#__PURE__*/React.f
     buttonRef
   } = (0, _useButton.useButton)({
     disabled,
-    native: nativeButton
+    native: nativeButton,
+    focusableWhenDisabled: true
   });
   const buttonState = React.useMemo(() => ({
     ...state,

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

@@ -7,7 +7,7 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldInput: React.ForwardRefExoticComponent<NumberFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface NumberFieldInputState extends NumberFieldRoot.State {}
 export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInput.State> {
   /**

package/number-field/input/NumberFieldInput.js

@@ -123,11 +123,14 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
     // causing a hydration mismatch.
     suppressHydrationWarning: true,
     onFocus(event) {
-      if (event.defaultPrevented || readOnly || disabled || hasTouchedInputRef.current) {
+      if (event.defaultPrevented || readOnly || disabled) {
         return;
       }
-      hasTouchedInputRef.current = true;
       setFocused(true);
+      if (hasTouchedInputRef.current) {
+        return;
+      }
+      hasTouchedInputRef.current = true;
 
       // Browsers set selection at the start of the input field by default. We want to set it at
       // the end for the first focus.
@@ -197,8 +200,8 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
         return;
       }
 
-      // For trusted user typing, update the input text immediately and only fire onValueChange
-      // if the typed value is currently parseable into a number. This preserves good UX for IME
+      // Update the input text immediately and only fire onValueChange if the typed value is
+      // 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 => {
@@ -213,17 +216,9 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       if (!isValidCharacterString) {
         return;
       }
-      if (event.isTrusted) {
-        setInputValue(targetValue);
-        const parsedValue = (0, _parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
-        if (parsedValue !== null) {
-          setValue(parsedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        }
-        return;
-      }
       const parsedValue = (0, _parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
+      setInputValue(targetValue);
       if (parsedValue !== null) {
-        setInputValue(targetValue);
         setValue(parsedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       }
     },

package/number-field/root/NumberFieldRoot.d.ts

@@ -10,96 +10,104 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldRoot: React.ForwardRefExoticComponent<NumberFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberFieldRoot: React.ForwardRefExoticComponent<Omit<NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', NumberFieldRootState>, 'onChange'> {
   /**
    * The id of the input element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * The minimum value of the input element.
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The maximum value of the input element.
    */
-  max?: number;
+  max?: number | undefined;
+  /**
+   * When true, direct text entry may be outside the `min`/`max` range without clamping,
+   * so native range underflow/overflow validation can occur.
+   * Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp.
+   * @default false
+   */
+  allowOutOfRange?: boolean | undefined;
   /**
    * The small step value of the input element when incrementing while the meta key is held. Snaps
    * to multiples of this value.
    * @default 0.1
    */
-  smallStep?: number;
+  smallStep?: number | undefined;
   /**
-   * Amount to increment and decrement with the buttons and arrow keys,
-   * or to scrub with pointer movement in the scrub area.
+   * Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.
+   * To always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.
+   * Specify `step="any"` to always disable step validation.
    * @default 1
    */
-  step?: number;
+  step?: (number | 'any') | undefined;
   /**
    * The large step value of the input element when incrementing while the shift key is held. Snaps
    * to multiples of this value.
    * @default 10
    */
-  largeStep?: number;
+  largeStep?: number | undefined;
   /**
    * Whether the user must enter a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the user should be unable to change the field value.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The raw numeric value of the field.
    */
-  value?: number | null;
+  value?: (number | null) | undefined;
   /**
    * The uncontrolled value of the field when it’s initially rendered.
    *
    * To render a controlled number field, use the `value` prop instead.
    */
-  defaultValue?: number;
+  defaultValue?: number | undefined;
   /**
    * Whether to allow the user to scrub the input value with the mouse wheel while focused and
    * hovering over the input.
    * @default false
    */
-  allowWheelScrub?: boolean;
+  allowWheelScrub?: boolean | undefined;
   /**
    * Whether the value should snap to the nearest step when incrementing or decrementing.
    * @default false
    */
-  snapOnStep?: boolean;
+  snapOnStep?: boolean | undefined;
   /**
    * Options to format the input value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Callback fired when the number value changes.
    *
    * The `eventDetails.reason` indicates what triggered the change:
    * - `'input-change'` for parseable typing or programmatic text updates
    * - `'input-clear'` when the field becomes empty
-   * - `'input-blur'` when formatting or clamping occurs on blur
+   * - `'input-blur'` when formatting (and clamping, if enabled) occurs on blur
    * - `'input-paste'` for paste interactions
    * - `'keyboard'` for keyboard input
    * - `'increment-press'` / `'decrement-press'` for button presses on the increment and decrement controls
    * - `'wheel'` for wheel-based scrubbing
    * - `'scrub'` for scrub area drags
    */
-  onValueChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback function that is fired when the value is committed.
    * It runs later than `onValueChange`, when:
@@ -110,16 +118,16 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    *
    * **Warning**: This is a generic event not a change event.
    */
-  onValueCommitted?: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
+  onValueCommitted?: ((value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void) | undefined;
   /**
    * The locale of the input element.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export interface NumberFieldRootState extends FieldRoot.State {
   /**