@multiplatform.one/forms 6.7.0 → 7.1.0

package/dist/cjs/fields/OTPInput/index.cjs

@@ -22,7 +22,8 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var OTPInput_exports = {};
 __export(OTPInput_exports, {
-  OTPInput: () => OTPInput
+  OTPInput: () => OTPInput,
+  extractOtpCode: () => extractOtpCode
 });
 module.exports = __toCommonJS(OTPInput_exports);
 var import_theme = require("@multiplatform.one/theme");
@@ -34,7 +35,9 @@ var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
+var import_otpCellCss = require("./otpCellCss.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const getValidationPattern = inputType => {
   switch (inputType) {
@@ -53,7 +56,29 @@ const getSecureTextEntry = (inputType, secure) => {
   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 navigationKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Home", "End"];
+function extractOtpCode(text, inputType, length) {
+  if (!text || length <= 0) return "";
+  const stripped = text.replace(getValidationPattern(inputType), "");
+  if (stripped.length === length) return stripped;
+  const splitter = inputType === "alphanumeric" ? /[^a-zA-Z0-9]+/ : /\D+/;
+  if (inputType === "numeric" || inputType === "alphanumeric") {
+    const tokens = text.split(splitter).filter(token => token.length === length);
+    if (tokens.length) return tokens[tokens.length - 1];
+  }
+  return stripped.slice(0, length);
+}
+function otpGroupSizes(length, separator) {
+  if (separator || length < 4 || length % 2 !== 0) return null;
+  const half = length / 2;
+  return [half, half];
+}
+function digitFontSize(cellSize) {
+  const key = String(cellSize ?? "$true");
+  if (key === "$2" || key === "28") return "$5";
+  if (key === "$4" || key === "$true" || key === "44") return "$7";
+  return "$6";
+}
 const suppressBoxFocusRing = {
   focused: false,
   setFocused: _val => {}
@@ -93,12 +118,16 @@ const OTPDigitInput = (0, import_react.memo)(function OTPDigitInput2({
     ...control.focusVisibleKnobProps,
     outlineOffset: -2
   });
+  if (import_tamagui2.isWeb) (0, import_otpCellCss.ensureOtpCellCss)();
   (0, import_react.useEffect)(() => {
     if (autoFocus && didFinishSSR && inputRef.current) {
       inputRef.current.focus();
     }
   }, [autoFocus, didFinishSSR, inputRef]);
   const cellRadius = (0, import_utils.getOTPCellRadius)(knobProps.borderRadius.borderRadius);
+  const isNumeric = type === "numeric";
+  const cellBorder = hasError ? import_colorRamps.formCommonColors.error : value ? import_colorRamps.formControlColors.boundary : import_colorRamps.formInputColors.border.base;
+  const firstCell = digitIndex === 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
     width: cellSize,
     height: cellSize,
@@ -106,9 +135,24 @@ const OTPDigitInput = (0, import_react.memo)(function OTPDigitInput2({
     flexShrink: 0,
     flexBasis: "auto",
     borderRadius: cellRadius,
+    justifyContent: "center",
+    alignItems: "center",
+    elevation: 0,
+    shadowOpacity: 0,
+    borderColor: cellBorder,
+    hoverStyle: {
+      borderColor: hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.hover
+    },
+    focusStyle: {
+      borderColor: hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.focus
+    },
     disabled,
     ...(import_tamagui2.isWeb ? {
-      tabIndex: -1
+      tabIndex: -1,
+      className: knobProps.transition ? "mp-otp-cell" : "mp-otp-cell mp-otp-motion-none",
+      style: {
+        boxShadow: "none"
+      }
     } : {}),
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
       ...suppressBoxFocusRing,
@@ -117,19 +161,23 @@ const OTPDigitInput = (0, import_react.memo)(function OTPDigitInput2({
         value,
         focusStyle: cellFocusRing,
         focusVisibleStyle: cellFocusRing,
-        keyboardType: "number-pad",
-        textContentType: "oneTimeCode",
-        autoComplete: "one-time-code",
+        keyboardType: isNumeric ? "number-pad" : "default",
+        textContentType: firstCell ? "oneTimeCode" : "none",
+        autoComplete: firstCell ? "one-time-code" : "off",
+        autoCorrect: false,
         secureTextEntry,
         textAlign: "center",
         padding: 0,
+        fontWeight: "600",
+        fontSize: digitFontSize(cellSize),
         disabled,
         readOnly: !!readOnly,
-        id: digitIndex === 0 ? fieldId : void 0,
+        id: firstCell ? 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,
+        placeholder: " ",
         onFocus: () => {
           onFocus();
           if (import_tamagui2.isWeb && inputRef.current) {
@@ -143,14 +191,23 @@ const OTPDigitInput = (0, import_react.memo)(function OTPDigitInput2({
           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);
+          if (filtered.length > 1) {
+            onPaste(filtered);
+            return;
+          }
+          onChange(filtered[0]);
         },
         onKeyPress: import_tamagui2.isWeb ? void 0 : e => {
           const event = e.nativeEvent;
           onKeyPress(event.key);
         },
         ...(import_tamagui2.isWeb ? {
+          className: "mp-otp-area",
+          inputMode: isNumeric ? "numeric" : "text",
+          pattern: isNumeric ? "[0-9]*" : void 0,
+          autoCapitalize: isNumeric ? "none" : "characters",
+          spellCheck: false,
+          enterKeyHint: digitIndex === digitCount - 1 ? "done" : "next",
           // react-native-web never fires onKeyPress reliably, so drive
           // navigation/deletion from the DOM keydown event instead
           onKeyDown: e => {
@@ -232,48 +289,84 @@ function OTPCellsRow({
     }
     return cell;
   };
+  const renderDigit = index => {
+    const cell = cellAt(index);
+    return /* @__PURE__ */(0, import_jsx_runtime.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
+    }, `digit-${index}`);
+  };
+  const groups = otpGroupSizes(length, separator);
+  const cellGap = knobProps.gap.gap;
+  const groupGap = "$8";
+  const hasValue = digits.some(Boolean);
+  const clearButton = clearable && !readOnly && hasValue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+    chromeless: true,
+    circular: true,
+    size: "$2",
+    onPress: onClear,
+    disabled,
+    marginInlineStart: "$2",
+    "aria-label": (0, import_t.t)("Clear"),
+    tabIndex: -1,
+    children: "\xD7"
+  }) : null;
+  const rowA11y = import_tamagui2.isWeb ? {
+    role: "group",
+    ...(hasLabel ? {} : {
+      "aria-label": (0, import_t.t)("One-time code")
+    })
+  } : {};
+  if (groups) {
+    let offset = 0;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+      gap: groupGap,
+      alignItems: "center",
+      ...rowA11y,
+      children: [groups.map((size, gi) => {
+        const start = offset;
+        offset += size;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+          gap: cellGap,
+          alignItems: "center",
+          children: Array.from({
+            length: size
+          }, (_, j) => renderDigit(start + j))
+        }, `otp-group-${gi}`);
+      }), clearButton]
+    });
+  }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
-    gap: knobProps.gap.gap,
+    gap: cellGap,
     alignItems: "center",
+    ...rowA11y,
     children: [Array.from({
       length
-    }, (_, index) => {
-      const cell = cellAt(index);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-          children: separator
-        })]
-      }, `digit-${index}`);
-    }), clearable && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      circular: true,
-      onPress: onClear,
-      disabled,
-      marginInlineStart: "$2",
-      "aria-label": (0, import_t.t)("Clear"),
-      tabIndex: -1,
-      children: "\xD7"
-    })]
+    }, (_, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+      children: [renderDigit(index), separator && index < length - 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+        ...knobProps.body,
+        color: import_colorRamps.formCommonColors.muted,
+        children: separator
+      })]
+    }, `digit-${index}`)), clearButton]
   });
 }
 function OTPFieldRenderer({
@@ -455,7 +548,7 @@ function OTPInput(props) {
     }
   }, [length]);
   const handleKeyPress = (0, import_react.useCallback)((index, key) => {
-    if (key === "Backspace") {
+    if (key === "Backspace" || key === "Delete") {
       const wasEmpty = !digitsRef.current[index];
       setDigits(prev => {
         const next = [...prev];
@@ -485,7 +578,7 @@ function OTPInput(props) {
     }
   }, [length]);
   const handlePaste = (0, import_react.useCallback)(pastedText => {
-    const pastedChars = pastedText.replace(getValidationPattern(type), "").slice(0, length).split("");
+    const pastedChars = extractOtpCode(pastedText, type, length).split("");
     if (!pastedChars.length) return;
     const newDigits = pastedChars.concat(Array(length).fill("")).slice(0, length);
     setDigits(newDigits);
@@ -493,6 +586,23 @@ function OTPInput(props) {
     setFocusedIndex(focusIndex);
     inputRefs.current[focusIndex]?.focus();
   }, [length, type]);
+  (0, import_react.useEffect)(() => {
+    if (!import_tamagui2.isWeb || type !== "numeric" || disabled || readOnly) return;
+    if (typeof window === "undefined" || !("OTPCredential" in window)) return;
+    const credentials = navigator.credentials;
+    if (!credentials?.get) return;
+    const ac = new AbortController();
+    void credentials.get({
+      otp: {
+        transport: ["sms"]
+      },
+      signal: ac.signal
+    }).then(cred => {
+      const code = cred?.code;
+      if (code) handlePaste(code);
+    }).catch(() => {});
+    return () => ac.abort();
+  }, [type, disabled, readOnly, handlePaste]);
   const handleClearStandalone = () => {
     setDigits(Array(length).fill(""));
     if (inputRefs.current[0]) {
@@ -502,23 +612,43 @@ function OTPInput(props) {
   if (skeleton) {
     const cellSize = fieldProps.size || knobProps.sizeToken;
     const cellRadius = (0, import_utils.getOTPCellRadius)(knobProps.borderRadius.borderRadius);
+    const cellGap = knobProps.gap.gap;
+    const groups = otpGroupSizes(length, separator);
+    const groupGap = "$8";
+    const labelHeight = 16;
+    const skeletonCell = i => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+      variant: "rounded",
+      width: cellSize,
+      height: cellSize,
+      borderRadius: cellRadius
+    }, i);
+    let groupOffset = 0;
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
       size: cellSize,
       children: [fieldProps.label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "text",
         width: 96,
-        height: 14
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-        gap: knobProps.gap.gap,
+        height: labelHeight
+      }), groups ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+        gap: groupGap,
+        alignItems: "center",
+        children: groups.map((size, gi) => {
+          const start = groupOffset;
+          groupOffset += size;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+            gap: cellGap,
+            alignItems: "center",
+            children: Array.from({
+              length: size
+            }, (_, j) => skeletonCell(start + j))
+          }, `otp-skel-${gi}`);
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+        gap: cellGap,
         alignItems: "center",
         children: Array.from({
           length
-        }, (_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-          variant: "rounded",
-          width: cellSize,
-          height: cellSize,
-          borderRadius: cellRadius
-        }, i))
+        }, (_, i) => skeletonCell(i))
       })]
     });
   }