@arun-dev/headless 4.18.0 → 4.19.0

package/dist/otp-input/index.cjs

@@ -167,12 +167,20 @@ function useOtpInputRootContext(part) {
   }
   return context;
 }
+var GAP = " ";
 function sanitize(text, validationType) {
   return validationType === "numeric" ? text.replace(/\D/g, "") : text.replace(/[^A-Za-z0-9]/g, "");
 }
+function normalize(text, validationType, length) {
+  const allowed = validationType === "numeric" ? /[^\d ]/g : /[^A-Za-z0-9 ]/g;
+  return text.replace(allowed, "").slice(0, length).trimEnd();
+}
+function isComplete(value, length) {
+  return value.length === length && !value.includes(GAP);
+}
 function otpInputDataAttributes({ value, length, disabled }) {
   return {
-    "data-complete": value.length === length ? "" : void 0,
+    "data-complete": isComplete(value, length) ? "" : void 0,
     "data-disabled": disabled ? "" : void 0
   };
 }
@@ -183,6 +191,7 @@ function OtpInputRoot({
   value: valueProp,
   defaultValue,
   onValueChange,
+  onComplete,
   length = 6,
   validationType = "numeric",
   disabled = false,
@@ -199,12 +208,13 @@ function OtpInputRoot({
   });
   const commit = (0, import_react4.useCallback)(
     (next) => {
-      const clean = sanitize(next, validationType).slice(0, length);
+      const clean = normalize(next, validationType, length);
       if (clean === value) return;
       setValue(clean);
       onValueChange?.(clean);
+      if (isComplete(clean, length)) onComplete?.(clean);
     },
-    [validationType, length, value, setValue, onValueChange]
+    [validationType, length, value, setValue, onValueChange, onComplete]
   );
   const [selection, setSelection] = (0, import_react4.useState)(null);
   const inputRef = (0, import_react4.useRef)(null);
@@ -267,6 +277,7 @@ function OtpInputRoot({
 }
 
 // src/otp-input/OtpInputInput.tsx
+var import_react5 = require("react");
 function OtpInputInput({ render, ...rest }) {
   const { value, length, disabled, validationType, setSelection, commit, inputRef, slotAt } = useOtpInputRootContext("Input");
   function select(input, index) {
@@ -279,6 +290,48 @@ function OtpInputInput({ render, ...rest }) {
   function report(input) {
     setSelection({ start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 });
   }
+  const pendingCaret = (0, import_react5.useRef)(null);
+  (0, import_react5.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    const at = pendingCaret.current;
+    pendingCaret.current = null;
+    if (input && at !== null && input.ownerDocument.activeElement === input) select(input, at);
+  });
+  function edit(next, caret) {
+    pendingCaret.current = caret;
+    commit(next);
+  }
+  const cleared = (index) => value.slice(0, index) + GAP + value.slice(index + 1);
+  function onDelete(event, input) {
+    const start = input.selectionStart ?? 0;
+    const end = input.selectionEnd ?? start;
+    event.preventDefault();
+    if (end > start + 1) {
+      edit(value.slice(0, start) + GAP.repeat(end - start) + value.slice(end), start);
+    } else if (end === start + 1 && value.charAt(start) !== GAP) {
+      edit(cleared(start), start);
+    } else if (event.inputType.includes("Backward") && start > 0) {
+      edit(cleared(start - 1), start - 1);
+    }
+  }
+  const beforeInput = (0, import_react5.useRef)(() => {
+  });
+  beforeInput.current = (event) => {
+    const input = event.currentTarget;
+    if (event.inputType.startsWith("delete") && event.inputType !== "deleteByCut") {
+      onDelete(event, input);
+    } else if (event.inputType === "insertText") {
+      const typed = event.data ?? "";
+      if (typed.length > 0 && sanitize(typed, validationType) !== typed) event.preventDefault();
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const listener = (event) => beforeInput.current(event);
+    input.addEventListener("beforeinput", listener);
+    return () => input.removeEventListener("beforeinput", listener);
+  }, [inputRef]);
   function syncSelection(event) {
     const input = event.currentTarget;
     const start = input.selectionStart ?? 0;
@@ -301,12 +354,6 @@ function OtpInputInput({ render, ...rest }) {
       maxLength: length,
       pattern: validationType === "numeric" ? `\\d{${length}}` : `[A-Za-z0-9]{${length}}`,
       disabled: disabled || void 0,
-      onBeforeInput(event) {
-        const typed = event.data;
-        if (typed && typed.length === 1 && !sanitize(typed, validationType)) {
-          event.preventDefault();
-        }
-      },
       onChange(event) {
         commit(event.currentTarget.value);
         syncSelection(event);
@@ -317,12 +364,16 @@ function OtpInputInput({ render, ...rest }) {
         if (!pasted) return;
         const input = event.currentTarget;
         if (pasted.length >= length) {
-          commit(pasted);
+          edit(pasted, length);
           return;
         }
         const start = input.selectionStart ?? value.length;
         const end = input.selectionEnd ?? start;
-        commit(value.slice(0, start) + pasted + value.slice(end));
+        const reach = start + pasted.length;
+        edit(
+          value.slice(0, start) + pasted + GAP.repeat(Math.max(0, end - reach)) + value.slice(Math.max(end, reach)),
+          reach
+        );
       },
       onKeyDown(event) {
         if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -333,13 +384,13 @@ function OtpInputInput({ render, ...rest }) {
         select(input, event.key === "ArrowLeft" ? at - 1 : at + 1);
       },
       onClick(event) {
-        if (event.detail > 1) return;
         const index = slotAt(event.clientX);
         if (index !== null) select(event.currentTarget, index);
       },
       onSelect: syncSelection,
       onFocus(event) {
-        select(event.currentTarget, event.currentTarget.value.length);
+        const gap = value.indexOf(GAP);
+        select(event.currentTarget, gap === -1 ? value.length : gap);
       },
       onBlur() {
         setSelection(null);
@@ -350,15 +401,15 @@ function OtpInputInput({ render, ...rest }) {
 }
 
 // src/otp-input/OtpInputSlot.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 function OtpInputSlot({ index, className, children, render, ...rest }) {
   const { value, length, disabled, selection, registerSlot } = useOtpInputRootContext("Slot");
-  const char = value.charAt(index);
+  const char = value.charAt(index) === GAP ? "" : value.charAt(index);
   let active = false;
   if (selection) {
     active = selection.start === selection.end ? index === Math.min(selection.start, length - 1) : index >= selection.start && index < selection.end;
   }
-  const ref = (0, import_react5.useCallback)(
+  const ref = (0, import_react6.useCallback)(
     (element) => registerSlot(index, element),
     [registerSlot, index]
   );

package/dist/otp-input/index.d.cts

@@ -20,8 +20,18 @@ type OtpInputRootOwnProps = {
     value?: string;
     /** Initial value when uncontrolled. Read once, at mount. */
     defaultValue?: string;
-    /** Called with the code after every change, partial or complete. */
+    /**
+     * Called with the code after every change, partial or complete. A box emptied before the end
+     * is a space — `"123 56"` — so check completeness with a pattern such as `/^\d{6}$/`, not
+     * the length alone.
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Called with the code after a change that leaves it complete: every slot filled, no gap.
+     * Typing the last digit, pasting a whole code and filling an emptied slot all count; a change
+     * that leaves a slot empty does not. Use it to verify as soon as the code is in.
+     */
+    onComplete?: (value: string) => void;
     /** How many characters the code has, and so how many slots it shows. Defaults to 6. */
     length?: number;
     /**
@@ -48,7 +58,7 @@ type OtpInputRootProps = OtpInputRootOwnProps & Omit<ComponentPropsWithRef<'div'
  * Holds the value through `useControlled`. The input reports changes, and the Root keeps only
  * the characters `validationType` allows, up to `length`.
  */
-declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
+declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, onComplete, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
 
 type OtpInputInputOwnProps = {
     /** Element to render instead of the default `<input>`. Props and ref are merged onto it. */
@@ -66,7 +76,11 @@ type OtpInputInputProps = OtpInputInputOwnProps & Omit<ComponentPropsWithRef<'in
  *
  * The caret always covers one character, so typing replaces the character in the active slot
  * and moves on, and the last slot of a full code is replaced rather than refused. Left and
- * Right move one slot; Backspace and Delete are the platform's.
+ * Right move one slot.
+ *
+ * Delete and Backspace empty a slot in place: the characters after it keep their slots, and
+ * the caret stays, so the next character fills the same slot. Backspace on an empty slot
+ * empties the one before it; Delete on an empty slot does nothing.
  *
  * Carries `maxLength` and a `pattern` of exactly `length` allowed characters, so the browser's
  * own validation reports a code that is too short. Both can be overridden.

package/dist/otp-input/index.d.ts

@@ -20,8 +20,18 @@ type OtpInputRootOwnProps = {
     value?: string;
     /** Initial value when uncontrolled. Read once, at mount. */
     defaultValue?: string;
-    /** Called with the code after every change, partial or complete. */
+    /**
+     * Called with the code after every change, partial or complete. A box emptied before the end
+     * is a space — `"123 56"` — so check completeness with a pattern such as `/^\d{6}$/`, not
+     * the length alone.
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Called with the code after a change that leaves it complete: every slot filled, no gap.
+     * Typing the last digit, pasting a whole code and filling an emptied slot all count; a change
+     * that leaves a slot empty does not. Use it to verify as soon as the code is in.
+     */
+    onComplete?: (value: string) => void;
     /** How many characters the code has, and so how many slots it shows. Defaults to 6. */
     length?: number;
     /**
@@ -48,7 +58,7 @@ type OtpInputRootProps = OtpInputRootOwnProps & Omit<ComponentPropsWithRef<'div'
  * Holds the value through `useControlled`. The input reports changes, and the Root keeps only
  * the characters `validationType` allows, up to `length`.
  */
-declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
+declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, onComplete, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
 
 type OtpInputInputOwnProps = {
     /** Element to render instead of the default `<input>`. Props and ref are merged onto it. */
@@ -66,7 +76,11 @@ type OtpInputInputProps = OtpInputInputOwnProps & Omit<ComponentPropsWithRef<'in
  *
  * The caret always covers one character, so typing replaces the character in the active slot
  * and moves on, and the last slot of a full code is replaced rather than refused. Left and
- * Right move one slot; Backspace and Delete are the platform's.
+ * Right move one slot.
+ *
+ * Delete and Backspace empty a slot in place: the characters after it keep their slots, and
+ * the caret stays, so the next character fills the same slot. Backspace on an empty slot
+ * empties the one before it; Delete on an empty slot does nothing.
  *
  * Carries `maxLength` and a `pattern` of exactly `length` allowed characters, so the browser's
  * own validation reports a code that is too short. Both can be overridden.

package/dist/otp-input/index.js

@@ -27,12 +27,20 @@ function useOtpInputRootContext(part) {
   }
   return context;
 }
+var GAP = " ";
 function sanitize(text, validationType) {
   return validationType === "numeric" ? text.replace(/\D/g, "") : text.replace(/[^A-Za-z0-9]/g, "");
 }
+function normalize(text, validationType, length) {
+  const allowed = validationType === "numeric" ? /[^\d ]/g : /[^A-Za-z0-9 ]/g;
+  return text.replace(allowed, "").slice(0, length).trimEnd();
+}
+function isComplete(value, length) {
+  return value.length === length && !value.includes(GAP);
+}
 function otpInputDataAttributes({ value, length, disabled }) {
   return {
-    "data-complete": value.length === length ? "" : void 0,
+    "data-complete": isComplete(value, length) ? "" : void 0,
     "data-disabled": disabled ? "" : void 0
   };
 }
@@ -43,6 +51,7 @@ function OtpInputRoot({
   value: valueProp,
   defaultValue,
   onValueChange,
+  onComplete,
   length = 6,
   validationType = "numeric",
   disabled = false,
@@ -59,12 +68,13 @@ function OtpInputRoot({
   });
   const commit = useCallback(
     (next) => {
-      const clean = sanitize(next, validationType).slice(0, length);
+      const clean = normalize(next, validationType, length);
       if (clean === value) return;
       setValue(clean);
       onValueChange?.(clean);
+      if (isComplete(clean, length)) onComplete?.(clean);
     },
-    [validationType, length, value, setValue, onValueChange]
+    [validationType, length, value, setValue, onValueChange, onComplete]
   );
   const [selection, setSelection] = useState(null);
   const inputRef = useRef(null);
@@ -127,6 +137,7 @@ function OtpInputRoot({
 }
 
 // src/otp-input/OtpInputInput.tsx
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2 } from "react";
 function OtpInputInput({ render, ...rest }) {
   const { value, length, disabled, validationType, setSelection, commit, inputRef, slotAt } = useOtpInputRootContext("Input");
   function select(input, index) {
@@ -139,6 +150,48 @@ function OtpInputInput({ render, ...rest }) {
   function report(input) {
     setSelection({ start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 });
   }
+  const pendingCaret = useRef2(null);
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    const at = pendingCaret.current;
+    pendingCaret.current = null;
+    if (input && at !== null && input.ownerDocument.activeElement === input) select(input, at);
+  });
+  function edit(next, caret) {
+    pendingCaret.current = caret;
+    commit(next);
+  }
+  const cleared = (index) => value.slice(0, index) + GAP + value.slice(index + 1);
+  function onDelete(event, input) {
+    const start = input.selectionStart ?? 0;
+    const end = input.selectionEnd ?? start;
+    event.preventDefault();
+    if (end > start + 1) {
+      edit(value.slice(0, start) + GAP.repeat(end - start) + value.slice(end), start);
+    } else if (end === start + 1 && value.charAt(start) !== GAP) {
+      edit(cleared(start), start);
+    } else if (event.inputType.includes("Backward") && start > 0) {
+      edit(cleared(start - 1), start - 1);
+    }
+  }
+  const beforeInput = useRef2(() => {
+  });
+  beforeInput.current = (event) => {
+    const input = event.currentTarget;
+    if (event.inputType.startsWith("delete") && event.inputType !== "deleteByCut") {
+      onDelete(event, input);
+    } else if (event.inputType === "insertText") {
+      const typed = event.data ?? "";
+      if (typed.length > 0 && sanitize(typed, validationType) !== typed) event.preventDefault();
+    }
+  };
+  useEffect2(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const listener = (event) => beforeInput.current(event);
+    input.addEventListener("beforeinput", listener);
+    return () => input.removeEventListener("beforeinput", listener);
+  }, [inputRef]);
   function syncSelection(event) {
     const input = event.currentTarget;
     const start = input.selectionStart ?? 0;
@@ -161,12 +214,6 @@ function OtpInputInput({ render, ...rest }) {
       maxLength: length,
       pattern: validationType === "numeric" ? `\\d{${length}}` : `[A-Za-z0-9]{${length}}`,
       disabled: disabled || void 0,
-      onBeforeInput(event) {
-        const typed = event.data;
-        if (typed && typed.length === 1 && !sanitize(typed, validationType)) {
-          event.preventDefault();
-        }
-      },
       onChange(event) {
         commit(event.currentTarget.value);
         syncSelection(event);
@@ -177,12 +224,16 @@ function OtpInputInput({ render, ...rest }) {
         if (!pasted) return;
         const input = event.currentTarget;
         if (pasted.length >= length) {
-          commit(pasted);
+          edit(pasted, length);
           return;
         }
         const start = input.selectionStart ?? value.length;
         const end = input.selectionEnd ?? start;
-        commit(value.slice(0, start) + pasted + value.slice(end));
+        const reach = start + pasted.length;
+        edit(
+          value.slice(0, start) + pasted + GAP.repeat(Math.max(0, end - reach)) + value.slice(Math.max(end, reach)),
+          reach
+        );
       },
       onKeyDown(event) {
         if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -193,13 +244,13 @@ function OtpInputInput({ render, ...rest }) {
         select(input, event.key === "ArrowLeft" ? at - 1 : at + 1);
       },
       onClick(event) {
-        if (event.detail > 1) return;
         const index = slotAt(event.clientX);
         if (index !== null) select(event.currentTarget, index);
       },
       onSelect: syncSelection,
       onFocus(event) {
-        select(event.currentTarget, event.currentTarget.value.length);
+        const gap = value.indexOf(GAP);
+        select(event.currentTarget, gap === -1 ? value.length : gap);
       },
       onBlur() {
         setSelection(null);
@@ -213,7 +264,7 @@ function OtpInputInput({ render, ...rest }) {
 import { useCallback as useCallback2 } from "react";
 function OtpInputSlot({ index, className, children, render, ...rest }) {
   const { value, length, disabled, selection, registerSlot } = useOtpInputRootContext("Slot");
-  const char = value.charAt(index);
+  const char = value.charAt(index) === GAP ? "" : value.charAt(index);
   let active = false;
   if (selection) {
     active = selection.start === selection.end ? index === Math.min(selection.start, length - 1) : index >= selection.start && index < selection.end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",