@base-ui/react 1.1.0 → 1.3.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { ChangeEventCustomProperties } from "../utils/types.js";
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -15,92 +15,99 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
   /**
    * 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.
    * 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 | 'any';
+  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:
@@ -111,18 +118,18 @@ 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 {
+export interface NumberFieldRootState extends FieldRootState {
   /**
    * The raw numeric value of the field.
    */

package/esm/number-field/root/NumberFieldRoot.js

@@ -49,6 +49,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     onValueCommitted: onValueCommittedProp,
     allowWheelScrub = false,
     snapOnStep = false,
+    allowOutOfRange = false,
     format,
     locale,
     render,
@@ -175,6 +176,10 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
   const setValue = useStableCallback((unvalidatedValue, details) => {
     const eventWithOptionalKeyState = details.event;
     const dir = details.direction;
+    const reason = details.reason;
+    // Only allow out-of-range values for direct text entry (native-like behavior).
+    // Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp to min/max.
+    const shouldClampValue = !allowOutOfRange || !(reason === REASONS.inputChange || reason === REASONS.inputBlur || reason === REASONS.inputPaste || reason === REASONS.inputClear || reason === REASONS.none);
     const validatedValue = toValidatedNumber(unvalidatedValue, {
       step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
       format: formatOptionsRef.current,
@@ -182,18 +187,20 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       maxWithDefault,
       minWithZeroDefault,
       snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false
+      small: eventWithOptionalKeyState?.altKey ?? false,
+      clamp: shouldClampValue
     });
 
     // Determine whether we should notify about a change even if the numeric value is unchanged.
     // This is needed when the user input is clamped/snapped to the same current value, or when
     // the source value differs but validation normalizes to the existing value.
-    const shouldFireChange = validatedValue !== value || unvalidatedValue !== value || allowInputSyncRef.current === false;
+    const isInputReason = details.reason === REASONS.inputChange || details.reason === REASONS.inputClear || details.reason === REASONS.inputBlur || details.reason === REASONS.inputPaste || details.reason === REASONS.none;
+    const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
     if (shouldFireChange) {
       lastChangedValueRef.current = validatedValue;
       onValueChangeProp?.(validatedValue, details);
       if (details.isCanceled) {
-        return;
+        return shouldFireChange;
       }
       setValueUnwrapped(validatedValue);
       setDirty(validatedValue !== validityData.initialValue);
@@ -210,6 +217,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
 
     // Formatting can change even if the numeric value hasn't, so ensure a re-render when needed.
     forceRender();
+    return shouldFireChange;
   });
   const incrementValue = useStableCallback((amount, {
     direction,
@@ -220,7 +228,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     const prevValue = currentValue == null ? valueRef.current : currentValue;
     const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
     const nativeEvent = event;
-    setValue(nextValue, createChangeEventDetails(reason, nativeEvent, undefined, {
+    return setValue(nextValue, createChangeEventDetails(reason, nativeEvent, undefined, {
       direction
     }));
   });
@@ -251,22 +259,29 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       isPressedRef.current = false;
       stopAutoChange();
       const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? 'increment' : 'decrement';
+      const commitReason = isIncrement ? REASONS.incrementPress : REASONS.decrementPress;
       onValueCommitted(committed, createGenericEventDetails(commitReason, event));
     }, {
       once: true
     });
     function tick() {
       const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
-      incrementValue(amount, {
+      return incrementValue(amount, {
         direction: isIncrement ? 1 : -1,
         event: triggerEvent,
         reason: isIncrement ? 'increment-press' : 'decrement-press'
       });
     }
-    tick();
+    if (!tick()) {
+      stopAutoChange();
+      return;
+    }
     startTickTimeout.start(START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(CHANGE_VALUE_TICK_DELAY, tick);
+      tickInterval.start(CHANGE_VALUE_TICK_DELAY, () => {
+        if (!tick()) {
+          stopAutoChange();
+        }
+      });
     });
   });
 

package/esm/number-field/root/NumberFieldRootContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Timeout } from '@base-ui/utils/useTimeout';
-import type { NumberFieldRoot } from "./NumberFieldRoot.js";
+import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.js";
 import { EventWithOptionalKeyState } from "../utils/types.js";
 import type { IncrementValueParameters } from "../utils/types.js";
 export type InputMode = 'numeric' | 'decimal' | 'text';
@@ -14,9 +14,9 @@ export interface NumberFieldRootContext {
   disabled: boolean;
   readOnly: boolean;
   id: string | undefined;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   allowInputSyncRef: React.RefObject<boolean | null>;
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
@@ -37,7 +37,7 @@ export interface NumberFieldRootContext {
   locale: Intl.LocalesArgument;
   isScrubbing: boolean;
   setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
-  state: NumberFieldRoot.State;
+  state: NumberFieldRootState;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
 }
 export declare const NumberFieldRootContext: React.Context<NumberFieldRootContext | undefined>;

package/esm/number-field/root/useNumberFieldButton.d.ts

@@ -3,23 +3,23 @@ import type { Timeout } from '@base-ui/utils/useTimeout';
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
 import type { NumberFieldRoot } from "./NumberFieldRoot.js";
 import type { HTMLProps } from "../../utils/types.js";
-export declare function useNumberFieldButton(params: useNumberFieldButton.Parameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export declare function useNumberFieldButton(params: UseNumberFieldButtonParameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export interface UseNumberFieldButtonParameters {
   allowInputSyncRef: React.RefObject<boolean | null>;
   disabled: boolean;
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
   id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   inputValue: string;
   intentionalTouchCheckTimeout: Timeout;
   isIncrement: boolean;
   isPressedRef: React.RefObject<boolean | null>;
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   movesAfterTouchRef: React.RefObject<number | null>;
   readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
   stopAutoChange: () => void;
   valueRef: React.RefObject<number | null>;
@@ -29,7 +29,4 @@ export interface UseNumberFieldButtonParameters {
 export interface UseNumberFieldButtonReturnValue {
   props: HTMLProps;
 }
-export declare namespace useNumberFieldButton {
-  type Parameters = UseNumberFieldButtonParameters;
-  type ReturnValue = UseNumberFieldButtonReturnValue;
-}
+export interface UseNumberFieldButtonState {}

package/esm/number-field/root/useNumberFieldButton.js

@@ -4,6 +4,12 @@ import * as React from 'react';
 import { DEFAULT_STEP, MAX_POINTER_MOVES_AFTER_TOUCH, SCROLLING_POINTER_MOVE_DISTANCE, TOUCH_TIMEOUT } from "../utils/constants.js";
 import { parseNumber } from "../utils/parse.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
 export function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
@@ -72,7 +78,7 @@ export function useNumberFieldButton(params) {
       const isDisabled = disabled || readOnly;
       if (event.defaultPrevented || isDisabled || (
       // If it's not a keyboard/virtual click, ignore.
-      pointerTypeRef.current === 'touch' ? ignoreClickRef.current : event.detail !== 0)) {
+      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -101,9 +107,8 @@ export function useNumberFieldButton(params) {
         y: event.clientY
       };
       commitValue(event.nativeEvent);
-
-      // Note: "pen" is sometimes returned for mouse usage on Linux Chrome.
-      if (event.pointerType !== 'touch') {
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
         event.preventDefault();
         inputRef.current?.focus();
         startAutoChange(isIncrement, event);
@@ -131,13 +136,13 @@ export function useNumberFieldButton(params) {
     onPointerUp(event) {
       // Ensure we mark the press as released for touch flows even if auto-change never started,
       // so the delayed auto-change check won’t start after a quick tap.
-      if (event.pointerType === 'touch') {
+      if (isTouchLikePointerType(event.pointerType)) {
         isPressedRef.current = false;
       }
     },
     onPointerMove(event) {
       const isDisabled = disabled || readOnly;
-      if (isDisabled || event.pointerType !== 'touch' || !isPressedRef.current) {
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -158,7 +163,7 @@ export function useNumberFieldButton(params) {
     },
     onMouseEnter(event) {
       const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || pointerTypeRef.current === 'touch') {
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(isIncrement, event);

package/esm/number-field/scrub-area/NumberFieldScrubArea.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * An interactive area where the user can click and drag to change the field value.
  * Renders a `<span>` element.
@@ -8,19 +8,19 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubArea.State> {
+export interface NumberFieldScrubAreaState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaState> {
   /**
    * Cursor movement direction in the scrub area.
    * @default 'horizontal'
    */
-  direction?: 'horizontal' | 'vertical';
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Determines how many pixels the cursor must move before the value changes.
    * A higher value will make scrubbing less sensitive.
    * @default 2
    */
-  pixelSensitivity?: number;
+  pixelSensitivity?: number | undefined;
   /**
    * If specified, determines the distance that the cursor may move from the center
    * of the scrub area before it will loop back around.

package/esm/number-field/scrub-area/NumberFieldScrubArea.js

@@ -46,6 +46,8 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
   } = useNumberFieldRootContext();
   const scrubAreaRef = React.useRef(null);
   const isScrubbingRef = React.useRef(false);
+  const didMoveRef = React.useRef(false);
+  const pointerDownTargetRef = React.useRef(null);
   const scrubAreaCursorRef = React.useRef(null);
   const virtualCursorCoords = React.useRef({
     x: 0,
@@ -132,6 +134,17 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
           onValueCommitted(lastChangedValueRef.current ?? valueRef.current, createGenericEventDetails(REASONS.scrub, event));
+
+          // Manually dispatch a click event if no movement happened, since
+          // preventDefault on pointerdown prevents the browser click event.
+          if (!didMoveRef.current && pointerDownTargetRef.current != null) {
+            pointerDownTargetRef.current.dispatchEvent(new MouseEvent('click', {
+              bubbles: true,
+              cancelable: true
+            }));
+          }
+          didMoveRef.current = false;
+          pointerDownTargetRef.current = null;
         }
       }
       if (isFirefox) {
@@ -157,6 +170,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       cumulativeDelta += direction === 'vertical' ? movementY : movementX;
       if (Math.abs(cumulativeDelta) >= pixelSensitivity) {
         cumulativeDelta = 0;
+        didMoveRef.current = true;
         const dValue = direction === 'vertical' ? -movementY : movementX;
         const stepAmount = getStepAmount(event) ?? DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
@@ -214,6 +228,8 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
         inputRef.current?.focus();
       }
       isScrubbingRef.current = true;
+      didMoveRef.current = false;
+      pointerDownTargetRef.current = event.target;
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

package/esm/number-field/scrub-area/NumberFieldScrubAreaContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NumberFieldScrubAreaContext = /*#__PURE__*/React.createContext(undefined);

package/esm/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -11,8 +11,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaCursorState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursor.State> {}
+export interface NumberFieldScrubAreaCursorState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursorState> {}
 export declare namespace NumberFieldScrubAreaCursor {
   type State = NumberFieldScrubAreaCursorState;
   type Props = NumberFieldScrubAreaCursorProps;

package/esm/number-field/utils/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
-export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRoot.State>;
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
+export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRootState>;

package/esm/number-field/utils/stateAttributesMapping.js

@@ -1,4 +1,6 @@
+import { fieldValidityMapping } from "../../field/utils/constants.js";
 export const stateAttributesMapping = {
   inputValue: () => null,
-  value: () => null
+  value: () => null,
+  ...fieldValidityMapping
 };

package/esm/number-field/utils/subscribeToVisualViewportResize.d.ts

@@ -1 +1 @@
-export declare function subscribeToVisualViewportResize(element: Element, visualScaleRef: React.MutableRefObject<number>): () => void;
+export declare function subscribeToVisualViewportResize(element: Element, visualScaleRef: React.RefObject<number>): () => void;

package/esm/number-field/utils/types.d.ts

@@ -1,15 +1,15 @@
 export type Direction = -1 | 1;
 export type DirectionalChangeReason = 'increment-press' | 'decrement-press' | 'wheel' | 'scrub' | 'keyboard';
 export interface ChangeEventCustomProperties {
-  direction?: Direction;
+  direction?: Direction | undefined;
 }
 export interface IncrementValueParameters {
   direction: Direction;
-  event?: Event | React.SyntheticEvent;
+  event?: Event | React.SyntheticEvent | undefined;
   reason: DirectionalChangeReason;
-  currentValue?: number | null;
+  currentValue?: number | null | undefined;
 }
 export interface EventWithOptionalKeyState {
-  altKey?: boolean;
-  shiftKey?: boolean;
+  altKey?: boolean | undefined;
+  shiftKey?: boolean | undefined;
 }

package/esm/number-field/utils/validate.d.ts

@@ -6,7 +6,8 @@ export declare function toValidatedNumber(value: number | null, {
   minWithZeroDefault,
   format,
   snapOnStep,
-  small
+  small,
+  clamp: shouldClamp
 }: {
   step: number | undefined;
   minWithDefault: number;
@@ -15,4 +16,5 @@ export declare function toValidatedNumber(value: number | null, {
   format: Intl.NumberFormatOptions | undefined;
   snapOnStep: boolean;
   small: boolean;
+  clamp: boolean;
 }): number | null;

package/esm/number-field/utils/validate.js

@@ -50,12 +50,13 @@ export function toValidatedNumber(value, {
   minWithZeroDefault,
   format,
   snapOnStep,
-  small
+  small,
+  clamp: shouldClamp
 }) {
   if (value === null) {
     return value;
   }
-  const clampedValue = clamp(value, minWithDefault, maxWithDefault);
+  const clampedValue = shouldClamp ? clamp(value, minWithDefault, maxWithDefault) : value;
   if (step != null && snapOnStep) {
     if (step === 0) {
       return removeFloatingPointErrors(clampedValue, format);

package/esm/popover/arrow/PopoverArrow.d.ts

@@ -13,11 +13,20 @@ export interface PopoverArrowState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface PopoverArrowProps extends BaseUIComponentProps<'div', PopoverArrow.State> {}
+export interface PopoverArrowProps extends BaseUIComponentProps<'div', PopoverArrowState> {}
 export declare namespace PopoverArrow {
   type State = PopoverArrowState;
   type Props = PopoverArrowProps;

package/esm/popover/arrow/PopoverArrow.js

@@ -29,12 +29,12 @@ export const PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(
     arrowUncentered,
     arrowStyles
   } = usePopoverPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/popover/arrow/PopoverArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let PopoverArrowDataAttributes = function (PopoverArrowDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PopoverArrowDataAttributes["side"] = "data-side";
+  PopoverArrowDataAttributes[PopoverArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PopoverArrowDataAttributes["align"] = "data-align";
+  PopoverArrowDataAttributes[PopoverArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popover arrow is uncentered.
    */

package/esm/popover/backdrop/PopoverBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PopoverBackdropState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PopoverBackdropProps extends BaseUIComponentProps<'div', PopoverBackdrop.State> {}
+export interface PopoverBackdropProps extends BaseUIComponentProps<'div', PopoverBackdropState> {}
 export declare namespace PopoverBackdrop {
   type State = PopoverBackdropState;
   type Props = PopoverBackdropProps;

package/esm/popover/backdrop/PopoverBackdrop.js

@@ -30,10 +30,10 @@ export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBac
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
   const openReason = store.useState('openChangeReason');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = useRenderElement('div', props, {
     state,
     ref: [store.context.backdropRef, forwardedRef],

package/esm/popover/close/PopoverClose.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  */
 export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface PopoverCloseState {}
-export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverClose.State> {}
+export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverCloseState> {}
 export declare namespace PopoverClose {
   type State = PopoverCloseState;
   type Props = PopoverCloseProps;