@base-ui/react 1.2.0 → 1.4.0

package/number-field/root/useNumberFieldButton.js

@@ -1,15 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNumberFieldButton = useNumberFieldButton;
-var React = _interopRequireWildcard(require("react"));
+var _usePressAndHold = require("../../utils/usePressAndHold");
 var _constants = require("../utils/constants");
 var _parse = require("../utils/parse");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _reasons = require("../../utils/reasons");
 // 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.
@@ -26,27 +26,15 @@ function useNumberFieldButton(params) {
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
     isIncrement,
-    isPressedRef,
     locale,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
-    stopAutoChange,
     valueRef,
     lastChangedValueRef,
     onValueCommitted
   } = params;
-  const incrementDownCoordsRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const isTouchingButtonRef = React.useRef(false);
-  const ignoreClickRef = React.useRef(false);
-  const pointerTypeRef = React.useRef('');
-  const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
+  const pressReason = isIncrement ? _reasons.REASONS.incrementPress : _reasons.REASONS.decrementPress;
   function commitValue(nativeEvent) {
     allowInputSyncRef.current = true;
 
@@ -61,6 +49,28 @@ function useNumberFieldButton(params) {
       }));
     }
   }
+  const {
+    pointerHandlers,
+    shouldSkipClick
+  } = (0, _usePressAndHold.usePressAndHold)({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tickDelay: _constants.CHANGE_VALUE_TICK_DELAY,
+    startDelay: _constants.START_AUTO_CHANGE_DELAY,
+    scrollDistance: _constants.SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent) ?? _constants.DEFAULT_STEP;
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(pressReason, nativeEvent));
+    }
+  });
   const props = {
     disabled,
     'aria-readonly': readOnly || undefined,
@@ -74,17 +84,10 @@ function useNumberFieldButton(params) {
       WebkitUserSelect: 'none',
       userSelect: 'none'
     },
-    onTouchStart() {
-      isTouchingButtonRef.current = true;
-    },
-    onTouchEnd() {
-      isTouchingButtonRef.current = false;
-    },
+    ...pointerHandlers,
     onClick(event) {
       const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || (
-      // If it's not a keyboard/virtual click, ignore.
-      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -105,86 +108,14 @@ function useNumberFieldButton(params) {
       if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
         return;
       }
-      pointerTypeRef.current = event.pointerType;
-      ignoreClickRef.current = false;
-      isPressedRef.current = true;
-      incrementDownCoordsRef.current = {
-        x: event.clientX,
-        y: event.clientY
-      };
+
+      // Sync dirty input value before starting the hold sequence.
       commitValue(event.nativeEvent);
-      const isTouchPointer = isTouchLikePointerType(event.pointerType);
-      if (!isTouchPointer) {
-        event.preventDefault();
+      if (!isTouchLikePointerType(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
         inputRef.current?.focus();
-        startAutoChange(isIncrement, event);
-      } else {
-        // We need to check if the pointerdown was intentional, and not the result of a scroll
-        // or pinch-zoom. In that case, we don't want to change the value.
-        intentionalTouchCheckTimeout.start(_constants.TOUCH_TIMEOUT, () => {
-          const moves = movesAfterTouchRef.current;
-          movesAfterTouchRef.current = 0;
-          // Only start auto-change if the touch is still pressed (prevents races
-          // with pointerup occurring before the timeout fires on quick taps).
-          const stillPressed = isPressedRef.current;
-          if (stillPressed && moves != null && moves < _constants.MAX_POINTER_MOVES_AFTER_TOUCH) {
-            startAutoChange(isIncrement, event);
-            ignoreClickRef.current = true; // synthesized click should be ignored
-          } else {
-            // No auto-change (simple tap or scroll gesture), allow the click handler
-            // to perform a single increment and commit.
-            ignoreClickRef.current = false;
-            stopAutoChange();
-          }
-        });
-      }
-    },
-    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 (isTouchLikePointerType(event.pointerType)) {
-        isPressedRef.current = false;
-      }
-    },
-    onPointerMove(event) {
-      const isDisabled = disabled || readOnly;
-      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
-        return;
-      }
-      if (movesAfterTouchRef.current != null) {
-        movesAfterTouchRef.current += 1;
-      }
-      const {
-        x,
-        y
-      } = incrementDownCoordsRef.current;
-      const dx = x - event.clientX;
-      const dy = y - event.clientY;
-
-      // An alternative to this technique is to detect when the NumberField's parent container
-      // has been scrolled
-      if (dx ** 2 + dy ** 2 > _constants.SCROLLING_POINTER_MOVE_DISTANCE ** 2) {
-        stopAutoChange();
-      }
-    },
-    onMouseEnter(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
-        return;
-      }
-      startAutoChange(isIncrement, event);
-    },
-    onMouseLeave() {
-      if (isTouchingButtonRef.current) {
-        return;
-      }
-      stopAutoChange();
-    },
-    onMouseUp() {
-      if (isTouchingButtonRef.current) {
-        return;
       }
-      stopAutoChange();
+      pointerHandlers.onPointerDown(event);
     }
   };
   return props;

package/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,13 +8,13 @@ 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') | undefined;
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Determines how many pixels the cursor must move before the value changes.
    * A higher value will make scrubbing less sensitive.

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

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.NumberFieldScrubArea = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -21,6 +23,7 @@ var _subscribeToVisualViewportResize = require("../utils/subscribeToVisualViewpo
 var _constants = require("../utils/constants");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
+var _utils = require("../../floating-ui-react/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An interactive area where the user can click and drag to change the field value.
@@ -35,6 +38,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
     direction = 'horizontal',
     pixelSensitivity = 2,
     teleportDistance,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -189,12 +193,10 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       }
     }
     const win = (0, _owner.ownerWindow)(inputRef.current);
-    win.addEventListener('pointerup', handleScrubPointerUp, true);
-    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    const unsubscribe = (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'pointerup', handleScrubPointerUp, true), (0, _addEventListener.addEventListener)(win, 'pointermove', handleScrubPointerMove, true));
     return () => {
       exitPointerLockTimeout.clear();
-      win.removeEventListener('pointerup', handleScrubPointerUp, true);
-      win.removeEventListener('pointermove', handleScrubPointerMove, true);
+      unsubscribe();
     };
   }, [disabled, readOnly, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
 
@@ -209,10 +211,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
         event.preventDefault();
       }
     }
-    element.addEventListener('touchstart', handleTouchStart);
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-    };
+    return (0, _addEventListener.addEventListener)(element, 'touchstart', handleTouchStart);
   }, [disabled, readOnly]);
   const defaultProps = {
     role: 'presentation',
@@ -234,7 +233,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       }
       isScrubbingRef.current = true;
       didMoveRef.current = false;
-      pointerDownTargetRef.current = event.target;
+      pointerDownTargetRef.current = (0, _utils.getTarget)(event.nativeEvent);
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

package/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/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -27,6 +27,7 @@ const NumberFieldScrubAreaCursor = exports.NumberFieldScrubAreaCursor = /*#__PUR
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/number-field/utils/constants.d.ts

@@ -1,6 +1,4 @@
 export declare const CHANGE_VALUE_TICK_DELAY = 60;
 export declare const START_AUTO_CHANGE_DELAY = 400;
-export declare const TOUCH_TIMEOUT = 50;
-export declare const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
 export declare const SCROLLING_POINTER_MOVE_DISTANCE = 8;
 export declare const DEFAULT_STEP = 1;

package/number-field/utils/constants.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOUCH_TIMEOUT = exports.START_AUTO_CHANGE_DELAY = exports.SCROLLING_POINTER_MOVE_DISTANCE = exports.MAX_POINTER_MOVES_AFTER_TOUCH = exports.DEFAULT_STEP = exports.CHANGE_VALUE_TICK_DELAY = void 0;
+exports.START_AUTO_CHANGE_DELAY = exports.SCROLLING_POINTER_MOVE_DISTANCE = exports.DEFAULT_STEP = exports.CHANGE_VALUE_TICK_DELAY = void 0;
 const CHANGE_VALUE_TICK_DELAY = exports.CHANGE_VALUE_TICK_DELAY = 60;
 const START_AUTO_CHANGE_DELAY = exports.START_AUTO_CHANGE_DELAY = 400;
-const TOUCH_TIMEOUT = exports.TOUCH_TIMEOUT = 50;
-const MAX_POINTER_MOVES_AFTER_TOUCH = exports.MAX_POINTER_MOVES_AFTER_TOUCH = 3;
 const SCROLLING_POINTER_MOVE_DISTANCE = exports.SCROLLING_POINTER_MOVE_DISTANCE = 8;
 const DEFAULT_STEP = exports.DEFAULT_STEP = 1;

package/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/number-field/utils/subscribeToVisualViewportResize.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.subscribeToVisualViewportResize = subscribeToVisualViewportResize;
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 // This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
 // scale with the content on pinch-zoom.
@@ -18,8 +19,5 @@ function subscribeToVisualViewportResize(element, visualScaleRef) {
     }
   }
   handleVisualResize();
-  vV.addEventListener('resize', handleVisualResize);
-  return () => {
-    vV.removeEventListener('resize', handleVisualResize);
-  };
+  return (0, _addEventListener.addEventListener)(vV, 'resize', handleVisualResize);
 }

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

@@ -5,9 +5,9 @@ export interface ChangeEventCustomProperties {
 }
 export interface IncrementValueParameters {
   direction: Direction;
-  event?: (Event | React.SyntheticEvent) | undefined;
+  event?: Event | React.SyntheticEvent | undefined;
   reason: DirectionalChangeReason;
-  currentValue?: (number | null) | undefined;
+  currentValue?: number | null | undefined;
 }
 export interface EventWithOptionalKeyState {
   altKey?: boolean | undefined;

package/otp-field/index.d.ts

@@ -0,0 +1,3 @@
+export * as OTPFieldPreview from "./index.parts.js";
+export type * from "./root/OTPFieldRoot.js";
+export type * from "./input/OTPFieldInput.js";

package/otp-field/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OTPFieldPreview = void 0;
+var _OTPFieldPreview = _interopRequireWildcard(require("./index.parts"));
+exports.OTPFieldPreview = _OTPFieldPreview;

package/otp-field/index.parts.d.ts

@@ -0,0 +1,3 @@
+export { OTPFieldRoot as Root } from "./root/OTPFieldRoot.js";
+export { OTPFieldInput as Input } from "./input/OTPFieldInput.js";
+export { Separator } from "../separator/Separator.js";

package/otp-field/index.parts.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _OTPFieldInput.OTPFieldInput;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _OTPFieldRoot.OTPFieldRoot;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function () {
+    return _Separator.Separator;
+  }
+});
+var _OTPFieldRoot = require("./root/OTPFieldRoot");
+var _OTPFieldInput = require("./input/OTPFieldInput");
+var _Separator = require("../separator/Separator");

package/otp-field/input/OTPFieldInput.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { OTPFieldRootState } from "../root/OTPFieldRoot.js";
+/**
+ * An individual OTP character input.
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI OTP Field](https://base-ui.com/react/components/otp-field)
+ */
+export declare const OTPFieldInput: React.ForwardRefExoticComponent<Omit<OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface OTPFieldInputState extends Omit<OTPFieldRootState, 'filled' | 'value'> {
+  /**
+   * Whether this input contains a character.
+   */
+  filled: boolean;
+  /**
+   * The input index.
+   */
+  index: number;
+  /**
+   * The character rendered in this slot.
+   */
+  value: string;
+}
+export interface OTPFieldInputProps extends BaseUIComponentProps<'input', OTPFieldInputState> {}
+export declare namespace OTPFieldInput {
+  type State = OTPFieldInputState;
+  type Props = OTPFieldInputProps;
+}