@wise/dynamic-flow-client-internal 5.30.1-experimental-1e1196b → 5.31.0-experimental-a2135d6

package/build/main.mjs

@@ -6768,9 +6768,11 @@ function ChipsTabsRendererComponent({ margin, tabs, control, tags }) {
 
 // ../renderers/src/TextInputRenderer.tsx
 import { InputGroup as InputGroup5 } from "@transferwise/components";
+import { useState as useState21 } from "react";
 
 // ../renderers/src/components/VariableTextInput.tsx
 import {
+  IconButton as IconButton4,
   Input as Input6,
   InputWithDisplayFormat,
   PhoneNumberInput,
@@ -6801,7 +6803,7 @@ function formatSsnValue(rawValue, displayFormat, isVisible) {
   if (!displayFormat) {
     return isVisible ? rawValue : "\u2022".repeat(rawValue.length);
   }
-  return displayFormat.split("").reduce(
+  const formattedValue = displayFormat.split("").reduce(
     ({ display, digitsUsed }, character) => {
       if (character === "*") {
         return digitsUsed < rawValue.length ? {
@@ -6813,6 +6815,9 @@ function formatSsnValue(rawValue, displayFormat, isVisible) {
     },
     { display: "", digitsUsed: 0 }
   ).display;
+  const displayFormatDigitCount = displayFormat.split("").filter((character) => character === "*").length;
+  const extraValue = rawValue.slice(displayFormatDigitCount);
+  return `${formattedValue}${isVisible ? extraValue : "\u2022".repeat(extraValue.length)}`;
 }
 function getRawOffset(displayValue, displayOffset, rawValueLength) {
   return Math.min(
@@ -6820,18 +6825,15 @@ function getRawOffset(displayValue, displayOffset, rawValueLength) {
     rawValueLength
   );
 }
-function replaceSsnSelection(rawValue, displayValue, insertedValue, start, end, maxDigits) {
+function replaceSsnSelection(rawValue, displayValue, insertedValue, start, end) {
   const startOffset = getRawOffset(displayValue, start, rawValue.length);
   const endOffset = getRawOffset(displayValue, end, rawValue.length);
-  const selectedLength = endOffset - startOffset;
-  const availableCapacity = Math.max(0, maxDigits - (rawValue.length - selectedLength));
-  const acceptedInsertedValue = insertedValue.slice(0, availableCapacity);
-  if (!acceptedInsertedValue) {
+  if (!insertedValue) {
     return void 0;
   }
   return {
-    value: `${rawValue.slice(0, startOffset)}${acceptedInsertedValue}${rawValue.slice(endOffset)}`,
-    caret: startOffset + acceptedInsertedValue.length
+    value: `${rawValue.slice(0, startOffset)}${insertedValue}${rawValue.slice(endOffset)}`,
+    caret: startOffset + insertedValue.length
   };
 }
 function deleteSsnSelection(rawValue, displayValue, start, end, backward) {
@@ -6868,7 +6870,7 @@ function getDisplayOffset(displayValue, rawOffset) {
 }
 
 // ../renderers/src/components/VariableTextInput.tsx
-import { jsx as jsx100, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -6883,16 +6885,15 @@ var commonKeys = [
   "value"
 ];
 function VariableTextInput(inputProps) {
-  const { id, value, control, onChange } = inputProps;
+  const { id, value, control, onChange, isSsnVisible } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
-  if (control === "ssn-input") {
-    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
-  }
   switch (control) {
     case "email":
       return /* @__PURE__ */ jsx100(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
       return /* @__PURE__ */ jsx100(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
+    case "ssn-input":
+      return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { isVisible: isSsnVisible, onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
       return /* @__PURE__ */ jsx100(
@@ -6912,6 +6913,23 @@ function VariableTextInput(inputProps) {
     }
   }
 }
+function SsnInputToggle({
+  isVisible,
+  onClick
+}) {
+  const { formatMessage } = useIntl21();
+  return /* @__PURE__ */ jsx100(
+    IconButton4,
+    {
+      priority: "minimal",
+      size: 24,
+      "aria-label": formatMessage(isVisible ? ssn_input_messages_default.hideValue : ssn_input_messages_default.showValue),
+      "aria-pressed": isVisible,
+      onClick,
+      children: isVisible ? /* @__PURE__ */ jsx100(EyeShut, { size: 24 }) : /* @__PURE__ */ jsx100(Eye, { size: 24 })
+    }
+  );
+}
 function TextInput(props) {
   const _a = props, { control, displayFormat, onChange, type } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange", "type"]);
   const InputWithPattern = control === "textarea" ? TextareaWithDisplayFormat : InputWithDisplayFormat;
@@ -6919,26 +6937,11 @@ 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, {
-    displayFormat = "",
-    maxLength,
-    onChange,
-    type: _type,
-    value = ""
-  } = _a, commonProps = __objRest(_a, [
-    "displayFormat",
-    "maxLength",
-    "onChange",
-    "type",
-    "value"
-  ]);
-  const { formatMessage } = useIntl21();
-  const [isVisible, setIsVisible] = useState20(false);
+  const _a = props, { displayFormat = "", isVisible = false, onChange, value = "" } = _a, commonProps = __objRest(_a, ["displayFormat", "isVisible", "onChange", "value"]);
   const [editVersion, setEditVersion] = useState20(0);
   const inputRef = useRef5(null);
   const selection = useRef5({ start: 0, end: 0 });
   const pendingCaret = useRef5(null);
-  const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
   const rawValue = value.replace(/\D/g, "");
   const formattedValue = formatSsnValue(rawValue, displayFormat, isVisible);
   const scheduleCaret = (rawOffset) => {
@@ -6946,14 +6949,7 @@ function SsnInput(props) {
     setEditVersion((version) => version + 1);
   };
   const replaceSelection = (insertedValue, start, end) => {
-    const result = replaceSsnSelection(
-      rawValue,
-      formattedValue,
-      insertedValue,
-      start,
-      end,
-      maxDigits
-    );
+    const result = replaceSsnSelection(rawValue, formattedValue, insertedValue, start, end);
     if (!result) {
       return;
     }
@@ -6975,134 +6971,140 @@ function SsnInput(props) {
     );
     pendingCaret.current = null;
   }, [editVersion, formattedValue, rawValue]);
-  return /* @__PURE__ */ jsxs40("div", { className: "df-ssn-input-wrapper", children: [
-    /* @__PURE__ */ jsx100(
-      "input",
-      __spreadProps(__spreadValues({
-        ref: inputRef
-      }, commonProps), {
-        className: "form-control np-form-control np-input np-input--shape-rectangle df-ssn-input",
-        type: "text",
-        inputMode: "numeric",
-        maxLength: displayFormat.length || maxLength,
-        value: formattedValue,
-        onChange: (event) => {
-          const nextValue = event.currentTarget.value;
-          const inputType = event.nativeEvent.inputType;
-          const start = selection.current.start;
-          const end = selection.current.end;
-          if (isVisible || /^\d+$/.test(nextValue)) {
-            const nextRawValue = nextValue.replace(/\D/g, "").slice(0, maxDigits);
-            scheduleCaret(nextRawValue.length);
-            onChange(nextRawValue);
-          } else if ((inputType == null ? void 0 : inputType.startsWith("delete")) || nextValue.length < formattedValue.length) {
-            deleteSelection(start, end, inputType === "deleteContentBackward");
-          } else {
-            replaceSelection(nextValue.replace(/\D/g, ""), start, end);
-          }
-        },
-        onSelect: (event) => {
-          var _a2, _b;
-          selection.current = {
-            start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-            end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-          };
-        },
-        onKeyDown: (event) => {
-          var _a2, _b;
-          selection.current = {
-            start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-            end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-          };
-          if (/^\d$/.test(event.key)) {
-            event.preventDefault();
-            replaceSelection(event.key, selection.current.start, selection.current.end);
-          } else if (event.key === "Backspace") {
-            event.preventDefault();
-            deleteSelection(selection.current.start, selection.current.end, true);
-          } else if (event.key === "Delete") {
-            event.preventDefault();
-            deleteSelection(selection.current.start, selection.current.end, false);
-          }
-        },
-        onPaste: (event) => {
-          var _a2, _b;
+  return /* @__PURE__ */ jsx100(
+    "input",
+    __spreadProps(__spreadValues({
+      ref: inputRef
+    }, commonProps), {
+      className: "form-control np-form-control np-input np-input--shape-rectangle",
+      type: "text",
+      inputMode: "numeric",
+      value: formattedValue,
+      onChange: (event) => {
+        const nextValue = event.currentTarget.value;
+        const inputType = event.nativeEvent.inputType;
+        const start = selection.current.start;
+        const end = selection.current.end;
+        if (isVisible || /^\d+$/.test(nextValue)) {
+          const nextRawValue = nextValue.replace(/\D/g, "");
+          scheduleCaret(nextRawValue.length);
+          onChange(nextRawValue);
+        } else if ((inputType == null ? void 0 : inputType.startsWith("delete")) || nextValue.length < formattedValue.length) {
+          deleteSelection(start, end, inputType === "deleteContentBackward");
+        } else {
+          replaceSelection(nextValue.replace(/\D/g, ""), start, end);
+        }
+      },
+      onSelect: (event) => {
+        var _a2, _b;
+        selection.current = {
+          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
+          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
+        };
+      },
+      onKeyDown: (event) => {
+        var _a2, _b;
+        selection.current = {
+          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
+          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
+        };
+        if (/^\d$/.test(event.key)) {
           event.preventDefault();
-          selection.current = {
-            start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-            end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-          };
-          const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
-          replaceSelection(pastedValue, selection.current.start, selection.current.end);
+          replaceSelection(event.key, selection.current.start, selection.current.end);
+        } else if (event.key === "Backspace") {
+          event.preventDefault();
+          deleteSelection(selection.current.start, selection.current.end, true);
+        } else if (event.key === "Delete") {
+          event.preventDefault();
+          deleteSelection(selection.current.start, selection.current.end, false);
         }
-      })
-    ),
-    /* @__PURE__ */ jsx100(
-      "button",
-      {
-        type: "button",
-        className: "df-ssn-input-toggle",
-        "aria-label": formatMessage(isVisible ? ssn_input_messages_default.hideValue : ssn_input_messages_default.showValue),
-        "aria-pressed": isVisible,
-        onClick: () => setIsVisible((visible) => !visible),
-        children: isVisible ? /* @__PURE__ */ jsx100(EyeShut, { size: 24 }) : /* @__PURE__ */ jsx100(Eye, { size: 24 })
+      },
+      onPaste: (event) => {
+        var _a2, _b;
+        event.preventDefault();
+        selection.current = {
+          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
+          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
+        };
+        const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
+        replaceSelection(pastedValue, selection.current.start, selection.current.end);
       }
-    )
-  ] });
+    })
+  );
 }
 
 // ../renderers/src/TextInputRenderer.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
 var TextInputRenderer = {
   canRenderType: "input-text",
-  render: (props) => {
-    const _a = props, {
+  render: (props) => /* @__PURE__ */ jsx101(TextInputRendererComponent, __spreadValues({}, props))
+};
+function TextInputRendererComponent(props) {
+  const [isSsnVisible, setIsSsnVisible] = useState21(false);
+  const _a = props, {
+    id,
+    title,
+    description,
+    help,
+    media,
+    validationState,
+    value: initialValue,
+    onChange
+  } = _a, rest = __objRest(_a, [
+    "id",
+    "title",
+    "description",
+    "help",
+    "media",
+    "validationState",
+    "value",
+    "onChange"
+  ]);
+  const value = initialValue != null ? initialValue : "";
+  const isSsnInput = props.control === "ssn-input";
+  const inputProps = __spreadProps(__spreadValues({}, rest), {
+    value,
+    id,
+    isSsnVisible,
+    onChange: (newValue) => {
+      if ((value != null ? value : "") !== (newValue != null ? newValue : "")) {
+        onChange(newValue);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx101(
+    FieldInput_default,
+    {
       id,
-      title,
+      label: title,
       description,
+      validation: validationState,
+      inlineAlert: props.inlineAlert,
+      loadingState: props.fieldLoadingState,
       help,
-      media,
-      validationState,
-      value: initialValue,
-      onChange
-    } = _a, rest = __objRest(_a, [
-      "id",
-      "title",
-      "description",
-      "help",
-      "media",
-      "validationState",
-      "value",
-      "onChange"
-    ]);
-    const value = initialValue != null ? initialValue : "";
-    const inputProps = __spreadProps(__spreadValues({}, rest), {
-      value,
-      id,
-      onChange: (newValue) => {
-        if ((value != null ? value : "") !== (newValue != null ? newValue : "")) {
-          onChange(newValue);
+      features: props.features,
+      control: props.control,
+      tags: props.tags,
+      children: /* @__PURE__ */ jsx101(
+        InputGroup5,
+        {
+          addonStart: getInputGroupAddonStart(media),
+          addonEnd: isSsnInput ? {
+            interactive: true,
+            content: /* @__PURE__ */ jsx101(
+              SsnInputToggle,
+              {
+                isVisible: isSsnVisible,
+                onClick: () => setIsSsnVisible((visible) => !visible)
+              }
+            )
+          } : void 0,
+          children: /* @__PURE__ */ jsx101(VariableTextInput, __spreadValues({}, inputProps))
         }
-      }
-    });
-    return /* @__PURE__ */ jsx101(
-      FieldInput_default,
-      {
-        id,
-        label: title,
-        description,
-        validation: validationState,
-        inlineAlert: props.inlineAlert,
-        loadingState: props.fieldLoadingState,
-        help,
-        features: props.features,
-        control: props.control,
-        tags: props.tags,
-        children: /* @__PURE__ */ jsx101(InputGroup5, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx101(VariableTextInput, __spreadValues({}, inputProps)) })
-      }
-    );
-  }
-};
+      )
+    }
+  );
+}
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UpdatableRenderer.tsx
@@ -7260,7 +7262,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_classnames35 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -7268,7 +7270,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = useState21(true);
+  const [isVisible, setIsVisible] = useState22(true);
   return isVisible ? /* @__PURE__ */ jsx104(
     Nudge,
     {
@@ -7615,13 +7617,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsxs as jsxs40 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = useDynamicFlow(dfProps);
   const { onContextMenu, contextMenu } = useDFContextMenu(df.controller);
-  return /* @__PURE__ */ jsxs41("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs40("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });
@@ -7811,6 +7813,8 @@ var en_default = {
   "df.wise.group.currencies-with-account-details": "Currencies with account details",
   "df.wise.group.popular": "Popular",
   "df.wise.group.recent": "Recent",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Scroll to bottom"
 };