@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/esm/fields/OTPInput/index.mjs

@@ -1,15 +1,39 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Fragment, memo, useCallback, useEffect, useRef, useState } from "react";
 import { useProps } from "tamagui";
 import { Text, XStack, isWeb, useDidFinishSSR } from "tamagui";
 import { Button } from "../../Button/index.mjs";
 import { Field, FieldLayout } from "../../fieldLayout.mjs";
 import { getOTPCellRadius, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
-import { Input as InputParts } from "../../InputParts/index.mjs";
+import { FocusContext, Input as InputParts, InputContext } from "../../InputParts/index.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
+import { t } from "../../shared/t.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function OTPDigitInput({
+const getValidationPattern = inputType => {
+  switch (inputType) {
+    case "numeric":
+      return /[^0-9]/g;
+    case "alphanumeric":
+      return /[^a-zA-Z0-9]/g;
+    case "password":
+      return /[^a-zA-Z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/g;
+    default:
+      return /[^0-9]/g;
+  }
+};
+const getSecureTextEntry = (inputType, secure) => {
+  if (inputType === "password") return true;
+  return secure;
+};
+const valueToDigits = (value, inputType, length) => value.replace(getValidationPattern(inputType), "").slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
+const navigationKeys = ["Backspace", "ArrowLeft", "ArrowRight", "Home", "End"];
+const suppressBoxFocusRing = {
+  focused: false,
+  setFocused: _val => {}
+};
+const OTPDigitInput = memo(function OTPDigitInput2({
   value,
+  type,
   onChange,
   onKeyPress,
   onFocus,
@@ -21,72 +45,209 @@ function OTPDigitInput({
   readOnly,
   required,
   hasError,
+  digitIndex,
+  digitCount,
+  fieldId,
+  hasLabel,
   inputProps,
-  inputRef: externalRef
+  inputRef,
+  attachRef
 }) {
-  const internalRef = useRef(null);
-  const inputRef = externalRef || internalRef;
   const didFinishSSR = useDidFinishSSR();
   const {
-    knobProps
+    knobProps,
+    control
   } = useResolvedKnobs();
-  const cellSize = knobProps.sizeToken;
+  const {
+    size: contextSize
+  } = InputContext.useStyledContext();
+  const cellSize = contextSize ?? knobProps.sizeToken;
+  const cellFocusRing = ensureFocusVisibleRing({
+    ...control.focusVisibleKnobProps,
+    outlineOffset: -2
+  });
   useEffect(() => {
     if (autoFocus && didFinishSSR && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [autoFocus, didFinishSSR]);
+  }, [autoFocus, didFinishSSR, inputRef]);
   const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
   return /* @__PURE__ */jsx(InputParts.Box, {
     width: cellSize,
     height: cellSize,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
     borderRadius: cellRadius,
-    tabIndex: -1,
-    onFocus: () => {
-      onFocus();
-      if (isWeb && inputRef.current) {
-        requestAnimationFrame(() => {
-          inputRef.current?.select();
-        });
-      }
-    },
-    onBlur,
-    children: /* @__PURE__ */jsx(InputParts.Area, {
-      ref: inputRef,
-      value,
-      keyboardType: "number-pad",
-      textContentType: "oneTimeCode",
-      autoComplete: "one-time-code",
-      secureTextEntry,
-      textAlign: "center",
-      padding: 0,
-      disabled,
-      readOnly: !!readOnly,
-      "aria-required": required || void 0,
-      "aria-invalid": hasError || void 0,
-      "aria-readonly": readOnly || void 0,
-      onChangeText: text => {
-        const filtered = text.replace(/[^0-9]/g, "");
-        if (!filtered) return;
-        const newChar = filtered.length > 1 && value ? (filtered.replace(value, "") || filtered)[0] : filtered[0];
-        onChange(newChar);
-      },
-      onKeyPress: e => {
-        const event = e.nativeEvent;
-        onKeyPress(event.key);
-      },
-      ...(isWeb ? {
-        onPaste: e => {
-          e.preventDefault();
-          const pastedData = e.clipboardData?.getData("text") || "";
-          if (onPaste && pastedData) {
-            onPaste(pastedData);
+    disabled,
+    ...(isWeb ? {
+      tabIndex: -1
+    } : {}),
+    children: /* @__PURE__ */jsx(FocusContext.Provider, {
+      ...suppressBoxFocusRing,
+      children: /* @__PURE__ */jsx(InputParts.Area, {
+        ref: attachRef,
+        value,
+        focusStyle: cellFocusRing,
+        focusVisibleStyle: cellFocusRing,
+        keyboardType: "number-pad",
+        textContentType: "oneTimeCode",
+        autoComplete: "one-time-code",
+        secureTextEntry,
+        textAlign: "center",
+        padding: 0,
+        disabled,
+        readOnly: !!readOnly,
+        id: digitIndex === 0 ? fieldId : void 0,
+        "aria-label": hasLabel ? `Digit ${digitIndex + 1} of ${digitCount}` : `One-time code digit ${digitIndex + 1} of ${digitCount}`,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-readonly": readOnly || void 0,
+        onFocus: () => {
+          onFocus();
+          if (isWeb && inputRef.current) {
+            requestAnimationFrame(() => {
+              inputRef.current?.select();
+            });
           }
-        }
-      } : {}),
-      ...inputProps
+        },
+        onBlur,
+        onChangeText: text => {
+          const pattern = getValidationPattern(type);
+          const filtered = text.replace(pattern, "");
+          if (!filtered) return;
+          const newChar = filtered.length > 1 && value ? (filtered.replace(value, "") || filtered)[0] : filtered[0];
+          onChange(newChar);
+        },
+        onKeyPress: isWeb ? void 0 : e => {
+          const event = e.nativeEvent;
+          onKeyPress(event.key);
+        },
+        ...(isWeb ? {
+          // react-native-web never fires onKeyPress reliably, so drive
+          // navigation/deletion from the DOM keydown event instead
+          onKeyDown: e => {
+            if (navigationKeys.includes(e.key)) {
+              e.preventDefault();
+              onKeyPress(e.key);
+            }
+          },
+          onPaste: e => {
+            e.preventDefault();
+            const pastedData = e.clipboardData?.getData("text") || "";
+            if (pastedData) {
+              onPaste(pastedData);
+            }
+          }
+        } : {}),
+        ...inputProps
+      })
     })
   });
+});
+function OTPCellsRow({
+  digits,
+  length,
+  type,
+  secureTextEntry,
+  autoFocus,
+  disabled,
+  readOnly,
+  required,
+  hasError,
+  fieldId,
+  hasLabel,
+  separator,
+  clearable,
+  inputProps,
+  inputRefs,
+  onDigitChange,
+  onKeyPress,
+  onPaste,
+  onFocusIndex,
+  onClear
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const latest = useRef({
+    onDigitChange,
+    onKeyPress,
+    onPaste,
+    onFocusIndex
+  });
+  latest.current = {
+    onDigitChange,
+    onKeyPress,
+    onPaste,
+    onFocusIndex
+  };
+  const cellsRef = useRef(/* @__PURE__ */new Map());
+  const cellAt = index => {
+    let cell = cellsRef.current.get(index);
+    if (!cell) {
+      const inputRef = {
+        current: null
+      };
+      cell = {
+        onChange: value => latest.current.onDigitChange(index, value),
+        onKeyPress: key => latest.current.onKeyPress(index, key),
+        onPaste: text => latest.current.onPaste(text),
+        onFocus: () => latest.current.onFocusIndex(index),
+        onBlur: () => latest.current.onFocusIndex(-1),
+        inputRef,
+        attachRef: el => {
+          inputRef.current = el;
+          inputRefs.current[index] = el;
+        }
+      };
+      cellsRef.current.set(index, cell);
+    }
+    return cell;
+  };
+  return /* @__PURE__ */jsxs(XStack, {
+    gap: knobProps.gap.gap,
+    alignItems: "center",
+    children: [Array.from({
+      length
+    }, (_, index) => {
+      const cell = cellAt(index);
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(OTPDigitInput, {
+          value: digits[index],
+          type,
+          onChange: cell.onChange,
+          onKeyPress: cell.onKeyPress,
+          onPaste: cell.onPaste,
+          onFocus: cell.onFocus,
+          onBlur: cell.onBlur,
+          autoFocus: autoFocus && index === 0,
+          secureTextEntry: getSecureTextEntry(type, secureTextEntry),
+          disabled,
+          readOnly,
+          required,
+          hasError,
+          digitIndex: index,
+          digitCount: length,
+          fieldId,
+          hasLabel,
+          inputProps,
+          inputRef: cell.inputRef,
+          attachRef: cell.attachRef
+        }), separator && index < length - 1 && /* @__PURE__ */jsx(Text, {
+          children: separator
+        })]
+      }, `digit-${index}`);
+    }), clearable && !readOnly && /* @__PURE__ */jsx(Button, {
+      circular: true,
+      onPress: onClear,
+      disabled,
+      marginInlineStart: "$2",
+      "aria-label": t("Clear"),
+      tabIndex: -1,
+      children: "\xD7"
+    })]
+  });
 }
 function OTPFieldRenderer({
   field,
@@ -96,10 +257,7 @@ function OTPFieldRenderer({
   handleDigitChange,
   handleKeyPress,
   handlePaste,
-  focusedIndex: _focusedIndex,
   setFocusedIndex,
-  getSecureTextEntry,
-  getValidationPattern,
   autoFocus,
   type,
   secureTextEntry,
@@ -125,25 +283,24 @@ function OTPFieldRenderer({
     const fieldValue = field.state.value;
     if (fieldValue && fieldValue !== lastFieldValueRef.current) {
       lastFieldValueRef.current = fieldValue;
-      const fieldDigits = fieldValue.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
-      setDigits(fieldDigits);
+      setDigits(valueToDigits(fieldValue, type, length));
     }
-  }, [field.state.value, length, setDigits]);
+  }, [field.state.value, type, length, setDigits]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
   useEffect(() => {
     const code = digits.join("");
-    if (code !== lastFieldValueRef.current) {
-      lastFieldValueRef.current = code;
-      fieldHandleChangeRef.current(code);
+    if (code === lastFieldValueRef.current) return;
+    lastFieldValueRef.current = code;
+    fieldHandleChangeRef.current(code);
+    if (disabled) return;
+    onChangeRef.current?.(code);
+    if (code.length === length) {
+      onCompleteRef.current?.(code);
     }
-    if (!disabled) {
-      if (onChange) {
-        onChange(code);
-      }
-      if (code.length === length && onComplete) {
-        onComplete(code);
-      }
-    }
-  }, [digits, length, disabled, onChange, onComplete]);
+  }, [digits, length, disabled]);
   const error = field.state.meta.errors.length ? String(field.state.meta.errors[0]) : fieldProps.error;
   const handleClear = () => {
     setDigits(Array(length).fill(""));
@@ -162,59 +319,30 @@ function OTPFieldRenderer({
     size: fieldProps.size,
     knobProps,
     onBlur: fieldBlurHandler,
+    disabled,
     children: /* @__PURE__ */jsx(InputParts, {
       size: fieldProps.size || knobProps.sizeToken,
-      children: /* @__PURE__ */jsxs(XStack, {
-        gap: knobProps.gap.gap,
-        alignItems: "center",
-        children: [Array.from({
-          length
-        }, (_, index) => {
-          const inputRef = {
-            current: null
-          };
-          return /* @__PURE__ */jsxs(Fragment, {
-            children: [/* @__PURE__ */jsx(OTPDigitInput, {
-              value: digits[index],
-              onChange: value => handleDigitChange(index, value),
-              onKeyPress: key => handleKeyPress(index, key),
-              onPaste: handlePaste,
-              onFocus: () => setFocusedIndex(index),
-              onBlur: () => setFocusedIndex(-1),
-              autoFocus: autoFocus && index === 0,
-              secureTextEntry: getSecureTextEntry(type, secureTextEntry),
-              disabled,
-              readOnly,
-              required: fieldProps.required,
-              hasError: !!error,
-              inputRef,
-              inputProps: {
-                ...inputProps,
-                ref: el => {
-                  inputRefs.current[index] = el;
-                  inputRef.current = el;
-                },
-                onChangeText: text => {
-                  const pattern = getValidationPattern(type);
-                  const filtered = text.replace(pattern, "");
-                  if (!filtered) return;
-                  const newChar = filtered.length > 1 && digits[index] ? (filtered.replace(digits[index], "") || filtered)[0] : filtered[0];
-                  handleDigitChange(index, newChar);
-                }
-              }
-            }), separator && index < length - 1 && /* @__PURE__ */jsx(Text, {
-              children: separator
-            })]
-          }, `digit-${index}`);
-        }), clearable && !readOnly && /* @__PURE__ */jsx(Button, {
-          circular: true,
-          onPress: handleClear,
-          disabled,
-          marginLeft: "$2",
-          "aria-label": "Clear",
-          tabIndex: -1,
-          children: "\xD7"
-        })]
+      children: /* @__PURE__ */jsx(OTPCellsRow, {
+        digits,
+        length,
+        type,
+        secureTextEntry,
+        autoFocus,
+        disabled,
+        readOnly,
+        required: fieldProps.required,
+        hasError: !!error,
+        fieldId: id,
+        hasLabel: Boolean(fieldProps.label),
+        separator,
+        clearable,
+        inputProps,
+        inputRefs,
+        onDigitChange: handleDigitChange,
+        onKeyPress: handleKeyPress,
+        onPaste: handlePaste,
+        onFocusIndex: setFocusedIndex,
+        onClear: handleClear
       })
     })
   });
@@ -256,51 +384,64 @@ function OTPInput(props) {
   const resolvedValidators = useResolvedValidators(fieldProps.required, validators, fieldProps.label, name);
   const [digits, setDigits] = useState(() => {
     if (value) {
-      return value.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
+      return valueToDigits(value, type, length);
     }
     return Array(length).fill("");
   });
-  const [focusedIndex, setFocusedIndex] = useState(autoFocus ? 0 : -1);
+  const digitsRef = useRef(digits);
+  digitsRef.current = digits;
+  const [, setFocusedIndex] = useState(autoFocus ? 0 : -1);
   const inputRefs = useRef([]);
+  const lastEmittedCodeRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
   useEffect(() => {
-    if (value !== void 0) {
-      const newDigits = value.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
-      setDigits(newDigits);
-    }
-  }, [value, length]);
+    if (value === void 0) return;
+    const next = valueToDigits(value, type, length);
+    setDigits(prev => prev.join("") === next.join("") ? prev : next);
+    lastEmittedCodeRef.current = typeof value === "string" ? value : next.join("");
+  }, [value, type, length]);
   useEffect(() => {
     if (resolvedForm && name) {
       return;
     }
     const code = digits.join("");
-    if (onChange && !disabled) {
-      onChange(code);
-    }
-    if (code.length === length && onComplete && !disabled) {
-      onComplete(code);
+    if (code === lastEmittedCodeRef.current) return;
+    lastEmittedCodeRef.current = code;
+    if (disabled) return;
+    onChangeRef.current?.(code);
+    if (code.length === length) {
+      onCompleteRef.current?.(code);
     }
-  }, [digits, length, resolvedForm, name, onChange, onComplete, disabled]);
-  const handleDigitChange = useCallback((index, value2) => {
-    const newDigits = [...digits];
-    newDigits[index] = value2;
-    setDigits(newDigits);
-    if (value2 && index < length - 1) {
+  }, [digits, length, resolvedForm, name, disabled]);
+  const handleDigitChange = useCallback((index, digitValue) => {
+    setDigits(prev => {
+      const next = [...prev];
+      next[index] = digitValue;
+      return next;
+    });
+    if (digitValue && index < length - 1) {
       setFocusedIndex(index + 1);
       inputRefs.current[index + 1]?.focus();
     }
-  }, [digits, length]);
+  }, [length]);
   const handleKeyPress = useCallback((index, key) => {
     if (key === "Backspace") {
-      if (!digits[index] && index > 0) {
+      const wasEmpty = !digitsRef.current[index];
+      setDigits(prev => {
+        const next = [...prev];
+        if (!prev[index] && index > 0) {
+          next[index - 1] = "";
+        } else {
+          next[index] = "";
+        }
+        return next;
+      });
+      if (wasEmpty && index > 0) {
         setFocusedIndex(index - 1);
         inputRefs.current[index - 1]?.focus();
-        const newDigits = [...digits];
-        newDigits[index - 1] = "";
-        setDigits(newDigits);
-      } else {
-        const newDigits = [...digits];
-        newDigits[index] = "";
-        setDigits(newDigits);
       }
     } else if (key === "ArrowLeft" && index > 0) {
       setFocusedIndex(index - 1);
@@ -308,33 +449,23 @@ function OTPInput(props) {
     } else if (key === "ArrowRight" && index < length - 1) {
       setFocusedIndex(index + 1);
       inputRefs.current[index + 1]?.focus();
-    }
-  }, [digits, length]);
-  const handlePaste = useCallback(pastedText => {
-    const digitsOnly = pastedText.replace(/[^0-9]/g, "");
-    if (digitsOnly.length >= length) {
-      const newDigits = digitsOnly.slice(0, length).split("");
-      setDigits(newDigits);
+    } else if (key === "Home" && index > 0) {
+      setFocusedIndex(0);
+      inputRefs.current[0]?.focus();
+    } else if (key === "End" && index < length - 1) {
       setFocusedIndex(length - 1);
       inputRefs.current[length - 1]?.focus();
     }
   }, [length]);
-  const getValidationPattern = inputType => {
-    switch (inputType) {
-      case "numeric":
-        return /[^0-9]/g;
-      case "alphanumeric":
-        return /[^a-zA-Z0-9]/g;
-      case "password":
-        return /[^a-zA-Z0-9!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/g;
-      default:
-        return /[^0-9]/g;
-    }
-  };
-  const getSecureTextEntry = (inputType, secure) => {
-    if (inputType === "password") return true;
-    return secure;
-  };
+  const handlePaste = useCallback(pastedText => {
+    const pastedChars = pastedText.replace(getValidationPattern(type), "").slice(0, length).split("");
+    if (!pastedChars.length) return;
+    const newDigits = pastedChars.concat(Array(length).fill("")).slice(0, length);
+    setDigits(newDigits);
+    const focusIndex = Math.min(pastedChars.length, length - 1);
+    setFocusedIndex(focusIndex);
+    inputRefs.current[focusIndex]?.focus();
+  }, [length, type]);
   const handleClearStandalone = () => {
     setDigits(Array(length).fill(""));
     if (inputRefs.current[0]) {
@@ -342,11 +473,13 @@ function OTPInput(props) {
     }
   };
   if (skeleton) {
+    const cellSize = fieldProps.size || knobProps.sizeToken;
+    const cellRadius = getOTPCellRadius(knobProps.borderRadius.borderRadius);
     return /* @__PURE__ */jsxs(InputParts, {
-      size: fieldProps.size || knobProps.sizeToken,
+      size: cellSize,
       children: [fieldProps.label && /* @__PURE__ */jsx(Skeleton, {
         variant: "text",
-        width: "30%",
+        width: 96,
         height: 14
       }), /* @__PURE__ */jsx(XStack, {
         gap: knobProps.gap.gap,
@@ -355,8 +488,9 @@ function OTPInput(props) {
           length
         }, (_, i) => /* @__PURE__ */jsx(Skeleton, {
           variant: "rounded",
-          width: knobProps.sizeToken,
-          height: knobProps.sizeToken
+          width: cellSize,
+          height: cellSize,
+          borderRadius: cellRadius
         }, i))
       })]
     });
@@ -372,59 +506,30 @@ function OTPInput(props) {
       size: fieldProps.size,
       knobProps,
       onBlur: fieldProps.onBlur,
+      disabled,
       children: /* @__PURE__ */jsx(InputParts, {
         size: fieldProps.size || knobProps.sizeToken,
-        children: /* @__PURE__ */jsxs(XStack, {
-          gap: knobProps.gap.gap,
-          alignItems: "center",
-          children: [Array.from({
-            length
-          }, (_, index) => {
-            const inputRef = {
-              current: null
-            };
-            return /* @__PURE__ */jsxs(Fragment, {
-              children: [/* @__PURE__ */jsx(OTPDigitInput, {
-                value: digits[index],
-                onChange: value2 => handleDigitChange(index, value2),
-                onKeyPress: key => handleKeyPress(index, key),
-                onPaste: handlePaste,
-                onFocus: () => setFocusedIndex(index),
-                onBlur: () => setFocusedIndex(-1),
-                autoFocus: autoFocus && index === 0,
-                secureTextEntry: getSecureTextEntry(type, secureTextEntry),
-                disabled,
-                readOnly,
-                required: fieldProps.required,
-                hasError: !!fieldProps.error,
-                inputRef,
-                inputProps: {
-                  ...inputProps,
-                  ref: el => {
-                    inputRefs.current[index] = el;
-                    inputRef.current = el;
-                  },
-                  onChangeText: text => {
-                    const pattern = getValidationPattern(type);
-                    const filtered = text.replace(pattern, "");
-                    if (!filtered) return;
-                    const newChar = filtered.length > 1 && digits[index] ? (filtered.replace(digits[index], "") || filtered)[0] : filtered[0];
-                    handleDigitChange(index, newChar);
-                  }
-                }
-              }), separator && index < length - 1 && /* @__PURE__ */jsx(Text, {
-                children: separator
-              })]
-            }, `digit-${index}`);
-          }), clearable && !readOnly && /* @__PURE__ */jsx(Button, {
-            circular: true,
-            onPress: handleClearStandalone,
-            disabled,
-            marginLeft: "$2",
-            "aria-label": "Clear",
-            tabIndex: -1,
-            children: "\xD7"
-          })]
+        children: /* @__PURE__ */jsx(OTPCellsRow, {
+          digits,
+          length,
+          type,
+          secureTextEntry,
+          autoFocus,
+          disabled,
+          readOnly,
+          required: fieldProps.required,
+          hasError: !!fieldProps.error,
+          fieldId: id,
+          hasLabel: Boolean(fieldProps.label),
+          separator,
+          clearable,
+          inputProps,
+          inputRefs,
+          onDigitChange: handleDigitChange,
+          onKeyPress: handleKeyPress,
+          onPaste: handlePaste,
+          onFocusIndex: setFocusedIndex,
+          onClear: handleClearStandalone
         })
       })
     });
@@ -444,10 +549,7 @@ function OTPInput(props) {
       handleDigitChange,
       handleKeyPress,
       handlePaste,
-      focusedIndex,
       setFocusedIndex,
-      getSecureTextEntry,
-      getValidationPattern,
       autoFocus,
       type,
       secureTextEntry,