@base-ui/react 1.4.1 → 1.5.0

package/otp-field/root/OTPFieldRoot.js

@@ -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,
@@ -114,7 +114,7 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
   const hiddenInputPattern = validationConfig?.getRootPattern(length);
   const inputMode = inputModeProp ?? validationConfig?.inputMode;
   const hasValidLength = Number.isInteger(length) && length > 0;
-  const value = (0, _otp.normalizeOTPValue)(valueUnwrapped, length, validationType, sanitizeValue);
+  const value = (0, _otp.normalizeOTPValue)(valueUnwrapped, length, validationType, normalizeValue);
   const valueRef = (0, _useValueAsRef.useValueAsRef)(value);
   const filled = value !== '';
   const [inputCount, setInputCount] = React.useState(0);
@@ -128,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];
@@ -162,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);
@@ -174,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;
@@ -189,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);
@@ -198,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;
@@ -268,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,
@@ -297,12 +298,14 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
             focusInput(0);
           },
           onChange(event) {
-            if (event.nativeEvent.defaultPrevented) {
+            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 = (0, _otp.normalizeOTPValue)(rawValue, length, validationType, sanitizeValue);
-            if ((0, _otp.stripOTPWhitespace)(rawValue).length > normalizedValue.length) {
+            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));
@@ -333,6 +336,12 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
+function getCompleteEventDetails(details) {
+  if (details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputPaste) {
+    return (0, _createBaseUIEventDetails.createGenericEventDetails)(details.reason, details.event);
+  }
+  return null;
+}
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
   return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;
@@ -340,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) {
@@ -359,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/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 {};

package/otp-field/utils/otp.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getOTPValidationConfig = getOTPValidationConfig;
 exports.normalizeOTPValue = normalizeOTPValue;
+exports.normalizeOTPValueWithDetails = normalizeOTPValueWithDetails;
 exports.removeOTPCharacter = removeOTPCharacter;
 exports.replaceOTPValue = replaceOTPValue;
 exports.stripOTPWhitespace = stripOTPWhitespace;
@@ -37,33 +38,44 @@ function getOTPValidationConfig(validationType) {
 function stripOTPWhitespace(value) {
   return (value ?? '').replace(/\s/g, '');
 }
+function applyOTPValidation(value, validation) {
+  return validation ? value.replace(validation.regexp, '') : value;
+}
 
 /**
- * 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.
  */
-function normalizeOTPValue(value, length, validationType, sanitizeValue) {
-  let sanitizedValue = stripOTPWhitespace(value);
+function normalizeOTPValueWithDetails(value, length, validationType, normalizeValue) {
+  const strippedValue = stripOTPWhitespace(value);
   const validation = getOTPValidationConfig(validationType);
-  if (validation) {
-    sanitizedValue = sanitizedValue.replace(validation.regexp, '');
-  } else if (sanitizeValue) {
-    sanitizedValue = sanitizeValue(sanitizedValue);
+  let normalizedValue = applyOTPValidation(strippedValue, validation);
+  let didRejectCharacters = strippedValue.length > normalizedValue.length;
+  if (normalizeValue) {
+    const customNormalizedValue = normalizeValue(normalizedValue);
+    didRejectCharacters ||= normalizedValue.length > customNormalizedValue.length;
+    normalizedValue = applyOTPValidation(customNormalizedValue, validation);
+    didRejectCharacters ||= customNormalizedValue.length > normalizedValue.length;
   }
 
   // Slice by Unicode code points so multi-byte characters do not split across OTP slots.
-  return Array.from(sanitizedValue).slice(0, Math.max(length, 0)).join('');
+  const maxLength = length < 0 ? 0 : length;
+  const normalizedCharacters = Array.from(normalizedValue);
+  return [normalizedCharacters.slice(0, maxLength).join(''), didRejectCharacters || normalizedCharacters.length > maxLength];
+}
+function normalizeOTPValue(value, length, validationType, normalizeValue) {
+  return normalizeOTPValueWithDetails(value, length, validationType, normalizeValue)[0];
 }
 
 /**
  * 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.
  */
-function replaceOTPValue(currentValue, index, nextValue, length, validationType, sanitizeValue) {
-  const normalizedValue = normalizeOTPValue(nextValue, length, validationType, sanitizeValue);
+function replaceOTPValue(currentValue, index, nextValue, length, validationType, normalizeValue) {
+  const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
   const prefix = currentValue.slice(0, index);
   const suffix = currentValue.slice(index + normalizedValue.length);
-  return normalizeOTPValue(`${prefix}${normalizedValue}${suffix}`, length, validationType, sanitizeValue);
+  return normalizeOTPValue(`${prefix}${normalizedValue}${suffix}`, length, validationType, normalizeValue);
 }
 function removeOTPCharacter(currentValue, index) {
   if (index < 0 || index >= currentValue.length) {