@base-ui/react 1.6.0 → 1.8.0

package/utils/useSwipeDismiss.mjs

@@ -2,11 +2,12 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { clamp } from '@base-ui/utils/clamp';
 import { contains, getTarget } from "../floating-ui-react/utils.mjs";
 import { findScrollableTouchTarget, hasScrollableAncestor } from "./scrollable.mjs";
-import { clamp } from "../internals/clamp.mjs";
 import { getElementAtPoint } from "./getElementAtPoint.mjs";
+import { getElementTransform } from "./getElementTransform.mjs";
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;
 const MIN_DRAG_THRESHOLD = 1;
@@ -28,33 +29,6 @@ export function getDisplacement(direction, deltaX, deltaY) {
       return 0;
   }
 }
-export function getElementTransform(element) {
-  const computedStyle = ownerWindow(element).getComputedStyle(element);
-  const transform = computedStyle.transform;
-  let translateX = 0;
-  let translateY = 0;
-  let scale = 1;
-  if (transform && transform !== 'none') {
-    const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
-    if (matrix) {
-      const values = matrix[1].split(', ').map(parseFloat);
-      if (values.length === 6) {
-        translateX = values[4];
-        translateY = values[5];
-        scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
-      } else if (values.length === 16) {
-        translateX = values[12];
-        translateY = values[13];
-        scale = values[0];
-      }
-    }
-  }
-  return {
-    x: translateX,
-    y: translateY,
-    scale
-  };
-}
 function getValidTimeStamp(timeStamp) {
   return Number.isFinite(timeStamp) && timeStamp > 0 ? timeStamp : null;
 }
@@ -151,6 +125,7 @@ export function useSwipeDismiss(options) {
   });
   const swipeProgressRef = React.useRef(0);
   const swipeThresholdRef = React.useRef(swipeThresholdDefault);
+  const swipeThresholdFunctionRef = React.useRef(null);
   const swipeStartTimeRef = React.useRef(null);
   const lastDragSampleRef = React.useRef(null);
   const lastDragVelocityRef = React.useRef({
@@ -172,15 +147,12 @@ export function useSwipeDismiss(options) {
     if (!direction) {
       return;
     }
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-      return;
-    }
     const element = elementRef.current;
-    if (!element) {
+    const thresholdFunction = swipeThresholdFunctionRef.current;
+    if (!element || !thresholdFunction) {
       return;
     }
-    const value = swipeThresholdProp({
+    const value = thresholdFunction({
       element,
       direction
     });
@@ -258,6 +230,7 @@ export function useSwipeDismiss(options) {
     setDragDismissed(false);
     updateSwipeProgress(0);
     swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = null;
     dragStartPosRef.current = {
       x: 0,
       y: 0
@@ -298,11 +271,6 @@ export function useSwipeDismiss(options) {
     lastProgressDetailsRef.current = null;
     syncDragStyles(false);
   }, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
-  React.useEffect(() => {
-    if (typeof swipeThresholdProp !== 'function') {
-      swipeThresholdRef.current = swipeThresholdDefault;
-    }
-  }, [swipeThresholdDefault, swipeThresholdProp]);
   function getPrimaryPointerPosition(event) {
     if ('touches' in event) {
       const touch = event.touches[0];
@@ -323,19 +291,27 @@ export function useSwipeDismiss(options) {
     return event.pointerType === 'touch';
   }
   function getTargetAtPoint(position, nativeEvent) {
-    const doc = ownerDocument(elementRef.current);
-    const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
+    const root = elementRef.current?.getRootNode();
+    const elementAtPoint = getElementAtPoint(root, position.x, position.y);
     const target = elementAtPoint ?? getTarget(nativeEvent);
     return target;
   }
   function findGestureScrollableTouchTarget(target, root) {
+    // The swiped element is positioned relative to the viewport, so the page scroller must not
+    // gate the gesture (a reset like `html, body { height: 100%; overflow: auto }` makes `body`
+    // a real scroll container). The drawer viewport's native touchmove handler already ignores it.
+    const find = axis => {
+      const scrollTarget = findScrollableTouchTarget(target, root, axis);
+      const doc = ownerDocument(scrollTarget);
+      return scrollTarget === doc.body || scrollTarget === doc.documentElement ? null : scrollTarget;
+    };
     if (hasHorizontal && !hasVertical) {
-      return findScrollableTouchTarget(target, root, 'horizontal');
+      return find('horizontal');
     }
     if (hasVertical && !hasHorizontal) {
-      return findScrollableTouchTarget(target, root, 'vertical');
+      return find('vertical');
     }
-    return findScrollableTouchTarget(target, root, 'vertical') ?? findScrollableTouchTarget(target, root, 'horizontal');
+    return find('vertical') ?? find('horizontal');
   }
   function startSwipeAtPosition(event, position, startOptions) {
     swipeFromScrollableRef.current = false;
@@ -367,6 +343,8 @@ export function useSwipeDismiss(options) {
     swipeStartTimeRef.current = getValidTimeStamp(event.timeStamp);
     swipeCancelBaselineRef.current = position;
     lastMovePosRef.current = position;
+    swipeThresholdRef.current = swipeThresholdDefault;
+    swipeThresholdFunctionRef.current = typeof swipeThresholdProp === 'function' ? swipeThresholdProp : null;
     if (element) {
       elementSizeRef.current = {
         width: element.offsetWidth,
@@ -431,12 +409,9 @@ export function useSwipeDismiss(options) {
     onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
-    const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
+    const exponent = value => Math.sign(value) * Math.abs(value) ** 0.5;
     const dampAxis = (delta, allowNegative, allowPositive) => {
-      if (!allowNegative && delta < 0) {
-        return exponent(delta);
-      }
-      if (!allowPositive && delta > 0) {
+      if (!allowNegative && delta < 0 || !allowPositive && delta > 0) {
         return exponent(delta);
       }
       return delta;
@@ -449,29 +424,16 @@ export function useSwipeDismiss(options) {
     };
   }
   function canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY) {
+    // Swiping toward the axis start edge (down/right) is allowed when scrolled to the start;
+    // toward the end edge (up/left) when scrolled to the end.
+    const canSwipeOnAxis = (delta, scrollOffset, maxScrollOffset, allowTowardStart, allowTowardEnd) => delta > 0 && scrollOffset <= 0 && allowTowardStart || delta < 0 && scrollOffset >= Math.max(0, maxScrollOffset) && allowTowardEnd;
     const absDeltaX = Math.abs(deltaX);
     const absDeltaY = Math.abs(deltaY);
-    const useVerticalAxis = hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX);
-    if (useVerticalAxis) {
-      const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
-      const atTop = scrollTarget.scrollTop <= 0;
-      const atBottom = scrollTarget.scrollTop >= maxScrollTop;
-      const movingDown = deltaY > 0;
-      const movingUp = deltaY < 0;
-      const canSwipeDown = movingDown && atTop && allowDown;
-      const canSwipeUp = movingUp && atBottom && allowUp;
-      return canSwipeDown || canSwipeUp;
-    }
-    const useHorizontalAxis = hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY);
-    if (useHorizontalAxis) {
-      const maxScrollLeft = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
-      const atLeft = scrollTarget.scrollLeft <= 0;
-      const atRight = scrollTarget.scrollLeft >= maxScrollLeft;
-      const movingRight = deltaX > 0;
-      const movingLeft = deltaX < 0;
-      const canSwipeRight = movingRight && atLeft && allowRight;
-      const canSwipeLeft = movingLeft && atRight && allowLeft;
-      return canSwipeRight || canSwipeLeft;
+    if (hasVertical && deltaY !== 0 && (!hasHorizontal || absDeltaY >= absDeltaX)) {
+      return canSwipeOnAxis(deltaY, scrollTarget.scrollTop, scrollTarget.scrollHeight - scrollTarget.clientHeight, allowDown, allowUp);
+    }
+    if (hasHorizontal && deltaX !== 0 && (!hasVertical || absDeltaX > absDeltaY)) {
+      return canSwipeOnAxis(deltaX, scrollTarget.scrollLeft, scrollTarget.scrollWidth - scrollTarget.clientWidth, allowRight, allowLeft);
     }
     return null;
   }
@@ -492,7 +454,7 @@ export function useSwipeDismiss(options) {
     pendingSwipeRef.current = true;
     pendingSwipeStartPosRef.current = startPos;
     swipeFromScrollableRef.current = false;
-    sawPrimaryButtonsOnMoveRef.current = false;
+    sawPrimaryButtonsOnMoveRef.current = !('touches' in event);
     const allowedToStart = canStart ? canStart(startPos, {
       nativeEvent: event.nativeEvent,
       direction: primaryDirection
@@ -520,14 +482,21 @@ export function useSwipeDismiss(options) {
       event.preventDefault();
     }
     if (isFirstPointerMoveRef.current) {
-      // Adjust the starting position to the current position on the first move
-      // to account for the delay between pointerdown and the first pointermove on iOS.
-      dragStartPosRef.current = position;
-      const moveTime = getValidTimeStamp(event.timeStamp);
-      if (moveTime !== null) {
-        swipeStartTimeRef.current = moveTime;
-      }
       isFirstPointerMoveRef.current = false;
+      // Reset the drag origin to the first move's position to absorb the gap between the press and
+      // the first move event — notably on iOS touch, where the first `touchmove` arrives already
+      // offset from the `touchstart` — which would otherwise make the dragged element jump. This
+      // only matters when an element follows the pointer; when `trackDrag` is false (e.g. the
+      // swipe-area, which only opens the drawer) keep the original press position so a quick flick
+      // still registers: on a low-refresh-rate display the whole travel can land in this single
+      // first move, and discarding it would drop the gesture.
+      if (trackDrag) {
+        dragStartPosRef.current = position;
+        const moveTime = getValidTimeStamp(event.timeStamp);
+        if (moveTime !== null) {
+          swipeStartTimeRef.current = moveTime;
+        }
+      }
     }
     const clientX = position.x;
     const clientY = position.y;
@@ -615,51 +584,45 @@ export function useSwipeDismiss(options) {
         newOffsetY += dampedDelta.y;
       }
     }
+
+    // Only rewrite drag styles when the drag offset actually changed. `syncDragStyles` writes the
+    // raw (undamped) frozen transform and movement vars, relying on the consumer's `onProgress`
+    // to overwrite them with damped styles — but `updateSwipeProgress` dedupes unchanged
+    // deltas and skips `onProgress`. A move that doesn't change the offset (e.g. the cursor
+    // pinned at a screen edge during an off-screen drag, jittering only on the ignored axis)
+    // would otherwise reinstate the raw styles with no correction, jumping the element to the
+    // undamped position.
+    const previousOffset = dragOffsetRef.current;
+    const offsetChanged = newOffsetX !== previousOffset.x || newOffsetY !== previousOffset.y;
     dragOffsetRef.current = {
       x: newOffsetX,
       y: newOffsetY
     };
-    syncDragStyles(true);
+    if (offsetChanged) {
+      syncDragStyles(true);
+    }
     recordDragSample({
       x: newOffsetX,
       y: newOffsetY
     }, getValidTimeStamp(event.timeStamp));
     const dragDeltaX = newOffsetX - initialTransformRef.current.x;
     const dragDeltaY = newOffsetY - initialTransformRef.current.y;
-    const swipeDirectionDetails = intendedSwipeDirectionRef.current;
-    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
-    if (!progressDirection) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
-    const scale = initialTransformRef.current.scale || 1;
-    if (size <= 0 || scale <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    const progressDisplacement = getDisplacement(progressDirection, newOffsetX - initialTransformRef.current.x, newOffsetY - initialTransformRef.current.y);
-    if (progressDisplacement <= 0) {
-      updateSwipeProgress(0, {
-        deltaX: dragDeltaX,
-        deltaY: dragDeltaY,
-        direction: swipeDirectionDetails
-      });
-      return;
-    }
-    updateSwipeProgress(progressDisplacement / (size * scale), {
+    const progressDetails = {
       deltaX: dragDeltaX,
       deltaY: dragDeltaY,
-      direction: swipeDirectionDetails
-    });
+      direction: intendedSwipeDirectionRef.current
+    };
+    let progress = 0;
+    const progressDirection = primaryDirection ?? intendedSwipeDirectionRef.current;
+    if (progressDirection) {
+      const size = progressDirection === 'left' || progressDirection === 'right' ? elementSizeRef.current.width : elementSizeRef.current.height;
+      const scale = initialTransformRef.current.scale || 1;
+      const progressDisplacement = getDisplacement(progressDirection, dragDeltaX, dragDeltaY);
+      if (size > 0 && scale > 0 && progressDisplacement > 0) {
+        progress = progressDisplacement / (size * scale);
+      }
+    }
+    updateSwipeProgress(progress, progressDetails);
   }
   const handleEnd = useStableCallback(event => {
     if (!enabled) {
@@ -747,35 +710,9 @@ export function useSwipeDismiss(options) {
       dismissDirection = intendedSwipeDirectionRef.current ?? primaryDirection;
     } else {
       for (const direction of directions) {
-        switch (direction) {
-          case 'right':
-            if (deltaX > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'right';
-            }
-            break;
-          case 'left':
-            if (deltaX < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'left';
-            }
-            break;
-          case 'down':
-            if (deltaY > swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'down';
-            }
-            break;
-          case 'up':
-            if (deltaY < -swipeThresholdRef.current) {
-              shouldClose = true;
-              dismissDirection = 'up';
-            }
-            break;
-          default:
-            break;
-        }
-        if (shouldClose) {
+        if (getDisplacement(direction, deltaX, deltaY) > swipeThresholdRef.current) {
+          shouldClose = true;
+          dismissDirection = direction;
           break;
         }
       }
@@ -917,25 +854,29 @@ export function useSwipeDismiss(options) {
     });
   });
   const getDragStyles = React.useCallback(() => {
+    // Read `isSwipingRef`, not the lagging `isSwiping` state, to match the imperative writer
+    // `syncDragStyles`. Otherwise a render that commits before `setSwiping(true)` flushes strips the
+    // transform it just wrote, flashing the popup to its resting position for a frame.
+    const swiping = isSwipingRef.current;
     const dragOffset = dragOffsetRef.current;
     const initialTransform = initialTransformRef.current;
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
-    if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
+    if (!swiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
       return {
         [movementCssVars.x]: '0px',
         [movementCssVars.y]: '0px'
       };
     }
     return {
-      transition: isSwiping ? 'none' : undefined,
+      transition: swiping ? 'none' : undefined,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
-      transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
+      transform: swiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
       [movementCssVars.x]: `${deltaX}px`,
       [movementCssVars.y]: `${deltaY}px`
     };
-  }, [dragDismissed, isSwiping, movementCssVars]);
+  }, [dragDismissed, movementCssVars]);
   const getPointerProps = React.useCallback(() => {
     if (!enabled) {
       return {};

package/internals/areArraysEqual.d.mts

@@ -1,3 +0,0 @@
-type ItemComparer<Item> = (a: Item, b: Item) => boolean;
-export declare function areArraysEqual<Item>(array1: ReadonlyArray<Item>, array2: ReadonlyArray<Item>, itemComparer?: ItemComparer<Item>): boolean;
-export {};

package/internals/areArraysEqual.d.ts

@@ -1,3 +0,0 @@
-type ItemComparer<Item> = (a: Item, b: Item) => boolean;
-export declare function areArraysEqual<Item>(array1: ReadonlyArray<Item>, array2: ReadonlyArray<Item>, itemComparer?: ItemComparer<Item>): boolean;
-export {};

package/internals/areArraysEqual.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.areArraysEqual = areArraysEqual;
-function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
-  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
-}

package/internals/areArraysEqual.mjs

@@ -1,3 +0,0 @@
-export function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
-  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
-}

package/internals/clamp.d.mts

@@ -1 +0,0 @@
-export declare function clamp(val: number, min?: number, max?: number): number;

package/internals/clamp.d.ts

@@ -1 +0,0 @@
-export declare function clamp(val: number, min?: number, max?: number): number;

package/internals/clamp.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.clamp = clamp;
-function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
-  return Math.max(min, Math.min(val, max));
-}

package/internals/clamp.mjs

@@ -1,3 +0,0 @@
-export function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
-  return Math.max(min, Math.min(val, max));
-}

package/internals/shadowDom.d.mts

@@ -1,3 +0,0 @@
-export declare function activeElement(doc: Document): Element | null;
-export declare function contains(parent?: Element | null, child?: Element | null): boolean;
-export declare function getTarget(event: Event): EventTarget | null;

package/internals/shadowDom.d.ts

@@ -1,3 +0,0 @@
-export declare function activeElement(doc: Document): Element | null;
-export declare function contains(parent?: Element | null, child?: Element | null): boolean;
-export declare function getTarget(event: Event): EventTarget | null;

package/internals/shadowDom.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.activeElement = activeElement;
-exports.contains = contains;
-exports.getTarget = getTarget;
-var _dom = require("@floating-ui/utils/dom");
-function activeElement(doc) {
-  let element = doc.activeElement;
-  while (element?.shadowRoot?.activeElement != null) {
-    element = element.shadowRoot.activeElement;
-  }
-  return element;
-}
-function contains(parent, child) {
-  if (!parent || !child) {
-    return false;
-  }
-  const rootNode = child.getRootNode?.();
-
-  // First, attempt with the faster native method.
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // Then fall back to traversing out of shadow roots when needed.
-  if (rootNode && (0, _dom.isShadowRoot)(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      next = next.parentNode || next.host;
-    }
-  }
-  return false;
-}
-function getTarget(event) {
-  if ('composedPath' in event) {
-    return event.composedPath()[0];
-  }
-
-  // TS assumes `composedPath()` always exists, but older browsers without
-  // shadow DOM support still fall back to `target`.
-  return event.target;
-}

package/internals/shadowDom.mjs

@@ -1,40 +0,0 @@
-import { isShadowRoot } from '@floating-ui/utils/dom';
-export function activeElement(doc) {
-  let element = doc.activeElement;
-  while (element?.shadowRoot?.activeElement != null) {
-    element = element.shadowRoot.activeElement;
-  }
-  return element;
-}
-export function contains(parent, child) {
-  if (!parent || !child) {
-    return false;
-  }
-  const rootNode = child.getRootNode?.();
-
-  // First, attempt with the faster native method.
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // Then fall back to traversing out of shadow roots when needed.
-  if (rootNode && isShadowRoot(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      next = next.parentNode || next.host;
-    }
-  }
-  return false;
-}
-export function getTarget(event) {
-  if ('composedPath' in event) {
-    return event.composedPath()[0];
-  }
-
-  // TS assumes `composedPath()` always exists, but older browsers without
-  // shadow DOM support still fall back to `target`.
-  return event.target;
-}

package/number-field/root/useNumberFieldButton.d.mts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.mjs";
-import type { NumberFieldRoot } from "./NumberFieldRoot.mjs";
-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;
-  id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  inputValue: string;
-  isIncrement: boolean;
-  locale?: Intl.LocalesArgument | undefined;
-  readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  valueRef: React.RefObject<number | null>;
-  lastChangedValueRef: React.RefObject<number | null>;
-  onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
-}

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

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
-import type { NumberFieldRoot } from "./NumberFieldRoot.js";
-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;
-  id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  inputValue: string;
-  isIncrement: boolean;
-  locale?: Intl.LocalesArgument | undefined;
-  readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  valueRef: React.RefObject<number | null>;
-  lastChangedValueRef: React.RefObject<number | null>;
-  onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
-}