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

package/build/main.css

@@ -387,6 +387,31 @@
 .df-prefer-container-queries {
   container-type: inline-size;
 }
+
+.df-ssn-input-wrapper {
+  position: relative;
+}
+
+.df-ssn-input {
+  padding-right: 3.5rem;
+}
+
+.df-ssn-input-toggle {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 3.5rem;
+}
+
 .df-context-menu {
   position: fixed;
   z-index: 10;

package/build/main.js

@@ -336,7 +336,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -6633,6 +6633,8 @@ var import_components69 = require("@transferwise/components");
 
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components68 = require("@transferwise/components");
+var import_icons7 = require("@transferwise/icons");
+var import_react27 = require("react");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
@@ -6642,19 +6644,16 @@ 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 == null ? void 0 : displayFormat.includes("*"))) {
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
   }
   switch (control) {
     case "email":
@@ -6692,56 +6691,70 @@ function SsnInput(props) {
   const _a = props, {
     displayFormat = "",
     maxLength,
-    minLength: _minLength,
     onChange,
     type: _type,
     value = ""
   } = _a, commonProps = __objRest(_a, [
     "displayFormat",
     "maxLength",
-    "minLength",
     "onChange",
     "type",
     "value"
   ]);
+  const [isVisible, setIsVisible] = (0, import_react27.useState)(false);
   const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
-  const maskedValue = displayFormat ? displayFormat.split("").reduce(
+  const formattedValue = displayFormat ? displayFormat.split("").reduce(
     ({ display, digitsUsed }, character) => {
       if (character === "*") {
-        return digitsUsed < value.length ? { display: `${display}\u2022`, digitsUsed: digitsUsed + 1 } : { display, digitsUsed };
+        return digitsUsed < value.length ? {
+          display: `${display}${isVisible ? value[digitsUsed] : "\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: "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}`);
+  ).display : isVisible ? value : "\u2022".repeat(value.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "df-ssn-input-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      "input",
+      __spreadProps(__spreadValues({}, 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: () => void 0,
+        onKeyDown: (event) => {
+          const rawValue = value.replace(/\D/g, "");
+          if (/^\d$/.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));
           }
-        } else if (event.key === "Backspace") {
+        },
+        onPaste: (event) => {
           event.preventDefault();
-          onChange(rawValue.slice(0, -1));
+          const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
+          onChange(`${value}${pastedValue}`.replace(/\D/g, "").slice(0, maxDigits));
         }
-      },
-      onPaste: (event) => {
-        event.preventDefault();
-        const pastedValue = event.clipboardData.getData("text").replace(/[^0-9]/g, "");
-        onChange(`${value}${pastedValue}`.replace(/[^0-9]/g, "").slice(0, maxDigits));
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "df-ssn-input-toggle",
+        "aria-label": isVisible ? "Hide value" : "Show value",
+        onClick: () => setIsVisible((visible) => !visible),
+        children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.EyeShut, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.Eye, { size: 24 })
       }
-    })
-  );
+    )
+  ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -6953,7 +6966,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_components71 = require("@transferwise/components");
 var import_classnames35 = __toESM(require_classnames());
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -6961,7 +6974,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react28.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     import_components71.Nudge,
     {
@@ -7190,7 +7203,7 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_intl36 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -7212,7 +7225,7 @@ var messages_default = (0, import_react_intl35.defineMessages)({
 var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl36.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react28.useCallback)(
+  return (0, import_react29.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -7225,11 +7238,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_intl37 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl37.useIntl)();
-  return (0, import_react29.useCallback)(
+  return (0, import_react30.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -7270,10 +7283,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react30.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react31.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react30.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react30.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react31.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react31.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -7321,14 +7334,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react31.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react32.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react31.useImperativeHandle)(
+  (0, import_react32.useImperativeHandle)(
     ref,
     () => ({
       getValue: () => {

package/build/main.mjs

@@ -6628,7 +6628,9 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { Eye, EyeShut } from "@transferwise/icons";
+import { useState as useState19 } from "react";
+import { jsx as jsx100, jsxs as jsxs40 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -6637,19 +6639,16 @@ 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 == null ? void 0 : displayFormat.includes("*"))) {
-    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
+    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
   }
   switch (control) {
     case "email":
@@ -6687,56 +6686,70 @@ function SsnInput(props) {
   const _a = props, {
     displayFormat = "",
     maxLength,
-    minLength: _minLength,
     onChange,
     type: _type,
     value = ""
   } = _a, commonProps = __objRest(_a, [
     "displayFormat",
     "maxLength",
-    "minLength",
     "onChange",
     "type",
     "value"
   ]);
+  const [isVisible, setIsVisible] = useState19(false);
   const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
-  const maskedValue = displayFormat ? displayFormat.split("").reduce(
+  const formattedValue = displayFormat ? displayFormat.split("").reduce(
     ({ display, digitsUsed }, character) => {
       if (character === "*") {
-        return digitsUsed < value.length ? { display: `${display}\u2022`, digitsUsed: digitsUsed + 1 } : { display, digitsUsed };
+        return digitsUsed < value.length ? {
+          display: `${display}${isVisible ? value[digitsUsed] : "\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: "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}`);
+  ).display : isVisible ? value : "\u2022".repeat(value.length);
+  return /* @__PURE__ */ jsxs40("div", { className: "df-ssn-input-wrapper", children: [
+    /* @__PURE__ */ jsx100(
+      "input",
+      __spreadProps(__spreadValues({}, 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: () => void 0,
+        onKeyDown: (event) => {
+          const rawValue = value.replace(/\D/g, "");
+          if (/^\d$/.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));
           }
-        } else if (event.key === "Backspace") {
+        },
+        onPaste: (event) => {
           event.preventDefault();
-          onChange(rawValue.slice(0, -1));
+          const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
+          onChange(`${value}${pastedValue}`.replace(/\D/g, "").slice(0, maxDigits));
         }
-      },
-      onPaste: (event) => {
-        event.preventDefault();
-        const pastedValue = event.clipboardData.getData("text").replace(/[^0-9]/g, "");
-        onChange(`${value}${pastedValue}`.replace(/[^0-9]/g, "").slice(0, maxDigits));
+      })
+    ),
+    /* @__PURE__ */ jsx100(
+      "button",
+      {
+        type: "button",
+        className: "df-ssn-input-toggle",
+        "aria-label": isVisible ? "Hide value" : "Show value",
+        onClick: () => setIsVisible((visible) => !visible),
+        children: isVisible ? /* @__PURE__ */ jsx100(EyeShut, { size: 24 }) : /* @__PURE__ */ jsx100(Eye, { size: 24 })
       }
-    })
-  );
+    )
+  ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -6948,7 +6961,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_classnames35 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -6956,7 +6969,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = useState19(true);
+  const [isVisible, setIsVisible] = useState20(true);
   return isVisible ? /* @__PURE__ */ jsx104(
     Nudge,
     {
@@ -7303,13 +7316,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsxs as jsxs41 } 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__ */ jsxs40("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs41("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });