@base-ui/react 1.4.0 → 1.5.0

package/otp-field/input/OTPFieldInput.js

@@ -10,10 +10,11 @@ var React = _interopRequireWildcard(require("react"));
 var _safeReact = require("@base-ui/utils/safeReact");
 var _warn = require("@base-ui/utils/warn");
 var _utils = require("../../floating-ui-react/utils");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _OTPFieldRootContext = require("../root/OTPFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _otp = require("../utils/otp");
@@ -51,7 +52,7 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
     reportValueInvalid,
     readOnly,
     required,
-    sanitizeValue,
+    normalizeValue,
     setValue,
     state,
     validationType,
@@ -64,6 +65,7 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
     indexGuessBehavior: _useCompositeListItem.IndexGuessBehavior.GuessFromOrder
   });
   const inputRef = React.useRef(null);
+  const direction = (0, _DirectionContext.useDirection)();
   const slotValue = value[index] ?? '';
   const inputState = (0, _OTPFieldRootContext.getOTPFieldInputState)(state, slotValue, index);
   const slotAriaLabel = externalAriaLabel;
@@ -110,11 +112,6 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
       if (event.defaultPrevented || disabled) {
         return;
       }
-      if (index > value.length) {
-        const nextIndex = Math.min(value.length, length - 1);
-        focusInput(nextIndex);
-        return;
-      }
       handleInputFocus(index, event);
     },
     onBlur(event) {
@@ -128,9 +125,8 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
         return;
       }
       const rawValue = event.currentTarget.value;
-      const nextDigits = (0, _otp.normalizeOTPValue)(event.currentTarget.value, length, validationType, sanitizeValue);
-      const didSanitize = (0, _otp.stripOTPWhitespace)(rawValue).length > nextDigits.length;
-      if (didSanitize) {
+      const [nextDigits, didRejectCharacters] = (0, _otp.normalizeOTPValueWithDetails)(rawValue, length, validationType, normalizeValue);
+      if (didRejectCharacters) {
         reportValueInvalid(rawValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       }
       if (nextDigits === '') {
@@ -142,7 +138,7 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
         }
         return;
       }
-      const nextValue = (0, _otp.replaceOTPValue)(value, index, nextDigits, length, validationType, sanitizeValue);
+      const nextValue = (0, _otp.replaceOTPValue)(value, index, nextDigits, length, validationType, normalizeValue);
       const committedValue = setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       if (committedValue != null) {
         const nextInput = Math.min(index + nextDigits.length, length - 1);
@@ -153,52 +149,66 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
       if (event.defaultPrevented || disabled) {
         return;
       }
-      if (event.key === 'ArrowLeft') {
+      const firstIndex = 0;
+      const lastIndex = Math.max(length - 1, firstIndex);
+      const endTargetIndex = Math.min(value.length, lastIndex);
+      const hasBoundaryModifier = (event.ctrlKey || event.metaKey) && !event.altKey;
+      const isRtl = direction === 'rtl';
+      const previousKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+      const nextKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+      if (event.key === previousKey) {
         (0, _utils.stopEvent)(event);
-        focusInput(Math.max(0, index - 1));
+        focusInput(hasBoundaryModifier ? firstIndex : Math.max(firstIndex, index - 1));
         return;
       }
-      if (event.key === 'ArrowRight') {
+      if (event.key === nextKey) {
         (0, _utils.stopEvent)(event);
-        focusInput(Math.min(length - 1, index + 1));
+        focusInput(hasBoundaryModifier ? endTargetIndex : Math.min(lastIndex, index + 1));
         return;
       }
-      if (event.key === 'Home') {
+      if (event.key === 'Home' || event.key === 'ArrowUp') {
         (0, _utils.stopEvent)(event);
-        focusInput(0);
+        focusInput(firstIndex);
         return;
       }
-      if (event.key === 'End') {
+      if (event.key === 'End' || event.key === 'ArrowDown') {
         (0, _utils.stopEvent)(event);
-        focusInput(Math.max(value.length - 1, 0));
+        focusInput(endTargetIndex);
         return;
       }
       if (readOnly) {
         return;
       }
-      if (event.key === 'Delete') {
-        (0, _utils.stopEvent)(event);
-        const committedValue = setValue((0, _otp.removeOTPCharacter)(value, index), (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.keyboard, event.nativeEvent));
+      function setKeyboardValue(nextValue, targetIndex) {
+        const committedValue = setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.keyboard, event.nativeEvent));
         if (committedValue != null) {
-          queueFocusInput(index, committedValue);
+          queueFocusInput(targetIndex, committedValue);
         }
+      }
+      if (event.key === 'Backspace' && hasBoundaryModifier) {
+        (0, _utils.stopEvent)(event);
+        setKeyboardValue('', firstIndex);
+        return;
+      }
+      if (event.key === 'Delete') {
+        (0, _utils.stopEvent)(event);
+        setKeyboardValue((0, _otp.removeOTPCharacter)(value, index), index);
         return;
       }
       const inputValue = event.currentTarget.value;
       const fullSelection = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputValue.length;
       if (event.key.length === 1 && fullSelection && slotValue === event.key) {
         (0, _utils.stopEvent)(event);
-        focusInput(Math.min(length - 1, index + 1));
+        if (index < length - 1) {
+          focusInput(index + 1);
+        }
         return;
       }
       if (event.key === 'Backspace') {
         (0, _utils.stopEvent)(event);
-        const deleteIndex = slotValue === '' ? Math.max(0, index - 1) : index;
-        const targetIndex = Math.max(0, index - 1);
-        const committedValue = setValue((0, _otp.removeOTPCharacter)(value, deleteIndex), (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.keyboard, event.nativeEvent));
-        if (committedValue != null) {
-          queueFocusInput(targetIndex, committedValue);
-        }
+        const targetIndex = Math.max(firstIndex, index - 1);
+        const deleteIndex = slotValue === '' ? targetIndex : index;
+        setKeyboardValue((0, _otp.removeOTPCharacter)(value, deleteIndex), targetIndex);
       }
     },
     onPaste(event) {
@@ -216,15 +226,14 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
         return;
       }
       event.preventDefault();
-      const nextDigits = (0, _otp.normalizeOTPValue)(rawValue, length, validationType, sanitizeValue);
-      const didSanitize = (0, _otp.stripOTPWhitespace)(rawValue).length > nextDigits.length;
-      if (didSanitize) {
+      const [nextDigits, didRejectCharacters] = (0, _otp.normalizeOTPValueWithDetails)(rawValue, length, validationType, normalizeValue);
+      if (didRejectCharacters) {
         reportValueInvalid(rawValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.inputPaste, event.nativeEvent));
       }
       if (nextDigits === '') {
         return;
       }
-      const committedValue = setValue((0, _otp.replaceOTPValue)(value, index, nextDigits, length, validationType, sanitizeValue), (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputPaste, event.nativeEvent));
+      const committedValue = setValue((0, _otp.replaceOTPValue)(value, index, nextDigits, length, validationType, normalizeValue), (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputPaste, event.nativeEvent));
       if (committedValue != null) {
         const nextInput = Math.min(index + nextDigits.length, length - 1);
         queueFocusInput(nextInput, committedValue);

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

@@ -20,11 +20,11 @@ export declare enum OTPFieldInputDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/otp-field/input/OTPFieldInputDataAttributes.js

@@ -26,11 +26,11 @@ let OTPFieldInputDataAttributes = exports.OTPFieldInputDataAttributes = /*#__PUR
    */
   OTPFieldInputDataAttributes["required"] = "data-required";
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   OTPFieldInputDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   OTPFieldInputDataAttributes["invalid"] = "data-invalid";
   /**

package/otp-field/root/OTPFieldRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { type OTPValidationType } from "../utils/otp.js";
 /**
  * Groups all OTP field parts and manages their state.
@@ -57,10 +57,17 @@ export interface OTPFieldRootProps extends Omit<BaseUIComponentProps<'div', OTPF
    */
   validationType?: OTPFieldRoot.ValidationType | undefined;
   /**
-   * Function for custom sanitization when `validationType` is set to `'none'`.
-   * This function runs before updating the OTP value from user interactions.
+   * Function that normalizes the OTP value after whitespace and `validationType` filtering.
+   * It runs whenever OTP Field normalizes a value, including initial/default values, controlled
+   * values, and user edits.
+   *
+   * The returned value is filtered by `validationType` again, then clamped to `length`.
+   * It should be idempotent because OTP Field may normalize the same value more than once while
+   * handling edits, storing state, and rendering controlled or uncontrolled values. Non-idempotent
+   * normalizers can compound across those normalization passes. Characters rejected while
+   * normalizing typed or pasted text are reported through `onValueInvalid`.
    */
-  sanitizeValue?: ((value: string) => string) | undefined;
+  normalizeValue?: ((value: string) => string) | undefined;
   /**
    * Whether the user must enter a value before submitting a form.
    * @default false
@@ -99,16 +106,18 @@ export interface OTPFieldRootProps extends Omit<BaseUIComponentProps<'div', OTPF
    */
   onValueChange?: ((value: string, eventDetails: OTPFieldRoot.ChangeEventDetails) => void) | undefined;
   /**
-   * Callback fired when entered text contains characters that are rejected by sanitization,
-   * before the OTP value updates.
+   * Callback fired when entered text contains characters that are rejected by validation or
+   * normalization before the OTP value updates.
    *
-   * The `value` argument is the attempted user-entered string before sanitization.
+   * The `value` argument is the attempted user-entered string before normalization.
    */
   onValueInvalid?: ((value: string, eventDetails: OTPFieldRoot.InvalidEventDetails) => void) | undefined;
   /**
-   * Callback function that is fired when the OTP value becomes complete.
+   * Callback function that is fired when the OTP value becomes complete, or when a complete value
+   * is pasted while the OTP is already complete.
    *
-   * It runs later than `onValueChange`, after the internal value update is applied.
+   * When the value changes, it runs later than `onValueChange`, after the internal value update is
+   * applied. If a complete pasted value matches the current value, `onValueChange` does not fire.
    *
    * If `autoSubmit` is enabled, it runs immediately before the owning form is submitted.
    */

package/otp-field/root/OTPFieldRoot.js

@@ -15,18 +15,18 @@ var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _warn = require("@base-ui/utils/warn");
 var _owner = require("@base-ui/utils/owner");
-var _shadowDom = require("../../floating-ui-react/utils/shadowDom");
-var _CompositeList = require("../../composite/list/CompositeList");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
-var _FormContext = require("../../form/FormContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useValueChanged = require("../../utils/useValueChanged");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _utils = require("../../floating-ui-react/utils");
+var _CompositeList = require("../../internals/composite/list/CompositeList");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../internals/labelable-provider/useAriaLabelledBy");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useValueChanged = require("../../internals/useValueChanged");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _OTPFieldRootContext = require("./OTPFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _otp = require("../utils/otp");
@@ -53,7 +53,7 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     mask = false,
     inputMode: inputModeProp,
     validationType = 'numeric',
-    sanitizeValue,
+    normalizeValue,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -113,7 +113,8 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
   const pattern = validationConfig?.slotPattern;
   const hiddenInputPattern = validationConfig?.getRootPattern(length);
   const inputMode = inputModeProp ?? validationConfig?.inputMode;
-  const value = (0, _otp.normalizeOTPValue)(valueUnwrapped, length, validationType, sanitizeValue);
+  const hasValidLength = Number.isInteger(length) && length > 0;
+  const value = (0, _otp.normalizeOTPValue)(valueUnwrapped, length, validationType, normalizeValue);
   const valueRef = (0, _useValueAsRef.useValueAsRef)(value);
   const filled = value !== '';
   const [inputCount, setInputCount] = React.useState(0);
@@ -127,16 +128,10 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useOTPFieldRootDevWarnings({
       inputCount,
-      length,
-      sanitizeValue,
-      validationType
+      length
     });
   }
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(firstInputRef, {
-    id,
-    getValue: () => valueRef.current,
-    value
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(firstInputRef, id, value);
   const focusInput = (0, _useStableCallback.useStableCallback)(index => {
     const targetIndex = Math.min(Math.max(index, 0), Math.max(inputRefs.current.length - 1, 0));
     const target = inputRefs.current[targetIndex];
@@ -161,6 +156,12 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
       formElement.requestSubmit();
     }
   }
+  function completeValue(completedValue, eventDetails) {
+    onValueCompleteProp?.(completedValue, eventDetails);
+    if (autoSubmit) {
+      requestSubmit();
+    }
+  }
   (0, _useValueChanged.useValueChanged)(value, () => {
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
@@ -173,10 +174,7 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     if (pendingCompleteValue != null) {
       pendingCompleteValueRef.current = null;
       if (pendingCompleteValue.value === value) {
-        onValueCompleteProp?.(value, pendingCompleteValue.eventDetails);
-        if (autoSubmit) {
-          requestSubmit();
-        }
+        completeValue(value, pendingCompleteValue.eventDetails);
       }
     }
     const pendingFocus = pendingFocusRef.current;
@@ -188,8 +186,12 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     }
   });
   const setValue = (0, _useStableCallback.useStableCallback)((nextValue, details) => {
-    const normalizedValue = (0, _otp.normalizeOTPValue)(nextValue, length, validationType, sanitizeValue);
+    const normalizedValue = (0, _otp.normalizeOTPValue)(nextValue, length, validationType, normalizeValue);
+    const completeEventDetails = normalizedValue.length === length && (valueRef.current.length !== length || details.reason === _reasons.REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
     if (normalizedValue === valueRef.current) {
+      if (completeEventDetails != null) {
+        completeValue(normalizedValue, completeEventDetails);
+      }
       return null;
     }
     onValueChange?.(normalizedValue, details);
@@ -197,10 +199,10 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
       return null;
     }
     setValueUnwrapped(normalizedValue);
-    if (normalizedValue.length === length && valueRef.current.length !== length) {
+    if (completeEventDetails != null) {
       pendingCompleteValueRef.current = {
         value: normalizedValue,
-        eventDetails: (0, _createBaseUIEventDetails.createGenericEventDetails)(details.reason, details.event)
+        eventDetails: completeEventDetails
       };
     } else if (normalizedValue.length !== length) {
       pendingCompleteValueRef.current = null;
@@ -221,7 +223,7 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     event.currentTarget.select();
   });
   const handleInputBlur = (0, _useStableCallback.useStableCallback)(event => {
-    if ((0, _shadowDom.contains)(rootRef.current, event.relatedTarget)) {
+    if ((0, _utils.contains)(rootRef.current, event.relatedTarget)) {
       return;
     }
     setTouched(true);
@@ -267,12 +269,12 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     reportValueInvalid,
     readOnly,
     required,
-    sanitizeValue,
+    normalizeValue,
     setValue,
     state,
     validationType,
     value
-  }), [activeIndex, autoComplete, disabled, focusInput, form, getInputId, handleInputBlur, handleInputFocus, inputMode, inputAriaLabelledBy, invalid, length, mask, pattern, queueFocusInput, readOnly, reportValueInvalid, required, sanitizeValue, setValue, state, validationType, value]);
+  }), [activeIndex, autoComplete, disabled, focusInput, form, getInputId, handleInputBlur, handleInputFocus, inputMode, inputAriaLabelledBy, invalid, length, mask, pattern, queueFocusInput, readOnly, reportValueInvalid, required, normalizeValue, setValue, state, validationType, value]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, rootRef],
     state,
@@ -290,92 +292,55 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OTPFieldRootContext.OTPFieldRootContext.Provider, {
       value: contextValue,
-      children: [element, /*#__PURE__*/(0, _jsxRuntime.jsx)(OTPFieldHiddenInput, {
-        autoComplete: autoComplete,
-        disabled: disabled,
-        focusInput: focusInput,
+      children: [element, hasValidLength && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        ...validation.getInputValidationProps({
+          onFocus() {
+            focusInput(0);
+          },
+          onChange(event) {
+            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+              // Outside Field.Root, the event is not wrapped by mergeProps.
+              event.preventBaseUIHandler?.();
+              return;
+            }
+            const rawValue = event.currentTarget.value;
+            const [normalizedValue, didRejectCharacters] = (0, _otp.normalizeOTPValueWithDetails)(rawValue, length, validationType, normalizeValue);
+            if (didRejectCharacters) {
+              reportValueInvalid(rawValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
+            }
+            const committedValue = setValue(normalizedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
+            if (committedValue != null && committedValue !== '') {
+              queueFocusInput(committedValue.length - 1, committedValue);
+            }
+          }
+        }),
+        ref: validation.inputRef,
+        type: "text",
+        id: id && name == null ? `${id}-hidden-input` : undefined,
         form: form,
-        id: id,
-        inputMode: inputMode,
-        length: length,
         name: name,
-        onValueInvalid: reportValueInvalid,
+        value: value,
+        autoComplete: autoComplete,
+        inputMode: inputMode,
+        minLength: length,
+        maxLength: length,
         pattern: hiddenInputPattern,
-        queueFocusInput: queueFocusInput,
+        disabled: disabled,
         readOnly: readOnly,
-        sanitizeValue: sanitizeValue,
         required: required,
-        setValue: setValue,
-        validationType: validationType,
-        validation: validation,
-        value: value
+        "aria-hidden": true,
+        tabIndex: -1,
+        style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
       })]
     })
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
-function OTPFieldHiddenInput(props) {
-  const {
-    autoComplete,
-    disabled,
-    focusInput,
-    form,
-    id,
-    inputMode,
-    length,
-    name,
-    onValueInvalid,
-    pattern,
-    queueFocusInput,
-    readOnly,
-    sanitizeValue,
-    required,
-    setValue,
-    validationType,
-    validation,
-    value
-  } = props;
-  if (!Number.isInteger(length) || length <= 0) {
-    return null;
+function getCompleteEventDetails(details) {
+  if (details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputPaste) {
+    return (0, _createBaseUIEventDetails.createGenericEventDetails)(details.reason, details.event);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-    ...validation.getInputValidationProps({
-      onFocus() {
-        focusInput(0);
-      },
-      onChange(event) {
-        if (event.nativeEvent.defaultPrevented) {
-          return;
-        }
-        const rawValue = event.currentTarget.value;
-        const normalizedValue = (0, _otp.normalizeOTPValue)(rawValue, length, validationType, sanitizeValue);
-        if ((0, _otp.stripOTPWhitespace)(rawValue).length > normalizedValue.length) {
-          onValueInvalid(rawValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        }
-        const committedValue = setValue(normalizedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        if (committedValue != null && committedValue !== '') {
-          queueFocusInput(committedValue.length - 1, committedValue);
-        }
-      }
-    }),
-    ref: validation.inputRef,
-    type: "text",
-    id: id && name == null ? `${id}-hidden-input` : undefined,
-    form: form,
-    name: name,
-    value: value,
-    autoComplete: autoComplete,
-    inputMode: inputMode,
-    minLength: length,
-    maxLength: length,
-    pattern: pattern,
-    disabled: disabled,
-    readOnly: readOnly,
-    required: required,
-    "aria-hidden": true,
-    tabIndex: -1,
-    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
-  });
+  return null;
 }
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
@@ -384,9 +349,7 @@ function mergeAriaIds(...values) {
 function useOTPFieldRootDevWarnings(parameters) {
   const {
     inputCount,
-    length,
-    sanitizeValue,
-    validationType
+    length
   } = parameters;
   React.useEffect(() => {
     if (!Number.isInteger(length) || length <= 0 || inputCount === 0 || inputCount === length) {
@@ -403,11 +366,4 @@ function useOTPFieldRootDevWarnings(parameters) {
     const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
     (0, _warn.warn)(`<OTPField.Root> \`length\` must be a positive integer. Received \`length={${String(length)}}\`.`, ownerStackMessage);
   }, [length]);
-  React.useEffect(() => {
-    if (sanitizeValue == null || validationType === 'none') {
-      return;
-    }
-    const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
-    (0, _warn.warn)('<OTPField.Root> `sanitizeValue` is only used when `validationType="none"`.', ownerStackMessage);
-  }, [sanitizeValue, validationType]);
 }

package/otp-field/root/OTPFieldRootContext.d.ts

@@ -20,7 +20,7 @@ export interface OTPFieldRootContext {
   reportValueInvalid: (value: string, details: OTPFieldRoot.InvalidEventDetails) => void;
   readOnly: boolean;
   required: boolean;
-  sanitizeValue: ((value: string) => string) | undefined;
+  normalizeValue: ((value: string) => string) | undefined;
   setValue: (value: string, details: OTPFieldRoot.ChangeEventDetails) => string | null;
   state: OTPFieldRootState;
   validationType: OTPFieldRoot.ValidationType;

package/otp-field/root/OTPFieldRootDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum OTPFieldRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/otp-field/root/OTPFieldRootDataAttributes.js

@@ -22,11 +22,11 @@ let OTPFieldRootDataAttributes = exports.OTPFieldRootDataAttributes = /*#__PURE_
    */
   OTPFieldRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   OTPFieldRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   OTPFieldRootDataAttributes["invalid"] = "data-invalid";
   /**

package/otp-field/utils/otp.d.ts

@@ -8,14 +8,15 @@ export type OTPValidationType = 'numeric' | 'alpha' | 'alphanumeric' | 'none';
 export declare function getOTPValidationConfig(validationType: OTPValidationType): OTPValidationConfig | null;
 export declare function stripOTPWhitespace(value: string | null | undefined): string;
 /**
- * Normalizes user-entered OTP text by stripping whitespace, applying validation or custom
- * sanitization, and clamping the final value to the configured slot count.
+ * Normalizes user-entered OTP text by stripping whitespace, applying validation and custom
+ * normalization, and clamping the final value to the configured slot count.
  */
-export declare function normalizeOTPValue(value: string | null | undefined, length: number, validationType: OTPValidationType, sanitizeValue?: ((value: string) => string) | undefined): string;
+export declare function normalizeOTPValueWithDetails(value: string | null | undefined, length: number, validationType: OTPValidationType, normalizeValue?: ((value: string) => string) | undefined): readonly [value: string, didRejectCharacters: boolean];
+export declare function normalizeOTPValue(value: string | null | undefined, length: number, validationType: OTPValidationType, normalizeValue?: ((value: string) => string) | undefined): string;
 /**
  * Replaces characters starting at the provided slot index, then re-normalizes the final OTP value
  * so paste and multi-character edits stay contiguous and length-bounded.
  */
-export declare function replaceOTPValue(currentValue: string, index: number, nextValue: string, length: number, validationType: OTPValidationType, sanitizeValue?: ((value: string) => string) | undefined): string;
+export declare function replaceOTPValue(currentValue: string, index: number, nextValue: string, length: number, validationType: OTPValidationType, normalizeValue?: ((value: string) => string) | undefined): string;
 export declare function removeOTPCharacter(currentValue: string, index: number): string;
 export {};