@base-ui/react 1.3.0 → 1.4.0

package/number-field/root/NumberFieldRoot.js

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NumberFieldRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useTimeout = require("@base-ui/utils/useTimeout");
-var _useInterval = require("@base-ui/utils/useInterval");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useForcedRerendering = require("@base-ui/utils/useForcedRerendering");
@@ -18,6 +17,7 @@ var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _utils = require("../../floating-ui-react/utils");
 var _NumberFieldRootContext = require("./NumberFieldRootContext");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
@@ -47,6 +47,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     required = false,
     disabled: disabledProp = false,
     readOnly = false,
+    form,
     name: nameProp,
     defaultValue,
     value: valueProp,
@@ -60,6 +61,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     render,
     className,
     inputRef: inputRefProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -104,14 +106,8 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     hasPendingCommitRef.current = false;
     onValueCommittedProp?.(nextValue, eventDetails);
   });
-  const startTickTimeout = (0, _useTimeout.useTimeout)();
-  const tickInterval = (0, _useInterval.useInterval)();
-  const intentionalTouchCheckTimeout = (0, _useTimeout.useTimeout)();
-  const isPressedRef = React.useRef(false);
-  const movesAfterTouchRef = React.useRef(0);
   const allowInputSyncRef = React.useRef(true);
   const lastChangedValueRef = React.useRef(null);
-  const unsubscribeFromGlobalContextMenuRef = React.useRef(() => {});
 
   // During SSR, the value is formatted on the server, whose locale may differ from the client's
   // locale. This causes a hydration mismatch, which we manually suppress. This is preferable to
@@ -237,58 +233,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       direction
     }));
   });
-  const stopAutoChange = (0, _useStableCallback.useStableCallback)(() => {
-    intentionalTouchCheckTimeout.clear();
-    startTickTimeout.clear();
-    tickInterval.clear();
-    unsubscribeFromGlobalContextMenuRef.current();
-    movesAfterTouchRef.current = 0;
-  });
-  const startAutoChange = (0, _useStableCallback.useStableCallback)((isIncrement, triggerEvent) => {
-    stopAutoChange();
-    if (!inputRef.current) {
-      return;
-    }
-    const win = (0, _owner.ownerWindow)(inputRef.current);
-    function handleContextMenu(event) {
-      event.preventDefault();
-    }
-
-    // A global context menu is necessary to prevent the context menu from appearing when the touch
-    // is slightly outside of the element's hit area.
-    win.addEventListener('contextmenu', handleContextMenu);
-    unsubscribeFromGlobalContextMenuRef.current = () => {
-      win.removeEventListener('contextmenu', handleContextMenu);
-    };
-    win.addEventListener('pointerup', event => {
-      isPressedRef.current = false;
-      stopAutoChange();
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? _reasons.REASONS.incrementPress : _reasons.REASONS.decrementPress;
-      onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(commitReason, event));
-    }, {
-      once: true
-    });
-    function tick() {
-      const amount = getStepAmount(triggerEvent) ?? _constants.DEFAULT_STEP;
-      return incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: triggerEvent,
-        reason: isIncrement ? 'increment-press' : 'decrement-press'
-      });
-    }
-    if (!tick()) {
-      stopAutoChange();
-      return;
-    }
-    startTickTimeout.start(_constants.START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(_constants.CHANGE_VALUE_TICK_DELAY, () => {
-        if (!tick()) {
-          stopAutoChange();
-        }
-      });
-    });
-  });
 
   // We need to update the input value when the external `value` prop changes. This ends up acting
   // as a single source of truth to update the input value, bypassing the need to manually set it in
@@ -326,9 +270,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     }
     setInputMode(computedInputMode);
   }, [minWithDefault, formatStyle]);
-  React.useEffect(() => {
-    return () => stopAutoChange();
-  }, [stopAutoChange]);
 
   // The `onWheel` prop can't be prevented, so we need to use a global event listener.
   React.useEffect(function registerElementWheelListener() {
@@ -339,7 +280,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     function handleWheel(event) {
       if (
       // Allow pinch-zooming.
-      event.ctrlKey || (0, _owner.ownerDocument)(inputRef.current).activeElement !== inputRef.current) {
+      event.ctrlKey || (0, _utils.activeElement)((0, _owner.ownerDocument)(inputRef.current)) !== inputRef.current) {
         return;
       }
 
@@ -352,10 +293,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
         reason: 'wheel'
       });
     }
-    element.addEventListener('wheel', handleWheel);
-    return () => {
-      element.removeEventListener('wheel', handleWheel);
-    };
+    return (0, _addEventListener.addEventListener)(element, 'wheel', handleWheel);
   }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
   const state = React.useMemo(() => ({
     ...fieldState,
@@ -370,8 +308,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     inputRef,
     inputValue,
     value,
-    startAutoChange,
-    stopAutoChange,
     minWithDefault,
     maxWithDefault,
     disabled,
@@ -385,9 +321,6 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     valueRef,
     lastChangedValueRef,
     hasPendingCommitRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
     name,
     required,
     invalid,
@@ -401,7 +334,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     setIsScrubbing,
     state,
     onValueCommitted
-  }), [inputRef, inputValue, value, startAutoChange, stopAutoChange, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, intentionalTouchCheckTimeout, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
+  }), [inputRef, inputValue, value, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     state,
@@ -434,6 +367,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       }),
       ref: hiddenInputRef,
       type: "number",
+      form: form,
       name: name,
       value: value ?? '',
       min: min,
@@ -446,7 +380,8 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       required: required,
       "aria-hidden": true,
       tabIndex: -1,
-      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
+      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
+      suppressHydrationWarning: true
     })]
   });
 });

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Timeout } from '@base-ui/utils/useTimeout';
 import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.js";
 import { EventWithOptionalKeyState } from "../utils/types.js";
 import type { IncrementValueParameters } from "../utils/types.js";
@@ -7,8 +6,6 @@ export type InputMode = 'numeric' | 'decimal' | 'text';
 export interface NumberFieldRootContext {
   inputValue: string;
   value: number | null;
-  startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
-  stopAutoChange: () => void;
   minWithDefault: number;
   maxWithDefault: number;
   disabled: boolean;
@@ -23,9 +20,6 @@ export interface NumberFieldRootContext {
   valueRef: React.RefObject<number | null>;
   lastChangedValueRef: React.RefObject<number | null>;
   hasPendingCommitRef: React.RefObject<boolean>;
-  isPressedRef: React.RefObject<boolean | null>;
-  intentionalTouchCheckTimeout: Timeout;
-  movesAfterTouchRef: React.RefObject<number | null>;
   name: string | undefined;
   required: boolean;
   invalid: boolean | undefined;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-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";
@@ -13,15 +12,10 @@ export interface UseNumberFieldButtonParameters {
   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 | undefined;
-  movesAfterTouchRef: React.RefObject<number | null>;
   readOnly: boolean;
   setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
-  stopAutoChange: () => void;
   valueRef: React.RefObject<number | null>;
   lastChangedValueRef: React.RefObject<number | null>;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;

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.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.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/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/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;
+}