@base-ui/react 1.4.1 → 1.5.0

package/esm/number-field/input/NumberFieldInput.js

@@ -77,10 +77,7 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
   } = useLabelableContext();
   const hasTouchedInputRef = React.useRef(false);
   const blockRevalidationRef = React.useRef(false);
-  useRegisterFieldControl(inputRef, {
-    id,
-    value
-  });
+  useRegisterFieldControl(inputRef, id, value);
   useValueChanged(value, previousValue => {
     const validateOnChange = shouldValidateOnChange();
     clearErrors(name);
@@ -254,13 +251,14 @@ export const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFie
       const isAsciiDigit = event.key >= '0' && event.key <= '9';
       const isArabicNumeral = ARABIC_DETECT_RE.test(event.key);
       const isHanNumeral = HAN_DETECT_RE.test(event.key);
+      const isPersianNumeral = PERSIAN_DETECT_RE.test(event.key);
       const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(event.key);
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
       if (
       // Allow composition events (e.g., pinyin)
       // event.nativeEvent.isComposing does not work in Safari:
       // https://bugs.webkit.org/show_bug.cgi?id=165004
-      event.which === 229 || event.altKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isAsciiDigit || isArabicNumeral || isFullwidthNumeral || isHanNumeral || isNavigateKey) {
+      event.which === 229 || event.altKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isAsciiDigit || isArabicNumeral || isFullwidthNumeral || isHanNumeral || isPersianNumeral || isNavigateKey) {
         return;
       }
 

package/esm/number-field/root/NumberFieldRoot.js

@@ -281,6 +281,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
 
       // Prevent the default behavior to avoid scrolling the page.
       event.preventDefault();
+      allowInputSyncRef.current = true;
       const amount = getStepAmount(event) ?? DEFAULT_STEP;
       incrementValue(amount, {
         direction: event.deltaY > 0 ? -1 : 1,
@@ -289,7 +290,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       });
     }
     return addEventListener(element, 'wheel', handleWheel);
-  }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
+  }, [allowWheelScrub, incrementValue, disabled, readOnly, getStepAmount]);
   const state = React.useMemo(() => ({
     ...fieldState,
     disabled,
@@ -345,7 +346,9 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
         },
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+            // Outside Field.Root, the event is not wrapped by mergeProps.
+            event.preventBaseUIHandler?.();
             return;
           }
 

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

@@ -43,6 +43,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     readOnly,
     inputRef,
     incrementValue,
+    allowInputSyncRef,
     getStepAmount,
     onValueCommitted,
     lastChangedValueRef,
@@ -141,8 +142,10 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
 
           // Manually dispatch a click event if no movement happened, since
           // preventDefault on pointerdown prevents the browser click event.
-          if (!didMoveRef.current && pointerDownTargetRef.current != null) {
-            pointerDownTargetRef.current.dispatchEvent(new MouseEvent('click', {
+          const pointerDownTarget = pointerDownTargetRef.current;
+          const input = inputRef.current;
+          if (!didMoveRef.current && pointerDownTarget != null && input) {
+            pointerDownTarget.dispatchEvent(new (ownerWindow(input).MouseEvent)('click', {
               bubbles: true,
               cancelable: true
             }));
@@ -179,6 +182,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
         const stepAmount = getStepAmount(event) ?? DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
         if (rawAmount !== 0) {
+          allowInputSyncRef.current = true;
           incrementValue(Math.abs(rawAmount), {
             direction: rawAmount >= 0 ? 1 : -1,
             event,
@@ -193,7 +197,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       exitPointerLockTimeout.clear();
       unsubscribe();
     };
-  }, [disabled, readOnly, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
+  }, [disabled, readOnly, allowInputSyncRef, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
 
   // Prevent scrolling using touch input when scrubbing.
   React.useEffect(function registerScrubberTouchPreventListener() {

package/esm/otp-field/input/OTPFieldInput.js

@@ -5,12 +5,13 @@ import { SafeReact } from '@base-ui/utils/safeReact';
 import { warn } from '@base-ui/utils/warn';
 import { stopEvent } from "../../floating-ui-react/utils.js";
 import { IndexGuessBehavior, useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
 import { useOTPFieldRootContext, getOTPFieldInputState } from "../root/OTPFieldRootContext.js";
 import { inputStateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { normalizeOTPValue, removeOTPCharacter, replaceOTPValue, stripOTPWhitespace } from "../utils/otp.js";
+import { normalizeOTPValueWithDetails, removeOTPCharacter, replaceOTPValue } from "../utils/otp.js";
 
 /**
  * An individual OTP character input.
@@ -46,7 +47,7 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
     reportValueInvalid,
     readOnly,
     required,
-    sanitizeValue,
+    normalizeValue,
     setValue,
     state,
     validationType,
@@ -59,6 +60,7 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
     indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
   });
   const inputRef = React.useRef(null);
+  const direction = useDirection();
   const slotValue = value[index] ?? '';
   const inputState = getOTPFieldInputState(state, slotValue, index);
   const slotAriaLabel = externalAriaLabel;
@@ -118,9 +120,8 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
         return;
       }
       const rawValue = event.currentTarget.value;
-      const nextDigits = normalizeOTPValue(event.currentTarget.value, length, validationType, sanitizeValue);
-      const didSanitize = stripOTPWhitespace(rawValue).length > nextDigits.length;
-      if (didSanitize) {
+      const [nextDigits, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length, validationType, normalizeValue);
+      if (didRejectCharacters) {
         reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event.nativeEvent));
       }
       if (nextDigits === '') {
@@ -132,7 +133,7 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
         }
         return;
       }
-      const nextValue = replaceOTPValue(value, index, nextDigits, length, validationType, sanitizeValue);
+      const nextValue = replaceOTPValue(value, index, nextDigits, length, validationType, normalizeValue);
       const committedValue = setValue(nextValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
       if (committedValue != null) {
         const nextInput = Math.min(index + nextDigits.length, length - 1);
@@ -143,52 +144,66 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
       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) {
         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) {
         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') {
         stopEvent(event);
-        focusInput(0);
+        focusInput(firstIndex);
         return;
       }
-      if (event.key === 'End') {
+      if (event.key === 'End' || event.key === 'ArrowDown') {
         stopEvent(event);
-        focusInput(Math.max(value.length - 1, 0));
+        focusInput(endTargetIndex);
         return;
       }
       if (readOnly) {
         return;
       }
-      if (event.key === 'Delete') {
-        stopEvent(event);
-        const committedValue = setValue(removeOTPCharacter(value, index), createChangeEventDetails(REASONS.keyboard, event.nativeEvent));
+      function setKeyboardValue(nextValue, targetIndex) {
+        const committedValue = setValue(nextValue, createChangeEventDetails(REASONS.keyboard, event.nativeEvent));
         if (committedValue != null) {
-          queueFocusInput(index, committedValue);
+          queueFocusInput(targetIndex, committedValue);
         }
+      }
+      if (event.key === 'Backspace' && hasBoundaryModifier) {
+        stopEvent(event);
+        setKeyboardValue('', firstIndex);
+        return;
+      }
+      if (event.key === 'Delete') {
+        stopEvent(event);
+        setKeyboardValue(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) {
         stopEvent(event);
-        focusInput(Math.min(length - 1, index + 1));
+        if (index < length - 1) {
+          focusInput(index + 1);
+        }
         return;
       }
       if (event.key === 'Backspace') {
         stopEvent(event);
-        const deleteIndex = slotValue === '' ? Math.max(0, index - 1) : index;
-        const targetIndex = Math.max(0, index - 1);
-        const committedValue = setValue(removeOTPCharacter(value, deleteIndex), createChangeEventDetails(REASONS.keyboard, event.nativeEvent));
-        if (committedValue != null) {
-          queueFocusInput(targetIndex, committedValue);
-        }
+        const targetIndex = Math.max(firstIndex, index - 1);
+        const deleteIndex = slotValue === '' ? targetIndex : index;
+        setKeyboardValue(removeOTPCharacter(value, deleteIndex), targetIndex);
       }
     },
     onPaste(event) {
@@ -206,15 +221,14 @@ export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInpu
         return;
       }
       event.preventDefault();
-      const nextDigits = normalizeOTPValue(rawValue, length, validationType, sanitizeValue);
-      const didSanitize = stripOTPWhitespace(rawValue).length > nextDigits.length;
-      if (didSanitize) {
+      const [nextDigits, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length, validationType, normalizeValue);
+      if (didRejectCharacters) {
         reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputPaste, event.nativeEvent));
       }
       if (nextDigits === '') {
         return;
       }
-      const committedValue = setValue(replaceOTPValue(value, index, nextDigits, length, validationType, sanitizeValue), createChangeEventDetails(REASONS.inputPaste, event.nativeEvent));
+      const committedValue = setValue(replaceOTPValue(value, index, nextDigits, length, validationType, normalizeValue), createChangeEventDetails(REASONS.inputPaste, event.nativeEvent));
       if (committedValue != null) {
         const nextInput = Math.min(index + nextDigits.length, length - 1);
         queueFocusInput(nextInput, committedValue);

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

@@ -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/esm/otp-field/root/OTPFieldRoot.js

@@ -23,7 +23,7 @@ import { createChangeEventDetails, createGenericEventDetails } from "../../inter
 import { REASONS } from "../../internals/reasons.js";
 import { OTPFieldRootContext } from "./OTPFieldRootContext.js";
 import { rootStateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { getOTPValidationConfig, normalizeOTPValue, stripOTPWhitespace } from "../utils/otp.js";
+import { getOTPValidationConfig, normalizeOTPValue, normalizeOTPValueWithDetails } from "../utils/otp.js";
 
 /**
  * Groups all OTP field parts and manages their state.
@@ -48,7 +48,7 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     mask = false,
     inputMode: inputModeProp,
     validationType = 'numeric',
-    sanitizeValue,
+    normalizeValue,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -109,7 +109,7 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   const hiddenInputPattern = validationConfig?.getRootPattern(length);
   const inputMode = inputModeProp ?? validationConfig?.inputMode;
   const hasValidLength = Number.isInteger(length) && length > 0;
-  const value = normalizeOTPValue(valueUnwrapped, length, validationType, sanitizeValue);
+  const value = normalizeOTPValue(valueUnwrapped, length, validationType, normalizeValue);
   const valueRef = useValueAsRef(value);
   const filled = value !== '';
   const [inputCount, setInputCount] = React.useState(0);
@@ -123,16 +123,10 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useOTPFieldRootDevWarnings({
       inputCount,
-      length,
-      sanitizeValue,
-      validationType
+      length
     });
   }
-  useRegisterFieldControl(firstInputRef, {
-    id,
-    getValue: () => valueRef.current,
-    value
-  });
+  useRegisterFieldControl(firstInputRef, id, value);
   const focusInput = useStableCallback(index => {
     const targetIndex = Math.min(Math.max(index, 0), Math.max(inputRefs.current.length - 1, 0));
     const target = inputRefs.current[targetIndex];
@@ -157,6 +151,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
       formElement.requestSubmit();
     }
   }
+  function completeValue(completedValue, eventDetails) {
+    onValueCompleteProp?.(completedValue, eventDetails);
+    if (autoSubmit) {
+      requestSubmit();
+    }
+  }
   useValueChanged(value, () => {
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
@@ -169,10 +169,7 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     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;
@@ -184,8 +181,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     }
   });
   const setValue = useStableCallback((nextValue, details) => {
-    const normalizedValue = normalizeOTPValue(nextValue, length, validationType, sanitizeValue);
+    const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
+    const completeEventDetails = normalizedValue.length === length && (valueRef.current.length !== length || details.reason === REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
     if (normalizedValue === valueRef.current) {
+      if (completeEventDetails != null) {
+        completeValue(normalizedValue, completeEventDetails);
+      }
       return null;
     }
     onValueChange?.(normalizedValue, details);
@@ -193,10 +194,10 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
       return null;
     }
     setValueUnwrapped(normalizedValue);
-    if (normalizedValue.length === length && valueRef.current.length !== length) {
+    if (completeEventDetails != null) {
       pendingCompleteValueRef.current = {
         value: normalizedValue,
-        eventDetails: createGenericEventDetails(details.reason, details.event)
+        eventDetails: completeEventDetails
       };
     } else if (normalizedValue.length !== length) {
       pendingCompleteValueRef.current = null;
@@ -263,12 +264,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     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 = useRenderElement('div', componentProps, {
     ref: [forwardedRef, rootRef],
     state,
@@ -292,12 +293,14 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
             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 = normalizeOTPValue(rawValue, length, validationType, sanitizeValue);
-            if (stripOTPWhitespace(rawValue).length > normalizedValue.length) {
+            const [normalizedValue, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length, validationType, normalizeValue);
+            if (didRejectCharacters) {
               reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event.nativeEvent));
             }
             const committedValue = setValue(normalizedValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
@@ -328,6 +331,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
+function getCompleteEventDetails(details) {
+  if (details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste) {
+    return 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;
@@ -335,9 +344,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) {
@@ -354,11 +361,4 @@ function useOTPFieldRootDevWarnings(parameters) {
     const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
     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.captureOwnerStack?.() || '';
-    warn('<OTPField.Root> `sanitizeValue` is only used when `validationType="none"`.', ownerStackMessage);
-  }, [sanitizeValue, validationType]);
 }

package/esm/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/esm/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/esm/otp-field/utils/otp.js

@@ -27,33 +27,44 @@ export function getOTPValidationConfig(validationType) {
 export 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.
  */
-export function normalizeOTPValue(value, length, validationType, sanitizeValue) {
-  let sanitizedValue = stripOTPWhitespace(value);
+export 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];
+}
+export 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.
  */
-export function replaceOTPValue(currentValue, index, nextValue, length, validationType, sanitizeValue) {
-  const normalizedValue = normalizeOTPValue(nextValue, length, validationType, sanitizeValue);
+export 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);
 }
 export function removeOTPCharacter(currentValue, index) {
   if (index < 0 || index >= currentValue.length) {

package/esm/popover/arrow/PopoverArrow.js

@@ -14,8 +14,8 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
  */
 export const PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/popover/backdrop/PopoverBackdrop.js

@@ -19,8 +19,8 @@ const stateAttributesMapping = {
  */
 export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBackdrop(props, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = props;

package/esm/popover/close/PopoverClose.js

@@ -18,9 +18,9 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -39,7 +39,7 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
     ref: [forwardedRef, buttonRef],
     props: [{
       onClick(event) {
-        store.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent, event.currentTarget));
+        store.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent));
       }
     }, elementProps, getButtonProps]
   });

package/esm/popover/description/PopoverDescription.js

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
@@ -23,12 +22,7 @@ export const PopoverDescription = /*#__PURE__*/React.forwardRef(function Popover
     store
   } = usePopoverRootContext();
   const id = useBaseUiId(elementProps.id);
-  useIsoLayoutEffect(() => {
-    store.set('descriptionElementId', id);
-    return () => {
-      store.set('descriptionElementId', undefined);
-    };
-  }, [store, id]);
+  store.useSyncedValueWithCleanup('descriptionElementId', id);
   const element = useRenderElement('p', componentProps, {
     ref: forwardedRef,
     props: [{

package/esm/popover/popup/PopoverPopup.d.ts

@@ -30,7 +30,7 @@ export interface PopoverPopupState {
   /**
    * Whether transitions should be skipped.
    */
-  instant: 'dismiss' | 'click' | undefined;
+  instant: 'dismiss' | 'click' | 'focus' | 'trigger-change' | undefined;
 }
 export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopupState> {
   /**