@wise/dynamic-flow-client-internal 5.29.0-experimental-cadf60b → 5.29.0-experimental-3acf859

package/build/main.js

@@ -6633,7 +6633,6 @@ var import_components69 = require("@transferwise/components");
 
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components68 = require("@transferwise/components");
-var import_WithDisplayFormat = __toESM(require("@transferwise/components/build/WithDisplayFormat/WithDisplayFormat"));
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
@@ -6643,15 +6642,18 @@ var commonKeys = [
   "disabled",
   "displayFormat",
   "id",
+  "maxLength",
+  "minLength",
   "onBlur",
   "onFocus",
   "placeholder",
+  "required",
   "value"
 ];
 function VariableTextInput(inputProps) {
   const { id, value, control, displayFormat, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input" || displayFormat === "***-***-***" || displayFormat === "***-**-****") {
+  if (control === "ssn-input" || (displayFormat == null ? void 0 : displayFormat.includes("*"))) {
     return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
   }
   switch (control) {
@@ -6687,13 +6689,57 @@ function TextInput(props) {
   return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
 }
 function SsnInput(props) {
-  const _a = props, { onChange, type: _type } = _a, commonProps = __objRest(_a, ["onChange", "type"]);
+  const _a = props, {
+    displayFormat = "",
+    maxLength,
+    minLength: _minLength,
+    onChange,
+    type: _type,
+    value = ""
+  } = _a, commonProps = __objRest(_a, [
+    "displayFormat",
+    "maxLength",
+    "minLength",
+    "onChange",
+    "type",
+    "value"
+  ]);
+  const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
+  const maskedValue = displayFormat ? displayFormat.split("").reduce(
+    ({ display, digitsUsed }, character) => {
+      if (character === "*") {
+        return digitsUsed < value.length ? { display: `${display}\u2022`, digitsUsed: digitsUsed + 1 } : { display, digitsUsed };
+      }
+      return digitsUsed > 0 && digitsUsed < value.length ? { display: `${display}${character}`, digitsUsed } : { display, digitsUsed };
+    },
+    { display: "", digitsUsed: 0 }
+  ).display : "\u2022".repeat(value.length);
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "input",
     __spreadProps(__spreadValues({}, commonProps), {
       className: "form-control np-form-control np-form-control--size-auto np-input np-input--shape-rectangle",
-      type: "password",
-      onChange: (event) => onChange(event.target.value.replace(/[^0-9]/g, ""))
+      type: "text",
+      inputMode: "numeric",
+      maxLength: displayFormat.length || maxLength,
+      value: maskedValue,
+      onChange: () => void 0,
+      onKeyDown: (event) => {
+        const rawValue = value.replace(/[^0-9]/g, "");
+        if (/^[0-9]$/.test(event.key)) {
+          event.preventDefault();
+          if (rawValue.length < maxDigits) {
+            onChange(`${rawValue}${event.key}`);
+          }
+        } else if (event.key === "Backspace") {
+          event.preventDefault();
+          onChange(rawValue.slice(0, -1));
+        }
+      },
+      onPaste: (event) => {
+        event.preventDefault();
+        const pastedValue = event.clipboardData.getData("text").replace(/[^0-9]/g, "");
+        onChange(`${value}${pastedValue}`.replace(/[^0-9]/g, "").slice(0, maxDigits));
+      }
     })
   );
 }

package/build/main.mjs

@@ -6628,7 +6628,6 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
-import WithDisplayFormatModule from "@transferwise/components/build/WithDisplayFormat/WithDisplayFormat";
 import { jsx as jsx100 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
@@ -6638,15 +6637,18 @@ var commonKeys = [
   "disabled",
   "displayFormat",
   "id",
+  "maxLength",
+  "minLength",
   "onBlur",
   "onFocus",
   "placeholder",
+  "required",
   "value"
 ];
 function VariableTextInput(inputProps) {
   const { id, value, control, displayFormat, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input" || displayFormat === "***-***-***" || displayFormat === "***-**-****") {
+  if (control === "ssn-input" || (displayFormat == null ? void 0 : displayFormat.includes("*"))) {
     return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
   }
   switch (control) {
@@ -6682,13 +6684,57 @@ function TextInput(props) {
   return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
 }
 function SsnInput(props) {
-  const _a = props, { onChange, type: _type } = _a, commonProps = __objRest(_a, ["onChange", "type"]);
+  const _a = props, {
+    displayFormat = "",
+    maxLength,
+    minLength: _minLength,
+    onChange,
+    type: _type,
+    value = ""
+  } = _a, commonProps = __objRest(_a, [
+    "displayFormat",
+    "maxLength",
+    "minLength",
+    "onChange",
+    "type",
+    "value"
+  ]);
+  const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
+  const maskedValue = displayFormat ? displayFormat.split("").reduce(
+    ({ display, digitsUsed }, character) => {
+      if (character === "*") {
+        return digitsUsed < value.length ? { display: `${display}\u2022`, digitsUsed: digitsUsed + 1 } : { display, digitsUsed };
+      }
+      return digitsUsed > 0 && digitsUsed < value.length ? { display: `${display}${character}`, digitsUsed } : { display, digitsUsed };
+    },
+    { display: "", digitsUsed: 0 }
+  ).display : "\u2022".repeat(value.length);
   return /* @__PURE__ */ jsx100(
     "input",
     __spreadProps(__spreadValues({}, commonProps), {
       className: "form-control np-form-control np-form-control--size-auto np-input np-input--shape-rectangle",
-      type: "password",
-      onChange: (event) => onChange(event.target.value.replace(/[^0-9]/g, ""))
+      type: "text",
+      inputMode: "numeric",
+      maxLength: displayFormat.length || maxLength,
+      value: maskedValue,
+      onChange: () => void 0,
+      onKeyDown: (event) => {
+        const rawValue = value.replace(/[^0-9]/g, "");
+        if (/^[0-9]$/.test(event.key)) {
+          event.preventDefault();
+          if (rawValue.length < maxDigits) {
+            onChange(`${rawValue}${event.key}`);
+          }
+        } else if (event.key === "Backspace") {
+          event.preventDefault();
+          onChange(rawValue.slice(0, -1));
+        }
+      },
+      onPaste: (event) => {
+        event.preventDefault();
+        const pastedValue = event.clipboardData.getData("text").replace(/[^0-9]/g, "");
+        onChange(`${value}${pastedValue}`.replace(/[^0-9]/g, "").slice(0, maxDigits));
+      }
     })
   );
 }